Redhill: Updating WC styles to work with menu refeactor in #1578.

This commit is contained in:
Allan Cole 2019-10-30 17:58:01 -04:00
parent 7c06b6b422
commit 8e5fa265de
7 changed files with 494 additions and 202 deletions

View file

@ -36,7 +36,9 @@
"start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
"build:style": "node-sass sass/style-child-theme.scss style.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style.css",
"build:style-editor": "node-sass sass/style-child-theme-editor.scss style-editor.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style-editor.css",
"build:woocommerce": "node-sass sass/style-child-theme-woocommerce.scss style-woocommerce.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style-woocommerce.css",
"build:rtl": "rtlcss style.css style-rtl.css",
"build:woocommerce-rtl": "rtlcss style-woocommerce.css style-woocommerce-rtl.css",
"build": "run-p \"build:*\"",
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
},

View file

@ -92,6 +92,12 @@ $config-global: (
"light": #FAFAFA,
"dark": #AAAAAA,
),
"alert": (
"success": yellowgreen,
"info": skyblue,
"warning": gold,
"error": salmon,
),
"text-selection": #DDDDDD,
"black": black,
"white": white,

View file

@ -56,6 +56,12 @@ body[class*="woocommerce"] #page {
}
}
@include media(mobile-only) {
.main-navigation .woocommerce-cart-widget {
padding: map-deep-get($config-global, "spacing", "unit");
}
}
@include media(mobile) {
.widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {

View file

@ -188,6 +188,84 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* Base
* - Reset the browser
*/
/**
* Button Placeholder style
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
*/
button,
.button,
input[type="submit"],
.wp-block-button__link,
.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
line-height: 1;
color: white;
cursor: pointer;
font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-size: 1rem;
background-color: #CA2017;
border-radius: 4px;
border-width: 0;
padding: 16px 24px;
}
button:before,
.button:before,
input[type="submit"]:before,
.wp-block-button__link:before,
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
.button:after,
input[type="submit"]:after,
.wp-block-button__link:after,
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
content: '';
display: block;
height: 0;
width: 0;
}
button:before,
.button:before,
input[type="submit"]:before,
.wp-block-button__link:before,
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
margin-bottom: -0.12em;
}
button:after,
.button:after,
input[type="submit"]:after,
.wp-block-button__link:after,
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
margin-top: -0.11em;
}
button:hover,
.button:hover,
input:hover[type="submit"],
.wp-block-button__link:hover,
.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
.button:focus,
input:focus[type="submit"],
.wp-block-button__link:focus,
.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
.has-focus.button,
input.has-focus[type="submit"],
.has-focus.wp-block-button__link,
.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
color: white;
background-color: #222222;
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
@ -859,7 +937,8 @@ footer {
.post-thumbnail > *,
.page-content > *,
.comment-content > *,
.author-bio > * {
.author-bio > *,
.widget-area > .widget > * {
margin-top: 16px;
margin-bottom: 16px;
}
@ -869,7 +948,8 @@ footer {
.post-thumbnail > *:first-child,
.page-content > *:first-child,
.comment-content > *:first-child,
.author-bio > *:first-child {
.author-bio > *:first-child,
.widget-area > .widget > *:first-child {
margin-top: 0;
}
@ -878,7 +958,8 @@ footer {
.post-thumbnail > *:last-child,
.page-content > *:last-child,
.comment-content > *:last-child,
.author-bio > *:last-child {
.author-bio > *:last-child,
.widget-area > .widget > *:last-child {
margin-bottom: 0;
}
@ -1069,77 +1150,8 @@ object {
}
/**
* Placeholder button style
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
* Button
*/
button,
.button,
input[type="submit"],
.wp-block-button__link,
.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
line-height: 1;
color: white;
cursor: pointer;
font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-size: 1rem;
background-color: #CA2017;
border-radius: 4px;
border-width: 0;
padding: 16px 24px;
}
button:before,
.button:before,
input[type="submit"]:before,
.wp-block-button__link:before,
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
.button:after,
input[type="submit"]:after,
.wp-block-button__link:after,
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
content: '';
display: block;
height: 0;
width: 0;
}
button:before,
.button:before,
input[type="submit"]:before,
.wp-block-button__link:before,
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
margin-bottom: -0.12em;
}
button:after,
.button:after,
input[type="submit"]:after,
.wp-block-button__link:after,
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
margin-top: -0.11em;
}
button:hover,
.button:hover,
input:hover[type="submit"],
.wp-block-button__link:hover,
.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
.button:focus,
input:focus[type="submit"],
.wp-block-button__link:focus,
.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
.has-focus.button,
input.has-focus[type="submit"],
.has-focus.wp-block-button__link,
.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
color: white;
background-color: #222222;
}
/**
* Block Options
*/
@ -2405,7 +2417,7 @@ body:not(.fse-enabled) .site-description {
margin: 0;
}
.main-navigation #toggle:checked ~ div {
.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
display: block;
}
@ -2429,7 +2441,7 @@ body:not(.fse-enabled) .site-description {
@media only screen and (min-width: 560px) {
.main-navigation > div {
display: block;
display: inline-block;
}
.main-navigation #toggle-menu {
display: none;
@ -2815,6 +2827,13 @@ body:not(.fse-enabled) .footer-menu a {
.entry-content .more-link {
display: block;
color: inherit;
margin-top: 16px;
}
@media only screen and (min-width: 560px) {
.entry-content .more-link {
margin-top: 32px;
}
}
.entry-content .more-link:after {

View file

@ -772,7 +772,58 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
text-decoration: none;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart {
display: inline-block;
margin: 0;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart .svg-icon {
vertical-align: middle;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
display: inline-block;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
background-color: #CA2017;
outline: inherit;
text-decoration: underline;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .open {
display: none;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .close {
display: inline;
}
@media only screen and (max-width: 559px) {
body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
background-color: #222222;
color: white;
padding: 0;
width: 100%;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a,
body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a:link,
body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a:visited {
color: currentColor;
}
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .main-navigation > div:not(:last-of-type) {
margin-left: 32px;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart {
display: none;
}
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
display: none;
text-decoration: none;
line-height: 1;
}
@ -794,15 +845,12 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
float: right;
height: 0.83333rem;
width: 0.83333rem;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
padding: 0 16px;
vertical-align: middle;
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
padding: 0;
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
display: inline-block;
}
}
@ -810,7 +858,7 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
background-color: #222222;
color: white;
max-width: 100%;
padding: 8px 0;
padding: 16px 0;
}
@media only screen and (min-width: 560px) {
@ -828,6 +876,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .wooc
border-top: 1px solid #AAAAAA;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:hover,
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:focus {
background-color: transparent;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:hover,
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:focus {
text-decoration: none;
@ -1223,6 +1276,18 @@ body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
content: "";
}
/**
* Pagination
*/
body[class*="woocommerce"] .woocommerce-store-notice,
body[class*="woocommerce"] p.demo_store {
background-color: #CA2017;
color: white;
position: fixed;
top: auto;
bottom: 0;
}
/**
* Structure
*/
@ -1302,7 +1367,8 @@ body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:not(:
body[class*="woocommerce"] #page .woocommerce-products-header > *:not(:first-child),
body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:first-child),
body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(:first-child),
body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:first-child) {
body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:first-child),
body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(:first-child) {
margin-top: 16px;
}
@ -1357,7 +1423,9 @@ body[class*="woocommerce"] #page .woocommerce-checkout > .price,
body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(:last-child),
body[class*="woocommerce"] #page .woocommerce-order-downloads > .price,
body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:last-child),
body[class*="woocommerce"] #page .woocommerce-order-details > .price {
body[class*="woocommerce"] #page .woocommerce-order-details > .price,
body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(:last-child),
body[class*="woocommerce"] #page .woocommerce-customer-details > .price {
margin-bottom: 16px;
}
@ -1412,7 +1480,9 @@ body[class*="woocommerce"] #page .woocommerce-checkout > .form-row-last,
body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(img):empty + *,
body[class*="woocommerce"] #page .woocommerce-order-downloads > .form-row-last,
body[class*="woocommerce"] #page .woocommerce-order-details > *:not(img):empty + *,
body[class*="woocommerce"] #page .woocommerce-order-details > .form-row-last {
body[class*="woocommerce"] #page .woocommerce-order-details > .form-row-last,
body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(img):empty + *,
body[class*="woocommerce"] #page .woocommerce-customer-details > .form-row-last {
margin-top: 0;
}
@ -1441,7 +1511,8 @@ body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:empty
body[class*="woocommerce"] #page .woocommerce-products-header > *:empty,
body[class*="woocommerce"] #page .woocommerce-checkout > *:empty,
body[class*="woocommerce"] #page .woocommerce-order-downloads > *:empty,
body[class*="woocommerce"] #page .woocommerce-order-details > *:empty {
body[class*="woocommerce"] #page .woocommerce-order-details > *:empty,
body[class*="woocommerce"] #page .woocommerce-customer-details > *:empty {
margin: 0;
}
@ -1732,17 +1803,27 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
/**
* Account page
*/
body[class*="woocommerce"] #page .woocommerce-MyAccount-navigation {
width: 20%;
body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
width: 100%;
}
body[class*="woocommerce"] #page .woocommerce-MyAccount-navigation ul li a {
body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation ul li a {
line-height: 1.125;
display: inline-table;
}
body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation + *:not(:first-child) {
margin-top: 0;
}
@media only screen and (min-width: 640px) {
body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
width: 20%;
}
}
body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
width: calc(80% - 16px);
width: 100%;
}
body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
@ -1755,6 +1836,12 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
border-radius: 3px;
}
@media only screen and (min-width: 640px) {
body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
width: calc(80% - 16px);
}
}
body[class*="woocommerce"] #page .addresses .title h3 {
font-size: 1rem;
}
@ -1763,7 +1850,8 @@ body[class*="woocommerce"] #page .addresses .title .edit {
line-height: 1;
}
.woocommerce-account .entry-content .woocommerce > h2 {
.woocommerce-account .entry-content .woocommerce > h2,
body[class*="woocommerce"] #page div[class*="woocommerce"] h2 {
font-size: 1.44rem;
}
@ -1795,11 +1883,6 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
/**
* Single Product Page
*/
.single-product #page #woocommerce-wrapper div.product > .onsale {
left: auto;
right: -0.5em;
}
.single-product #page #woocommerce-wrapper div.product div.images {
margin-bottom: 32px;
}
@ -1837,6 +1920,27 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
.single-product #page #woocommerce-wrapper div.product div.summary p.price {
color: #111111;
font-size: 1.728rem;
line-height: 1.125;
}
.single-product #page #woocommerce-wrapper div.product div.summary span.price del,
.single-product #page #woocommerce-wrapper div.product div.summary p.price del {
color: currentColor;
opacity: 0.5;
display: inline-block;
}
.single-product #page #woocommerce-wrapper div.product div.summary span.price ins,
.single-product #page #woocommerce-wrapper div.product div.summary p.price ins {
background: none;
font-weight: 700;
display: inline-block;
}
.single-product #page #woocommerce-wrapper div.product div.summary span.price .from,
.single-product #page #woocommerce-wrapper div.product div.summary p.price .from {
font-size: 0.69444rem;
color: gold;
}
.single-product #page #woocommerce-wrapper div.product div.summary p.stock {
@ -1855,14 +1959,24 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
margin-top: -32px;
}
.single-product #page #woocommerce-wrapper div.product div.social {
margin-bottom: 32px;
}
.single-product #page #woocommerce-wrapper div.product .product_meta > * {
display: block;
}
.single-product #page #woocommerce-wrapper div.product > .onsale {
left: auto;
right: -0.5em;
}
.single-product #page #woocommerce-wrapper div.product.sale div.summary .span.price ins,
.single-product #page #woocommerce-wrapper div.product.sale div.summary p.price ins {
color: yellowgreen;
}
.single-product #page #woocommerce-wrapper div.product div.social {
margin-bottom: 32px;
}
.single-product #page #woocommerce-wrapper div.product .up-sells > h2 {
font-size: 1.44rem;
}
@ -1946,7 +2060,7 @@ body[class*="woocommerce"] #page ul.product_list_widget li a:not(.remove) {
body[class*="woocommerce"] #page ul.cart_list li img,
body[class*="woocommerce"] #page ul.product_list_widget li img {
margin-right: 4px;
margin-right: 16px;
width: 64px;
}
@ -2029,6 +2143,12 @@ body[class*="woocommerce"] #page .main-navigation > div > ul > li.current-menu-i
color: currentColor;
}
@media only screen and (max-width: 559px) {
body[class*="woocommerce"] #page .main-navigation {
padding: 16px;
}
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
display: inherit;

