Change grayscale, add border

This commit is contained in:
Christian Cueni 2019-07-09 14:20:04 +02:00
parent 03d8ed6712
commit 695a9a8ccb
56 changed files with 92 additions and 87 deletions

View File

@ -47,7 +47,7 @@
&__icon { &__icon {
height: 57px; height: 57px;
fill: $color-grey; fill: $color-silver-dark;
} }
} }
</style> </style>

View File

@ -22,14 +22,14 @@
.add-content-element { .add-content-element {
display: flex; display: flex;
justify-content: center; justify-content: center;
border-bottom: 2px solid $color-grey; border-bottom: 2px solid $color-silver-dark;
margin-bottom: 21px + 25px; margin-bottom: 21px + 25px;
cursor: pointer; cursor: pointer;
&__icon { &__icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
fill: $color-grey; fill: $color-silver-dark;
margin-bottom: -21px; margin-bottom: -21px;
background-color: $color-white; background-color: $color-white;
border-radius: 50px; border-radius: 50px;

View File

@ -54,11 +54,11 @@
&__icon { &__icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
fill: $color-grey; fill: $color-silver-dark;
} }
&__text { &__text {
color: $color-grey; color: $color-silver-dark;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
} }
} }

View File

@ -60,7 +60,7 @@
&__add { &__add {
width: 80px; width: 80px;
fill: $color-grey; fill: $color-silver-dark;
} }
&--reverse { &--reverse {

View File

@ -84,7 +84,7 @@
&__link { &__link {
display: block; display: block;
&:first-of-type { &:first-of-type {
border-top: 1px solid $color-grey; border-top: 1px solid $color-silver-dark;
} }
} }

View File

@ -56,13 +56,13 @@
padding: 10px; padding: 10px;
&--selected { &--selected {
border: 1px solid $color-darkgrey-1; border: 1px solid $color-charcoal-dark;
} }
} }
&__selected-icon { &__selected-icon {
width: 17px; width: 17px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
} }
&__color { &__color {

View File

@ -150,6 +150,8 @@
} }
&--task { &--task {
@include light-border(bottom);
.content-block__title { .content-block__title {
color: $color-brand; color: $color-brand;
margin-top: $default-padding; margin-top: $default-padding;

View File

@ -65,7 +65,7 @@
z-index: 9; z-index: 9;
padding: 0 24px; padding: 0 24px;
height: 50px; height: 50px;
background-color: $color-lightgrey; background-color: $color-silver-light;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: left; justify-items: left;

View File

@ -31,7 +31,7 @@
&__icon { &__icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: $color-grey; fill: $color-silver-dark;
} }
&__tooltip { &__tooltip {
@ -47,7 +47,7 @@
width: auto; width: auto;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-grey; border: 1px solid $color-silver-dark;
border-radius: 5px; border-radius: 5px;
padding: $small-spacing; padding: $small-spacing;
@include small-text; @include small-text;
@ -58,8 +58,8 @@
left: 0; left: 0;
top: 18px; top: 18px;
margin-left: -1px; margin-left: -1px;
border-left: 1px solid $color-grey; border-left: 1px solid $color-silver-dark;
border-top: 1px solid $color-grey; border-top: 1px solid $color-silver-dark;
background-color: $color-white; background-color: $color-white;
width: 10px; width: 10px;
height: 10px; height: 10px;

View File

@ -25,7 +25,7 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.logout-widget { .logout-widget {
color: $color-grey; color: $color-silver-dark;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -48,7 +48,7 @@
&__hamburger { &__hamburger {
width: 30px; width: 30px;
height: 30px; height: 30px;
fill: $color-grey; fill: $color-silver-dark;
} }
} }
</style> </style>

View File

@ -58,7 +58,7 @@
background-color: $color-white; background-color: $color-white;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
border: 1px solid $color-lightgrey; border: 1px solid $color-silver-light;
display: -ms-grid; display: -ms-grid;
@supports (display: grid) { @supports (display: grid) {
display: grid; display: grid;
@ -130,7 +130,7 @@
grid-area: header; grid-area: header;
-ms-grid-row: 1; -ms-grid-row: 1;
padding: 10px $modal-lateral-padding; padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-silver-light;
} }
&__body { &__body {
@ -162,7 +162,7 @@
&__footer { &__footer {
grid-area: footer; grid-area: footer;
-ms-grid-row: 3; -ms-grid-row: 3;
border-top: 1px solid $color-lightgrey; border-top: 1px solid $color-silver-light;
padding: 16px $modal-lateral-padding; padding: 16px $modal-lateral-padding;
} }
} }

View File

@ -39,7 +39,7 @@
&__ellipses { &__ellipses {
width: 30px; width: 30px;
height: 30px; height: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-top: -7px; margin-top: -7px;
} }

View File

@ -22,13 +22,13 @@
.news-teaser { .news-teaser {
display: flex; display: flex;
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-silver-light;
padding-bottom: $large-spacing; padding-bottom: $large-spacing;
text-align: center; text-align: center;
@include desktop { @include desktop {
border-bottom: 0; border-bottom: 0;
border-left: 1px solid $color-lightgrey; border-left: 1px solid $color-silver-light;
padding-bottom: 0; padding-bottom: 0;
text-align: left; text-align: left;
} }

View File

@ -54,7 +54,7 @@
.block-title { .block-title {
&__title, &__subtitle { &__title, &__subtitle {
color: $color-darkgrey-1; color: $color-charcoal-dark;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
} }
@ -86,7 +86,7 @@
font-weight: 600; font-weight: 600;
&--disabled { &--disabled {
color: $color-grey; color: $color-silver-dark;
} }
} }
} }

View File

@ -54,7 +54,7 @@
grid-template-columns: 170px 1fr; grid-template-columns: 170px 1fr;
grid-column-gap: 80px; grid-column-gap: 80px;
align-items: center; align-items: center;
border-bottom: 1px solid $color-grey; border-bottom: 1px solid $color-silver-dark;
padding: 15px 0; padding: 15px 0;
&__student-name { &__student-name {

View File

@ -39,7 +39,7 @@
padding: 0 24px; padding: 0 24px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: $color-grey; color: $color-silver-dark;
&--active { &--active {
color: $color-brand; color: $color-brand;

View File

@ -29,13 +29,13 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.user-widget { .user-widget {
color: $color-grey; color: $color-silver-dark;
display: flex; display: flex;
align-items: center; align-items: center;
&__name { &__name {
padding: 0px 10px; padding: 0px 10px;
color: $color-grey; color: $color-silver-dark;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
} }
@ -46,7 +46,7 @@
&__avatar { &__avatar {
width: 30px; width: 30px;
height: 30px; height: 30px;
fill: $color-grey; fill: $color-silver-dark;
} }
&--is-profile { &--is-profile {

View File

@ -34,7 +34,7 @@
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-size: toRem(14px); font-size: toRem(14px);
margin-bottom: 20px; margin-bottom: 20px;
color: $color-grey; color: $color-silver-dark;
&--active { &--active {
color: $color-brand; color: $color-brand;

View File

@ -66,7 +66,7 @@
&__trash-icon { &__trash-icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
fill: $color-grey; fill: $color-silver-dark;
cursor: pointer; cursor: pointer;
justify-self: center; justify-self: center;
} }

View File

@ -42,7 +42,7 @@
&__toggle { &__toggle {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-grey; color: $color-silver-dark;
font-size: toRem(15px); font-size: toRem(15px);
/*margin-bottom: 15px;*/ /*margin-bottom: 15px;*/
display: block; display: block;
@ -52,11 +52,11 @@
&__text { &__text {
font-size: toRem(18px); font-size: toRem(18px);
color: $color-grey; color: $color-silver-dark;
/deep/ p { /deep/ p {
font-size: toRem(18px); font-size: toRem(18px);
color: $color-grey; color: $color-silver-dark;
} }
} }
} }

View File

@ -254,13 +254,13 @@
padding: 5px 0; padding: 5px 0;
margin-right: 15px; margin-right: 15px;
outline: 0; outline: 0;
color: $color-grey; color: $color-silver-dark;
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
&--active { &--active {
border-bottom-color: $color-darkgrey-1; border-bottom-color: $color-charcoal-dark;
color: $color-darkgrey-1; color: $color-charcoal-dark;
} }
} }

View File

@ -66,13 +66,13 @@
&__save-status-icon { &__save-status-icon {
width: 22px; width: 22px;
height: 22px; height: 22px;
fill: $color-grey; fill: $color-silver-dark;
margin-right: 8px; margin-right: 8px;
} }
&__save-status-text { &__save-status-text {
font-size: toRem(14px); font-size: toRem(14px);
color: $color-grey; color: $color-silver-dark;
} }
@keyframes spin { @keyframes spin {

View File

@ -84,7 +84,7 @@
grid-column-gap: 0px; grid-column-gap: 0px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
text-align: center; text-align: center;
border: 2px solid $color-grey; border: 2px solid $color-silver-dark;
padding: 30px 5px; padding: 30px 5px;
border-radius: 12px; border-radius: 12px;
margin-top: 20px; margin-top: 20px;
@ -126,7 +126,7 @@
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid $color-grey; border: 2px solid $color-silver-dark;
border-bottom: 0; border-bottom: 0;
border-right: 0; border-right: 0;
background-color: white; background-color: white;

View File

@ -73,7 +73,7 @@
& + label { & + label {
cursor: pointer; cursor: pointer;
background-color: $color-lightgrey; background-color: $color-silver-light;
height: 150px; height: 150px;
display: flex; display: flex;
width: 100%; width: 100%;

View File

@ -101,7 +101,7 @@
& + label { & + label {
cursor: pointer; cursor: pointer;
background-color: $color-lightgrey; background-color: $color-silver-light;
height: 150px; height: 150px;
display: flex; display: flex;
width: 100%; width: 100%;

View File

@ -68,7 +68,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
display: flex; display: flex;
border: 2px solid $color-grey; border: 2px solid $color-silver-dark;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;

View File

@ -166,7 +166,7 @@
} }
&__meta-title { &__meta-title {
color: $color-grey; color: $color-silver-dark;
font-size: 2.25rem; font-size: 2.25rem;
font-weight: 300; font-weight: 300;
font-family: $serif-font-family; font-family: $serif-font-family;

View File

@ -101,7 +101,7 @@
@mixin module-navigation-typography { @mixin module-navigation-typography {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-grey; color: $color-silver-dark;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
} }

View File

@ -56,7 +56,7 @@
} }
&__meta-title { &__meta-title {
color: $color-grey; color: $color-silver-dark;
margin-bottom: $large-spacing; margin-bottom: $large-spacing;
@include regular-text; @include regular-text;
} }

View File

@ -57,7 +57,7 @@
} }
&__footer { &__footer {
border-top: 1px solid $color-lightgrey; border-top: 1px solid $color-silver-light;
padding: $small-spacing $medium-spacing; padding: $small-spacing $medium-spacing;
} }
} }

View File

@ -108,7 +108,7 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }
} }

View File

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

View File

@ -47,7 +47,7 @@
&__placeholder { &__placeholder {
height: $max-width; height: $max-width;
fill: $color-grey; fill: $color-silver-dark;
&--highlighted { &--highlighted {
fill: $color-brand; fill: $color-brand;

View File

@ -35,7 +35,7 @@
&__item { &__item {
line-height: $height; line-height: $height;
height: $height; height: $height;
border-bottom: 1px solid $color-grey; border-bottom: 1px solid $color-silver-dark;
} }
} }

View File

@ -65,7 +65,7 @@
&__module-name { &__module-name {
@include small-text; @include small-text;
color: $color-grey; color: $color-silver-dark;
} }
} }

View File

@ -109,7 +109,7 @@
&__hint { &__hint {
margin-top: $small-spacing; margin-top: $small-spacing;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-grey; color: $color-silver-dark;
} }
} }

View File

@ -27,7 +27,7 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }

View File

@ -74,7 +74,7 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }
} }

View File

@ -29,7 +29,7 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }

View File

@ -79,13 +79,13 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }
&__content { &__content {
padding: 22px; padding: 22px;
color: $color-darkgrey-1; color: $color-charcoal-dark;
cursor: pointer; cursor: pointer;
/* /*

View File

@ -40,7 +40,7 @@
&__link { &__link {
& > a { & > a {
display: inline-block; display: inline-block;
color: $color-grey; color: $color-silver-dark;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-size: toRem(14px); font-size: toRem(14px);
line-height: 1.5; line-height: 1.5;

View File

@ -112,7 +112,7 @@
.visibility-menu { .visibility-menu {
border-radius: 13px; border-radius: 13px;
border: 1px solid $color-lightgrey; border: 1px solid $color-silver-light;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
width: 180px; width: 180px;
box-sizing: border-box; box-sizing: border-box;

View File

@ -165,7 +165,7 @@
} }
&__content { &__content {
background-color: rgba($color-darkgrey-1, 0.18); background-color: rgba($color-charcoal-dark, 0.18);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/*max-width: 840px;*/ /*max-width: 840px;*/

View File

@ -131,7 +131,7 @@
&__content { &__content {
padding: 50px 15px; padding: 50px 15px;
background-color: rgba($color-darkgrey-1, 0.18); background-color: rgba($color-charcoal-dark, 0.18);
@include desktop { @include desktop {
columns: 4; columns: 4;
padding: 50px 60px; padding: 50px 60px;

View File

@ -122,7 +122,7 @@
&__title { &__title {
color: $color-brand; color: $color-brand;
text-align: center; text-align: center;
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-silver-light;
padding-bottom: 30px; padding-bottom: 30px;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
@ -182,7 +182,7 @@
} }
.news { .news {
background-color: $color-darkgrey-1; background-color: $color-charcoal-dark;
color: $color-white; color: $color-white;
padding-top: $large-spacing; padding-top: $large-spacing;
padding-bottom: $large-spacing; padding-bottom: $large-spacing;
@ -246,7 +246,7 @@
@include desktop { @include desktop {
text-align: left; text-align: left;
border-left: 1px solid $color-lightgrey; border-left: 1px solid $color-silver-light;
} }
} }
} }

View File

@ -69,7 +69,7 @@
.topic { .topic {
&__teaser { &__teaser {
color: $color-darkgrey-1; color: $color-charcoal-dark;
width: 90%; width: 90%;
@include lead-paragraph; @include lead-paragraph;
margin-bottom: $large-spacing; margin-bottom: $large-spacing;

View File

@ -1,5 +1,5 @@
.action-icon { .action-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
fill: $color-grey; fill: $color-silver-dark;
} }

View File

@ -11,7 +11,7 @@
} }
&__meta { &__meta {
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-silver-light;
align-self: end; align-self: end;
padding: 20px 0; padding: 20px 0;
width: 100%; width: 100%;

View File

@ -1,6 +1,6 @@
.button { .button {
background: transparent; background: transparent;
border: 2px solid $color-grey; border: 2px solid $color-silver-dark;
padding: 5px 15px; padding: 5px 15px;
border-radius: 3px; border-radius: 3px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
@ -20,8 +20,8 @@
background-color: $color-white; background-color: $color-white;
} }
&--disabled { &--disabled {
border: 2px solid $color-lightgrey; border: 2px solid $color-silver-light;
background-color: $color-lightgrey; background-color: $color-silver-light;
} }
} }
@ -35,7 +35,7 @@
&__icon { &__icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
fill: $color-grey; fill: $color-silver-dark;
cursor: pointer; cursor: pointer;
justify-self: center; justify-self: center;
} }

View File

@ -4,7 +4,7 @@
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $color-lightgrey; border: 1px solid $color-silver-light;
max-width: 100%; max-width: 100%;
background-color: $color-white; background-color: $color-white;
} }

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; border: 1px solid $color-silver-light;
} }
@mixin widget-shadow-reverse { @mixin widget-shadow-reverse {
@ -19,7 +19,7 @@
@mixin room-widget-text-style { @mixin room-widget-text-style {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-size: 1rem; font-size: 1rem;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
} }
@mixin input-box-shadow { @mixin input-box-shadow {
@ -140,5 +140,5 @@
} }
@mixin light-border($border-position) { @mixin light-border($border-position) {
border-#{$border-position}: 1px solid $color-lightgrey; border-#{$border-position}: 1px solid $color-silver;
} }

View File

@ -6,7 +6,7 @@
padding: 0 24px; padding: 0 24px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: $color-grey; color: $color-silver-dark;
&--active { &--active {
color: $color-brand; color: $color-brand;

View File

@ -5,7 +5,7 @@
* { * {
font-size: $base-font-size; font-size: $base-font-size;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: $color-darkgrey-1; color: $color-charcoal-dark;
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {

View File

@ -1,5 +1,5 @@
.uploadcare--panel { .uploadcare--panel {
background: $color-lightgrey; background: $color-silver-light;
height: 200px; height: 200px;
border: none; border: none;
border-radius: 0; border-radius: 0;

View File

@ -27,17 +27,20 @@ $color-brand-light: #DCF2ED;
$color-error: #C02108; $color-error: #C02108;
/* greyscale */ /* greyscale */
$color-darkgrey-1: #333333; $color-silver: #d0d0d0;
$color-grey: #999999; $color-silver-light: #f0f0f0;
$color-silver-dark: #aaaaaa;
$color-charcoal: #616161;
$color-charcoal-light: #828282;
$color-charcoal-dark: #333333;
//$color-grey--lighter: rgba(51, 51, 51, 0.18); //$color-grey--lighter: rgba(51, 51, 51, 0.18);
$color-grey--lighter: transparent; $color-grey--lighter: transparent;
$color-lightgrey: #f0f0f0;
$color-white: #ffffff; $color-white: #ffffff;
$header-color: $color-charcoal-dark;
$intro-color: $color-silver-dark;
$header-color: $color-darkgrey-1;
$intro-color: $color-grey;
$sans-serif-font-family: 'Montserrat', Arial, sans-serif; $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
$serif-font-family: "ff-meta-serif-web-pro", serif; $serif-font-family: "ff-meta-serif-web-pro", serif;