D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
dateitor
/
public_html
/
resources
/
assets
/
scss
/
whatsappp_store
/
Filename :
beauty-products.scss
back
Copy
$primary: #c29c77 !default; $bg-light: #faf8f4 !default; $bg-gray: #9999991a !default; $gray-100: #a5a4b1 !default; $gray-200: #999999 !default; $gray-300: #e6e6ec !default; $gray-400: #e5e3e4 !default; $white: #ffffff !default; $black: #000000 !default; $black-100: #292929 !default; .category-section { .category-item { border: 1px solid $gray-200; background-color: $white; border-radius: 15px; padding: 14px 30px; display: flex; align-items: center; gap: 20px; height: 100%; @media (max-width: 991px) { padding: 10px 20px; gap: 16px; } .category-img { width: 50px; height: 50px; min-width: 50px; @media (max-width: 991px) { width: 40px; height: 40px; min-width: 40px; } } h3 { word-break: break-all; } } } .product-section { margin-bottom: 190px; @media (max-width: 575px) { margin-bottom: 50px; } .product-card { border-radius: 20px; overflow: hidden; .product-img { width: 100%; img { aspect-ratio: 1.21; } } .product-details { background-color: $white; padding: 15px 10px; border: 1px solid $black; border-radius: 0 0 20px 20px; border-top: 0; } } } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; src: url('/assets/fonts/Montserrat-Regular.ttf') format("truetype"); font-display: swap; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; src: url('/assets/fonts/Montserrat-Medium.ttf') format("truetype"); font-display: swap; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; src: url('/assets/fonts/Montserrat-SemiBold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; src: url('/assets/fonts/Montserrat-Bold.ttf') format("truetype"); font-display: swap; } .text-gray-200 { color: $gray-200 !important; } body { font-family: "Montserrat"; font-weight: 400 !important; -webkit-font-smoothing: antialiased; } .btn { border-radius: 10px; font-weight: 600; padding: 8px 12px; font-size: 14px; transition: all 0.3s ease-in-out; &:focus { box-shadow: none !important; outline: none !important; } } .btn-primary { color: $white; background-color: $primary; border: 1px solid $primary; &:hover, &:focus, &.active { color: $primary; background-color: $white; border: 1px solid $primary; } } .section-heading { margin-bottom: 30px; @media (max-width: 575px) { margin-bottom: 20px; } h2 { font-size: 32px; font-weight: 600; @media (max-width: 991px) { font-size: 28px; } @media (max-width: 575px) { font-size: 24px; } } } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; @media (max-width: 575px) { margin-bottom: 20px; } } .mb-40 { margin-bottom: 40px; @media (max-width: 575px) { margin-bottom: 30px; } } .px-50 { padding-left: 50px; padding-right: 50px; @media (max-width: 991px) { padding-left: 30px; padding-right: 30px; } @media (max-width: 575px) { padding-left: 15px; padding-right: 15px; } } .pt-30 { padding-top: 30px; } .ps-45 { padding-left: 45px !important; } .fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fs-14 { font-size: 14px; @media (max-width: 575px) { font-size: 13px; } } .fs-15 { font-size: 15px; @media (max-width: 575px) { font-size: 13px; } } .fs-16 { font-size: 16px; @media (max-width: 575px) { font-size: 14px; } } .fs-18 { font-size: 18px; @media (max-width: 575px) { font-size: 16px; } } .fs-20 { font-size: 20px; @media (max-width: 991px) { font-size: 18px; } @media (max-width: 575px) { font-size: 16px; } } .fs-24 { font-size: 24px; @media (max-width: 991px) { font-size: 18px; } @media (max-width: 575px) { font-size: 16px; } } .fs-28 { font-size: 28px; @media (max-width: 991px) { font-size: 24px; } @media (max-width: 575px) { font-size: 20px; } } .fs-30 { font-size: 30px; @media (max-width: 991px) { font-size: 28px; } @media (max-width: 575px) { font-size: 24px; } } a { text-decoration: none; } .main-content { max-width: 1300px; min-height: 100vh; background-color: $bg-light; position: relative; .bg-vector { position: absolute; z-index: 0; &.bg-vector-1 { top: 0; left: 0; } &.bg-vector-2 { top: 38%; left: 0; } &.bg-vector-3 { top: 41%; right: 0; } &.bg-vector-4 { top: 60%; left: 0; } &.bg-vector-5 { top: 87%; left: 0; } &.bg-vector-6 { top: 85%; right: 0; } } } .object-fit-cover { object-fit: cover; } .view-more-btn { width: fit-content; background-color: #c29c7733; color: $black; box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25); padding: 5px; border-radius: 30px; .text { padding: 10px 20px; background-color: $white; color: $black; border-radius: 30px; font-size: 14px; display: flex; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25); } &:hover { background-color: $primary; color: $white; .text { color: $primary; } } } .slick-dots { li { width: 8px; height: 8px; padding: 0; button { width: 8px; height: 8px; padding: 0; border-radius: 8px; background-color: $gray-200; &:before { display: none; } } &.slick-active { width: 24px; height: 8px; button { width: 24px; height: 8px; background-color: $primary; } } } } .slick-arrow { width: 40px; min-width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid $primary; background-color: $white; color: $primary; position: absolute; top: -70px; @media (max-width: 991px) { width: 36px; min-width: 36px; height: 36px; top: -66px; } svg { fill: $primary; } &:hover, &:focus, &.active { background-color: $primary; color: $white; svg { fill: $white; } } &.prev-arrow { left: auto; right: 66px; @media (max-width: 991px) { right: 60px; } } &.next-arrow { right: 10px; } } .navbar { padding-top: 15px; padding-bottom: 15px; .navbar-brand { width: 50px; min-width: 50px; height: 50px; border-radius: 10px; overflow: hidden; @media (max-width: 575px) { width: 40px; min-width: 40px; height: 40px; } } .language-dropdown { .dropdown-item { padding: 4px 10px; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; &:hover{ background-color: $primary !important; color: $white !important; } .flag { width: 20px; height: 20px; min-width: 20px; border-radius: 4px; } } .flag { width: 26px; height: 26px; min-width: 26px; border-radius: 5px; @media (max-width: 991px) { width: 20px; height: 20px; min-width: 20px; } } .dropdown-btn { border: none; background-color: transparent; font-weight: 500; font-size: 16px; padding: 0 26px 0 0; display: flex; align-items: center; gap: 8px; @media (max-width: 991px) { font-size: 14px; gap: 6px; padding: 0 22px 0 0; } } .dropdown-arrow { position: absolute; right: 4px; top: 0; bottom: 0; margin: auto; pointer-events: none; @media (max-width: 991px) { width: 10px; } } .dropdown-menu { right: 0; left: auto; min-width: 84px; } } .add-to-cart-btn { width: 50px; height: 50px; min-width: 50px; border-radius: 10px; background-color: #29292912; border: none; svg { fill: $black-100; } @media (max-width: 991px) { width: 40px; min-width: 40px; height: 40px; svg { width: 22px; } } @media (max-width: 360px) { width: 35px; min-width: 35px; height: 35px; svg { width: 21px; } } } } footer { padding: 13px 30px; background-color: $primary; color: $white; } .item-details-section { .item-details-card { background-color: $white; box-shadow: 0 2px 10px 0 #00000040; padding: 25px 20px; @media (max-width: 575px) { padding: 15px; } .details-img { aspect-ratio: 1; } .slider-nav { margin-left: -10px; margin-right: -8px; } .thumbnail-img { aspect-ratio: 1; cursor: pointer; margin: 0 10px; @media (max-width: 360px) { margin: 0 6px; } } } } .recommended-product-section { margin-bottom: 285px; @media (max-width: 575px) { margin-bottom: 50px; } .product-slider { margin-left: -10px; margin-right: -10px; .slick-slide { padding: 0 10px; .product-card { border-radius: 20px; overflow: hidden; padding: 10px; background-color: #9999991a; .product-img { width: 100%; border-radius: 5px; overflow: hidden; border: 1px solid $gray-300; img { aspect-ratio: 1.63; } } .product-details { padding-top: 10px; } } } } } .items-section { margin-bottom: 285px; @media (max-width: 575px) { margin-bottom: 50px; } .items-tabs { padding: 20px 12px; border-radius: 10px; background-color: #9999991a; .form-control { border-radius: 6px; background-color: $white; border: 1px solid $gray-100; font-size: 14px; font-weight: 600; color: $gray-200; line-height: normal; padding: 10px 15px; &::placeholder { color: $gray-200; } &:focus { box-shadow: none; outline: none; } } .apply-btn { border-radius: 6px; } .heading-text { position: relative; h3 { font-size: 26px; font-weight: 700; @media (max-width: 991px) { font-size: 22px; } @media (max-width: 575px) { font-size: 20px; } } &::after { position: absolute; content: ""; width: 50px; height: 1px; bottom: -5px; left: 0; border: 1px solid $black; border-radius: 2px; } } .form-check-input { box-shadow: none !important; cursor: pointer; &:focus { border-color: $primary; } &:checked { background-color: $primary; border-color: $primary; } } .category-item { border: none; background-color: transparent; box-shadow: none !important; border-top: 1px solid #9996 !important; &:last-of-type { border-bottom: 1px solid #9996 !important; } .category-button { padding: 10px 20px 10px 0px; font-size: 16px; font-weight: 500; color: $black; display: flex; border: none !important; align-items: center; gap: 20px; background-color: transparent; box-shadow: none !important; &:focus { box-shadow: none !important; outline: none !important; } .category-category-img { width: 25px; height: 25px; min-width: 25px; } } } } .item-card { border-radius: 20px; overflow: hidden; padding: 10px; background-color: #9999991a; .item-img { width: 100%; border-radius: 5px; overflow: hidden; border: 1px solid $gray-300; img { aspect-ratio: 1.63; } } .item-details { padding-top: 10px; } } .form-control { background-color: #9999991a; border: 1px solid $gray-200; border-radius: 10px; color: $gray-200; font-size: 16px; line-height: 1; font-weight: 600; padding: 12px 20px; &::placeholder { color: $gray-200; } &:focus { box-shadow: none; } } .search-icon { position: absolute; top: 10px; left: 10px; margin: auto; } .pagination { gap: 20px; } .page-item { .page-link { border: none; background-color: transparent; color: $black; width: 45px; height: 45px; min-width: 45px; border-radius: 10px; padding: 0; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; box-shadow: none !important; @media (max-width: 991px) { font-size: 16px; width: 40px; height: 40px; min-width: 40px; } @media (max-width: 575px) { font-size: 14px; width: auto; height: auto; min-width: auto; border: none !important; } &.prev { margin-right: 50px; @media (max-width: 575px) { margin-right: 10px; } &:hover { background-color: transparent; color: $black; } } &.next { margin-left: 50px; @media (max-width: 575px) { margin-left: 10px; } &:hover { background-color: transparent; color: $black; } } &:hover, &.active { color: $white; background-color: $primary; } } &.disabled { .page-link { color: $gray-200; } } } } .serach-dropdown { background-color: #9999991a; border: 1px solid $gray-200; border-radius: 10px; color: $gray-200; font-size: 16px; line-height: 1; font-weight: 600; padding: 12px 20px; &:after { position: absolute; content: ""; right: 20px; top: 0; bottom: 0; margin: auto; background-image: url("/assets/img/whatsapp_stores/beauty_products/accordion-arrow.png"); width: 10px; background-repeat: no-repeat; background-position: center; } } .category-button { transition: .3s all ease-in-out; &:hover { color: $primary !important; } } .modal { .modal-dialog { max-width: 1000px; padding: 12px; .modal-content { padding: 20px; border-radius: 15px; border: none; box-shadow: 0 2px 10px #00000040; @media (max-width: 575px) { margin: 0; } .modal-body { table { white-space: nowrap; td, th { vertical-align: middle; padding: 10px; &:first-of-type { padding-left: 0; } } tbody { td { &:last-of-type { padding-right: 20px; width: 100px; } } } tfoot { tr { #grandTotal { position: relative; &::after { position: absolute; content: ""; top: 0; right: 0; width: 85px; height: 1px; border-top: 1px solid $gray-200; } } } } .product-img { width: 60px; height: 60px; min-width: 60px; overflow: hidden; @media (max-width: 575px) { width: 40px; height: 40px; min-width: 40px; } } .minus-btn, .plus-btn, .count-btn { width: 30px; height: 30px; min-width: 30px; border-radius: 10px; background-color: $gray-400; display: flex; align-items: center; justify-content: center; font-size: 14px; } } } } } } .modal-backdrop { background-color: $white; opacity: 0.9; } .active-category { color: $primary !important; } .pagination { gap: 20px; } .addToCartBtn { width: 160px; height: 42px; } .btn-primary.disabled, .btn-primary:disabled { background-color: $primary !important; border-color: $primary !important; } .page-item.active .page-link { background-color: $primary !important; /* Change to your desired color */ border-color: $primary !important; color: $white !important; } .dropdown-item{ &:active , &:hover , &.active{ background-color: $primary !important; color: $white !important; } }