Varia: Adding config file for WC, cleaning up table styles

This commit is contained in:
Allan Cole 2019-10-14 13:42:21 -04:00
parent 31a4ef03bb
commit 8f8eafb447
13 changed files with 70 additions and 55 deletions

View file

@ -1,52 +0,0 @@
/**
* Button Placeholder style
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
*/
%button-style {
@include crop-text(map-deep-get($config-button, "font", "line-height"));
color: #{map-deep-get($config-button, "color", "text")};
cursor: pointer;
font-weight: #{map-deep-get($config-button, "font", "weight")};
font-family: #{map-deep-get($config-button, "font", "family")};
font-size: #{map-deep-get($config-button, "font", "size")};
background-color: #{map-deep-get($config-button, "color", "background")};
border-radius: #{map-deep-get($config-button, "border-radius")};
border-width: 0;
padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
&:hover,
&:focus,
&.has-focus {
color: #{map-deep-get($config-button, "color", "text-hover")};
background-color: #{map-deep-get($config-button, "color", "background-hover")};
}
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* lets use a placeholder to keep them all
* in-sync
*/
%onsale-style {
border-radius: 100%;
background-color: map-deep-get($config-global, "color", "alert", "warning");
color: map-deep-get($config-global, "color", "foreground", "dark");
font-size: map-deep-get($config-global, "font", "size", "sm");
font-weight: 700;
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
min-height: 3.236rem;
min-width: 3.236rem;
padding: 0.202rem;
position: absolute;
text-align: center;
text-transform: none;
line-height: 3.236;
top: -0.5em;
right: -0.5em;
left: auto;
margin: 0;
z-index: 9;
}

View file

@ -6,4 +6,3 @@
@import "functions";
@import "config-global";
@import "mixins";
@import "extends";

View file

@ -0,0 +1,12 @@
// WooCommerce
$config-woocommerce: (
/* Tables */
"table": (
/* Font Family */
"border-color": map-deep-get($config-global, "color", "border", "default"),
"border-radius": 0,
"border-width": 1px,
"padding": map-deep-get($config-global, "spacing", "unit"),
),
);

View file

@ -2,4 +2,5 @@
* Abstracts Imports
*/
@import "config-woocommerce";
@import "extends";

View file

@ -11,6 +11,12 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
.main-navigation {
.woocommerce-cart-link .svg-icon {
float: left;
height: #{map-deep-get($config-global, "font", "size", "md")};
width: #{map-deep-get($config-global, "font", "size", "md")};
}
.woocommerce-cart-widget {
max-width: #{20 * map-deep-get($config-global, "spacing", "horizontal")};
padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} 0;

View file

@ -24,6 +24,19 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
}
}
td.product-remove {
height: map-deep-get($config-global, "font", "size", "lg");
width: map-deep-get($config-global, "font", "size", "lg");
}
td.product-thumbnail {
width: #{6 * map-deep-get($config-global, "spacing", "horizontal")};
img {
width: inherit;
}
}
td.product-name {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};

View file

@ -9,7 +9,6 @@
@import "sass/abstracts/functions";
@import "sass/abstracts/config-global";
@import "sass/abstracts/mixins";
@import "sass/abstracts/extends";
/**
* Structure

View file

@ -112,6 +112,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* Crop Text Boundry
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
* Extends
*/
/**
* Button Placeholder style
* - Since buttons appear in various blocks,

View file

@ -9,7 +9,11 @@
@import "sass/abstracts/functions";
@import "sass/abstracts/config-global";
@import "sass/abstracts/mixins";
@import "sass/abstracts/extends";
/**
* Extends
*/
@import "sass/base/extends";
/**
* Base

View file

@ -135,6 +135,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* Crop Text Boundry
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
* Extends
*/
/**
* Button Placeholder style
* - Since buttons appear in various blocks,

View file

@ -742,6 +742,12 @@ body[class*="woocommerce"] #page .wc-block-grid__product-add-to-cart .added_to_c
text-decoration: none;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-icon {
float: left;
height: 1.2rem;
width: 1.2rem;
}
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
max-width: 320px;
padding: 8px 0;
@ -1376,6 +1382,19 @@ body[class*="woocommerce"] #page table.shop_table tbody th {
border-top-color: #DDDDDD;
}
body[class*="woocommerce"] #page td.product-remove {
height: 1.44rem;
width: 1.44rem;
}
body[class*="woocommerce"] #page td.product-thumbnail {
width: 96px;
}
body[class*="woocommerce"] #page td.product-thumbnail img {
width: inherit;
}
body[class*="woocommerce"] #page td.product-name {
font-family: sans-serif;
font-weight: 700;

View file

@ -135,6 +135,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* Crop Text Boundry
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
* Extends
*/
/**
* Button Placeholder style
* - Since buttons appear in various blocks,

View file

@ -27,6 +27,11 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@import "sass/abstracts/imports";
/**
* Extends
*/
@import "sass/base/extends";
/**
* Base
* - Reset the browser