View file

@ -772,7 +772,58 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
text-decoration: none;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart {
display: inline-block;
margin: 0;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart .svg-icon {
vertical-align: middle;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
display: inline-block;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:focus + #toggle-cart {
background-color: #CA2017;
outline: inherit;
text-decoration: underline;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .open {
display: none;
}
body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked + #toggle-cart .close {
display: inline;
}
@media only screen and (max-width: 559px) {
body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
background-color: #222222;
color: white;
padding: 0;
width: 100%;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a,
body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a:link,
body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a:visited {
color: currentColor;
}
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .main-navigation > div:not(:last-of-type) {
margin-right: 32px;
}
body[class*="woocommerce"] #page .main-navigation #toggle-cart {
display: none;
}
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
display: none;
text-decoration: none;
line-height: 1;
}
@ -794,15 +845,12 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
float: left;
height: 0.83333rem;
width: 0.83333rem;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
padding: 0 16px;
vertical-align: middle;
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link + .sub-menu {
padding: 0;
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
display: inline-block;
}
}
@ -810,7 +858,7 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
background-color: #222222;
color: white;
max-width: 100%;
padding: 8px 0;
padding: 16px 0;
}
@media only screen and (min-width: 560px) {
@ -828,6 +876,11 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .wooc
border-top: 1px solid #AAAAAA;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:hover,
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a:focus {
background-color: transparent;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:hover,
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce.widget_shopping_cart .cart_list a.remove:focus {
text-decoration: none;
@ -1223,6 +1276,18 @@ body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
content: "";
}
/**
* Pagination
*/
body[class*="woocommerce"] .woocommerce-store-notice,
body[class*="woocommerce"] p.demo_store {
background-color: #CA2017;
color: white;
position: fixed;
top: auto;
bottom: 0;
}
/**
* Structure
*/
@ -1302,7 +1367,8 @@ body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:not(:
body[class*="woocommerce"] #page .woocommerce-products-header > *:not(:first-child),
body[class*="woocommerce"] #page .woocommerce-checkout > *:not(:first-child),
body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(:first-child),
body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:first-child) {
body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:first-child),
body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(:first-child) {
margin-top: 16px;
}
@ -1357,7 +1423,9 @@ body[class*="woocommerce"] #page .woocommerce-checkout > .price,
body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(:last-child),
body[class*="woocommerce"] #page .woocommerce-order-downloads > .price,
body[class*="woocommerce"] #page .woocommerce-order-details > *:not(:last-child),
body[class*="woocommerce"] #page .woocommerce-order-details > .price {
body[class*="woocommerce"] #page .woocommerce-order-details > .price,
body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(:last-child),
body[class*="woocommerce"] #page .woocommerce-customer-details > .price {
margin-bottom: 16px;
}
@ -1412,7 +1480,9 @@ body[class*="woocommerce"] #page .woocommerce-checkout > .form-row-last,
body[class*="woocommerce"] #page .woocommerce-order-downloads > *:not(img):empty + *,
body[class*="woocommerce"] #page .woocommerce-order-downloads > .form-row-last,
body[class*="woocommerce"] #page .woocommerce-order-details > *:not(img):empty + *,
body[class*="woocommerce"] #page .woocommerce-order-details > .form-row-last {
body[class*="woocommerce"] #page .woocommerce-order-details > .form-row-last,
body[class*="woocommerce"] #page .woocommerce-customer-details > *:not(img):empty + *,
body[class*="woocommerce"] #page .woocommerce-customer-details > .form-row-last {
margin-top: 0;
}
@ -1441,7 +1511,8 @@ body[class*="woocommerce"] #page .woocommerce-column--shipping-address > *:empty
body[class*="woocommerce"] #page .woocommerce-products-header > *:empty,
body[class*="woocommerce"] #page .woocommerce-checkout > *:empty,
body[class*="woocommerce"] #page .woocommerce-order-downloads > *:empty,
body[class*="woocommerce"] #page .woocommerce-order-details > *:empty {
body[class*="woocommerce"] #page .woocommerce-order-details > *:empty,
body[class*="woocommerce"] #page .woocommerce-customer-details > *:empty {
margin: 0;
}
@ -1732,17 +1803,27 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
/**
* Account page
*/
body[class*="woocommerce"] #page .woocommerce-MyAccount-navigation {
width: 20%;
body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
width: 100%;
}
body[class*="woocommerce"] #page .woocommerce-MyAccount-navigation ul li a {
body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation ul li a {
line-height: 1.125;
display: inline-table;
}
body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation + *:not(:first-child) {
margin-top: 0;
}
@media only screen and (min-width: 640px) {
body[class*="woocommerce"] #page .entry-content .woocommerce-MyAccount-navigation {
width: 20%;
}
}
body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
width: calc(80% - 16px);
width: 100%;
}
body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
@ -1755,6 +1836,12 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
border-radius: 3px;
}
@media only screen and (min-width: 640px) {
body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
width: calc(80% - 16px);
}
}
body[class*="woocommerce"] #page .addresses .title h3 {
font-size: 1rem;
}
@ -1763,7 +1850,8 @@ body[class*="woocommerce"] #page .addresses .title .edit {
line-height: 1;
}
.woocommerce-account .entry-content .woocommerce > h2 {
.woocommerce-account .entry-content .woocommerce > h2,
body[class*="woocommerce"] #page div[class*="woocommerce"] h2 {
font-size: 1.44rem;
}
@ -1795,11 +1883,6 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
/**
* Single Product Page
*/
.single-product #page #woocommerce-wrapper div.product > .onsale {
right: auto;
left: -0.5em;
}
.single-product #page #woocommerce-wrapper div.product div.images {
margin-bottom: 32px;
}
@ -1837,6 +1920,27 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
.single-product #page #woocommerce-wrapper div.product div.summary p.price {
color: #111111;
font-size: 1.728rem;
line-height: 1.125;
}
.single-product #page #woocommerce-wrapper div.product div.summary span.price del,
.single-product #page #woocommerce-wrapper div.product div.summary p.price del {
color: currentColor;
opacity: 0.5;
display: inline-block;
}
.single-product #page #woocommerce-wrapper div.product div.summary span.price ins,
.single-product #page #woocommerce-wrapper div.product div.summary p.price ins {
background: none;
font-weight: 700;
display: inline-block;
}
.single-product #page #woocommerce-wrapper div.product div.summary span.price .from,
.single-product #page #woocommerce-wrapper div.product div.summary p.price .from {
font-size: 0.69444rem;
color: gold;
}
.single-product #page #woocommerce-wrapper div.product div.summary p.stock {
@ -1855,14 +1959,24 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
margin-top: -32px;
}
.single-product #page #woocommerce-wrapper div.product div.social {
margin-bottom: 32px;
}
.single-product #page #woocommerce-wrapper div.product .product_meta > * {
display: block;
}
.single-product #page #woocommerce-wrapper div.product > .onsale {
right: auto;
left: -0.5em;
}
.single-product #page #woocommerce-wrapper div.product.sale div.summary .span.price ins,
.single-product #page #woocommerce-wrapper div.product.sale div.summary p.price ins {
color: yellowgreen;
}
.single-product #page #woocommerce-wrapper div.product div.social {
margin-bottom: 32px;
}
.single-product #page #woocommerce-wrapper div.product .up-sells > h2 {
font-size: 1.44rem;
}
@ -1946,7 +2060,7 @@ body[class*="woocommerce"] #page ul.product_list_widget li a:not(.remove) {
body[class*="woocommerce"] #page ul.cart_list li img,
body[class*="woocommerce"] #page ul.product_list_widget li img {
margin-left: 4px;
margin-left: 16px;
width: 64px;
}
@ -2029,6 +2143,12 @@ body[class*="woocommerce"] #page .main-navigation > div > ul > li.current-menu-i
color: currentColor;
}
@media only screen and (max-width: 559px) {
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
padding: 16px;
}
}
@media only screen and (min-width: 560px) {
body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
display: inherit;

View file

@ -188,6 +188,84 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* Base
* - Reset the browser
*/
/**
* Button Placeholder style
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
*/
button,
.button,
input[type="submit"],
.wp-block-button__link,
.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
line-height: 1;
color: white;
cursor: pointer;
font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-size: 1rem;
background-color: #CA2017;
border-radius: 4px;
border-width: 0;
padding: 16px 24px;
}
button:before,
.button:before,
input[type="submit"]:before,
.wp-block-button__link:before,
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
.button:after,
input[type="submit"]:after,
.wp-block-button__link:after,
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
content: '';
display: block;
height: 0;
width: 0;
}
button:before,
.button:before,
input[type="submit"]:before,
.wp-block-button__link:before,
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
margin-bottom: -0.12em;
}
button:after,
.button:after,
input[type="submit"]:after,
.wp-block-button__link:after,
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
margin-top: -0.11em;
}
button:hover,
.button:hover,
input:hover[type="submit"],
.wp-block-button__link:hover,
.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
.button:focus,
input:focus[type="submit"],
.wp-block-button__link:focus,
.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
.has-focus.button,
input.has-focus[type="submit"],
.has-focus.wp-block-button__link,
.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
color: white;
background-color: #222222;
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
@ -859,7 +937,8 @@ footer {
.post-thumbnail > *,
.page-content > *,
.comment-content > *,
.author-bio > * {
.author-bio > *,
.widget-area > .widget > * {
margin-top: 16px;
margin-bottom: 16px;
}
@ -869,7 +948,8 @@ footer {
.post-thumbnail > *:first-child,
.page-content > *:first-child,
.comment-content > *:first-child,
.author-bio > *:first-child {
.author-bio > *:first-child,
.widget-area > .widget > *:first-child {
margin-top: 0;
}
@ -878,7 +958,8 @@ footer {
.post-thumbnail > *:last-child,
.page-content > *:last-child,
.comment-content > *:last-child,
.author-bio > *:last-child {
.author-bio > *:last-child,
.widget-area > .widget > *:last-child {
margin-bottom: 0;
}
@ -1069,77 +1150,8 @@ object {
}
/**
* Placeholder button style
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
* Button
*/
button,
.button,
input[type="submit"],
.wp-block-button__link,
.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
line-height: 1;
color: white;
cursor: pointer;
font-weight: bold;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-size: 1rem;
background-color: #CA2017;
border-radius: 4px;
border-width: 0;
padding: 16px 24px;
}
button:before,
.button:before,
input[type="submit"]:before,
.wp-block-button__link:before,
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
.button:after,
input[type="submit"]:after,
.wp-block-button__link:after,
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
content: '';
display: block;
height: 0;
width: 0;
}
button:before,
.button:before,
input[type="submit"]:before,
.wp-block-button__link:before,
.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
margin-bottom: -0.12em;
}
button:after,
.button:after,
input[type="submit"]:after,
.wp-block-button__link:after,
.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
margin-top: -0.11em;
}
button:hover,
.button:hover,
input:hover[type="submit"],
.wp-block-button__link:hover,
.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
.button:focus,
input:focus[type="submit"],
.wp-block-button__link:focus,
.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
.has-focus.button,
input.has-focus[type="submit"],
.has-focus.wp-block-button__link,
.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
color: white;
background-color: #222222;
}
/**
* Block Options
*/
@ -2422,7 +2434,7 @@ body:not(.fse-enabled) .site-description {
margin: 0;
}
.main-navigation #toggle:checked ~ div {
.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
display: block;
}
@ -2446,7 +2458,7 @@ body:not(.fse-enabled) .site-description {
@media only screen and (min-width: 560px) {
.main-navigation > div {
display: block;
display: inline-block;
}
.main-navigation #toggle-menu {
display: none;
@ -2832,6 +2844,13 @@ body:not(.fse-enabled) .footer-menu a {
.entry-content .more-link {
display: block;
color: inherit;
margin-top: 16px;
}
@media only screen and (min-width: 560px) {
.entry-content .more-link {
margin-top: 32px;
}
}
.entry-content .more-link:after {