282 lines
8.7 KiB
SCSS
282 lines
8.7 KiB
SCSS
@use "sass:map";
|
|
@use "@twig/scss/_global" as global;
|
|
@use "@twig/scss/variables/_variables-components" as components;
|
|
|
|
@import "@twig/scss/jsmenu/_jsmenu-header";
|
|
@import "@twig/scss/jsmenu/_jsmenu-footer";
|
|
|
|
$params: (
|
|
// global breakpoint na swtich navigací mobile/desktop (použít i v komponentě Header/Sections)
|
|
"show-breakpoint": global.$respesections-breakpoint,
|
|
|
|
"overlay": global.$overlay-bg,
|
|
"background": global.$body-bg,
|
|
"max-width": 380px,
|
|
|
|
"item-color": global.$text-dark,
|
|
"item-font-size": global.$font-size-base,
|
|
"item-font-weight": global.$font-weight-bold,
|
|
"item-text-transform": none,
|
|
"item-border-color": global.$border-color,
|
|
"item-padding": 0 20px,
|
|
"item-height": 60px,
|
|
"item-letter-spacing": normal,
|
|
"item-image-size": 100%,
|
|
"item-image-padding": 0,
|
|
"item-image-border-radius": 0,
|
|
"item-image-margin-right": global.$gap-width,
|
|
"item-image-overlay": "false",
|
|
|
|
"sub-title-font-family": global.$font-family-base,
|
|
"sub-title-font-size": global.$font-size-h3,
|
|
"sub-title-font-weight": global.$font-weight-bold,
|
|
"sub-title-color": global.$text-dark,
|
|
"sub-title-text-transform": none,
|
|
"sub-title-height": 60px,
|
|
"sub-title-padding": 0 20px,
|
|
"sub-title-letter-spacing": normal,
|
|
|
|
"all-in-categories-margin": unset,
|
|
"all-in-categories-padding": unset,
|
|
"all-in-categories-background": global.$body-bg-alt,
|
|
"all-in-categories-color": global.$text-dark,
|
|
"all-in-categories-border-radius": unset,
|
|
"all-in-categories-font-size": global.$font-size-base,
|
|
"all-in-categories-font-weight": global.$font-weight-base,
|
|
"all-in-categories-letter-spacing": normal,
|
|
|
|
"all-in-categories-icon-font-size": inherit,
|
|
"all-in-categories-icon-line-height": 1,
|
|
|
|
"toggle-back-padding-left": 50px,
|
|
"toggle-back-icon-left": 20px,
|
|
"toggle-back-icon-margin-top": unset,
|
|
"toggle-sub-icon-right": 20px,
|
|
|
|
"arrow-icon-size": 12px,
|
|
"arrow-icon-color": inherit,
|
|
"arrow-icon-line-height": 1,
|
|
|
|
"additional-menu-border-top": none,
|
|
"additional-menu-padding": 0,
|
|
"additional-item-color": global.$text-dark,
|
|
"additional-item-font-size": global.$font-size-base,
|
|
"additional-item-font-weight": global.$font-weight-base,
|
|
"additional-item-text-transform": none,
|
|
"additional-item-height": 50px,
|
|
"additional-item-letter-spacing": normal,
|
|
|
|
"loader-size": global.$modal-loader-size,
|
|
"loader-color": global.$modal-loader-color,
|
|
"loader-thick": global.$modal-loader-thick
|
|
);
|
|
|
|
@if global-variable-exists(responsive-menu, components) {
|
|
$keys: map.keys(components.$responsive-menu);
|
|
@each $name in $keys {
|
|
@if not map.get($params, $name) {
|
|
@warn "Neexistující proměnná '#{$name}' v komponentě 'responsive-menu'.";
|
|
}
|
|
}
|
|
|
|
$params: map.merge($params, components.$responsive-menu);
|
|
}
|
|
|
|
.jsmenu {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: map.get($params, "show-breakpoint")) {
|
|
.jsmenu {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: map.get($params, "overlay");
|
|
z-index: 101;
|
|
opacity: 1;
|
|
}
|
|
|
|
.sections-responsive {
|
|
background: map.get($params, "background");
|
|
display: block;
|
|
overflow: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
max-width: map.get($params, "max-width");
|
|
width: 100%;
|
|
z-index: 100;
|
|
height: 100vh;
|
|
|
|
@supports (height: 100dvh) {
|
|
height: 100dvh;
|
|
}
|
|
|
|
.menuLoading {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 40px;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
animation: menu-loader 1.25s infinite linear;
|
|
width: map.get($params, "loader-size");
|
|
height: map.get($params, "loader-size");
|
|
border: map.get($params, "loader-thick") solid map.get($params, "loader-color");
|
|
border-radius: 50%;
|
|
border-right-color: transparent;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
li {
|
|
border-bottom: 1px solid map.get($params, "item-border-color");
|
|
}
|
|
|
|
a,
|
|
.toggle-sub,
|
|
.toggle-back {
|
|
@include global.underline-never;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
color: map.get($params, "item-color");
|
|
font-size: map.get($params, "item-font-size");
|
|
font-weight: map.get($params, "item-font-weight");
|
|
padding: map.get($params, "item-padding");
|
|
min-height: map.get($params, "item-height");
|
|
text-transform: map.get($params, "item-text-transform");
|
|
letter-spacing: map.get($params, "item-letter-spacing");
|
|
}
|
|
|
|
.img {
|
|
@if (map.get($params, "item-image-overlay") == "true") {
|
|
@include global.image-overlay(map.get($params, "item-image-padding"));
|
|
} @else {
|
|
padding: map.get($params, "item-image-padding");
|
|
}
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: map.get($params, "item-image-size");
|
|
aspect-ratio: 1;
|
|
border-radius: map.get($params, "item-image-border-radius");
|
|
margin-right: map.get($params, "item-image-margin-right");
|
|
|
|
img {
|
|
@include global.img-responsive;
|
|
|
|
max-height: 100%;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.toggle-back,
|
|
.toggle-sub {
|
|
.c-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: map.get($params, "arrow-icon-color");
|
|
font-size: map.get($params, "arrow-icon-size");
|
|
line-height: map.get($params, "arrow-icon-line-height");
|
|
}
|
|
}
|
|
|
|
.sub-heading {
|
|
a {
|
|
margin: map.get($params, "all-in-categories-margin");
|
|
background: map.get($params, "all-in-categories-background");
|
|
color: map.get($params, "all-in-categories-color");
|
|
border-radius: map.get($params, "all-in-categories-border-radius");
|
|
font-size: map.get($params, "all-in-categories-font-size");
|
|
font-weight: map.get($params, "all-in-categories-font-weight");
|
|
letter-spacing: map.get($params, "all-in-categories-letter-spacing");
|
|
|
|
@if not (map.get($params, "all-in-categories-padding") == unset) {
|
|
padding: map.get($params, "all-in-categories-padding");
|
|
}
|
|
|
|
.c-icon {
|
|
font-size: map.get($params, "all-in-categories-icon-font-size");
|
|
line-height: map.get($params, "all-in-categories-icon-line-height");
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-back {
|
|
padding-left: map.get($params, "toggle-back-padding-left");
|
|
|
|
.c-icon {
|
|
left: map.get($params, "toggle-back-icon-left");
|
|
margin-top: map.get($params, "toggle-back-icon-margin-top");
|
|
}
|
|
}
|
|
|
|
.toggle-sub {
|
|
.c-icon {
|
|
right: map.get($params, "toggle-sub-icon-right");
|
|
}
|
|
}
|
|
|
|
.sub-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: map.get($params, "sub-title-font-family");
|
|
font-size: map.get($params, "sub-title-font-size");
|
|
font-weight: map.get($params, "sub-title-font-weight");
|
|
color: map.get($params, "sub-title-color");
|
|
text-transform: map.get($params, "sub-title-text-transform");
|
|
min-height: map.get($params, "sub-title-height");
|
|
padding: map.get($params, "sub-title-padding");
|
|
letter-spacing: map.get($params, "sub-title-letter-spacing");
|
|
}
|
|
}
|
|
}
|
|
|
|
.resp-menu-additional {
|
|
border-top: map.get($params, "additional-menu-border-top");
|
|
padding: map.get($params, "additional-menu-padding");
|
|
|
|
.nav {
|
|
li {
|
|
border: 0;
|
|
}
|
|
|
|
a {
|
|
color: map.get($params, "additional-item-color");
|
|
font-size: map.get($params, "additional-item-font-size");
|
|
font-weight: map.get($params, "additional-item-font-weight");
|
|
min-height: map.get($params, "additional-item-height");
|
|
text-transform: map.get($params, "additional-item-text-transform");
|
|
letter-spacing: map.get($params, "additional-item-letter-spacing");
|
|
}
|
|
}
|
|
}
|
|
|
|
body.scroll-disable {
|
|
margin: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
@keyframes menu-loader {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|