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 {
font-size: 14px;
line-height: 22px;
color: #7D7D87;
color: $--updates-panel-description-text-color;
font-weight: 400;
}
@ -80,7 +80,7 @@ export default Vue.extend({
margin: 0;
font-size: 24px;
line-height: 24px;
color: #555555;
color: $--updates-panel-text-color;
font-weight: 400;
}
@ -89,8 +89,8 @@ export default Vue.extend({
}
.versions {
background-color: #F8F9FB;
border-top: 1px #DBDFE7 solid;
background-color: $--updates-panel-dark-background-color;
border-top: $--updates-panel-border;
height: 100%;
padding: 30px;
overflow-y: scroll;
@ -106,12 +106,12 @@ export default Vue.extend({
font-size: 14px;
svg {
color: #909399;
color: $--updates-panel-info-icon-color;
margin-right: 5px;
}
span {
color: $--color-primary;
color: $--updates-panel-info-url-color;
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">
.card {
background-color: #fff;
border: 1px #DBDFE7 solid;
border: $--version-card-border;
border-radius: 8px;
display: block;
padding: 15px;
text-decoration: none;
&:hover {
box-shadow: 0px 2px 10px rgba(109, 48, 40, 0.07);
box-shadow: 0px 2px 10px $--version-card-box-shadow-color;
}
}
.header {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #DBDFE7;
border-bottom: $--version-card-border;
padding-bottom: 10px;
> * {
@ -85,21 +85,21 @@ export default Vue.extend({
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #666666;
color: $--version-card-name-text-color;
}
.description {
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #7D7D87;
color: $--version-card-description-text-color;
margin-top: 15px;
}
.released {
font-size: 12px;
line-height: 18px;
color: #909399;
color: $--version-card-release-date-text-color;
}
.nodes {
@ -120,20 +120,20 @@ export default Vue.extend({
}
.security-update {
color: #f45959;
background-color: #fef0f0;
border-color: #fde2e2;
color: $--version-card-security-badge-color;
background-color: $--version-card-security-badge-background-color;
border-color: $--version-card-security-badge-border-color;
}
.breaking-change {
background-color: rgba(255, 229, 100, 0.3);
color: #6B5900;
background-color: $--version-card-breaking-change-background-color;
color: $--version-card-breaking-change-color;
border: none;
}
.security-flag {
font-size: 14px;
height: 18px;
color: #ff8080;
color: $--version-card-security-flag-color;
}
</style>

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

@ -90,3 +90,24 @@ $--trigger-icon-background-color: #fff;
// drawer
$--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);