mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add scss color variables

Browse source
This commit is contained in:
Mutasem 2021-07-08 11:36:04 +02:00
parent 3cbe31dd5e
commit e174c1ddfd
3 changed files with 39 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/editor-ui/src/components/UpdatesPanel.vue
View file

@ -67,7 +67,7 @@ export default Vue.extend({
p { p {
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: #7D7D87; color: $--updates-panel-description-text-color;
font-weight: 400; font-weight: 400;
} }
@ -80,7 +80,7 @@ export default Vue.extend({
margin: 0; margin: 0;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
color: #555555; color: $--updates-panel-text-color;
font-weight: 400; font-weight: 400;
} }
@ -89,8 +89,8 @@ export default Vue.extend({
} }
.versions { .versions {
background-color: #F8F9FB; background-color: $--updates-panel-dark-background-color;
border-top: 1px #DBDFE7 solid; border-top: $--updates-panel-border;
height: 100%; height: 100%;
padding: 30px; padding: 30px;
overflow-y: scroll; overflow-y: scroll;
@ -106,12 +106,12 @@ export default Vue.extend({
font-size: 14px; font-size: 14px;
svg { svg {
color: #909399; color: $--updates-panel-info-icon-color;
margin-right: 5px; margin-right: 5px;
} }
span { span {
color: $--color-primary; color: $--updates-panel-info-url-color;
font-weight: 600; font-weight: 600;
} }
} }

24
packages/editor-ui/src/components/VersionCard.vue
View file

@ -50,21 +50,21 @@ export default Vue.extend({
<style module lang="scss"> <style module lang="scss">
.card { .card {
background-color: #fff; background-color: #fff;
border: 1px #DBDFE7 solid; border: $--version-card-border;
border-radius: 8px; border-radius: 8px;
display: block; display: block;
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
box-shadow: 0px 2px 10px rgba(109, 48, 40, 0.07); box-shadow: 0px 2px 10px $--version-card-box-shadow-color;
} }
} }
.header { .header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-bottom: 1px solid #DBDFE7; border-bottom: $--version-card-border;
padding-bottom: 10px; padding-bottom: 10px;
> * { > * {
@ -85,21 +85,21 @@ export default Vue.extend({
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
color: #666666; color: $--version-card-name-text-color;
} }
.description { .description {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 19px; line-height: 19px;
color: #7D7D87; color: $--version-card-description-text-color;
margin-top: 15px; margin-top: 15px;
} }
.released { .released {
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
color: #909399; color: $--version-card-release-date-text-color;
} }
.nodes { .nodes {
@ -120,20 +120,20 @@ export default Vue.extend({
} }
.security-update { .security-update {
color: #f45959; color: $--version-card-security-badge-color;
background-color: #fef0f0; background-color: $--version-card-security-badge-background-color;
border-color: #fde2e2; border-color: $--version-card-security-badge-border-color;
} }
.breaking-change { .breaking-change {
background-color: rgba(255, 229, 100, 0.3); background-color: $--version-card-breaking-change-background-color;
color: #6B5900; color: $--version-card-breaking-change-color;
border: none; border: none;
} }
.security-flag { .security-flag {
font-size: 14px; font-size: 14px;
height: 18px; height: 18px;
color: #ff8080; color: $--version-card-security-flag-color;
} }
</style> </style>

21
packages/editor-ui/src/n8n-theme-variables.scss
View file

@ -90,3 +90,24 @@ $--trigger-icon-background-color: #fff;
// drawer // drawer
$--drawer-background-color: #fff; $--drawer-background-color: #fff;
// updates-panel
$--updates-panel-info-icon-color: #909399;
$--updates-panel-info-url-color: $--color-primary;
$--updates-panel-border: 1px #dbdfe7 solid;
$--updates-panel-dark-background-color: #f8f9fb;
$--updates-panel-description-text-color: #7d7d87;
$--updates-panel-text-color: #555555;
// versions card
$--version-card-name-text-color: #666666;
$--version-card-border: 1px #dbdfe7 solid;
$--version-card-description-text-color: #7d7d87;
$--version-card-release-date-text-color: #909399;
$--version-card-security-badge-color: #f45959;
$--version-card-security-badge-background-color: #fef0f0;
$--version-card-security-badge-border-color: #fde2e2;
$--version-card-breaking-change-background-color: rgba(255, 229, 100, 0.3);
$--version-card-breaking-change-color: #6b5900;
$--version-card-security-flag-color: #ff8080;
$--version-card-box-shadow-color: rgba(109, 48, 40, 0.07);