/** * Header cart */ .site-header-cart { .cart-contents { text-decoration: none; } .widget_shopping_cart { display: none; background-color: #fff; } .product_list_widget { margin: 0; padding: 0; } } /** * Header cart & Wishlist count number */ .site-header-cart, .header-wishlist-icon { position: relative; .count-number { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; line-height: 17px; color: $color__primary; background: #FFF; border: 1px solid $color__primary; text-align: center; border-radius: 50%; @include font-size(10); } } /** * Quantity */ .botiga-quantity-plus, .botiga-quantity-minus { opacity: 0; visibility: hidden; display: none !important; transition: ease opacity 300ms; &.show { opacity: 1; visibility: visible; display: flex !important; } } .botiga-single-sticky-add-to-cart-wrapper-content, .woocommerce-cart-form, form.cart { .quantity { display: flex; justify-content: center; width: 100%; height: 61px; border: 2px solid $color__primary; margin-bottom: 1.3rem; .botiga-quantity-plus, .botiga-quantity-minus { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; line-height: 1; padding: 0 0px 4px; width: 100%; color: $color__primary; border: none; text-align: center; text-decoration: none; outline: none; &:hover { color: $color__hover; } } .botiga-quantity-plus { justify-content: flex-start; } .botiga-quantity-minus { justify-content: flex-end; } .qty { text-align: center; padding: 0; border: none; width: 100%; min-height: 0; background: transparent !important; &:focus { box-shadow: none; } } } } .woocommerce-cart-form { .quantity { max-width: 100px; margin-bottom: 0; border-width: 1px; .botiga-quantity-plus, .botiga-quantity-minus { font-size: 1.2rem; padding-bottom: 1px; justify-content: center; } .qty { font-size: 1rem; } } } @media(min-width: 1025px) { .woocommerce-cart-form { .quantity { height: 32px; max-width: 85px; } } form.cart { display: flex; .quantity { width: 30%; margin-bottom: 0; margin-right: 20px; .botiga-quantity-plus, .botiga-quantity-minus { padding: 0 0 4px; font-size: 2.2rem; justify-content: center; } } .qty { width: 50px; } } // Remove input button style .qty { text-align: center; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } &[type=number] { -moz-appearance: textfield; } } // Inside quick view .botiga-quick-view-popup { form.cart { .quantity { width: 35%; .botiga-quantity-plus, .botiga-quantity-minus { font-size: 1.7rem; } } .qty { width: 35px; } } } } @media(max-width: 1024px) { .woocommerce-cart-form { .quantity { height: 50px; } } } @media(min-width: 992px) and (max-width: 1024px) { form.cart { .quantity { width: calc(100% - 116px); } } } /** * Star rating */ .star-rating { overflow: hidden; position: relative; height: 1.618em; line-height: 1.618; width: 5.3em; font-family: star; font-weight: 400; margin-left: auto; margin-right: auto; &::before { content: "\53\53\53\53\53"; opacity: 0.25; float: left; top: 0; left: 0; position: absolute; } span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; } span::before { content: "\53\53\53\53\53"; top: 0; position: absolute; left: 0; color: #FFA441; } } p.stars { a { position: relative; height: 1em; width: 1em; text-indent: -999em; display: inline-block; text-decoration: none; margin-right: 1px; font-weight: 400; &::before { display: block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; line-height: 1; font-family: star; content: "\53"; color: $color__text-main; text-indent: 0; opacity: 0.25; } &:hover { ~ a::before { content: "\53"; color: $color__text-main; opacity: 0.25; } } } &:hover { a { &::before { content: "\53"; color: $color__link; opacity: 1; } } } &.selected { a.active { &::before { content: "\53"; color: $color__link; opacity: 1; } ~ a::before { content: "\53"; color: $color__text-main; opacity: 0.25; } } a:not(.active) { &::before { content: "\53"; color: $color__link; opacity: 1; } } } } /** * Tabs */ .woocommerce-tabs { margin-top: 70px; margin-bottom: 60px; .woocommerce-Reviews-title { display: none; } ul.tabs { list-style: none; margin: 0 0 32px; padding: 0; text-align: left; border-bottom: 1px solid rgba($color__primary, 0.2); li { display: inline-block; margin: 0; padding-bottom: 0; position: relative; a { @include font-size(18); color: $color__primary; padding: 10px 30px; display: block; border-bottom: 2px solid transparent; transition: border-color 0.2s; &:hover { border-color: $color__primary; } } &.active { a { border-color: $color__primary; } } } } .panel { h2:first-of-type { margin-bottom: 1em; } } } @media (max-width: 767px) { .woocommerce-tabs { ul.tabs { li { display: block; margin-left: 0 !important; } } } } .botiga-tabs-style1 { .woocommerce-tabs { ul.tabs { li:not(.active) { a { border-bottom: 0 !important; } } } } } .botiga-tabs-style2 { .woocommerce-tabs { ul.tabs { li { &:not(:first-child) { margin-left: -5px; } & + li { a { border-left: 0; } } a { border: 1px solid rgba(33,33,33,0.2); border-bottom: 0; } &.active, &:hover { a { border-top-width: 2px; border-top-color: $color__primary; } } } } } } .botiga-tabs-style3 { .woocommerce-tabs { ul.tabs { li { &:not(:first-child) { margin-left: -5px; } & + li { a { border-left: 0; } } a { background: #f2f2f2; transition: ease background 300ms; border-bottom: 0 !important; } } } } } .botiga-tabs-style4 { .woocommerce-tabs { ul.tabs { position: relative; border: 0; &:before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; border-bottom: 1px solid rgba(33,33,33,0.2); transform: translate3d(0, -50%, 0); } li { a { position: relative; border: 2px solid rgba(33,33,33,0.2); background: #FFF; } &:not(:first-child) { margin-left: -7px; } &.active { a { z-index: 1; } } &.active, &:hover { a { border-color: $color__primary; } } } } } } .botiga-tabs-style5 { .woocommerce-tabs { display: flex; ul.tabs { border: 0; margin-right: -1px; li { display: block; a { min-width: 170px; text-align: center; border: 1px solid rgba(33,33,33,0.2); border-right: 0; } & + li { a { border-top: 0; } } &.active { a { background: #f2f2f2; } } } } .panel { width: 100%; padding: 35px; background: #f2f2f2; border: 1px solid rgba(33,33,33,0.2); p:last-child { margin-bottom: 0; } #comments { margin-top: 0; } } } &.botiga-tabs-align-right { .woocommerce-tabs { ul.tabs { order: 2; margin-right: 0; margin-left: -1px; li { a { border-left: 0; border-right: 1px solid rgba(33,33,33,0.2); } } } .panel { order: 1; } } } &.botiga-tabs-align-center { .woocommerce-tabs { flex-direction: column; ul.tabs { display: flex; margin-bottom: -1px; border-bottom: 0; justify-content: center; li { a { border-bottom: 0; } & + li { a { border-top: 1px solid rgba(33,33,33,0.2); border-right: 1px solid rgba(33,33,33,0.2); } &.active { a { border-left: 0; } } } } } } } } .botiga-tabs-align-center { .woocommerce-tabs { .wc-tabs { text-align: center; } } } .botiga-tabs-align-right { .woocommerce-tabs { .wc-tabs { text-align: right; } } } /** * Password strength meter */ .woocommerce-password-strength { text-align: right; &.strong { color: $woocommerce__color-success; } &.short { color: $woocommerce__color-error; } &.bad { color: $woocommerce__color-error; } &.good { color: $woocommerce__color-info; } } /** * Forms */ .form-row { &.woocommerce-validated { input.input-text { box-shadow: inset 2px 0 0 $woocommerce__color-success; } } &.woocommerce-invalid { input.input-text { box-shadow: inset 2px 0 0 $woocommerce__color-error; } } } .required { color: #f00; } /** * Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { padding: 15px; background-color: #f2f2f2; clear: both; a { color: #716f6f; } } .woocommerce-info { .button { margin-right: 15px; } } .woocommerce-form-coupon-toggle { margin-bottom: 30px; } .checkout_coupon { margin-top: -30px; margin-bottom: 30px; padding: 15px; .form-row { display: inline-block; } } .woocommerce-info, .woocommerce-noreviews, p.no-comments { background-color: #f2f2f2; } .woocommerce-error { list-style: none; background-color: #f2f2f2; } .demo_store { position: fixed; left: 0; bottom: 0; right: 0; margin: 0; padding: 1em; background-color: $woocommerce__color-info; z-index: 9999; } @media screen and (min-width: 48em) { /** * Header cart */ .site-header-cart { .header-elements-left & { &:hover, &.focus { .widget_shopping_cart { left: 0; display: block; } } } .widget_shopping_cart { position: absolute; top: 100%; width: 100%; z-index: 999999; left: -999em; display: block; box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.12); min-width: 400px; margin: 0 auto; padding: 30px 0 0; visibility: hidden; .woocommerce-mini-cart__empty-message { padding: 30px; } .widgettitle { @include font-size(24); padding: 0 30px 30px; margin: 0; position: relative; &:after { content: ''; position: absolute; width: calc(100% - 60px); height: 1px; bottom: 0; left: 30px; background-color: #eee; } } .woocommerce-mini-cart__total, .woocommerce-mini-cart__buttons { background-color: #f5f5f5; margin: 0; padding: 0 30px; } .woocommerce-mini-cart__total { padding-top: 30px; padding-bottom: 24px; display: flex; justify-content: space-between; font-weight: 600; .woocommerce-Price-amount { @include font-size(18); } strong { font-weight: 400; } } .woocommerce-mini-cart__buttons { padding: 30px; position: relative; display: flex; flex-wrap: wrap; &:before { content: ''; position: absolute; width: calc(100% - 60px); height: 1px; top: 0; left: 30px; background-color: #e6e6e6; } .button.checkout { order: -1; color: #fff; width: 100%; text-align: center; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; &:hover { color: #fff; } } .button:not(.checkout) { @include font-size(16); text-align: center; margin: 0 auto; border: 0; background: transparent !important; color: $color__primary; text-decoration: underline; padding: 0 !important; } } } &:hover, &.focus { .widget_shopping_cart { left: auto; right: 0; display: block; visibility: visible; } } .product_list_widget { margin: 0; padding: 0; position: static; box-shadow: none; max-width: 100%; li { display: flex; align-items: center; flex-wrap: wrap; padding: 30px 30px 30px 145px; min-height: 160px; background: transparent; position: relative; max-width: 100%; &:after { content: ''; position: absolute; width: calc(100% - 60px); height: 1px; bottom: 0; left: 30px; background-color: rgba($color__primary, 0.1); } &:last-of-type { padding-bottom: 30px; &:after { display: none; } } img { max-width: 100px; max-height: 100px; position: absolute; top: 30px; left: 30px; } a.remove { width: 18px; height: 18px; line-height: 16px; background-color: $color__primary; color: #fff; text-align: center; border-radius: 50%; position: absolute; top: 22px; left: 22px; z-index: 11; } & > a:not(.remove), & > span { padding-left: 15px; max-width: 100%; } & > span { display: block; font-weight: 600; width: 100%; @include font-size(14); } } } } } /* Prices */ .price { font-weight: 600; ins { background: transparent; } del { color: #999999; } } .wc-block-grid__product-onsale, span.onsale { position: absolute; background: $color__primary; top: 20px; left: 20px; font-weight: 400; @include font-size(14); text-transform: uppercase; color: #fff; padding: 3px 20px; border-radius: 0; z-index: 11; .product-list & { left: 15px; } } .woocommerce-breadcrumb { margin-bottom: 30px; color: $color__primary; opacity: 0.7; a { color: $color__primary; } } .product-gallery-summary del .amount { opacity: 0.5; } /* Wishlist Button */ .botiga-wishlist-button { position: absolute; top: 20px; right: 20px; width: 20px; height: 21px; &.botiga-wishlist-button-tooltip:not(.active) { &:before { content: attr(data-botiga-wishlist-tooltip); position: absolute; top: 50%; right: calc( 100% + 15px ); background: $color__primary; color: #FFF; padding: 5px 14px; font-size: 0.8rem; border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; transform: translate3d(0, -50%, 0); transition: ease opacity 300ms; } &:after { content: ''; position: absolute; top: 50%; right: calc( 100% + 8px ); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid $color__primary; opacity: 0; visibility: hidden; transform: translate3d(0, -50%, 0); transition: ease opacity 300ms; } } svg path { transition: ease fill 300ms, ease stroke 300ms; } &:hover { &.botiga-wishlist-button-tooltip { &:before, &:after { opacity: 1; visibility: visible; } } } &:hover, &.active { svg path { fill: $color__primary; stroke: $color__primary; } } } .botiga-wishlist-button-layout3 { .botiga-wishlist-button { top: auto; bottom: 20px; } } .single-product { .botiga-wishlist-wrapper { margin-top: 15px; .botiga-wishlist-button { display: flex; position: relative; top: 0; right: 0; width: 100%; height: auto; align-items: center; font-size: 0.9rem; font-weight: 600; svg { width: 17px; margin-right: 5px; } } } } /* Wishlist Table */ .botiga-wishlist-wrapper { margin-top: 60px; .botiga_wishlist_table { .botiga-wishlist-row-item { transition: ease background 300ms, ease opacity 300ms; &.removing { background: #e9e9e9; opacity: 0.3; } } &.empty { tbody { td { padding: 20px 0; text-align: center; } } } .botiga-custom-addtocart { display: block; min-width: 100px; } } .footer-buttons { text-align: right; } @media(max-width: 767px) { .botiga_wishlist_table { .botiga-wishlist-row-item { position: relative; display: flex; flex-direction: column; td { border: 0; &:before { margin-right: 10px; } } .product-remove { border: 0; position: absolute; top: 0; right: 0; } .product-thumbnail { padding-top: 20px; &:before { content: none; } } .product-name { text-align: right; } .product-addtocart { padding-bottom: 20px; } } } } } /* Product swatch */ .botiga-variations-wrapper { select { display: none; } .botiga-variation-type-color { display: flex; > a { position: relative; width: 30px; height: 30px; border-radius: 100%; border: 2px solid transparent; cursor: pointer; text-indent: -99999px; &:not(.disabled):before { content: ''; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; border: 2px solid rgba( $color__primary, 0.4 ); border-radius: 100%; transition: ease border-color 300ms; } & + a { margin-left: 12px; } &:hover, &.active { &:not(.disabled):before { border-color: $color__primary; } } } } .botiga-variation-type-button { display: flex; > a { display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; line-height: 1; padding: 9px 15px; min-width: 30px; min-height: 30px; border: 2px solid $color__primary; cursor: pointer; opacity: 0.4; overflow: hidden; transition: ease opacity 300ms; & + a { margin-left: 8px; } &:hover, &.active { opacity: 1; color: $color__primary; } } } .botiga-variation-type-color, .botiga-variation-type-button { > a { &.disabled { position: relative; pointer-events: none; opacity: 0.5; &:before, &:after { content: ''; position: absolute; top: 50%; left: 50%; width: calc(100% + 10px); height: 2px; background: red; transform: translate3d(-50%, -50%, 0) rotate(45deg); } &:after { transform: translate3d(-50%, -50%, 0) rotate(-45deg); } } } } }