lukas/kupshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Lukáš Trkan
2025-08-02 16:30:27 +02:00
commit 23646bfcee
14851 changed files with 1750626 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
web/common/twig/scss/base/_btns.scss Normal file
View File

@@ -0,0 +1,108 @@
.btn {
@include btn;
&.is-submitting {
color: transparent !important;
pointer-events: none !important;
position: relative;
&::after {
animation: submit-loader 1.25s infinite linear;
border: 3px solid $white;
border-radius: 50%;
border-right-color: transparent;
content: "";
display: block;
position: absolute;
left: calc(50% - 10px);
top: calc(50% - 10px);
width: 20px;
height: 20px;
}
}
}
.btn-reset {
appearance: none;
border: 0;
background: transparent;
color: inherit;
}
.btn-link-reset {
appearance: none;
border: 0;
background: transparent;
color: inherit;
padding: 0;
cursor: pointer;
@include underline-default;
}
.btn-primary {
@include btn-primary;
}
.btn-ctr {
@include btn-ctr;
}
.btn-secondary {
@include btn-secondary;
}
.btn-white {
@include btn-white;
}
.btn-primary-outline {
@include btn-primary-outline;
}
.btn-outline {
@include btn-outline;
}
.btn-error {
@include btn-error;
}
.btn-block {
display: flex;
width: 100%;
+ .btn-block {
margin-top: $gap-width;
}
}
.btn-lg {
@include btn-lg;
}
.btn-sm {
@include btn-sm;
}
// na konci aby prebijel predchozi deklarace
.btn.disabled,
.btn:disabled {
pointer-events: none;
@include btn-disabled;
}
.btn-link {
@include btn-link;
}
@keyframes submit-loader {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

75
web/common/twig/scss/base/_flash-message.scss Normal file
View File

@@ -0,0 +1,75 @@
.toasts-wrapper {
position: fixed;
top: $flash-message-offset-top;
left: 0;
right: 0;
display: inline-block;
height: 0;
text-align: center;
z-index: 10000;
line-height: 0;
.toast {
position: relative !important;
margin-bottom: $gap-width;
max-width: 96%;
border-radius: $flash-message-border-radius;
font-size: $flash-message-font-size;
font-weight: $flash-message-font-weight;
padding: $flash-message-padding;
text-align: $flash-message-text-align;
display: inline-flex;
align-items: flex-start;
overflow: hidden;
white-space: normal;
line-height: $line-height-base;
&::after {
content: "";
display: block;
position: absolute;
bottom: 0;
height: 5px;
background: $white;
opacity: .5;
left: 0;
width: 100%;
transform-origin: 0;
animation: progress-loading ease-in 3s infinite;
}
p {
margin: 0;
}
button {
@include btn-reset;
position: relative;
line-height: 1;
color: inherit;
padding: 6px;
margin-right: -6px;
margin-left: 6px;
cursor: pointer;
}
@each $name, $props in $flash-messages {
&-#{$name} {
@each $prop, $val in $props {
#{$prop}: $val;
}
}
}
}
}
@keyframes progress-loading {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(100%);
}
}

3
web/common/twig/scss/base/_functions.scss Normal file
View File

@@ -0,0 +1,3 @@
@function iconUrl($name) {
@return '~@assets/icons/' + $name + '.svg';
}

23
web/common/twig/scss/base/_grid.scss Normal file
View File

@@ -0,0 +1,23 @@
@mixin make-container() {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: $gap-width;
padding-right: $gap-width;
@include delete-after();
}
.container {
@include make-container;
@each $breakpoint, $container-max-width in $container-max-widths {
@media (min-width: map-get($grid-breakpoints, $breakpoint)) {
max-width: $container-max-width;
}
}
}
.container-fluid {
@include make-container;
}

95
web/common/twig/scss/base/_helpers.scss Normal file
View File

@@ -0,0 +1,95 @@
.img-responsive {
@include img-responsive;
}
.img-fluid {
@include img-fluid;
}
.uppercase {
text-transform: uppercase;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.nowrap {
white-space: nowrap;
}
.unlogged:not(.wpj-blocek-active) {
.unlogged-hide {
display: none;
}
}
.logged:not(.wpj-blocek-active) {
.logged-hide {
display: none;
}
}
.truncate {
@include truncate;
}
.list-inline {
@include list-inline;
}
.list-unstyled {
@include list-unstyled;
}
.list-triangle {
@include list-triangle();
}
.c-icon,
.c-icon svg,
.fc svg {
width: 1em;
height: 1em;
&,
* {
fill: currentColor;
}
}
.c-icon-nofill,
.c-icon-nofill svg {
width: 1em;
height: 1em;
}
@each $name, $props in $flags {
@each $prop, $val in $props {
@if $prop == "background-color" {
.color-#{$name}:not(.w-media) {
color: $val !important;
}
}
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

243
web/common/twig/scss/base/_mixins.scss Normal file
View File

@@ -0,0 +1,243 @@
@use "sass:math";
/* todo ?? */
@mixin container-query-selector($element-selector) {
#{$element-selector} {
&:not(.container-query-polyfill) {
@content;
}
}
}
// todo - navrhnout
@mixin dark-overlay {
position: relative;
&::after {
background: linear-gradient(0deg, rgba($black, 1), rgba($black, 0) 70%);
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: .5;
}
}
@mixin image-overlay($padding: $gap-width) {
position: relative;
background: $body-bg;
padding: $padding;
overflow: hidden;
&::before {
content: '';
display: block;
position: absolute;
inset: 0;
background: $image-overlay-bg;
}
}
@mixin img-responsive {
max-width: 100%;
height: auto !important;
display: block;
}
@mixin img-fluid {
width: 100%;
height: auto !important;
display: block;
}
@mixin underline-default {
text-decoration: underline;
&:hover,
&:active {
text-decoration: none;
}
}
@mixin underline-hover {
text-decoration: none;
&:hover,
&:active {
text-decoration: underline;
}
}
@mixin underline-never {
text-decoration: none;
&:hover,
&:active {
text-decoration: none;
}
}
@mixin haf {
&:hover,
&:active,
&.active,
&:focus {
@content;
}
}
@mixin truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
@mixin delete-after {
&::after {
content: none;
display: none;
}
}
@mixin delete-before {
&::before {
content: none;
display: none;
}
}
@mixin list-inline {
list-style: none;
margin-bottom: 0;
padding-left: 0;
> li {
display: inline-block;
}
}
@mixin list-unstyled {
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
@mixin placeholder {
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder {
@content;
}
&::-moz-placeholder {
@content;
}
&:-ms-input-placeholder {
@content;
}
}
@mixin disable-spinner {
-moz-appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
@mixin clearfix {
&::after {
content: "";
display: table;
clear: both;
}
}
@mixin btn-reset {
background: transparent;
border: none;
}
@mixin list-triangle($font-size: $font-size-base) {
$list-triangle-size: 12px !default;
$list-triangle-icon: url(iconUrl("caret-right")) !default;
$list-triangle-line-height: $line-height-lg !default;
$list-triangle-li-padding: 0 0 0 1.5rem !default;
list-style-type: none;
line-height: $list-triangle-line-height;
padding-left: 0;
li {
padding: $list-triangle-li-padding;
position: relative;
&::before {
content: '';
display: block;
background-image: $list-triangle-icon;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: $list-triangle-size;
height: $list-triangle-size;
position: absolute;
left: 0;
$font-size-number: math.div($font-size, ($font-size * 0 + 1));
@if $list-triangle-line-height {
top: math.div(($list-triangle-line-height * 16 * math.div($font-size, ($font-size * 0 + 1))) - $list-triangle-size, 2);
} @else {
top: math.div(($line-height-base * 16 * math.div($font-size, ($font-size * 0 + 1))) - $list-triangle-size, 2);
}
}
}
}
@mixin button-variant($color, $background, $border) {
background-color: $background;
border-color: $border;
color: $color;
@include haf {
background-color: darken($background, 10%);
border-color: darken($border, 10%);
color: $color;
}
}
@mixin custom-scrollbar {
&::-webkit-scrollbar,
::-webkit-scrollbar {
height: $scrollbar-size;
width: $scrollbar-size;
}
&::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
box-shadow: none;
background: $scrollbar-track-bg;
border-radius: $scrollbar-border-radius;
}
&::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
background: $scrollbar-thumb-bg;
border-radius: $scrollbar-border-radius;
}
}
@mixin item-size($items-per-row, $gap) {
flex-basis: calc(percentage(math.div(1, $items-per-row)) - (#{$gap} * math.div(($items-per-row - 1), $items-per-row)));
max-width: calc(percentage(math.div(1, $items-per-row)) - (#{$gap} * math.div(($items-per-row - 1), $items-per-row)));
}

520
web/common/twig/scss/base/_photoswipe.scss Normal file
View File

@@ -0,0 +1,520 @@
$pswp-bg: $white !default;
$pswp-placeholder-bg: $pswp-bg !default;
$pswp-root-z-index: 100000 !default;
$pswp-preloader-color: rgba(79, 79, 79, 0.4) !default;
$pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9) !default;
// defined via js:
$pswp-transition-duration: $transition-speed !default;
$pswp-icon-color: $text-dark !default;
$pswp-icon-color-secondary: #4f4f4f !default;
$pswp-icon-stroke-color: #4f4f4f !default;
$pswp-icon-stroke-width: 2px !default;
$pswp-close-icon-size: 18px !default;
$pswp-arrows-bg: transparent !default;
$pswp-arrows-bg-hover: $body-bg-alt !default;
$pswp-thumb-border-width: $border-width !default;
$pswp-thumb-border-color: $border-color !default;
$pswp-thumb-border-radius: $border-radius-base !default;
$pswp-thumb-border-color-active: $brand-primary !default;
$pswp-error-text-color: $state-error !default;
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
/*
Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/
.pswp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: $pswp-root-z-index;
display: none;
touch-action: none;
outline: 0;
opacity: 0.003;
contain: layout style size;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&:focus {
outline: 0;
}
&--open {
display: block;
}
}
/* Prevents focus outline on the root element,
(it may be focused initially) */
.pswp,
.pswp__bg {
transform: translateZ(0);
will-change: opacity;
}
.pswp__bg {
opacity: 0.005;
background: $pswp-bg;
}
.pswp,
.pswp__scroll-wrap {
overflow: hidden;
}
.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__zoom-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pswp__zoom-wrap {
width: auto;
height: auto;
pointer-events: all;
touch-action: auto;
}
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pswp__counter {
display: none;
}
.pswp__item {
/* z-index for fade transition */
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.pswp__hidden {
display: none !important;
}
/* Allow to click through pswp__content element, but not its children */
.pswp__content {
pointer-events: none;
}
.pswp__content > * {
pointer-events: auto;
}
/*
PhotoSwipe UI
*/
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
display: grid;
}
.pswp__error-msg {
margin: auto;
font-size: 1em;
line-height: 1;
color: $pswp-error-text-color;
}
/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
*/
.pswp .pswp__hide-on-close {
opacity: 0.005;
will-change: opacity;
// transition: opacity $pswp-transition-duration cubic-bezier(0.4, 0, 0.22, 1);
z-index: 10; /* always overlap slide content */
pointer-events: none; /* hidden elements should not be clickable */
}
/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
opacity: 1;
pointer-events: auto;
}
/* <button> styles, including css reset */
.pswp__button {
position: relative;
display: block;
width: 50px;
height: 60px;
padding: 0;
margin: 0;
overflow: hidden;
cursor: pointer;
background: none;
border: 0;
box-shadow: none;
opacity: 0.85;
-webkit-appearance: none;
-webkit-touch-callout: none;
}
.pswp__button:disabled {
opacity: 0.3;
cursor: auto;
}
.pswp__icn {
fill: $pswp-icon-color;
color: $pswp-icon-color-secondary;
}
.pswp__icn {
position: absolute;
top: 14px;
left: 9px;
width: 32px;
height: 32px;
overflow: hidden;
pointer-events: none;
}
.pswp__icn-shadow {
stroke: var(--pswp-icon-stroke-color);
stroke-width: var(--pswp-icon-stroke-width);
fill: none;
}
.pswp__icn:focus {
outline: 0;
}
/*
div element that matches size of large image,
large image loads on top of it,
used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
background: $pswp-placeholder-bg;
}
.pswp__img--placeholder {
-webkit-backface-visibility: hidden;
display: none;
}
.pswp__top-bar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
justify-content: flex-end;
z-index: 10;
/* allow events to pass through top bar itself */
pointer-events: none !important;
}
.pswp__top-bar > * {
pointer-events: auto;
/* this makes transition significantly more smooth,
even though inner elements are not animated */
will-change: opacity;
}
/* Close button */
.pswp__button--close {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
color: $pswp-icon-color;
font-size: $pswp-close-icon-size;
transition: color $transition-speed;
svg {
width: 1em;
height: 1em;
fill: currentColor;
}
@include haf {
color: $pswp-error-text-color;
}
}
/* Arrow buttons */
.pswp__button--arrow {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 64px;
height: 64px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
font-size: 30px;
color: $pswp-icon-color;
background-color: $pswp-arrows-bg;
transition: background-color $transition-speed;
svg {
width: 1em;
height: 1em;
fill: currentColor;
}
&:disabled {
display: none;
cursor: default;
}
&--prev {
left: 110px;
}
&--next {
right: 10px;
}
@include haf {
background-color: $pswp-arrows-bg-hover;
}
}
.pswp--one-slide .pswp__button--arrow {
display: none;
}
/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
visibility: visible;
}
.pswp__button--arrow--next .pswp__icn {
left: auto;
right: 14px;
/* flip horizontally */
transform: scale(-1, 1);
}
/* Zoom button */
.pswp__button--zoom {
display: none;
}
/*.pswp--zoom-allowed .pswp__button--zoom {
display: block;
}*/
/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
display: none;
}
/* Loading indicator */
.pswp__preloader {
position: relative;
overflow: hidden;
width: 50px;
height: 60px;
margin-right: auto;
}
.pswp__preloader .pswp__icn {
opacity: 0;
transition: opacity 0.2s linear;
animation: pswp-clockwise 600ms linear infinite;
}
.pswp__preloader--active .pswp__icn {
opacity: 0.85;
}
@keyframes pswp-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.pswp__video-container {
position: relative;
//padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}
// todo thumbs nav
.pswp__thumbs-indicator {
@include custom-scrollbar;
position: absolute;
top: 15px;
bottom: 15px;
overflow-y: auto;
left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
width: 84px;
.pswp__thumb {
display: flex;
align-items: center;
justify-content: center;
width: 78px;
min-height: 78px;
aspect-ratio: 1;
border: $pswp-thumb-border-width solid $pswp-thumb-border-color;
border-radius: $pswp-thumb-border-radius;
background: $pswp-bg;
overflow: hidden;
cursor: pointer;
transition: border-color $transition-speed;
img {
object-fit: contain;
width: 100%;
height: 100%;
}
&--active,
&:hover {
border-color: $pswp-thumb-border-color-active;
}
}
}
@media screen and (max-width: 1199px) {
.pswp__button--arrow--prev {
left: 10px;
}
.pswp__thumbs-indicator {
display: none;
}
}
@media screen and (max-width: $md - 1) {
.pswp__top-bar {
position: static;
}
.pswp__counter {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 64px;
background: $pswp-bg;
box-shadow: $box-shadow-invert;
}
.pswp__button--arrow {
top: unset;
bottom: 0;
transform: none;
font-size: 24px;
&--prev {
left: 0;
}
&--next {
right: 0;
}
@include haf {
background-color: $pswp-arrows-bg;
}
}
}
@media screen and (max-width: $sm - 1) {
.pswp__counter,
.pswp__button--arrow {
height: 50px;
}
.pswp__button--arrow {
font-size: 20px;
width: 50px;
}
}

25
web/common/twig/scss/base/_reboot.scss Normal file
View File

@@ -0,0 +1,25 @@
@import "@css/base/_reboot";
html,
body {
height: auto;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
.wpj-blocek .form-group label {
color: inherit !important;
}
.tab-key {
a:focus,
input:focus,
select:focus,
button:focus {
outline: auto;
}
}

4
web/common/twig/scss/base/_shop-customization.scss Normal file
View File

@@ -0,0 +1,4 @@
// fallback soubor (neextendovat, nedědit)
// pro drobné customizace na eshopu (barvičky, layouty, etc)
// ideálně zde nemodifikovat komponenty!!
// import více strukturovaných souborů povolen a vítán

176
web/common/twig/scss/base/_tiny-slider.scss Normal file
View File

@@ -0,0 +1,176 @@
@use "@twig/scss/_global" as global;
// Version: 2.9.2
.tns-outer {
padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width
[hidden] {
display: none !important;
}
[aria-controls], [data-action] {
cursor: pointer;
}
}
.tns-slider {
transition: all 0s;
}
.tns-horizontal {
&.tns-subpixel {
white-space: nowrap;
> .tns-item {
display: inline-block;
vertical-align: top;
white-space: normal;
}
}
&.tns-no-subpixel {
&::after {
content: "";
display: table;
clear: both;
}
> .tns-item {
float: left;
}
}
&.tns-carousel {
&.tns-no-subpixel {
> .tns-item {
margin-right: -100%;
}
}
}
}
.tns-no-calc {
position: relative;
left: 0;
}
.tns-autowidth {
display: inline-block;
}
.tns-lazy-img {
transition: opacity .6s;
opacity: .6;
&.tns-complete {
opacity: 1;
}
}
.tns-ah {
transition: height 0s;
}
.tns-ovh {
overflow: hidden;
}
.tns-visually-hidden {
position: absolute;
left: -10000em;
}
.tns-transparent {
opacity: 0;
visibility: hidden;
}
.tns-fadeIn {
opacity: 1;
filter: alpha(opacity=100);
z-index: 0;
}
.tns-normal, .tns-fadeOut {
opacity: 0;
filter: alpha(opacity=0);
z-index: -1;
}
// *** Fix a viewport issue in initialization
.tns-vpfix {
white-space: nowrap;
> div, > li {
display: inline-block;
}
}
// *** Detecting browser capability ***
$width: 310px;
$height: 10px;
$count: 70;
$perpage: 3;
.tns-t {
&-subp2 {
margin: 0 auto;
width: $width;
position: relative;
height: $height;
overflow: hidden;
}
&-ct {
width: calc(100% * #{$count} / #{$perpage});
position: absolute;
right: 0;
&::after {
content: "";
display: table;
clear: both;
}
> div {
width: calc(100% / #{$count});
height: $height;
float: left;
}
}
}
.tns-controls {
button {
@include global.btn-reset;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
svg {
width: 1em;
height: 1em;
fill: currentColor;
* {
fill: currentColor;
}
}
}
}
.tns-nav {
position: absolute;
z-index: 1;
width: 100%;
display: flex;
height: 0;
button {
@include global.btn-reset;
}
}

58
web/common/twig/scss/base/_typography.scss Normal file
View File

@@ -0,0 +1,58 @@
@import "@twig/scss/base/type/_headings";
@import "@twig/scss/base/type/_table";
hr {
margin-top: $hr-margin-y;
margin-bottom: $hr-margin-y;
border: 0;
border-top: $hr-border-width solid $hr-border-color;
}
b,
strong,
.strong {
font-weight: $font-weight-bold;
}
a {
color: $link-color;
text-decoration: $link-decoration;
@include haf {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
&[role=button] {
cursor: pointer;
}
}
p {
margin-top: 0;
margin-bottom: $p-margin-bottom;
}
small,
.small {
font-size: $font-size-smaller;
font-weight: normal;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}

66
web/common/twig/scss/base/_wpj-modal-base.scss Normal file
View File

@@ -0,0 +1,66 @@
.modal-opened {
overflow: hidden;
}
.wpj-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: flex;
visibility: hidden;
justify-content: center;
align-items: center;
z-index: -1;
background: $modal-overlay-bg;
backdrop-filter: $modal-backdrop-filter;
&.active {
z-index: 1000;
visibility: visible;
width: 100%;
height: 100%;
.#{component("Modal:Side", "class")} {
right: 0;
}
}
.wpj-modal-loading {
display: flex;
align-items: center;
justify-content: center;
padding: $modal-loader-padding;
background: $modal-bg;
border-radius: $modal-border-radius;
&::before {
content: "";
display: block;
border: $modal-loader-thick solid $modal-loader-color;
border-radius: 50%;
border-right-color: transparent;
width: $modal-loader-size;
height: $modal-loader-size;
animation: loader 1.25s infinite linear;
}
}
.wpj-modal-loading-side {
position: absolute;
top: 0;
right: 0;
height: 100vh;
}
}
@keyframes loader {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

61
web/common/twig/scss/base/_wpj-tooltip.scss Normal file
View File

@@ -0,0 +1,61 @@
.wpj-tooltip {
background: $tooltip-bg;
border: 1px solid $tooltip-border-color;
border-radius: $tooltip-border-radius;
color: $tooltip-color;
padding: $tooltip-padding;
font-size: $tooltip-font-size;
box-shadow: $tooltip-box-shadow;
position: absolute;
text-align: center;
z-index: 1000;
white-space: normal;
&::after {
content: '';
display: inline-block;
position: absolute;
border-top: 7px solid $tooltip-bg;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
left: 50%;
bottom: -7px;
margin-left: -7px;
}
&::before {
content: '';
display: inline-block;
position: absolute;
border-top: 8px solid $tooltip-border-color;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
left: 50%;
bottom: -8px;
margin-left: -8px;
}
p:last-child {
margin: 0;
}
}
.wpj-tooltip-bottom {
&::after {
border-bottom: 7px solid $tooltip-bg;
top: -7px;
border-top: unset;
bottom: unset;
}
&::before {
border-bottom: 8px solid $tooltip-border-color;
top: -8px;
border-top: unset;
bottom: unset;
}
}
.wpj-tooltip-producer {
text-align: left;
}

155
web/common/twig/scss/base/componentOverrides/_articles.SquareItem.scss Normal file
View File

@@ -0,0 +1,155 @@
@use "sass:map";
@use "sass:math";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;
$params: (
"articles-row-count": 3,
"articles-row-flex-basis": 30%,
"item-background": global.$body-bg,
"item-border": none,
"item-border-radius": global.$border-radius-base,
"item-line-height": global.$line-height-sm,
"image-border": none,
"image-border-radius": global.$border-radius-lg,
"image-margin": 0 0 global.$spacer 0,
"content-padding": 0 global.$gap-width,
"content-padding-sm": 0 global.$gap-width,
"title-font-size": global.$font-size-h4,
"title-font-weight": global.$font-weight-bold,
"title-color": global.$text-dark,
"title-margin": 0 0 5px,
"title-line-clamp":2,
"title-line-height": global.$headings-line-height,
"lead-line-clamp": 2,
"lead-margin": 12px 0 global.$spacer 0,
"link-font-weight": global.$font-weight-base,
"link-color": global.$text-dark,
"btn-link-font-size": global.$font-size-base,
"btn-link-font-weight": global.$font-weight-base,
"btn-link-color": global.$black,
"btn-link-margin": 0,
"icon-font-size": global.$font-size-base,
"icon-color": global.$black,
);
@if global-variable-exists(c-articleslist-squareitem, components) {
$keys: map.keys(components.$c-articleslist-squareitem);
@each $name in $keys {
@if not map.get($params, $name) {
@warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("ArticlesList:SquareItem", "class")}'.";
}
}
$params: map.merge($params, components.$c-articleslist-squareitem);
}
.#{component("ArticlesList:SquareItem", "class")} {
border: map.get($params, "item-border");
border-radius: map.get($params, "item-border-radius");
background-color: map.get($params, "item-background-color");
flex: 1 0 100%;
a:not(.btn-link) {
text-decoration: none;
}
.#{component("Picture", "class")} {
border: map.get($params, "image-border");
border-radius: map.get($params, "image-border-radius");
overflow: hidden;
margin: map.get($params, "image-margin");
img {
margin: auto;
}
}
.content {
padding: map.get($params, "content-padding");
}
.title {
font-size: map.get($params, "title-font-size");
font-weight: map.get($params, "title-font-weight");
color: map.get($params, "title-color");
margin: map.get($params, "title-margin");
line-height: map.get($params, "title-line-height");
height: calc(map.get($params, "title-line-clamp") * map.get($params, "title-line-height") * map.get($params, "title-font-size"));
overflow: hidden;
-webkit-line-clamp: map.get($params, "title-line-clamp");
display: -webkit-box;
-webkit-box-orient: vertical;
}
p {
margin: 0;
}
.lead {
overflow: hidden;
-webkit-line-clamp: map.get($params, "lead-line-clamp");
display: -webkit-box;
-webkit-box-orient: vertical;
margin: map.get($params, "lead-margin");
}
.btn-link {
font-size: map.get($params, "btn-link-font-size");
font-weight: map.get($params, "btn-link-font-weight");
color: map.get($params, "btn-link-color");
margin: map.get($params, "btn-link-margin");
.c-icon {
font-size: map.get($params, "icon-font-size");
color: map.get($params, "icon-color");
}
}
@container (inline-size > 390px) {
@include global.container-query-selector("&") {
flex-basis: 45%;
max-width: calc(50% - #{global.$gap-width});
}
}
@container (inline-size < 700px) {
@include global.container-query-selector(".title") {
font-size: global.$font-size-larger;
}
@include global.container-query-selector(".content") {
padding: map.get($params, "content-padding-sm");
}
}
@container (inline-size > 1000px) {
@include global.container-query-selector("&") {
flex-basis: map.get($params, "articles-row-flex-basis");
max-width: calc(percentage(math.div(1, map.get($params, "articles-row-count"))) - #{global.$gap-width});
}
}
}
// modifikace pro bloček
// šířka podle počtu prvků (2 - 4)
.#{component("EditableContent", "class")} {
.#{component("ArticlesList:SquareItem", "class")} {
@container (inline-size > 1000px) {
@for $i from 2 through 4 {
@include global.container-query-selector("&:first-child:nth-last-child(#{$i}), &:first-child:nth-last-child(#{$i}) ~ .#{component("ArticlesList:SquareItem", "class")}") {
flex-basis: (math.div(100, $i) - 3%);
max-width: calc(percentage(math.div(100, $i)) - #{global.$gap-width});
}
}
}
}
}

278
web/common/twig/scss/base/componentOverrides/_product.LineItemWithVariations.scss Normal file
View File

@@ -0,0 +1,278 @@
@use "sass:map";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;
$params: (
"item-padding": 20px 15px,
"item-gap-lg": 50px,
"item-gap": global.$gap-width,
"item-border-bottom": global.$border-width solid global.$border-color,
"image-title-gap": 10px,
"image-title-width": 250px,
"image-overlay": true,
"image-max-width": 74px,
"image-border": 0,
"image-border-radius": global.$border-radius-lg,
"title-font-size": global.$font-size-base,
"title-font-weight": global.$font-weight-base,
"title-color": global.$text-dark,
"title-margin": 0,
"code-color": global.$gray,
"code-font-size": global.$font-size-smaller,
"labels-width": 150px,
"labels-margin": 0,
"delivery-width": 110px,
"delivery-font-size": global.$font-size-smaller,
"delivery-font-weight": global.$font-weight-base,
"variation-padding": 15px,
"variation-opener-icon-size": 18px,
"price-width": 170px,
"price-novat-font-size": global.$font-size-larger,
"price-vat-font-size": global.$font-size-base,
"button-max-width": 240px,
);
@if global-variable-exists(c-productlist-lineitemwithvariations, components) {
$keys: map.keys(components.$c-productlist-lineitemwithvariations);
@each $name in $keys {
@if not map.get($params, $name) {
@warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("ProductList:LineItemWithVariations", "class")}'.";
}
}
$params: map.merge($params, components.$c-productlist-lineitemwithvariations);
}
.#{component("ProductList:LineItemWithVariations", "class")} {
border: map.get($params, "item-border-bottom");
flex: 1 0 100%;
container-type: inline-size;
&.borderless {
border: 0;
}
.product {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: map.get($params, "item-gap");
padding: map.get($params, "item-padding");
.content {
justify-content: flex-end;
> a {
display: flex;
align-items: center;
gap: map.get($params, "image-title-gap");
text-decoration: none;
width: 100%;
@include global.haf {
.title {
text-decoration: underline;
}
}
}
}
}
.buy-form-wrapper {
width: 100%;
.btn-block {
position: relative;
.c-icon {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: map.get($params, "variation-opener-icon-size");
transition: global.$transition-speed;
}
&.active {
.c-icon {
transform: translateY(-50%) rotate(-180deg);
}
}
}
}
.variations {
border-top: 1px solid global.$border-color;
}
.variation {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
padding: map.get($params, "variation-padding");
gap: map.get($params, "item-gap");
&:not(:last-child) {
border-bottom: 1px solid global.$border-color;
}
.title-wrapper {
max-width: fit-content;
width: 100%;
.code {
margin-bottom: 0;
color: map.get($params, "code-color");
font-size: map.get($params, "code-font-size");
}
}
}
.content {
flex: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.#{component("Product:Labels", "class")} {
order: -1;
width: 100%;
}
.labels-empty {
display: none;
}
.#{component("Product:B2BPrice", "class")} {
text-align: right;
flex-direction: column;
align-items: flex-end;
width: 100%;
.price-without-vat {
font-size: map.get($params, "price-novat-font-size");
}
.price-with-vat {
font-size: map.get($params, "price-vat-font-size");
}
}
.#{component("Product:BuyForm", "class")} {
display: flex;
gap: 10px;
}
.#{component("Picture", "class")} {
@if (map.get($params, "image-overlay") == true) {
@include global.image-overlay;
}
max-width: map.get($params, "image-max-width");
width: 100%;
border: map.get($params, "image-border");
border-radius: map.get($params, "image-border-radius");
overflow: hidden;
img {
margin: auto;
}
}
.#{component("Product:DiscountLabel", "class")} {
position: absolute;
left: 10px;
top: 10px;
}
.title {
font-size: map.get($params, "title-font-size");
font-weight: map.get($params, "title-font-weight");
color: map.get($params, "title-color");
margin: map.get($params, "title-margin");
}
.#{component("Product:DeliveryTime:Availability", "class")} {
text-align: right;
width: map.get($params, "delivery-width");
margin: 0;
p {
font-size: map.get($params, "delivery-font-size");
font-weight: map.get($params, "delivery-font-weight");
}
}
@container (inline-size > 600px) {
@include global.container-query-selector(".#{component("Product:B2BPrice", "class")}") {
max-width: map.get($params, "price-width");
}
@include global.container-query-selector(".product .content") {
justify-content: space-between;
> a {
width: map.get($params, "image-title-width");
}
}
@include global.container-query-selector(".#{component("Product:DeliveryTime:Availability", "class")}") {
text-align: center;
}
@include global.container-query-selector(".variation .title-wrapper") {
max-width: calc(map.get($params, "image-title-width") - calc(map.get($params, "image-max-width") + map.get($params, "image-title-gap")));
}
}
@container (inline-size > #{global.$md}) {
@include global.container-query-selector(".labels-empty") {
display: block;
}
@include global.container-query-selector(".variation .title-wrapper") {
margin-left: calc(map.get($params, "image-max-width") + map.get($params, "image-title-gap"));
}
@include global.container-query-selector(".#{component("Product:DeliveryTime:Availability", "class")}") {
text-align: left;
}
@include global.container-query-selector(".#{component("Product:Labels", "class")}") {
order: 0;
}
@include global.container-query-selector(".#{component("Product:Labels", "class")}, .labels-empty") {
width: map.get($params, "labels-width");
margin: map.get($params, "labels-margin");
}
@include global.container-query-selector(".content") {
flex-wrap: nowrap;
}
}
@container (inline-size > #{global.$lg}) {
@include global.container-query-selector(".product, .variation") {
flex-direction: row;
gap: map.get($params, "item-gap-lg");
}
@include global.container-query-selector(".buy-form-wrapper") {
max-width: map.get($params, "button-max-width");
}
}
}

