Files
4WDCSA.co.za/assets/sass/sections/_products.sass
Local Administrator b83134aca3 Initial commit
2025-04-18 10:32:42 +02:00

189 lines
4.8 KiB
Sass

/*******************************************************/
/****************** ## Products Area ******************/
/*******************************************************/
.product-item
margin-bottom: 40px
.image
max-height: 400px
position: relative
border-radius: 7px
margin-bottom: 18px
padding-bottom: 110%
background: $lighter-color
border: 1px solid $border-color
img
+absmiddle()
max-width: 80%
max-height: 80%
.content
h6
margin-bottom: 0
.product-slider
+gapLR(margin, -15px)
.product-item
+gapLR(margin, 15px)
.slick-dots
margin-top: 10px
.shop-shorter
display: flex
flex-wrap: wrap
align-items: center
+res-bl(xl)
margin-right: -10px
.grid-list
display: flex
align-items: center
li
margin-right: 15px
.nice-select
font-size: 14px
max-width: 190px
margin-bottom: 10px
border-radius: 22px
width: calc(50% - 10px)
padding: 1px 35px 1px 20px
border: 1px solid $border-color
&:not(:last-child)
margin-right: 10px
&:after
+size(8px)
right: 20px
margin-top: -5px
.sort-text
font-weight: 500
color: $heading-color
&.style-two
.sort-text
+res-ab(sm)
font-size: 20px
.nice-select
width: auto
font-size: 16px
border-color: black
+res-ab(sm)
max-width: 230px
border-radius: 25px
padding: 4px 45px 4px 25px
/* Product Details */
.preview-images
margin-bottom: 30px
border-radius: 10px
background: $lighter-color
border: 1px solid $border-color
.preview-item
position: relative
padding-bottom: 94%
img
+absmiddle()
max-width: 60%
max-height: 70%
.thumb-images
justify-content: space-between
.thumb-item
position: relative
padding-bottom: 30%
border-radius: 7px
width: calc(33% - 18px)
background: $lighter-color
border: 1px solid $border-color
img
+absmiddle()
max-width: 65%
max-height: 70%
.product-details-content
+res-ab(xl)
margin-top: 55px
max-width: 520px
margin-left: auto
.section-title
h2
margin-bottom: 7px
.ratting
i
font-size: 16px
.price
display: block
@extend %h5
+res-bl(xs)
font-size: 18px
.add-to-cart
display: flex
flex-wrap: wrap
align-items: center
h6
margin-bottom: 0
margin-top: 15px
margin-right: 30px
.theme-btn
margin-top: 15px
input
font-size: 22px
font-weight: 600
max-width: 130px
margin-top: 15px
margin-right: 20px
padding: 10px 30px
border-radius: 25px
background: transparent
border: 1px solid $border-color
.wishlist
align-items: center
display: inline-flex
i
margin-right: 5px
.category-tags li
display: flex
flex-wrap: wrap
align-items: center
b
min-width: 85px
font-weight: 600
margin-right: 5px
margin-bottom: 5px
color: $heading-color
a
margin-bottom: 5px
display: inline-block
&:not(:last-child)
margin-right: 5px
&:after
content: ','
.product-tab
margin-right: -10px
li
margin-right: 10px
margin-bottom: 10px
a
cursor: pointer
font-weight: 600
transition: 0.5s
padding: 10px 35px
border-radius: 30px
display: inline-block
color: $heading-color
border: 1px solid $border-color
+res-bl(md)
font-size: 14px
padding: 7px 20px
i
margin-left: 10px
transform: rotate(-45deg)
&.active
color: white
background: $primary-color
border-color: $primary-color
.tab-content
.list-style-two li
font-size: 16px
font-weight: 400
&:before
+size(20px)
font-size: 10px
line-height: 20px