Created
November 23, 2015 19:19
-
-
Save jlavoie13/81d102842f38f5cc2f65 to your computer and use it in GitHub Desktop.
WooCommerce 2.4.10 SCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****************************************************************** | |
| Site Name: | |
| Author: | |
| Stylesheet: Responsive WooCommerce Styles | |
| ******************************************************************/ | |
| // Imports | |
| @import "variables"; | |
| @import "mixins"; | |
| @import "widgets"; | |
| @import "reviews"; | |
| //@import "unused"; | |
| /** | |
| * Globals | |
| */ | |
| p.demo_store { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| margin: 0; | |
| width: 100%; | |
| font-size: 1em; | |
| padding: 1em 0; | |
| text-align: center; | |
| background-color: $primary; | |
| color: $primarytext; | |
| z-index: 99998; | |
| box-shadow: 0 1px 1em rgba(0,0,0,0.2); | |
| } | |
| .admin-bar { | |
| p.demo_store { | |
| top: 32px; | |
| } | |
| } | |
| /** | |
| * General Styles | |
| */ | |
| .woocommerce { | |
| .blockUI.blockOverlay { | |
| position: relative; | |
| @include loader(); | |
| } | |
| .loader { | |
| @include loader(); | |
| } | |
| mark { | |
| background: none; | |
| color: inherit; | |
| font-weight: 400; | |
| } | |
| /** | |
| * Messaging | |
| */ | |
| .woocommerce-message, | |
| .woocommerce-error, | |
| .woocommerce-info { | |
| position: relative; | |
| padding: 1em 2em 1em 3.5em; | |
| margin: 0 0 2em; | |
| position: relative; | |
| background-color: #f5f6f0; | |
| color: $secondarytext; | |
| border-top: 3px solid $primary; | |
| list-style: none outside; | |
| @include clearfix(); | |
| width: auto; | |
| &:before { | |
| display: inline-block; | |
| position: absolute; | |
| top: 1em; | |
| left: 1.5em; | |
| } | |
| .button { | |
| float: right; | |
| margin-bottom: 0.25em; | |
| margin-left: 0.45em; | |
| font-weight: 400; | |
| } | |
| li { | |
| list-style: none outside; | |
| padding-left: 0; | |
| margin-left: 0; | |
| margin-bottom: 0; | |
| } | |
| } | |
| .woocommerce-message, | |
| .woocommerce-error { | |
| &:before { | |
| font-family: "WooCommerce"; | |
| } | |
| } | |
| .woocommerce-message { | |
| border-top-color: $color__light-green; | |
| &:before { | |
| content: "\e015"; | |
| color: $color__light-green; | |
| } | |
| } | |
| .woocommerce-info { | |
| border-top-color: $color__link; | |
| &:before { | |
| color: $color__link; | |
| font-family: "FontAwesome"; | |
| content: "\f18c"; | |
| } | |
| } | |
| .woocommerce-error { | |
| border-top-color: #b81c23; | |
| &:before { | |
| content: "\e016"; | |
| color: #b81c23; | |
| } | |
| } | |
| small.note { | |
| display: block; | |
| color: $subtext; | |
| font-size: .857em; | |
| margin-top: 10px; | |
| } | |
| .quantity { | |
| .qty { | |
| width: 50px; | |
| text-align: center; | |
| } | |
| } | |
| span.onsale { | |
| min-height: 3.236em; | |
| min-width: 3.6em; | |
| padding: 0.202em; | |
| font-size: 1em; | |
| font-weight: 700; | |
| position: absolute; | |
| text-align: center; | |
| line-height: 3.236; | |
| top: -0.5em; | |
| left: -0.5em; | |
| margin: 0; | |
| border-radius: 100%; | |
| background-color: $highlight; | |
| color: $highlightext; | |
| font-size: 0.857em; | |
| z-index: 1; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| p.stock { | |
| &.in-stock { | |
| font-size: 0.875em; | |
| font-weight: 700; | |
| } | |
| &.out-of-stock { | |
| display: inline-block; | |
| text-align: center; | |
| text-transform: uppercase; | |
| margin: 0; | |
| padding: 0 1em; | |
| font-weight: 600; | |
| line-height: 42px; | |
| height: 42px; | |
| color: #999; | |
| background-color: #DDD; | |
| cursor: not-allowed; | |
| } | |
| } | |
| .woocommerce-result-count { | |
| margin: 3em 0 0.5em; | |
| font-weight: 300; | |
| font-size: 0.875em; | |
| } | |
| .woocommerce-ordering { | |
| margin: 0 0 2em; | |
| select { | |
| vertical-align: top; | |
| } | |
| } | |
| /** | |
| * Buttons | |
| */ | |
| a.button, | |
| button.button, | |
| input.button, | |
| #respond input#submit { | |
| font-size: 100%; | |
| margin: 0; | |
| line-height: 42px; | |
| height: 42px; | |
| cursor: pointer; | |
| position: relative; | |
| font-family: inherit; | |
| text-decoration: none; | |
| overflow: visible; | |
| padding: 0 1em; | |
| font-weight: 600; | |
| border-radius: 0; | |
| left: auto; | |
| text-align: center; | |
| text-transform: uppercase; | |
| color: $secondarytext; | |
| background-color: $secondary; | |
| border: 0; | |
| white-space: nowrap; | |
| display: inline-block; | |
| background-image: none; | |
| box-shadow: none; | |
| -webkit-box-shadow: none; | |
| text-shadow: none; | |
| @include transition(all 0.25s ease-in-out); | |
| &:focus { | |
| outline: none; | |
| } | |
| &.loading { | |
| opacity: 0.25; | |
| padding-right: 2.618em; | |
| &:after { | |
| font-family: "WooCommerce"; | |
| content: "\e01c"; | |
| vertical-align: top; | |
| -webkit-font-smoothing: antialiased; | |
| font-weight: 400; | |
| position: absolute; | |
| top: .618em; | |
| right: 1em; | |
| -webkit-animation: spin 2s linear infinite; | |
| -moz-animation: spin 2s linear infinite; | |
| animation: spin 2s linear infinite; | |
| } | |
| } | |
| &.added { | |
| &:after { | |
| font-family: 'WooCommerce'; | |
| content: "\e017"; | |
| margin-left: .53em; | |
| vertical-align: bottom; | |
| } | |
| } | |
| &:hover, | |
| &:focus { | |
| background-color: $secondary - #111; | |
| text-decoration: none; | |
| background-image: none; | |
| color: $secondarytext; | |
| } | |
| &.alt, | |
| &.wc-forward { | |
| background-color: $primary; | |
| color: $primarytext; | |
| -webkit-font-smoothing: antialiased; | |
| &:hover, | |
| &:focus { | |
| background-color: darken($primary, 10%); | |
| color: $primarytext; | |
| } | |
| &.disabled, | |
| &:disabled, | |
| &:disabled[disabled], | |
| &.disabled:hover, | |
| &:disabled:hover, | |
| &:disabled[disabled]:hover { | |
| background-color: $primary; | |
| color: $primarytext; | |
| } | |
| } | |
| &:disabled, | |
| &.disabled, | |
| &:disabled[disabled] { | |
| color: inherit; | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| &:hover { | |
| color: inherit; | |
| background-color: $secondary; | |
| } | |
| } | |
| } | |
| .cart .button, | |
| .cart input.button { | |
| float: none; | |
| } | |
| .single_add_to_cart_button, | |
| p.stock.out-of-stock { | |
| width: 70%; | |
| max-width: 200px; | |
| } | |
| a.added_to_cart { | |
| padding-top: .5em; | |
| white-space: nowrap; | |
| display: inline-block; | |
| } | |
| a.remove { | |
| display: block; | |
| font-size: 1.5em; | |
| height: 1em; | |
| width: 1em; | |
| text-align: center; | |
| line-height: 1; | |
| border-radius: 100%; | |
| color: red !important; | |
| text-decoration: none; | |
| font-weight: 700; | |
| border: 0; | |
| &:hover { | |
| color: #fff !important; | |
| background: red; | |
| } | |
| } | |
| a.checkout-button, | |
| #place_order { | |
| height: 60px; | |
| line-height: 60px; | |
| font-size: 1.25em; | |
| } | |
| #place_order { | |
| padding: 0 2em; | |
| } | |
| } | |
| /** | |
| * Elements | |
| */ | |
| .woocommerce, | |
| .woocommerce-page { | |
| /** | |
| * Tables | |
| */ | |
| table {} | |
| .shop_table { | |
| th { | |
| font-weight: 700; | |
| padding: 9px 12px; | |
| } | |
| td { | |
| padding: 6px 12px; | |
| vertical-align: middle; | |
| small { | |
| font-weight: normal; | |
| } | |
| } | |
| tfoot td, | |
| tfoot th, | |
| tbody th { | |
| font-weight: 700; | |
| } | |
| } | |
| table.cart { | |
| td.actions { | |
| .coupon { | |
| label { | |
| display: none; | |
| } | |
| } | |
| } | |
| td.product-thumbnail { | |
| img { | |
| max-height: 80px; | |
| } | |
| } | |
| } | |
| table.order_details { | |
| tr.order_item { | |
| .product-name, | |
| .product-total { | |
| border-top: 0; | |
| border-bottom: 0; | |
| } | |
| .product-name { | |
| border-right: 0; | |
| } | |
| } | |
| } | |
| div.product table.cart { | |
| .product-thumbnail { | |
| min-width: 32px; | |
| } | |
| img { | |
| width: 32px; | |
| box-shadow: none; | |
| } | |
| th, | |
| td { | |
| vertical-align: middle; | |
| } | |
| td.actions { | |
| .coupon { | |
| .input-text { | |
| float: left; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| border: 1px solid darken( $secondary, 10% ); | |
| padding: 6px 6px 5px; | |
| margin: 0 4px 0 0; | |
| outline: 0; | |
| line-height: 1; | |
| } | |
| } | |
| } | |
| input { | |
| margin: 0; | |
| vertical-align: middle; | |
| line-height: 1; | |
| } | |
| } | |
| .shop_table_responsive {} | |
| .group_table { | |
| td.label { | |
| padding-right: 1em; | |
| padding-left: 1em; | |
| } | |
| td { | |
| vertical-align: top; | |
| padding-bottom: .5em; | |
| border: 0; | |
| } | |
| } | |
| .shop_attributes { | |
| border: 0; | |
| border-top: 1px dotted rgba(0,0,0,0.1); | |
| margin-bottom: 1.618em; | |
| width: 100%; | |
| th { | |
| width: 150px; | |
| font-weight: 700; | |
| padding: 8px; | |
| border-top: 0; | |
| border-bottom: 1px dotted rgba(0,0,0,0.1); | |
| margin: 0; | |
| line-height: 1.5; | |
| } | |
| td { | |
| font-style: italic; | |
| padding: 0; | |
| border-top: 0; | |
| border-bottom: 1px dotted rgba(0,0,0,0.1); | |
| margin: 0; | |
| line-height: 1.5; | |
| p { | |
| margin: 0; | |
| padding: 8px 0; | |
| } | |
| } | |
| .alt td, | |
| .alt th { | |
| background: rgba(0,0,0,0.025); | |
| } | |
| } | |
| .cart_totals table { | |
| th { | |
| border-right: 0; | |
| } | |
| td { | |
| border-left: 0; | |
| } | |
| } | |
| .woocommerce-checkout-review-order-table {} | |
| table.my_account_orders { | |
| margin-bottom: 2em; | |
| .order-actions { | |
| .button { | |
| margin: .125em 0 .125em .25em; | |
| height: 35px; | |
| line-height: 35px; | |
| } | |
| } | |
| } | |
| table.order_details { | |
| margin-bottom: 2em; | |
| } | |
| .customer_details {} | |
| td.product-name { | |
| dl.variation { | |
| margin: 0; | |
| } | |
| .variation_description { | |
| color: #787878; | |
| font-size: 0.875em; | |
| &:before { | |
| content: " - "; | |
| } | |
| } | |
| dl.variation { | |
| @include clearfix(); | |
| dt, | |
| dd { | |
| display: inline-block; | |
| float: left; | |
| margin-bottom: 1em; | |
| } | |
| dt { | |
| font-weight: 700; | |
| padding: 0 0 0.25em 0; | |
| margin: 0 5px 0 0; | |
| clear: left; | |
| } | |
| dd { | |
| font-size: 1em; | |
| padding: 0 0 0.25em 0; | |
| margin-bottom: 0; | |
| p:last-child { | |
| margin-bottom: 0; | |
| } | |
| } | |
| &:only-of-type { | |
| dd { | |
| p { | |
| margin-top: 0; | |
| } | |
| } | |
| } | |
| } | |
| p.backorder_notification { | |
| font-size: 0.83em; | |
| } | |
| } | |
| td.product-quantity { | |
| min-width: 80px; | |
| } | |
| /** | |
| * Forms | |
| */ | |
| form { | |
| .form-row { | |
| margin: 0 0 15px; | |
| label.hidden { | |
| visibility: hidden; | |
| } | |
| label.inline { | |
| display: inline; | |
| } | |
| .required { | |
| color: red; | |
| font-weight: 700; | |
| border: 0; | |
| } | |
| .input-checkbox { | |
| display: inline; | |
| margin: -2px 8px 0 0; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| textarea { | |
| height: 4em; | |
| line-height: 1.5; | |
| display: block; | |
| } | |
| &.woocommerce-invalid { | |
| .select2-container .select2-choice, | |
| input.input-text { | |
| border-color: $red; | |
| } | |
| select { | |
| outline: 1px ridge $red; | |
| } | |
| } | |
| &.woocommerce-validated { | |
| .select2-container .select2-choice, | |
| input.input-text { | |
| border-color: $green - #111; | |
| } | |
| select { | |
| outline: 1px ridge $green - #111; | |
| } | |
| } | |
| } | |
| } | |
| form.login, | |
| form.checkout_coupon, | |
| form.register { | |
| border: 1px solid #E6E6E6; | |
| margin: 2em 0; | |
| text-align: left; | |
| } | |
| form.login, | |
| form.register { | |
| padding: 0 1em; | |
| } | |
| form.login { | |
| p:not(.form-row) { | |
| font-size: 0.9em; | |
| font-weight: 300; | |
| } | |
| .button { | |
| margin-bottom: 0.5em; | |
| } | |
| .lost_password { | |
| margin-top: 0; | |
| } | |
| input[type="checkbox"] { | |
| margin-right: 8px; | |
| } | |
| } | |
| form.checkout_coupon { | |
| padding: 1em; | |
| .form-row { | |
| margin-bottom: 0; | |
| } | |
| .button { | |
| width: 100%; | |
| } | |
| } | |
| /** | |
| * Lists | |
| */ | |
| ul#shipping_method { | |
| list-style: none outside; | |
| margin: 0; | |
| padding: 0; | |
| li { | |
| margin: 0; | |
| padding: 0.25em 0; | |
| list-style: none outside; | |
| } | |
| .amount { | |
| font-weight: 700; | |
| } | |
| input[type="radio"], | |
| input[type="checkbox"] { | |
| margin-right: 6px; | |
| } | |
| } | |
| /** | |
| * Product loops | |
| */ | |
| .products ul, | |
| ul.products { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none outside; | |
| clear: both; | |
| @include clearfix(); | |
| li { | |
| list-style: none outside; | |
| margin-bottom: 2em; | |
| } | |
| } | |
| ul.products { | |
| li.product { | |
| max-width: 320px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| position: relative; | |
| text-align: center; | |
| .onsale { | |
| top: 0; | |
| right: 0; | |
| left: auto; | |
| margin: -0.5em -0.5em 0 0; | |
| } | |
| h3 { | |
| padding: 0; | |
| margin: 0; | |
| color: $color__body-text; | |
| font-size: 1em; | |
| font-weight: 600; | |
| line-height: 1.2; | |
| } | |
| a { | |
| text-decoration: none; | |
| img { | |
| display: block; | |
| margin: 0 0 0.675em; | |
| border: 1px solid $color__gray-border; | |
| width: 100%; | |
| @include transition(all 0.25s ease-in-out); | |
| } | |
| &:hover, | |
| &:focus { | |
| img { | |
| border-color: #E6E6E6; | |
| } | |
| h3 { | |
| color: $color__teal; | |
| } | |
| } | |
| } | |
| strong { | |
| display: block; | |
| } | |
| .button { | |
| margin-top: 1em; | |
| } | |
| .price { | |
| color: $color__body-text; | |
| display: block; | |
| font-weight: 300; | |
| font-size: 1em; | |
| del { | |
| color: inherit; | |
| opacity: 0.5; | |
| display: block; | |
| } | |
| ins { | |
| background: none; | |
| font-weight: 700; | |
| text-decoration: none; | |
| } | |
| .from { | |
| font-size: 0.67em; | |
| margin: -2px 0 0 0; | |
| text-transform: uppercase; | |
| color: rgba(desaturate($highlight, 75%), 0.5); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Single Product | |
| */ | |
| .single-product { | |
| &.woocommerce { | |
| .woocommerce-message { | |
| padding-bottom: 4.25em; | |
| .button { | |
| position: absolute; | |
| float: none; | |
| margin-left: 0; | |
| margin-bottom: 1em; | |
| bottom: 0; | |
| } | |
| } | |
| } | |
| div.product { | |
| margin-bottom: 0; | |
| position: relative; | |
| .product_title { | |
| clear: none; | |
| margin-top: 0; | |
| margin-bottom: 0.5em; | |
| padding: 0; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| font-size: 1.5em; | |
| } | |
| div[itemprop="offers"] { | |
| clear: both; | |
| span.price, | |
| p.price { | |
| color: $highlight; | |
| font-size: 1.25em; | |
| margin: 0; | |
| ins { | |
| background: inherit; | |
| font-weight: 600; | |
| text-decoration: none; | |
| } | |
| del { | |
| opacity: 0.5; | |
| margin-right: 10px; | |
| } | |
| } | |
| } | |
| .sku_wrapper { | |
| display: block; | |
| margin: 0.875em 0 1.5em; | |
| font-size: 0.875em; | |
| color: #878787; | |
| } | |
| div.images { | |
| margin-bottom: 2em; | |
| .woocommerce-main-image { | |
| display: block; | |
| cursor: zoom-in; | |
| } | |
| img { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .caption { | |
| color: #868686; | |
| display: block; | |
| font-size: 0.875em; | |
| text-align: center; | |
| margin-top: 1em; | |
| } | |
| } | |
| div.thumbnails { | |
| padding-top: 2em; | |
| @include clearfix(); | |
| a { | |
| float: left; | |
| width: 30.75%; | |
| margin-right: 3.8%; | |
| margin-bottom: 3.8%; | |
| } | |
| img { | |
| border: 1px solid $color__gray-border; | |
| } | |
| a.last { | |
| margin-right: 0; | |
| } | |
| a.first { | |
| clear: both; | |
| } | |
| &.columns-1 { | |
| a { | |
| width: 100%; | |
| margin-right: 0; | |
| float: none; | |
| } | |
| } | |
| &.columns-2 { | |
| a { | |
| width: 48%; | |
| } | |
| } | |
| &.columns-4 { | |
| a { | |
| width: 22.05%; | |
| } | |
| } | |
| &.columns-5 { | |
| a { | |
| width: 16.9%; | |
| } | |
| } | |
| } | |
| div.summary {} | |
| p.cart { | |
| margin-bottom: 2em; | |
| @include clearfix(); | |
| } | |
| form.cart { | |
| margin-bottom: 2em; | |
| @include clearfix(); | |
| div.quantity { | |
| display: inline-block; | |
| margin: 0 12px 0 0; | |
| } | |
| table { | |
| border-width: 0 0 1px 0; | |
| td { | |
| padding-left: 0; | |
| } | |
| div.quantity { | |
| float: none; | |
| margin: 0; | |
| } | |
| small.stock { | |
| display: block; | |
| float: none; | |
| } | |
| } | |
| .single_variation { | |
| margin-bottom: 1em; | |
| .price { | |
| font-size: 1em; | |
| font-weight: 600; | |
| } | |
| } | |
| .variations_button { | |
| @include clearfix; | |
| } | |
| .single_variation_wrap { | |
| width: 265px; | |
| } | |
| .woocommerce-variation-description { | |
| p { | |
| margin: 0; | |
| } | |
| } | |
| .variations { | |
| margin-bottom: 1em; | |
| width: 265px; | |
| label { | |
| display: block; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| select { | |
| width: 100%; | |
| float: left; | |
| } | |
| .variation { | |
| margin-bottom: 0.5em; | |
| } | |
| } | |
| .button { | |
| display: inline-block; | |
| vertical-align: top; | |
| } | |
| } | |
| .upsells { | |
| padding-top: 2em; | |
| @include clearfix; | |
| } | |
| } | |
| } | |
| .woocommerce-tabs { | |
| ul.tabs { | |
| list-style: none; | |
| padding: 0; | |
| margin: 1.618em 0; | |
| overflow: hidden; | |
| position: relative; | |
| li { | |
| border: 1px solid $color__gray-border; | |
| display: block; | |
| position: relative; | |
| z-index: 0; | |
| margin: 0; | |
| padding: 0; | |
| a { | |
| display: block; | |
| padding: 0.5em 1em; | |
| font-weight: 300; | |
| color: $color__body-text; | |
| text-decoration: none; | |
| &:hover { | |
| text-decoration: none; | |
| color: #777; | |
| } | |
| } | |
| &.active { | |
| background: #FFF; | |
| z-index: 2; | |
| a { | |
| color: inherit; | |
| font-weight: 400; | |
| } | |
| } | |
| &:not(:first-child) { | |
| margin-top: -1px; | |
| } | |
| } | |
| &:before { | |
| position: absolute; | |
| content: " "; | |
| width: 100%; | |
| bottom: 0; | |
| left: 0; | |
| border-bottom: 1px solid $color__gray-border; | |
| z-index: 1; | |
| } | |
| } | |
| .panel { | |
| margin: 0 0 2em; | |
| padding: 0; | |
| } | |
| } | |
| /** | |
| * Archives | |
| */ | |
| .post-type-archive-product, | |
| .tax-product_cat { | |
| .page-title, | |
| .term-description, | |
| .page-description { | |
| text-align: center; | |
| } | |
| } | |
| .post-type-archive-product { | |
| ul.products { | |
| margin-top: 3em; | |
| } | |
| } | |
| /** | |
| * Orders | |
| */ | |
| .woocommerce-order-received { | |
| .woocommerce { | |
| h2 { | |
| font-size: 1.25em; | |
| } | |
| } | |
| } | |
| /** | |
| * My Account | |
| */ | |
| .woocommerce-account { | |
| &.woocommerce-edit-account { | |
| form { | |
| margin-top: 1em; | |
| } | |
| } | |
| .woocommerce { | |
| h2 { | |
| font-size: 1.25em; | |
| } | |
| .myaccount_user, | |
| .order-info { | |
| margin-bottom: 1.5em; | |
| } | |
| input.button[name=login], | |
| input.button[name=register] { | |
| background-color: $primary; | |
| color: $primarytext; | |
| &:hover, | |
| &:focus { | |
| background-color: darken($primary, 10%); | |
| color: $primarytext; | |
| } | |
| } | |
| } | |
| form.login { | |
| padding: 0 0 1em; | |
| margin: 0 0 1em; | |
| border: 0; | |
| border-bottom: 1px solid #E6E6E6; | |
| } | |
| form.register { | |
| padding: 0; | |
| margin: 0; | |
| border: 0; | |
| } | |
| .addresses { | |
| .title { | |
| @include clearfix(); | |
| h3 { | |
| float: left; | |
| } | |
| .edit { | |
| float: right; | |
| line-height: 1.5; | |
| margin: 1.35em 0; | |
| } | |
| } | |
| } | |
| ol.commentlist.notes { | |
| li.note { | |
| p.meta { | |
| font-weight: 700; | |
| margin-bottom: 0; | |
| } | |
| .description { | |
| p:last-child { | |
| margin-bottom: 0; | |
| } | |
| } | |
| } | |
| } | |
| fieldset { | |
| border: 0; | |
| margin: 1.35em 0 0; | |
| padding: 3.675em 0 0 0; | |
| position: relative; | |
| legend { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| font-weight: 700; | |
| padding: 10px 1em; | |
| text-align: center; | |
| background: $color__light-gray; | |
| } | |
| } | |
| } | |
| /** | |
| * Cart | |
| */ | |
| .woocommerce-cart { | |
| .woocommerce { | |
| h2 { | |
| font-size: 1.25em; | |
| } | |
| } | |
| .wc-proceed-to-checkout { | |
| @include clearfix; | |
| padding: 1em 0; | |
| a.checkout-button { | |
| display: block; | |
| text-align: center; | |
| margin-bottom: 0.25em; | |
| } | |
| } | |
| .cart-collaterals { | |
| margin-top: 2em; | |
| p:not(.form-row) { | |
| margin: 0; | |
| line-height: 1.5; | |
| } | |
| .woocommerce-shipping-calculator { | |
| margin-top: 0.5em; | |
| .button { | |
| width: 100%; | |
| float: none; | |
| display: block; | |
| } | |
| .shipping-calculator-button { | |
| display: inline-block; | |
| margin-bottom: 5px; | |
| &:after { | |
| margin-left: 5px; | |
| font-family: "FontAwesome"; | |
| content: "\f103"; | |
| } | |
| } | |
| .shipping-calculator-form { | |
| margin-bottom: 10px; | |
| } | |
| } | |
| .cart_totals { | |
| p { | |
| small { | |
| color: $subtext; | |
| font-size: 0.83em; | |
| } | |
| } | |
| table { | |
| margin: 0 0 6px; | |
| th { | |
| text-align: left; | |
| width: 25%; | |
| } | |
| td, | |
| th { | |
| vertical-align: middle; | |
| padding: 1em; | |
| } | |
| small { | |
| color: $subtext; | |
| } | |
| select { | |
| width: 100%; | |
| } | |
| } | |
| .discount td { | |
| color: $highlight; | |
| } | |
| } | |
| .cross-sells { | |
| ul.products { | |
| li.product { | |
| margin-top: 0; | |
| } | |
| } | |
| } | |
| } | |
| p.woocommerce-shipping-contents { | |
| margin: 0; | |
| } | |
| } | |
| /** | |
| * Checkout | |
| */ | |
| .woocommerce-checkout { | |
| #billing_country_field, | |
| #shipping_country_field { | |
| strong { | |
| font-weight: 300 !important; | |
| } | |
| } | |
| .checkout { | |
| .col-2 { | |
| h3#ship-to-different-address { | |
| float: left; | |
| clear: none; | |
| font-size: 1.125em; | |
| label { | |
| margin-right: 8px; | |
| margin-bottom: 0; | |
| font-weight: 600; | |
| } | |
| } | |
| .notes { | |
| clear: left; | |
| } | |
| .form-row-first { | |
| clear: left; | |
| } | |
| } | |
| div.create-account { | |
| padding: 1em 1em 0.5em; | |
| border: 1px solid #E6E6E6; | |
| p { | |
| margin-top: 0; | |
| &:not(.form-row) { | |
| font-size: 0.9em; | |
| font-weight: 300; | |
| } | |
| } | |
| small { | |
| font-size: 11px; | |
| color: $subtext; | |
| font-weight: normal; | |
| } | |
| } | |
| div.shipping-address { | |
| padding: 0; | |
| clear: left; | |
| width: 100%; | |
| } | |
| .shipping_address { | |
| clear: both; | |
| } | |
| } | |
| #payment { | |
| border: 1px solid #E6E6E6; | |
| margin: 2em 0 1em; | |
| ul.payment_methods { | |
| @include clearfix; | |
| text-align: left; | |
| padding: 0; | |
| margin: 0; | |
| list-style: none outside; | |
| li { | |
| line-height: 2; | |
| text-align: left; | |
| margin: 0; | |
| font-weight: normal; | |
| border-bottom: 1px solid #E6E6E6; | |
| padding: 1em; | |
| label { | |
| display: inline; | |
| } | |
| input { | |
| margin: 0 8px 0 0; | |
| } | |
| img { | |
| vertical-align: middle; | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| box-shadow: none; | |
| } | |
| img[alt="visa"] { | |
| margin-left: 5px; | |
| } | |
| img + img { | |
| margin-left: 2px; | |
| } | |
| } | |
| } | |
| div.form-row { | |
| padding: 2em 1em; | |
| margin: 0; | |
| text-align: center; | |
| } | |
| div.payment_box { | |
| position: relative; | |
| padding: 0; | |
| margin: 0.5em 0 0 27px; | |
| font-size: 0.92em; | |
| fieldset { | |
| margin: 0.5em 0 0; | |
| padding: 0; | |
| border: 0; | |
| } | |
| .wc-authorize-net-aim-new-payment-method-form { | |
| font-style: normal; | |
| label { | |
| display: block; | |
| line-height: 1.4; | |
| } | |
| select, | |
| .select2-container { | |
| width: 5.5em !important; | |
| margin-right: 10px; | |
| } | |
| } | |
| .wc-credit-card-form-card-number, | |
| .wc-credit-card-form-card-expiry, | |
| .wc-credit-card-form-card-cvc { | |
| font-size: 1.5em; | |
| padding: 8px; | |
| background-repeat: no-repeat; | |
| background-position: right; | |
| &.visa { | |
| background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/visa.png'); | |
| } | |
| &.mastercard { | |
| background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/mastercard.png'); | |
| } | |
| &.laser { | |
| background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/laser.png'); | |
| } | |
| &.dinersclub { | |
| background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/diners.png'); | |
| } | |
| &.maestro { | |
| background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/maestro.png'); | |
| } | |
| &.jcb { | |
| background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/jcb.png'); | |
| } | |
| &.amex { | |
| background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/amex.png'); | |
| } | |
| &.discover { | |
| background-image: url('#{$plugins-path}woocommerce/assets/images/icons/credit-cards/discover.png'); | |
| } | |
| } | |
| span.help { | |
| font-size: .857em; | |
| color: $subtext; | |
| font-weight: normal; | |
| } | |
| .form-row { | |
| margin: 0 0 1em; | |
| } | |
| p { | |
| margin: 0; | |
| } | |
| } | |
| .payment_method_paypal { | |
| .about_paypal { | |
| float: right; | |
| line-height: 52px; | |
| font-size: 0.83em; | |
| } | |
| img { | |
| max-height: 52px; | |
| vertical-align: middle; | |
| } | |
| } | |
| .terms { | |
| @include clearfix; | |
| margin-top: 1em; | |
| margin-bottom: 0; | |
| text-align: center; | |
| max-width: 375px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| label { | |
| width: 87%; | |
| float: right; | |
| } | |
| .input-checkbox { | |
| margin-right: 0; | |
| margin-left: 8px; | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Order Page | |
| */ | |
| .woocommerce-order-received { | |
| ul.order_details { | |
| @include clearfix(); | |
| margin: 0 0 1.5em; | |
| list-style: none; | |
| li { | |
| float: left; | |
| margin-right: 2em; | |
| text-transform: uppercase; | |
| font-size: 0.715em; | |
| line-height: 1; | |
| border-right: 1px dashed darken( $secondary, 10% ); | |
| padding-right: 2em; | |
| margin-left: 0; | |
| padding-left: 0; | |
| strong { | |
| display: block; | |
| font-size: 1.4em; | |
| text-transform: none; | |
| line-height: 1.5; | |
| } | |
| &:last-of-type { | |
| border: none; | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Media Queries | |
| */ | |
| /** | |
| * Specifically to make tables work on mobile | |
| */ | |
| @media only screen and (max-width: 767px) { | |
| .woocommerce, | |
| .woocommerce-page { | |
| /** | |
| * Tables | |
| */ | |
| table.shop_table_responsive { | |
| border: 1px solid #E3E3DD; | |
| border-bottom: 0; | |
| thead { | |
| display: none; | |
| } | |
| tbody { | |
| tr:first-child { | |
| td:first-child { | |
| border-top: 0; | |
| } | |
| } | |
| th { | |
| display: none; | |
| } | |
| } | |
| tr { | |
| border-bottom: 1px solid #E3E3DD; | |
| display: block; | |
| td { | |
| display: block; | |
| border: 0; | |
| &:before { | |
| content: attr(data-title) ': '; | |
| font-weight: 700; | |
| } | |
| } | |
| } | |
| } | |
| table.my_account_orders { | |
| tr { | |
| td { | |
| &.order-actions { | |
| text-align: left; | |
| &:before { | |
| display: none; | |
| } | |
| .button { | |
| float: none; | |
| margin: 0.125em 0.25em 0.125em 0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| table.cart { | |
| border: 0; | |
| thead, | |
| th { | |
| display: none; | |
| } | |
| tr { | |
| display: block; | |
| position: relative; | |
| @include clearfix(); | |
| &.cart_item { | |
| border: 1px solid #E3E3DD; | |
| margin-bottom: 2em; | |
| } | |
| &.cart-actions { | |
| border: 0; | |
| margin-top: 1em; | |
| margin-bottom: 1em; | |
| } | |
| } | |
| td { | |
| display: block; | |
| border: 0; | |
| padding: 0; | |
| label { | |
| font-weight: 700; | |
| } | |
| &.product-remove { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| padding: 1em; | |
| } | |
| &.product-price, | |
| &.product-quantity, | |
| &.product-date { | |
| padding: 0.5em 1em; | |
| } | |
| &.product-thumbnail { | |
| padding: 1em 1em 0.5em; | |
| float: left; | |
| } | |
| &.product-name { | |
| padding: 1em 0.5em 0.5em; | |
| } | |
| &.product-price { | |
| &:before { | |
| content: "Price: "; | |
| font-weight: 700; | |
| margin-right: 5px; | |
| } | |
| } | |
| &.product-quantity { | |
| .quantity:before { | |
| content: "Qty: "; | |
| font-weight: 700; | |
| margin-right: 5px; | |
| } | |
| } | |
| &.product-subtotal { | |
| padding: 0.5em 1em 1em; | |
| .amount:before { | |
| content: "Total: "; | |
| font-weight: 700; | |
| margin-right: 5px; | |
| } | |
| } | |
| &.actions { | |
| .button[name="update_cart"] { | |
| width: 100%; | |
| clear: both; | |
| margin-top: 1.675em; | |
| } | |
| } | |
| input, | |
| .button, | |
| .input-text { | |
| box-sizing: border-box; | |
| } | |
| } | |
| } | |
| } | |
| .woocommerce-cart .cart-collaterals .cart_totals { | |
| table { | |
| border-top: 0; | |
| border-left: 0; | |
| border-right: 0; | |
| tr, | |
| td, | |
| th { | |
| display: block; | |
| width: 100%; | |
| } | |
| td { | |
| border-top: 0; | |
| border-bottom: 0; | |
| border-left: 1px solid #E3E3DD; | |
| border-right: 1px solid #E3E3DD; | |
| } | |
| th { | |
| border-right: 1px solid #E3E3DD; | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Large Mobile Devices | |
| */ | |
| @media only screen and (min-width: 481px) { | |
| /** | |
| * Elements | |
| */ | |
| .woocommerce, | |
| .woocommerce-page { | |
| /** | |
| * Product loops | |
| */ | |
| .related, | |
| .upsells.products { | |
| @include clearfix(); | |
| clear: both; | |
| } | |
| ul.products { | |
| @include flexbox(flex); | |
| @include flex-wrap(wrap); | |
| @include justify-content(flex-start); | |
| li.product { | |
| display: inline-block; | |
| margin-left: 0; | |
| margin-right: 4%; | |
| width: 47.89%; // safari is being a bitch | |
| max-width: none; | |
| } | |
| li.last, | |
| li:nth-child(even) { | |
| margin-right: 0 !important; | |
| } | |
| } | |
| } | |
| /** | |
| * Flexbox Fallback | |
| */ | |
| .no-flexbox { | |
| .woocommerce, | |
| .woocommerce-page { | |
| ul.products { | |
| li.product { | |
| float: left; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Tablet | |
| */ | |
| @media only screen and (min-width: $screen-sm-min) { | |
| /** | |
| * General Styles | |
| */ | |
| .woocommerce { | |
| /** | |
| * Messaging | |
| */ | |
| .woocommerce-message, | |
| .woocommerce-error, | |
| .woocommerce-info { | |
| padding: 1em 9em 1em 3.5em !important; | |
| .button { | |
| position: absolute; | |
| bottom: 0; | |
| left: auto; | |
| right: 1.5em; | |
| top: 0; | |
| margin: auto !important; | |
| width: 120px; | |
| text-align: center; | |
| } | |
| } | |
| /** | |
| * Buttons | |
| */ | |
| .single_add_to_cart_button { | |
| width: 249px; | |
| } | |
| #place_order { | |
| padding: 0 3em; | |
| } | |
| } | |
| /** | |
| * Elements | |
| */ | |
| .woocommerce, | |
| .woocommerce-page { | |
| /** | |
| * Tables | |
| */ | |
| table.cart { | |
| label { | |
| font-size: 0.875em; | |
| } | |
| .form-row { | |
| margin: 0; | |
| } | |
| tr { | |
| border: 1px solid #E9E9E9; | |
| } | |
| tr.cart_item { | |
| background: none !important; | |
| } | |
| th.product-name { | |
| text-align: left; | |
| } | |
| td, | |
| th { | |
| border-left: 0; | |
| border-right: 0; | |
| padding: 1em; | |
| } | |
| td.product-remove { | |
| padding-left: 0.5em; | |
| padding-right: 0.5em; | |
| width: 30px; | |
| border-right: 0; | |
| vertical-align: top; | |
| } | |
| td.product-thumbnail { | |
| padding-left: 0; | |
| padding-right: 0; | |
| width: 80px; | |
| vertical-align: top; | |
| img { | |
| display: block; | |
| max-height: 80px; | |
| } | |
| } | |
| td.product-name { | |
| padding-left: 1em; | |
| padding-right: 2em; | |
| } | |
| td.product-price, | |
| td.product-quantity, | |
| td.product-subtotal { | |
| text-align: center; | |
| } | |
| td.actions { | |
| background-color: $color__light-gray; | |
| text-align: right; | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| .coupon { | |
| float: left; | |
| width: 70%; | |
| } | |
| .input-text { | |
| width: 60%; | |
| float: left; | |
| } | |
| .button[name="apply_coupon"] { | |
| max-width: 200px; | |
| float: left; | |
| margin-left: 1%; | |
| width: 39%; | |
| } | |
| .button[name="update_cart"] { | |
| max-width: 200px; | |
| float: right; | |
| width: 30%; | |
| } | |
| } | |
| } | |
| .cart_totals table { | |
| th, | |
| td { | |
| padding: 1em; | |
| } | |
| } | |
| table.my_account_orders { | |
| th, | |
| td { | |
| padding: 0.5em 1em; | |
| vertical-align: middle; | |
| } | |
| } | |
| /** | |
| * Forms | |
| */ | |
| form { | |
| .form-row { | |
| @include clearfix(); | |
| label { | |
| display: block; | |
| &.checkbox { | |
| display: inline; | |
| } | |
| } | |
| } | |
| .form-row-first, | |
| .form-row-last { | |
| float: left; | |
| width: 48%; | |
| overflow: visible; | |
| } | |
| .form-row-last { | |
| float: right; | |
| } | |
| .form-row-wide { | |
| clear: both; | |
| } | |
| } | |
| form.login { | |
| .button { | |
| margin-bottom: 0; | |
| margin-right: 0.5em; | |
| } | |
| } | |
| /** | |
| * General layout styles | |
| */ | |
| .col2-set { | |
| @include clearfix(); | |
| width: 100%; | |
| .col-1 { | |
| float: left; | |
| width: 48%; | |
| } | |
| .col-2 { | |
| float: right; | |
| width: 48%; | |
| } | |
| } | |
| /** | |
| * Product loops | |
| */ | |
| ul.products { | |
| li.product { | |
| width: 22.95%; // safari is being a bitch | |
| margin-right: 2.66666666667%; | |
| } | |
| li:nth-child(even) { | |
| margin-right: 2.66666666667% !important; | |
| } | |
| li.last { | |
| margin-right: 0 !important; | |
| } | |
| } | |
| .upsells, | |
| .cross-sells { | |
| ul.products { | |
| li.product { | |
| margin-bottom: 1em; | |
| } | |
| } | |
| } | |
| .woocommerce-result-count { | |
| position: relative; | |
| min-height: 1px; | |
| float: left; | |
| margin-top: 50px; | |
| margin-bottom: 30px; | |
| width: 65%; | |
| height: 44px; | |
| line-height: 44px; | |
| } | |
| .woocommerce-ordering { | |
| position: relative; | |
| min-height: 1px; | |
| float: right; | |
| margin-top: 50px; | |
| margin-bottom: 30px; | |
| width: 35%; | |
| max-width: 270px; | |
| } | |
| } | |
| /** | |
| * Single Product | |
| */ | |
| .single-product { | |
| div.product { | |
| div.images { | |
| float: left; | |
| width: 45%; | |
| } | |
| div.thumbnails {} | |
| div.summary { | |
| float: right; | |
| width: 48%; | |
| } | |
| form.cart { | |
| .single_variation_wrap, | |
| .variations { | |
| width: 315px; | |
| } | |
| } | |
| } | |
| } | |
| .woocommerce-tabs { | |
| clear: both; | |
| ul.tabs { | |
| @include menu(); | |
| height: 44px; | |
| li { | |
| margin: 0 -2px 0; | |
| width: 33.3333%; | |
| height: 44px; | |
| text-align: center; | |
| &.active { | |
| border-bottom-color: #FFF; | |
| } | |
| &:only-of-type, | |
| &:first-child { | |
| margin-left: 0; | |
| } | |
| a { | |
| height: 44px; | |
| @include truncateText(ellipsis); | |
| width: 100%; | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Cart | |
| */ | |
| .woocommerce-cart { | |
| .cart-collaterals { | |
| @include clearfix(); | |
| width: 100%; | |
| .related { | |
| width: 30.75%; | |
| float: left; | |
| } | |
| .cross-sells { | |
| width: 48%; | |
| float: left; | |
| ul.products { | |
| float: none; | |
| li { | |
| width: 48%; | |
| } | |
| } | |
| } | |
| .shipping_calculator { | |
| width: 48%; | |
| @include clearfix(); | |
| clear: right; | |
| float: right; | |
| .col2-set { | |
| .col-1, | |
| .col-2 { | |
| width: 47%; | |
| } | |
| } | |
| } | |
| .cart_totals { | |
| float: right; | |
| width: 48%; | |
| } | |
| } | |
| } | |
| /** | |
| * Checkout | |
| */ | |
| .woocommerce-checkout { | |
| .checkout { | |
| .col-2 { | |
| h3#ship-to-different-address { | |
| font-size: 1.25em; | |
| } | |
| } | |
| } | |
| #payment { | |
| .form-row { | |
| select { | |
| width: auto; | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * My Account | |
| */ | |
| .woocommerce-account { | |
| .form-row-first, | |
| .form-row-last { | |
| width: 49% !important; | |
| } | |
| form.login { | |
| border: 0; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| } | |
| } | |
| /** | |
| * Desktop | |
| */ | |
| @media only screen and (min-width: $screen-md-min) { | |
| /** | |
| * Single Product | |
| */ | |
| .single-product { | |
| div.product { | |
| div.images { | |
| .woocommerce-main-image { | |
| position: relative; | |
| } | |
| .caption { | |
| position: absolute; | |
| width: 200px; | |
| right: 0; | |
| bottom: 0; | |
| text-align: right; | |
| margin-top: 0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Large Screens | |
| */ | |
| @media only screen and (min-width: $screen-lg-min) {} | |
| /** | |
| * Print Styles | |
| */ | |
| @media print { | |
| @import "reports-print"; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****************************************************************** | |
| Site Name: | |
| Author: | |
| Stylesheet: Responsive WooCommerce Styles | |
| ******************************************************************/ | |
| /** | |
| * Animation | |
| */ | |
| @-moz-keyframes spin { | |
| 100% { | |
| -moz-transform: rotate(360deg); | |
| } | |
| } | |
| @-webkit-keyframes spin { | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes spin { | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform:rotate(360deg); | |
| } | |
| } | |
| /** | |
| * Objects | |
| */ | |
| @mixin menu() { | |
| @include clearfix; | |
| li { | |
| display: inline-block; | |
| } | |
| } | |
| @mixin mediaright() { | |
| @include clearfix; | |
| img { | |
| float: right; | |
| height: auto; | |
| } | |
| } | |
| @mixin medialeft() { | |
| @include clearfix; | |
| img { | |
| float: right; | |
| height: auto; | |
| } | |
| } | |
| @mixin ir() { | |
| display: block; | |
| text-indent: -9999px; | |
| position: relative; | |
| height: 1em; | |
| width: 1em; | |
| } | |
| @mixin icon( $glyph: "\e001" ) { | |
| font-family: 'WooCommerce'; | |
| speak: none; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| margin: 0; | |
| text-indent: 0; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| text-align: center; | |
| content: $glyph; | |
| } | |
| @mixin iconbefore( $glyph: "\e001" ) { | |
| font-family: 'WooCommerce'; | |
| speak: none; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| margin-right: .618em; | |
| content: $glyph; | |
| text-decoration: none; | |
| } | |
| @mixin iconafter( $glyph: "\e001" ) { | |
| font-family: 'WooCommerce'; | |
| speak: none; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| margin-left: .618em; | |
| content: $glyph; | |
| text-decoration: none; | |
| } | |
| @mixin loader() { | |
| &:before { | |
| height: 1em; | |
| width: 1em; | |
| display: block; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin-left: -.5em; | |
| margin-top: -.5em; | |
| display: block; | |
| -webkit-animation: spin 1s ease-in-out infinite; | |
| -moz-animation: spin 1s ease-in-out infinite; | |
| animation: spin 1s ease-in-out infinite; | |
| content: ""; | |
| background: url('#{$plugins-path}woocommerce/assets/images/icons/loader.svg') center center; | |
| background-size: cover; | |
| line-height: 1; | |
| text-align: center; | |
| font-size: 2em; | |
| color: rgba(#000,0.75); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****************************************************************** | |
| Site Name: | |
| Author: | |
| Stylesheet: A print stylesheet for reports. Ensures reports look good when printed. | |
| ******************************************************************/ | |
| * { | |
| background: transparent !important; | |
| color: black !important; | |
| text-shadow: none !important; | |
| filter:none !important; | |
| -ms-filter: none !important; | |
| font-size: 9pt !important; | |
| opacity: 1; | |
| -webkit-transition: none !important; | |
| } | |
| @page { | |
| margin: .5cm; | |
| } | |
| #adminmenuwrap, | |
| #adminmenuback, | |
| #wpadminbar, | |
| #screen-meta-links, | |
| .updated, | |
| .update-nag, | |
| .woocommerce-reports-wide .postbox h3.stats_range .export_csv, | |
| .woocommerce-reports-wrap .postbox h3.stats_range .export_csv, | |
| .woocommerce-reports-wide .button, | |
| #wpfooter, | |
| .woo-nav-tab-wrapper { | |
| display: none; | |
| } | |
| h2 .nav-tab { | |
| line-height: 14px; | |
| } | |
| .woocommerce-reports-wide .postbox h3.stats_range ul li.custom, | |
| .woocommerce-reports-wrap .postbox h3.stats_range ul li.custom, | |
| .woocommerce-reports-wide .postbox h3.stats_range ul li a, | |
| .woocommerce-reports-wrap .postbox h3.stats_range ul li a { | |
| padding: 5px; | |
| line-height: 14px; | |
| } | |
| #wpcontent { | |
| margin-left: 0; | |
| } | |
| .woocommerce-reports-wide .postbox .chart-with-sidebar .chart-sidebar, | |
| .woocommerce-reports-wrap .postbox .chart-with-sidebar .chart-sidebar { | |
| margin-left: -130px; | |
| width: 130px; | |
| display: block; | |
| } | |
| .woocommerce-reports-wide .postbox .chart-with-sidebar, | |
| .woocommerce-reports-wrap .postbox .chart-with-sidebar { | |
| padding-left: 130px; | |
| } | |
| .chart-legend { | |
| overflow: hidden; | |
| zoom: 1; | |
| } | |
| .chart-legend li, | |
| .chart-legend li { | |
| padding: .25em .5em !important; | |
| box-shadow: none !important; | |
| border-bottom: 1px solid gray !important; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****************************************************************** | |
| Site Name: | |
| Author: | |
| Stylesheet: Responsive WooCommerce Styles | |
| ******************************************************************/ | |
| /** | |
| * Star font for ratings | |
| */ | |
| @font-face { | |
| font-family: 'star'; | |
| src: url('#{$plugins-path}woocommerce/assets/fonts/star.eot'); | |
| src: url('#{$plugins-path}woocommerce/assets/fonts/star.eot?#iefix') format('embedded-opentype'), | |
| url('#{$plugins-path}woocommerce/assets/fonts/star.woff') format('woff'), | |
| url('#{$plugins-path}woocommerce/assets/fonts/star.ttf') format('truetype'), | |
| url('#{$plugins-path}woocommerce/assets/fonts/star.svg#star') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .woocommerce, | |
| .woocommerce-page { | |
| /** | |
| * Reviews | |
| */ | |
| #reviews { | |
| clear: both; | |
| h2 { | |
| font-size: 1.875em; | |
| } | |
| h2 small { | |
| float: right; | |
| font-size: 15px; | |
| line-height: 21px; | |
| margin: 10px 0 0 0; | |
| a { | |
| text-decoration:none; | |
| color: #444; | |
| } | |
| } | |
| h3 { | |
| margin: 0; | |
| font-size: 1.25em; | |
| } | |
| #respond { | |
| margin: 0; | |
| border: 0; | |
| padding: 0; | |
| } | |
| #comment { | |
| height: 75px; | |
| } | |
| #comments { | |
| .add_review { | |
| @include clearfix; | |
| } | |
| h2 { | |
| font-size: 1em; | |
| font-style: italic; | |
| font-weight: 300; | |
| padding: 0; | |
| margin: 1em 0 0; | |
| display: none; | |
| } | |
| ol.commentlist { | |
| @include clearfix; | |
| margin: 1.875em 0 1.5em; | |
| width: 100%; | |
| background: none; | |
| list-style: none; | |
| border: 1px solid $color__gray-border; | |
| border-bottom: 0; | |
| li { | |
| padding: 15px 15px 0; | |
| margin: 0; | |
| border: 0; | |
| position: relative; | |
| background: 0; | |
| border-bottom: 1px solid $color__gray-border; | |
| img.avatar { | |
| float: left; | |
| position: absolute; | |
| top: 0; | |
| left: 20px; | |
| padding: 3px; | |
| width: 32px; | |
| height: auto; | |
| margin: 0; | |
| line-height: 1; | |
| @include border-radius(100px); | |
| } | |
| .comment-text { | |
| @include clearfix; | |
| p { | |
| margin: 0 0 1em; | |
| } | |
| p.meta { | |
| font-size: 0.875em; | |
| margin: 0 0 0.5em; | |
| [itemprop="datePublished"] { | |
| font-weight: 300; | |
| } | |
| } | |
| } | |
| } | |
| ul.children { | |
| list-style: none outside; | |
| margin: 20px 0 0 50px; | |
| .star-rating { | |
| display: none; | |
| } | |
| } | |
| #respond { | |
| border: 1px solid #DFDFDF; | |
| padding: 1em 1em 0; | |
| margin: 20px 0 0 50px; | |
| } | |
| } | |
| .commentlist > li:before { | |
| content: ""; | |
| } | |
| } | |
| } | |
| /** | |
| * Star ratings | |
| */ | |
| .star-rating { | |
| float: right; | |
| overflow: hidden; | |
| position: relative; | |
| height: 1em; | |
| line-height: 1em; | |
| font-size: 0.875em; | |
| width: 5.6em; | |
| margin-top: 3px; | |
| font-family: 'star'; | |
| &:before { | |
| content: "\73\73\73\73\73"; | |
| color: $star; | |
| 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: $star; | |
| } | |
| } | |
| .woocommerce-product-rating { | |
| @include clearfix; | |
| line-height: 2em; | |
| margin-bottom: 0.25em; | |
| display: block; | |
| .star-rating { | |
| margin: 0.5em 4px 0 0; | |
| float: left; | |
| font-size: 1em; | |
| } | |
| } | |
| .products { | |
| .star-rating { | |
| display: block; | |
| margin: 0 auto 1em; | |
| float: none; | |
| } | |
| } | |
| .hreview-aggregate { | |
| .star-rating { | |
| margin: 10px 0 0 0; | |
| } | |
| } | |
| p.stars { | |
| position: relative; | |
| font-size: 0.875em; | |
| a { | |
| display: inline-block; | |
| font-weight: 700; | |
| margin-right: 1em; | |
| text-indent: -9999px; | |
| position: relative; | |
| &:last-child { | |
| border-right: 0; | |
| } | |
| &.star-1, | |
| &.star-2, | |
| &.star-3, | |
| &.star-4, | |
| &.star-5 { | |
| border-right: 1px solid $input__border-color; | |
| &:after { | |
| font-family: "WooCommerce"; | |
| text-indent: 0; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| color: $star; | |
| } | |
| } | |
| &.star-1 { | |
| width: 2em; | |
| &:after { | |
| content: "\e021"; | |
| } | |
| &:hover:after, | |
| &.active:after { | |
| content: "\e020" | |
| } | |
| } | |
| &.star-2 { | |
| width: 3em; | |
| &:after { | |
| content: "\e021\e021"; | |
| } | |
| &:hover:after, | |
| &.active:after { | |
| content: "\e020\e020" | |
| } | |
| } | |
| &.star-3 { | |
| width: 4em; | |
| &:after { | |
| content: "\e021\e021\e021"; | |
| } | |
| &:hover:after, | |
| &.active:after { | |
| content: "\e020\e020\e020" | |
| } | |
| } | |
| &.star-4 { | |
| width: 5em; | |
| &:after { | |
| content: "\e021\e021\e021\e021"; | |
| } | |
| &:hover:after, | |
| &.active:after { | |
| content: "\e020\e020\e020\e020" | |
| } | |
| } | |
| &.star-5 { | |
| width: 6em; | |
| border: 0; | |
| &:after { | |
| content: "\e021\e021\e021\e021\e021"; | |
| } | |
| &:hover:after, | |
| &.active:after { | |
| content: "\e020\e020\e020\e020\e020" | |
| } | |
| } | |
| } | |
| } | |
| #review_form { | |
| #respond { | |
| position: static; | |
| margin: 0; | |
| width: auto; | |
| padding: 15px; | |
| background: transparent none; | |
| border: 1px solid $color__gray-border; | |
| p { | |
| margin: 0 0 10px; | |
| } | |
| .form-submit { | |
| margin: 18px 0 -5px; | |
| input { | |
| left: auto; | |
| } | |
| } | |
| textarea { | |
| @include box-sizing(border-box); | |
| width: 100%; | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Tablet | |
| */ | |
| @media only screen and (min-width: $screen-sm-min) {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****************************************************************** | |
| Site Name: | |
| Author: | |
| Stylesheet: Responsive WooCommerce Styles | |
| ******************************************************************/ | |
| // Fonts | |
| @font-face { | |
| font-family: 'WooCommerce'; | |
| src: url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.eot'); | |
| src: url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.eot?#iefix') format('embedded-opentype'), | |
| url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.woff') format('woff'), | |
| url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.ttf') format('truetype'), | |
| url('#{$plugins-path}woocommerce/assets/fonts/WooCommerce.svg#WooCommerce') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| $green: #7ad03a; | |
| $red: #a00; | |
| $orange: #ffba00; | |
| $blue: #2ea2cc; | |
| $primary: $color__teal; // Primary colour for buttons (alt) | |
| $primarytext: #FFF; // Text on primary colour bg | |
| $secondary: #CCC; // Secondary buttons | |
| $secondarytext: #444; // Text on secondary colour bg | |
| $highlight: $color__light-green; // Prices, In stock labels, sales flash | |
| $highlightext: desaturate(lighten($highlight, 50%), 18%); // Text on highlight colour bg | |
| $contentbg: #fff; // Content BG - Tabs (active state) | |
| $subtext: #777; // small, breadcrumbs etc | |
| $star: #E8C142; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****************************************************************** | |
| Site Name: | |
| Author: | |
| Stylesheet: Responsive WooCommerce Styles | |
| ******************************************************************/ | |
| .woocommerce, | |
| .woocommerce-page { | |
| /** | |
| * Layered nav widget | |
| */ | |
| .widget_layered_nav { | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| list-style: none outside; | |
| li { | |
| @include clearfix(); | |
| padding: 0 0 1px; | |
| list-style: none; | |
| a, | |
| span { | |
| padding: 1px 0; | |
| } | |
| } | |
| li.chosen { | |
| a { | |
| &:before { | |
| @include iconbefore( "\e013" ); | |
| color: $red; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .widget_layered_nav_filters { | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| list-style: none outside; | |
| overflow: hidden; | |
| zoom: 1; | |
| li { | |
| float: left; | |
| padding: 0 1px 1px 0; | |
| list-style: none; | |
| a { | |
| text-decoration: none; | |
| &:before { | |
| @include iconbefore( "\e013" ); | |
| color: $red; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Price filter widget | |
| */ | |
| .widget_price_filter { | |
| .price_slider { | |
| margin-bottom: 1em; | |
| } | |
| .price_slider_amount { | |
| text-align: right; | |
| line-height: 2.4; | |
| font-size: 0.8751em; | |
| .button { | |
| font-size: 1.15em; | |
| } | |
| .button { | |
| float: left; | |
| } | |
| } | |
| .ui-slider { | |
| position: relative; | |
| text-align: left; | |
| margin-left: .5em; | |
| margin-right: .5em; | |
| } | |
| .ui-slider .ui-slider-handle { | |
| position: absolute; | |
| z-index: 2; | |
| width: 1em; | |
| height: 1em; | |
| background-color: $primary; | |
| border-radius: 1em; | |
| cursor: ew-resize; | |
| outline: none; | |
| top: -.3em; | |
| //&:last-child { | |
| margin-left: -.5em; | |
| //} | |
| } | |
| .ui-slider .ui-slider-range { | |
| position: absolute; | |
| z-index: 1; | |
| font-size: .7em; | |
| display: block; | |
| border: 0; | |
| border-radius: 1em; | |
| background-color: $primary; | |
| } | |
| .price_slider_wrapper .ui-widget-content { | |
| border-radius: 1em; | |
| background-color: $primary - #444; | |
| border: 0; | |
| } | |
| .ui-slider-horizontal { | |
| height: .5em; | |
| } | |
| .ui-slider-horizontal .ui-slider-range { | |
| top: 0; | |
| height: 100%; | |
| } | |
| .ui-slider-horizontal .ui-slider-range-min { | |
| left: -1px; | |
| } | |
| .ui-slider-horizontal .ui-slider-range-max { | |
| right: -1px; | |
| } | |
| } | |
| /** | |
| * Cart sidebar | |
| */ | |
| ul.cart_list, | |
| ul.product_list_widget { | |
| list-style: none outside; | |
| padding: 0; | |
| margin: 0; | |
| li { | |
| padding: 4px 0; | |
| margin: 0; | |
| @include clearfix(); | |
| list-style: none; | |
| a { | |
| display: block; | |
| font-weight: 700; | |
| } | |
| img { | |
| float: right; | |
| margin-left: 4px; | |
| width: 32px; | |
| height: auto; | |
| box-shadow: none; | |
| } | |
| dl { | |
| margin: 0; | |
| padding-left: 1em; | |
| border-left: 2px solid rgba(0,0,0,0.1); | |
| @include clearfix(); | |
| dt, | |
| dd { | |
| display: inline-block; | |
| float: left; | |
| margin-bottom: 1em; | |
| } | |
| dt { | |
| font-weight: 700; | |
| padding: 0 0 .25em 0; | |
| margin: 0 4px 0 0; | |
| clear: left; | |
| } | |
| dd { | |
| padding: 0 0 .25em 0; | |
| p:last-child { | |
| margin-bottom: 0; | |
| } | |
| } | |
| } | |
| .star-rating { | |
| float: none; | |
| } | |
| } | |
| } | |
| &.widget_shopping_cart, | |
| .widget_shopping_cart { | |
| .total { | |
| border-top: 3px double $secondary; | |
| padding: 4px 0 0; | |
| strong { | |
| min-width: 40px; | |
| display: inline-block; | |
| } | |
| } | |
| .cart_list { | |
| li { | |
| padding-left: 2em; | |
| position: relative; | |
| padding-top: 0; | |
| a.remove { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| } | |
| } | |
| .buttons { | |
| @include clearfix(); | |
| } | |
| } | |
| } | |
| /** | |
| * Tablet | |
| */ | |
| @media only screen and (min-width: $screen-sm-min) { | |
| .woocommerce, | |
| .woocommerce-page { | |
| /** | |
| * Cart sidebar | |
| */ | |
| ul.cart_list, | |
| ul.product_list_widget { | |
| li { | |
| @include mediaright(); | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment