628 lines
12 KiB
SCSS
628 lines
12 KiB
SCSS
/**
|
|
* Product images container styles
|
|
* Used on product page
|
|
*/
|
|
.images-container {
|
|
display: flex;
|
|
.product-cover {
|
|
position: relative;
|
|
}
|
|
.product-images {
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
flex-basis: 15%;
|
|
opacity: 0;
|
|
position: relative;
|
|
.swiper-container {
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.swiper-button-prev, .swiper-button-next {
|
|
top: -32px;
|
|
left: 50%;
|
|
}
|
|
.swiper-button-next {
|
|
top: auto;
|
|
bottom: -32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product gallery's thumbnails style
|
|
* Used with horizontal and vertical galleries
|
|
*/
|
|
.thumb-container {
|
|
img {
|
|
cursor: pointer;
|
|
background: $gray-100;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0);
|
|
transition: all 0.3s ease-in-out;
|
|
&.selected, &:hover {
|
|
background: $white;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
|
|
}
|
|
&.selected {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Button zoom styles
|
|
* Used in product zoom modal(product page and quick view)
|
|
*/
|
|
.layer {
|
|
position: absolute;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
z-index: 6;
|
|
top: 10px;
|
|
i {
|
|
font-size: 26px;
|
|
line-height: 1;
|
|
}
|
|
&:hover {
|
|
color: $gray-800;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product label's styles
|
|
* Product page and quick view popup
|
|
*/
|
|
.product-details-top {
|
|
font-size: 12px;
|
|
|
|
> div {
|
|
text-transform: uppercase;
|
|
margin-bottom: 10px;
|
|
color: $white;
|
|
font-weight: 500;
|
|
letter-spacing: $letter-spacing-1;
|
|
|
|
label {
|
|
color: $white;
|
|
margin-right: 5px;
|
|
}
|
|
span {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Override price's styles
|
|
* Product page and quick view
|
|
*/
|
|
#product-card, #quickview-product-card {
|
|
.product-name {
|
|
font: 300 34px/40px $font-family-base;
|
|
@include media-breakpoint-up(xl) {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
.product-prices {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
.product-price-lg {
|
|
&:not(.with-discount) {
|
|
padding-top: 1px;
|
|
padding-bottom: 13px;
|
|
}
|
|
.tax-shipping-delivery-label {
|
|
.delivery-information {
|
|
padding: 0 0 0 2px;
|
|
&::before {
|
|
content: "-";
|
|
padding: 0 2px 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.daydeal-box {
|
|
margin-top: 20px;
|
|
padding-left: 80px;
|
|
padding-right: 80px;
|
|
}
|
|
}
|
|
.product-description-short {
|
|
font: 300 13px/20px $font-family-base;
|
|
color: $gray-61;
|
|
}
|
|
.variant-links {
|
|
.product-variants-item {
|
|
a, label {
|
|
&:not(.color) {
|
|
width: auto;
|
|
height: auto;
|
|
font: 300 18px/20px $font-family-base;
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.social-sharing {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
#product-card {
|
|
.social-sharing {
|
|
margin-top: 30px;
|
|
@include media-breakpoint-up(xl) {
|
|
margin-top: 70px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#quickview-product-card {
|
|
.product-prices .daydeal-box {
|
|
width: 100%;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
.qty {
|
|
max-width: 160px;
|
|
.input-group {
|
|
height: 70px;
|
|
}
|
|
.form-control {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
}
|
|
.input-group-btn-vertical {
|
|
.bootstrap-touchspin-up {
|
|
right: 5px;
|
|
}
|
|
.bootstrap-touchspin-down {
|
|
left: 5px;
|
|
}
|
|
}
|
|
}
|
|
.product-quantity .product-add-to-cart-wrapper {
|
|
flex-wrap: wrap;
|
|
@include media-breakpoint-up(lg){
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.product-quantity {
|
|
margin-bottom: 20px;
|
|
.product-add-to-cart-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.qty {
|
|
max-width: 160px;
|
|
margin-bottom: 10px;
|
|
.input-group {
|
|
height: 70px;
|
|
}
|
|
.form-control {
|
|
text-align: center;
|
|
color: $black;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
}
|
|
.input-group-btn-vertical {
|
|
position: static;
|
|
.bootstrap-touchspin-up, .bootstrap-touchspin-down {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 18px;
|
|
}
|
|
.bootstrap-touchspin-up {
|
|
right: 5px;
|
|
left: auto;
|
|
}
|
|
.bootstrap-touchspin-down {
|
|
left: 5px;
|
|
right: auto;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
max-width: 226px;
|
|
.input-group {
|
|
height: 94px;
|
|
}
|
|
.form-control {
|
|
padding-left: 60px;
|
|
padding-right: 60px;
|
|
}
|
|
.input-group-btn-vertical {
|
|
.bootstrap-touchspin-up {
|
|
right: 25px;
|
|
}
|
|
.bootstrap-touchspin-down {
|
|
left: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.add {
|
|
margin-bottom: 10px;
|
|
margin-left: -1px;
|
|
.add-to-cart {
|
|
font-size: 18px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(sm) {
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-additional-info {
|
|
.jx-wishlist-button, .compare-button {
|
|
display: inline-block;
|
|
position: relative;
|
|
font: 500 13px/16px $font-family-base;
|
|
letter-spacing: $letter-spacing;
|
|
padding-left: 30px;
|
|
text-transform: uppercase;
|
|
margin-top: 10px;
|
|
i {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
.jx-wishlist-button + .compare-button, .compare-button + .jx-wishlist-button {
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product alert's styles
|
|
* Product page and quick view
|
|
*/
|
|
#product-availability {
|
|
.product-available {
|
|
color: $green;
|
|
}
|
|
.product-unavailable {
|
|
color: $red;
|
|
}
|
|
.product-last-items {
|
|
color: $orange;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product combination's styles
|
|
* Product page and quick view
|
|
*/
|
|
.product-variants {
|
|
.product-variants-item {
|
|
margin-bottom: 13px;
|
|
h3 {
|
|
font: 300 13px/16px $font-family-base;
|
|
}
|
|
}
|
|
.custom-select {
|
|
width: 250px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product customization's styles
|
|
* Product page and quick view
|
|
*/
|
|
.product-customization {
|
|
.product-customization-item {
|
|
margin-bottom: 0;
|
|
textarea {
|
|
height: 88px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product social sharing button styles
|
|
* Product page and quick view
|
|
*/
|
|
.social-sharing {
|
|
> ul > li {
|
|
> a {
|
|
i {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
&:not(:last-child) {
|
|
margin-right: 20px;
|
|
@include media-breakpoint-up(xl) {
|
|
margin-right: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product tab's styles
|
|
* Product page and quick view
|
|
*/
|
|
.tabs.product-tabs {
|
|
.nav-tabs {
|
|
border: none;
|
|
.nav-item {
|
|
margin-bottom: 0;
|
|
}
|
|
.nav-link {
|
|
padding: 0;
|
|
border: none;
|
|
font-weight: 300;
|
|
font-size: 24px;
|
|
line-height:1.25;
|
|
font-family: $font-family-base;
|
|
color: $black;
|
|
text-transform: uppercase;
|
|
letter-spacing: $letter-spacing-xs;
|
|
&:hover, &.active {
|
|
color: $brand-primary;
|
|
}
|
|
&.active {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
.nav-link {
|
|
position: relative;
|
|
font-size: 18px;
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: $black;
|
|
transition: all 0.3s ease-in-out;
|
|
opacity: 0;
|
|
}
|
|
&:hover, &.active {
|
|
color: $black;
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.active {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.nav-item + .nav-item {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(lg){
|
|
.nav-item + .nav-item {
|
|
margin-left: 30px;
|
|
}
|
|
.nav-link {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
.nav-item + .nav-item {
|
|
margin-left: 40px;
|
|
}
|
|
.nav-link {
|
|
font-size: 20px;
|
|
letter-spacing: $letter-spacing-1;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(xxl) {
|
|
.nav-item + .nav-item {
|
|
margin-left: 75px;
|
|
}
|
|
.nav-link {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
background: $brand-primary-lighten;
|
|
position: relative;
|
|
margin-top: 30px;
|
|
padding-top: 40px;
|
|
padding-bottom: 20px;
|
|
&:before, &:after {
|
|
position: absolute;
|
|
content: '';
|
|
background: $brand-primary-lighten;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 10000px;
|
|
z-index: -1;
|
|
}
|
|
&:before {
|
|
right: 99%;
|
|
}
|
|
&:after {
|
|
left: 99%;
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
padding-top: 60px;
|
|
padding-bottom: 60px;
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
padding-top: 110px;
|
|
padding-bottom: 110px;
|
|
}
|
|
}
|
|
|
|
.tab-pane {
|
|
.product-description {
|
|
h3 {
|
|
font: 500 18px/20px $font-family-base;
|
|
}
|
|
p {
|
|
font: 300 13px/24px $font-family-base;
|
|
}
|
|
ul {
|
|
margin-bottom: 0;
|
|
> li {
|
|
font: 300 13px/24px $font-family-base;
|
|
+ li {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
.marker-list {
|
|
> li {
|
|
position: relative;
|
|
padding-left: 14px;
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 50%;
|
|
background: $black;
|
|
left: 0;
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|
|
* + h3 {
|
|
margin-top: 50px;
|
|
}
|
|
.product-image-description {
|
|
> img {
|
|
border: solid 11px $white;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
> img {
|
|
border-width: 18px;
|
|
}
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
position: absolute;
|
|
bottom: -22px;
|
|
right: 0;
|
|
z-index: 3;
|
|
> img {
|
|
border-width: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@include media-breakpoint-down(sm) {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
padding: 0;
|
|
margin-bottom: 30px;
|
|
> a {
|
|
display: inline-block;
|
|
font: 300 22px/26px $font-family-base;
|
|
color: $black;
|
|
text-transform: uppercase;
|
|
letter-spacing: $letter-spacing-xs;
|
|
&:not(.collapsed) {
|
|
color: $brand-primary;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product pack
|
|
* Product page
|
|
*/
|
|
.product-pack {
|
|
.pack-miniature {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
.product-thumbnail {
|
|
width: 40%;
|
|
max-width: 89px;
|
|
margin-right: 19px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Product details
|
|
* Product page
|
|
*/
|
|
.product-features {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
@include media-breakpoint-up(xl) {
|
|
max-width: 800px;
|
|
}
|
|
> dl.data-sheet {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
justify-content: space-between;
|
|
|
|
dd.value,
|
|
dt.name {
|
|
flex: 0 0 50%;
|
|
font-weight: normal;
|
|
background: rgba($brand-primary, 0.2);
|
|
border: 1px solid rgba($brand-primary, 0.03);
|
|
padding: 10px 30px;
|
|
margin-bottom: 0;
|
|
word-break: normal;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
&:nth-of-type(even) {
|
|
background: $brand-primary-lighten;
|
|
border-color: $brand-primary-lighten;
|
|
}
|
|
}
|
|
dt.name {
|
|
text-align: right;
|
|
position: relative;
|
|
color: $white;
|
|
border-right: none;
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
border-right: 1px solid $gray-300;
|
|
height: calc(100% - 20px);
|
|
position: absolute;
|
|
right: 0;
|
|
top: 10px;
|
|
}
|
|
}
|
|
dd.value {
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|