@include BLOCK { .swiper-pagination-bullet:after { content: ""; background: #000; height: 2px; display: block; position: absolute; bottom: 0; left: 0; width: 100%; } /*.swiper-pagination-bullets:hover .swiper-pagination-bullet { opacity: 1 !important; }*/ .icSwipperB:hover .swiper-pagination-bullet { opacity: 1 !important; } .icSwipperB { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .icslie .swiper-pagination-bullets { position: absolute; left: 0; bottom: 0; z-index: 2; /*height: 100%;*/ display: flex !important; /*position: absolute; left: 0; bottom: 3px; width: 100%; z-index: 9999;*/ @media (max-width:($mdScreen - 1)) { display: none; } } .icslie .swiper-pagination-bullet { /*width: 13px !important; height: 13px !important; margin-left: 5px !important; margin-right: 5px !important; background: #fff !important; border: 1px solid #fff; opacity: 0.4;*/ /*height: 100% !important;*/ width: 25% !important; opacity: 0; flex: 1; position: relative; border: none; background: none; } .icslie .swiper-pagination-bullet-active { background: transparent !important; &::after { background: #fff; } } .swipperhover-pagination { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; width: 100%; z-index: 2; @media(max-width:767px){ display: none; } } .swipperhover-pagination>a { display: block; height: 100%; flex: 1; } .block-title { font-size: 28px; font-weight: 500; margin-bottom: 20px; @media (max-width:($mdScreen - 1)) { font-size: 20px; } } .block-title:not(.no-line)::after { display: none; } .product-item { .discounted-badge { width: 40px; height: 25px; z-index: 2; font-size: 15px; line-height: 25px; font-weight: 400; background: #003865; margin-right: 10px; @include align-items-center; @include justify-content-center; &:not(.d-none) { @include d-flex; } &.discounted-badge { [dir="rtl"] & { left: auto; right: 10px; } } @media (max-width:767px) { font-size: 11px; margin-right: 5px; width: 30px; height: 20px; line-height: 20px; } } .brand-title { font-size: 12px; margin-bottom: 5px; line-height: 1.3; @media (min-width:$mdScreen) { font-size: 13px; margin-bottom: 10px; } } .product-title { font-size: 15px; margin-bottom: 5px; line-height: 1.3; color: #000; padding: 0; @include line-clamp(2); @media (min-width:$mdScreen) { font-size: 18px; margin-bottom: 10px; } @media (max-width:767px) { font-size: 13px; } } .product-detail-card { position: relative; &:not(.large) { padding-bottom: 55px; @media (max-width:767px) { padding-bottom: 35px; } } &.large { padding-bottom: 125px; @media (min-width:$mdScreen) { padding-bottom: 165px; } } .product-bottom-line { position: absolute; left: 0; right: 0; bottom: 0; padding: 0; } } .product-price-wrapper { font-size: 13px; line-height: 20px; @media (min-width:$mdScreen) { font-size: 17px; line-height: 25px; } @media (min-width:$lgScreen) { font-size: 18px; } .current-price { color: $textColor; } .product-discounted-price { color: #000; [dir="rtl"] & { margin-right: 0; margin-left: 5px; } @media (min-width:$mdScreen) { font-size: 15px; [dir="rtl"] & { margin-right: 0; margin-left: 5px; } } @media (min-width:$lgScreen) { font-size: 17px; [dir="rtl"] & { margin-left: 10px; } } &:not(.d-none)+.current-price { color: #000; font-weight: 400; @media (max-width:767px) { font-size: 13px; } } } } .product-buttons { a { color: $textColor; text-align: center; width: 30px; height: 30px; line-height: 28px; font-size: 14px; &:not(:last-of-type) { margin-right: 5px; } &:hover { box-shadow: 1px 2px 3px rgba(0, 0, 0, .08); } &.add-favourite-btn.fav-added { color: $textPrimary; } &.add-to-compare-btn.active { color: $textPrimary; } @media (min-width:$mdScreen) { width: 35px; height: 35px; line-height: 33px; font-size: 16px; &:not(:last-of-type) { margin-right: 10px; } } } } .variant-wrapper { .sub-button-item { padding: 4px 8px; color: $textColor; width: auto; text-align: center; font-size: 12px; white-space: nowrap; &.selected { border-color: $borderPrimary !important; } &.passive { opacity: .5; -webkit-filter: grayscale(100%); filter: grayscale(100%); span { text-decoration: line-through; } } } .sub-select-item { height: 32px; padding-left: 8px; padding-right: 25px; font-size: 12px; @media (min-width:$mdScreen) { height: 38px; padding-right: 30px; } .passive { color: $textLight; } } } .out-of-stock { @include d-flex; @include justify-content-center; @include align-items-center; bottom: 10px; left: 10px; right: 10px; height: 35px; font-size: 10px; font-weight: bold; } &:hover { &>.bg-white { border-color: $borderPrimary !important; } .image-wrapper { border-color: transparent !important; } .product-buttons a { color: $textPrimary; } } } .showcase-tab-titles { overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; &::-webkit-scrollbar { @include scrollbar(3px, 3px, $bgLight); } &::-webkit-scrollbar-button { display: none; } &::-webkit-scrollbar-thumb { background-color: $bgPrimary; } } .compare-selected { color: $textColor; font-size: 12px; cursor: pointer; position: relative; border-radius: 4px 4px 0 0; min-width: 144px; &>a { padding: 8px; } &:hover { background: $bgLight; .compare-hover { display: block !important; } } .compare-hover { position: absolute; top: 100%; right: 0; left: 0; padding: 10px; border-radius: 0 0 4px 4px; background: $bgLight; z-index: 2; .compare-list { margin: 0 -5px 10px -5px; div { position: relative; padding: 0 5px; width: 25%; i { pointer-events: auto; position: absolute; right: -2px; top: -4px; width: 8px; height: 8px; cursor: pointer; font-size: 6px; background: $bgPrimary; border-radius: 50%; text-align: center; line-height: 8px; color: $textWhite; z-index: 2; [dir="rtl"] & { right: auto; left: -2px; } } } } .btn { padding: 3px 18px; font-size: 12px; } } i, u { pointer-events: none; } } .showcase-tab-titles { .showcase-tab-item { [dir="rtl"] & { padding-right: 0; padding-left: $gridPadding; } .tab-img { width: 42px; height: 42px; overflow: hidden; @include d-flex; @include align-items-center; @include justify-content-center; border-top-left-radius: 4px; border-bottom-left-radius: 4px; [dir="rtl"] & { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } @media (min-width:$mdScreen) { width: 84px; height: 84px; } img { width: auto; height: auto; max-width: 100%; max-height: 100%; } } } } @media (max-width: ($xlScreen + 30)) { .slider-block-wrapper { overflow: hidden; } } } .product-item .add-favourite-btn { background: url(/Data/EditorFiles/heart2.svg) no-repeat center; background-size: 100%; z-index: 3; position: absolute; right: 15px; top: 14px; width: 22px; height: 22px; @media (max-width:767px) { width: 18px; height: 18px; right: 10px; top: 10px; } } .product-item .new-badge { left: 15px; background: var(--blue-color); top: 15px; font-size: 15px; text-transform: uppercase; width: 57px; height: 32px; line-height: 32px; @media (max-width:767px) { width: 40px; height: 20px; line-height: 22px; font-size: 11px; left: 10px; top: 10px; } } .tab-nav.showcase-tab-titles li { border: 1px solid #000; min-width: calc(33% - 8px); @media (min-width:$mdScreen) { min-width: 200px; } @media (min-width:$lgScreen) { min-width: 250px; } } .tab-nav.showcase-tab-titles li a { font-size: 18px; font-weight: 500; padding: 0; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .tab-nav.showcase-tab-titles li.active a { color: #fff; background: var(--blue-color); } .tab-nav.showcase-tab-titles li a span { padding-top: 12px; padding-bottom: 12px; } .showcase-button-prev1, .showcase-button-next1 { background: var(--blue-color) !important; } .showcase-button-prev1 i, .showcase-button-next1 i { color: #fff; } @media (min-width:$mdScreen) { .product-item .add-to-cart-btn { position: absolute; bottom: 40px; width: 90%; right: 0; left: 0; margin: 0 auto; text-align: center; background: #fff; padding: 12px 10px; font-size: 18px; z-index: 3; opacity: 0; visibility: hidden; } .product-item:hover .add-to-cart-btn { opacity: 1; visibility: visible; } .product-item .add-to-cart-btn:hover { background: var(--blue-color); color: #fff; } .product-item .add-to-cart-btn.forMobile { display: none !important; } } @media (max-width:767px) { .tab-nav.showcase-tab-titles li a { font-size: 11px; padding: 0 5px; } .tab-nav.showcase-tab-titles li a span { padding-top: 8px; padding-bottom: 8px; } .product-item .add-to-cart-btn.forDesktop { display: none !important; } .v5-mango.folder-showcase.tpl-user_home-tab-slider .product-item a.add-to-cart-btn { width: 100%; height: 25px; background: var(--yellow-color); color: #fff; font-size: 13px; line-height: 25px; display: none !important; } .v5-mango.folder-showcase.tpl-user_home-tab-slider .product-item a.add-to-cart-btn:hover { background: var(--blue-color); color: #fff; } }