173
web/common/twig/scss/base/componentOverrides/_product.SquareItem.scss Normal file
View File

@@ -0,0 +1,173 @@
@use "sass:map";
@use "sass:math";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;
$params: (
"item-background": global.$body-bg,
"item-border": 0,
"item-border-radius": global.$border-radius-base,
"item-line-height": global.$line-height-sm,
"labels-position": global.$spacer auto auto global.$spacer,
"image-overlay": true,
"image-border": 0,
"image-border-radius": global.$border-radius-lg,
"image-margin": 0 0 global.$spacer 0,
"rating-position": auto global.$spacer global.$spacer auto,
"content-padding": 0 10px,
"title-font-size": global.$font-size-base,
"title-font-weight": global.$font-weight-base,
"title-color": global.$text-dark,
"title-margin": 0 0 8px 0,
"title-line-clamp": 2,
"price-margin": 0,
"price-font-size": 18px,
"price-font-weight": global.$font-weight-bold,
"original-price-color": global.$text-muted,
"original-price-font-size": global.$font-size-smaller,
"delivery-font-size": global.$font-size-smaller,
);
@if global-variable-exists(c-productlist-squareitem, components) {
$keys: map.keys(components.$c-productlist-squareitem);
@each $name in $keys {
@if not map.get($params, $name) {
@warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("ProductList:SquareItem", "class")}'.";
}
}
$params: map.merge($params, components.$c-productlist-squareitem);
}
.#{component("ProductList:SquareItem", "class")} {
position: relative;
background: map.get($params, "item-background");
border: map.get($params, "item-border");
border-radius: map.get($params, "item-border-radius");
line-height: map.get($params, "item-line-height");
flex: 1 0 100%;
.product-link {
text-decoration: none;
}
.#{component("Product:Labels", "class")} {
position: absolute;
inset: map.get($params, "labels-position");
z-index: 3;
}
.#{component("Picture", "class")}, .#{component("ProductList:CatalogPicture", "class")} {
@if (map.get($params, "image-overlay") == true) {
@include global.image-overlay;
}
border: map.get($params, "image-border");
border-radius: map.get($params, "image-border-radius");
overflow: hidden;
margin: map.get($params, "image-margin");
img {
margin: auto;
}
}
.#{component("Product:Reviews:Rating", "class")} {
position: absolute;
inset: map.get($params, "rating-position");
}
.content {
padding: map.get($params, "content-padding");
}
.title {
font-size: map.get($params, "title-font-size");
font-weight: map.get($params, "title-font-weight");
color: map.get($params, "title-color");
margin: map.get($params, "title-margin");
height: calc(map.get($params, "title-line-clamp") * map.get($params, "item-line-height") * map.get($params, "title-font-size"));
overflow: hidden;
-webkit-line-clamp: map.get($params, "title-line-clamp");
display: -webkit-box;
-webkit-box-orient: vertical;
}
.#{component("Product:Price", "class")} {
display: flex;
align-items: baseline;
margin: map.get($params, "price-margin");
> div {
margin: 0 5px 0 0;
strong {
font-size: map.get($params, "price-font-size");
font-weight: map.get($params, "price-font-weight");
}
}
p strong {
color: map.get($params, "original-price-color");
font-size: map.get($params, "original-price-font-size");
}
}
.#{component("Product:DeliveryTime", "class")} {
margin: 0;
p {
font-size: map.get($params, "delivery-font-size");
}
}
.#{component("Product:SubmitBlock", "class")} {
margin-top: global.$gap-width;
.btn-ctr,
.#{component("Product:AddToCartButton", "class")} {
border-radius: global.$btn-border-radius;
+ .#{component("JsShop:ActionButton", "class")} {
margin-left: 0;
border-top-left-radius: global.$btn-border-radius;
border-bottom-left-radius: global.$btn-border-radius;
}
}
.#{component("JsShop:ActionButton", "class")} {
+ .#{component("JsShop:ActionButton", "class")} {
margin-left: calc((#{global.$gap-width} + #{global.$btn-border-width}) * -1);
}
}
}
@container (inline-size > 290px) {
@include global.container-query-selector("&") {
flex-basis: 45%;
max-width: calc(50% - #{global.$gap-width});
}
}
@container (inline-size > #{global.$md}) {
@include global.container-query-selector("&") {
flex-basis: 30%;
max-width: calc(percentage(math.div(1, 3)) - #{global.$gap-width});
}
}
@container (inline-size > #{global.$lg}) {
@include global.container-query-selector("&") {
flex-basis: 21%;
max-width: calc(25% - #{global.$gap-width});
}
}
}

158
web/common/twig/scss/base/componentOverrides/_product.SquareItemLarge.scss Normal file
View File

@@ -0,0 +1,158 @@
@use "sass:map";
@use "sass:math";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;
$params: (
"item-background": global.$body-bg,
"item-border": 0,
"item-border-radius": global.$border-radius-base,
"item-line-height": global.$line-height-sm,
"labels-position": global.$spacer auto auto global.$spacer,
"image-overlay": true,
"image-border": 0,
"image-border-radius": global.$border-radius-lg,
"image-margin": 0 0 global.$spacer 0,
"rating-position": auto global.$spacer global.$spacer auto,
"content-padding": 0 10px,
"title-font-size": global.$font-size-base,
"title-font-weight": global.$font-weight-base,
"title-color": global.$text-dark,
"title-margin": 0 0 8px 0,
"title-line-clamp": 2,
"price-margin": 0,
"price-font-size": 18px,
"price-font-weight": global.$font-weight-bold,
"original-price-color": global.$text-muted,
"original-price-font-size": global.$font-size-smaller,
"delivery-font-size": global.$font-size-smaller,
);
@if global-variable-exists(c-productlist-squareitemlarge, components) {
$keys: map.keys(components.$c-productlist-squareitemlarge);
@each $name in $keys {
@if not map.get($params, $name) {
@warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("ProductList:SquareItemLarge", "class")}'.";
}
}
$params: map.merge($params, components.$c-productlist-squareitemlarge);
}
.#{component("ProductList:SquareItemLarge", "class")} {
position: relative;
background: map.get($params, "item-background");
border: map.get($params, "item-border");
border-radius: map.get($params, "item-border-radius");
line-height: map.get($params, "item-line-height");
flex: 1 0 100%;
.product-link {
text-decoration: none;
}
.#{component("Product:Labels", "class")} {
position: absolute;
inset: map.get($params, "labels-position");
z-index: 1;
}
.#{component("Picture", "class")} {
@if (map.get($params, "image-overlay") == true) {
@include global.image-overlay;
}
border: map.get($params, "image-border");
border-radius: map.get($params, "image-border-radius");
overflow: hidden;
margin: map.get($params, "image-margin");
img {
margin: auto;
}
}
.#{component("Product:Reviews:Rating", "class")} {
position: absolute;
inset: map.get($params, "rating-position");
}
.content {
padding: map.get($params, "content-padding");
}
.title {
font-size: map.get($params, "title-font-size");
font-weight: map.get($params, "title-font-weight");
color: map.get($params, "title-color");
margin: map.get($params, "title-margin");
height: calc(map.get($params, "title-line-clamp") * map.get($params, "item-line-height") * map.get($params, "title-font-size"));
overflow: hidden;
-webkit-line-clamp: map.get($params, "title-line-clamp");
display: -webkit-box;
-webkit-box-orient: vertical;
}
.#{component("Product:Price", "class")} {
display: flex;
align-items: baseline;
margin: map.get($params, "price-margin");
> div {
margin: 0 5px 0 0;
strong {
font-size: map.get($params, "price-font-size");
font-weight: map.get($params, "price-font-weight");
}
}
p strong {
color: map.get($params, "original-price-color");
font-size: map.get($params, "original-price-font-size");
}
}
.#{component("Product:DeliveryTime", "class")} {
margin: 0;
p {
font-size: map.get($params, "delivery-font-size");
}
}
.#{component("Product:SubmitBlock", "class")} {
margin-top: global.$gap-width;
.btn-ctr,
.#{component("Product:AddToCartButton", "class")} {
border-radius: global.$btn-border-radius;
+ .#{component("JsShop:ActionButton", "class")} {
margin-left: 0;
border-top-left-radius: global.$btn-border-radius;
border-bottom-left-radius: global.$btn-border-radius;
}
}
.#{component("JsShop:ActionButton", "class")} {
+ .#{component("JsShop:ActionButton", "class")} {
margin-left: calc((#{global.$gap-width} + #{global.$btn-border-width}) * -1);
}
}
}
@container (inline-size > 800px) {
@include global.container-query-selector("&") {
@include global.item-size(2, global.$gap-width);
}
}
}

