Save
This commit is contained in:
Roman Pyrih
@@ -302,8 +302,8 @@ body#product #content ul.product-flags li.product-flag.out_of_stock {
|
||||
}
|
||||
body#product .product-info-box {
|
||||
margin: 0;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 65px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
body#product .product-info-box #content {
|
||||
@@ -345,55 +345,396 @@ body#product .product-info-box .product-prices .product-price .current-price .di
|
||||
body#product .product-info-box .product-prices .tax-shipping-delivery-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-variants {
|
||||
margin: 25px 0;
|
||||
body#product .product-info-box .product-info-box-left:hover .scroll-box-arrows {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-left .images-container .js-qv-mask {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-left .product-images {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-left .scroll-box-arrows {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-left .scroll-box-arrows .material-icons {
|
||||
line-height: 0;
|
||||
bottom: 45px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ece9e2;
|
||||
border-radius: 100%;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right ul.product-flags {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right ul.product-flags li.product-flag {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
padding: 3px 8px;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
min-height: auto;
|
||||
margin-top: 0;
|
||||
list-style: none;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right ul.product-flags li.product-flag.new {
|
||||
background: #462d26;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right ul.product-flags li.product-flag.discount {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-column-gap: 8px;
|
||||
column-gap: 8px;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right ul.product-flags li.product-flag.discount span {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 8px;
|
||||
background: #c40000;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right ul.product-flags li.product-flag.out_of_stock {
|
||||
background: #462d26;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .h1 {
|
||||
color: #462d26;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-family: "Inter", sans-serif;
|
||||
text-transform: initial;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-prices .product-discount .regular-price {
|
||||
color: #462d26;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: "Inter", sans-serif;
|
||||
line-height: 1;
|
||||
opacity: 0.35;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-prices .product-price .current-price .current-price-value {
|
||||
color: #462d26;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: "Inter", sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-prices .tax-shipping-delivery-label {
|
||||
display: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .gm_omniprice {
|
||||
display: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-description {
|
||||
display: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants {
|
||||
margin: 16px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-variants .product-variants-item {
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
padding: 16px 0;
|
||||
width: 100%;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-variants .product-variants-item .control-label {
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item:not(:last-child) {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
top: -1px;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
transition: all 250ms ease-in-out;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition-delay: 400ms;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item.active::before {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .product-variants-item--wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .control-label-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .control-label-nav.active .form-control-select-standard-handler {
|
||||
transform: scale(-1);
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .control-label-nav .form-control-select-standard-handler {
|
||||
cursor: pointer;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .control-label {
|
||||
color: #462d26;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-family: "Inter", sans-serif;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-variants .product-variants-item select {
|
||||
border-radius: 10px;
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .control-label .control-label-selected {
|
||||
font-weight: 400;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-variants .product-variants-item > ul {
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item select {
|
||||
display: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
top: calc(100% + 16px);
|
||||
z-index: 10;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom .custom-select {
|
||||
display: block;
|
||||
padding: 25px;
|
||||
border: none;
|
||||
background: #fff;
|
||||
height: auto;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom .custom-select ul.custom-dropdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom .custom-select ul.custom-dropdown li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-column-gap: 14px;
|
||||
column-gap: 14px;
|
||||
margin: 0;
|
||||
color: #110e0c;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-family: "Inter", sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom .custom-select ul.custom-dropdown li:not(:last-child) {
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(17, 14, 12, 0.1019607843);
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom .custom-select ul.custom-dropdown li.active .li-checkbox {
|
||||
background: #462d26;
|
||||
border-color: #462d26;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom .custom-select ul.custom-dropdown li.active .li-checkbox::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 5.5px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background: #f9f7f2;
|
||||
transform: rotate(-45deg);
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom .custom-select ul.custom-dropdown li.active .li-checkbox::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 4.5px;
|
||||
width: 3.5px;
|
||||
height: 2px;
|
||||
background: #f9f7f2;
|
||||
transform: rotate(45deg);
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-variants .product-variants-item .form-control-select-custom .custom-select ul.custom-dropdown li .li-checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 19px;
|
||||
min-width: 19px;
|
||||
height: 19px;
|
||||
border: 1px solid #d9cebe;
|
||||
border-radius: 100%;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart {
|
||||
padding: 24px;
|
||||
background: #ece9e2;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart > .control-label {
|
||||
display: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .qty {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-variants .product-variants-item > ul li > label {
|
||||
margin-bottom: 0;
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .qty > .input-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
float: none;
|
||||
border: 1px solid rgba(70, 45, 38, 0.8509803922);
|
||||
border-radius: 1px;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-variants .product-variants-item > ul li > label > span {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .qty > .input-group input#quantity_wanted {
|
||||
order: 2;
|
||||
font-size: 14px;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 35px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
height: 29px;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .qty #quantity_wanted {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .qty > .input-group button {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
color: rgba(70, 45, 38, 0.8509803922);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: "Inter", sans-serif;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .qty .bootstrap-touchspin-up {
|
||||
border-top-right-radius: 10px;
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .qty > .input-group button.btn {
|
||||
height: 29px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .qty .bootstrap-touchspin-down {
|
||||
border-bottom-right-radius: 10px;
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .qty > .input-group button.btn.bootstrap-touchspin-up {
|
||||
order: 3;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-add-to-cart .product-quantity .add-to-cart {
|
||||
background: #e6cb6f;
|
||||
border-radius: 10px;
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .qty > .input-group button.btn.bootstrap-touchspin-down {
|
||||
order: 1;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-add-to-cart #product-availability i {
|
||||
color: #e6cb6f;
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .add {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
body#product .product-info-box .product-information .product-actions .product-additional-info {
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .add .add-to-cart {
|
||||
background: #e79332;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
color: #f9f7f2;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: "Inter", sans-serif;
|
||||
text-transform: initial;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .add .add-to-cart .material-icons {
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
vertical-align: baseline;
|
||||
margin-right: 3px;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .wishlist-button-add {
|
||||
margin-left: 16px;
|
||||
width: 30px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-quantity .wishlist-button-add i {
|
||||
background-image: url("/img/cms/icons/icon-heart.svg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 0;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart #product-availability {
|
||||
display: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-add-to-cart .product-minimal-quantity {
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-additional-info {
|
||||
display: none;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .product-actions .product-additional-info {
|
||||
margin: 30px 0;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .blockreassurance_product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
margin: 40px 0 0 0;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .blockreassurance_product > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #462d26;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .blockreassurance_product > div .item-product {
|
||||
margin-right: 16px;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .blockreassurance_product > div .item-product svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .blockreassurance_product > div .item-product svg path {
|
||||
fill: transparent !important;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .blockreassurance_product > div .block-title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
body#product .product-info-box .product-info-box-right .product-information .blockreassurance_product > div p {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
body#product .product-description-box {
|
||||
position: relative;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
body#product .product-description-box::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 100svw;
|
||||
transform: translateX(-50%);
|
||||
background: #ffffff;
|
||||
}
|
||||
body#product .tabs {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -380,6 +380,7 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
//* Single Product
|
||||
body#product {
|
||||
#content {
|
||||
ul.product-flags {
|
||||
@@ -421,8 +422,8 @@ body#product {
|
||||
.product-info-box {
|
||||
margin: 0;
|
||||
// background: $cWhite;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 65px;
|
||||
border-radius: 10px;
|
||||
|
||||
#content {
|
||||
@@ -474,83 +475,498 @@ body#product {
|
||||
}
|
||||
}
|
||||
|
||||
.product-information {
|
||||
.product-actions {
|
||||
.product-variants {
|
||||
margin: 25px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
.product-info-box-left {
|
||||
&:hover {
|
||||
.scroll-box-arrows {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.images-container {
|
||||
.js-qv-mask {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.product-images {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.scroll-box-arrows {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 250ms ease-in-out;
|
||||
|
||||
.product-variants-item {
|
||||
.material-icons {
|
||||
line-height: 0;
|
||||
bottom: 45px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ece9e2;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-info-box-right {
|
||||
ul.product-flags {
|
||||
margin-bottom: 24px;
|
||||
|
||||
li.product-flag {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
padding: 3px 8px;
|
||||
min-width: fit-content;
|
||||
min-height: auto;
|
||||
margin-top: 0;
|
||||
list-style: none;
|
||||
font-family: $fInter;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
|
||||
&.new {
|
||||
background: #462d26;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
&.discount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
column-gap: 8px;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
.control-label {
|
||||
span {
|
||||
font-family: $fInter;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 8px;
|
||||
background: #c40000;
|
||||
}
|
||||
}
|
||||
|
||||
&.out_of_stock {
|
||||
background: #462d26;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h1 {
|
||||
color: #462d26;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-family: $fInter;
|
||||
text-transform: initial;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.product-prices {
|
||||
.product-discount {
|
||||
.regular-price {
|
||||
color: #462d26;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: $fInter;
|
||||
line-height: 1;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
.product-price {
|
||||
.current-price {
|
||||
.current-price-value {
|
||||
color: #462d26;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
font-family: $fInter;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tax-shipping-delivery-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gm_omniprice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-information {
|
||||
.product-description {
|
||||
display: none;
|
||||
}
|
||||
.product-actions {
|
||||
.product-variants {
|
||||
margin: 16px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.product-variants-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
// margin: 16px 0;
|
||||
margin: 0;
|
||||
padding: 16px 0;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 10px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #ddd;
|
||||
// padding-bottom: 16px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
top: -1px;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
transition: all 250ms ease-in-out;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition-delay: 400ms;
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin-bottom: 0;
|
||||
&.active {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
> label {
|
||||
margin-bottom: 0;
|
||||
.product-variants-item--wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.control-label-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
&.active {
|
||||
.form-control-select-standard-handler {
|
||||
transform: scale(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-select-standard-handler {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.control-label {
|
||||
color: #462d26;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-family: $fInter;
|
||||
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.control-label-selected {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
// border-radius: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-control-select-custom {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
top: calc(100% + 16px);
|
||||
z-index: 10;
|
||||
|
||||
.custom-select {
|
||||
display: block;
|
||||
padding: 25px;
|
||||
border: none;
|
||||
background: #fff;
|
||||
height: auto;
|
||||
|
||||
ul.custom-dropdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 16px;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 14px;
|
||||
margin: 0;
|
||||
|
||||
color: #110e0c;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-family: $fInter;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #110e0c1a;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.li-checkbox {
|
||||
background: #462d26;
|
||||
border-color: #462d26;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 5.5px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background: #f9f7f2;
|
||||
transform: rotate(-45deg);
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 4.5px;
|
||||
width: 3.5px;
|
||||
height: 2px;
|
||||
background: #f9f7f2;
|
||||
transform: rotate(45deg);
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.li-checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 19px;
|
||||
min-width: 19px;
|
||||
height: 19px;
|
||||
border: 1px solid #d9cebe;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qty {
|
||||
#quantity_wanted {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
// > ul {
|
||||
// margin-bottom: 0;
|
||||
|
||||
.bootstrap-touchspin-up {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
// li {
|
||||
// > label {
|
||||
// margin-bottom: 0;
|
||||
|
||||
.bootstrap-touchspin-down {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-add-to-cart {
|
||||
.product-quantity {
|
||||
.add-to-cart {
|
||||
background: $cGold;
|
||||
border-radius: 10px;
|
||||
// > span {
|
||||
// display: inline-block;
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
#product-availability {
|
||||
i {
|
||||
color: $cGold;
|
||||
.product-add-to-cart {
|
||||
padding: 24px;
|
||||
background: #ece9e2;
|
||||
|
||||
> .control-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.qty {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
|
||||
> .input-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
float: none;
|
||||
border: 1px solid #462d26d9;
|
||||
border-radius: 1px;
|
||||
|
||||
input#quantity_wanted {
|
||||
order: 2;
|
||||
font-size: 14px;
|
||||
font-family: $fInter;
|
||||
font-weight: 500;
|
||||
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 35px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
|
||||
color: #462d26d9;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: $fInter;
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
&.btn {
|
||||
height: 29px;
|
||||
padding: 0 10px;
|
||||
|
||||
&.bootstrap-touchspin-up {
|
||||
order: 3;
|
||||
}
|
||||
&.bootstrap-touchspin-down {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.add {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
.add-to-cart {
|
||||
background: #e79332;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
color: #f9f7f2;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: $fInter;
|
||||
text-transform: initial;
|
||||
|
||||
.material-icons {
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
vertical-align: baseline;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wishlist-button-add {
|
||||
margin-left: 16px;
|
||||
width: 30px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
i {
|
||||
background-image: url('/img/cms/icons/icon-heart.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#product-availability {
|
||||
display: none;
|
||||
}
|
||||
.product-minimal-quantity {
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.product-additional-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-additional-info {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-additional-info {
|
||||
margin: 30px 0;
|
||||
.blockreassurance_product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
margin: 40px 0 0 0;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
color: #462d26;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: $fInter;
|
||||
|
||||
.item-product {
|
||||
margin-right: 16px;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
path {
|
||||
fill: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-description-box {
|
||||
position: relative;
|
||||
margin-bottom: 100px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 100svw;
|
||||
transform: translateX(-50%);
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
@@ -10,4 +10,37 @@ jQuery(function($) {
|
||||
loop: true,
|
||||
});
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
jQuery(document).ready(function ($) {
|
||||
$(document).on('click', '.form-control-select-custom .custom-dropdown li', function () {
|
||||
const $selectedOption = $(this);
|
||||
const $customWrapper = $selectedOption.closest('.form-control-select-custom');
|
||||
const originalSelectId = $customWrapper.data('product-attribute');
|
||||
const $originalSelect = $(`#group_${originalSelectId}`);
|
||||
|
||||
$customWrapper.find('.custom-dropdown li').removeClass('active');
|
||||
$selectedOption.addClass('active');
|
||||
|
||||
$originalSelect.val($selectedOption.data('value')).change();
|
||||
});
|
||||
|
||||
$(document).on('change', '.form-control-select-standard', function () {
|
||||
const $originalSelect = $(this);
|
||||
const originalSelectId = $originalSelect.attr('id').replace('group_', '');
|
||||
const $customWrapper = $(`.form-control-select-custom[data-product-attribute="${originalSelectId}"]`);
|
||||
const value = $originalSelect.val();
|
||||
|
||||
$customWrapper.find('.custom-dropdown li').removeClass('active');
|
||||
$customWrapper
|
||||
.find(`.custom-dropdown li[data-value="${value}"]`)
|
||||
.addClass('active');
|
||||
});
|
||||
|
||||
|
||||
$(document).on('click', '.form-control-select-standard-handler', function () {
|
||||
$(this).parent().toggleClass('active');
|
||||
$(this).parent().parent().parent().toggleClass('active');
|
||||
$(this).parent().siblings('.form-control-select-custom').slideToggle();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
disabled
|
||||
{/if}
|
||||
>
|
||||
<i class="material-icons shopping-cart"></i>
|
||||
<i class="material-icons shopping-cart">+</i>
|
||||
{l s='Add to cart' d='Shop.Theme.Actions'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -92,4 +92,8 @@
|
||||
</p>
|
||||
{/block}
|
||||
{/if}
|
||||
|
||||
{block name='hook_display_reassurance'}
|
||||
{hook h='displayReassurance'}
|
||||
{/block}
|
||||
</div>
|
||||
|
||||
@@ -24,15 +24,6 @@
|
||||
*}
|
||||
{if $product.show_price}
|
||||
<div class="product-prices js-product-prices">
|
||||
{block name='product_discount'}
|
||||
{if $product.has_discount}
|
||||
<div class="product-discount">
|
||||
{hook h='displayProductPriceBlock' product=$product type="old_price"}
|
||||
<span class="regular-price">{$product.regular_price}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{block name='product_price'}
|
||||
<div
|
||||
class="product-price h5 {if $product.has_discount}has-discount{/if}">
|
||||
@@ -66,6 +57,15 @@
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name='product_discount'}
|
||||
{if $product.has_discount}
|
||||
<div class="product-discount">
|
||||
{hook h='displayProductPriceBlock' product=$product type="old_price"}
|
||||
<span class="regular-price">{$product.regular_price}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{block name='product_without_taxes'}
|
||||
{if $priceDisplay == 2}
|
||||
<p class="product-without-taxes">{l s='%price% tax excl.' d='Shop.Theme.Catalog' sprintf=['%price%' => $product.price_tax_exc]}</p>
|
||||
|
||||
@@ -25,54 +25,89 @@
|
||||
<div class="product-variants js-product-variants">
|
||||
{foreach from=$groups key=id_attribute_group item=group}
|
||||
{if !empty($group.attributes)}
|
||||
<div class="clearfix product-variants-item">
|
||||
<span class="control-label">{$group.name}{l s=': ' d='Shop.Theme.Catalog'}
|
||||
{** CUSTOM: hide secont variant label **}
|
||||
{* {foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
{if $group_attribute.selected}{$group_attribute.name}{/if}
|
||||
{/foreach} *}
|
||||
</span>
|
||||
{if $group.group_type == 'select'}
|
||||
<select
|
||||
class="form-control form-control-select"
|
||||
id="group_{$id_attribute_group}"
|
||||
aria-label="{$group.name}"
|
||||
data-product-attribute="{$id_attribute_group}"
|
||||
name="group[{$id_attribute_group}]">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
<option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
{elseif $group.group_type == 'color'}
|
||||
<ul id="group_{$id_attribute_group}">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
<li class="float-xs-left input-container">
|
||||
<label aria-label="{$group_attribute.name}">
|
||||
<input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
|
||||
<span
|
||||
{if $group_attribute.texture}
|
||||
class="color texture" style="background-image: url({$group_attribute.texture})"
|
||||
{elseif $group_attribute.html_color_code}
|
||||
class="color" style="background-color: {$group_attribute.html_color_code}"
|
||||
{/if}
|
||||
><span class="attribute-name sr-only">{$group_attribute.name}</span></span>
|
||||
</label>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
{elseif $group.group_type == 'radio'}
|
||||
<ul id="group_{$id_attribute_group}">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
<li class="input-container float-xs-left">
|
||||
<label>
|
||||
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
|
||||
<span class="radio-label">{$group_attribute.name}</span>
|
||||
</label>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="clearfix product-variants-item">
|
||||
<div class="product-variants-item--wrapper">
|
||||
<div class="control-label-nav">
|
||||
<span class="control-label">
|
||||
{$group.name}{l s=': ' d='Shop.Theme.Catalog'}
|
||||
<br>
|
||||
{** CUSTOM: hide secant variant label **}
|
||||
<span class="control-label-selected">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
{if $group_attribute.selected}{$group_attribute.name}{/if}
|
||||
{/foreach}
|
||||
</span>
|
||||
</span>
|
||||
{if $group.group_type == 'select'}
|
||||
<div class="form-control-select-standard-handler">
|
||||
<img src="/img/cms/icons/arrow-down-brown.svg" alt="">
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{if $group.group_type == 'select'}
|
||||
<select
|
||||
class="form-control form-control-select form-control-select-standard"
|
||||
id="group_{$id_attribute_group}"
|
||||
aria-label="{$group.name}"
|
||||
data-product-attribute="{$id_attribute_group}"
|
||||
name="group[{$id_attribute_group}]">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
<option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
|
||||
<div
|
||||
class="custom-select-wrapper form-control-select-custom"
|
||||
id="group_{$id_attribute_group}_custom"
|
||||
aria-label="{$group.name}"
|
||||
data-product-attribute="{$id_attribute_group}"
|
||||
>
|
||||
<div class="custom-select" data-original-select="group_1">
|
||||
<ul class="custom-dropdown">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
<li
|
||||
data-value="{$id_attribute}"
|
||||
class="{if $group_attribute.selected}active{/if}"
|
||||
>
|
||||
<span class="li-checkbox"></span>
|
||||
{$group_attribute.name}
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{elseif $group.group_type == 'color'}
|
||||
<ul id="group_{$id_attribute_group}">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
<li class="float-xs-left input-container">
|
||||
<label aria-label="{$group_attribute.name}">
|
||||
<input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
|
||||
<span
|
||||
{if $group_attribute.texture}
|
||||
class="color texture" style="background-image: url({$group_attribute.texture})"
|
||||
{elseif $group_attribute.html_color_code}
|
||||
class="color" style="background-color: {$group_attribute.html_color_code}"
|
||||
{/if}
|
||||
><span class="attribute-name sr-only">{$group_attribute.name}</span></span>
|
||||
</label>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
{elseif $group.group_type == 'radio'}
|
||||
<ul id="group_{$id_attribute_group}">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
<li class="input-container float-xs-left">
|
||||
<label>
|
||||
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
|
||||
<span class="radio-label">{$group_attribute.name}</span>
|
||||
</label>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
@@ -52,25 +52,29 @@
|
||||
<meta content="{$product.url}">
|
||||
|
||||
<div class="row product-container js-product-container product-info-box">
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6 px-0 product-info-box-left">
|
||||
{block name='page_content_container'}
|
||||
<section class="page-content" id="content">
|
||||
{block name='page_content'}
|
||||
{include file='catalog/_partials/product-flags.tpl'}
|
||||
|
||||
{block name='product_cover_thumbnails'}
|
||||
{include file='catalog/_partials/product-cover-thumbnails.tpl'}
|
||||
{/block}
|
||||
<div class="scroll-box-arrows">
|
||||
<i class="material-icons left"></i>
|
||||
<i class="material-icons right"></i>
|
||||
<i class="material-icons left">
|
||||
<img src="/img/cms/icons/slider-arrow-left-brown.svg" alt="">
|
||||
</i>
|
||||
<i class="material-icons right">
|
||||
<img src="/img/cms/icons/slider-arrow-right-brown.svg" alt="">
|
||||
</i>
|
||||
</div>
|
||||
|
||||
{/block}
|
||||
</section>
|
||||
{/block}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6 product-info-box-right">
|
||||
{include file='catalog/_partials/product-flags.tpl'}
|
||||
|
||||
{block name='page_header_container'}
|
||||
{block name='page_header'}
|
||||
<h1 class="h1">{block name='page_title'}{$product.name}{/block}</h1>
|
||||
@@ -136,14 +140,11 @@
|
||||
|
||||
</div>
|
||||
|
||||
{block name='hook_display_reassurance'}
|
||||
{hook h='displayReassurance'}
|
||||
{/block}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row product-container js-product-container">
|
||||
<div class="row product-container js-product-container product-description-box">
|
||||
<div class="col-xs-12">
|
||||
{block name='product_tabs'}
|
||||
<div class="tabs">
|
||||
|
||||
Reference in New Issue
Block a user