6288 lines
105 KiB
SCSS
6288 lines
105 KiB
SCSS
// out: ../style-css/style.css, compress: true, sourceMap: true
|
||
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;900&family=Nunito:wght@200;300;400;500;600;700;800&family=Roboto:wght@300;400;500;700;900&display=swap');
|
||
$cRed: #b7174d;
|
||
$cPink: #f7abb0;
|
||
$cPinkDark: #dc3545;
|
||
$cText: #000000;
|
||
$cTextLight: #3a3a3a;
|
||
$cGray: #f6f6f6;
|
||
$cGrayLight: #eceff1;
|
||
$cComment: #c3c3c3;
|
||
$form_gray: #e7e7e7;
|
||
$font_nunito: 'Nunito',
|
||
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: $font_nunito;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
color: $cText;
|
||
overflow-x: hidden;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
&.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 {
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
.btn-danger {
|
||
background: $cPinkDark;
|
||
|
||
&:hover {
|
||
background: $cPink;
|
||
}
|
||
|
||
&:active {
|
||
background: $cPink;
|
||
border-color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-success {
|
||
background: $cRed;
|
||
|
||
&:hover {
|
||
background: $cRed;
|
||
}
|
||
|
||
&:active {
|
||
background: $cRed;
|
||
border-color: #fff;
|
||
}
|
||
}
|
||
|
||
.btn-success:not(:disabled):not(.disabled):active,
|
||
.btn-success:not(:disabled):not(.disabled).active,
|
||
.show>.btn-success.dropdown-toggle {
|
||
background: $cRed;
|
||
border: none;
|
||
}
|
||
|
||
.btn-success:not(:disabled):not(.disabled):active:focus,
|
||
.btn-success:not(:disabled):not(.disabled).active:focus {
|
||
background: $cRed;
|
||
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: $cRed;
|
||
border-color: $cRed;
|
||
}
|
||
|
||
.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: $font_nunito !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: $cRed;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.title-border {
|
||
border-bottom: 3px solid #e7e7e7;
|
||
padding: 10px 0;
|
||
font-family: $font_nunito;
|
||
line-height: 32px;
|
||
letter-spacing: -1px;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.box {
|
||
padding: 50px 0;
|
||
|
||
@include respond-between(sm, md) {
|
||
padding: 25px 0;
|
||
}
|
||
|
||
.box-title {
|
||
font-family: $font_nunito;
|
||
font-weight: 600;
|
||
font-size: 28px;
|
||
margin-bottom: 25px;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 26px;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: $font_nunito;
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
margin-bottom: 25px;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
#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:nth-child(1) {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
a {
|
||
font-weight: 600;
|
||
color: $cRed;
|
||
margin-left: 10px;
|
||
|
||
span {
|
||
color: $cText;
|
||
padding-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#header {
|
||
padding: 15px 0;
|
||
|
||
.logo {
|
||
a {
|
||
display: block;
|
||
max-width: 300px;
|
||
text-align: center;
|
||
|
||
img {
|
||
width: 100%;
|
||
max-width: 225px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#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: $font_nunito;
|
||
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: $cRed;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: $font_nunito;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&::placeholder {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: $cText;
|
||
font-family: $font_nunito;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: $cRed;
|
||
|
||
@include respond-below(sm) {
|
||
text-align: right;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
|
||
.icon {
|
||
border-radius: 0;
|
||
background: $cRed;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
gap: 20px;
|
||
|
||
>li {
|
||
@include respond-between(sm, md) {
|
||
&#link-5 {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
>i {
|
||
display: none;
|
||
}
|
||
|
||
>a {
|
||
font-family: $font_nunito;
|
||
color: $cText;
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
display: block;
|
||
padding: 10px 9px;
|
||
@include transition;
|
||
|
||
@include respond-between(md, lg) {
|
||
padding: 5px;
|
||
font-size: 19px;
|
||
}
|
||
|
||
@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: 15px;
|
||
@include transition;
|
||
white-space: nowrap;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cRed;
|
||
}
|
||
}
|
||
|
||
>a {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
i {
|
||
display: none;
|
||
}
|
||
|
||
ul {
|
||
padding-top: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#mobile-menu-close,
|
||
#mobile-menu-open {
|
||
display: none;
|
||
}
|
||
|
||
.promoted-products {
|
||
padding-top: 30px;
|
||
|
||
ontent .box-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
|
||
@include respond-above(xxl) {
|
||
.product-mini {
|
||
|
||
&:nth-child(11),
|
||
&:nth-child(12) {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-mini {
|
||
max-width: calc(100% / 4 - 7.5px);
|
||
// max-width: calc(100% / 5 - 15px);
|
||
width: 100%;
|
||
// margin: 0 15px 15px 0;
|
||
position: relative;
|
||
|
||
@include respond-between(md, xl) {
|
||
max-width: calc(100% / 4 - 7.5px);
|
||
}
|
||
|
||
@include respond-between(sm, md) {
|
||
max-width: calc(100% / 3 - 7.5px);
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
max-width: calc(100% / 2 - 7.5px);
|
||
}
|
||
|
||
@include respond-below(xxs) {
|
||
max-width: 100%;
|
||
margin: 0 0 10px 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 {
|
||
background: #fff;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
border: 1px solid transparentize($color: $cTextLight, $amount: 0.9);
|
||
|
||
&:hover {
|
||
border: 1px solid transparentize($color: $cTextLight, $amount: 0.8);
|
||
}
|
||
|
||
a {
|
||
position: relative;
|
||
display: block;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
.img {
|
||
img {
|
||
&.first {
|
||
opacity: 0;
|
||
}
|
||
|
||
&.second {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-details {
|
||
.name {
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 100%;
|
||
padding-top: 120%;
|
||
display: block;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
img {
|
||
height: 100%;
|
||
width: 100%;
|
||
object-fit: cover;
|
||
object-position: 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: center;
|
||
flex-wrap: wrap;
|
||
|
||
.tm-multihornet {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.name {
|
||
font-family: $font_nunito;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
margin: 0 0 5px 0;
|
||
color: $cText;
|
||
@include transition;
|
||
overflow: hidden;
|
||
display: block;
|
||
position: relative;
|
||
text-align: center;
|
||
width: 100%;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cRed;
|
||
}
|
||
|
||
a {
|
||
color: $cText;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
|
||
.prices {
|
||
text-align: right;
|
||
font-family: $font_nunito;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.price_weight {
|
||
width: 100%;
|
||
order: 99;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
}
|
||
|
||
.price {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: $cRed;
|
||
white-space: nowrap;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 20px;
|
||
}
|
||
|
||
@include respond-below(xs) {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.price-old {
|
||
font-size: 14px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 22px;
|
||
}
|
||
|
||
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: $font_nunito;
|
||
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;
|
||
}
|
||
|
||
.date-add {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.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: $font_nunito;
|
||
// font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.article-title {
|
||
display: block;
|
||
font-weight: 600;
|
||
font-size: 22px;
|
||
font-family: $font_nunito;
|
||
color: $cText;
|
||
}
|
||
|
||
.article-entry {
|
||
color: $cTextLight;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
|
||
.promo-text {
|
||
h1 {
|
||
font-family: $font_nunito;
|
||
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: $cRed;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: $font_nunito;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
color: $cText;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
border-bottom: 1px solid #eee;
|
||
|
||
.box-title {
|
||
text-align: left;
|
||
}
|
||
|
||
ul {
|
||
list-style-type: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
li {
|
||
a {
|
||
font-family: $font_nunito;
|
||
font-size: 20px;
|
||
font-weight: 300;
|
||
color: $cText;
|
||
display: block;
|
||
padding: 5px 0;
|
||
@include transition;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#newsletter {
|
||
.title {
|
||
@extend .box-title;
|
||
}
|
||
|
||
#text {
|
||
font-family: $font_nunito;
|
||
font-size: 20px;
|
||
font-weight: 300;
|
||
color: $cText;
|
||
display: none;
|
||
|
||
@include respond-above(md) {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.agreement {
|
||
font-size: 11px;
|
||
|
||
input {
|
||
margin-right: 5px;
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
|
||
a {
|
||
color: $cRed;
|
||
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: $cRed;
|
||
@include transition;
|
||
height: 2px;
|
||
}
|
||
|
||
&:focus-within {
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.btn {
|
||
background: $cRed;
|
||
}
|
||
}
|
||
}
|
||
|
||
input[type='email'] {
|
||
border: 0;
|
||
border-bottom: 2px solid $cText;
|
||
border-radius: 0;
|
||
font-size: 14px;
|
||
|
||
&:focus {
|
||
outline: none;
|
||
border: 2px solid #000;
|
||
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;
|
||
}
|
||
|
||
&:hover {
|
||
img {
|
||
transform: scale(1.25);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#copyright {
|
||
text-align: right;
|
||
|
||
a {
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
|
||
#cookie-information {
|
||
background: $cGray;
|
||
padding: 15px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
|
||
a {
|
||
color: $cRed;
|
||
}
|
||
}
|
||
|
||
#category-view {
|
||
@extend .box;
|
||
|
||
.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;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: lighten($color: $cRed, $amount: 10%);
|
||
}
|
||
}
|
||
|
||
a {
|
||
@include transition;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
&.level-0 {
|
||
padding: 0 0 15px 0;
|
||
|
||
>li {
|
||
padding-bottom: 10px;
|
||
|
||
>a {
|
||
font-family: $font_nunito;
|
||
font-weight: 600;
|
||
color: $cText;
|
||
|
||
&:hover {
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.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: $cRed;
|
||
}
|
||
}
|
||
|
||
&.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: 22px;
|
||
font-family: $font_nunito;
|
||
|
||
a {
|
||
color: $cText;
|
||
display: inline-block;
|
||
padding: 10px;
|
||
@include transition;
|
||
font-weight: 300;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
|
||
#category-description {
|
||
margin-top: 50px;
|
||
|
||
a {
|
||
color: $cRed;
|
||
}
|
||
|
||
h2 {
|
||
font-family: $font_nunito;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
|
||
#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;
|
||
border-radius: 10px;
|
||
|
||
&:focus {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#contact-additional-info {
|
||
a {
|
||
color: $cRed;
|
||
font-weight: 600;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
|
||
#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: $cRed;
|
||
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;
|
||
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 {
|
||
border: 2px solid #000;
|
||
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: 20px;
|
||
font-weight: 800;
|
||
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: 16px;
|
||
display: block;
|
||
letter-spacing: normal;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
color: lighten($color: $cRed, $amount: 20%);
|
||
|
||
.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: 16px;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.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: 32px;
|
||
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;
|
||
}
|
||
|
||
.table-of-contents {
|
||
margin-bottom: 30px;
|
||
|
||
@include respond-below(md) {
|
||
border: 2px solid #e7e7e7;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
line-height: 21px;
|
||
color: $cRed;
|
||
margin-bottom: 10px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
ol {
|
||
padding-left: 23px;
|
||
margin-bottom: 0;
|
||
|
||
li {
|
||
&.active {
|
||
a {
|
||
font-weight: 700;
|
||
color: lighten($color: $cRed, $amount: 20%);
|
||
}
|
||
}
|
||
|
||
a {
|
||
color: $cText;
|
||
transition: all 0.3s ease;
|
||
font-size: 14px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 16px;
|
||
}
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.text {
|
||
a {
|
||
color: $cRed;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
color: $cRed;
|
||
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;
|
||
}
|
||
|
||
#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 {
|
||
margin: 0 0 1rem 0;
|
||
|
||
a {
|
||
color: $cRed;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
#product-options {
|
||
@include respond-above(sm) {
|
||
padding: 0;
|
||
}
|
||
|
||
.warehouse-message-box {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 10px;
|
||
margin-bottom: 5px;
|
||
|
||
img {
|
||
width: 26px;
|
||
height: 26px;
|
||
filter: invert(1);
|
||
}
|
||
}
|
||
|
||
.warehouse-message {
|
||
// opacity: 0.7;
|
||
color: $cText;
|
||
// font-size: 14px;
|
||
// line-height: 24px;
|
||
font-style: normal;
|
||
letter-spacing: 0px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
h1 {
|
||
font-family: $font_nunito;
|
||
|
||
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: #333333;
|
||
}
|
||
|
||
.price-minimal {
|
||
width: 100%;
|
||
font-size: 12px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.price {
|
||
font-weight: 800;
|
||
// font-size: 30px;
|
||
line-height: 27px;
|
||
color: $cRed;
|
||
font-family: $font_nunito;
|
||
order: 2;
|
||
}
|
||
|
||
.price-old {
|
||
margin-right: 20px;
|
||
font-weight: 400;
|
||
font-size: 22px;
|
||
line-height: 22px;
|
||
font-family: $font_nunito;
|
||
order: 1;
|
||
|
||
color: #b9b9b9;
|
||
|
||
position: relative;
|
||
|
||
&:before {
|
||
width: 120%;
|
||
position: absolute;
|
||
content: '';
|
||
right: -10%;
|
||
top: 40%;
|
||
height: 0px;
|
||
border-bottom: 2px solid #b9b9b9;
|
||
|
||
// -webkit-transform: rotate(-19deg);
|
||
// transform: rotate(-19deg);
|
||
}
|
||
}
|
||
|
||
.flag {
|
||
&-promotion {
|
||
order: 3;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
letter-spacing: 0.075em;
|
||
text-transform: uppercase;
|
||
border-radius: 2px;
|
||
padding: 0.25rem 0.5rem;
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
font-size: 11px;
|
||
margin-left: 20px;
|
||
background-color: #4cbb17;
|
||
padding: 8px 10px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: $cGray;
|
||
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;
|
||
border: 2px solid #000;
|
||
box-shadow: 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;
|
||
border-radius: 10px;
|
||
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.short-description {
|
||
color: $cText;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
font-style: normal;
|
||
letter-spacing: 0px;
|
||
|
||
p {
|
||
strong {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
form.product-options {
|
||
.custom-field {
|
||
margin-bottom: 5px;
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
gap: 5px;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.product-message {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
label {
|
||
min-width: fit-content;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
background-color: #f2f2f2;
|
||
color: #43454b;
|
||
outline: 0;
|
||
border: 0;
|
||
font-weight: 400;
|
||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
|
||
min-height: 40px;
|
||
box-sizing: border-box;
|
||
padding: 5px 10px;
|
||
resize: none;
|
||
border-radius: 15px;
|
||
min-width: 250px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#image-big {
|
||
max-width: 625px;
|
||
margin: auto;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.gallery {
|
||
margin-top: -100px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 10;
|
||
|
||
@include respond-below(sm) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
a {
|
||
background: #fff;
|
||
display: block;
|
||
border-top: 8px solid #f6f6f6;
|
||
border-bottom: 8px solid #f6f6f6;
|
||
border-left: 4px solid #f6f6f6;
|
||
border-right: 4px solid #f6f6f6;
|
||
height: 180px;
|
||
width: 125px;
|
||
|
||
&:first-child {
|
||
border-left: 8px solid #f6f6f6;
|
||
}
|
||
|
||
&:last-child {
|
||
border-right: 8px solid #f6f6f6;
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
height: 90px;
|
||
width: 75px;
|
||
}
|
||
|
||
img {
|
||
height: 100%;
|
||
width: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
}
|
||
|
||
#product-options {
|
||
form {
|
||
#attributes {
|
||
.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 $cRed;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#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: #fff;
|
||
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;
|
||
color: $cText;
|
||
cursor: pointer;
|
||
|
||
margin-right: 20px;
|
||
|
||
/*color: #909090;*/
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&:hover {
|
||
color: $cRed;
|
||
}
|
||
|
||
&.current {
|
||
background-position: 0%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.description-right {
|
||
.title {
|
||
@extend .title-border;
|
||
font-size: 28px;
|
||
font-weight: 400;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
.tab-content {
|
||
padding: 25px;
|
||
|
||
@include respond-below(sm) {
|
||
padding: 10px;
|
||
}
|
||
|
||
margin-bottom: 25px;
|
||
|
||
&.hidden {
|
||
display: none;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.tab-title {
|
||
font-family: $font_nunito;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.products-sets,
|
||
.products-related {
|
||
.box-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.owl-item {
|
||
.product-mini {
|
||
margin: 0 25px 25px;
|
||
|
||
.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(xs) {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
|
||
.basket-address-form {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.box-title,
|
||
form {
|
||
width: 100%;
|
||
}
|
||
|
||
.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 {
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
font-style: italic;
|
||
text-align: right;
|
||
|
||
a {
|
||
background: $cRed;
|
||
color: #fff;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
margin-left: 15px;
|
||
@include transition;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
background: $cRed;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: $cRed;
|
||
}
|
||
}
|
||
|
||
.order-summary {
|
||
.order-summary-content {
|
||
padding-bottom: 50px;
|
||
|
||
.top {
|
||
padding-bottom: 50px;
|
||
}
|
||
}
|
||
|
||
.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: $cRed;
|
||
}
|
||
}
|
||
|
||
//
|
||
// 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: $cRed;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.description {
|
||
font-style: italic;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|
||
.prices {
|
||
margin-left: auto;
|
||
font-family: $font_nunito;
|
||
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;
|
||
|
||
&: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;
|
||
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: $font_nunito;
|
||
}
|
||
|
||
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 $cRed;
|
||
}
|
||
|
||
.buttons {
|
||
padding-top: 15px;
|
||
|
||
a {
|
||
font-weight: 600;
|
||
margin-right: 10px;
|
||
@include transition;
|
||
color: $cRed;
|
||
|
||
&.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: 10px;
|
||
max-width: calc(100% / 4 - 7.5px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-mini {
|
||
.product-details {
|
||
.name {
|
||
font-size: 21px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-list {
|
||
.article-title {
|
||
font-size: 21px;
|
||
}
|
||
}
|
||
|
||
#product {
|
||
#product-options {
|
||
padding: 40px 25px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (min-width: 992px) and (max-width: 1200px) {
|
||
.box {
|
||
padding: 30px 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 {
|
||
@include respond-below(xs) {
|
||
padding-right: 0;
|
||
}
|
||
|
||
padding-right: 25px;
|
||
}
|
||
|
||
.right {
|
||
@include respond-below(xs) {
|
||
padding-left: 0;
|
||
}
|
||
|
||
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;
|
||
z-index: 20;
|
||
|
||
#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: $font_nunito;
|
||
font-size: 23px;
|
||
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: $cRed;
|
||
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;
|
||
// }
|
||
// }
|
||
|
||
#product {
|
||
#product-options {
|
||
padding: 15px 0;
|
||
|
||
h1 {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: 18px;
|
||
font-weight: 600;
|
||
border-bottom: 3px solid $cGrayLight;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: $cRed;
|
||
|
||
@include respond-above(xs) {
|
||
font-size: 20px;
|
||
}
|
||
|
||
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% / 4 - 20px);
|
||
min-width: calc(100% / 4 - 20px);
|
||
}
|
||
|
||
@include respond-above(lg) {
|
||
max-width: calc(100% / 5 - 20px);
|
||
min-width: calc(100% / 5 - 20px);
|
||
}
|
||
|
||
.a-img {
|
||
padding-top: 125%;
|
||
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: $font_nunito;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.price {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: $cRed;
|
||
}
|
||
|
||
.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: $font_nunito;
|
||
|
||
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 {
|
||
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;
|
||
|
||
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%;
|
||
}
|
||
}
|
||
}
|
||
|
||
//style-mu
|
||
//main-slider
|
||
.main-slider {
|
||
width: 100%;
|
||
}
|
||
|
||
//popular-categories
|
||
.popular-categories {
|
||
display: none;
|
||
|
||
.category-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.category {
|
||
height: 400px;
|
||
position: relative;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
|
||
.link-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
display: block;
|
||
|
||
.category-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 10px;
|
||
transition: 4s;
|
||
}
|
||
|
||
&:hover {
|
||
.category-img {
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-description {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding: 60px 0 0 60px;
|
||
|
||
.link-title {
|
||
font-size: 20px;
|
||
text-decoration: none;
|
||
color: $cText;
|
||
margin-bottom: 20px;
|
||
transition: 0.3s;
|
||
font-weight: 700;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 30px;
|
||
}
|
||
|
||
&:hover {
|
||
color: lighten($color: $cRed, $amount: 15%);
|
||
}
|
||
|
||
.title {
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.description {
|
||
margin-bottom: 20px;
|
||
font-size: 16px;
|
||
color: $cTextLight;
|
||
display: none;
|
||
|
||
@include respond-above(md) {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-btn {
|
||
padding: 12px 35px;
|
||
border-radius: 10px;
|
||
background-color: $cGray;
|
||
color: $cText;
|
||
border: none;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
margin-top: 40px;
|
||
font-size: 16px;
|
||
display: block;
|
||
text-decoration: none;
|
||
width: 142px;
|
||
|
||
&:hover {
|
||
background-color: $cRed;
|
||
color: $cGray;
|
||
}
|
||
}
|
||
}
|
||
|
||
.category:nth-child(1),
|
||
.category:nth-last-child(1) {
|
||
width: 100%;
|
||
|
||
@include respond-above(sm) {
|
||
width: 60%;
|
||
}
|
||
|
||
.category-description {
|
||
width: 85%;
|
||
}
|
||
}
|
||
|
||
.category:nth-child(2),
|
||
.category:nth-last-child(2) {
|
||
width: 100%;
|
||
|
||
@include respond-above(sm) {
|
||
width: 40%;
|
||
}
|
||
|
||
.category-description {
|
||
width: 70%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.row {
|
||
.product-mini {
|
||
.new {
|
||
@extend .new;
|
||
position: absolute;
|
||
}
|
||
}
|
||
}
|
||
|
||
.promoted-products,
|
||
.popular-categories,
|
||
.sale-categories,
|
||
.last-on-blog {
|
||
.container {
|
||
.box-title {
|
||
font-size: 26px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 40px;
|
||
}
|
||
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
.box-description {
|
||
font-size: 14px;
|
||
display: none;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 16px;
|
||
}
|
||
|
||
text-align: center;
|
||
line-height: 25px;
|
||
margin: 15px auto 0;
|
||
max-width: 850px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.content {}
|
||
}
|
||
}
|
||
|
||
//product detail name
|
||
.product-mini {
|
||
.product-details {
|
||
.name {
|
||
font-size: 14px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.prices {
|
||
.price {
|
||
font-size: 18px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 20px;
|
||
}
|
||
|
||
color: $cText;
|
||
font-weight: 700;
|
||
|
||
span {
|
||
color: $cText;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//main-image
|
||
.main-image {
|
||
position: relative;
|
||
border-radius: 10px;
|
||
|
||
@include respond-below(sm) {
|
||
height: 300px;
|
||
}
|
||
|
||
@include respond-below(xs) {
|
||
height: 250px;
|
||
}
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.card-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 160px;
|
||
position: absolute;
|
||
align-items: center;
|
||
z-index: 11;
|
||
|
||
.main-image-btn {
|
||
// position: absolute;
|
||
border: none;
|
||
color: white;
|
||
background-color: $cRed;
|
||
border-radius: 50%;
|
||
width: 30px;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
cursor: pointer;
|
||
animation: border_animation 1.5s infinite;
|
||
margin-left: -25px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.main-image-btn:active {
|
||
border: none;
|
||
outline: none;
|
||
}
|
||
|
||
.main-image__card {
|
||
// position: absolute;
|
||
width: 160px;
|
||
height: 200px;
|
||
display: none;
|
||
|
||
.row {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.product-mini {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 10px;
|
||
|
||
a {
|
||
.img {
|
||
padding-top: 80%;
|
||
|
||
img {
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-details {
|
||
padding: 0;
|
||
|
||
.name {
|
||
font-size: 13px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
width: 100%;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.prices {
|
||
.price-old {
|
||
display: none;
|
||
}
|
||
|
||
.price {
|
||
font-size: 13px;
|
||
|
||
span {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&--active {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-container-1 {
|
||
top: 38%;
|
||
left: 7%;
|
||
|
||
@include respond-below(sm) {
|
||
left: 5%;
|
||
}
|
||
|
||
@include respond-below(xxs) {
|
||
top: 20%;
|
||
}
|
||
}
|
||
|
||
.card-container-2 {
|
||
top: 40%;
|
||
left: 52%;
|
||
|
||
@include respond-below(sm) {
|
||
top: 14%;
|
||
left: 42%;
|
||
}
|
||
|
||
@include respond-below(xxs) {
|
||
left: 51%;
|
||
}
|
||
}
|
||
|
||
.card-container-3 {
|
||
top: 23%;
|
||
right: 2%;
|
||
|
||
@include respond-below(sm) {
|
||
top: 17%;
|
||
right: -5px;
|
||
}
|
||
|
||
@media (max-width: 440px) {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes border_animation {
|
||
0% {
|
||
box-shadow: 0 0 0 0 $cRed;
|
||
}
|
||
|
||
50% {
|
||
box-shadow: 0 0 15px 0 $cRed;
|
||
}
|
||
|
||
100% {
|
||
box-shadow: 0 0 0 0 $cRed;
|
||
}
|
||
}
|
||
|
||
//splide-2
|
||
#splide-2 {
|
||
max-height: 500px;
|
||
|
||
@include respond-below(sm) {
|
||
max-height: 1200px;
|
||
}
|
||
|
||
.splide__track {
|
||
max-height: 500px;
|
||
width: 100%;
|
||
|
||
@include respond-below(sm) {
|
||
max-height: 1200px;
|
||
}
|
||
|
||
.splide__list {
|
||
max-height: 500px;
|
||
width: 100%;
|
||
|
||
@include respond-below(sm) {
|
||
max-height: 1200px;
|
||
}
|
||
|
||
.splide__slide {
|
||
max-height: 500px;
|
||
width: 100%;
|
||
|
||
@include respond-below(sm) {
|
||
max-height: 1200px;
|
||
}
|
||
|
||
.article-list {
|
||
max-height: 500px;
|
||
width: 100%;
|
||
|
||
@include respond-below(sm) {
|
||
max-height: 1200px;
|
||
}
|
||
|
||
a {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
width: 100%;
|
||
height: 100%;
|
||
justify-content: start;
|
||
gap: 30px;
|
||
align-items: center;
|
||
|
||
@include respond-below(sm) {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.blog-image {
|
||
width: 50%;
|
||
padding-top: 28%;
|
||
margin-bottom: 0;
|
||
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
padding-top: 50%;
|
||
}
|
||
|
||
@include respond-below(xs) {
|
||
padding-top: 70%;
|
||
}
|
||
|
||
@include respond-below(xxs) {
|
||
padding-top: 120%;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
|
||
.article-list-text-container {
|
||
width: 50%;
|
||
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
}
|
||
|
||
.slider-btn {
|
||
width: 170px;
|
||
padding: 12px 35px;
|
||
border-radius: 10px;
|
||
background-color: $cRed;
|
||
color: white;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
margin-top: 30px;
|
||
font-size: 16px;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 14px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 18px;
|
||
margin: 0;
|
||
padding-bottom: 15px;
|
||
font-weight: 700;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 26px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.article-entry {
|
||
font-size: 14px;
|
||
color: $cTextLight;
|
||
margin: 0;
|
||
padding-bottom: 15px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 5;
|
||
overflow: hidden;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.date-add {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
gap: 5px;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: $cText;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.splide__arrow {
|
||
border: none;
|
||
background-color: white;
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 5px rgba(#0003, 0.5);
|
||
transition: 0.3s;
|
||
|
||
svg {
|
||
transition: 0.3s;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: $cRed;
|
||
|
||
svg {
|
||
fill: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.splide__arrows--rtl {
|
||
.splide__arrow--prev {
|
||
top: 100%;
|
||
right: 35%;
|
||
|
||
@include respond-above(xxs) {
|
||
right: 38%;
|
||
}
|
||
|
||
@include respond-above(xs) {
|
||
right: 42%;
|
||
}
|
||
|
||
@include respond-above(sm) {
|
||
right: 44%;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
@include respond-above(md) {
|
||
right: 45%;
|
||
}
|
||
|
||
@include respond-above(lg) {
|
||
transform: translateY(0);
|
||
top: -80px;
|
||
right: 0;
|
||
}
|
||
|
||
@include respond-above(xl) {
|
||
top: -80px;
|
||
right: 10px;
|
||
}
|
||
}
|
||
|
||
.splide__arrow--next {
|
||
top: 100%;
|
||
left: 35%;
|
||
|
||
@include respond-above(xxs) {
|
||
left: 38%;
|
||
}
|
||
|
||
@include respond-above(xs) {
|
||
left: 42%;
|
||
}
|
||
|
||
@include respond-above(sm) {
|
||
transform: translateY(30px);
|
||
left: 44%;
|
||
}
|
||
|
||
@include respond-above(md) {
|
||
left: 45%;
|
||
}
|
||
|
||
@include respond-above(lg) {
|
||
transform: translateY(0);
|
||
top: -80px;
|
||
right: 54px;
|
||
}
|
||
|
||
@include respond-above(xl) {
|
||
top: -80px;
|
||
right: 64px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sale-categories {
|
||
display: none;
|
||
|
||
.row {
|
||
gap: 10px;
|
||
padding: 0 15px;
|
||
|
||
.col-12 {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popular-categories {
|
||
.row {
|
||
.col-12 {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
//newsletter
|
||
|
||
#newsletter {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-color: #f5f5f5;
|
||
border-radius: 10px;
|
||
width: 100%;
|
||
margin: -125px auto 0;
|
||
padding: 40px;
|
||
height: auto;
|
||
transform: translateY(50%);
|
||
align-items: center;
|
||
gap: 10px;
|
||
|
||
@include respond-below(sm) {
|
||
flex-direction: column;
|
||
padding: 25px;
|
||
}
|
||
|
||
.title {
|
||
margin-bottom: 0 !important;
|
||
line-height: 2;
|
||
text-align: center;
|
||
padding-right: 40px;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
#text {
|
||
width: 30%;
|
||
padding-left: 40px;
|
||
border-left: 1px solid $cTextLight;
|
||
font-size: 16px;
|
||
color: $cText;
|
||
font-weight: 700;
|
||
}
|
||
|
||
form#newsletter-form {
|
||
width: 50%;
|
||
|
||
@include respond-below(md) {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-group.input {
|
||
&::after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@include respond-below(sm) {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
#email {
|
||
padding: 25px 10px;
|
||
border-bottom: none;
|
||
border-top-left-radius: 10px;
|
||
border-bottom-left-radius: 10px;
|
||
border: 2px solid lightgray;
|
||
}
|
||
|
||
#email:focus {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.btn {
|
||
border-bottom-right-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
padding: 0 25px;
|
||
background-color: $cRed;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement {
|
||
// display: none;
|
||
margin-top: 5px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
//footer
|
||
.footer {
|
||
background-color: $cRed;
|
||
color: white;
|
||
padding-top: 140px;
|
||
padding-bottom: 50px;
|
||
|
||
.row {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
nav {
|
||
ul {
|
||
li {
|
||
a {
|
||
color: white;
|
||
width: auto;
|
||
display: inline;
|
||
|
||
&:hover {
|
||
color: $cText;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact-list {
|
||
.contact-item {
|
||
p {
|
||
i {
|
||
font-size: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
a {
|
||
color: white;
|
||
width: auto;
|
||
display: inline;
|
||
|
||
&:hover {
|
||
color: $cText;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-socials {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 10px;
|
||
|
||
.social-item {
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
|
||
p {
|
||
font-size: 18px;
|
||
margin-bottom: 0;
|
||
font-weight: 700;
|
||
|
||
i {
|
||
color: $cText;
|
||
transition: 0.3s;
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
color: white;
|
||
|
||
i {
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
li {
|
||
padding: 5px 0;
|
||
font-size: 16px;
|
||
|
||
@include respond-below(sm) {
|
||
padding: 3px 0;
|
||
}
|
||
|
||
a {
|
||
font-size: 16px;
|
||
|
||
@include respond-below(sm) {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-left {
|
||
display: none;
|
||
|
||
p {
|
||
font-size: 16px;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
|
||
//footer-bottom
|
||
.footer-bottom {
|
||
#copyright {
|
||
font-size: 16px;
|
||
text-align: start;
|
||
}
|
||
|
||
.payment-methods {
|
||
text-align: end;
|
||
}
|
||
|
||
@include respond-below(md) {
|
||
#copyright {
|
||
text-align: center;
|
||
}
|
||
|
||
.payment-methods {
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
//blog view
|
||
#blog-view {
|
||
.site-title {
|
||
text-align: center;
|
||
font-size: 40px;
|
||
margin: 30px 0;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
//article-entry
|
||
.article-entry {
|
||
margin-bottom: 30px;
|
||
|
||
.blog-image {
|
||
overflow: hidden;
|
||
|
||
a {
|
||
display: block;
|
||
height: 100%;
|
||
width: 100%;
|
||
max-height: 510px;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
|
||
@media (max-width: 1629px) {
|
||
max-height: 430px;
|
||
}
|
||
|
||
@media (max-width: 1399px) {
|
||
max-height: 360px;
|
||
}
|
||
|
||
@media (max-width: 1199px) {
|
||
max-height: 300px;
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
max-height: 230px;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
max-height: 170px;
|
||
}
|
||
|
||
img {
|
||
object-fit: cover;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-title {
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
margin-bottom: 15px;
|
||
|
||
a {
|
||
font-size: 20px;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.entry {
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.article-entry__bottom {
|
||
text-align: center;
|
||
}
|
||
|
||
.date-add {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
//article__content
|
||
.article__content {
|
||
.social-icons {
|
||
display: none;
|
||
}
|
||
|
||
.article-title {
|
||
font-size: 20px;
|
||
margin-bottom: 15px;
|
||
|
||
@include respond-above(xs) {
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
|
||
.date-add {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 5px;
|
||
text-align: center;
|
||
color: $cTextLight;
|
||
font-size: 14px;
|
||
|
||
i {
|
||
color: $cTextLight;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
color: $cTextLight;
|
||
|
||
.v-center {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.h-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
p {
|
||
img {
|
||
border-radius: 10px;
|
||
min-height: 350px;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
color: $cRed !important;
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h3 {
|
||
color: $cRed !important;
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
section {
|
||
h2 {
|
||
font-size: 18px !important;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 20px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.col-3 {
|
||
max-width: 50%;
|
||
flex: 0 0 50%;
|
||
|
||
@include respond-above(xs) {
|
||
max-width: 25%;
|
||
flex: 0 0 25%;
|
||
}
|
||
}
|
||
|
||
.product-mini {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.btn-back {
|
||
border: none;
|
||
background: transparent;
|
||
width: auto;
|
||
height: auto;
|
||
color: $cText;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: 25px auto;
|
||
transition: 0.3s;
|
||
|
||
img {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
&:hover {
|
||
color: $cRed;
|
||
|
||
img {
|
||
fill: $cRed;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//pager
|
||
|
||
.pager {
|
||
gap: 10px;
|
||
|
||
li.first,
|
||
li.last {
|
||
display: none;
|
||
}
|
||
|
||
li {
|
||
background-color: $cGray;
|
||
color: $cText;
|
||
border-radius: 10px;
|
||
font-family: 'Nunito', sans-serif;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: $cRed;
|
||
|
||
a {
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
span {
|
||
padding: 10px;
|
||
display: block;
|
||
font-size: 16px;
|
||
}
|
||
|
||
a {
|
||
font-size: 16px;
|
||
color: $cText;
|
||
transition: 0.3s;
|
||
font-family: 'Nunito', sans-serif;
|
||
transition: 0.3s;
|
||
}
|
||
}
|
||
|
||
li:nth-child(3) {
|
||
&:hover {
|
||
background-color: $cGray;
|
||
}
|
||
}
|
||
}
|
||
|
||
//category view
|
||
#category-view {
|
||
.left-column {
|
||
@media (max-width: 767px) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.site-title {
|
||
font-size: 40px;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
margin-bottom: 30px;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
.shop-categories {
|
||
li {
|
||
a {
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
}
|
||
|
||
ul {
|
||
li {
|
||
|
||
a,
|
||
.menu-trigger {
|
||
text-transform: none;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.container {
|
||
#category-description {
|
||
#visible {
|
||
h2 {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
.product-options {
|
||
.prices {
|
||
.price {
|
||
.small {
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-to-basket {
|
||
.btn {
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.products-sets,
|
||
.products-related {
|
||
.owl-item {
|
||
padding: 0 10px;
|
||
|
||
.product-mini {
|
||
max-width: 100%;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.box-title {
|
||
font-size: 32px;
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
#product {
|
||
.history-back {
|
||
display: none;
|
||
}
|
||
|
||
.product-options#product-options {
|
||
h1 {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.short-description {
|
||
strong {
|
||
color: $cText;
|
||
}
|
||
|
||
color: $cTextLight;
|
||
}
|
||
}
|
||
|
||
#description {
|
||
.tabs#tabs-menu {
|
||
.tab-link {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.tab-content {
|
||
.tab-title {
|
||
font-weight: 600;
|
||
}
|
||
|
||
p {
|
||
color: $cTextLight;
|
||
|
||
span {
|
||
font-weight: 600;
|
||
color: $cText;
|
||
}
|
||
}
|
||
|
||
ul {
|
||
li {
|
||
color: $cTextLight;
|
||
}
|
||
}
|
||
}
|
||
|
||
.description-right {
|
||
.content {
|
||
p {
|
||
color: $cTextLight;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
border-bottom: none;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-to-basket {
|
||
// flex-direction: column;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
padding: 15px 30px;
|
||
// margin-top: 15px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: black;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//menu
|
||
#main-menu {
|
||
#menu-container-1 {
|
||
nav {
|
||
ul.level-0 {
|
||
justify-content: center;
|
||
padding: 10px 0;
|
||
|
||
li {
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
a {
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
a {
|
||
position: relative;
|
||
margin: 10px 0;
|
||
font-size: 18px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 16px;
|
||
}
|
||
|
||
@include respond-above(lg) {
|
||
font-size: 18px;
|
||
}
|
||
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 2px;
|
||
background-color: $cRed;
|
||
width: 0;
|
||
transition: 0.4s;
|
||
}
|
||
|
||
&:hover {
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
ul {
|
||
border-radius: 10px;
|
||
|
||
li {
|
||
@include respond-above(md) {
|
||
width: calc(100% / 4);
|
||
}
|
||
|
||
a {
|
||
&::after {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
li.parent {
|
||
.menu-trigger {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
|
||
i {
|
||
font-weight: 200;
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#header {
|
||
.header-right {
|
||
#search-button {
|
||
.btn {
|
||
background-color: transparent;
|
||
width: auto;
|
||
height: auto;
|
||
|
||
img {
|
||
fill: $cText;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
#basket-mini {
|
||
a {
|
||
&:hover {
|
||
.icon {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
width: auto;
|
||
height: auto;
|
||
background-color: transparent;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#basket-container {
|
||
#btn-basket-summary {
|
||
border-radius: 10px;
|
||
transition: 0.3s;
|
||
margin-top: 20px;
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
|
||
@include respond-below(xxs) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
#content {
|
||
.mini-box {
|
||
.box-title {
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
#basket {
|
||
border-bottom: 1px solid rgba(lightgray, 0.4);
|
||
|
||
.details {
|
||
.name {
|
||
a {
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
|
||
.buttons {
|
||
.btn-delete {
|
||
background-color: transparent;
|
||
|
||
img {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.basket-bottom {
|
||
.coupon {
|
||
.form-horizontal {
|
||
.input-group {
|
||
.form-control:focus {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.form-control:active {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
form {
|
||
.form-control {
|
||
border-top-left-radius: 10px;
|
||
border-bottom-left-radius: 10px;
|
||
}
|
||
|
||
.btn {
|
||
border-bottom-right-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: black;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.basket-message {
|
||
textarea {
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//owl
|
||
.products-related {
|
||
.owl-carousel {
|
||
.owl-nav {
|
||
|
||
.owl-prev,
|
||
.owl-next {
|
||
span {
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//basket-summary-container
|
||
.basket-summary-container {
|
||
.user-login {
|
||
.content {
|
||
form {
|
||
.form-group {
|
||
input {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
button {
|
||
border-radius: 10px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.basket-address-form {
|
||
.form-group {
|
||
input {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
button {
|
||
border-radius: 10px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn.btn-dark {
|
||
background-color: $cRed;
|
||
border-radius: 10px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
}
|
||
|
||
//main
|
||
.main {
|
||
.alert.alert-success {
|
||
border-radius: 10px;
|
||
|
||
.close {
|
||
color: white;
|
||
opacity: 1;
|
||
text-shadow: none;
|
||
}
|
||
}
|
||
|
||
.order-bottom {
|
||
.right {
|
||
.content {
|
||
button {
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#basket-summary {
|
||
.alert.alert-danger {
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
//shop alert
|
||
.shop-alert {
|
||
border-radius: 10px;
|
||
|
||
.shop-alert-buttons {
|
||
.btn {
|
||
border-radius: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.btn-success {
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
|
||
.btn-default {
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//basket
|
||
#basket {
|
||
.alert.alert-danger {
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
|
||
//jconfirm
|
||
.jconfirm-box {
|
||
border-radius: 10px;
|
||
|
||
.jconfirm-buttons {
|
||
|
||
.btn.btn-blue,
|
||
.btn.btn-orange {
|
||
background-color: $cRed !important;
|
||
transition: 0.3s !important;
|
||
border-radius: 10px !important;
|
||
|
||
&:hover {
|
||
background-color: $cText !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//iradio_square-blue
|
||
.iradio_square-blue.checked {
|
||
ins {
|
||
background-color: $cRed !important;
|
||
}
|
||
}
|
||
|
||
//basket buttons
|
||
|
||
#basket-container {
|
||
#basket {
|
||
.basket-product {
|
||
.buttons {
|
||
|
||
.int-format.form-control:focus,
|
||
.int-format.form-control:active {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.row {
|
||
.col-12 {}
|
||
}
|
||
}
|
||
|
||
//basket bottom, basket message
|
||
|
||
#basket-container {
|
||
.mini-box {
|
||
#basket {
|
||
.basket-bottom {
|
||
.basket-message {
|
||
|
||
.form-control:focus,
|
||
.form-control:active {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//contact
|
||
.main {
|
||
.container {
|
||
.row {
|
||
.col-12 {
|
||
.site-title {
|
||
font-size: 40px;
|
||
|
||
@include respond-below(md) {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
#contact-additional-info {
|
||
p {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
#contact-form {
|
||
#contact-form-send {
|
||
border-radius: 10px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//search
|
||
#header {
|
||
#search-form-big {
|
||
div.input {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.button--search {
|
||
width: 125px;
|
||
border: none;
|
||
box-shadow: 0 0 5px #0003;
|
||
background-color: $cRed;
|
||
border-bottom-right-radius: 30px;
|
||
border-top-right-radius: 30px;
|
||
height: 50px;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
|
||
@include respond-below(xxs) {
|
||
width: 80px;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
|
||
.search-form-big-close {
|
||
color: $cText;
|
||
width: 25px;
|
||
height: 25px;
|
||
margin-left: 20px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
input.form-control {
|
||
border: none;
|
||
border-bottom-left-radius: 30px;
|
||
border-top-left-radius: 30px;
|
||
box-shadow: 0 0 5px #0003;
|
||
font-size: 16px;
|
||
color: $cTextLight;
|
||
padding: 20px 0 20px 20px;
|
||
|
||
&::placeholder {
|
||
font-size: 16px;
|
||
color: $cTextLight;
|
||
|
||
@include respond-below(xxs) {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//product
|
||
.main {
|
||
#product {
|
||
.product-options#product-options {
|
||
h1 {
|
||
font-size: 24px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
.prices {
|
||
margin: 10px 0;
|
||
|
||
@include respond-above(md) {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.price {
|
||
font-size: 24px;
|
||
|
||
.small {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
@include respond-above(md) {
|
||
font-size: 28px;
|
||
|
||
.small {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#description {
|
||
.tab-title {
|
||
font-size: 20px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
list-style: none;
|
||
display: flex;
|
||
justify-content: start;
|
||
align-items: center;
|
||
border-bottom: 2px solid rgba(lightgray, 0.8);
|
||
padding-left: 0;
|
||
gap: 10px;
|
||
|
||
.tab-link {
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
padding: 10px 25px;
|
||
|
||
&.current {
|
||
background: $cRed;
|
||
color: #fff !important;
|
||
}
|
||
|
||
&:hover {
|
||
color: $cRed;
|
||
}
|
||
|
||
@include respond-above(xs) {
|
||
font-size: 20px;
|
||
}
|
||
|
||
@include respond-above(md) {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.description-right {
|
||
.title {
|
||
font-size: 20px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.products-sets {
|
||
.box-title {
|
||
font-size: 24px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
.owl-carousel {
|
||
.owl-nav {
|
||
button {
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
color: $cRed;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.button-up {
|
||
border: none;
|
||
background-color: $cRed;
|
||
border-radius: 10px;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: fixed;
|
||
bottom: 60px;
|
||
right: 20px;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
opacity: 0;
|
||
|
||
&--active {
|
||
opacity: 1;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
|
||
img {
|
||
width: 50%;
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
//logowanie
|
||
.main {
|
||
.container {
|
||
.user-login {
|
||
.content {
|
||
form {
|
||
.form-group {
|
||
input {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
input:focus {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
|
||
button {
|
||
border-radius: 10px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background-color: $cText;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//rejestracja
|
||
.user-register {
|
||
.content {
|
||
form#f-user-register {
|
||
.form-group {
|
||
input {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
input:focus {
|
||
border: 2px solid #000;
|
||
box-shadow: none;
|
||
}
|
||
|
||
button {
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.image-categories {
|
||
display: none;
|
||
}
|
||
|
||
#scontainer-12,
|
||
#scontainer-13 {
|
||
background: $cRed;
|
||
padding: 25px;
|
||
color: #fff;
|
||
margin-bottom: 25px;
|
||
|
||
@include respond-below(md) {
|
||
padding: 10px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
#scontainer-12 {
|
||
display: none !important;
|
||
}
|
||
|
||
.main-page-text {
|
||
font-size: 13px;
|
||
|
||
h1 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
a {
|
||
color: $cRed;
|
||
}
|
||
}
|
||
|
||
.why-us {
|
||
&--wrapper {
|
||
position: relative;
|
||
padding: 150px 0;
|
||
background: #b7174d;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60px;
|
||
background-image: url('/images/wave-2.svg');
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60px;
|
||
background-image: url('/images/wave-2.svg');
|
||
transform: scale(-1);
|
||
}
|
||
|
||
@include respond-below(lg) {
|
||
padding: 100px 0;
|
||
}
|
||
}
|
||
|
||
.box-title {
|
||
font-size: 26px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 40px;
|
||
}
|
||
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
#scontainer-15 {
|
||
img {
|
||
display: block;
|
||
width: 64px !important;
|
||
max-width: unset !important;
|
||
height: 64px;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-size: 1.75rem;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
p {
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
.row {
|
||
>div {
|
||
&:hover {
|
||
img {
|
||
animation-name: buzz-out-on-hover;
|
||
animation-duration: 0.75s;
|
||
animation-timing-function: linear;
|
||
animation-iteration-count: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@include respond-below(lg) {
|
||
h2 {
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes buzz-out-on-hover {
|
||
10% {
|
||
-webkit-transform: translateX(3px) rotate(2deg);
|
||
transform: translateX(3px) rotate(2deg);
|
||
}
|
||
|
||
20% {
|
||
-webkit-transform: translateX(-3px) rotate(-2deg);
|
||
transform: translateX(-3px) rotate(-2deg);
|
||
}
|
||
|
||
30% {
|
||
-webkit-transform: translateX(3px) rotate(2deg);
|
||
transform: translateX(3px) rotate(2deg);
|
||
}
|
||
|
||
40% {
|
||
-webkit-transform: translateX(-3px) rotate(-2deg);
|
||
transform: translateX(-3px) rotate(-2deg);
|
||
}
|
||
|
||
50% {
|
||
-webkit-transform: translateX(2px) rotate(1deg);
|
||
transform: translateX(2px) rotate(1deg);
|
||
}
|
||
|
||
60% {
|
||
-webkit-transform: translateX(-2px) rotate(-1deg);
|
||
transform: translateX(-2px) rotate(-1deg);
|
||
}
|
||
|
||
70% {
|
||
-webkit-transform: translateX(2px) rotate(1deg);
|
||
transform: translateX(2px) rotate(1deg);
|
||
}
|
||
|
||
80% {
|
||
-webkit-transform: translateX(-2px) rotate(-1deg);
|
||
transform: translateX(-2px) rotate(-1deg);
|
||
}
|
||
|
||
90% {
|
||
-webkit-transform: translateX(1px) rotate(0);
|
||
transform: translateX(1px) rotate(0);
|
||
}
|
||
|
||
100% {
|
||
-webkit-transform: translateX(-1px) rotate(0);
|
||
transform: translateX(-1px) rotate(0);
|
||
}
|
||
}
|
||
|
||
.free-delivery-box {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
|
||
img {
|
||
width: 26px;
|
||
height: 26px;
|
||
filter: invert(1);
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.loading-button {
|
||
pointer-events: none;
|
||
/* Wyłącza możliwość kliknięcia ponownie */
|
||
opacity: 0.7;
|
||
/* Lekkie przyciemnienie przycisku */
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.loading-button::after {
|
||
content: '';
|
||
display: block;
|
||
margin-left: 10px;
|
||
margin-right: auto;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 3px solid #fff;
|
||
border-radius: 50%;
|
||
border-top: 3px solid #666;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.instagram-feed {
|
||
.box-title {
|
||
font-size: 26px;
|
||
|
||
@include respond-above(md) {
|
||
font-size: 40px;
|
||
}
|
||
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
#instagram-feed-box {
|
||
.splide__slide {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
|
||
.swiper-button-prev,
|
||
.swiper-button-next {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 100%;
|
||
background: #b7174d;
|
||
|
||
&::after {
|
||
color: white;
|
||
font-size: 16px;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recommended-presents {
|
||
.swiper-slide {
|
||
.product-mini {
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: #FFF;
|
||
font-weight: 600;
|
||
transition: 250ms ease all;
|
||
background: $cRed;
|
||
border: 0;
|
||
font-size: 14px;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
opacity: .8;
|
||
}
|
||
}
|
||
}
|
||
} |