ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update colors to be in line with style guide

This commit is contained in:
Ramon Wenger 2019-03-04 16:41:37 +01:00
parent e480f06b57
commit 0b0033177c
6 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/NewsTeaser.vue
View File

@ -21,7 +21,7 @@
.news-teaser { .news-teaser {
display: flex; display: flex;
border-left: 1px solid $color-lightgrey-2; border-left: 1px solid $color-lightgrey;
padding-left: $medium-spacing; padding-left: $medium-spacing;
flex-direction: column; flex-direction: column;
} }

2
client/src/components/portfolio/ProjectEntry.vue
View File

@ -43,7 +43,7 @@
&__date { &__date {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-text-gray; color: $color-grey;
font-size: toRem(17px); font-size: toRem(17px);
} }
} }

4
client/src/pages/start.vue
View File

@ -106,7 +106,7 @@
&__title { &__title {
color: $color-brand; color: $color-brand;
text-align: center; text-align: center;
border-bottom: 1px solid $color-lightgrey-2; border-bottom: 1px solid $color-lightgrey;
padding-bottom: 30px; padding-bottom: 30px;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
@ -171,7 +171,7 @@
&__more { &__more {
color: $color-white; color: $color-white;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
border-left: 1px solid $color-lightgrey-2; border-left: 1px solid $color-lightgrey;
line-height: $default-line-height; line-height: $default-line-height;
padding-left: $medium-spacing; padding-left: $medium-spacing;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;

2
client/src/styles/_buttons.scss
View File

@ -20,7 +20,7 @@
background-color: $color-white; background-color: $color-white;
} }
&--disabled { &--disabled {
border: 2px solid $color-lightgrey-2; border: 2px solid $color-lightgrey;
background-color: $color-lightgrey; background-color: $color-lightgrey;
} }
} }

16
client/src/styles/_mixins.scss
View File

@ -8,7 +8,7 @@
@mixin widget-shadow { @mixin widget-shadow {
@include widget-shadow-base; @include widget-shadow-base;
border: 1px solid $color-lightgrey-2; border: 1px solid $color-lightgrey;
} }
@mixin widget-shadow-reverse { @mixin widget-shadow-reverse {
@ -30,15 +30,29 @@
@mixin skillbox-colors { @mixin skillbox-colors {
&--yellow { &--yellow {
background-color: $color-accent-1; background-color: $color-accent-1;
& .widget-footer {
background-color: $color-accent-1-dark;
}
} }
&--blue { &--blue {
background-color: $color-accent-2; background-color: $color-accent-2;
& .widget-footer {
background-color: $color-accent-2-dark;
}
} }
&--red { &--red {
background-color: $color-accent-3; background-color: $color-accent-3;
& .widget-footer {
background-color: $color-accent-3-dark;
}
} }
&--green { &--green {
background-color: $color-accent-4; background-color: $color-accent-4;
& .widget-footer {
background-color: $color-accent-4-dark;
}
} }
} }

45
client/src/styles/_variables.scss
View File

@ -3,33 +3,36 @@
*/ */
/* accent */ /* accent */
$color-accent-1: #ffb800; $color-accent-1-dark: #DAA009;
$color-accent-1-dark: #d69d0a; $color-accent-1: #FFB800;
$color-accent-1-light: #fff5d9; $color-accent-1-light: #FFF5D9;
$color-accent-2-dark: #118dc2; $color-accent-2-dark: #0F7CAC;
$color-accent-2: #09a4e7; $color-accent-2: #078CC6;
$color-accent-2-light: #daf2fc; $color-accent-2-light: #DBEEF6;
$color-accent-3-dark: #bd4163; $color-accent-3-dark: #D66655;
$color-accent-3: #e04570; $color-accent-3: #FA715C;
$color-accent-3-light: #fbe3ea; $color-accent-3-light: #FFEAE7;
$color-accent-4-dark: #96b23d; $color-accent-4-dark: #99B53E;
$color-accent-4: #afd240; $color-accent-4: #AFD240;
$color-accent-4-light: #f3f9e3; $color-accent-4-light: #F3F9E3;
$color-accent-5-dark: #09496F;
$color-accent-5: #004E7C;
$color-accent-5: #DBE6EC;
/* brand */ /* brand */
$color-brand-dark: #1c9076; $color-brand-dark: #138E72;
$color-brand: #17a887; $color-brand: #17A887;
$color-brand-light: #ddf3ee; $color-brand-light: #DCF2ED;
$color-error: #C02108;
/* greyscale */ /* greyscale */
$color-darkgrey-1: #333333; $color-darkgrey-1: #333333;
$color-darkgrey-2: #515151; $color-grey: #999999;
$color-grey: rgba(51, 51, 51, 0.5); //$color-grey--lighter: rgba(51, 51, 51, 0.18);
$color-grey--lighter: rgba(51, 51, 51, 0.18); $color-grey--lighter: transparent;
$color-lightgrey-2: #dbdbdb; $color-lightgrey: #f0f0f0;
$color-lightgrey: #f3f3f3;
$color-white: #ffffff; $color-white: #ffffff;
$color-text-gray: rgb(161, 161, 161);