Varia: Updating WC support to work with Global Styles
This commit is contained in:
parent
1d9a9ead93
commit
d078a6bbba
11 changed files with 42 additions and 98 deletions
|
@ -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")
|
||||
}
|
||||
|
||||
|
|
|
@ -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")};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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")};
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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")};
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
* let’s 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
|
||||
*/
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue