Varia: Adding config file for WC, cleaning up table styles
This commit is contained in:
parent
31a4ef03bb
commit
8f8eafb447
13 changed files with 70 additions and 55 deletions
|
@ -1,52 +0,0 @@
|
|||
/**
|
||||
* Button Placeholder style
|
||||
* - Since buttons appear in various blocks,
|
||||
* let’s 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,
|
||||
* let’s 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;
|
||||
}
|
|
@ -6,4 +6,3 @@
|
|||
@import "functions";
|
||||
@import "config-global";
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
|
|
12
varia/sass/vendors/woocommerce/abstracts/_config-woocommerce.scss
vendored
Normal file
12
varia/sass/vendors/woocommerce/abstracts/_config-woocommerce.scss
vendored
Normal 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"),
|
||||
),
|
||||
);
|
|
@ -2,4 +2,5 @@
|
|||
* Abstracts Imports
|
||||
*/
|
||||
|
||||
@import "config-woocommerce";
|
||||
@import "extends";
|
||||
|
|
|
@ -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;
|
||||
|
|
13
varia/sass/vendors/woocommerce/pages/_cart.scss
vendored
13
varia/sass/vendors/woocommerce/pages/_cart.scss
vendored
|
@ -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")};
|
||||
|
|
|
@ -9,7 +9,6 @@
|
|||
@import "sass/abstracts/functions";
|
||||
@import "sass/abstracts/config-global";
|
||||
@import "sass/abstracts/mixins";
|
||||
@import "sass/abstracts/extends";
|
||||
|
||||
/**
|
||||
* Structure
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue