/** * Fonts */ @font-face { font-family: star; src: url(../fonts/star.eot); src: url(../fonts/star.eot?#iefix) format("embedded-opentype"), url(../fonts/star.woff) format("woff"), url(../fonts/star.ttf) format("truetype"), url(../fonts/star.svg#star) format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: WooCommerce; src: url(../fonts/WooCommerce.eot); src: url(../fonts/WooCommerce.eot?#iefix) format("embedded-opentype"), url(../fonts/WooCommerce.woff) format("woff"), url(../fonts/WooCommerce.ttf) format("truetype"), url(../fonts/WooCommerce.svg#WooCommerce) format("svg"); font-weight: 400; font-style: normal; } @import "mixins"; @import "animation"; $tt2-gray: #f7f7f7; /** * Main layout. */ .woocommerce-page { h1.wp-block-post-title { font-size: var(--wp--preset--font-size--huge); } h2 { font-size: var(--wp--preset--font-size--large); } main { .woocommerce { @include clearfix(); max-width: 1000px; } } } .woocommerce { // Common .woocommerce-products-header { h1.page-title { font-family: var(--wp--preset--font-family--source-serif-pro); font-size: var(--wp--custom--typography--font-size--gigantic); font-weight: 300; line-height: var(--wp--custom--typography--line-height--tiny); margin-bottom: var(--wp--custom--spacing--medium); } } span.onsale { top: -1rem; right: -1rem; position: absolute; background: var( --wp--preset--color--secondary ); border-radius: 2rem; line-height: 2.6rem; font-size: 0.8rem; padding: 0rem 0.5rem 0rem 0.5rem; } .price ins, bdi { text-decoration: none; } .quantity { input[type='number'] { width: 3em; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button{ opacity: 1; } } &.woocommerce-shop .woocommerce-breadcrumb { display: none; } .woocommerce-message, .woocommerce-error, .woocommerce-info { background: $tt2-gray; border-top-color: var( --wp--preset--color--primary ); border-top-style: solid; padding: 1rem 1.5rem; margin-bottom: 2rem; list-style: none; font-size: var(--wp--preset--font-size--small); &[role='alert']::before { color: var( --wp--preset--color--background ); background: var( --wp--preset--color--primary ); border-radius: 5rem; font-size: 1rem; padding-left: 3px; padding-right: 3px; margin-right: 1rem; } a.button { margin-top: -0.5rem; border: none; background: #ebe9eb; color: var(--wp--preset--color--black); padding: 0.5rem 1rem; &:hover, &:visited { color: var(--wp--preset--color--black); } } } .woocommerce-error[role='alert'] { margin: 0; &::before { content: 'X'; padding-right: 4px; padding-left: 4px; } li { display: inline-block; } } .woocommerce-message { &[role='alert']::before { content: '\2713'; } } .woocommerce-NoticeGroup-checkout { ul.woocommerce-error[role='alert'] { &::before { display: none; } li { display: inherit; margin-bottom: 1rem; } } } a.button, button[name='add-to-cart'], input[name='submit'], button.single_add_to_cart_button, button[type='submit']:not(.wp-block-search__button) { display: inline-block; text-align: center; word-break: break-word; background-color: var( --wp--preset--color--primary ); color: #fff; border: 1px solid var(--wp--preset--color--black); padding: 1rem 2rem; margin-top: 1rem; text-decoration: none; font-size: medium; cursor: pointer; &:hover, &:visited { color: var( --wp--preset--color--white ); text-decoration: underline; } } button.woocommerce-form-login__submit, button.single_add_to_cart_button, a.checkout-button { font-size: 18px; padding: 1.5rem 3.5rem; } // Shop page .woocommerce-result-count { margin-top: 0; font-size: 0.9rem; } .woocommerce-ordering { margin-top: -0.2rem; margin-bottom: 3rem; select { padding: 0.2rem 0 0.2rem 0.5rem; } } // Products. ul.products { padding-inline-start: 0; li.product { list-style: none; margin-top: var(--wp--style--block-gap); text-align: center; a.woocommerce-loop-product__link { text-decoration: none; display: block; } h2.woocommerce-loop-product__title { color: var( --wp--preset--color--primary ); font-family: var( --wp--preset--font-family--system-font ); font-size: 1.2rem; text-decoration: none; margin-bottom: 0; } a.add_to_cart_button { padding: 0.8rem 2.7rem; &.loading { opacity: 0.5; } } a.added_to_cart { display: block; margin-top: 1rem; } } } ul.page-numbers { text-align: center; } div.product { position: relative; overflow: auto; > span.onsale { position: absolute; left: -1rem; top: -1rem; width: 1.8rem; z-index: 1; } div.woocommerce-product-gallery { position: relative; a.woocommerce-product-gallery__trigger { position: absolute; top: 1rem; right: 1rem; z-index: 1; text-decoration: none; border-radius: 1rem; border-style: solid; line-height: 1.5rem; padding: 0; font-size: 0.6rem; background: var( --wp--preset--color--white ); border-color: var( --wp--preset--color--white ); height: 1.5rem; width: 1.5rem; overflow: hidden; &::before { content: url('data:image/svg+xml;utf8,'); display: block; transform: rotateY(180deg); margin-left: 1.55rem; } } figure.woocommerce-product-gallery__wrapper { margin: 0; } } div.summary { font-size: 1rem; > *{ margin-bottom: var( --wp--style--block-gap ); } h1.product_title { font-size: 2.5rem; margin: 0; } figure.woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-rating { .star-rating { display: inline-block; } .woocommerce-review-link { display: inline-block; overflow: hidden; position: relative; top: -0.5em; font-size: 1em; } } } button[name='add-to-cart'], button.single_add_to_cart_button { margin-top: 0.5rem; margin-bottom: var( --wp--style--block-gap ); } table.variations { tr { display: block; margin-bottom: var( --wp--style--block-gap ); th { padding-right: 1rem; } td select { padding: 2px; } } } ol.flex-control-thumbs { padding-left: 0; float: left; li { list-style: none; cursor: pointer; float: left; width: 18%; margin-right: 1rem; } } a.reset_variations { margin-left: 0.5em; } table.group_table { td { padding-right: 0.5rem; padding-bottom: 1rem; } margin-bottom: var( --wp--style--block-gap ); } .related.products { margin-top: 7rem; } } .woocommerce-tabs { padding-top: var( --wp--style--block-gap ); ul.wc-tabs { padding: 0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #EAE9EB; li { background: #EAE9EB; margin: 0; padding: 0.5em 1em 0.5em 1em; border-color: #EAE9EB; border-top-left-radius: 5px; border-top-right-radius: 5px; float: left; border-style: solid; border-width: 1px; border-left-color: var( --wp--preset--color--background ); font-weight: 600; font-size: var(--wp--preset--font-size--medium); &:first-child { border-left-color: #EAE9EB; margin-left: 1em; } &.active { background: var( --wp--preset--color--background ); border-bottom-color: var( --wp--preset--color--background ); box-shadow: 0 1px var( --wp--preset--color--background ); } a { text-decoration: none; } } } .woocommerce-Tabs-panel { padding-top: var( --wp--style--block-gap ); font-size: var(--wp--preset--font-size--small); margin-left: 1em; h2 { display: none; } } } .woocommerce-Reviews { ol.commentlist { list-style: none; padding-left: 0; img.avatar { float: left; } p.meta { font-size: 1rem; } .comment-text { display: inline-block; padding-left: var( --wp--style--block-gap ); .star-rating { margin-top: 0; margin-right: unset; margin-left: unset; } } } .comment-form-rating { label { display: inline-block; padding-right: var( --wp--style--block-gap ); padding-top: var( --wp--style--block-gap ); } p.stars { display: inline; a::before { color: var( --wp--preset--color--secondary ); } } } .comment-form-comment { label { float: left; padding-right: var( --wp--style--block-gap ); } } #review_form_wrapper { margin-top: 5rem; } .comment-reply-title { font-size: var(--wp--preset--font-size--medium); font-weight: 700; } } .star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1; width: 5.4rem; font-family: star; color: var( --wp--preset--color--secondary ); margin: 1rem auto .7rem auto; &::before { content: "\73\73\73\73\73"; float: left; top: 0; left: 0; position: absolute; font-size: 1rem; } 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; font-size: 1rem; } } p.stars { margin-top: 0; a { position: relative; height: 1em; width: 1em; text-indent: -999em; display: inline-block; text-decoration: none; box-shadow: none; &::before { display: block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; line-height: 1; font-family: WooCommerce; content: "\e021"; text-indent: 0; } &:hover { ~ a::before { content: "\e021"; } } } &:hover { a { &::before { content: "\e020"; } } } &.selected { a.active { &::before { content: "\e020"; } ~ a::before { content: "\e021"; } } a:not(.active) { &::before { content: "\e020"; } } } } .woocommerce-product-gallery__trigger { position: absolute; top: 1rem; right: 1rem; z-index: 99; } .return-to-shop { a.button { background-color: #fff; color: var( --wp--preset--color--primary ); border: 2px solid var( --wp--preset--color--primary ); padding: 0.7rem 2rem; } } mark { background: var( --wp--preset--color--secondary ); } } /** * Form fields */ .woocommerce-page { form { .input-text { border: 1px solid var(--wp--preset--color--black); border-radius: 0; font-size: var(--wp--preset--font-size--small); padding: .9rem 1.1rem; } label { margin-bottom: .7rem; } abbr.required { text-decoration: none; } ul { margin-top: 0; margin-bottom: 0; list-style-type: none; padding-left: 0; } } input[type="radio"][name='payment_method'], input[type="radio"].shipping_method { display: none; & + label { &::before { content: ""; display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--wp--preset--color--black); background: var(--wp--preset--color--white); margin-left: 4px; margin-right: 1.2rem; border-radius: 100%; transform: translateY(.2rem); } } & ~ .payment_box { padding-left: 3rem; margin-top: 1rem; } &:checked + label { &::before { background: radial-gradient(circle at center, black 45%, white 0); } } } label.woocommerce-form__label-for-checkbox { font-weight: normal; cursor: pointer; span { &::before { content: ""; display: inline-block; height: 1rem; width: 1rem; border: 2px solid var(--wp--preset--color--black); background: var(--wp--preset--color--white); margin-right: .5rem; transform: translateY(.2rem); } } input[type="checkbox"] { display: none; } input[type="checkbox"]:checked + span::before { background: var(--wp--preset--color--black); box-shadow: inset .2rem .2rem var(--wp--preset--color--white), inset -.2rem -.2rem var(--wp--preset--color--white); } } table.shop_table_responsive { width: 100%; text-align: left; border-collapse: collapse; th, td { font-size: var(--wp--preset--font-size--small); font-weight: normal; } th { padding-bottom: 1rem; } tbody { tr { border-top: 1px solid var( --wp--preset--color--black ); } td { a.button, button { margin-bottom: 1rem; border: none; background: #ebe9eb; color: var(--wp--preset--color--black); padding: 0.5rem 1rem 0.5rem 1rem; &:hover, &:visited { color: var(--wp--preset--color--black); } } &.woocommerce-orders-table__cell-order-actions { a.button { display: block; } } } } } table.shop_table, table.shop_table_responsive { tbody { .product-name { a:not(:hover) { text-decoration: none; } a:hover { text-decoration: underline; text-decoration-thickness: 1px; } .variation { dt { font-style: italic; margin-right: 0.25rem; float: left; } dd { font-style: normal; a { font-style: normal; } } } } } } /* * Cart / Checkout */ .woocommerce-cart-form { #coupon_code { width: auto; } table.shop_table_responsive { td, th { padding: 1rem 0 0.5rem 1rem; } tbody { tr:last-of-type { border-top: none; } @media only screen and (max-width: 768px) { td { padding-left: 0; } .product-remove { width: auto; text-align: left !important; } #coupon_code { width: 50%; float: left; margin-bottom: 1rem; } } } button[name='apply_coupon'], button[name='update_cart'] { padding: 1rem 2rem; border: 2px solid #ebe9eb; margin: 0; } .product-remove { width: 1rem; font-size: var(--wp--preset--font-size--large); a { text-decoration: none; } } .product-thumbnail { width: 7.5rem; a { img { width: 117px; } } } } } .cart-collaterals { margin-top: 1.5rem; h2 { text-transform: uppercase; font-family: inherit; font-size: var(--wp--preset--font-size--medium); } table.shop_table_responsive { tr { border-top: none; } th { width: 11rem; } td, th { padding: 1rem 0; vertical-align: text-top; } } button[name='calc_shipping'] { padding: 1rem 2rem; } .woocommerce-Price-amount { font-weight: normal; } } .woocommerce-checkout, &.woocommerce-order-pay { display: table; h3 { font-family: inherit; font-size: var(--wp--preset--font-size--normal); font-weight: 700; } .col2-set { width: 43%; float: right; } .blockUI.blockOverlay { position: relative; @include loader(); } #customer_details { width: 53%; float: left; .col-1, .col-2 { width: 100%; float: none; } } @media only screen and (max-width: 768px) { .col2-set, #customer_details { width: 100%; float: none; } } .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout-review-order-table, .woocommerce-checkout-payment, #payment { margin-top: 4rem; } .woocommerce-checkout-review-order-table, #order_review .shop_table { border-collapse: collapse; width: 100%; thead { display: none; } th { text-align: left; font-weight: normal; } th, td { padding: 1rem 1rem 1rem 0; vertical-align: text-top; } tbody { border-bottom: 1px solid #d2ced2; } tr.order-total { border-top: 1px solid #d2ced2; } .product-quantity { font-weight: normal; } .product-total, .cart-subtotal, .order-total, .tax-rate, input[type="radio"].shipping_method:checked + label, input[type="hidden"].shipping_method + label { .woocommerce-Price-amount { font-weight: bold; } } } button#place_order { width: 100%; text-transform: uppercase; } } form.checkout_coupon { background: $tt2-gray; padding-left: 1.5rem; float: left; // 1.5 rem is to account for extra padding we added above. width: calc(100% - 1.5rem); .form-row { button[name='apply_coupon'] { margin-top: 0; } } } ul.wc_payment_methods, ul.woocommerce-shipping-methods { margin-top: 0; margin-bottom: 0; list-style-type: none; padding-left: 0; input[type='radio'] { margin-right: .6rem; } li.wc_payment_method { margin-bottom: 1rem; } } .woocommerce-thankyou-order-received { margin-top: 0; } .woocommerce-thankyou-order-received, h2.woocommerce-column__title { font-family: var(--wp--preset--font-family--source-serif-pro); font-size: var(--wp--preset--font-size--large); font-weight: 300; } .woocommerce-order > * { margin-bottom: var( --wp--style--block-gap ); } ul.woocommerce-order-overview { font-size: var(--wp--preset--font-size--small); display: flex; padding-left: 0; width: 100%; li { display: inline; flex-grow: 1; margin-bottom: 1rem; text-transform: uppercase; strong { text-transform: none; display: block; } } @media only screen and (max-width: 768px) { flex-direction: column; } } .woocommerce-customer-details { address { padding: 2rem; border: 1px solid var(--wp--preset--color--black); font-style: inherit; p[class^='woocommerce-customer-details--'] { &:first-of-type { margin-top: 2rem; } margin-top: 1rem; margin-bottom: 0; } .woocommerce-customer-details--phone::before { content: '\01F4DE'; margin-right: 1rem; } .woocommerce-customer-details--email::before { content: '\2709'; margin-right: 1rem; font-size: 1.8rem; } } } .woocommerce-table--order-details { border: 1px solid var(--wp--preset--color--black); border-collapse: collapse; width: 70%; th, td { text-align: left; padding: 1rem; border-top: 1px solid var(--wp--preset--color--black); border-bottom: 1px solid var(--wp--preset--color--black); font-weight: normal; } thead th { text-transform: uppercase; } @media only screen and (max-width: 768px) { width: 100%; } } } .select2-container { .select2-selection, .select2-search__field { height: 3.5rem; font-size: var(--wp--preset--font-size--small); padding: .9rem 1.1rem; } .select2-selection, .select2-dropdown { border: 1px solid var(--wp--preset--color--black); border-radius: 0; } .select2-dropdown { border-top: 0; padding: .9rem 1.1rem; .select2-search__field { border: 1px solid var(--wp--preset--color--black); border-radius: 0; margin-bottom: 1rem; } } .select2-selection .select2-selection__arrow { height: 3.5rem; position: absolute; top: 0; right: 0; width: 3rem; } } /** * Account section */ .woocommerce-account { .woocommerce-MyAccount-navigation { ul { margin: 0; padding: 0; } li { list-style: none; padding: 1rem 0; &:first-child { padding-top: 0; } a { box-shadow: none; text-decoration: none; &:hover { text-decoration: underline; } } &.is-active { a { color: var( --wp--preset--color--primary ); text-decoration: underline; } } } } .woocommerce-MyAccount-content { > p:first-of-type, p.form-row-first, p.form-row-last { margin-block-start: 0px; } } &.woocommerce-edit-address { .woocommerce-MyAccount-content { form > h3 { margin-block-start: 0px; } } } .woocommerce-form-login { max-width: 516px; margin: 0 auto; .show-password-input { top: .8rem; right: 1.2rem; } } } .wp-block-search { .wp-block-search__label { font-weight: normal; } .wp-block-search__input { padding: .9rem 1.1rem; border: 1px solid var(--wp--preset--color--black); } .wp-block-search__button { padding: 1rem 1.2rem; } } .wc-block-product-search { form { .wc-block-product-search__fields { display: flex; flex: auto; flex-wrap: nowrap; max-width: 100%; .wc-block-product-search__field { padding: .9rem 1.1rem; flex-grow: 1; border: 1px solid var(--wp--preset--color--black); font-size: inherit; font-family: inherit; } .wc-block-product-search__button { display: flex; background-color: var( --wp--preset--color--primary ); color: #fff; border: 1px solid var(--wp--preset--color--black); padding: 1rem 1.2rem; margin: 0 0 0 .7rem; } } } } .woocommerce-store-notice { color: var(--wp--preset--color--black); border-top: 2px solid var( --wp--preset--color--primary ); background: $tt2-gray; padding: 2rem; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; margin: 0; .woocommerce-store-notice__dismiss-link { float: right; margin-right: 4rem; } }