Change grayscale, add border
This commit is contained in:
parent
03d8ed6712
commit
695a9a8ccb
|
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
height: 57px;
|
height: 57px;
|
||||||
fill: $color-grey;
|
fill: $color-silver-dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
|
|
||||||
&__add {
|
&__add {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
fill: $color-grey;
|
fill: $color-silver-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--reverse {
|
&--reverse {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
&__hamburger {
|
&__hamburger {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
fill: $color-grey;
|
fill: $color-silver-dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -108,7 +108,7 @@
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
fill: $color-darkgrey-1;
|
fill: $color-charcoal-dark;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
|
|
||||||
&__module-name {
|
&__module-name {
|
||||||
@include small-text;
|
@include small-text;
|
||||||
color: $color-grey;
|
color: $color-silver-dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
fill: $color-darkgrey-1;
|
fill: $color-charcoal-dark;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
fill: $color-darkgrey-1;
|
fill: $color-charcoal-dark;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
fill: $color-darkgrey-1;
|
fill: $color-charcoal-dark;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;*/
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.action-icon {
|
.action-icon {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
fill: $color-grey;
|
fill: $color-silver-dark;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue