0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Refactoring Sass structure to deal with multiple outputs for WC styles and theme styles

Browse source
This commit is contained in:
Allan Cole 2019-10-10 16:39:56 -04:00
parent ef041900e9
commit 3169333f50
35 changed files with 650 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
varia/inc/woocommerce.php
View file

@ -56,7 +56,7 @@ remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
function varia_woocommerce_scripts() {
// WooCommerce styles
wp_enqueue_style( 'varia-woocommerce-style', get_template_directory_uri() . '/style-woocommerce.css', array(), wp_get_theme()->get( 'Version' ) );
wp_enqueue_style( 'varia-woocommerce-style', get_stylesheet_directory_uri() . '/style-woocommerce.css', array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'varia_woocommerce_scripts' );

2
varia/package.json
View file

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

26
varia/sass/abstracts/_extends.scss
View file

@ -24,3 +24,29 @@
}
}
/**
* 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;
}

52
varia/sass/base/_extends.scss Normal file
View file

@ -0,0 +1,52 @@
/**
* 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;
}

1
varia/sass/base/_imports.scss
View file

@ -3,6 +3,7 @@
* - Reset the browser
*/
@import "extends";
@import "normalize";
@import "reset";
@import "accessibility";

7
varia/sass/child-theme/style-woocommerce.scss
View file

@ -11,6 +11,13 @@
@import "sass/abstracts/config-global";
@import "sass/abstracts/mixins";
@import "sass/abstracts/extends";
// WooCommerce Abstracts
@import "sass/vendors/woocommerce/abstracts/imports";
/**
* Child Theme Deep
*/
@import "config-child-theme-deep";
/**
* WooCommerce

36
varia/sass/vendors/_woocommerce.scss vendored
View file

@ -2,42 +2,6 @@
* Main WooCommerce styles
*/
// Fonts
$font_family_primary: #{map-deep-get($config-global, "font", "family", "primary")};
$font_family_secondary: #{map-deep-get($config-global, "font", "family", "secondary")};
$fontsize_xs: map-deep-get($config-global, "font", "size", "xs");
$fontsize_small: map-deep-get($config-global, "font", "size", "sm");
$fontsize_base: map-deep-get($config-global, "font", "size", "base");
$fontsize_medium: map-deep-get($config-global, "font", "size", "md");
$fontsize_large: map-deep-get($config-global, "font", "size", "lg");
$fontsize_xl: map-deep-get($config-global, "font", "size", "xl");
$font_line_height: map-deep-get($config-global, "font", "line-height", "body");
$font_line_height_heading: map-deep-get($config-global, "font", "line-height", "heading");
// Colors
$color_primary: map-deep-get($config-global, "color", "primary", "default");
$color_secondary: map-deep-get($config-global, "color", "secondary", "default");
$color_subtext: map-deep-get($config-global, "color", "foreground", "light");
$color_background: map-deep-get($config-global, "color", "background", "default");
$color_info: map-deep-get($config-global, "color", "alert", "info");
$color_success: map-deep-get($config-global, "color", "alert", "success");
$color_warning: map-deep-get($config-global, "color", "alert", "warning");
$color_error: map-deep-get($config-global, "color", "alert", "error");
$color_background: map-deep-get($config-global, "color", "background", "default");
$color_background_light: map-deep-get($config-global, "color", "background", "light");
$color_foreground: map-deep-get($config-global, "color", "foreground", "default");
$color_foreground_dark: map-deep-get($config-global, "color", "foreground", "dark");
$color_foreground_light: map-deep-get($config-global, "color", "foreground", "light");
$color_border_default: map-deep-get($config-global, "color", "border", "default");
$color_border_light: map-deep-get($config-global, "color", "border", "light");
$color_border_dark: map-deep-get($config-global, "color", "border", "dark");
$color_highlight: $color_warning;
// Spacing
$spacing_base: (0.5 * map-deep-get($config-global, "spacing", "unit"));
$spacing_unit: map-deep-get($config-global, "spacing", "unit");
$spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
$spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
$border_radius: map-deep-get($config-global, "border-radius", "sm");
// Elements
@import "woocommerce/elements/imports";

0
varia/sass/vendors/woocommerce/abstracts/_extends.scss vendored Normal file
View file

5
varia/sass/vendors/woocommerce/abstracts/_imports.scss vendored Normal file
View file

@ -0,0 +1,5 @@
/**
* Abstracts Imports
*/
@import "extends";

1
varia/sass/vendors/woocommerce/blocks/_imports.scss vendored
View file

@ -3,3 +3,4 @@
*/
@import "button/style";
@import "block-grid/style";

66
varia/sass/vendors/woocommerce/blocks/block-grid/_style.scss vendored Normal file
View file

@ -0,0 +1,66 @@
/**
* WooCommerce Block Grid
* - Used by:
* .wp-block-product-new
* .wp-block-product-best-sellers
* .wp-block-product-on-sale
* .wp-block-product-top-rated
* .wp-block-product-categroy
* .wp-block-products-by-attribute
*/
#content .wc-block-grid {
.wc-block-grid__product,
.wc-block-grid__product-link {
& > *:not(:first-child) {
margin-top: map-deep-get($config-global, "spacing", "unit");
}
& > *:not(:last-child) {
margin-bottom: map-deep-get($config-global, "spacing", "unit");
}
& > *:not(img):empty + * {
margin-top: 0;
}
& > *:last-child {
margin-bottom: 0;
}
& > *:empty {
margin: 0;
}
}
.wc-block-grid__product-onsale {
@extend %onsale-style;
}
.wc-block-grid__product-title {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
font-size: map-deep-get($config-global, "font", "size", "base")
}
.wc-block-grid__product-rating .star-rating span:before {
color: map-deep-get($config-global, "color", "secondary", "default");
}
.wc-block-grid__product-price {
color: map-deep-get($config-global, "color", "foreground", "dark");
font-size: map-deep-get($config-global, "font", "size", "md");
line-height: map-deep-get($config-global, "font", "line-height", "heading");
ins {
color: map-deep-get($config-global, "color", "alert", "success");
font-weight: bold;
}
}
.wc-block-grid__product .wc-block-grid__product-onsale {
right: calc(-0.5em + #{map-deep-get($config-global, "spacing", "unit")});
margin: 0
}
}

3
varia/sass/vendors/woocommerce/blocks/button/_editor.scss vendored Normal file
View file

@ -0,0 +1,3 @@
/**
* Button
*/

4
varia/sass/vendors/woocommerce/blocks/button/_style.scss vendored
View file

@ -2,7 +2,7 @@
* Button
*/
body[class*="woocommerce"] #page { // adding #content here to override default wc styles without !important
body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
#respond input#submit,
#respond input#submit.alt,
@ -40,7 +40,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
cursor: not-allowed;
&:hover {
background-color: $color_primary;
background-color: map-deep-get($config-global, "color", "primary", "default");
}
}
}

20
varia/sass/vendors/woocommerce/components/_cart-collaterals.scss vendored
View file

@ -12,45 +12,45 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
tr td,
tr th {
border-top-color: $color_border_default;
border-top-color: map-deep-get($config-global, "color", "border", "default");
}
& > h2 {
font-size: $fontsize_large;
font-size: map-deep-get($config-global, "font", "size", "lg");
}
}
.cart_totals {
p small {
color: $color_subtext;
font-size: $fontsize_small;
color: map-deep-get($config-global, "color", "foreground", "light");
font-size: map-deep-get($config-global, "font", "size", "sm");
}
table {
margin: 0 0 $spacing_base;
margin: 0 0 (0.5 * map-deep-get($config-global, "spacing", "unit"));
td,
th {
line-height: $font_line_height;
line-height: map-deep-get($config-global, "font", "line-height", "body");
}
small {
color: $color_subtext;
color: map-deep-get($config-global, "color", "foreground", "light");
}
}
.discount td {
color: $color_highlight;
color: map-deep-get($config-global, "color", "alert", "warning");
}
}
.shipping-calculator-button {
margin-top: #{0.5 * $spacing_vertical};
margin-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
}
.shipping-calculator-form {
margin-top: $spacing_horizontal;
margin-top: map-deep-get($config-global, "spacing", "horizontal");
}
}
}

18
varia/sass/vendors/woocommerce/components/_cart-sidebar.scss vendored
View file

@ -13,20 +13,20 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
li {
a:not(.remove) {
font-family: $font_family_primary;
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
}
img {
margin-left: 4px;
width: #{2 * $spacing_vertical};
width: #{2 * map-deep-get($config-global, "spacing", "vertical")};
}
dl {
border-left-color: $color_border_default;
border-left-color: map-deep-get($config-global, "color", "border", "default");
dt,
dd {
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
}
}
}
@ -35,16 +35,16 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
.widget_shopping_cart {
.total {
border-top: 1px solid $color_border_default;
padding-top: $spacing_unit;
border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
padding-top: map-deep-get($config-global, "spacing", "unit");
}
.cart_list li {
border-top: 1px solid $color_border_default;
padding: $spacing_unit 0 $spacing_unit #{2 * $spacing_horizontal};
border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
padding: map-deep-get($config-global, "spacing", "unit") 0 map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "horizontal")};
a.remove {
top: $spacing_unit;
top: map-deep-get($config-global, "spacing", "unit");
}
}
}

35
varia/sass/vendors/woocommerce/components/_product-loops.scss vendored
View file

@ -15,19 +15,22 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
ul.products li.product {
text-align: center;
.onsale {
}
.star-rating {
font-size: $fontsize_small;
margin: inherit;
font-size: map-deep-get($config-global, "font", "size", "sm");
margin-left: auto;
margin-right: auto;
}
h3,
.woocommerce-loop-product__title,
.woocommerce-loop-category__title {
padding: inherit;
font-size: $fontsize_base;
font-size: map-deep-get($config-global, "font", "size", "base")
}
a img {
@ -38,7 +41,7 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
}
.woocommerce-placeholder {
border-color: $color_border_default;
border-color: map-deep-get($config-global, "color", "border", "default");
}
.button {
@ -46,9 +49,9 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
}
.price {
color: $color_foreground_dark;
font-size: $fontsize_medium;
line-height: $font_line_height_heading;
color: map-deep-get($config-global, "color", "foreground", "dark");
font-size: map-deep-get($config-global, "font", "size", "md");
line-height: map-deep-get($config-global, "font", "line-height", "heading");
del {
color: inherit;
@ -63,22 +66,22 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
}
.from {
font-size: $fontsize_xs;
color: $color_highlight;
font-size: map-deep-get($config-global, "font", "size", "xs");
color: map-deep-get($config-global, "color", "alert", "warning");
}
}
&.sale a > .price ins {
color: $color_success;
color: map-deep-get($config-global, "color", "alert", "success");
}
}
.woocommerce-result-count {
margin-bottom: $spacing_unit;
margin-bottom: map-deep-get($config-global, "spacing", "unit");
}
.woocommerce-ordering {
margin-bottom: $spacing_unit;
margin-bottom: map-deep-get($config-global, "spacing", "unit");
select {
vertical-align: top;
@ -93,12 +96,12 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
white-space: nowrap;
padding: 0;
clear: both;
border-color: $color_border_default;
border-color: map-deep-get($config-global, "color", "border", "default");
border-right: 0;
margin: 1px;
li {
border-color: $color_border_default;
border-color: map-deep-get($config-global, "color", "border", "default");
padding: 0;
margin: 0;
float: left;
@ -121,8 +124,8 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
span.current,
a:hover,
a:focus {
background: $color_border_default;
color: $color_foreground_light;
background: map-deep-get($config-global, "color", "border", "default");
color: map-deep-get($config-global, "color", "foreground", "light");
}
}
}

48
varia/sass/vendors/woocommerce/components/_product-tabs.scss vendored
View file

@ -10,71 +10,71 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
.woocommerce-tabs {
ul.tabs {
padding-left: $spacing_horizontal;
margin-bottom: $spacing_vertical;
padding-left: map-deep-get($config-global, "spacing", "horizontal");
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
li {
border-color: $color_border_default;
background-color: $color_background_light;
border-radius: $border_radius $border_radius 0 0;
padding-left: $spacing_horizontal;
padding-right: $spacing_horizontal;
border-color: map-deep-get($config-global, "color", "border", "default");
background-color: map-deep-get($config-global, "color", "background", "light");
border-radius: map-deep-get($config-global, "border-radius", "sm") map-deep-get($config-global, "border-radius", "sm") 0 0;
padding-left: map-deep-get($config-global, "spacing", "horizontal");
padding-right: map-deep-get($config-global, "spacing", "horizontal");
a {
padding-top: (0.5 * $spacing_horizontal);
padding-bottom: (0.5 * $spacing_horizontal);
color: $color_foreground_light;
padding-top: #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
padding-bottom: #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
color: map-deep-get($config-global, "color", "foreground", "light");
&:hover {
color: $color_foreground_dark;
color: map-deep-get($config-global, "color", "foreground", "dark");
}
}
&.active {
background-color: $color_background;
border-color: $color_border_default;
border-bottom-color: $color_background;
background-color: map-deep-get($config-global, "color", "background", "default");
border-color: map-deep-get($config-global, "color", "border", "default");
border-bottom-color: map-deep-get($config-global, "color", "background", "default");
a {
color: $color_foreground_dark;
color: map-deep-get($config-global, "color", "foreground", "dark");
text-shadow: inherit;
}
&::before {
box-shadow: 2px 2px 0 $color_background;
box-shadow: 2px 2px 0 map-deep-get($config-global, "color", "background", "default");
}
&::after {
box-shadow: -2px 2px 0 $color_background;
box-shadow: -2px 2px 0 map-deep-get($config-global, "color", "background", "default");
}
}
&::before,
&::after {
border-color: $color_border_default;
border-color: map-deep-get($config-global, "color", "border", "default");
}
&::before {
box-shadow: 2px 2px 0 $color_background_light;
box-shadow: 2px 2px 0 map-deep-get($config-global, "color", "background", "light");
}
&::after {
box-shadow: -2px 2px 0 $color_background_light;
box-shadow: -2px 2px 0 map-deep-get($config-global, "color", "background", "light");
}
}
&::before {
border-bottom-color: $color_border_default;
border-bottom-color: map-deep-get($config-global, "color", "border", "default");
}
}
.panel {
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
h2,
.comment-reply-title {
font-family: $font_family_primary;
font-size: $fontsize_large;
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
font-size: map-deep-get($config-global, "font", "size", "lg");
font-weight: bold;
}
}

22
varia/sass/vendors/woocommerce/components/_reviews.scss vendored
View file

@ -10,8 +10,8 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
#reviews {
h2 small {
color: $color_subtext;
font-size: $fontsize_small;
color: map-deep-get($config-global, "color", "foreground", "light");
font-size: map-deep-get($config-global, "font", "size", "sm");
margin: inherit;
a {
@ -28,30 +28,30 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
ol.commentlist {
li {
margin-bottom: $spacing_unit;
margin-bottom: map-deep-get($config-global, "spacing", "unit");
.meta {
color: $color_subtext;
font-size: $fontsize_small;
color: map-deep-get($config-global, "color", "foreground", "light");
font-size: map-deep-get($config-global, "font", "size", "sm");
}
img.avatar {
padding: 0;
width: $spacing_vertical;
width: map-deep-get($config-global, "spacing", "vertical");
height: auto;
background: transparent;
border-color: $color_border_default;
border-color: map-deep-get($config-global, "color", "border", "default");
margin: 0;
box-shadow: none;
}
.woocommerce-review__author {
font-family: $font_family_primary;
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
}
.comment-text {
margin-left: #{3 * $spacing_unit};
border: 1px solid $color_border_default;
margin-left: #{3 * map-deep-get($config-global, "spacing", "unit")};
border: 1px solid map-deep-get($config-global, "color", "border", "default");
border-radius: 4px;
padding: 1em 1em 0;
@ -75,7 +75,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
}
#respond {
border: 1px solid darken($color_secondary, 3%);
border: 1px solid map-deep-get($config-global, "color", "border", "default");
border-radius: 4px;
padding: 1em 1em 0;
margin: 20px 0 0 50px;

8
varia/sass/vendors/woocommerce/elements/_breadcrumbs.scss vendored
View file

@ -6,10 +6,10 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
.woocommerce-breadcrumb {
margin-bottom: $spacing_vertical;
font-size: $fontsize_base;
font-family: $font_family_primary;
color: $color_subtext;
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")};
color: map-deep-get($config-global, "color", "foreground", "light");
a {
color: currentColor;

22
varia/sass/vendors/woocommerce/elements/_notices.scss vendored
View file

@ -7,31 +7,31 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
padding: $spacing_unit $spacing_vertical $spacing_unit #{2 * $spacing_vertical};
margin-bottom: $spacing_vertical;
background-color: $color_background_light;
color: $color_foreground_dark;
border-top-color: $color_primary;
padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "vertical") map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "vertical")};
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
background-color: map-deep-get($config-global, "color", "background", "light");
color: map-deep-get($config-global, "color", "foreground", "dark");
border-top-color: map-deep-get($config-global, "color", "primary", "default");
}
.woocommerce-message {
border-top-color: $color_success;
border-top-color: map-deep-get($config-global, "color", "alert", "success");
&:before {
color: $color_success;
color: map-deep-get($config-global, "color", "alert", "success");
}
}
.woocommerce-error {
border-top-color: $color_error;
border-top-color: map-deep-get($config-global, "color", "alert", "error");
&:before {
color: $color_error;
color: map-deep-get($config-global, "color", "alert", "error");
}
}
.woocommerce-info {
border-top-color: $color_primary;
border-top-color: map-deep-get($config-global, "color", "primary", "default");
&:before {
color: $color_primary;
color: map-deep-get($config-global, "color", "primary", "default");
}
}
}

18
varia/sass/vendors/woocommerce/elements/_onsale.scss vendored
View file

@ -5,22 +5,6 @@
body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
span.onsale {
border-radius: 100%;
background-color: $color_highlight;
color: $color_foreground_dark;
font-size: $fontsize_small;
font-weight: 700;
font-family: $font_family_primary;
min-height: 3.236rem;
min-width: 3.236rem;
padding: 0.202rem;
position: absolute;
text-align: center;
line-height: 3.236;
top: -0.5em;
right: -0.5em;
left: auto;
margin: 0;
z-index: 9;
@extend %onsale-style;
}
}

14
varia/sass/vendors/woocommerce/elements/_password-strength-meter.scss vendored
View file

@ -6,31 +6,31 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
.woocommerce-password-strength {
text-align: center;
font-weight: 600;
padding: #{0.5 * $spacing_base};
font-size: $fontsize_small;
padding: #{0.5 * #{map-deep-get($config-global, "spacing", "base")}};
font-size: map-deep-get($config-global, "font", "size", "sm");
&.strong {
background-color: $color_success;
background-color: map-deep-get($config-global, "color", "alert", "success");
border-color: none;
}
&.good {
background-color: $color_warning;
background-color: map-deep-get($config-global, "color", "alert", "warning");
border-color: none;
}
&.short {
background-color: $color_error;
background-color: map-deep-get($config-global, "color", "alert", "error");
border-color: none;
}
&.bad {
background-color: $color_error;
background-color: map-deep-get($config-global, "color", "alert", "error");
border-color: none;
}
}
.woocommerce-password-hint {
font-size: $fontsize_xs;
font-size: map-deep-get($config-global, "font", "size", "xs");
}
}

8
varia/sass/vendors/woocommerce/elements/_remove-icon.scss vendored
View file

@ -5,13 +5,13 @@
body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
a.remove {
font-size: $fontsize_large;
height: $fontsize_large;
width: $fontsize_large;
font-size: map-deep-get($config-global, "font", "size", "lg");
height: map-deep-get($config-global, "font", "size", "lg");
width: map-deep-get($config-global, "font", "size", "lg");
color: red !important; // Required for default theme compatibility
&:hover {
color: $color_background !important; // Required for default theme compatibility
color: map-deep-get($config-global, "color", "background", "default") !important; // Required for default theme compatibility
background: red;
}
}

6
varia/sass/vendors/woocommerce/elements/_small-note.scss vendored
View file

@ -5,8 +5,8 @@
body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
small.note {
color: $color_subtext;
font-size: $fontsize_small;
margin-top: $spacing_unit;
color: map-deep-get($config-global, "color", "foreground", "light");
font-size: map-deep-get($config-global, "font", "size", "sm");
margin-top: map-deep-get($config-global, "spacing", "unit");
}
}

6
varia/sass/vendors/woocommerce/elements/_star-rating.scss vendored
View file

@ -7,11 +7,13 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
.star-rating {
&::before {
color: $color_secondary;
color: map-deep-get($config-global, "color", "secondary", "default");
content: "\53\53\53\53\53";
opacity: 0.5;
}
span {
color: $color_secondary;
color: map-deep-get($config-global, "color", "secondary", "default");
}
}
}

22
varia/sass/vendors/woocommerce/elements/_tables.scss vendored
View file

@ -7,39 +7,39 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
table.shop_table {
border-collapse: collapse;
border: 1px solid $color_border_default;
margin-bottom: $spacing_vertical;
border: 1px solid map-deep-get($config-global, "color", "border", "default");
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
td {
border-top: none;
}
tr {
border-bottom: 1px solid $color_border_default;
border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
}
}
table.shop_attributes {
border-top-color: $color_border_default;
border-top-color: map-deep-get($config-global, "color", "border", "default");
border-top-style: solid;
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
th {
padding: $spacing_base;
border-bottom-color: $color_border_default;
padding: (0.5 * map-deep-get($config-global, "spacing", "unit"));
border-bottom-color: map-deep-get($config-global, "color", "border", "default");
border-bottom-style: solid;
line-height: $font_line_height;
line-height: map-deep-get($config-global, "font", "line-height", "body");
}
td {
font-style: inherit;
border-bottom-color: $color_border_default;
border-bottom-color: map-deep-get($config-global, "color", "border", "default");
border-bottom-style: solid;
line-height: $font_line_height;
line-height: map-deep-get($config-global, "font", "line-height", "body");
p {
margin: 0;
padding: $spacing_base 0;
padding: map-deep-get($config-global, "spacing", "base") 0;
}
}

8
varia/sass/vendors/woocommerce/layout/_structure.scss vendored
View file

@ -14,11 +14,11 @@ body[class*="woocommerce"] #page .woocommerce-address-fields,
.woocommerce-Reviews #comments {
& > *:not(:first-child) {
margin-top: $spacing_vertical;
margin-top: map-deep-get($config-global, "spacing", "vertical");
}
& > *:not(:last-child) {
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
}
& > *:empty + *,
@ -53,12 +53,12 @@ body[class*="woocommerce"] #page .woocommerce-checkout,
body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper {
& > *:not(:first-child) {
margin-top: $spacing_unit;
margin-top: map-deep-get($config-global, "spacing", "unit");
}
& > *:not(:last-child),
& > .price {
margin-bottom: $spacing_unit;
margin-bottom: map-deep-get($config-global, "spacing", "unit");
}
& > *:not(img):empty + *,

6
varia/sass/vendors/woocommerce/pages/_account.scss vendored
View file

@ -9,14 +9,14 @@
}
fieldset {
border: 1px solid $color_border_default;
padding: $spacing_unit;
border: 1px solid map-deep-get($config-global, "color", "border", "default");
padding: map-deep-get($config-global, "spacing", "unit");
border-radius: 3px;
}
}
.addresses .title h3 {
font-size: $fontsize_base;
font-size: map-deep-get($config-global, "font", "size", "base")
}
.woocommerce {

106
varia/sass/vendors/woocommerce/pages/_cart.scss vendored
View file

@ -4,38 +4,38 @@
body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
table.shop_table {
border-color: $color_border_default;
border-color: map-deep-get($config-global, "color", "border", "default");
border-radius: 3px;
th {
padding: $spacing_base $spacing_unit;
line-height: $font_line_height;
padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "unit");
line-height: map-deep-get($config-global, "font", "line-height", "body");
}
td {
padding: $spacing_base $spacing_unit;
line-height: $font_line_height;
padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "unit");
line-height: map-deep-get($config-global, "font", "line-height", "body");
}
tfoot td,
tfoot th,
tbody th {
border-top-color: $color_border_default;
border-top-color: map-deep-get($config-global, "color", "border", "default");
}
}
table.my_account_orders {
font-size: $fontsize_small;
font-size: map-deep-get($config-global, "font", "size", "sm");
th,
td {
padding: (0.5 * $spacing_base) $spacing_base;
padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")} #{0.5 * map-deep-get($config-global, "spacing", "unit")};
}
}
td.product-name {
font-family: $font_family_primary;
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
font-weight: 700;
dl.variation,
@ -43,23 +43,23 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
dt,
.wc-item-meta-label {
margin-right: $spacing_base;
margin-right: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
}
}
p.backorder_notification {
font-size: $fontsize_small;
font-size: map-deep-get($config-global, "font", "size", "sm");
}
}
td.product-quantity {
min-width: #{5 * $spacing_unit};
min-width: #{5 * map-deep-get($config-global, "spacing", "unit")};
}
table.cart td.actions .input-text {
width: inherit;
float: inherit;
padding: $spacing_unit;
padding: map-deep-get($config-global, "spacing", "unit");
}
#add_payment_method {
@ -67,114 +67,114 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
table.cart {
.product-thumbnail {
min-width: $spacing_horizontal;
min-width: map-deep-get($config-global, "spacing", "horizontal");
}
img {
width: #{2 * $spacing_vertical};
width: #{2 * map-deep-get($config-global, "spacing", "vertical")};
}
td.actions .coupon .input-text {
border-color: $color_border_default;
padding: $spacing_base;
margin: 0 $spacing_base 0 0;
border-color: map-deep-get($config-global, "color", "border", "default");
padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
margin: 0 map-deep-get($config-global, "spacing", "unit") 0 0;
}
}
.wc-proceed-to-checkout {
padding: $spacing_vertical 0;
padding: map-deep-get($config-global, "spacing", "vertical") 0;
a.checkout-button {
margin-bottom: $spacing_vertical;
font-size: $fontsize_medium;
padding: $spacing_unit;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
font-size: map-deep-get($config-global, "font", "size", "md");
padding: map-deep-get($config-global, "spacing", "unit");
}
}
.checkout {
.create-account small {
font-size: $fontsize_xs;
color: $color_subtext;
font-size: map-deep-get($config-global, "font", "size", "xs");
color: map-deep-get($config-global, "color", "foreground", "light");
}
}
#payment {
background: $color_background_light;
background: map-deep-get($config-global, "color", "background", "light");
border-radius: 3px;
ul.payment_methods {
padding: $spacing_base;
border-bottom-color: $color_border_default;
padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
border-bottom-color: map-deep-get($config-global, "color", "border", "default");
li {
line-height: $font_line_height;
line-height: map-deep-get($config-global, "font", "line-height", "body");
input {
margin-right: $font_line_height;
margin-right: map-deep-get($config-global, "font", "line-height", "body");
}
}
}
div.form-row {
padding: $spacing_base;
padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
}
div.payment_box {
padding: $spacing_base;
margin-bottom: $spacing_base;
margin-top: $spacing_base;
font-size: $fontsize_small;
padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
margin-top: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
font-size: map-deep-get($config-global, "font", "size", "sm");
border-radius: 3px;
line-height: $font_line_height;
background-color: $color_border_default;
color: $color_foreground;
line-height: map-deep-get($config-global, "font", "line-height", "body");
background-color: map-deep-get($config-global, "color", "border", "default");
color: map-deep-get($config-global, "color", "foreground", "default");
input.input-text,
textarea {
border-color: $color_border_default;
border-top-color: $color_border_default;
border-color: map-deep-get($config-global, "color", "border", "default");
border-top-color: map-deep-get($config-global, "color", "border", "default");
}
::-webkit-input-placeholder {
color: $color_foreground_light;
color: map-deep-get($config-global, "color", "foreground", "light");
}
:-moz-placeholder {
color: $color_foreground_light;
color: map-deep-get($config-global, "color", "foreground", "light");
}
:-ms-input-placeholder {
color: $color_foreground_light;
color: map-deep-get($config-global, "color", "foreground", "light");
}
.woocommerce-SavedPaymentMethods {
.woocommerce-SavedPaymentMethods-tokenInput {
margin-right: $spacing_unit;
margin-right: map-deep-get($config-global, "spacing", "unit");
}
}
.wc-credit-card-form {
margin-top: $spacing_unit;
margin-top: map-deep-get($config-global, "spacing", "unit");
}
.wc-credit-card-form-card-number,
.wc-credit-card-form-card-expiry,
.wc-credit-card-form-card-cvc {
font-size: $fontsize_large;
padding: $spacing_base;
font-size: map-deep-get($config-global, "font", "size", "lg");
padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
}
span.help {
font-size: $fontsize_small;
color: $color_subtext;
font-size: map-deep-get($config-global, "font", "size", "sm");
color: map-deep-get($config-global, "color", "foreground", "light");
}
.form-row {
margin: 0 0 $spacing_vertical;
margin: 0 0 map-deep-get($config-global, "spacing", "vertical");
}
p:last-child {
@ -182,7 +182,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
}
&::before {
border-bottom-color: $color_border_default; /* arrow size / color */
border-bottom-color: map-deep-get($config-global, "color", "border", "default"); /* arrow size / color */
}
}
@ -191,7 +191,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
.about_paypal {
float: right;
line-height: 52px;
font-size: $fontsize_small;
font-size: map-deep-get($config-global, "font", "size", "sm");
}
img {
@ -203,12 +203,12 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
}
.woocommerce-terms-and-conditions {
border-color: $color_border_default;
border-color: map-deep-get($config-global, "color", "border", "default");
}
.woocommerce-invalid {
#terms {
outline-color: $color_error;
outline-color: map-deep-get($config-global, "color", "alert", "error");
}
}
}

52
varia/sass/vendors/woocommerce/pages/_single-product.scss vendored
View file

@ -11,49 +11,49 @@
}
div.images {
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
div.thumbnails {
padding-top: $spacing_unit;
padding-top: map-deep-get($config-global, "spacing", "unit");
}
.woocommerce-product-gallery__wrapper .zoomImg {
background-color: $color_background;
background-color: map-deep-get($config-global, "color", "background", "default");
}
.woocommerce-product-gallery__image--placeholder {
border-color: $color_border_light;
border-color: map-deep-get($config-global, "color", "border", "light");
}
.woocommerce-product-gallery__trigger {
font-size: $fontsize_medium;
background: $color_background;
font-size: map-deep-get($config-global, "font", "size", "md");
background: map-deep-get($config-global, "color", "background", "default");
&::before {
border-color: $color_border_dark;
border-color: map-deep-get($config-global, "color", "border", "dark");
}
&::after {
background-color: $color_border_dark;
background-color: map-deep-get($config-global, "color", "border", "dark");
}
}
}
div.summary {
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
span.price,
p.price {
color: $color_foreground_dark;
font-size: $fontsize_xl;
color: map-deep-get($config-global, "color", "foreground", "dark");
font-size: map-deep-get($config-global, "font", "size", "xl");
}
p.stock {
font-size: $fontsize_base;
font-size: map-deep-get($config-global, "font", "size", "base")
}
.stock {
color: $color_primary;
color: map-deep-get($config-global, "color", "primary", "default");
}
.out-of-stock {
@ -61,13 +61,13 @@
}
.woocommerce-product-rating {
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
}
}
div.social {
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
}
.product_meta > * {
@ -76,50 +76,50 @@
.up-sells {
& > h2 {
font-size: $fontsize_large;
font-size: map-deep-get($config-global, "font", "size", "lg");
}
}
p.cart {
margin-bottom: $spacing_vertical;
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
}
form.cart {
.variations {
margin-bottom: $spacing_unit;
margin-bottom: map-deep-get($config-global, "spacing", "unit");
td,
th {
line-height: $font_line_height;
line-height: map-deep-get($config-global, "font", "line-height", "body");
}
select {
margin-right: $spacing_unit;
margin-right: map-deep-get($config-global, "spacing", "unit");
}
td.label {
padding-right: $spacing_unit;
padding-right: map-deep-get($config-global, "spacing", "unit");
}
}
.woocommerce-variation-description p {
margin-bottom: $spacing_unit;
margin-bottom: map-deep-get($config-global, "spacing", "unit");
}
.reset_variations {
font-size: $fontsize_small;
font-size: map-deep-get($config-global, "font", "size", "sm");
}
.group_table {
td.woocommerce-grouped-product-list-item__label {
padding-right: $spacing_unit;
padding-left: $spacing_unit;
padding-right: map-deep-get($config-global, "spacing", "unit");
padding-left: map-deep-get($config-global, "spacing", "unit");
}
td {
padding-bottom: $spacing_unit;
padding-bottom: map-deep-get($config-global, "spacing", "unit");
}
}

6
varia/style-editor.css
View file

@ -183,6 +183,12 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
background-color: indigo;
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* let’s use a placeholder to keep them all
* in-sync
*/
/**
* Base
* - Reset the browser

83
varia/style-rtl.css
View file

@ -206,6 +206,12 @@ input.has-focus[type="submit"],
background-color: indigo;
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* let’s use a placeholder to keep them all
* in-sync
*/
/**
* Base
* - Reset the browser
@ -214,6 +220,83 @@ input.has-focus[type="submit"],
* Base
* - Reset the browser
*/
/**
* Button Placeholder style
* - Since buttons appear in various blocks,
* let’s 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: 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;
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* let’s use a placeholder to keep them all
* in-sync
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */

135
varia/style-woocommerce.css
View file

@ -249,6 +249,36 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a.ha
background-color: indigo;
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* let’s use a placeholder to keep them all
* in-sync
*/
body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-grid__product-onsale {
border-radius: 100%;
background-color: gold;
color: #111111;
font-size: 0.83333rem;
font-weight: 700;
font-family: sans-serif;
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;
}
/**
* Abstracts Imports
*/
/**
* WooCommerce
*/
@ -312,33 +342,13 @@ body[class*="woocommerce"] #page .woocommerce-info:before {
/**
* Star ratings
*/
body[class*="woocommerce"] #page span.onsale {
border-radius: 100%;
background-color: gold;
color: #111111;
font-size: 0.83333rem;
font-weight: 700;
font-family: sans-serif;
min-height: 3.236rem;
min-width: 3.236rem;
padding: 0.202rem;
position: absolute;
text-align: center;
line-height: 3.236;
top: -0.5em;
right: -0.5em;
left: auto;
margin: 0;
z-index: 9;
}
/**
* Password strength meter
*/
body[class*="woocommerce"] #page .woocommerce-password-strength {
text-align: center;
font-weight: 600;
padding: 4px;
padding: 0.5 * ;
font-size: 0.83333rem;
}
@ -395,6 +405,8 @@ body[class*="woocommerce"] #page small.note {
*/
body[class*="woocommerce"] #page .star-rating::before {
color: red;
content: "\53\53\53\53\53";
opacity: 0.5;
}
body[class*="woocommerce"] #page .star-rating span {
@ -440,7 +452,7 @@ body[class*="woocommerce"] #page table.shop_attributes td {
body[class*="woocommerce"] #page table.shop_attributes td p {
margin: 0;
padding: 8px 0;
padding: 0;
}
body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) td,
@ -489,6 +501,66 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
background-color: blue;
}
/**
* WooCommerce Block Grid
* - Used by:
* .wp-block-product-new
* .wp-block-product-best-sellers
* .wp-block-product-on-sale
* .wp-block-product-top-rated
* .wp-block-product-categroy
* .wp-block-products-by-attribute
*/
#content .wc-block-grid .wc-block-grid__product > *:not(:first-child),
#content .wc-block-grid .wc-block-grid__product-link > *:not(:first-child) {
margin-top: 16px;
}
#content .wc-block-grid .wc-block-grid__product > *:not(:last-child),
#content .wc-block-grid .wc-block-grid__product-link > *:not(:last-child) {
margin-bottom: 16px;
}
#content .wc-block-grid .wc-block-grid__product > *:not(img):empty + *,
#content .wc-block-grid .wc-block-grid__product-link > *:not(img):empty + * {
margin-top: 0;
}
#content .wc-block-grid .wc-block-grid__product > *:last-child,
#content .wc-block-grid .wc-block-grid__product-link > *:last-child {
margin-bottom: 0;
}
#content .wc-block-grid .wc-block-grid__product > *:empty,
#content .wc-block-grid .wc-block-grid__product-link > *:empty {
margin: 0;
}
#content .wc-block-grid .wc-block-grid__product-title {
font-family: sans-serif;
font-size: 1rem;
}
#content .wc-block-grid .wc-block-grid__product-rating .star-rating span:before {
color: red;
}
#content .wc-block-grid .wc-block-grid__product-price {
color: #111111;
font-size: 1.2rem;
line-height: 1.125;
}
#content .wc-block-grid .wc-block-grid__product-price ins {
color: yellowgreen;
font-weight: bold;
}
#content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
right: calc(-0.5em + 16px);
margin: 0;
}
/**
* Components Imports
*/
@ -610,11 +682,18 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products {
padding: 0;
}
#woocommerce-wrapper ul.products li.product,
body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product,
body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product {
text-align: center;
}
#woocommerce-wrapper ul.products li.product .star-rating,
body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .star-rating,
body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .star-rating {
font-size: 0.83333rem;
margin: inherit;
margin-left: auto;
margin-right: auto;
}
#woocommerce-wrapper ul.products li.product h3,
@ -829,7 +908,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .
}
body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
border: 1px solid #f00000;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 1em 1em 0;
margin: 20px 0 0 50px;
@ -1116,12 +1195,12 @@ body[class*="woocommerce"] #page table.shop_table {
}
body[class*="woocommerce"] #page table.shop_table th {
padding: 8px 16px;
padding: 16px 16px;
line-height: 1.78;
}
body[class*="woocommerce"] #page table.shop_table td {
padding: 8px 16px;
padding: 16px 16px;
line-height: 1.78;
}
@ -1137,7 +1216,7 @@ body[class*="woocommerce"] #page table.my_account_orders {
body[class*="woocommerce"] #page table.my_account_orders th,
body[class*="woocommerce"] #page table.my_account_orders td {
padding: 4px 8px;
padding: 8px 8px;
}
body[class*="woocommerce"] #page td.product-name {
@ -1177,7 +1256,7 @@ body[class*="woocommerce"] #page #add_payment_method table.cart img {
body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coupon .input-text {
border-color: #DDDDDD;
padding: 8px;
margin: 0 8px 0 0;
margin: 0 16px 0 0;
}
body[class*="woocommerce"] #page #add_payment_method .wc-proceed-to-checkout {

2
varia/style-woocommerce.scss
View file

@ -11,6 +11,8 @@
@import "sass/abstracts/config-global";
@import "sass/abstracts/mixins";
@import "sass/abstracts/extends";
// WooCommerce Abstracts
@import "sass/vendors/woocommerce/abstracts/imports";
/**
* WooCommerce

96
varia/style.css
View file

@ -206,6 +206,12 @@ input.has-focus[type="submit"],
background-color: indigo;
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* let’s use a placeholder to keep them all
* in-sync
*/
/**
* Base
* - Reset the browser
@ -214,6 +220,83 @@ input.has-focus[type="submit"],
* Base
* - Reset the browser
*/
/**
* Button Placeholder style
* - Since buttons appear in various blocks,
* let’s 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: 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;
}
/**
* Onsale Placeholder style
* - Since buttons appear in various blocks,
* let’s use a placeholder to keep them all
* in-sync
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
@ -2420,11 +2503,6 @@ table th,
z-index: 99999;
}
.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
cursor: pointer;
z-index: 99999;
}
.main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
cursor: pointer;
z-index: 99999;
@ -2445,14 +2523,6 @@ table th,
display: block;
}
.main-navigation > div > ul li:hover > ul,
.main-navigation > div > ul li[focus-within] > ul,
.main-navigation > div > ul li ul:hover,
.main-navigation > div > ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
.main-navigation > div > ul li:hover > ul,
.main-navigation > div > ul li:focus-within > ul,
.main-navigation > div > ul li ul:hover,
.main-navigation > div > ul li ul:focus {