211
web/common/twig/scss/base/forms/_custom-control.scss Normal file
View File

@@ -0,0 +1,211 @@
@use "sass:math";
.custom-control {
cursor: pointer;
display: inline-block;
height: auto;
margin: 0;
padding-left: 1.75rem;
position: relative;
color: $custom-control-color;
&:hover .custom-control-indicator {
border-color: $custom-control-border-checked;
}
&.disabled {
opacity: .5;
pointer-events: none;
}
}
.custom-control-input {
opacity: 0;
position: absolute;
z-index: -1;
&:checked ~ .custom-control-indicator {
border-color: $custom-control-border-checked;
}
&:focus ~ .custom-control-indicator,
&:active ~ .custom-control-indicator {
border-color: $custom-control-border-checked;
}
&:disabled {
~ .custom-control-indicator {
border-color: #b4b4b4;
background-color: #dbdbdb;
}
}
}
.custom-control-indicator {
background: $input-bg;
border: $input-border-width solid $input-border-color;
display: block;
pointer-events: none;
position: absolute;
left: 0;
top: calc((($line-height-base * ($font-size-base * 1)) - $custom-control-size) / 2);
user-select: none;
width: $custom-control-size;
height: $custom-control-size;
transition: border-color $transition-speed;
}
.custom-checkbox {
.custom-control-indicator {
border-radius: $border-radius-sm;
&::before {
background-image: $custom-checkbox-icon;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.custom-control-input:checked ~ .custom-control-indicator {
background-color: $custom-control-background-checked;
&::before {
content: "" !important;
width: $custom-checkbox-size;
height: $custom-checkbox-size;
}
}
}
.custom-checkbox-lg {
font-size: $custom-control-font-size-lg;
font-weight: $font-weight-bold;
padding-left: 2.5rem;
.custom-control-indicator {
width: $custom-control-size-lg;
height: $custom-control-size-lg;
border-radius: $border-radius-base;
&::before {
background-image: $custom-checkbox-icon;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.custom-control-input:checked ~ .custom-control-indicator {
background-color: $custom-control-background-checked;
&::before {
content: "" !important;
width: $custom-checkbox-size-lg;
height: $custom-checkbox-size-lg;
}
}
}
.custom-radio {
.custom-control-indicator {
border-radius: 50%;
}
.custom-control-input:checked ~ .custom-control-indicator {
background-color: $custom-control-background-checked;
border-color: $custom-control-background-checked;
}
.custom-control-input:focus ~ .custom-control-indicator {
border-color: $custom-control-background-checked;
}
.custom-control-input:active ~ .custom-control-indicator {
background-color: $input-border-color;
border-color: $custom-control-background-checked;
}
}
.custom-radio-lg {
.custom-control-indicator {
width: $custom-control-size-lg;
height: $custom-control-size-lg;
}
.custom-control-input:checked ~ .custom-control-indicator {
&::before {
content: "";
width: $custom-checkbox-size;
height: $custom-checkbox-size;
background-image: $custom-checkbox-icon;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
.custom-toggle {
display: inline-flex;
align-items: center;
height: $custom-toggle-handle-size;
padding: 0;
cursor: auto;
input {
&:disabled ~ .custom-toggle-handle {
opacity: .5;
pointer-events: none;
}
&:checked ~ .custom-toggle-handle {
background-color: $green;
&::before {
transform: translateX(calc(100% - (#{$custom-toggle-handle-size} / 2)));
}
}
}
}
.custom-toggle-handle {
margin: 0;
display: block;
position: relative;
cursor: pointer;
left: 0;
width: $custom-toggle-width;
height: $custom-toggle-height;
background-color: $custom-toggle-background;
border: $custom-toggle-border;
border-radius: $custom-toggle-border-radius;
transition: background-color $transition-speed;
&::before {
content: "";
display: block;
position: absolute;
left: 0;
top: calc(($custom-toggle-handle-size - $custom-toggle-height) / 2 * -1);
width: $custom-toggle-handle-size;
height: $custom-toggle-handle-size;
background-color: $custom-toggle-handle-background;
border: $custom-toggle-handle-border;
border-radius: $custom-toggle-handle-border-radius;
box-shadow: $custom-toggle-handle-box-shadow;
transition: transform $transition-speed;
}
}

278
web/common/twig/scss/base/forms/_forms.scss Normal file
View File

@@ -0,0 +1,278 @@
$input-required-asterisk-color: $state-error !default;
$file-upload-bg: $body-bg-alt !default;
$file-upload-padding: 20px !default;
$file-upload-list-item-border: 1px solid $border-color !default;
$file-upload-list-item-padding: 15px !default;
$file-upload-list-item-spacing: 10px !default;
.form-control,
.form-control-sm {
background-color: $input-bg;
border: $input-border-width solid $input-border-color;
border-radius: $input-border-radius;
color: $input-color;
display: block;
font-size: 16px; // minimum to prevent safari zoom
line-height: $input-line-height;
min-height: $input-height;
padding: $input-padding-y $input-padding-x;
transition: border-color ease-in-out $transition-speed;
width: 100%;
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
&:focus {
border-color: $input-border-focus;
outline: none;
}
&::placeholder {
color: #828282;
opacity: 1; // FF override https://github.com/twbs/bootstrap/pull/11526.
}
&:disabled,
&[readonly] {
background-color: #f4f4f4;
opacity: 1; // iOS fix https://github.com/twbs/bootstrap/issues/11655.
pointer-events: none;
}
}
.form-control-sm {
min-height: $input-height-sm;
padding: $input-padding-sm-y $input-padding-sm-x;
}
.form-group {
margin-bottom: $spacer;
position: relative;
label {
color: $label-color;
margin-bottom: .25rem;
}
&.required label::after {
color: $input-required-asterisk-color;
content: "*";
font-size: 16px;
line-height: 1;
margin-left: 3px;
}
}
select.form-control,
select.form-control-sm {
appearance: none;
background: $input-bg $form-select-indicator $form-select-background;
border: $input-border-width solid $input-border-color;
cursor: pointer;
padding: $input-padding-y ($input-padding-x + $form-select-indicator-padding) $input-padding-y $input-padding-x;
vertical-align: middle;
&:focus {
&::-ms-value {
color: $input-color;
background-color: $input-bg;
}
}
&[multiple],
&[size]:not([size="1"]) {
height: auto;
padding-right: $input-padding-x;
background-image: none;
}
&[readonly] {
background-image: none;
}
// Hides the default caret in IE11
&::-ms-expand {
display: none;
}
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $input-color;
}
}
select.form-control-sm {
background: $input-bg $form-select-indicator $form-select-background-sm;
padding: $input-padding-sm-y ($input-padding-sm-x + $form-select-indicator-padding-sm) $input-padding-sm-y $input-padding-sm-x;
font-size: 14px;
}
// globaly disable number arrows
input[type=number] {
@include disable-spinner;
}
input[type=date].form-control {
appearance: none;
}
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range {
display: block;
}
/*.input-group {
display: flex;
align-items: stretch;
.form-control {
flex: 1 1 auto;
width: 1%;
min-width: 0;
position: relative;
&:focus {
z-index: 3;
}
}
.btn {
margin-left: -$input-border-width;
position: relative;
z-index: 2;
&:focus {
z-index: 3;
}
}
@if $btn-border-radius {
.form-control {
border-radius: $btn-border-radius 0 0 $btn-border-radius;
}
.btn {
border-radius: 0 $btn-border-radius $btn-border-radius 0;
}
} @else if $input-border-radius {
.form-control {
border-radius: $input-border-radius 0 0 $input-border-radius;
}
.btn {
border-radius: 0 $input-border-radius $input-border-radius 0;
}
}
}*/
.form-group-legend {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
input,
select {
order: 2;
}
label {
margin-right: auto;
}
.legend {
color: $text-muted;
}
p {
margin-bottom: .25rem;
}
}
.fine-uploader-container {
width: 100%;
.fine-uploader {
width: 100%;
}
.uploader-wrapper {
width: 100%;
background-color: $file-upload-bg;
padding: $file-upload-padding;
text-align: center;
margin-bottom: $file-upload-list-item-spacing;
position: relative;
p:last-of-type {
margin-bottom: 0;
}
}
.qq-hide {
display: none;
}
.c-icon {
vertical-align: bottom;
}
.upload-list {
list-style: none;
padding: 0;
margin: 0;
li {
display: flex;
align-items: center;
padding: $file-upload-list-item-padding;
border: $file-upload-list-item-border;
gap: $file-upload-list-item-spacing;
+ li {
margin-top: $file-upload-list-item-spacing;
}
}
}
.upload-list-item-buttons {
margin-left: auto;
}
.upload-drop-area {
background-color: $file-upload-bg;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
.upload-drop-area-message {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
.upload-loading-spinner {
width: 1em;
height: 1em;
border-radius: 50%;
border: 2px solid $headings-color;
border-bottom-color: transparent;
animation: spin 1s infinite linear;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

141
web/common/twig/scss/base/forms/_validation.scss Normal file
View File

@@ -0,0 +1,141 @@
// ikonka nebo url
$input-icon-valid: null !default;//$icons_check-circle !default;
$input-icon-invalid: null !default;//$icons_close-circle !default;
$input-icon-warning: null !default;//$icons_warning-circle !default;
$validation-error-input-border: false !default;
//symfony validační proměnné
$alert-margin: 0 !default;
$alert-padding: 5px !default;
$alert-border-radius: $border-radius-base !default;
$alert-border: 1px solid $border-color !default;
$alert-color: $state-error !default;
$alert-position-top: calc(100% - 1px) !default;
$alert-position-left: 0 !default;
//------------ symfony validační css
form {
label {
+ ul {
position: absolute;
top: $alert-position-top;
left: $alert-position-left;
padding: $alert-padding;
margin: $alert-margin;
border-radius: $alert-border-radius;
border: $alert-border;
color: $alert-color;
z-index: 30;
list-style: none;
background-color: white;
}
}
}
//------------
.form-control-feedback {
display: block;
font-size: 16px;
line-height: $input-height;
pointer-events: none;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
transition: opacity .3s;
width: 3rem;
height: $input-height;
}
.has-feedback {
.form-control {
padding-right: 3rem;
}
select {
+ .form-control-feedback {
opacity: 0;
}
}
}
.has-error {
@if ($validation-error-input-border) {
.form-control {
border-color: $state-error;
}
}
.form-control:focus ~ .form-control-feedback {
opacity: 0;
}
.form-control-feedback::before {
color: $state-error;
content: $input-icon-invalid;
}
// zobrazovat max jednu hlasku o nevalidite
.help-block[data-bv-result="INVALID"][style="display: block;"] + .help-block[data-bv-result="INVALID"] {
display: none !important;
}
// nezobrazovat u checkboxu a radii
.custom-control {
color: $state-error;
.form-control-feedback {
display: none !important;
}
}
}
.has-success {
.form-control-feedback {
&::before {
color: $state-success;
content: $input-icon-valid;
}
}
}
.help-block {
background: $white;
border: 1px solid $border-color;
font-size: 11px;
line-height: $line-height-sm;
margin-top: 2px;
padding: 10px;
position: absolute;
left: 1px;
top: 100%;
width: auto;
z-index: 100;
&::before,
&::after {
border: 10px solid transparent;
border-top: 0;
content: '';
display: block;
position: absolute;
top: -10px;
left: 25px;
}
&::before {
border-bottom-color: $border-color;
}
&::after {
border-bottom-color: $white;
top: -9px;
}
}
.validation-warning {
+ .form-control-feedback::before {
color: $state-warning;
content: $input-icon-warning;
}
}

86
web/common/twig/scss/base/type/_headings.scss Normal file
View File

@@ -0,0 +1,86 @@
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.title-default {
color: $headings-color;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
margin-bottom: $headings-margin-bottom;
text-transform: $headings-text-transform;
}
h1 {
font-size: $font-size-h1;
}
h2 {
font-size: $font-size-h2;
}
h3 {
font-size: $font-size-h3;
}
h4 {
font-size: $font-size-h4;
}
h5 {
font-size: $font-size-h5;
}
h6 {
font-size: $font-size-h6;
}
// These declarations are kept separate from and placed after
// the previous tag-based declarations so that the classes beat the tags in
// the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
.h1 {
font-size: $font-size-h1;
}
.h2 {
font-size: $font-size-h2;
}
.h3 {
font-size: $font-size-h3;
}
.h4 {
font-size: $font-size-h4;
}
.h5 {
font-size: $font-size-h5;
}
.h6 {
font-size: $font-size-h6;
}
.title-default {
font-size: $title-default-font-size;
}
.heading-reset {
color: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
margin: inherit;
text-transform: inherit;
font-size: inherit;
letter-spacing: inherit;
}

45
web/common/twig/scss/base/type/_table.scss Normal file
View File

@@ -0,0 +1,45 @@
.table {
margin-bottom: $spacer;
width: 100%;
table {
min-width: 100%;
}
th,
td {
border-bottom: $td-border;
padding: $td-padding;
&:first-child {
padding-left: 0;
}
}
thead th {
border-bottom: $thead-border;
}
th {
text-align: inherit;
vertical-align: bottom;
color: $thead-color;
font-size: $thead-font-size;
font-weight: $font-weight-bold;
}
p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: $md - 1) {
th {
letter-spacing: initial;
}
th,
td {
padding: .5rem .25rem;
}
}
}