@import "variables-site/variables-site"; @import "mixins/mixins-master"; .woocommerce-error, .woocommerce-info, .woocommerce-message { background-color: $color__background-hr; } .woocommerce, .woocommerce-page { #respond input#submit, a.button, button.button, input.button { background-color: $color__link; border: 1px solid $color__link; color: #fff; @include font-size(1); font-weight: bold; line-height: 1; padding: .75rem 1.25rem; transition: color 0.25s ease-in-out, background 0.25s ease-in-out; border-radius: 0; &:hover, &:focus { background-color: $color__link-hover; border-color: $color__link-hover; color: #fff; } &.disabled, &:disabled, &:disabled[disabled] { background-color: $color__background-hr; border-color: $color__background-hr; color: $color__text-main; padding: .75rem 1.25rem; opacity: 0.5; } &.alt { background-color: $color__link; border-color: $color__link; &:hover, &:focus { background-color: $color__link-hover; border-color: $color__link-hover; color: #fff; } } } #respond input#submit.alt.disabled, #respond input#submit.alt.disabled:hover, #respond input#submit.alt:disabled, #respond input#submit.alt:disabled:hover, #respond input#submit.alt:disabled[disabled], #respond input#submit.alt:disabled[disabled]:hover, a.button.alt.disabled, a.button.alt.disabled:hover, a.button.alt:disabled, a.button.alt:disabled:hover, a.button.alt:disabled[disabled], a.button.alt:disabled[disabled]:hover, button.button.alt.disabled, button.button.alt.disabled:hover, button.button.alt:disabled, button.button.alt:disabled:hover, button.button.alt:disabled[disabled], button.button.alt:disabled[disabled]:hover, input.button.alt.disabled, input.button.alt.disabled:hover, input.button.alt:disabled, input.button.alt:disabled:hover, input.button.alt:disabled[disabled], input.button.alt:disabled[disabled]:hover { background-color: $color__link; border-color: $color__link; color: #fff; } .woocommerce-result-count { margin-top: .875rem; } ul.products { margin-right: -15px; margin-left: -15px; } p.stars a, .star-rating { color: #FFCC00; } .star-rating::before { color: $color__text-secondary; } #review_form #respond p { margin-bottom: 1.5rem; &.stars { display: inline-block; } } span.onsale, ul.products li.product .onsale { background-color: #f44336; border-radius: 0; padding: .5rem; line-height: 1; top: .5rem; left: 1.5rem; right: auto; margin: 0; @include font-size(1); font-weight: normal; min-height: auto; min-width: auto; z-index: 1; } span.onsale { left: .5rem; } ul.products li.product { float: left; margin: 0; padding-left: 15px; padding-right: 15px; position: relative; margin-bottom: 1.875rem; width: 50%; text-align: center; .star-rating { margin-left: auto; margin-right: auto; } .button { background: transparent; border: 1px solid $color__text-secondary; color: $color__text-secondary; display: inline-block; @include font-size(0.875); font-weight: bold; line-height: 1; padding: .875rem 1rem; border-radius: 0; &:hover, &:focus { background-color: $color__link; border-color: $color__link; color: #fff; } } } ul.products li.first { clear: none; } .cart-collaterals .cross-sells ul.products li, .cart-collaterals .cross-sells ul.products li { width: 50%!important; } .woocommerce-product-gallery__wrapper { margin: 0; } div.product div.images { margin-bottom: 3rem; } div.product form.cart .variations { margin-bottom: 0; } div.product form.cart .variations select { min-width: auto; } .woocommerce-variation-price { margin-bottom: 1.5rem; } .woocommerce-variation p{ @include font-size(0.875); } .woocommerce-loop-product__link { color: $color__text-main; &:hover, &:focus { color: $color__link; } } div.product .woocommerce-tabs { margin-bottom: 1.5rem; .panel { margin-left: auto; margin-right: auto; } ul.tabs { padding: 0; text-align: center; &:before { border-top: 3px solid $color__background-hr; border-bottom-width: 0; top: 0; bottom: auto; } li { background-color: transparent; border-width: 0; display: block; margin: 0; padding: 0; border-radius: 0; &:before, &:after { display: none; } a { border-top: 3px solid transparent; color: $color__text-secondary; padding: 1rem; font-weight: normal; @include font-size(1); text-transform: uppercase; } &.active, &.active a { background-color: transparent; } &.active a { border-top-color: $color__link; color: $color__text-main; } } } } .cart-collaterals h2 { @include font-size(1); } #reviews #comments ol.commentlist { padding: 0; margin-bottom: 1.5rem; li { margin-bottom: 1.5rem; .comment-text { margin-left: 4rem; border: none; padding: 0; p.meta { color: $color__text-main; @include font-size(1); margin-bottom: .5rem; } .star-rating { margin-top: .25rem; } } img.avatar { width: 48px; background-color: transparent; border: none; box-shadow: none; display: block; border-radius: 48px; top: .25rem; } } } #respond input#submit.loading::after, a.button.loading::after, button.button.loading::after, input.button.loading::after { top: .875rem; } a.added_to_cart { display: block; } .product_meta { @include font-size(0.875); > span { border-bottom: 1px solid $color__background-hr; display: block; padding: .5rem 0; &:last-child { border-bottom-width: 0; } } } table.shop_table { border: none; border-top: 1px solid $color__background-hr; border-radius: 0; border-collapse: collapse; td, tbody th, tfoot td, tfoot th { border-top-width: 0; } td { padding: .75rem; } } table.my_account_orders td, table.my_account_orders th { padding: .75rem; } table.shop_attributes td, table.shop_attributes th { padding: 0 .75rem; } nav.woocommerce-pagination { margin-bottom: 1.5rem; overflow: hidden; position: relative; ul { border: none; display: block; margin: 0; padding: 0; li { border: none; display: inline-block; float: none; a, span { color: $color__text-main; @include font-size(1); font-weight: bold; padding: 1rem; } a:hover, a:focus { background-color: transparent; color: $color__link; } span.current { background-color: transparent; color: $color__text-main; } .page-numbers:not(.current) { display: none; } a.prev.page-numbers, a.next.page-numbers { display: block; @include font-size(1.25); padding-left: 0; padding-right: 0; position: absolute; top: 0; } a.prev.page-numbers { left: 0; } a.next.page-numbers { right: 0; } } } } #content table.cart td.actions .input-text, table.cart td.actions .input-text { width: 128px; } form.checkout_coupon, form.login, form.register { border-color: $color__background-hr; border-radius: 0; margin-top: -2em; } ul.cart_list li img, ul.product_list_widget li img { margin-top: 2px; width: 48px; } a.remove { display: inline-block; } form .form-row { padding: 0; margin-bottom: 1rem; } form .form-row label, form .form-row label { color: $color__text-secondary; @include font-size(0.75); text-transform: uppercase; } form .form-row .required { color: $color__text-require; text-decoration: none; } form .form-row textarea { min-height: 7rem; } form.checkout_coupon, form.login, form.register { border: none; padding: 0; margin-top: 0; } #customer_login { h2 { @include font-size(1); margin-bottom: 1rem; } p.lost_password { @include font-size(0.875); margin-bottom: 0; } } .edit-account fieldset { border: none; margin: 0 0 1.5rem; padding: 0; } div.product div.images .woocommerce-product-gallery__trigger { z-index: 1; } .woocommerce-ordering { float: none; margin-bottom: 3rem; } .woocommerce-ordering select { width: 100%; } #secondary .widget_shopping_cart .buttons a, #secondary &.widget_shopping_cart .buttons a { color: #fff; display: block; margin-left: 2px; margin-right: 2px; margin-bottom: .5rem; padding-left: .25rem; padding-right: .25rem; width: 100%; text-align: center; } .widget_shopping_cart .cart_list li, &.widget_shopping_cart .cart_list li, ul.cart_list li, ul.product_list_widget li { margin-bottom: 1rem; } .widget_price_filter { .ui-slider .ui-slider-range, .ui-slider .ui-slider-handle { background-color: $color__link; } .price_slider_wrapper .ui-widget-content { background-color: $color__link-hover; } .price_slider_amount .button { font-size: inherit; padding-top: .5rem; padding-bottom: .5rem; } } .widget_price_filter .price_slider_amount .button { font-size: inherit; float: left; padding-top: .5rem; padding-bottom: .5rem; } .widget_shopping_cart .total, &.widget_shopping_cart .total { border-top-color: $color__text-main; padding-top: 1rem; } } .woocommerce .woocommerce-breadcrumb { color: $color__text-secondary; text-align: center; margin-bottom: 1.5rem; a { color: $color__text-main; font-weight: bold; &:hover, &:focus { color: $color__link; } } } #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background-color: $color__background-hr; border-radius: 0; margin-bottom: 3rem; } .woocommerce-account { .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { float: none; width: 100%; } } .woocommerce-MyAccount-navigation { margin-bottom: 1.5rem; overflow: hidden; ul, li { padding: 0; margin: 0; list-style-type: none; } a { border-bottom: 3px solid transparent; color: $color__text-main; display: block; padding: 1rem .5rem; &:hover, &:focus { color: $color__link; } } li.is-active a { border-bottom-color: $color__link; } } .woocommerce-MyAccount-content { h2 { @include font-size(1); } } .select2-container--default .select2-selection--single { background-color: transparent; } .select2-container--default .select2-selection--single, .select2-dropdown { border-color: $color__text-main; } .select2-container--default .select2-selection--single, .select2-container--open .select2-dropdown--above, .select2-container--open .select2-dropdown--below { border-radius: 0; } .select2-container .select2-selection--single { height: 38px; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 38px; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 7px; } .woocommerce form .form-row textarea { display: inline-block; } .woocommerce form .form-row textarea, .woocommerce form .form-row.woocommerce-invalid input.input-text { &:focus { background-color: rgba( 255,255,255,.1); border-color: $color__link; color: $color__text-input-focus; outline: none; box-shadow: inset 0 0 0 1px $color__link; } } .woocommerce-mini-cart__buttons { margin-left: -2px; margin-right: -2px; margin-bottom: 0; } #add_payment_method table.cart td.actions .coupon .input-text, .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce-checkout table.cart td.actions .coupon .input-text { border-color: $color__background-hr; padding: .5rem; height: 42px; } #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods { border-bottom-color: rgba( 0,0,0,.1 ); } #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box { background-color: rgba( 0,0,0,.05 ); border-radius: 0; &:before { display: none; } } p.lost_password { @include font-size(0.875); } .woocommerce-address-fields { margin-bottom: 3rem; } @media (min-width: 768px) { .woocommerce, .woocommerce-page { nav.woocommerce-pagination ul li .page-numbers{ display: block!important; } nav.woocommerce-pagination ul li span.current { color: $color__link; } #respond input#submit { width: auto; min-width: 25%; } .comment-form-author, .comment-form-email { width: 47.91666666666667%; } #review_form #respond p.comment-form-author{ margin-right: 04.16666666666667%; } .woocommerce-ordering { float: right; } .woocommerce-ordering select { width: auto; } } .woocommerce-MyAccount-navigation { text-align: center; ul { border-bottom: 3px solid $color__background-hr; } li { display: inline-block; margin-bottom: -3px; } } } @media (min-width: 992px) { .woocommerce, .woocommerce-page { &.col-shop-4 ul.products li.product { width: 25%; } &.col-shop-3 ul.products li.product { width: 33.33%; } &.col-shop-2 ul.products li.product { width: 50%; } #secondary .widget_shopping_cart .buttons a, #secondary &.widget_shopping_cart .buttons a { display: inline-block; width: calc(50% - 4px); } } }