Jacek Pyziak
62c7105bef
- Updated SCSS styles for headers (h2, h3) and added bold styling for required custom fields. - Improved layout with additional margin for attributes and ensured consistent font weights. - Modified PHP template to include a clearer structure for custom fields, adding a note for required fields.
4418 lines
75 KiB
SCSS
4418 lines
75 KiB
SCSS
// out: ../style-css/style.css, compress: true, sourceMap: true
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
|
||
$cBlue: #77cdd1;
|
||
$cBlueDark: #51a9ad;
|
||
$cPink: #f7abb0;
|
||
$cPinkDark: #dc3545;
|
||
$cText: #222;
|
||
$cTextLight: #3a3a3a;
|
||
$cGray: #f6f6f6;
|
||
$cGrayLight: #eceff1;
|
||
$cComment: #c3c3c3;
|
||
$cWhite: #fff;
|
||
|
||
$fJosefin: 'Josefin Sans',
|
||
sans-serif;
|
||
$font_nunito: 'Nunito Sans',
|
||
sans-serif;
|
||
@import '_mixins';
|
||
|
||
@keyframes fade_in_show {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
img {
|
||
text-indent: -9999px !important;
|
||
color: rgba(0, 0, 0, 0) !important;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Open Sans', sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
|
||
&.no-scroll {
|
||
overflow: hidden;
|
||
max-height: 100vh;
|
||
}
|
||
|
||
&.page-login-form {
|
||
.main {
|
||
.container {
|
||
max-width: 600px;
|
||
margin: auto;
|
||
padding-right: 15px;
|
||
padding-left: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
input:-webkit-autofill,
|
||
input:-webkit-autofill:hover,
|
||
input:-webkit-autofill:focus,
|
||
input:-webkit-autofill:active {
|
||
-webkit-box-shadow: 0 0 0 30px white inset !important;
|
||
}
|
||
|
||
.form-control {
|
||
border: 2px solid #e7e7e7;
|
||
border-radius: 0;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.mini-content {
|
||
max-width: 1280px;
|
||
}
|
||
|
||
.btn {
|
||
border: 0;
|
||
border-radius: 0;
|
||
color: #fff;
|
||
text-transform: uppercase;
|
||
font-size: 15px;
|
||
padding: 20px 30px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&:focus {
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
.btn-danger {
|
||
background: $cPinkDark;
|
||
|
||
&:hover {
|
||
background: $cPink;
|
||
}
|
||
|
||
&:active {
|
||
background: $cPink;
|
||
border-color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-success {
|
||
background: $cBlueDark;
|
||
|
||
&:hover {
|
||
background: $cBlue;
|
||
}
|
||
|
||
&:active {
|
||
background: $cBlue;
|
||
border-color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-success:not(:disabled):not(.disabled):active,
|
||
.btn-success:not(:disabled):not(.disabled).active,
|
||
.show>.btn-success.dropdown-toggle {
|
||
background: $cBlue;
|
||
border: none;
|
||
}
|
||
|
||
.btn-success:not(:disabled):not(.disabled):active:focus,
|
||
.btn-success:not(:disabled):not(.disabled).active:focus {
|
||
background: $cBlue;
|
||
border: none;
|
||
}
|
||
|
||
.btn-success:not(:disabled):not(.disabled):active:focus,
|
||
.btn-success:not(:disabled):not(.disabled).active:focus,
|
||
.show>.btn-success.dropdown-toggle:focus {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.btn-success.disabled,
|
||
.btn-success:disabled {
|
||
color: #fff;
|
||
background: $cBlue;
|
||
border-color: $cBlue;
|
||
}
|
||
|
||
.jconfirm.jconfirm-modern .jconfirm-box {
|
||
box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1) !important;
|
||
padding: 60px 30px 45px !important;
|
||
|
||
.btn {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.jconfirm-title {
|
||
font-family: $fJosefin !important;
|
||
font-weight: 600 !important;
|
||
font-size: 32px !important;
|
||
}
|
||
}
|
||
|
||
.alert {
|
||
border-radius: 0;
|
||
border: 0;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
padding: 15px;
|
||
margin: 0 auto 75px;
|
||
|
||
&.alert-success {
|
||
background: $cBlueDark;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.title-border {
|
||
border-bottom: 3px solid #e7e7e7;
|
||
padding: 10px 0;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
line-height: 32px;
|
||
letter-spacing: -1px;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.box {
|
||
padding: 75px 0;
|
||
|
||
@include respond-between(sm, md) {
|
||
padding: 25px 0;
|
||
}
|
||
|
||
.box-title {
|
||
font-family: $font_nunito;
|
||
font-weight: 600;
|
||
font-size: 22px;
|
||
margin-bottom: 15px;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.new {
|
||
border: 2px solid #dc3545;
|
||
padding: 5px 10px;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
position: relative;
|
||
top: 10px;
|
||
left: -10px;
|
||
z-index: 10;
|
||
background: #fff;
|
||
}
|
||
|
||
.box-mini {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.row-flex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
@media (max-width: 991px) {
|
||
.container {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1400px) and (max-width: 1629px) {
|
||
.container {
|
||
max-width: 1370px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1630px) {
|
||
.container {
|
||
max-width: 1600px;
|
||
}
|
||
}
|
||
|
||
.site-title {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 26px;
|
||
margin-bottom: 25px;
|
||
text-align: center;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
#top-sticky-wrapper {
|
||
@include respond-below(sm) {
|
||
#top {
|
||
z-index: 20;
|
||
}
|
||
}
|
||
}
|
||
|
||
#top {
|
||
background: $cGray;
|
||
padding: 15px 0;
|
||
|
||
#scontainer-1 {
|
||
.contact {
|
||
@media (max-width: 992px) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.free-delivery {
|
||
float: right;
|
||
color: $cText;
|
||
|
||
@media (min-width: 993px) and (max-width: 1200px) {
|
||
float: none;
|
||
display: block;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
a {
|
||
color: $cText;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
#mini-login {
|
||
text-align: right;
|
||
|
||
a {
|
||
font-weight: 600;
|
||
color: $cBlueDark;
|
||
margin-left: 10px;
|
||
|
||
span {
|
||
color: $cText;
|
||
padding-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#header {
|
||
padding: 15px 0;
|
||
|
||
.logo {
|
||
a {
|
||
display: block;
|
||
max-width: 300px;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
#search-form-big {
|
||
height: 0;
|
||
position: fixed;
|
||
top: -100%;
|
||
left: 0;
|
||
width: 100%;
|
||
@extend .box;
|
||
background: #fff;
|
||
z-index: 110;
|
||
overflow: hidden;
|
||
@include transition;
|
||
max-height: 100%;
|
||
overflow-y: scroll;
|
||
|
||
&.visible {
|
||
top: 0;
|
||
height: auto;
|
||
}
|
||
|
||
.btn-success {
|
||
margin: 25px auto;
|
||
display: block;
|
||
width: 175px;
|
||
}
|
||
|
||
.no-found {
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
padding: 25px 0 50px;
|
||
text-align: center;
|
||
}
|
||
|
||
.search-big-results {
|
||
padding: 50px 0;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
|
||
@include respond-below(sm) {
|
||
padding: 25px 0;
|
||
}
|
||
|
||
.product-search {
|
||
position: relative;
|
||
width: 100%;
|
||
margin: 0 15px 15px 0;
|
||
max-width: calc(100% / 6 - 15px);
|
||
|
||
@include respond-between(sm, md) {
|
||
max-width: calc(100% / 4 - 25px);
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
max-width: calc(100% / 2 - 15px);
|
||
}
|
||
|
||
.new {
|
||
border: 2px solid $cPinkDark;
|
||
padding: 3px 5px;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: -10px;
|
||
left: -10px;
|
||
z-index: 10;
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.small-title {
|
||
text-transform: uppercase;
|
||
opacity: 0.75;
|
||
position: relative;
|
||
width: 100%;
|
||
|
||
a {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 0;
|
||
color: $cText;
|
||
@include transition;
|
||
font-size: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 45px;
|
||
width: 45px;
|
||
|
||
&:hover {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
|
||
.input {
|
||
padding-top: 25px;
|
||
|
||
input {
|
||
border-radius: 0;
|
||
border: 0;
|
||
border-bottom: 2px solid $cText;
|
||
padding-left: 0;
|
||
padding-bottom: 10px;
|
||
padding-top: 10px;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
height: 50px;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&::placeholder {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: $cText;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
#search-button {
|
||
margin-right: 25px;
|
||
|
||
.btn {
|
||
color: #fff;
|
||
background: none;
|
||
height: 50px;
|
||
width: 50px;
|
||
position: relative;
|
||
z-index: 5;
|
||
@include transition;
|
||
background: #000;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
|
||
&:hover {
|
||
border-radius: 0;
|
||
}
|
||
|
||
img {
|
||
width: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#basket-mini {
|
||
a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: $cBlueDark;
|
||
|
||
@include respond-below(sm) {
|
||
text-align: right;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
|
||
.icon {
|
||
border-radius: 0;
|
||
background: $cBlueDark;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
height: 50px;
|
||
width: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 10px;
|
||
background: $cText;
|
||
border-radius: 50%;
|
||
@include transition;
|
||
|
||
@include respond-below(sm) {
|
||
order: 1;
|
||
margin-left: 10px;
|
||
margin-right: 0;
|
||
}
|
||
|
||
img {
|
||
width: 20px;
|
||
}
|
||
}
|
||
|
||
.basket-details {
|
||
font-size: 14px;
|
||
|
||
.title {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.details {
|
||
color: $cText;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* menu główne */
|
||
.menu-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
background: rgba(0, 0, 0, 0.35);
|
||
z-index: 10;
|
||
display: none;
|
||
opacity: 0;
|
||
@include transition;
|
||
|
||
&.visible {
|
||
display: block;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
#main-menu-sticky-wrapper {
|
||
&.is-sticky {
|
||
#main-menu {
|
||
background: #fff;
|
||
border-bottom: 3px solid #e7e7e7;
|
||
width: 100%;
|
||
|
||
.level-0 {
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#main-menu {
|
||
position: relative;
|
||
z-index: 20;
|
||
|
||
#menu-container-1 {
|
||
ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style-type: none;
|
||
|
||
@media (min-width: 993px) {
|
||
&.level-0 {
|
||
display: flex;
|
||
margin-left: -15px;
|
||
justify-content: center;
|
||
|
||
>li {
|
||
@include respond-between(sm, md) {
|
||
&#link-5 {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&#link-45 {
|
||
a {
|
||
color: #cc0000;
|
||
}
|
||
}
|
||
|
||
>i {
|
||
display: none;
|
||
}
|
||
|
||
>a {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
color: $cText;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
display: block;
|
||
padding: 10px 9px;
|
||
@include transition;
|
||
|
||
@include respond-between(md, lg) {
|
||
padding: 5px;
|
||
font-size: 17px;
|
||
}
|
||
|
||
@include respond-between(sm, md) {
|
||
padding: 5px;
|
||
font-size: 17px;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
>ul {
|
||
display: flex;
|
||
animation: fade_in_show 0.5s;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
|
||
>ul {
|
||
left: 0;
|
||
width: 100%;
|
||
display: none;
|
||
position: absolute;
|
||
padding: 25px;
|
||
background: #fff;
|
||
@include transition;
|
||
|
||
>li {
|
||
width: calc(100% / 4);
|
||
margin-bottom: 25px;
|
||
|
||
@include respond-between(lg, xl) {
|
||
width: calc(100% / 3);
|
||
}
|
||
|
||
@include respond-between(sm, lg) {
|
||
width: calc(100% / 2);
|
||
}
|
||
|
||
a {
|
||
color: $cText;
|
||
font-size: 13px;
|
||
@include transition;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
|
||
>a {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
|
||
i {
|
||
display: none;
|
||
}
|
||
|
||
ul {
|
||
padding-top: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#mobile-menu-close,
|
||
#mobile-menu-open {
|
||
display: none;
|
||
}
|
||
|
||
.promoted-products {
|
||
@extend .box;
|
||
|
||
.box-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
|
||
@include respond-above(xxl) {
|
||
.product-mini {
|
||
|
||
&:nth-child(11),
|
||
&:nth-child(12) {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-mini {
|
||
max-width: calc(100% / 4 - 15px);
|
||
width: 100%;
|
||
margin: 0 15px 15px 0;
|
||
position: relative;
|
||
|
||
@include respond-between(md, xl) {
|
||
max-width: calc(100% / 4 - 15px);
|
||
}
|
||
|
||
@include respond-between(sm, md) {
|
||
max-width: calc(100% / 3 - 15px);
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
max-width: calc(100% / 2 - 15px);
|
||
}
|
||
|
||
@include respond-below(xxs) {
|
||
max-width: 100%;
|
||
margin: 0 0 15px 0;
|
||
}
|
||
|
||
.new {
|
||
@extend .new;
|
||
position: absolute;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-content {
|
||
gap: 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.product-mini {
|
||
width: calc(25% - 8px);
|
||
position: relative;
|
||
|
||
@media (max-width: 1199px) {
|
||
width: calc(33.3333333% - 7px);
|
||
}
|
||
|
||
@media (max-width: 991px) {
|
||
width: calc(50% - 7px);
|
||
}
|
||
|
||
.new {
|
||
@extend .new;
|
||
position: absolute;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-content {
|
||
gap: 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.product-mini {
|
||
width: calc(25% - 8px);
|
||
position: relative;
|
||
|
||
@media (max-width: 767px) {
|
||
width: calc(33.33333333% - 7px);
|
||
}
|
||
|
||
@media (max-width: 575px) {
|
||
width: calc(50% - 7px);
|
||
}
|
||
|
||
.new {
|
||
border: 2px solid $cPinkDark;
|
||
padding: 5px 10px;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 10px;
|
||
left: -10px;
|
||
z-index: 10;
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-mini,
|
||
.product-search {
|
||
overflow: hidden;
|
||
|
||
a {
|
||
position: relative;
|
||
display: block;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.img {
|
||
&:hover {
|
||
img {
|
||
&.first {
|
||
opacity: 0;
|
||
}
|
||
|
||
&.second {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-details {
|
||
.name {
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 100%;
|
||
padding-top: 100%;
|
||
display: block;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
|
||
img {
|
||
height: 100%;
|
||
width: 100%;
|
||
object-fit: cover;
|
||
object-position: top center;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
&.first {
|
||
transition: all 1s ease;
|
||
}
|
||
|
||
&.second {
|
||
transition: all 1s ease;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-details {
|
||
padding: 10px;
|
||
width: 100%;
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
line-height: 32px;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
|
||
.name {
|
||
font-family: $font_nunito;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
margin: 10px 0;
|
||
color: $cText;
|
||
@include transition;
|
||
overflow: hidden;
|
||
display: block;
|
||
position: relative;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cBlueDark;
|
||
}
|
||
|
||
a {
|
||
color: $cText;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
|
||
.prices {
|
||
text-align: right;
|
||
font-family: $font_nunito;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.price {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: $cBlueDark;
|
||
white-space: nowrap;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 20px;
|
||
}
|
||
|
||
@include respond-below(xs) {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.price-old {
|
||
font-size: 24px;
|
||
font-weight: 300;
|
||
color: #b9b9b9;
|
||
position: relative;
|
||
margin-right: 15px;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 18px;
|
||
}
|
||
|
||
@include respond-below(xs) {
|
||
font-size: 16px;
|
||
}
|
||
|
||
&::before {
|
||
width: 100%;
|
||
position: absolute;
|
||
content: '';
|
||
right: 0;
|
||
top: 42%;
|
||
height: 0;
|
||
border-bottom: 2px solid #b9b9b9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* popularne kategorie */
|
||
.popular-categories {
|
||
display: none;
|
||
|
||
.box-title {
|
||
text-align: center;
|
||
}
|
||
|
||
#scontainer-8 {
|
||
div[class^='col-lg'] {
|
||
margin: 0 15px;
|
||
max-width: calc(25% - 30px);
|
||
|
||
p {
|
||
margin: 0;
|
||
}
|
||
|
||
a {
|
||
display: block;
|
||
background: $cGray;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 28px;
|
||
line-height: 32px;
|
||
color: $cText;
|
||
padding-bottom: 25px;
|
||
@include transition;
|
||
|
||
strong {
|
||
display: inline-block;
|
||
margin-left: -15px;
|
||
font-weight: 500;
|
||
position: relative;
|
||
top: -10px;
|
||
|
||
&::after {
|
||
height: 1px;
|
||
background: $cText;
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 0;
|
||
@include transition;
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
|
||
strong {
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mini-banners {
|
||
h3 {
|
||
font-family: $font_nunito;
|
||
color: $cText;
|
||
margin-bottom: 25px;
|
||
font-weight: 700;
|
||
font-size: 26px;
|
||
}
|
||
|
||
p {
|
||
font-size: 15px;
|
||
line-height: 26px;
|
||
}
|
||
}
|
||
|
||
.last-on-blog {
|
||
.box-title {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.article-list {
|
||
a {
|
||
&:hover {
|
||
text-decoration: none;
|
||
|
||
img {
|
||
opacity: 0.75;
|
||
}
|
||
}
|
||
}
|
||
|
||
.blog-image {
|
||
padding-top: 66.66666%;
|
||
position: relative;
|
||
margin-bottom: 15px;
|
||
|
||
img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
@include transition;
|
||
}
|
||
|
||
.date-add {
|
||
position: absolute;
|
||
top: 15px;
|
||
left: -15px;
|
||
color: $cText;
|
||
background: #fff;
|
||
border: 1px solid $cText;
|
||
display: inline-block;
|
||
padding: 10px 10px 7px;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.article-title {
|
||
display: block;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
color: $cText;
|
||
}
|
||
|
||
.article-entry {
|
||
color: $cTextLight;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
|
||
.promo-text {
|
||
h1 {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 26px;
|
||
color: $cText;
|
||
}
|
||
|
||
h2 {
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
color: $cText;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: $cTextLight;
|
||
line-height: 24px;
|
||
|
||
a {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-contact {
|
||
@extend .box;
|
||
background: $cGray;
|
||
line-height: 24px;
|
||
|
||
.icon {
|
||
svg {
|
||
width: 50px;
|
||
height: 50px;
|
||
display: block;
|
||
margin: auto;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
}
|
||
|
||
strong {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
color: $cText;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
border-bottom: 1px solid #eee;
|
||
|
||
.box-title {
|
||
text-align: left;
|
||
}
|
||
|
||
ul {
|
||
list-style-type: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
li {
|
||
a {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: $cText;
|
||
display: block;
|
||
padding: 5px 0;
|
||
@include transition;
|
||
|
||
@include respond-below(sm) {
|
||
padding: 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#newsletter {
|
||
@include respond-below(sm) {
|
||
background: #f6f6f6;
|
||
padding: 15px;
|
||
}
|
||
|
||
.title {
|
||
@extend .box-title;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
#text {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-size: 20px;
|
||
font-weight: 300;
|
||
color: $cText;
|
||
display: block;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|
||
.agreement {
|
||
font-size: 11px;
|
||
|
||
input {
|
||
margin-right: 5px;
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
|
||
a {
|
||
color: $cBlueDark;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.form-group.input {
|
||
display: flex;
|
||
padding-top: 10px;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
display: block;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 0;
|
||
position: absolute;
|
||
background: $cBlueDark;
|
||
@include transition;
|
||
height: 2px;
|
||
}
|
||
|
||
&:focus-within {
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.btn {
|
||
background: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
|
||
input[type='email'] {
|
||
border: 0;
|
||
border-bottom: 2px solid $cText;
|
||
border-radius: 0;
|
||
font-size: 14px;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
background: $cText;
|
||
border-radius: 0;
|
||
color: #fff;
|
||
border: 0;
|
||
text-transform: uppercase;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
padding: 0 15px;
|
||
line-height: 38px;
|
||
@include transition;
|
||
transition-delay: 0.25s;
|
||
}
|
||
}
|
||
|
||
.footer-bottom {
|
||
#scontainer-3 {
|
||
p {
|
||
margin: 0;
|
||
|
||
a {
|
||
display: inline-block;
|
||
margin-right: 15px;
|
||
|
||
img {
|
||
@include transition;
|
||
|
||
@include respond-below(sm) {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
img {
|
||
transform: scale(1.25);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#copyright {
|
||
text-align: right;
|
||
|
||
a {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
|
||
#cookie-information {
|
||
background: $cGray;
|
||
padding: 15px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
|
||
a {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
|
||
.main {
|
||
background: #f1f2f4;
|
||
}
|
||
|
||
#category-view {
|
||
@extend .box;
|
||
background: #f1f2f4;
|
||
|
||
.left-column {
|
||
@media (max-width: 767px) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.product-category {
|
||
.product-mini {
|
||
margin: 0 0 50px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-column {
|
||
.categories {
|
||
.title {
|
||
display: none;
|
||
}
|
||
|
||
ul {
|
||
list-style-type: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
i {
|
||
font-size: 12px;
|
||
color: $cText;
|
||
}
|
||
|
||
a {
|
||
@include transition;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
&.level-0 {
|
||
padding: 0 0 15px 0;
|
||
|
||
>li {
|
||
padding-bottom: 10px;
|
||
|
||
>a {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
color: $cText;
|
||
|
||
&:hover {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.level-1 {
|
||
padding: 0 0 0 10px;
|
||
|
||
li {
|
||
position: relative;
|
||
padding-left: 20px;
|
||
|
||
&:last-child {
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 10px;
|
||
border-left: 1px solid #e7e7e7;
|
||
left: 2px;
|
||
top: 7px;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 10px;
|
||
border-left: 1px solid #e7e7e7;
|
||
left: 2px;
|
||
top: 5px;
|
||
height: 11px;
|
||
border-bottom: 1px solid #e7e7e7;
|
||
display: block;
|
||
}
|
||
|
||
a {
|
||
color: $cText;
|
||
display: inline-block;
|
||
font-weight: 400;
|
||
font-size: 15px;
|
||
padding: 3px 0;
|
||
|
||
&:hover {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
|
||
&.open {
|
||
ul {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.level-2 {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
ul.pager {
|
||
display: flex;
|
||
list-style-type: none;
|
||
padding: 25px 0;
|
||
margin: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
|
||
a {
|
||
color: $cText;
|
||
display: inline-block;
|
||
padding: 10px;
|
||
@include transition;
|
||
font-weight: 300;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
|
||
#category-description {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-size: 13px;
|
||
color: #000;
|
||
margin: 50px auto 0;
|
||
max-width: 900px;
|
||
|
||
#hidden {
|
||
display: none;
|
||
}
|
||
|
||
a {
|
||
color: $cBlueDark;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
#contact-form {
|
||
#contact-form {
|
||
.form-group {
|
||
.form-control {
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
padding: 13px 16px;
|
||
border-radius: 0;
|
||
border: 2px solid #e7e7e7;
|
||
height: auto;
|
||
|
||
&:focus {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#contact-additional-info {
|
||
a {
|
||
color: $cBlueDark;
|
||
font-weight: 600;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
|
||
#blog-view {
|
||
@extend .box;
|
||
|
||
.site-title {
|
||
@extend .box-title;
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.article-entry {
|
||
margin-bottom: 3.75rem;
|
||
|
||
.blog-image {
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: opacity 0.3s ease;
|
||
|
||
&:hover {
|
||
opacity: 0.75;
|
||
}
|
||
}
|
||
}
|
||
|
||
.date-add {
|
||
font-family: $font_nunito;
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 0px;
|
||
padding: 12px 12px 8px 12px;
|
||
background-color: #fff;
|
||
border: 1px solid $cText;
|
||
line-height: 1;
|
||
font-weight: 400;
|
||
letter-spacing: 1px;
|
||
color: $cText;
|
||
}
|
||
|
||
.article-title {
|
||
font-family: $font_nunito;
|
||
margin-top: 35px;
|
||
margin-bottom: 20px;
|
||
|
||
a {
|
||
display: block;
|
||
font-weight: 600;
|
||
font-size: 22px;
|
||
font-family: $font_nunito;
|
||
color: $cText;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
color: $cBlueDark;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.entry {
|
||
color: #3a3a3a;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
letter-spacing: 0px;
|
||
margin-bottom: 1.875rem;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn-success {
|
||
font-family: $font_nunito;
|
||
background-color: transparent;
|
||
color: $cText;
|
||
text-transform: capitalize;
|
||
font-weight: 400;
|
||
font-size: 1rem;
|
||
padding: 0;
|
||
position: relative;
|
||
padding-left: 45px;
|
||
padding-right: 5px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:before {
|
||
position: absolute;
|
||
left: 0;
|
||
content: '';
|
||
width: 40px;
|
||
height: 1px;
|
||
top: 50%;
|
||
margin-right: 10px;
|
||
border-top: 1px solid;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
&:hover {
|
||
padding-left: 25px;
|
||
|
||
&:before {
|
||
width: 20px;
|
||
}
|
||
}
|
||
|
||
&:focus {
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-articles {
|
||
font-family: $font_nunito;
|
||
|
||
@include respond-below(sm) {
|
||
padding-left: 0;
|
||
}
|
||
|
||
@include respond-below(md) {
|
||
display: none;
|
||
}
|
||
|
||
.title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
letter-spacing: -1px;
|
||
line-height: 32px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.news-list {
|
||
padding-inline-start: 0px;
|
||
list-style-type: none;
|
||
margin-bottom: 0;
|
||
|
||
li {
|
||
padding-bottom: 1rem;
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
|
||
.far {
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 3px;
|
||
font-size: 19px;
|
||
opacity: 0.5;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
a {
|
||
color: $cText;
|
||
font-size: 15px;
|
||
display: block;
|
||
letter-spacing: normal;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cBlueDark;
|
||
|
||
.far {
|
||
color: $cText;
|
||
}
|
||
}
|
||
}
|
||
|
||
.date-add {
|
||
display: none;
|
||
line-height: 21.12px;
|
||
font-size: 15px;
|
||
font-weight: 300;
|
||
margin-bottom: 0;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article {
|
||
.article__content {
|
||
font-size: 15px;
|
||
|
||
.article__main-image {
|
||
height: 400px;
|
||
margin-bottom: 50px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-title {
|
||
font-family: $font_nunito;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 28px;
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.date-add {
|
||
line-height: 21.12px;
|
||
font-size: 15px;
|
||
font-weight: 300;
|
||
line-height: 21.12px;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.text {
|
||
a {
|
||
color: $cBlueDark;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
color: $cBlue;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
h2:not(.name) {
|
||
font-weight: 600;
|
||
font-size: 22px;
|
||
font-family: $font_nunito;
|
||
color: $cText;
|
||
}
|
||
|
||
.product-mini {
|
||
margin-bottom: 25px;
|
||
}
|
||
}
|
||
|
||
.social-icons {
|
||
display: inline-flex;
|
||
|
||
.title {
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
|
||
.btn-back {
|
||
margin: 25px 0;
|
||
max-width: 200px;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
@media only screen and (min-width: 1500px) {
|
||
width: 100%;
|
||
max-width: 1400px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#product {
|
||
.product-message {
|
||
margin: 25px 0;
|
||
max-width: 334px;
|
||
|
||
textarea {
|
||
font-size: 14px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.history-back {
|
||
max-width: 150px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
#image-big {
|
||
position: relative;
|
||
|
||
.new {
|
||
border: 2px solid $cPinkDark;
|
||
padding: 5px 10px;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
z-index: 10;
|
||
background: #fff;
|
||
}
|
||
|
||
a {
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-producer {
|
||
display: none;
|
||
margin: 0 0 1rem 0;
|
||
|
||
a {
|
||
color: $cBlueDark;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
#product-options {
|
||
.free-delivery {
|
||
p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
padding: 15px;
|
||
background: #fff;
|
||
margin-bottom: 25px;
|
||
|
||
strong {
|
||
color: #dc3545;
|
||
}
|
||
}
|
||
|
||
@include respond-above(sm) {
|
||
padding: 0;
|
||
}
|
||
|
||
.warehouse-message {
|
||
opacity: 0.7;
|
||
margin-bottom: 20px;
|
||
color: $cPinkDark;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
font-style: normal;
|
||
letter-spacing: 0px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
h1 {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
}
|
||
|
||
.prices {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
margin-bottom: 1.875rem;
|
||
margin-top: 1.875rem;
|
||
flex-wrap: wrap;
|
||
|
||
.price_weight {
|
||
width: 100%;
|
||
order: 99;
|
||
font-size: 12px;
|
||
color: #3a3a3a;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.price-minimal {
|
||
width: 100%;
|
||
font-style: italic;
|
||
order: 2;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.price {
|
||
font-weight: 600;
|
||
font-size: 30px;
|
||
line-height: 27px;
|
||
color: $cBlueDark;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
order: 2;
|
||
}
|
||
|
||
.price-old {
|
||
margin-right: 20px;
|
||
font-weight: 400;
|
||
font-size: 29px;
|
||
line-height: 29px;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
order: 1;
|
||
|
||
color: $cText;
|
||
|
||
position: relative;
|
||
|
||
&:before {
|
||
width: 120%;
|
||
position: absolute;
|
||
content: '';
|
||
right: -10%;
|
||
top: 40%;
|
||
height: 0px;
|
||
border-bottom: 3px solid #ff0909;
|
||
|
||
-webkit-transform: rotate(-19deg);
|
||
transform: rotate(-19deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-to-basket {
|
||
display: flex;
|
||
margin: 25px 0;
|
||
|
||
.quantity-container {
|
||
display: flex;
|
||
align-items: center;
|
||
vertical-align: middle;
|
||
margin-right: 1.875rem;
|
||
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
|
||
.btn-minus,
|
||
.btn-plus {
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: #f5f5f5;
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
line-height: 40px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
|
||
.fa {
|
||
color: $cText;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
|
||
.fa {
|
||
color: #fff;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
#quantity {
|
||
width: 60px;
|
||
text-align: center;
|
||
margin: 0 5px;
|
||
height: 40px;
|
||
border: 2px solid #e7e7e7;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
#add-to-basket {
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.alert {
|
||
background: #dc3545;
|
||
color: #fff;
|
||
text-align: left;
|
||
display: block;
|
||
width: 100%;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
max-width: 334px;
|
||
margin: 0;
|
||
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.short-description {
|
||
color: $cText;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
font-style: normal;
|
||
letter-spacing: 0px;
|
||
|
||
h2 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
strong {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#image-big {
|
||
max-width: 625px;
|
||
height: fit-content;
|
||
margin: 0 auto;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
#product-options {
|
||
form {
|
||
.custom-field {
|
||
margin-bottom: 5px;
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
gap: 5px;
|
||
|
||
._name.bold {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.grow-wrap {
|
||
display: grid;
|
||
}
|
||
|
||
.grow-wrap::after {
|
||
content: attr(data-replicated-value) ' ';
|
||
white-space: pre-wrap;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.grow-wrap>textarea {
|
||
resize: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.grow-wrap>textarea,
|
||
.grow-wrap::after {
|
||
border: 1px solid #d5d5d5;
|
||
padding: 0.5rem;
|
||
font: inherit;
|
||
grid-area: 1 / 1 / 2 / 2;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
|
||
#attributes {
|
||
margin-bottom: 10px;
|
||
|
||
.title {
|
||
margin-bottom: 10px;
|
||
opacity: 0.7;
|
||
color: $cText;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
font-style: normal;
|
||
letter-spacing: 0px;
|
||
}
|
||
|
||
.attribute-container {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
|
||
strong {
|
||
line-height: 24px;
|
||
}
|
||
|
||
.attribute-label {
|
||
margin-bottom: 0;
|
||
margin-right: 15px;
|
||
color: $cText;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
font-style: normal;
|
||
letter-spacing: 0px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.fradio {
|
||
margin-left: 15px;
|
||
|
||
input {
|
||
display: none;
|
||
}
|
||
|
||
label {
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
margin-bottom: 0;
|
||
background: #f5f5f5;
|
||
border: 2px solid #e6e6e6;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
&.active {
|
||
border: 2px solid $cBlueDark;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#description {
|
||
// margin-top: 50px;
|
||
|
||
#tabs-menu-sticky-wrapper {
|
||
margin-bottom: 20px;
|
||
|
||
&.is-sticky {
|
||
width: 100% !important;
|
||
left: 0;
|
||
}
|
||
|
||
#tabs-menu {
|
||
@extend .title-border;
|
||
background-color: #f1f2f4;
|
||
z-index: 15;
|
||
display: flex;
|
||
list-style-type: none;
|
||
padding-inline-start: 0;
|
||
margin-bottom: 0;
|
||
font-weight: 400;
|
||
line-height: 32px;
|
||
letter-spacing: -1px;
|
||
@extend .container;
|
||
|
||
li {
|
||
opacity: 1;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-image: linear-gradient(to right,
|
||
#000,
|
||
#000 50%,
|
||
rgba(0, 0, 0, 0.3) 50%);
|
||
background-size: 200% 100%;
|
||
background-position: 100%;
|
||
transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
|
||
cursor: pointer;
|
||
margin-right: 20px;
|
||
|
||
/*color: #909090;*/
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&:hover {
|
||
background-position: 0%;
|
||
}
|
||
|
||
&.current {
|
||
background-position: 0%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.description-right {
|
||
.title {
|
||
@extend .title-border;
|
||
font-size: 28px;
|
||
font-weight: 400;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
.tab-content {
|
||
padding-bottom: 25px;
|
||
margin-bottom: 25px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.tab-title {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
//* new style
|
||
|
||
.product_info_box {
|
||
@include respond-above(sm) {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
grid-template-areas:
|
||
'product_img product_info'
|
||
'product_desc product_info';
|
||
gap: 30px;
|
||
}
|
||
|
||
.product_info__image {
|
||
@include respond-above(sm) {
|
||
grid-area: product_img;
|
||
display: grid;
|
||
grid-template-columns: 150px 1fr;
|
||
gap: 4px;
|
||
}
|
||
|
||
#image-big {
|
||
// height: 100%;
|
||
height: fit-content;
|
||
max-width: 520px;
|
||
|
||
.swiper {
|
||
&:hover {
|
||
|
||
.swiper-button-next,
|
||
.swiper-button-prev {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.swiper-button-next,
|
||
.swiper-button-prev {
|
||
width: 50px;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
transition: 250ms ease;
|
||
z-index: 11;
|
||
box-shadow: 0 0 9px 0px #dfdfdf;
|
||
transform: translateY(-50%);
|
||
|
||
&::after {
|
||
color: $cText;
|
||
font-size: 16px;
|
||
font-weight: 900;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gallery {
|
||
height: 100%;
|
||
max-height: 510px;
|
||
|
||
.swiper {
|
||
width: 150px;
|
||
|
||
height: 100%;
|
||
|
||
.swiper-slide {
|
||
opacity: 0.75;
|
||
transition: 250ms ease;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
transition: 0.3s;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
&.swiper-slide-thumb-active {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.product_info__info {
|
||
@include respond-above(sm) {
|
||
grid-area: product_info;
|
||
}
|
||
}
|
||
|
||
#description {
|
||
grid-area: product_desc;
|
||
position: relative;
|
||
background: $cWhite;
|
||
|
||
&::before {
|
||
content: ' ';
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
right: 100%;
|
||
background: $cWhite;
|
||
}
|
||
|
||
.description_accordion {
|
||
padding: 55px 70px 55px 0;
|
||
|
||
.accordion_tile {
|
||
&:not(:last-child) {
|
||
border-bottom: 1px solid #f1f2f4;
|
||
}
|
||
|
||
&.accordion_active {
|
||
.accordion_title {
|
||
&::after {
|
||
height: 0px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.accordion_title {
|
||
position: relative;
|
||
padding: 18px 0;
|
||
cursor: pointer;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
width: 20px;
|
||
height: 2px;
|
||
background: $cText;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 9px;
|
||
width: 2px;
|
||
height: 20px;
|
||
background: $cText;
|
||
transform: translateY(-50%);
|
||
transition: 500ms ease;
|
||
}
|
||
|
||
p {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-weight: 600;
|
||
font-size: 1.375rem;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.accordion_data {
|
||
padding-bottom: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1199px) {
|
||
grid-template-columns: 440px 1fr;
|
||
|
||
.product_info__image {
|
||
grid-template-columns: 90px 1fr;
|
||
|
||
#image-big {
|
||
max-width: 330px;
|
||
}
|
||
|
||
.gallery {
|
||
max-height: 330px;
|
||
|
||
.swiper {
|
||
width: 98px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 991px) {
|
||
grid-template-columns: 1fr;
|
||
grid-template-areas:
|
||
'product_img'
|
||
'product_info'
|
||
'product_desc';
|
||
|
||
.product_info__image {
|
||
grid-template-columns: 98px 1fr;
|
||
width: 100%;
|
||
max-width: fit-content;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.product_info__info {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
#description {
|
||
&::before {
|
||
display: none;
|
||
}
|
||
|
||
.description_accordion {
|
||
padding: 20px 15px;
|
||
max-width: 630px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
.product_info__image {
|
||
// grid-template-columns: 1fr;
|
||
max-width: 710px;
|
||
// width: 100svw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
#image-big {
|
||
max-width: calc(100vw - 30px);
|
||
}
|
||
|
||
.gallery {
|
||
order: 2;
|
||
|
||
.swiper {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#reviews {
|
||
margin-top: 50px;
|
||
|
||
.reviews_wrapper {
|
||
.reviews_title {
|
||
text-align: center;
|
||
}
|
||
|
||
.reviews_data {
|
||
#widget-container {
|
||
.rating-details {
|
||
&>div {
|
||
background: $cWhite;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.products-sets {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.products-sets,
|
||
.products-related {
|
||
.swiper {
|
||
width: 100vw;
|
||
margin-left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.swiper-button-next,
|
||
.swiper-button-prev {
|
||
width: 40px;
|
||
width: 60px;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
transition: 250ms ease;
|
||
z-index: 11;
|
||
box-shadow: 0 0 9px 0px #dfdfdf;
|
||
transform: translateY(-50%);
|
||
|
||
&::after {
|
||
color: $cText;
|
||
font-size: 16px;
|
||
font-weight: 900;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.products-sets,
|
||
.products-related {
|
||
.box-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.owl-item {
|
||
.product-mini {
|
||
margin: 0 5px;
|
||
|
||
.new {
|
||
border: 2px solid $cPinkDark;
|
||
padding: 3px 5px;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
z-index: 10;
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#basket-container,
|
||
.basket-summary-container,
|
||
.order-summary {
|
||
@extend .mini-content;
|
||
|
||
.box-title {
|
||
@include respond-below(sm) {
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.btn-dark {
|
||
max-width: 200px;
|
||
}
|
||
|
||
.basket-options {
|
||
padding-top: 25px;
|
||
|
||
>.content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.left,
|
||
.right {
|
||
width: 50%;
|
||
padding-right: 25px;
|
||
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
padding-left: 25px;
|
||
padding-right: 0;
|
||
|
||
@include respond-below(sm) {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
|
||
.basket-address-form {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.box-title,
|
||
form {
|
||
width: 100%;
|
||
}
|
||
|
||
.fvat-data {
|
||
display: none;
|
||
padding: 15px 15px 5px 15px;
|
||
background: #FFF;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.addresses {
|
||
.address {
|
||
width: calc(100% / 2 - 10px);
|
||
margin: 0 10px 10px 10px;
|
||
padding: 10px;
|
||
|
||
&:nth-child(2n-1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
&:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
#postal_code {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
#order-send {
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.inpost-map-container {
|
||
display: none;
|
||
}
|
||
|
||
.user-login {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
#payment-methods {
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.options {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
|
||
img {
|
||
height: 20px;
|
||
}
|
||
|
||
.check {
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.description {
|
||
padding-right: 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#transport-methods {
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.inpost-info,
|
||
.orlen-info {
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
font-style: italic;
|
||
text-align: right;
|
||
|
||
a {
|
||
background: $cBlueDark;
|
||
color: #fff;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
margin-left: 15px;
|
||
@include transition;
|
||
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
background: $cBlue;
|
||
}
|
||
}
|
||
}
|
||
|
||
.options {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
|
||
.check {
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.description {
|
||
padding-right: 25px;
|
||
}
|
||
|
||
.price {
|
||
text-align: right;
|
||
margin-left: auto;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#basket {
|
||
.basket-bottom {
|
||
padding-bottom: 25px;
|
||
padding-top: 25px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
@include respond-below(sm) {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.basket-message,
|
||
.coupon {
|
||
width: 50%;
|
||
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
height: 100px;
|
||
}
|
||
|
||
.coupon {
|
||
max-width: 400px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
|
||
form {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
input {
|
||
height: 45px;
|
||
}
|
||
|
||
.btn {
|
||
height: 45px;
|
||
padding: 0 15px;
|
||
min-width: 100px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.inpost-map-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.75);
|
||
z-index: 1000;
|
||
padding: 100px;
|
||
display: none;
|
||
@include transition;
|
||
|
||
@include respond-below(sm) {
|
||
padding: 15px;
|
||
}
|
||
|
||
#inpost-map {
|
||
background: #fff;
|
||
}
|
||
|
||
.inpost-hide {
|
||
margin: 15px auto;
|
||
float: right;
|
||
color: #fff !important;
|
||
text-transform: uppercase;
|
||
@include transition;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
#address-data {
|
||
.mini-box {
|
||
max-width: 550px;
|
||
margin: auto;
|
||
|
||
.box-title {
|
||
margin-bottom: 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.basket-address-form {
|
||
.btn {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
a {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
|
||
.order-summary {
|
||
.order-summary-content {
|
||
padding-bottom: 50px;
|
||
|
||
.top {
|
||
padding-bottom: 50px;
|
||
}
|
||
|
||
.top-second {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
padding-bottom: 25px;
|
||
|
||
@include respond-below(sm) {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.column {
|
||
padding: 20px;
|
||
background: #FFF;
|
||
}
|
||
|
||
h5 {
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
@include respond-below(sm) {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.left,
|
||
.right {
|
||
width: 50%;
|
||
display: flex;
|
||
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
justify-content: flex-end;
|
||
|
||
.btn {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
justify-content: flex-start;
|
||
padding-top: 25px;
|
||
}
|
||
|
||
.payment-info {
|
||
padding-bottom: 25px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//
|
||
// logowanie
|
||
//
|
||
.user-login,
|
||
.user-register {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.content {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.btn {
|
||
margin-bottom: 25px;
|
||
width: 100%;
|
||
}
|
||
|
||
a {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
|
||
//
|
||
// koszyk podsumowanie
|
||
//
|
||
|
||
//
|
||
// koszyk
|
||
//
|
||
.basket-product {
|
||
margin-bottom: 10px;
|
||
|
||
.custom-field {
|
||
display: flex;
|
||
font-size: 13px;
|
||
gap: 10px;
|
||
|
||
._name {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.basket-product-message {
|
||
padding: 0 0 10px;
|
||
width: 250px;
|
||
|
||
@include respond-above(sm) {
|
||
padding: 8px 0 0;
|
||
}
|
||
|
||
textarea {
|
||
font-size: 13px;
|
||
padding: 5px 10px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
@include respond-above(sm) {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
padding-bottom: 25px;
|
||
border-bottom: 2px solid $cGrayLight;
|
||
margin-bottom: 25px;
|
||
|
||
&::after {
|
||
content: '';
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
}
|
||
|
||
.image {
|
||
height: 110px;
|
||
width: 83px;
|
||
margin-right: 15px;
|
||
min-width: 83px;
|
||
|
||
@include respond-below(sm) {
|
||
float: left;
|
||
}
|
||
|
||
img {
|
||
height: 100%;
|
||
width: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.details {
|
||
margin-right: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
>* {
|
||
width: 100%;
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
width: calc(100% - 105px);
|
||
float: right;
|
||
margin-right: 0;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.name {
|
||
@include respond-below(sm) {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
a {
|
||
font-weight: 600;
|
||
color: $cText;
|
||
font-size: 16px;
|
||
@include transition;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
&:hover {
|
||
color: $cBlueDark;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.description {
|
||
font-style: italic;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|
||
.prices {
|
||
margin-left: auto;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
@include respond-below(sm) {
|
||
width: calc(100% - 105px);
|
||
float: right;
|
||
clear: right;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.price {
|
||
span {
|
||
margin-left: 25px;
|
||
margin-right: 25px;
|
||
|
||
@include respond-below(sm) {
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
u {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin-left: 15px;
|
||
|
||
@include respond-below(sm) {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
&::before {
|
||
width: 100%;
|
||
position: absolute;
|
||
content: '';
|
||
right: -4px;
|
||
top: 32%;
|
||
height: 0;
|
||
border-bottom: 3px solid #ff0909;
|
||
-webkit-transform: rotate(-19deg);
|
||
transform: rotate(-19deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.buttons {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
@include respond-below(sm) {
|
||
width: calc(100% - 98px);
|
||
text-align: right;
|
||
float: right;
|
||
clear: right;
|
||
}
|
||
|
||
.btn-minus,
|
||
.btn-plus {
|
||
width: 40px;
|
||
min-width: 40px;
|
||
height: 40px;
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
@include transition;
|
||
padding: 0;
|
||
color: $cText;
|
||
margin: 0 15px;
|
||
|
||
@include respond-below(sm) {
|
||
margin: 0 5px;
|
||
}
|
||
|
||
&:hover {
|
||
background: $cText;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
#quantity {
|
||
width: 60px;
|
||
text-align: center;
|
||
margin: 0 5px;
|
||
height: 40px;
|
||
border: 2px solid #e7e7e7;
|
||
}
|
||
|
||
.btn-delete {
|
||
height: 40px;
|
||
padding: 0;
|
||
background: $cText;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
@include transition;
|
||
display: flex;
|
||
width: 40px;
|
||
min-width: 40px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&:hover {
|
||
background: $cPinkDark;
|
||
}
|
||
|
||
i {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.basket-summary {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
margin-bottom: 5px;
|
||
|
||
&.left {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
&.big {
|
||
margin-top: 15px;
|
||
margin-bottom: 15px;
|
||
font-size: 22px;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
}
|
||
|
||
span {
|
||
margin-left: 15px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
//
|
||
// adresy
|
||
//
|
||
.addresses {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.address {
|
||
width: calc(100% / 4 - 50px);
|
||
margin: 25px;
|
||
padding: 25px;
|
||
border: 3px solid $cGrayLight;
|
||
|
||
&.active {
|
||
border: 3px solid $cBlueDark;
|
||
}
|
||
|
||
.buttons {
|
||
padding-top: 15px;
|
||
|
||
a {
|
||
font-weight: 600;
|
||
margin-right: 10px;
|
||
@include transition;
|
||
color: $cBlueDark;
|
||
|
||
&.text-danger {
|
||
color: $cPinkDark;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cTextLight;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//
|
||
// panel klienta
|
||
//
|
||
.client-panel {
|
||
@extend .mini-content;
|
||
|
||
&.address-edit {
|
||
.row-flex {
|
||
input:first-child {
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.client-addresses {
|
||
.btn-big {
|
||
max-width: 200px;
|
||
margin: 0 0 25px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.addresses {
|
||
@include respond-below(sm) {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.address {
|
||
@include respond-above(sm) {
|
||
&:nth-child(5n-4) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
&:nth-child(4n) {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
width: calc(100% / 2 - 10px);
|
||
margin: 10px 5px;
|
||
padding: 10px;
|
||
|
||
&:nth-child(2n-1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
&:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.client-menu {
|
||
padding-bottom: 25px;
|
||
|
||
ul {
|
||
display: flex;
|
||
list-style-type: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
justify-content: flex-start;
|
||
|
||
li {
|
||
padding: 0;
|
||
position: relative;
|
||
margin-right: 15px;
|
||
margin-left: 15px;
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
a {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
@include transition;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//
|
||
// jquery confirm
|
||
//
|
||
.jconfirm.jconfirm-modern .jconfirm-box {
|
||
width: 100% !important;
|
||
max-width: 800px !important;
|
||
}
|
||
|
||
@media (min-width: 1281px) and (max-width: 1365px) {
|
||
.popular-categories {
|
||
#scontainer-8 {
|
||
div[class^='col-lg'] {
|
||
margin: 0 5px;
|
||
max-width: calc(25% - 10px);
|
||
|
||
a {
|
||
font-size: 26px;
|
||
line-height: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.promoted-products {
|
||
.content {
|
||
.product-mini {
|
||
margin: 0 15px 30px;
|
||
max-width: calc(100% / 4 - 30px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-list {
|
||
.article-title {
|
||
font-size: 21px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (min-width: 992px) and (max-width: 1200px) {
|
||
.box {
|
||
padding: 50px 0;
|
||
}
|
||
|
||
.popular-categories {
|
||
padding-bottom: 0;
|
||
margin-bottom: -10px;
|
||
|
||
#scontainer-8 {
|
||
div[class^='col-lg'] {
|
||
width: 100%;
|
||
max-width: calc(50% - 30px);
|
||
flex: 0 0 50%;
|
||
margin-bottom: 60px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mini-banners {
|
||
h3 {
|
||
font-size: 25px;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.last-on-blog {
|
||
.article-list {
|
||
margin-bottom: 25px;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
#newsletter {
|
||
margin: 0 auto 50px;
|
||
max-width: 600px;
|
||
}
|
||
|
||
>.container {
|
||
>.row {
|
||
.col-xl-4 {
|
||
order: 1;
|
||
}
|
||
|
||
.col-xl-8 {
|
||
order: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#product {
|
||
#product-options {
|
||
padding: 0;
|
||
|
||
h1 {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#main-menu {
|
||
#menu-container-1 {
|
||
ul.level-0 {
|
||
>li {
|
||
>ul {
|
||
padding: 25px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.basket-summary-address {
|
||
.left {
|
||
padding-right: 25px;
|
||
}
|
||
|
||
.right {
|
||
padding-left: 25px;
|
||
}
|
||
|
||
.left,
|
||
.right {
|
||
.box-title {
|
||
font-size: 26px;
|
||
margin-bottom: 0;
|
||
padding-bottom: 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addresses {
|
||
.address {
|
||
width: calc(100% / 3 - 50px);
|
||
}
|
||
}
|
||
|
||
.basket-summary-address {
|
||
>.basket-address-form {
|
||
.left {
|
||
.addresses {
|
||
.address {
|
||
margin: 5px 5px 5px 0;
|
||
width: calc(100% / 2 - 5px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#header {
|
||
#search-form-big {
|
||
.search-big-results {
|
||
.product-search {
|
||
max-width: calc(100% / 4 - 20px);
|
||
|
||
&:nth-child(6n-5) {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
&:nth-child(6n) {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
&:nth-child(4n-3),
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
&:nth-child(4n),
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.box {
|
||
padding: 25px 0;
|
||
|
||
.box-subtitle {
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
#top {
|
||
position: relative;
|
||
|
||
#mobile-menu-open {
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 9px;
|
||
font-size: 25px;
|
||
z-index: 100;
|
||
height: 37px;
|
||
width: 37px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
|
||
img {
|
||
width: 30px;
|
||
}
|
||
}
|
||
|
||
#mini-login {
|
||
text-align: right;
|
||
padding-right: 15px;
|
||
}
|
||
}
|
||
|
||
#header {
|
||
.logo {
|
||
a {
|
||
max-width: 200px;
|
||
margin: auto;
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
#main-menu {
|
||
#mobile-menu-close {
|
||
font-size: 25px;
|
||
z-index: 100;
|
||
height: 37px;
|
||
width: 37px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 15px;
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 2px;
|
||
z-index: 95;
|
||
cursor: pointer;
|
||
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
|
||
img {
|
||
width: 25px;
|
||
}
|
||
}
|
||
|
||
#menu-container-1 {
|
||
display: none;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
min-height: 100%;
|
||
background: $cGray;
|
||
padding-top: 45px;
|
||
z-index: 90;
|
||
min-width: 0 !important;
|
||
|
||
.mmm {
|
||
position: absolute;
|
||
overflow: hidden;
|
||
min-width: 100%;
|
||
min-height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
.levelHolderClass {
|
||
position: absolute;
|
||
overflow: hidden;
|
||
top: 0;
|
||
background: $cGray;
|
||
width: auto;
|
||
min-height: 100%;
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.ltr {
|
||
margin-left: -100%;
|
||
left: 0;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
li {
|
||
cursor: pointer;
|
||
|
||
i.menu-toggle {
|
||
display: none;
|
||
}
|
||
|
||
i.floatRight {
|
||
order: 1;
|
||
}
|
||
|
||
a {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
font-size: 18px;
|
||
color: $cText;
|
||
@include transition;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 5px 15px;
|
||
|
||
@include respond-below(xs) {
|
||
font-size: 20px;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
&:hover {
|
||
color: $cBlueDark;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.popular-categories {
|
||
#scontainer-8 {
|
||
div[class^='col-lg'] {
|
||
max-width: calc(100% - 30px);
|
||
margin: 0 15px 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mini-banners {
|
||
display: none;
|
||
}
|
||
|
||
.last-on-blog {
|
||
.container {
|
||
padding-left: 25px;
|
||
padding-right: 25px;
|
||
|
||
.article-list {
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.promo-text {
|
||
img {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.footer-contact {
|
||
text-align: center;
|
||
|
||
.col-lg-3 {
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
|
||
.box-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.col-lg-4 {
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.footer-bottom {
|
||
text-align: center;
|
||
|
||
#copyright {
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#product {
|
||
#product-options {
|
||
padding: 15px 0;
|
||
|
||
h1 {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pager {
|
||
|
||
.first,
|
||
.last {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
//
|
||
// historia zamówień
|
||
//
|
||
.client-orders-history {
|
||
.order-summary-content {
|
||
padding-bottom: 25px;
|
||
border-bottom: 3px solid $cGrayLight;
|
||
margin-bottom: 25px;
|
||
}
|
||
}
|
||
|
||
//
|
||
// shopAlert
|
||
//
|
||
.shop-alert-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
|
||
.shop-alert {
|
||
background: #fff;
|
||
width: 100%;
|
||
max-width: 800px;
|
||
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
|
||
0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
|
||
max-height: 100%;
|
||
|
||
.shop-alert-title {
|
||
padding: 20px 20px 15px;
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
border-bottom: 3px solid $cGrayLight;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: $cBlueDark;
|
||
|
||
a {
|
||
color: $cText;
|
||
@include transition;
|
||
|
||
&:hover {
|
||
color: $cTextLight;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop-alert-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding: 20px;
|
||
border-top: 3px solid $cGrayLight;
|
||
gap: 15px;
|
||
|
||
.btn {
|
||
padding: 10px 15px;
|
||
|
||
&.btn-default {
|
||
color: $cText;
|
||
padding: 10px 0;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop-alert-content {
|
||
padding: 30px 20px;
|
||
|
||
h2 {
|
||
margin-bottom: 25px;
|
||
padding: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.product-sets {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
overflow-y: auto;
|
||
padding-bottom: 25px;
|
||
|
||
&::-webkit-scrollbar {
|
||
height: 5px;
|
||
}
|
||
|
||
/* Track */
|
||
&::-webkit-scrollbar-track {
|
||
background: $cGrayLight;
|
||
}
|
||
|
||
/* Handle */
|
||
&::-webkit-scrollbar-thumb {
|
||
background: $cText;
|
||
}
|
||
|
||
/* Handle on hover */
|
||
&::-webkit-scrollbar-thumb:hover {
|
||
background: $cText;
|
||
}
|
||
|
||
.product {
|
||
max-width: calc(100% / 2 - 20px);
|
||
min-width: calc(100% / 2 - 20px);
|
||
margin: 0 10px 0;
|
||
position: relative;
|
||
|
||
.new {
|
||
border: 2px solid $cPinkDark;
|
||
padding: 3px 5px;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 10px;
|
||
left: -10px;
|
||
z-index: 10;
|
||
background: #fff;
|
||
}
|
||
|
||
@include respond-above(sm) {
|
||
max-width: calc(100% / 3 - 20px);
|
||
min-width: calc(100% / 3 - 20px);
|
||
}
|
||
|
||
@include respond-above(lg) {
|
||
max-width: calc(100% / 4 - 20px);
|
||
min-width: calc(100% / 4 - 20px);
|
||
}
|
||
|
||
.a-img {
|
||
padding-top: 133%;
|
||
display: block;
|
||
position: relative;
|
||
background: $cGray;
|
||
|
||
&:hover {
|
||
.img {
|
||
img {
|
||
&.first {
|
||
opacity: 0;
|
||
}
|
||
|
||
&.second {
|
||
transform: scale(1.2);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: block;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
img {
|
||
height: 100%;
|
||
width: 100%;
|
||
object-fit: cover;
|
||
object-position: top center;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
&.first {
|
||
transition: all 1s ease;
|
||
}
|
||
|
||
&.second {
|
||
transition: all 1s ease;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-details {
|
||
.prices {
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.price {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: $cBlueDark;
|
||
}
|
||
|
||
.price-old {
|
||
font-size: 24px;
|
||
font-weight: 300;
|
||
color: #b9b9b9;
|
||
position: relative;
|
||
margin-right: 15px;
|
||
|
||
&::before {
|
||
width: 100%;
|
||
position: absolute;
|
||
content: '';
|
||
right: 0;
|
||
top: 42%;
|
||
height: 0;
|
||
border-bottom: 2px solid #b9b9b9;
|
||
}
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
font-size: 16px;
|
||
font-family: 'Nunito Sans', sans-serif;
|
||
|
||
a {
|
||
color: $cText;
|
||
display: block;
|
||
font-weight: 300;
|
||
margin: 10px 0 5px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
display: block;
|
||
height: 1px;
|
||
background: $cText;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 0;
|
||
@include transition;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#payment-confirmation {
|
||
max-width: 1280px;
|
||
|
||
.btn {
|
||
max-width: 300px;
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
#paypo-promo {
|
||
display: none;
|
||
padding: 25px 0;
|
||
font-weight: 600;
|
||
|
||
img {
|
||
height: 30px;
|
||
}
|
||
}
|
||
|
||
#popup-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.75);
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
#popup-content {
|
||
height: 90vh;
|
||
width: 90vw;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
height: 100%;
|
||
width: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
}
|
||
|
||
#main-banner {
|
||
margin-top: 25px;
|
||
max-width: 1650px;
|
||
margin: auto;
|
||
|
||
.container {
|
||
width: calc(100% - 180px);
|
||
max-width: 1740px;
|
||
|
||
@include respond-below(md) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
|
||
@include respond-above(sm) {
|
||
.mobile {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
.nomobile {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.producer-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.producer {
|
||
width: calc(100% / 5 - 15px);
|
||
margin: 15px 15px 15px 0;
|
||
|
||
@include respond-between(md, lg) {
|
||
width: calc(100% / 4 - 15px);
|
||
}
|
||
|
||
@include respond-between(sm, md) {
|
||
width: calc(100% / 3 - 15px);
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
width: calc(100% / 3 - 15px);
|
||
}
|
||
|
||
@include respond-below(xs) {
|
||
width: calc(100% / 2 - 15px);
|
||
}
|
||
|
||
a {
|
||
display: block;
|
||
width: 100%;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.zaufane {
|
||
.box-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.wrapper-left {
|
||
padding: 15px;
|
||
background: #fff;
|
||
}
|
||
|
||
.client-review {
|
||
display: flex !important;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background: #f6f6f6;
|
||
padding: 25px !important;
|
||
margin: 15px !important;
|
||
|
||
div,
|
||
p {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
div[class^='products-box-'] {
|
||
position: relative;
|
||
|
||
.swiper {
|
||
width: 100vw;
|
||
margin-left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.swiper-button-next,
|
||
.swiper-button-prev {
|
||
width: 60px;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
transition: 250ms ease;
|
||
z-index: 11;
|
||
box-shadow: 0 0 9px 0px #dfdfdf;
|
||
transform: translateY(-50%);
|
||
|
||
&::after {
|
||
color: #000;
|
||
font-size: 16px;
|
||
font-weight: 900;
|
||
}
|
||
}
|
||
|
||
.swiper-button-prev {
|
||
left: 15% !important;
|
||
|
||
@include respond-below(md) {
|
||
left: 5% !important;
|
||
}
|
||
}
|
||
|
||
.swiper-button-next {
|
||
right: 15% !important;
|
||
|
||
@include respond-below(md) {
|
||
right: 5% !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
#scontainer-7 {
|
||
.col-lg-3 {
|
||
.col-3 {
|
||
@include respond-below(sm) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.col-9 {
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
flex: 0 0 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#btn-basket-summary {
|
||
@include respond-below(sm) {
|
||
float: none !important;
|
||
}
|
||
}
|
||
|
||
#scontainer-11 {
|
||
background: $cBlueDark;
|
||
padding: 25px;
|
||
color: #fff;
|
||
margin-bottom: 25px;
|
||
|
||
@include respond-below(md) {
|
||
padding: 10px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.product-reviews {
|
||
background: #fff;
|
||
padding: 25px;
|
||
margin-top: 25px;
|
||
width: 100vw;
|
||
position: relative;
|
||
margin-left: -50vw;
|
||
left: 50%;
|
||
}
|
||
|
||
.category-subcategory-tiles {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px;
|
||
list-style-type: none;
|
||
margin: 0 0 25px;
|
||
padding: 0;
|
||
justify-content: center;
|
||
|
||
li {
|
||
a {
|
||
display: inline-flex;
|
||
padding: 5px 10px;
|
||
color: $cText;
|
||
transition: 250ms ease all;
|
||
background: #fff;
|
||
font-size: 13px;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cPinkDark;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-23 {
|
||
max-width: 800px;
|
||
margin: auto;
|
||
}
|
||
|
||
.table-of-contents {
|
||
margin-bottom: 30px;
|
||
|
||
@include respond-below(md) {
|
||
border: 2px solid #e7e7e7;
|
||
padding: 15px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
line-height: 21px;
|
||
color: $cBlueDark;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
ol {
|
||
padding-left: 23px;
|
||
margin-bottom: 0;
|
||
|
||
li {
|
||
&.active {
|
||
a {
|
||
color: $cBlueDark;
|
||
}
|
||
}
|
||
|
||
a {
|
||
color: $cText;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article {
|
||
h3 {
|
||
font-size: 1.2em;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.orlen-banner {
|
||
margin-top: 25px;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
// ******************
|
||
.form-control {
|
||
&.form-control-phone {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
&:has(> .form-control-input:focus) {
|
||
color: #495057;
|
||
background-color: #fff;
|
||
border-color: #80bdff;
|
||
outline: 0;
|
||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||
}
|
||
|
||
&:hover {
|
||
&[tooltip] {
|
||
position: relative;
|
||
}
|
||
|
||
&[tooltip]:before {
|
||
content: '';
|
||
display: none;
|
||
content: '';
|
||
border-left: 5px solid transparent;
|
||
border-right: 5px solid transparent;
|
||
border-bottom: 5px solid #343a40;
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 85px;
|
||
z-index: 8;
|
||
font-size: 0;
|
||
line-height: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
&[tooltip]:after {
|
||
display: none;
|
||
content: attr(tooltip);
|
||
position: absolute;
|
||
top: 35px;
|
||
left: 50px;
|
||
padding: 5px 8px;
|
||
background: #343a40;
|
||
color: #fff;
|
||
z-index: 9;
|
||
font-size: 0.75em;
|
||
// height: 18px;
|
||
line-height: 18px;
|
||
-webkit-border-radius: 3px;
|
||
-moz-border-radius: 3px;
|
||
border-radius: 3px;
|
||
white-space: nowrap;
|
||
word-wrap: normal;
|
||
}
|
||
|
||
&[tooltip]:hover:before,
|
||
&[tooltip]:hover:after {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.form-control-phone-code {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
|
||
span {
|
||
font-family: 'Open Sans', sans-serif;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.form-control-input {
|
||
border: none;
|
||
height: calc(2.25rem - 2px);
|
||
|
||
&:focus {
|
||
border: none;
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
} |