159 lines
3.5 KiB
SCSS
159 lines
3.5 KiB
SCSS
/* ------------------------------------------------------------------------- */
|
|
/* ⚠️ Variables can be found in variables.scss instead of defined in root */
|
|
/* ------------------------------------------------------------------------- */
|
|
|
|
/* --------- Breakpoints bootstrap 5 ----------- */
|
|
|
|
@mixin bs5-media-breakpoint-up($name) {
|
|
$min: map-get($grid-breakpoints, $name);
|
|
@if $min and $min > 0 {
|
|
@media (min-width: $min) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin bs5-media-breakpoint-down($name) {
|
|
$max: map-get($grid-breakpoints, $name);
|
|
@if $max {
|
|
@media (max-width: calc(#{$max} - 0.02px)) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin bs5-media-breakpoint-between($lower, $upper) {
|
|
$min: map-get($grid-breakpoints, $lower);
|
|
$max: map-get($grid-breakpoints, $upper);
|
|
@if $min and $max {
|
|
@media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --------- Utilities ----------- */
|
|
|
|
/* Spacers */
|
|
|
|
$section-spacer: rem-calc(50px);
|
|
$section-spacer-small: rem-calc(25px);
|
|
|
|
.section-spacer-both {
|
|
padding-top: $section-spacer-small;
|
|
padding-bottom: $section-spacer-small;
|
|
@include bs5-media-breakpoint-up(lg) {
|
|
padding-top: $section-spacer;
|
|
padding-bottom: $section-spacer;
|
|
}
|
|
&--small {
|
|
padding-top: $section-spacer-small;
|
|
padding-bottom: $section-spacer-small;
|
|
@include bs5-media-breakpoint-up(lg) {
|
|
padding-top: $section-spacer-small;
|
|
padding-bottom: $section-spacer-small;
|
|
}
|
|
}
|
|
}
|
|
.section-spacer {
|
|
@extend .section-spacer-both;
|
|
padding-bottom: unset;
|
|
&--small {
|
|
padding-bottom: unset;
|
|
}
|
|
}
|
|
.section-spacer-bottom {
|
|
@extend .section-spacer-both;
|
|
padding-top: unset;
|
|
&--small {
|
|
padding-top: unset;
|
|
}
|
|
}
|
|
|
|
/* Hex to rgba function */
|
|
@function hex-to-rgba($hex, $alpha) {
|
|
$r: red($hex);
|
|
$g: green($hex);
|
|
$b: blue($hex);
|
|
@return rgba($r, $g, $b, $alpha);
|
|
}
|
|
|
|
/* --------- Components: Buttons ----------- */
|
|
|
|
.bootstrap-touchspin {
|
|
flex-wrap: nowrap;
|
|
|
|
.input-touchspin {
|
|
height: rem-calc(50px);
|
|
min-width: rem-calc(75px);
|
|
border-left: 0px;
|
|
}
|
|
|
|
.input-group-btn-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
button {
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn:focus {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* --------- Components: Forms ----------- */
|
|
|
|
.input-group.js-parent-focus {
|
|
.input-group-append .btn {
|
|
border-top-right-radius: $border-radius !important;
|
|
border-bottom-right-radius: $border-radius !important;
|
|
}
|
|
}
|
|
|
|
.input-group.js-parent-focus {
|
|
height: $input-height;
|
|
}
|
|
|
|
/* --------- Components: Swiper ----------- */
|
|
|
|
.swiper-slide {
|
|
height: auto;
|
|
}
|
|
|
|
/* --------- Layout: Header ----------- */
|
|
|
|
.header-top__row {
|
|
flex-wrap: wrap;
|
|
.header-top__block--search {
|
|
@include media-breakpoint-down(sm) {
|
|
order: 1;
|
|
}
|
|
.js-search-form {
|
|
max-width: unset;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.header-top__badge {
|
|
right: -0.9em;
|
|
}
|
|
}
|
|
|
|
/* --------- Layout: Left column ----------- */
|
|
#left-column {
|
|
.list-group-item,
|
|
.list-group-item-action-dropdown-link,
|
|
label {
|
|
font-family: $font-family-base;
|
|
font-size: $font-size-base;
|
|
color: $secondary;
|
|
font-weight: 400;
|
|
}
|
|
}
|