laravelEcomm/public/sass/_product.scss
2024-07-04 10:19:45 +05:45

254 lines
4.1 KiB
SCSS

/*---------------------
Product
-----------------------*/
.product {
padding-top: 0;
padding-bottom: 60px;
}
.filter__controls {
text-align: center;
margin-bottom: 45px;
li {
color: #b7b7b7;
font-size: 24px;
font-weight: 700;
list-style: none;
display: inline-block;
margin-right: 88px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&.active {
color: $heading-color;
}
}
}
.product__item {
overflow: hidden;
margin-bottom: 40px;
&.sale {
.product__item__pic {
.label {
color: $white-color;
background: $heading-color;
}
}
.product__item__text {
.rating {
i {
color: #f7941d;
&:nth-last-child(1) {
color: #b7b7b7;
}
}
}
}
}
&:hover {
.product__item__pic {
.product__hover {
right: 20px;
opacity: 1;
}
}
.product__item__text {
a {
top: 22px;
opacity: 1;
visibility: visible;
}
h6 {
opacity: 0;
}
.product__color__select {
opacity: 1;
}
}
}
}
.product__item__pic {
height: 260px;
position: relative;
background-position: center center;
.label {
color: $heading-color;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
padding: 4px 15px 2px;
background: $white-color;
position: absolute;
left: 0;
top: 20px;
}
.product__hover {
position: absolute;
right: -200px;
top: 20px;
@include transition(all, .8s);
li {
list-style: none;
margin-bottom: 10px;
position: relative;
&:hover {
span {
opacity: 1;
visibility: visible;
}
}
span {
color: $white-color;
background: $heading-color;
display: inline-block;
padding: 4px 10px;
font-size: 12px;
position: absolute;
left: -78px;
top: 5px;
z-index: 1;
opacity: 0;
visibility: hidden;
@include transition(all, .3s);
&:after {
position: absolute;
right: -2px;
top: 5px;
height: 15px;
width: 15px;
background: $heading-color;
content: "";
transform: rotate(45deg);
z-index: -1;
}
}
img {
background: $white-color;
padding: 10px;
display: inline-block;
}
}
}
}
.product__item__text {
padding-top: 25px;
position: relative;
a {
font-size: 15px;
color: $primary-color;
font-weight: 700;
position: absolute;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
@include transition(all, .3s);
}
h6 {
color: $heading-color;
font-size: 15px;
font-weight: 600;
margin-bottom: 5px;
@include transition(all, .3s);
}
.rating {
margin-bottom: 6px;
i {
font-size: 14px;
color: #b7b7b7;
margin-right: -5px;
}
}
h5 {
color: #0d0d0d;
font-weight: 700;
}
.product__color__select {
position: absolute;
right: 0;
bottom: 0;
opacity: 0;
@include transition(all, .5s);
label {
display: inline-block;
height: 12px;
width: 12px;
background: #5e64d1;
border-radius: 50%;
margin-bottom: 0;
margin-right: 5px;
position: relative;
cursor: pointer;
&.black {
background: #404a47;
}
&.grey {
background: #d5a667;
}
&.active {
&:after {
opacity: 1;
}
}
&:after {
position: absolute;
left: -3px;
top: -3px;
height: 18px;
width: 18px;
border: 1px solid #b9b9b9;
content: "";
border-radius: 50%;
opacity: 0;
}
input {
position: absolute;
visibility: hidden;
}
}
}
}