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

Merge pull request #1569 from Automattic/enhancement/add-wc-support-rivington

Browse source 
Rivington: Add WooCommerce support.
This commit is contained in:
Takashi Irie 2019-10-31 17:14:20 +00:00 committed by GitHub
commit 973520580d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 4611 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
rivington/package.json
View file

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

6
rivington/sass/_config-child-theme-deep.scss
View file

@ -92,6 +92,12 @@ $config-global: (
"light": #4b5263,
"dark": #1f2229,
),
"alert": (
"success": #66bb6a,
"info": #2196f3,
"warning": #CAAB57,
"error": #f44336,
),
"text-selection": lighten( #CAAB57, 30% ),
"black": black,
"white": white,

55
rivington/sass/_config-child-theme-woocommerce.scss Normal file
View file

@ -0,0 +1,55 @@
/**
* Redefine Sass map values for child theme WooCommerce output.
*/
$config-woocommerce: (
/* Wrapper Width - accepts full, wide, or defuault */
"wrapper-width": default,
/* Tables */
"table": (
/* Borders */
"border": (
"color": map-deep-get($config-global, "color", "border", "default"),
"radius": 0,
"width": 1px,
),
"padding": map-deep-get($config-global, "spacing", "unit"),
),
/* Tabs */
"tabs": (
/* Borders */
"border": (
"color": map-deep-get($config-global, "color", "border", "default"),
"radius": 10px,
"width": 1px,
),
"padding": map-deep-get($config-global, "spacing", "horizontal"),
),
/* Mini cart */
"mini-cart": (
/* Color */
"color": (
"background": map-deep-get($config-global, "color", "primary", "default"),
"border": map-deep-get($config-global, "color", "border", "dark"),
"text": map-deep-get($config-global, "color", "background", "default"),
"subtotal": map-deep-get($config-global, "color", "foreground", "default"),
"count": map-deep-get($config-global, "color", "foreground", "light"),
),
/* Button */
"button": (
"color": map-deep-get($config-button, "color", "text"),
"background-color": map-deep-get($config-global, "color", "primary", "hover"),
),
"width": #{25 * map-deep-get($config-global, "spacing", "unit")},
),
/* Star Rating */
"star-rating": (
/* Color */
"color": map-deep-get($config-global, "color", "alert", "warning"),
),
);

62
rivington/sass/style-child-theme-woocommerce.scss Executable file
View file

@ -0,0 +1,62 @@
/**
* WooCommerce Styles
* - These styles should only be loaded when WooCommerce is active
*/
/**
* Abstracts
* - Functions and config
*/
@import "../../varia/sass/abstracts/functions";
@import "../../varia/sass/abstracts/config-global";
/**
* Child Theme Name Config
*/
@import "config-child-theme-deep";
/**
* WooCommerce Config
*/
@import "config-child-theme-woocommerce";
/**
* Varia Mixins
*/
@import "../../varia/sass/abstracts/mixins";
/**
* Varia Responsive Logic
*/
@import "../../varia/sass/abstracts/responsive-logic";
/**
* Varia Extends
*/
@import "../../varia/sass/base/extends";
/**
* WooCommerce Styles
*/
@import "../../varia/sass/vendors/woocommerce/style";
/**
* Fix price color or better legibility
*/
#woocommerce-wrapper ul.products li.product .price,
body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price,
body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price {
color: #{map-deep-get($config-global, "color", "foreground", "default")};
}
body[class*="woocommerce"] #page span.onsale,
#content .wc-block-grid .wc-block-grid__product-onsale {
color: #{map-deep-get($config-global, "color", "background", "default")};
}
// Fix mini-cart padding
@include media(mobile-only) {
body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
padding: #{map-deep-get($config-global, "spacing", "unit")};
}
}

169
rivington/style-rtl.css
View file

