skillbox/client/src/styles/_mixins.scss

53 lines
979 B
SCSS

@import 'variables';
@mixin widget-shadow {
border-radius: $default-border-radius;
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
border: 1px solid $color-lightgrey-2;
}
@mixin room-widget-text-style {
font-family: $sans-serif-font-family;
font-size: 1rem;
fill: $color-darkgrey-1;
}
@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;
}
&--blue {
background-color: $color-accent-2;
}
&--red {
background-color: $color-accent-3;
}
&--green {
background-color: $color-accent-4;
}
}
@mixin content-box($main-color) {
background-color: rgba($main-color, 0.15);
padding: 15px;
align-items: start;
border-radius: $default-border-radius;
/deep/ .button {
border-color: $main-color;
background-color: $color-white;
}
}
@mixin desktop {
@media (min-width: 1024px) {
@content
}
}