323 lines
5.3 KiB
SCSS
323 lines
5.3 KiB
SCSS
|
//
|
||
|
// Shop styles //
|
||
|
//
|
||
|
.product-box {
|
||
|
.product-img {
|
||
|
position: relative;
|
||
|
@include transform(translate3d(0,0,0));
|
||
|
overflow: hidden;
|
||
|
.product-img-link {
|
||
|
display: block;
|
||
|
}
|
||
|
img {
|
||
|
@include transform(scale(1));
|
||
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||
|
}
|
||
|
.product-badge-left, .product-badge-right {
|
||
|
position: absolute;
|
||
|
top: 16px;
|
||
|
z-index: 2;
|
||
|
font-size: 14px;
|
||
|
background: $color-black-04;
|
||
|
padding: 8px 11px;
|
||
|
border-radius: 40px;
|
||
|
font: 500 12px $font-family-tertiary;
|
||
|
line-height: 1;
|
||
|
letter-spacing: 1px;
|
||
|
text-transform: uppercase;
|
||
|
* {
|
||
|
color: $color-white;
|
||
|
}
|
||
|
h1,h2,h3,h4,h5,h6 {
|
||
|
margin: 0;
|
||
|
}
|
||
|
&.red {
|
||
|
background: $color-red;
|
||
|
}
|
||
|
&.green {
|
||
|
background: $color-green;
|
||
|
}
|
||
|
}
|
||
|
.product-badge-left {
|
||
|
left: 16px;
|
||
|
}
|
||
|
.product-badge-right {
|
||
|
right: 16px;
|
||
|
}
|
||
|
.add-to-cart {
|
||
|
position: absolute;
|
||
|
right: 16px;
|
||
|
bottom: 16px;
|
||
|
left: 16px;
|
||
|
@include transform(translateY(4px));
|
||
|
z-index: 2;
|
||
|
visibility: hidden;
|
||
|
opacity: 0;
|
||
|
background: $color-white;
|
||
|
padding: 16px;
|
||
|
text-align: center;
|
||
|
@include transition(ease-out 0.16s);
|
||
|
a {
|
||
|
&:not([class*=' button'], [class^='button']) {
|
||
|
color: $color-primary;
|
||
|
font: 500 13px $font-family-tertiary;
|
||
|
letter-spacing: 1px;
|
||
|
text-transform: uppercase;
|
||
|
&:hover, &:focus { color: $color-dark; }
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
&:hover, &:focus {
|
||
|
img {
|
||
|
@include transform(scale(1.04));
|
||
|
}
|
||
|
.add-to-cart {
|
||
|
@include transform(translateY(0));
|
||
|
visibility: visible;
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.product-title {
|
||
|
position: relative;
|
||
|
padding: 24px 0 20px;
|
||
|
h1,h2,h3,h4,h5,h6 {
|
||
|
margin-bottom: 4px;
|
||
|
line-height: 1.4;
|
||
|
}
|
||
|
.price {
|
||
|
span {
|
||
|
display: inline-block;
|
||
|
}
|
||
|
del {
|
||
|
opacity: 0.7;
|
||
|
margin-right: 4px;
|
||
|
}
|
||
|
ins {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.product-carousel-thumbnails {
|
||
|
padding: 6px 0 0;
|
||
|
li {
|
||
|
list-style-type: none;
|
||
|
display: inline-block;
|
||
|
margin-right: 2px;
|
||
|
a {
|
||
|
display: inline-block;
|
||
|
opacity: 0.6;
|
||
|
@include transition(ease-out 0.16s);
|
||
|
img {
|
||
|
max-width: 100px;
|
||
|
}
|
||
|
&:hover {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.product-price {
|
||
|
del {
|
||
|
opacity: 0.7;
|
||
|
margin-right: 8px;
|
||
|
}
|
||
|
ins {
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.product-quantity {
|
||
|
.qnt {
|
||
|
position: relative;
|
||
|
display: inline-block;
|
||
|
width: auto;
|
||
|
margin-right: 30px;
|
||
|
input {
|
||
|
width: 100px;
|
||
|
height: 34px;
|
||
|
border: 0;
|
||
|
padding: 0;
|
||
|
text-align: center;
|
||
|
&::-webkit-outer-spin-button,
|
||
|
&::-webkit-inner-spin-button {
|
||
|
display: none;
|
||
|
-webkit-appearance: none;
|
||
|
margin: 0;
|
||
|
}
|
||
|
&[type=number] {
|
||
|
-moz-appearance: textfield;
|
||
|
}
|
||
|
}
|
||
|
.dec, .inc {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
background: $bg-grey;
|
||
|
width: 34px;
|
||
|
height: 34px;
|
||
|
border-radius: 50%;
|
||
|
color: transparent;
|
||
|
text-align: center;
|
||
|
@include transition(linear 0.1s);
|
||
|
&:before {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
@include transform(translate(-50%,-50%));
|
||
|
background: $color-dark;
|
||
|
width: 11px;
|
||
|
height: 1px;
|
||
|
}
|
||
|
&:hover {
|
||
|
background: $button-grey;
|
||
|
}
|
||
|
}
|
||
|
.dec {
|
||
|
left: 0;
|
||
|
}
|
||
|
.inc {
|
||
|
right: 0;
|
||
|
&:after {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
@include transform(translate(-50%,-50%));
|
||
|
background: $color-dark;
|
||
|
width: 1px;
|
||
|
height: 11px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.product-info-box {
|
||
|
border: 1px solid $border-grey;
|
||
|
padding: 40px;
|
||
|
@include breakpoint-less(md) {
|
||
|
padding: 30px;
|
||
|
}
|
||
|
.nav {
|
||
|
justify-content: center;
|
||
|
margin: 0 -15px 30px;
|
||
|
.nav-item {
|
||
|
margin: 0 15px;
|
||
|
.nav-link {
|
||
|
position: relative;
|
||
|
padding: 0 0 1px;
|
||
|
font-weight: 400;
|
||
|
font-family: $font-family-tertiary;
|
||
|
letter-spacing: -0.2px;
|
||
|
&:before {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
background: $color-dark;
|
||
|
height: 1px;
|
||
|
@include transition(ease-out 0.24s);
|
||
|
@include animation(button-line-out 0.24s ease-out both);
|
||
|
}
|
||
|
&.active {
|
||
|
color: $color-dark;
|
||
|
&:before {
|
||
|
width: 100%;
|
||
|
@include animation(button-line-in 0.24s ease-out both);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.table {
|
||
|
margin: 0;
|
||
|
border-collapse: separate;
|
||
|
border-spacing: 0;
|
||
|
border: 0;
|
||
|
font-size: 15px;
|
||
|
tr {
|
||
|
&:first-child {
|
||
|
th, td {
|
||
|
border: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
th, td {
|
||
|
border-top: 1px solid $border-grey;
|
||
|
padding: 14px 20px 14px 0;
|
||
|
}
|
||
|
th {
|
||
|
font-weight: $font-weight-regular;
|
||
|
}
|
||
|
td {
|
||
|
color: $color-primary;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.cart-table {
|
||
|
margin: 0;
|
||
|
border-collapse: separate;
|
||
|
border-spacing: 0;
|
||
|
border: 0;
|
||
|
font-size: 14px;
|
||
|
thead {
|
||
|
th,td {
|
||
|
border-bottom: 1px solid $border-grey;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
}
|
||
|
th, td {
|
||
|
border-top: 0;
|
||
|
border-bottom: 1px solid $border-grey;
|
||
|
padding: 20px 20px 20px 0;
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
th {
|
||
|
font-weight: $font-weight-regular;
|
||
|
}
|
||
|
td {
|
||
|
color: $color-primary;
|
||
|
}
|
||
|
.product-thumbnail {
|
||
|
img {
|
||
|
max-width: 100px;
|
||
|
}
|
||
|
}
|
||
|
.product-quantity {
|
||
|
.qnt {
|
||
|
margin: 0;
|
||
|
input {
|
||
|
margin: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.cart-totals {
|
||
|
margin: 0;
|
||
|
border-collapse: separate;
|
||
|
border-spacing: 0;
|
||
|
border: 0;
|
||
|
font-size: 14px;
|
||
|
tr {
|
||
|
&:first-child {
|
||
|
th, td {
|
||
|
border: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
th, td {
|
||
|
border-top: 1px solid $border-grey;
|
||
|
padding: 20px 20px 20px 0;
|
||
|
}
|
||
|
th {
|
||
|
font-weight: $font-weight-regular;
|
||
|
}
|
||
|
td {
|
||
|
color: $color-primary;
|
||
|
}
|
||
|
}
|