Varia: Updating WC support to work with Global Styles

This commit is contained in:
Allan Cole 2019-10-21 14:06:54 -04:00
parent 1d9a9ead93
commit d078a6bbba
11 changed files with 42 additions and 98 deletions

View file

@ -40,7 +40,7 @@
}
.wc-block-grid__product-title {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
font-size: map-deep-get($config-global, "font", "size", "base")
}

View file

@ -106,7 +106,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
ul.cart_list li a:not(.remove),
ul.product_list_widget li a:not(.remove),
.woocommerce-mini-cart__total {
font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
@include font-family( map-deep-get($config-header, "main-nav", "font", "family") );
font-size: #{map-deep-get($config-global, "font", "size", "base")};
}
}

View file

@ -15,7 +15,7 @@ body[class*="woocommerce"] #page .woocommerce-pagination {
li > * {
display: block;
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
font-size: #{map-deep-get($config-global, "font", "size", "md")};
font-weight: 600;
padding-left: calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")};

View file

@ -78,7 +78,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
h2,
.comment-reply-title {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
font-size: map-deep-get($config-global, "font", "size", "lg");
font-weight: bold;
}

View file

@ -48,7 +48,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
}
.woocommerce-review__author {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
}
.comment-text {

View file

@ -8,7 +8,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
font-size: map-deep-get($config-global, "font", "size", "base");
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
color: map-deep-get($config-global, "color", "foreground", "light");
a {

View file

@ -22,7 +22,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
td.product-name {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
font-weight: 700;
a {

View file

@ -4,7 +4,7 @@
body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
.woocommerce-order h2 {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
font-size: map-deep-get($config-global, "font", "size", "lg");
font-weight: bold;
}
@ -18,7 +18,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
li {
border: none;
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
font-size: map-deep-get($config-global, "font", "size", "sm");
margin-right: 0;
padding: map-deep-get($config-woocommerce, "table", "padding");
@ -33,7 +33,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
}
strong {
font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
font-size: map-deep-get($config-global, "font", "size", "md");
line-height: map-deep-get($config-global, "font", "line-height", "heading");
}
@ -220,7 +220,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
}
.checkout h3 {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
font-size: map-deep-get($config-global, "font", "size", "lg");
font-weight: bold;
}

View file

@ -13,7 +13,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
li {
a:not(.remove) {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
}

View file

@ -136,7 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
<<<<<<< HEAD
* Add font-family using CSS variables.
* It also adds the proper fallback for browsers without support.
*/
/**
* Extends
*/
/**
@ -155,6 +158,7 @@ input[type="submit"],
cursor: pointer;
font-weight: bold;
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1.2rem;
background-color: blue;
border-radius: 9px;
@ -215,10 +219,6 @@ input.has-focus[type="submit"],
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
=======
* Add font-family using CSS variables.
* It also adds the proper fallback for browsers without support.
>>>>>>> master
*/
/**
* Base
@ -244,6 +244,7 @@ input[type="submit"],
cursor: pointer;
font-weight: bold;
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1.2rem;
background-color: blue;
border-radius: 9px;
@ -1193,75 +1194,6 @@ object {
/**
* Button
*/
<<<<<<< HEAD
=======
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: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1.2rem;
background-color: blue;
border-radius: 9px;
border-width: 0;
padding: 16px 16px;
}
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: indigo;
}
>>>>>>> master
/**
* Block Options
*/

View file

@ -315,7 +315,8 @@ body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-
body[class*="woocommerce"] #page .woocommerce-breadcrumb {
margin-bottom: 32px;
font-size: 1rem;
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
color: #767676;
}
@ -618,7 +619,8 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
}
#content .wc-block-grid .wc-block-grid__product-title {
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1rem;
}
@ -825,7 +827,8 @@ body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li .qua
body[class*="woocommerce"] #page .main-navigation ul.cart_list li a:not(.remove),
body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a:not(.remove),
body[class*="woocommerce"] #page .main-navigation .woocommerce-mini-cart__total {
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1rem;
}
@ -850,7 +853,8 @@ body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers {
body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li > * {
display: block;
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1.2rem;
font-weight: 600;
padding-left: calc(0.66 * 16px);
@ -1059,7 +1063,8 @@ body[class*="woocommerce"] #page .woocommerce-tabs .panel {
body[class*="woocommerce"] #page .woocommerce-tabs .panel h2,
body[class*="woocommerce"] #page .woocommerce-tabs .panel .comment-reply-title {
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1.44rem;
font-weight: bold;
}
@ -1107,7 +1112,8 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar
}
body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommerce-review__author {
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
}
body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
@ -1390,7 +1396,8 @@ body[class*="woocommerce"] #page td.product-thumbnail img {
}
body[class*="woocommerce"] #page td.product-name {
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-weight: 700;
}
@ -1423,7 +1430,8 @@ body[class*="woocommerce"] #page table.cart td.actions .input-text {
* Checkout page
*/
body[class*="woocommerce"] #page .woocommerce-order h2 {
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1.44rem;
font-weight: bold;
}
@ -1438,7 +1446,8 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
border: none;
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 0.83333rem;
margin-right: 0;
padding: 16px;
@ -1454,7 +1463,8 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:no
}
body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
font-family: ("fallback": "serif", "css-var": "--font-base");
font-family: serif;
font-family: var(--font-base, serif);
font-size: 1.2rem;
line-height: 1.125;
}
@ -1630,7 +1640,8 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
}
body[class*="woocommerce"] #page .checkout h3 {
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
font-size: 1.44rem;
font-weight: bold;
}
@ -1853,7 +1864,8 @@ body[class*="woocommerce"] #page {
body[class*="woocommerce"] #page ul.cart_list li a:not(.remove),
body[class*="woocommerce"] #page ul.product_list_widget li a:not(.remove) {
font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
font-family: sans-serif;
font-family: var(--font-headings, sans-serif);
line-height: 1.125;
}