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 {
display: flex;
border-left: 1px solid $color-lightgrey-2;
border-left: 1px solid $color-lightgrey;
padding-left: $medium-spacing;
flex-direction: column;
}

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

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

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

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

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

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

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

@ -8,7 +8,7 @@
@mixin widget-shadow {
@include widget-shadow-base;
border: 1px solid $color-lightgrey-2;
border: 1px solid $color-lightgrey;
}
@mixin widget-shadow-reverse {
@ -30,15 +30,29 @@
@mixin skillbox-colors {
&--yellow {
background-color: $color-accent-1;
& .widget-footer {
background-color: $color-accent-1-dark;
}
}
&--blue {
background-color: $color-accent-2;
& .widget-footer {
background-color: $color-accent-2-dark;
}
}
&--red {
background-color: $color-accent-3;
& .widget-footer {
background-color: $color-accent-3-dark;
}
}
&--green {
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 */
$color-accent-1: #ffb800;
$color-accent-1-dark: #d69d0a;
$color-accent-1-light: #fff5d9;
$color-accent-2-dark: #118dc2;
$color-accent-2: #09a4e7;
$color-accent-2-light: #daf2fc;
$color-accent-3-dark: #bd4163;
$color-accent-3: #e04570;
$color-accent-3-light: #fbe3ea;
$color-accent-4-dark: #96b23d;
$color-accent-4: #afd240;
$color-accent-4-light: #f3f9e3;
$color-accent-1-dark: #DAA009;
$color-accent-1: #FFB800;
$color-accent-1-light: #FFF5D9;
$color-accent-2-dark: #0F7CAC;
$color-accent-2: #078CC6;
$color-accent-2-light: #DBEEF6;
$color-accent-3-dark: #D66655;
$color-accent-3: #FA715C;
$color-accent-3-light: #FFEAE7;
$color-accent-4-dark: #99B53E;
$color-accent-4: #AFD240;
$color-accent-4-light: #F3F9E3;
$color-accent-5-dark: #09496F;
$color-accent-5: #004E7C;
$color-accent-5: #DBE6EC;
/* brand */
$color-brand-dark: #1c9076;
$color-brand: #17a887;
$color-brand-light: #ddf3ee;
$color-brand-dark: #138E72;
$color-brand: #17A887;
$color-brand-light: #DCF2ED;
$color-error: #C02108;
/* greyscale */
$color-darkgrey-1: #333333;
$color-darkgrey-2: #515151;
$color-grey: rgba(51, 51, 51, 0.5);
$color-grey--lighter: rgba(51, 51, 51, 0.18);
$color-lightgrey-2: #dbdbdb;
$color-lightgrey: #f3f3f3;
$color-grey: #999999;
//$color-grey--lighter: rgba(51, 51, 51, 0.18);
$color-grey--lighter: transparent;
$color-lightgrey: #f0f0f0;
$color-white: #ffffff;
$color-text-gray: rgb(161, 161, 161);