145 lines
2.7 KiB
SCSS
145 lines
2.7 KiB
SCSS
@import 'variables';
|
|
@import 'functions';
|
|
|
|
@mixin widget-shadow-base {
|
|
border-radius: $default-border-radius;
|
|
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
@mixin widget-shadow {
|
|
@include widget-shadow-base;
|
|
border: 1px solid $color-silver-light;
|
|
}
|
|
|
|
@mixin widget-shadow-reverse {
|
|
@include widget-shadow-base;
|
|
border: 2px solid $color-white;
|
|
}
|
|
|
|
@mixin room-widget-text-style {
|
|
font-family: $sans-serif-font-family;
|
|
font-size: 1rem;
|
|
fill: $color-charcoal-dark;
|
|
}
|
|
|
|
@mixin input-box-shadow {
|
|
border: 1px solid #DBDBDB;
|
|
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@mixin content-box($color-list) {
|
|
background-color: nth($color-list, 2);
|
|
padding: 15px;
|
|
align-items: start;
|
|
border-radius: $default-border-radius;
|
|
|
|
/deep/ .button {
|
|
border-color: nth($color-list, 1);
|
|
background-color: $color-white;
|
|
}
|
|
}
|
|
|
|
@mixin desktop {
|
|
@media (min-width: 1024px) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin main-title {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 700;
|
|
font-size: toRem(64px);
|
|
}
|
|
|
|
@mixin heading-1 {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 600;
|
|
font-size: toRem(44px);
|
|
}
|
|
|
|
@mixin heading-2 {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 600;
|
|
font-size: toRem(34px);
|
|
}
|
|
|
|
@mixin heading-3 {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 600;
|
|
font-size: toRem(22px);
|
|
}
|
|
|
|
@mixin heading-4 {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 600;
|
|
font-size: toRem(18px);
|
|
}
|
|
|
|
@mixin regular-text {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 400;
|
|
font-size: toRem(18px);
|
|
}
|
|
|
|
@mixin small-text {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 400;
|
|
font-size: toRem(16px);
|
|
}
|
|
|
|
@mixin meta-title {
|
|
font-family: $serif-font-family;
|
|
font-size: toRem(42px);
|
|
}
|
|
|
|
@mixin lead-paragraph {
|
|
font-family: $serif-font-family;
|
|
line-height: 1.4;
|
|
font-size: toRem(26px);
|
|
}
|
|
|
|
@mixin regular-paragraph {
|
|
font-family: $serif-font-family;
|
|
font-size: toRem(18px);
|
|
}
|
|
|
|
@mixin page-form-input-heading {
|
|
display: block;
|
|
margin-bottom: $medium-spacing;
|
|
@include heading-3;
|
|
}
|
|
|
|
@mixin light-border($border-position) {
|
|
border-#{$border-position}: 1px solid $color-silver;
|
|
}
|