From 649b59d0633a9e66379e9b5c47401e58c9604983 Mon Sep 17 00:00:00 2001 From: Tiago Noronha Date: Wed, 30 Aug 2017 12:14:55 +0100 Subject: [PATCH] New lines and spacing. --- sass/shop/_widgets.scss | 2 +- sass/variables-site/_columns.scss | 2 +- sass/variables-site/_variables-site.scss | 2 +- style.css | 768 ++++++++++++++--------- woocommerce.css | 748 +++++++++++++--------- 5 files changed, 909 insertions(+), 613 deletions(-) diff --git a/sass/shop/_widgets.scss b/sass/shop/_widgets.scss index 82f2bda9..63324b2d 100644 --- a/sass/shop/_widgets.scss +++ b/sass/shop/_widgets.scss @@ -42,7 +42,7 @@ } } - .ui-slider .ui-slider-range { + .ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; diff --git a/sass/variables-site/_columns.scss b/sass/variables-site/_columns.scss index f27e24ce..27918b3e 100644 --- a/sass/variables-site/_columns.scss +++ b/sass/variables-site/_columns.scss @@ -10,4 +10,4 @@ $columns: ( 9: 11.11% ); -$columns__margin: 3.8%; \ No newline at end of file +$columns__margin: 3.8%; diff --git a/sass/variables-site/_variables-site.scss b/sass/variables-site/_variables-site.scss index 6325541c..1b23d510 100644 --- a/sass/variables-site/_variables-site.scss +++ b/sass/variables-site/_variables-site.scss @@ -1,4 +1,4 @@ @import "colors"; @import "typography"; @import "structure"; -@import "columns"; \ No newline at end of file +@import "columns"; diff --git a/style.css b/style.css index c754193a..bd787e1d 100644 --- a/style.css +++ b/style.css @@ -45,12 +45,14 @@ Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/ # Normalize --------------------------------------------------------------*/ html { - font-family: sans-serif; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; } + font-family: sans-serif; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} body { - margin: 0; } + margin: 0; +} article, aside, @@ -64,157 +66,194 @@ menu, nav, section, summary { - display: block; } + display: block; +} audio, canvas, progress, video { - display: inline-block; - vertical-align: baseline; } + display: inline-block; + vertical-align: baseline; +} audio:not([controls]) { - display: none; - height: 0; } + display: none; + height: 0; +} [hidden], template { - display: none; } + display: none; +} a { - background-color: transparent; } + background-color: transparent; +} a:active, a:hover { - outline: 0; } + outline: 0; +} abbr[title] { - border-bottom: 1px dotted; } + border-bottom: 1px dotted; +} b, strong { - font-weight: bold; } + font-weight: bold; +} dfn { - font-style: italic; } + font-style: italic; +} h1 { - font-size: 2em; - margin: 0.67em 0; } + font-size: 2em; + margin: 0.67em 0; +} mark { - background: #ff0; - color: #000; } + background: #ff0; + color: #000; +} small { - font-size: 80%; } + font-size: 80%; +} sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} sup { - top: -0.5em; } + top: -0.5em; +} sub { - bottom: -0.25em; } + bottom: -0.25em; +} img { - border: 0; } + border: 0; +} svg:not(:root) { - overflow: hidden; } + overflow: hidden; +} figure { - margin: 1em 40px; } + margin: 1em 40px; +} hr { - box-sizing: content-box; - height: 0; } + box-sizing: content-box; + height: 0; +} pre { - overflow: auto; } + overflow: auto; +} code, kbd, pre, samp { - font-family: monospace, monospace; - font-size: 1em; } + font-family: monospace, monospace; + font-size: 1em; +} button, input, optgroup, select, textarea { - color: inherit; - font: inherit; - margin: 0; } + color: inherit; + font: inherit; + margin: 0; +} button { - overflow: visible; } + overflow: visible; +} button, select { - text-transform: none; } + text-transform: none; +} button, html input[type="button"], input[type="reset"], input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; } + -webkit-appearance: button; + cursor: pointer; +} button[disabled], html input[disabled] { - cursor: default; } + cursor: default; +} button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; } + border: 0; + padding: 0; +} input { - line-height: normal; } + line-height: normal; +} input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - padding: 0; } + box-sizing: border-box; + padding: 0; +} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; } + height: auto; +} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + -webkit-appearance: none; +} fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; } + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} legend { - border: 0; - padding: 0; } + border: 0; + padding: 0; +} textarea { - overflow: auto; } + overflow: auto; +} optgroup { - font-weight: bold; } + font-weight: bold; +} table { - border-collapse: collapse; - border-spacing: 0; } + border-collapse: collapse; + border-spacing: 0; +} td, th { - padding: 0; } + padding: 0; +} /*-------------------------------------------------------------- # Typography @@ -225,114 +264,141 @@ input, select, optgroup, textarea { - color: #404040; - font-family: sans-serif; - font-size: 16px; - font-size: 1rem; - line-height: 1.5; } + color: #404040; + font-family: sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; +} h1, h2, h3, h4, h5, h6 { - clear: both; } + clear: both; +} p { - margin-bottom: 1.5em; } + margin-bottom: 1.5em; +} dfn, cite, em, i { - font-style: italic; } + font-style: italic; +} blockquote { - margin: 0 1.5em; } + margin: 0 1.5em; +} address { - margin: 0 0 1.5em; } + margin: 0 0 1.5em; +} pre { - background: #eee; - font-family: "Courier 10 Pitch", Courier, monospace; - font-size: 15px; - font-size: 0.9375rem; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1.6em; } + background: #eee; + font-family: "Courier 10 Pitch", Courier, monospace; + font-size: 15px; + font-size: 0.9375rem; + line-height: 1.6; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 1.6em; +} code, kbd, tt, var { - font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; - font-size: 15px; - font-size: 0.9375rem; } + font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; + font-size: 15px; + font-size: 0.9375rem; +} abbr, acronym { - border-bottom: 1px dotted #666; - cursor: help; } + border-bottom: 1px dotted #666; + cursor: help; +} mark, ins { - background: #fff9c0; - text-decoration: none; } + background: #fff9c0; + text-decoration: none; +} big { - font-size: 125%; } + font-size: 125%; +} /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { - box-sizing: border-box; } + box-sizing: border-box; +} *, *:before, *:after { - /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ - box-sizing: inherit; } + /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ + box-sizing: inherit; +} body { - background: #fff; - /* Fallback for when there is no custom background color defined. */ } + background: #fff; + /* Fallback for when there is no custom background color defined. */ +} blockquote, q { - quotes: "" ""; } - blockquote:before, blockquote:after, q:before, q:after { - content: ""; } + quotes: "" ""; +} + +blockquote:before, blockquote:after, q:before, q:after { + content: ""; +} hr { - background-color: #ccc; - border: 0; - height: 1px; - margin-bottom: 1.5em; } + background-color: #ccc; + border: 0; + height: 1px; + margin-bottom: 1.5em; +} ul, ol { - margin: 0 0 1.5em 3em; } + margin: 0 0 1.5em 3em; +} ul { - list-style: disc; } + list-style: disc; +} ol { - list-style: decimal; } + list-style: decimal; +} li > ul, li > ol { - margin-bottom: 0; - margin-left: 1.5em; } + margin-bottom: 0; + margin-left: 1.5em; +} dt { - font-weight: bold; } + font-weight: bold; +} dd { - margin: 0 1.5em 1.5em; } + margin: 0 1.5em 1.5em; +} img { - height: auto; - /* Make sure images are scaled correctly. */ - max-width: 100%; - /* Adhere to container width. */ } + height: auto; + /* Make sure images are scaled correctly. */ + max-width: 100%; + /* Adhere to container width. */ +} figure { - margin: 1em 0; - /* Extra wide images within figure tags don't overflow the content area. */ } + margin: 1em 0; + /* Extra wide images within figure tags don't overflow the content area. */ +} table { - margin: 0 0 1.5em; - width: 100%; } + margin: 0 0 1.5em; + width: 100%; +} /*-------------------------------------------------------------- # Forms @@ -341,28 +407,33 @@ button, input[type="button"], input[type="reset"], input[type="submit"] { - border: 1px solid; - border-color: #ccc #ccc #bbb; - border-radius: 3px; - background: #e6e6e6; - color: rgba(0, 0, 0, 0.8); - font-size: 12px; - font-size: 0.75rem; - line-height: 1; - padding: .6em 1em .4em; } - button:hover, - input[type="button"]:hover, - input[type="reset"]:hover, - input[type="submit"]:hover { - border-color: #ccc #bbb #aaa; } - button:active, button:focus, - input[type="button"]:active, - input[type="button"]:focus, - input[type="reset"]:active, - input[type="reset"]:focus, - input[type="submit"]:active, - input[type="submit"]:focus { - border-color: #aaa #bbb #bbb; } + border: 1px solid; + border-color: #ccc #ccc #bbb; + border-radius: 3px; + background: #e6e6e6; + color: rgba(0, 0, 0, 0.8); + font-size: 12px; + font-size: 0.75rem; + line-height: 1; + padding: .6em 1em .4em; +} + +button:hover, +input[type="button"]:hover, +input[type="reset"]:hover, +input[type="submit"]:hover { + border-color: #ccc #bbb #aaa; +} + +button:active, button:focus, +input[type="button"]:active, +input[type="button"]:focus, +input[type="reset"]:active, +input[type="reset"]:focus, +input[type="submit"]:active, +input[type="submit"]:focus { + border-color: #aaa #bbb #bbb; +} input[type="text"], input[type="email"], @@ -380,33 +451,38 @@ input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { - color: #666; - border: 1px solid #ccc; - border-radius: 3px; - padding: 3px; } - input[type="text"]:focus, - input[type="email"]:focus, - input[type="url"]:focus, - input[type="password"]:focus, - input[type="search"]:focus, - input[type="number"]:focus, - input[type="tel"]:focus, - input[type="range"]:focus, - input[type="date"]:focus, - input[type="month"]:focus, - input[type="week"]:focus, - input[type="time"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - input[type="color"]:focus, - textarea:focus { - color: #111; } + color: #666; + border: 1px solid #ccc; + border-radius: 3px; + padding: 3px; +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +input[type="range"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="week"]:focus, +input[type="time"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="color"]:focus, +textarea:focus { + color: #111; +} select { - border: 1px solid #ccc; } + border: 1px solid #ccc; +} textarea { - width: 100%; } + width: 100%; +} /*-------------------------------------------------------------- # Navigation @@ -415,138 +491,178 @@ textarea { ## Links --------------------------------------------------------------*/ a { - color: royalblue; } - a:visited { - color: purple; } - a:hover, a:focus, a:active { - color: midnightblue; } - a:focus { - outline: thin dotted; } - a:hover, a:active { - outline: 0; } + color: royalblue; +} + +a:visited { + color: purple; +} + +a:hover, a:focus, a:active { + color: midnightblue; +} + +a:focus { + outline: thin dotted; +} + +a:hover, a:active { + outline: 0; +} /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-navigation { - clear: both; - display: block; - float: left; - width: 100%; } - .main-navigation ul { - display: none; - list-style: none; - margin: 0; - padding-left: 0; } - .main-navigation ul ul { - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); - float: left; - position: absolute; - top: 100%; - left: -999em; - z-index: 99999; } - .main-navigation ul ul ul { - left: -999em; - top: 0; } - .main-navigation ul ul li:hover > ul, - .main-navigation ul ul li.focus > ul { - left: 100%; } - .main-navigation ul ul a { - width: 200px; } - .main-navigation ul li:hover > ul, - .main-navigation ul li.focus > ul { - left: auto; } - .main-navigation li { - float: left; - position: relative; } - .main-navigation a { - display: block; - text-decoration: none; } + clear: both; + display: block; + float: left; + width: 100%; +} + +.main-navigation ul { + display: none; + list-style: none; + margin: 0; + padding-left: 0; +} + +.main-navigation ul ul { + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + float: left; + position: absolute; + top: 100%; + left: -999em; + z-index: 99999; +} + +.main-navigation ul ul ul { + left: -999em; + top: 0; +} + +.main-navigation ul ul li:hover > ul, +.main-navigation ul ul li.focus > ul { + left: 100%; +} + +.main-navigation ul ul a { + width: 200px; +} + +.main-navigation ul li:hover > ul, +.main-navigation ul li.focus > ul { + left: auto; +} + +.main-navigation li { + float: left; + position: relative; +} + +.main-navigation a { + display: block; + text-decoration: none; +} /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { - display: block; } + display: block; +} @media screen and (min-width: 37.5em) { - .menu-toggle { - display: none; } - .main-navigation ul { - display: block; } } + .menu-toggle { + display: none; + } + .main-navigation ul { + display: block; + } +} .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { - margin: 0 0 1.5em; - overflow: hidden; } + margin: 0 0 1.5em; + overflow: hidden; +} .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { - float: left; - width: 50%; } + float: left; + width: 50%; +} .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { - float: right; - text-align: right; - width: 50%; } + float: right; + text-align: right; + width: 50%; +} /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { - clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - word-wrap: normal !important; - /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } - .screen-reader-text:focus { - background-color: #f1f1f1; - border-radius: 3px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; - color: #21759b; - display: block; - font-size: 14px; - font-size: 0.875rem; - font-weight: bold; - height: auto; - left: 5px; - line-height: normal; - padding: 15px 23px 14px; - text-decoration: none; - top: 5px; - width: auto; - z-index: 100000; - /* Above WP toolbar. */ } + clip: rect(1px, 1px, 1px, 1px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + word-wrap: normal !important; + /* Many screen reader and browser combinations announce broken words as they would appear visually. */ +} + +.screen-reader-text:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + color: #21759b; + display: block; + font-size: 14px; + font-size: 0.875rem; + font-weight: bold; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; + /* Above WP toolbar. */ +} /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { - outline: 0; } + outline: 0; +} /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { - display: inline; - float: left; - margin-right: 1.5em; } + display: inline; + float: left; + margin-right: 1.5em; +} .alignright { - display: inline; - float: right; - margin-left: 1.5em; } + display: inline; + float: right; + margin-left: 1.5em; +} .aligncenter { - clear: both; - display: block; - margin-left: auto; - margin-right: auto; } + clear: both; + display: block; + margin-left: auto; + margin-right: auto; +} /*-------------------------------------------------------------- # Clearings @@ -563,9 +679,10 @@ a { .site-content:after, .site-footer:before, .site-footer:after { - content: ""; - display: table; - table-layout: fixed; } + content: ""; + display: table; + table-layout: fixed; +} .clear:after, .entry-content:after, @@ -573,16 +690,20 @@ a { .site-header:after, .site-content:after, .site-footer:after { - clear: both; } + clear: both; +} /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { - margin: 0 0 1.5em; - /* Make sure select elements fit in widgets. */ } - .widget select { - max-width: 100%; } + margin: 0 0 1.5em; + /* Make sure select elements fit in widgets. */ +} + +.widget select { + max-width: 100%; +} /*-------------------------------------------------------------- # Content @@ -591,31 +712,38 @@ a { ## Posts and pages --------------------------------------------------------------*/ .sticky { - display: block; } + display: block; +} .hentry { - margin: 0 0 1.5em; } + margin: 0 0 1.5em; +} .updated:not(.published) { - display: none; } + display: none; +} .page-content, .entry-content, .entry-summary { - margin: 1.5em 0 0; } + margin: 1.5em 0 0; +} .page-links { - clear: both; - margin: 0 0 1.5em; } + clear: both; + margin: 0 0 1.5em; +} /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { - word-wrap: break-word; } + word-wrap: break-word; +} .bypostauthor { - display: block; } + display: block; +} /*-------------------------------------------------------------- # Infinite scroll @@ -623,12 +751,14 @@ a { /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { - /* Theme Footer (when set to scrolling) */ - display: none; } + /* Theme Footer (when set to scrolling) */ + display: none; +} /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { - display: block; } + display: block; +} /*-------------------------------------------------------------- # Media @@ -636,64 +766,92 @@ a { .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { - border: none; - margin-bottom: 0; - margin-top: 0; - padding: 0; } + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { - max-width: 100%; } + max-width: 100%; +} /* Make sure logo link wraps around logo image. */ .custom-logo-link { - display: inline-block; } + display: inline-block; +} /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { - margin-bottom: 1.5em; - max-width: 100%; } - .wp-caption img[class*="wp-image-"] { - display: block; - margin-left: auto; - margin-right: auto; } - .wp-caption .wp-caption-text { - margin: 0.8075em 0; } + margin-bottom: 1.5em; + max-width: 100%; +} + +.wp-caption img[class*="wp-image-"] { + display: block; + margin-left: auto; + margin-right: auto; +} + +.wp-caption .wp-caption-text { + margin: 0.8075em 0; +} .wp-caption-text { - text-align: center; } + text-align: center; +} /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { - margin-bottom: 1.5em; } + margin-bottom: 1.5em; +} .gallery-item { - display: inline-block; - text-align: center; - vertical-align: top; - width: 100%; } - .gallery-columns-2 .gallery-item { - max-width: 50%; } - .gallery-columns-3 .gallery-item { - max-width: 33.33%; } - .gallery-columns-4 .gallery-item { - max-width: 25%; } - .gallery-columns-5 .gallery-item { - max-width: 20%; } - .gallery-columns-6 .gallery-item { - max-width: 16.66%; } - .gallery-columns-7 .gallery-item { - max-width: 14.28%; } - .gallery-columns-8 .gallery-item { - max-width: 12.5%; } - .gallery-columns-9 .gallery-item { - max-width: 11.11%; } + display: inline-block; + text-align: center; + vertical-align: top; + width: 100%; +} + +.gallery-columns-2 .gallery-item { + max-width: 50%; +} + +.gallery-columns-3 .gallery-item { + max-width: 33.33%; +} + +.gallery-columns-4 .gallery-item { + max-width: 25%; +} + +.gallery-columns-5 .gallery-item { + max-width: 20%; +} + +.gallery-columns-6 .gallery-item { + max-width: 16.66%; +} + +.gallery-columns-7 .gallery-item { + max-width: 14.28%; +} + +.gallery-columns-8 .gallery-item { + max-width: 12.5%; +} + +.gallery-columns-9 .gallery-item { + max-width: 11.11%; +} .gallery-caption { - display: block; } + display: block; +} diff --git a/woocommerce.css b/woocommerce.css index c3dcbac8..2ac06a09 100644 --- a/woocommerce.css +++ b/woocommerce.css @@ -3,25 +3,12 @@ Theme Name: _s WooCommerce styles override */ -/** - * WooCommerce Plugin path variables - */ /** * WooCommerce color variables */ /** * Imports */ -/** - * Fonts - */ -@font-face { - font-family: 'star'; - src: url("../../plugins/woocommerce/assets/fonts/star.eot"); - src: url("../../plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("../../plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("../../plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("../../plugins/woocommerce/assets/fonts/star.svg#star") format("svg"); - font-weight: normal; - font-style: normal; } - /** * Shop tables */ @@ -29,39 +16,58 @@ WooCommerce styles override * Shop tables */ table.shop_table_responsive thead { - display: none; } + display: none; +} table.shop_table_responsive tbody th { - display: none; } + display: none; +} table.shop_table_responsive tr td { - display: block; - text-align: right; - clear: both; } - table.shop_table_responsive tr td:before { - content: attr(data-title) ": "; - float: left; } - table.shop_table_responsive tr td.product-remove a { - text-align: left; } - table.shop_table_responsive tr td.product-remove:before { - display: none; } - table.shop_table_responsive tr td.actions:before, table.shop_table_responsive tr td.download-actions:before { - display: none; } - table.shop_table_responsive tr td.download-actions .button { - display: block; - text-align: center; } + display: block; + text-align: right; + clear: both; +} + +table.shop_table_responsive tr td:before { + content: attr(data-title) ": "; + float: left; +} + +table.shop_table_responsive tr td.product-remove a { + text-align: left; +} + +table.shop_table_responsive tr td.product-remove:before { + display: none; +} + +table.shop_table_responsive tr td.actions:before, table.shop_table_responsive tr td.download-actions:before { + display: none; +} + +table.shop_table_responsive tr td.download-actions .button { + display: block; + text-align: center; +} @media screen and (min-width: 48em) { - table.shop_table_responsive thead { - display: table-header-group; } - table.shop_table_responsive tbody th { - display: table-cell; } - table.shop_table_responsive tr th, table.shop_table_responsive tr td { - text-align: left; } - table.shop_table_responsive tr td { - display: table-cell; } - table.shop_table_responsive tr td:before { - display: none; } } + table.shop_table_responsive thead { + display: table-header-group; + } + table.shop_table_responsive tbody th { + display: table-cell; + } + table.shop_table_responsive tr th, table.shop_table_responsive tr td { + text-align: left; + } + table.shop_table_responsive tr td { + display: table-cell; + } + table.shop_table_responsive tr td:before { + display: none; + } +} /** * Products @@ -70,44 +76,63 @@ table.shop_table_responsive tr td { * Products */ ul.products { - content: ""; - display: table; - table-layout: fixed; - margin: 0; - padding: 0; } - ul.products li.product { - list-style: none; - position: relative; - margin-bottom: 2em; } - ul.products li.product .woocommerce-loop-product__title { - font-size: 1rem; } - ul.products li.product img { - display: block; } - ul.products li.product .button { - display: block; } + content: ""; + display: table; + table-layout: fixed; + margin: 0; + padding: 0; +} + +ul.products li.product { + list-style: none; + position: relative; + margin-bottom: 2em; +} + +ul.products li.product .woocommerce-loop-product__title { + font-size: 1rem; +} + +ul.products li.product img { + display: block; +} + +ul.products li.product .button { + display: block; +} @media screen and (min-width: 48em) { - ul.products li.product { - width: 30.7966666667%; - float: left; - margin-right: 3.8%; } - ul.products li.product.first { - clear: both; } - ul.products li.product.last { - margin-right: 0; } - .columns-1 ul.products li.product { - float: none; - width: 100%; } - .columns-2 ul.products li.product { - width: 48.1%; } - .columns-3 ul.products li.product { - width: 30.7966666667%; } - .columns-4 ul.products li.product { - width: 22.15%; } - .columns-5 ul.products li.product { - width: 16.96%; } - .columns-6 ul.products li.product { - width: 13.4933333333%; } } + ul.products li.product { + width: 30.7966666667%; + float: left; + margin-right: 3.8%; + } + ul.products li.product.first { + clear: both; + } + ul.products li.product.last { + margin-right: 0; + } + .columns-1 ul.products li.product { + float: none; + width: 100%; + } + .columns-2 ul.products li.product { + width: 48.1%; + } + .columns-3 ul.products li.product { + width: 30.7966666667%; + } + .columns-4 ul.products li.product { + width: 22.15%; + } + .columns-5 ul.products li.product { + width: 16.96%; + } + .columns-6 ul.products li.product { + width: 13.4933333333%; + } +} /** * Single product @@ -116,69 +141,113 @@ ul.products { * Single Product */ .single-product div.product { - content: ""; - display: table; - table-layout: fixed; - position: relative; } - .single-product div.product .woocommerce-product-gallery { - position: relative; } - .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { - position: absolute; - top: 1em; - right: 1em; - display: block; - z-index: 99; } - .single-product div.product .woocommerce-product-gallery .flex-viewport { - margin-bottom: 1em; } - .single-product div.product .woocommerce-product-gallery .flex-control-thumbs { - content: ""; - display: table; - table-layout: fixed; - margin: 0; - padding: 0; } - .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li { - list-style: none; - cursor: pointer; - float: left; } - .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { - opacity: .5; } - .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { - opacity: 1; } - .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img { - opacity: 1; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li { - width: 48.1%; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) { - margin-right: 0; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) { - clear: both; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li { - width: 30.7966666667%; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) { - margin-right: 0; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) { - clear: both; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li { - width: 22.15%; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) { - margin-right: 0; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) { - clear: both; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li { - width: 16.96%; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) { - margin-right: 0; } - .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) { - clear: both; } + content: ""; + display: table; + table-layout: fixed; + position: relative; +} + +.single-product div.product .woocommerce-product-gallery { + position: relative; +} + +.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { + position: absolute; + top: 1em; + right: 1em; + display: block; + z-index: 99; +} + +.single-product div.product .woocommerce-product-gallery .flex-viewport { + margin-bottom: 1em; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs { + content: ""; + display: table; + table-layout: fixed; + margin: 0; + padding: 0; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li { + list-style: none; + cursor: pointer; + float: left; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { + opacity: .5; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { + opacity: 1; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img { + opacity: 1; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li { + width: 48.1%; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) { + margin-right: 0; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) { + clear: both; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li { + width: 30.7966666667%; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) { + margin-right: 0; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) { + clear: both; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li { + width: 22.15%; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) { + margin-right: 0; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) { + clear: both; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li { + width: 16.96%; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) { + margin-right: 0; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) { + clear: both; +} .stock:empty:before { - display: none; } + display: none; +} .stock.in-stock { - color: #0f834d; } + color: #0f834d; +} .stock.out-of-stock { - color: #e2401c; } + color: #e2401c; +} /** * Checkout @@ -187,15 +256,19 @@ ul.products { * Checkout */ @media screen and (min-width: 768px) { - .col2-set .form-row-first { - float: left; - margin-right: 3.8%; } - .col2-set .form-row-last { - float: right; - margin-right: 0; } - .col2-set .form-row-first, - .col2-set .form-row-last { - width: 48.1%; } } + .col2-set .form-row-first { + float: left; + margin-right: 3.8%; + } + .col2-set .form-row-last { + float: right; + margin-right: 0; + } + .col2-set .form-row-first, + .col2-set .form-row-last { + width: 48.1%; + } +} /** * General WooCommerce components @@ -204,146 +277,189 @@ ul.products { * Header cart */ .site-header-cart { - position: relative; - margin: 0; - padding: 0; - content: ""; - display: table; - table-layout: fixed; } - .site-header-cart .cart-contents { - text-decoration: none; } - .site-header-cart .cart-contents .icon { - display: none; } - .site-header-cart .widget_shopping_cart { - display: none; } - .site-header-cart .product_list_widget { - margin: 0; - padding: 0; } + position: relative; + margin: 0; + padding: 0; + content: ""; + display: table; + table-layout: fixed; +} + +.site-header-cart .cart-contents { + text-decoration: none; +} + +.site-header-cart .cart-contents .icon { + display: none; +} + +.site-header-cart .widget_shopping_cart { + display: none; +} + +.site-header-cart .product_list_widget { + margin: 0; + padding: 0; +} /** * Star rating */ .star-rating { - overflow: hidden; - position: relative; - height: 1.618em; - line-height: 1.618; - font-size: 1em; - width: 5.3em; - font-family: 'star'; - font-weight: 400; } - .star-rating:before { - content: "\53\53\53\53\53"; - opacity: .25; - float: left; - top: 0; - left: 0; - position: absolute; } - .star-rating span { - overflow: hidden; - float: left; - top: 0; - left: 0; - position: absolute; - padding-top: 1.5em; } - .star-rating span:before { - content: "\53\53\53\53\53"; - top: 0; - position: absolute; - left: 0; - color: royalblue; } + overflow: hidden; + position: relative; + height: 1.618em; + line-height: 1.618; + font-size: 1em; + width: 5.3em; + font-family: 'star'; + font-weight: 400; +} + +.star-rating:before { + content: "\53\53\53\53\53"; + opacity: .25; + float: left; + top: 0; + left: 0; + position: absolute; +} + +.star-rating span { + overflow: hidden; + float: left; + top: 0; + left: 0; + position: absolute; + padding-top: 1.5em; +} + +.star-rating span:before { + content: "\53\53\53\53\53"; + top: 0; + position: absolute; + left: 0; + color: royalblue; +} p.stars a { - position: relative; - height: 1em; - width: 1em; - text-indent: -999em; - display: inline-block; - text-decoration: none; - margin-right: 1px; - font-weight: 400; } - p.stars a:before { - display: block; - position: absolute; - top: 0; - left: 0; - width: 1em; - height: 1em; - line-height: 1; - font-family: "star"; - content: "\53"; - color: #404040; - text-indent: 0; - opacity: .25; } - p.stars a:hover ~ a:before { - content: "\53"; - color: #404040; - opacity: .25; } + position: relative; + height: 1em; + width: 1em; + text-indent: -999em; + display: inline-block; + text-decoration: none; + margin-right: 1px; + font-weight: 400; +} + +p.stars a:before { + display: block; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + line-height: 1; + font-family: "star"; + content: "\53"; + color: #404040; + text-indent: 0; + opacity: .25; +} + +p.stars a:hover ~ a:before { + content: "\53"; + color: #404040; + opacity: .25; +} p.stars:hover a:before { - content: "\53"; - color: royalblue; - opacity: 1; } + content: "\53"; + color: royalblue; + opacity: 1; +} p.stars.selected a.active:before { - content: "\53"; - color: royalblue; - opacity: 1; } + content: "\53"; + color: royalblue; + opacity: 1; +} p.stars.selected a.active ~ a:before { - content: "\53"; - color: #404040; - opacity: .25; } + content: "\53"; + color: #404040; + opacity: .25; +} p.stars.selected a:not(.active):before { - content: "\53"; - color: royalblue; - opacity: 1; } + content: "\53"; + color: royalblue; + opacity: 1; +} /** * Tabs */ .woocommerce-tabs ul.tabs { - list-style: none; - margin: 0; - padding: 0; - text-align: left; } - .woocommerce-tabs ul.tabs li { - display: block; - margin: 0; - position: relative; } - .woocommerce-tabs ul.tabs li a { - padding: 1em 0; - display: block; } + list-style: none; + margin: 0; + padding: 0; + text-align: left; +} + +.woocommerce-tabs ul.tabs li { + display: block; + margin: 0; + position: relative; +} + +.woocommerce-tabs ul.tabs li a { + padding: 1em 0; + display: block; +} .woocommerce-tabs .panel h2:first-of-type { - margin-bottom: 1em; } + margin-bottom: 1em; +} /** * Password strength meter */ .woocommerce-password-strength { - text-align: right; } - .woocommerce-password-strength.strong { - color: #0f834d; } - .woocommerce-password-strength.short { - color: #e2401c; } - .woocommerce-password-strength.bad { - color: #e2401c; } - .woocommerce-password-strength.good { - color: #3D9CD2; } + text-align: right; +} + +.woocommerce-password-strength.strong { + color: #0f834d; +} + +.woocommerce-password-strength.short { + color: #e2401c; +} + +.woocommerce-password-strength.bad { + color: #e2401c; +} + +.woocommerce-password-strength.good { + color: #3D9CD2; +} /** * Forms */ .form-row.woocommerce-validated input.input-text { - box-shadow: inset 2px 0 0 #0f834d; } + box-shadow: inset 2px 0 0 #0f834d; +} .form-row.woocommerce-invalid input.input-text { - box-shadow: inset 2px 0 0 #e2401c; } + box-shadow: inset 2px 0 0 #e2401c; +} .required { - color: red; } + color: red; +} /** * Notices @@ -353,48 +469,56 @@ p.stars.selected a:not(.active):before { .woocommerce-error, .woocommerce-noreviews, p.no-comments { - content: ""; - display: table; - table-layout: fixed; - background-color: #0f834d; - clear: both; } + content: ""; + display: table; + table-layout: fixed; + background-color: #0f834d; + clear: both; +} .woocommerce-info, .woocommerce-noreviews, p.no-comments { - background-color: #3D9CD2; } + background-color: #3D9CD2; +} .woocommerce-error { - background-color: #e2401c; } + background-color: #e2401c; +} .demo_store { - position: fixed; - left: 0; - bottom: 0; - right: 0; - margin: 0; - padding: 1em; - background-color: #3D9CD2; - z-index: 9999; } + position: fixed; + left: 0; + bottom: 0; + right: 0; + margin: 0; + padding: 1em; + background-color: #3D9CD2; + z-index: 9999; +} @media screen and (min-width: 48em) { - /** + /** * Header cart */ - .site-header-cart .widget_shopping_cart { - position: absolute; - top: 100%; - width: 100%; - z-index: 999999; - font-size: ms(-1); - left: -999em; - display: block; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); } - .site-header-cart .cart-contents .icon { - display: inline; } - .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart { - left: 0; - display: block; } } + .site-header-cart .widget_shopping_cart { + position: absolute; + top: 100%; + width: 100%; + z-index: 999999; + font-size: ms(-1); + left: -999em; + display: block; + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + } + .site-header-cart .cart-contents .icon { + display: inline; + } + .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart { + left: 0; + display: block; + } +} /** * WooCommerce widgets @@ -403,46 +527,60 @@ p.no-comments { * WooCommerce Price Filter */ .widget_price_filter .price_slider { - margin-bottom: 1.5em; } + margin-bottom: 1.5em; +} .widget_price_filter .price_slider_amount { - text-align: right; - line-height: 2.4em; } - .widget_price_filter .price_slider_amount .button { - float: left; } + text-align: right; + line-height: 2.4em; +} + +.widget_price_filter .price_slider_amount .button { + float: left; +} .widget_price_filter .ui-slider { - position: relative; - text-align: left; } + position: relative; + text-align: left; +} .widget_price_filter .ui-slider .ui-slider-handle { - position: absolute; - z-index: 2; - width: 1em; - height: 1em; - cursor: ew-resize; - outline: none; - background: royalblue; - box-sizing: border-box; - margin-top: -.25em; - opacity: 1; } - .widget_price_filter .ui-slider .ui-slider-handle:last-child { - margin-left: -1em; } - .widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active { - box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1); } + position: absolute; + z-index: 2; + width: 1em; + height: 1em; + cursor: ew-resize; + outline: none; + background: royalblue; + box-sizing: border-box; + margin-top: -.25em; + opacity: 1; +} + +.widget_price_filter .ui-slider .ui-slider-handle:last-child { + margin-left: -1em; +} + +.widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active { + box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1); +} .widget_price_filter .ui-slider .ui-slider-range { - position: absolute; - z-index: 1; - display: block; - border: 0; - background: royalblue; } + position: absolute; + z-index: 1; + display: block; + border: 0; + background: royalblue; +} .widget_price_filter .price_slider_wrapper .ui-widget-content { - background: rgba(0, 0, 0, 0.1); } + background: rgba(0, 0, 0, 0.1); +} .widget_price_filter .ui-slider-horizontal { - height: .5em; } + height: .5em; +} .widget_price_filter .ui-slider-horizontal .ui-slider-range { - height: 100%; } + height: 100%; +}