@ -188,6 +188,84 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* 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.15;
color: #060f29;
cursor: pointer;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-size: 1rem;
background-color: #CAAB57;
border-radius: 3px;
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.195em;
}
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.185em;
}
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: #060f29;
background-color: #b59439;
}
/**
* 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
========================================================================== */
@ -859,7 +937,8 @@ footer {
.post-thumbnail > *,
.page-content > *,
.comment-content > *,
.author-bio > * {
.author-bio > *,
.widget-area > .widget > * {
margin-top: 16px;
margin-bottom: 16px;
}
@ -869,7 +948,8 @@ footer {
.post-thumbnail > *:first-child,
.page-content > *:first-child,
.comment-content > *:first-child,
.author-bio > *:first-child {
.author-bio > *:first-child,
.widget-area > .widget > *:first-child {
margin-top: 0;
}
@ -878,7 +958,8 @@ footer {
.post-thumbnail > *:last-child,
.page-content > *:last-child,
.comment-content > *:last-child,
.author-bio > *:last-child {
.author-bio > *:last-child,
.widget-area > .widget > *:last-child {
margin-bottom: 0;
}
@ -1069,77 +1150,8 @@ object {
}
/**
* Placeholder button style
* - Since buttons appear in various blocks,
* let’s use a placeholder to keep them all
* in-sync
* Button
*/
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.15;
color: #060f29;
cursor: pointer;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-size: 1rem;
background-color: #CAAB57;
border-radius: 3px;
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.195em;
}
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.185em;
}
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: #060f29;
background-color: #b59439;
}
/**
* Block Options
*/
@ -2405,7 +2417,7 @@ body:not(.fse-enabled) .site-description {
margin: 0;
}
.main-navigation #toggle:checked ~ div {
.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
display: block;
}
@ -2429,7 +2441,7 @@ body:not(.fse-enabled) .site-description {
@media only screen and (min-width: 560px) {
.main-navigation > div {
display: block;
display: inline-block;
}
.main-navigation #toggle-menu {
display: none;
@ -2815,6 +2827,13 @@ body:not(.fse-enabled) .footer-menu a {
.entry-content .more-link {
display: block;
color: inherit;
margin-top: 16px;
}
@media only screen and (min-width: 560px) {
.entry-content .more-link {
margin-top: 32px;
}
}
.entry-content .more-link:after {

2146
rivington/style-woocommerce-rtl.css Normal file
View file

File diff suppressed because it is too large Load diff

2152
rivington/style-woocommerce.css Normal file
View file

File diff suppressed because it is too large Load diff

169
rivington/style.css
View file

@ -188,6 +188,84 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* 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.15;
color: #060f29;
cursor: pointer;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-size: 1rem;
background-color: #CAAB57;
border-radius: 3px;
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.195em;
}
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.185em;
}
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: #060f29;
background-color: #b59439;
}
/**
* 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
========================================================================== */
@ -859,7 +937,8 @@ footer {
.post-thumbnail > *,
.page-content > *,
.comment-content > *,
.author-bio > * {
.author-bio > *,
.widget-area > .widget > * {
margin-top: 16px;
margin-bottom: 16px;
}
@ -869,7 +948,8 @@ footer {
.post-thumbnail > *:first-child,
.page-content > *:first-child,
.comment-content > *:first-child,
.author-bio > *:first-child {
.author-bio > *:first-child,
.widget-area > .widget > *:first-child {
margin-top: 0;
}
@ -878,7 +958,8 @@ footer {
.post-thumbnail > *:last-child,
.page-content > *:last-child,
.comment-content > *:last-child,
.author-bio > *:last-child {
.author-bio > *:last-child,
.widget-area > .widget > *:last-child {
margin-bottom: 0;
}
@ -1069,77 +1150,8 @@ object {
}
/**
* Placeholder button style
* - Since buttons appear in various blocks,
* let’s use a placeholder to keep them all
* in-sync
* Button
*/
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.15;
color: #060f29;
cursor: pointer;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-size: 1rem;
background-color: #CAAB57;
border-radius: 3px;
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.195em;
}
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.185em;
}
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: #060f29;
background-color: #b59439;
}
/**
* Block Options
*/
@ -2422,7 +2434,7 @@ body:not(.fse-enabled) .site-description {
margin: 0;
}
.main-navigation #toggle:checked ~ div {
.main-navigation #toggle:checked ~ div:not(.woocommerce-menu-container) {
display: block;
}
@ -2446,7 +2458,7 @@ body:not(.fse-enabled) .site-description {
@media only screen and (min-width: 560px) {
.main-navigation > div {
display: block;
display: inline-block;
}
.main-navigation #toggle-menu {
display: none;
@ -2832,6 +2844,13 @@ body:not(.fse-enabled) .footer-menu a {
.entry-content .more-link {
display: block;
color: inherit;
margin-top: 16px;
}
@media only screen and (min-width: 560px) {
.entry-content .more-link {
margin-top: 32px;
}
}
.entry-content .more-link:after {