Commit 0a90eed63bf for woocommerce
commit 0a90eed63bfaf72ec69a93319cc73ba39474e28b
Author: Raluca Stan <ralucastn@gmail.com>
Date: Tue Sep 8 17:58:03 2026 +0200
Fix stylelint SCSS parsing in the classic-assets package (#68072)
* Fix classic-assets stylelint SCSS parsing and resolve violations
* Add changelog entry for classic-assets stylelint fix
* Keep original font name casing in the SF Pro variable
* Wire classic-assets lint into CI and tidy the stylelint disables
* Format nested rule added on trunk to satisfy the new CSS lint
* Match CI lint triggers to the files the lint commands actually cover
* Exclude select2.scss from the CI lint trigger
* Add the Gruntfile to the CI lint triggers
The Gruntfile holds the stylelint task definition, so a change to it should
re-run the lint job.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Centralize the select2 exclusion and drop the disables it makes dead
* Correct the Sass note now that the Grunt pipeline is back
The Grunt pipeline depends on `sass` as a caret range, not on an exact
sass-embedded pin, so the deprecated colour functions are less protected
than the note claimed.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Format the tax modal rules added on trunk to satisfy the CSS lint
The order tax modal work landed on trunk after this branch last synced, so
its nested rules and the calc() spacing had not been through the new config.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Enforce max-line-length on comments instead of switching it off
The preset only checks comments, and it already ignores URLs, so the 57 hits
were ordinary prose that just needed wrapping. The one thing that genuinely
cannot comply is a stylelint-disable directive: it has to stay on one line,
and our longest suppressed rule name puts the directive at 80 characters
before its justification even starts. Those are exempted by pattern, and the
remaining 54 comments are rewrapped.
client/blocks already enforces this rule, so this brings the two configs
closer rather than further apart.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Keep max-line-length off, with the real reason written down
Reverts the previous commit. I had it that client/blocks enforces this rule;
it doesn't. Blocks runs stylelint 16, which deleted max-line-length along
with the other stylistic rules, so the rule is absent there rather than
satisfied. Among the packages where it still exists, client/admin and
packages/js/email-editor both switch it off, and nothing else in the repo
enforces a column limit.
Enforcing it here would make this the only package doing so, on a rule
upstream has already removed, and the rewrapped comments would become churn
the moment this package moves to stylelint 16.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Correct the function-url-quotes hit count
The comment said 28, which was measured on trunk before this branch quoted
the URLs. Re-running the preset's "never" against the branch reports 41.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/dev-fix-classic-assets-stylelint-scss-syntax b/plugins/woocommerce/changelog/dev-fix-classic-assets-stylelint-scss-syntax
new file mode 100644
index 00000000000..37285a2c7c8
--- /dev/null
+++ b/plugins/woocommerce/changelog/dev-fix-classic-assets-stylelint-scss-syntax
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix the classic-assets stylelint setup to parse SCSS and clean up the violations it surfaced. Tooling and source-formatting only, no functional CSS changes.
diff --git a/plugins/woocommerce/client/legacy/.stylelintrc b/plugins/woocommerce/client/legacy/.stylelintrc
index b727699279b..d6bfba83397 100644
--- a/plugins/woocommerce/client/legacy/.stylelintrc
+++ b/plugins/woocommerce/client/legacy/.stylelintrc
@@ -1,3 +1,69 @@
+# Legacy SCSS lives here, so this config deliberately diverges from the sibling
+# configs in client/blocks and packages/js/email-editor. Read the notes before
+# "aligning" any of these with the preset.
{
- "extends": "@wordpress/stylelint-config",
+ "extends": "@wordpress/stylelint-config/scss",
+
+ # Vendored upstream file; 159 violations we do not own. This is the single
+ # authoritative exclusion, so a direct `stylelint` run skips it too.
+ "ignoreFiles": [ "css/select2.scss" ],
+
+ "rules": {
+ # The icon fonts have no generic fallback by design.
+ "font-family-no-missing-generic-family-keyword": [
+ true,
+ {
+ "ignoreFontFamilies": [ "WooCommerce", "Dashicons", "dashicons" ]
+ }
+ ],
+
+ # The preset says "never". Several backgrounds here are base64/SVG data
+ # URIs containing spaces, quotes and "<", which cannot legally be
+ # unquoted. The rule is report-only (no "fixable" in its stylelint 14
+ # meta), so "never" would not rewrite them, it would just report 41
+ # violations we would then have to blanket-disable. "always" states the
+ # safe policy once instead.
+ "function-url-quotes": "always",
+
+ # The preset allows only px for line-height. This code uses px, em, rem
+ # and %, so any list that passes today would have to allow all of them,
+ # which is what null already does. Changing the values is a behavior
+ # change and belongs in its own PR.
+ "declaration-property-unit-allowed-list": null,
+
+ # 57 hits, all comments; the preset only checks those and already
+ # ignores URLs. Off because the rule is on its way out and nothing else
+ # here enforces a column limit: stylelint 16 deleted it with the rest
+ # of the stylistic rules (client/blocks is already there), client/admin
+ # and packages/js/email-editor both switch it off, .markdownlint.json
+ # sets MD013 to 9999, and there is no PHPCS LineLength override. Two of
+ # the hits could not comply anyway: a stylelint-disable directive has to
+ # stay on one line, and our longest suppressed rule name puts it at 80
+ # characters before the "--" justification starts.
+ "max-line-length": null,
+
+ # 30927 hits. Satisfying it means reordering the legacy cascade, which
+ # changes rendering. Not realistically fixable here.
+ "no-descending-specificity": null,
+
+ # 51 hits — tractable, unlike the rule above, but merging duplicate
+ # blocks moves declarations earlier in the cascade and can change
+ # rendering, so each one needs checking. Deferred, not impossible.
+ "no-duplicate-selectors": null,
+
+ # 50 hits, all deprecated global colour functions: darken (28),
+ # lighten (13), desaturate (8), adjust-hue (1). They still work with the
+ # Dart Sass version we resolve today, but Dart Sass has them slated for
+ # removal and `sass` is a caret range here, so a fresh install can start
+ # warning without a code change. This is a forward-compat cliff rather
+ # than a style nit. Clearing it requires migrating to the Sass module
+ # system (sass:color) and is tracked separately; do that before bumping
+ # Sass.
+ "scss/no-global-function-names": null,
+
+ # Legacy selectors are a theming contract that third-party themes
+ # override, so renaming them to match the pattern is a breaking change.
+ "selector-class-pattern": null,
+ "selector-id-pattern": null
+ }
}
diff --git a/plugins/woocommerce/client/legacy/Gruntfile.js b/plugins/woocommerce/client/legacy/Gruntfile.js
index a0035f5e56a..c42a23ff7a2 100644
--- a/plugins/woocommerce/client/legacy/Gruntfile.js
+++ b/plugins/woocommerce/client/legacy/Gruntfile.js
@@ -22,7 +22,9 @@ module.exports = function ( grunt ) {
options: {
configFile: '.stylelintrc',
},
- all: [ '<%= dirs.css %>/*.scss', '!<%= dirs.css %>/select2.scss' ],
+ // select2.scss is excluded through `ignoreFiles` in .stylelintrc,
+ // so a direct stylelint run skips it too.
+ all: [ '<%= dirs.css %>/*.scss' ],
},
// Minify .js files.
diff --git a/plugins/woocommerce/client/legacy/css/_animation.scss b/plugins/woocommerce/client/legacy/css/_animation.scss
index 406e99473c1..ea31fab35a9 100644
--- a/plugins/woocommerce/client/legacy/css/_animation.scss
+++ b/plugins/woocommerce/client/legacy/css/_animation.scss
@@ -3,7 +3,8 @@
* Custom WooCommerce Animations.
*/
@keyframes spin {
+
100% {
- transform: rotate( 360deg );
+ transform: rotate(360deg);
}
}
diff --git a/plugins/woocommerce/client/legacy/css/_fonts.scss b/plugins/woocommerce/client/legacy/css/_fonts.scss
index b19a4a7dd20..126473aa9a3 100644
--- a/plugins/woocommerce/client/legacy/css/_fonts.scss
+++ b/plugins/woocommerce/client/legacy/css/_fonts.scss
@@ -3,19 +3,21 @@
* Custom WooCommerce fonts.
*/
@font-face {
- font-family: 'star';
- src: url('../fonts/WooCommerce.woff2') format('woff2'),
- url('../fonts/WooCommerce.woff') format('woff'),
- url('../fonts/WooCommerce.ttf') format('truetype');
- font-weight: normal;
+ font-family: star;
+ src:
+ url("../fonts/WooCommerce.woff2") format("woff2"),
+ url("../fonts/WooCommerce.woff") format("woff"),
+ url("../fonts/WooCommerce.ttf") format("truetype");
+ font-weight: 400;
font-style: normal;
}
@font-face {
- font-family: 'WooCommerce';
- src: url('../fonts/WooCommerce.woff2') format('woff2'),
- url('../fonts/WooCommerce.woff') format('woff'),
- url('../fonts/WooCommerce.ttf') format('truetype');
- font-weight: normal;
+ font-family: WooCommerce;
+ src:
+ url("../fonts/WooCommerce.woff2") format("woff2"),
+ url("../fonts/WooCommerce.woff") format("woff"),
+ url("../fonts/WooCommerce.ttf") format("truetype");
+ font-weight: 400;
font-style: normal;
}
diff --git a/plugins/woocommerce/client/legacy/css/_mixins.scss b/plugins/woocommerce/client/legacy/css/_mixins.scss
index 04160fc3cce..261f260fd4b 100644
--- a/plugins/woocommerce/client/legacy/css/_mixins.scss
+++ b/plugins/woocommerce/client/legacy/css/_mixins.scss
@@ -98,6 +98,7 @@
*/
@mixin vertical_gradient($from: #000, $to: #fff) {
background-color: $from;
+ // stylelint-disable-next-line declaration-block-no-shorthand-property-overrides -- background-color is the fallback for browsers without gradient support.
background: -webkit-linear-gradient($from, $to);
}
@@ -131,9 +132,7 @@
@if lightness($a) >= 65% {
@include text_shadow(0, -1px, 0, rgba(0, 0, 0, $opacity));
- }
-
- @else {
+ } @else {
@include text_shadow(0, 1px, 0, rgba(255, 255, 255, $opacity));
}
@@ -180,9 +179,9 @@
}
@mixin icon( $glyph: "\e001" ) {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
speak: never;
- font-weight: normal;
+ font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
@@ -198,9 +197,9 @@
}
@mixin icon_dashicons( $glyph: "\f333" ) {
- font-family: "Dashicons";
+ font-family: Dashicons;
speak: never;
- font-weight: normal;
+ font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
@@ -217,9 +216,9 @@
}
@mixin iconbefore( $glyph: "\e001" ) {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
speak: never;
- font-weight: normal;
+ font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
@@ -230,9 +229,9 @@
}
@mixin iconbeforedashicons( $glyph: "\f333" ) {
- font-family: "Dashicons";
+ font-family: Dashicons;
speak: never;
- font-weight: normal;
+ font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
@@ -242,9 +241,9 @@
}
@mixin iconafter( $glyph: "\e001" ) {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
speak: never;
- font-weight: normal;
+ font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
@@ -288,6 +287,7 @@
}
@mixin table-marks() {
+
mark {
background: transparent none;
}
@@ -371,7 +371,7 @@
width: 2px;
}
- & span[aria-hidden="true"] {
+ span[aria-hidden="true"] {
border: 0;
clip-path: inset(50%);
height: 1px;
diff --git a/plugins/woocommerce/client/legacy/css/_variables.scss b/plugins/woocommerce/client/legacy/css/_variables.scss
index 5bd91e4ad0f..4889afe7d8c 100644
--- a/plugins/woocommerce/client/legacy/css/_variables.scss
+++ b/plugins/woocommerce/client/legacy/css/_variables.scss
@@ -41,7 +41,7 @@ $radius-s: 2px !default; // Small
// Adjacent work in #64280 adds $gray-700 and $gray-900 — coordinate on merge.
$gray-100: #f6f7f7 !default; // Subtle backgrounds.
$gray-200: #dcdcde !default; // Borders, dividers.
-$gray-400: #cccccc !default; // Matches Core $gray-400.
+$gray-400: #ccc !default; // Matches Core $gray-400.
// Spacing tokens — mirrors WP Design System naming.
$grid-unit-60: 48px !default; // Matches Core $grid-unit-60.
diff --git a/plugins/woocommerce/client/legacy/css/address-autocomplete.scss b/plugins/woocommerce/client/legacy/css/address-autocomplete.scss
index de567c39422..b99bd193729 100644
--- a/plugins/woocommerce/client/legacy/css/address-autocomplete.scss
+++ b/plugins/woocommerce/client/legacy/css/address-autocomplete.scss
@@ -67,6 +67,7 @@
// Search icon styles
&.autocomplete-available {
+
input#billing_address_1,
input#shipping_address_1 {
padding-right: calc(1.1rem + 16px); // Adjust padding for icon
@@ -86,12 +87,14 @@
// Mask needed to ensure the SVG has the correct color.
background-color: var(--wc-form-color-text, #444);
- mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCIgZm9jdXNhYmxlPSJmYWxzZSIgYXJpYS1oaWRkZW49InRydWUiPgogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9jaXJjbGU+CiAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0ibTkuMjUgOS4yNSAyLjUgMi41Ij48L3BhdGg+Cjwvc3ZnPg==")
+ mask:
+ url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCIgZm9jdXNhYmxlPSJmYWxzZSIgYXJpYS1oaWRkZW49InRydWUiPgogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9jaXJjbGU+CiAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0ibTkuMjUgOS4yNSAyLjUgMi41Ij48L3BhdGg+Cjwvc3ZnPg==")
no-repeat center;
mask-size: contain;
// Safari support.
- -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCIgZm9jdXNhYmxlPSJmYWxzZSIgYXJpYS1oaWRkZW49InRydWUiPgogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9jaXJjbGU+CiAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0ibTkuMjUgOS4yNSAyLjUgMi41Ij48L3BhdGg+Cjwvc3ZnPg==")
+ -webkit-mask:
+ url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCIgZm9jdXNhYmxlPSJmYWxzZSIgYXJpYS1oaWRkZW49InRydWUiPgogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9jaXJjbGU+CiAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0ibTkuMjUgOS4yNSAyLjUgMi41Ij48L3BhdGg+Cjwvc3ZnPg==")
no-repeat center;
-webkit-mask-size: contain;
}
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 435ba0578eb..12a9ea51214 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -15,16 +15,19 @@
* Styling begins
*/
.blockUI.blockOverlay {
+
@include loader();
}
$font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light",
-"Helvetica Neue", sans-serif;
+ "Helvetica Neue", sans-serif;
+// stylelint-disable-next-line value-keyword-case -- font names in a Sass variable; stylelint can't tell them from keywords and lowercases them.
$font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.wc-addons-wrap {
+
.marketplace-header {
- background-image: url(../images/marketplace-header-bg@2x.png);
+ background-image: url("../images/marketplace-header-bg@2x.png");
background-position: right;
background-size: cover;
box-sizing: border-box;
@@ -135,7 +138,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
margin: 0;
&.current a::after {
- background-image: url(../images/icons/gridicons-checkmark.svg);
+ background-image: url("../images/icons/gridicons-checkmark.svg");
content: "";
display: block;
height: 20px;
@@ -181,7 +184,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
.current-section-name::after {
- background-image: url(../images/icons/gridicons-chevron-down.svg);
+ background-image: url("../images/icons/gridicons-chevron-down.svg");
background-size: contain;
content: "";
display: block;
@@ -193,6 +196,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
.current-section-dropdown.is-open {
+
ul {
display: flex;
}
@@ -431,6 +435,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
@media only screen and (max-width: 400px) {
+
.addons-button {
width: 100%;
}
@@ -479,6 +484,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
.addon-product-group-see-more,
.addon-product-group-see-more:visited {
color: var(--wp-admin-theme-color, #007cba);
+
/* Primary / Blue */
display: block;
font-size: 13px;
@@ -490,7 +496,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
display: flex;
flex-flow: row;
flex-wrap: wrap;
- font-weight: normal;
+ font-weight: 400;
justify-content: space-between;
margin: 0;
max-width: 1032px;
@@ -599,6 +605,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
&.featured,
&.promoted {
+
.label {
align-items: center;
border-radius: 2px;
@@ -641,6 +648,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
.product-developed-by {
color: #50575e;
+
/* Gray 60 */
font-size: 12px;
line-height: 20px;
@@ -648,6 +656,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
.product-vendor-link {
color: #50575e;
+
/* Gray 60 */
}
}
@@ -695,15 +704,15 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
width: 17px;
&__fill {
- background-image: url(../images/icons/star-golden.svg);
+ background-image: url("../images/icons/star-golden.svg");
}
&__half-fill {
- background-image: url(../images/icons/star-half-filled.svg);
+ background-image: url("../images/icons/star-half-filled.svg");
}
&__no-fill {
- background-image: url(../images/icons/star-gray.svg);
+ background-image: url("../images/icons/star-gray.svg");
}
}
@@ -783,7 +792,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
.storefront {
max-width: 990px;
- background: url(../images/storefront-bg.jpg) bottom right #f6f6f6;
+ background: url("../images/storefront-bg.jpg") bottom right #f6f6f6;
border: 1px solid #ddd;
margin: 1em auto;
padding: 24px;
@@ -841,8 +850,11 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
.no-touch,
.no-js {
+
.wc-addons-wrap {
+
.current-section-dropdown:hover {
+
ul {
display: flex;
}
@@ -872,13 +884,16 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
.woocommerce-page-wc-marketplace {
+
.notice {
margin-left: 20px;
margin-right: 20px;
}
// NOTE: .woocommerce-page is removed within admin.
- &.woocommerce-page, &.woocommerce-admin-page {
+ &.woocommerce-page,
+ &.woocommerce-admin-page {
+
.wrap {
margin-top: 32px;
}
@@ -886,7 +901,9 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
.woocommerce-page-wc-subscriptions {
+
#wpbody-content {
+
.screen-reader-text + .notice {
margin-top: 32px;
}
@@ -894,6 +911,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
}
.woocommerce-embed-page.woocommerce-page-wc-marketplace {
+
#screen-meta-links {
position: absolute;
right: 0;
@@ -902,6 +920,7 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
.woocommerce-message,
.woocommerce-BlankState {
+
a.button-primary,
button.button-primary {
display: inline-block;
@@ -945,30 +964,36 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
#inventory_product_data .notice,
#variable_product_options .notice {
display: flex;
- background-color: #ffffff;
+ background-color: #fff;
border-color: #eee;
- border-width: 1px 0px 0px 0px;
+ border-width: 1px 0 0 0;
border-style: solid;
align-items: center;
box-shadow: 0 0 0;
margin: 5px 0 0;
+
> p {
+
a {
text-decoration: none;
white-space: nowrap;
}
}
+
> p:not(:last-child) {
width: 85%;
}
+
> img.info-icon {
width: 1em;
filter: brightness(50%);
}
+
.woocommerce-add-variation-price-container {
width: auto;
display: flex;
justify-content: flex-end;
+
> button {
align-self: center;
}
@@ -980,7 +1005,9 @@ $font-sf-pro-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe U
*/
.wc-backbone-modal-set-price-variations.wc-backbone-modal,
.wc-backbone-modal-add-attribute-term.wc-backbone-modal {
+
@media screen and (min-width: 783px) {
+
.wc-backbone-modal-content {
max-width: 400px;
min-width: auto;
@@ -1029,6 +1056,7 @@ $default-font-size: 14px;
$default-line-height: 18px;
#variable_product_options {
+
.form-row select {
max-width: 100%;
}
@@ -1038,6 +1066,7 @@ $default-line-height: 18px;
}
.toolbar-top {
+
.button,
.select {
margin: 1px;
@@ -1060,6 +1089,7 @@ $default-line-height: 18px;
}
.add-attributes-container {
+
@extend %container-defaults;
align-items: center;
@@ -1081,25 +1111,31 @@ $default-line-height: 18px;
width: 100%;
p {
+
@extend %centered-text;
}
}
}
#variable_product_options_inner {
+
> .toolbar:not(.expand-close-hidden) {
border-bottom: 1px solid #eee;
}
+
.add-variation-container {
display: none;
}
&.no-variations {
+
> .toolbar:not(.expand-close-hidden) {
border-bottom: none;
}
+
.add-variation-container {
display: flex;
+
@extend %container-defaults;
flex-direction: column;
justify-content: center;
@@ -1114,6 +1150,7 @@ $default-line-height: 18px;
}
p {
+
@extend %centered-text;
}
}
@@ -1122,6 +1159,7 @@ $default-line-height: 18px;
}
#product_attributes {
+
.add-global-attribute-container {
display: flex;
flex-direction: column;
@@ -1137,14 +1175,17 @@ $default-line-height: 18px;
flex-direction: column;
justify-content: center;
align-items: center;
- padding: 32px 0px;
+ padding: 32px 0;
gap: 24px;
flex: 1;
+
@media screen and (max-width: 782px) {
+
button {
vertical-align: top;
}
}
+
p {
width: 90%;
max-width: 544px;
@@ -1154,17 +1195,22 @@ $default-line-height: 18px;
}
}
}
+
.toolbar-top {
+
.button,
.select2-container {
margin: 1px;
}
}
+
.select2-container {
min-width: 190px;
}
}
+
#select2-attribute_taxonomy-results {
+
.select2-results__option,
.select2-results__group {
margin: 0;
@@ -1202,12 +1248,14 @@ mark.amount {
width: 16px;
&::after {
+
@include icon_dashicons("\f223");
cursor: help;
}
}
.wc-wp-version-gte-53 {
+
.woocommerce-help-tip,
.woocommerce-product-type-tip {
font-size: 1.2em;
@@ -1230,6 +1278,7 @@ table.wc_status_table {
}
tr:nth-child(2n) {
+
th,
td {
background: #fcfcfc;
@@ -1252,7 +1301,7 @@ table.wc_status_table {
td,
th {
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
&.run-tool {
text-align: right;
@@ -1297,13 +1346,16 @@ table.wc_status_table {
}
table.wp-list-table.urls {
+
td,
th {
+
@include table-marks();
}
}
table.wc_status_table--tools {
+
td,
th {
padding: 2em;
@@ -1311,6 +1363,7 @@ table.wc_status_table--tools {
}
.taxonomy-product_cat {
+
.check-column .woocommerce-help-tip {
font-size: 1.5em;
margin: -3px 0 0 5px;
@@ -1340,9 +1393,13 @@ table.wc_status_table--tools {
}
@media screen and (max-width: 500px) {
+
body.woocommerce_page_wc-status {
+
.updated.woocommerce-message.inline {
+
p.submit {
+
a,
button {
display: block;
@@ -1373,7 +1430,7 @@ table.wc_status_table--tools {
.file-id {
padding: 3px 5px;
- background: rgba( 0, 0, 0, 0.07 );
+ background: rgba(0, 0, 0, 0.07);
font-family: Consolas, Monaco, monospace;
}
}
@@ -1447,7 +1504,7 @@ table.wc_status_table--tools {
position: relative;
white-space: pre-wrap;
- &:before {
+ &::before {
counter-increment: line;
content: counter(line);
display: block;
@@ -1466,12 +1523,13 @@ table.wc_status_table--tools {
background: #fff8c5;
}
- .log-level:before {
+ .log-level::before {
color: #fff8c5;
}
}
&.has-context {
+
summary {
cursor: pointer;
}
@@ -1496,7 +1554,7 @@ table.wc_status_table--tools {
overflow: hidden;
padding: 0 1em;
border-left: 1px solid #c3c4c7;
- background: #ffffff;
+ background: #fff;
}
.log-timestamp {
@@ -1509,6 +1567,7 @@ table.wc_status_table--tools {
}
.wc-logs-search-results {
+
tbody {
word-wrap: break-word;
@@ -1547,7 +1606,9 @@ table.wc_status_table--tools {
}
.wc-logs-settings {
+
.wc-settings-row-logs-retention-period-days {
+
td {
line-height: 2;
}
@@ -1570,8 +1631,8 @@ table.wc_status_table--tools {
font-size: 80%;
font-weight: 700;
line-height: 1;
- color: #000000;
- background: #ffffff;
+ color: #000;
+ background: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@@ -1580,9 +1641,9 @@ table.wc_status_table--tools {
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
- &:before {
+ &::before {
content: "•";
- color: #ffffff;
+ color: #fff;
margin-left: -1.3em;
margin-right: 0.7em;
}
@@ -1622,6 +1683,7 @@ table.wc_status_table--tools {
.wp-list-table.logs {
// Adjust log table columns only when table is not collapsed
@media screen and (min-width: 783px) {
+
.column-timestamp {
width: 18%;
}
@@ -1640,6 +1702,7 @@ table.wc_status_table--tools {
}
.column-message {
+
pre {
margin: 0;
white-space: pre-wrap;
@@ -1647,7 +1710,9 @@ table.wc_status_table--tools {
}
.column-context {
+
.button {
+
span {
line-height: 1.3;
}
@@ -1689,6 +1754,7 @@ table.wc_status_table--tools {
* Inline edit
*/
.inline-edit-product.quick-edit-row {
+
.inline-edit-col-center,
.inline-edit-col-right {
float: right !important;
@@ -1743,11 +1809,13 @@ table.wc_status_table--tools {
}
#woocommerce-fields-bulk.inline-edit-col {
+
label {
clear: left;
}
.inline-edit-group {
+
label {
clear: none;
width: 49%;
@@ -1836,6 +1904,7 @@ ul.wc_coupon_list {
*/
&::before {
+
@include icon_dashicons("\f158");
}
@@ -1871,6 +1940,7 @@ ul.wc_coupon_list_block {
}
.button.wc-reload {
+
@include ir();
padding: 0;
height: 28px;
@@ -1878,12 +1948,14 @@ ul.wc_coupon_list_block {
display: inline-block;
&::after {
+
@include icon_dashicons("\f345");
line-height: 28px;
}
}
#woocommerce-order-data {
+
.postbox-header,
.hndle,
.handlediv {
@@ -1922,7 +1994,7 @@ ul.wc_coupon_list_block {
p.order_number {
margin: 0;
- font-weight: normal;
+ font-weight: 400;
line-height: 1.5;
font-size: 13px;
}
@@ -1935,6 +2007,7 @@ ul.wc_coupon_list_block {
}
@media screen and (max-width: 1280px) {
+
.order_data_header {
flex-direction: column;
gap: 24px;
@@ -2052,10 +2125,12 @@ ul.wc_coupon_list_block {
.wc-customer-search {
width: 100%;
}
+
input.date-picker {
width: 40%;
margin-right: 8px;
}
+
input.hour,
input.minute {
width: 4em;
@@ -2072,6 +2147,7 @@ ul.wc_coupon_list_block {
padding-right: 1px;
.select2-container {
+
.select2-selection--single {
height: 32px;
@@ -2084,6 +2160,7 @@ ul.wc_coupon_list_block {
.wc-customer-user,
.wc-order-status {
+
label a {
float: right;
margin-left: 8px;
@@ -2107,7 +2184,7 @@ ul.wc_coupon_list_block {
}
&::after {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
position: absolute;
top: 0;
left: 0;
@@ -2120,7 +2197,7 @@ ul.wc_coupon_list_block {
}
a.edit_address::after {
- font-family: "Dashicons";
+ font-family: Dashicons;
content: "\f464";
}
@@ -2129,7 +2206,7 @@ ul.wc_coupon_list_block {
.load_customer_billing {
font-size: 13px;
display: inline-block;
- font-weight: normal;
+ font-weight: 400;
}
.load_customer_shipping {
@@ -2201,6 +2278,7 @@ ul.wc_coupon_list_block {
body.post-type-shop_order,
body.woocommerce_page_wc-orders {
+
.order_actions {
display: flex;
flex-direction: column;
@@ -2278,6 +2356,7 @@ body.woocommerce_page_wc-orders {
}
#woocommerce-order-items {
+
.inside {
margin: 0;
padding: 0;
@@ -2349,12 +2428,13 @@ body.woocommerce_page_wc-orders {
}
.label-highlight {
- font-weight: bold;
+ font-weight: 700;
}
}
// Stack the coupons/totals columns full width once the admin sidebar hides.
@media screen and (max-width: 782px) {
+
.wc-used-coupons,
.wc-order-totals {
float: none;
@@ -2395,6 +2475,7 @@ body.woocommerce_page_wc-orders {
}
.add-items {
+
.description {
margin-right: 10px;
}
@@ -2411,16 +2492,18 @@ body.woocommerce_page_wc-orders {
}
}
-#woocommerce-order-items .woocommerce_order_items_wrapper, .wc-order-preview-table-wrapper {
+#woocommerce-order-items .woocommerce_order_items_wrapper,
+.wc-order-preview-table-wrapper {
padding-bottom: 1.5em;
small.refunded {
display: block;
- color: red;
+ color: #f00;
white-space: nowrap;
margin-top: 0.5em;
&::before {
+
@include icon_dashicons("\f171");
position: relative;
top: auto;
@@ -2433,6 +2516,7 @@ body.woocommerce_page_wc-orders {
}
#woocommerce-order-items {
+
.inside {
display: block !important;
}
@@ -2454,7 +2538,7 @@ body.woocommerce_page_wc-orders {
thead th {
text-align: left;
padding: 1em;
- font-weight: normal;
+ font-weight: 400;
color: $gray-900;
background: #f8f8f8;
-webkit-touch-callout: none;
@@ -2540,6 +2624,7 @@ body.woocommerce_page_wc-orders {
text-align: center;
&:empty::before {
+
@include icon_dashicons("\f128");
width: 38px;
line-height: 38px;
@@ -2557,6 +2642,7 @@ body.woocommerce_page_wc-orders {
}
td.name {
+
.wc-order-item-sku,
.wc-order-item-variation {
display: block;
@@ -2576,6 +2662,7 @@ body.woocommerce_page_wc-orders {
}
.item_cost_of_goods {
+
.view {
opacity: 50%;
}
@@ -2736,6 +2823,7 @@ body.woocommerce_page_wc-orders {
color: $gray-700;
tr {
+
th {
border: 0;
padding: 0 4px 0.5em 0;
@@ -2784,6 +2872,7 @@ body.woocommerce_page_wc-orders {
}
tr.fee .thumb div {
+
@include ir();
font-size: 1.5em;
line-height: 1em;
@@ -2791,12 +2880,14 @@ body.woocommerce_page_wc-orders {
margin: 0 auto;
&::before {
+
@include icon("\e007");
color: #ccc;
}
}
tr.refund .thumb div {
+
@include ir();
font-size: 1.5em;
line-height: 1em;
@@ -2804,13 +2895,16 @@ body.woocommerce_page_wc-orders {
margin: 0 auto;
&::before {
+
@include icon("\e014");
color: #ccc;
}
}
tr.shipping {
+
.thumb div {
+
@include ir();
font-size: 1.5em;
line-height: 1em;
@@ -2818,6 +2912,7 @@ body.woocommerce_page_wc-orders {
margin: 0 auto;
&::before {
+
@include icon("\e01a");
color: #ccc;
}
@@ -2836,7 +2931,9 @@ body.woocommerce_page_wc-orders {
th.line_tax,
td.line_tax {
+
.delete-order-tax {
+
@include ir();
float: right;
font-size: 14px;
@@ -2844,6 +2941,7 @@ body.woocommerce_page_wc-orders {
margin: 3px -18px 0 0;
&::before {
+
@include icon_dashicons("\f153");
color: #999;
}
@@ -2892,6 +2990,7 @@ body.woocommerce_page_wc-orders {
}
&:hover {
+
&::before {
color: #999;
}
@@ -2903,13 +3002,16 @@ body.woocommerce_page_wc-orders {
}
.edit-order-item::before {
+
@include icon_dashicons("\f464");
position: relative;
}
.delete-order-item,
.delete_refund {
+
&::before {
+
@include icon_dashicons("\f158");
position: relative;
}
@@ -2926,6 +3028,7 @@ body.woocommerce_page_wc-orders {
tbody tr:focus-within,
tbody tr:hover {
+
.wc-order-edit-line-item-actions {
opacity: 1;
}
@@ -2942,6 +3045,7 @@ body.woocommerce_page_wc-orders {
}
#woocommerce-order-downloads {
+
.buttons {
float: left;
padding: 0;
@@ -2967,6 +3071,7 @@ body.woocommerce_page_wc-orders {
}
#order_custom #postcustomstuff {
+
.add-custom-field {
padding: 12px 8px 8px;
}
@@ -2982,6 +3087,7 @@ body.woocommerce_page_wc-orders {
}
#side-sortables #woocommerce-order-downloads {
+
.buttons,
.select2-container {
max-width: 100%;
@@ -3016,6 +3122,7 @@ body.woocommerce_page_wc-orders {
}
#woocommerce_customers {
+
p.search-box {
margin: 6px 0 4px;
float: left;
@@ -3028,6 +3135,7 @@ body.woocommerce_page_wc-orders {
}
.widefat {
+
&.customers td {
vertical-align: middle;
padding: 4px 7px;
@@ -3058,6 +3166,7 @@ body.woocommerce_page_wc-orders {
width: 110px;
a.button {
+
@include ir();
display: inline-block;
margin: 2px 4px 2px 0;
@@ -3068,9 +3177,9 @@ body.woocommerce_page_wc-orders {
vertical-align: middle;
&::after {
- font-family: "Dashicons";
+ font-family: Dashicons;
speak: never;
- font-weight: normal;
+ font-weight: 400;
font-variant: normal;
text-transform: none;
margin: 0;
@@ -3096,7 +3205,7 @@ body.woocommerce_page_wc-orders {
}
a.link::after {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e00d";
}
@@ -3105,12 +3214,12 @@ body.woocommerce_page_wc-orders {
}
a.refresh::after {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e031";
}
a.processing::after {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e00f";
}
@@ -3128,9 +3237,13 @@ body.woocommerce_page_wc-orders {
}
.wc-wp-version-gte-53 {
+
.widefat {
+
.column-wc_actions {
+
a.button {
+
&::after {
margin-top: 2px;
}
@@ -3158,6 +3271,7 @@ body.woocommerce_page_wc-orders {
}
.tablenav {
+
.select2-selection--single {
height: 32px;
@@ -3180,6 +3294,7 @@ body.woocommerce_page_wc-orders {
thead,
tfoot {
+
th {
padding: 0.75em 1em;
}
@@ -3199,6 +3314,7 @@ body.woocommerce_page_wc-orders {
}
tbody {
+
td,
th {
padding: 1em;
@@ -3310,6 +3426,7 @@ body.woocommerce_page_wc-orders {
border-radius: 4px;
&::before {
+
@include icon("\e010");
line-height: 16px;
font-size: 14px;
@@ -3327,6 +3444,7 @@ body.woocommerce_page_wc-orders {
}
.order-preview.disabled {
+
&::before {
content: "";
background: url("../images/wpspin-2x.gif") no-repeat center top;
@@ -3339,12 +3457,13 @@ body.woocommerce_page_wc-orders {
.woocommerce_page_wc-orders .wp-list-table .locked-indicator-icon {
margin-left: -2px;
- &:before {
+ &::before {
vertical-align: top;
}
}
-.order-status, .fulfillment-status {
+.order-status,
+.fulfillment-status {
display: inline-flex;
line-height: 2.5em;
color: #454545;
@@ -3363,7 +3482,7 @@ body.woocommerce_page_wc-orders {
&.status-on-hold {
background: #f8dda7;
- color: #573B00;
+ color: #573b00;
}
&.status-failed {
@@ -3389,6 +3508,7 @@ body.woocommerce_page_wc-orders {
}
.wc-order-preview {
+
.order-status {
float: right;
margin-right: 54px;
@@ -3409,7 +3529,6 @@ body.woocommerce_page_wc-orders {
th,
td {
padding: 1em 1.5em;
- text-align: left;
border: 0;
border-bottom: 1px solid #eee;
margin: 0;
@@ -3487,6 +3606,7 @@ body.woocommerce_page_wc-orders {
}
footer {
+
.button.button-large {
margin-left: 10px;
height: auto;
@@ -3500,6 +3620,7 @@ body.woocommerce_page_wc-orders {
}
.wc-action-button-group {
+
.wc-action-button {
margin: 0 0 0 -1px !important;
border: 1px solid #ccc;
@@ -3534,12 +3655,14 @@ body.woocommerce_page_wc-orders {
}
@media screen and (max-width: 782px) {
+
.woocommerce_page_wc-orders #order-search-filter {
display: none;
}
.woocommerce_page_wc-orders .wc-orders-list-table.wp-list-table,
.post-type-shop_order .wp-list-table {
+
.check-column {
width: 1em;
vertical-align: top;
@@ -3550,6 +3673,7 @@ body.woocommerce_page_wc-orders {
}
.column-order_number {
+
.toggle-row {
height: 20px;
}
@@ -3565,17 +3689,18 @@ body.woocommerce_page_wc-orders {
}
td.column-wc_actions {
- min-height: 2.0em !important;
+ min-height: 2em !important;
}
tr:not(.is-expanded) {
+
.column-order_number {
vertical-align: top;
a.order-view {
display: inline-block;
vertical-align: top;
- width: calc( 50% - 40px - 4px );
+ width: calc(50% - 40px - 4px);
margin-right: 4px;
}
@@ -3584,7 +3709,7 @@ body.woocommerce_page_wc-orders {
vertical-align: top;
&.order_date {
- width: calc( 20% - 4px );
+ width: calc(20% - 4px);
margin-right: 4px;
}
@@ -3595,18 +3720,20 @@ body.woocommerce_page_wc-orders {
}
@media screen and (max-width: 400px) {
+
a.order-view {
display: block;
- width: calc( 100% - 40px );
+ width: calc(100% - 40px);
}
.small-screen-only {
+
&.order_date {
- width: calc( 40% - 4px );
+ width: calc(40% - 4px);
}
&.order_status {
- width: calc( 60% - 40px);
+ width: calc(60% - 40px);
}
}
}
@@ -3614,11 +3741,11 @@ body.woocommerce_page_wc-orders {
}
// Hide the small-screen date/status copies when the corresponding column is hidden via Screen Options.
- &:has( thead th.column-order_date.hidden ) .order_date.small-screen-only {
+ &:has(thead th.column-order_date.hidden) .order_date.small-screen-only {
display: none;
}
- &:has( thead th.column-order_status.hidden ) .order_status.small-screen-only {
+ &:has(thead th.column-order_status.hidden) .order_status.small-screen-only {
display: none;
}
@@ -3626,28 +3753,33 @@ body.woocommerce_page_wc-orders {
}
.column-customer_message .note-on {
+
@include ir();
margin: 0 auto;
color: #999;
&::after {
+
@include icon("\e026");
line-height: 16px;
}
}
.column-order_notes .note-on {
+
@include ir();
margin: 0 auto;
color: #999;
&::after {
+
@include icon("\e027");
line-height: 16px;
}
}
.attributes-table {
+
td,
th {
width: 15%;
@@ -3662,14 +3794,16 @@ body.woocommerce_page_wc-orders {
width: 2em;
.configure-terms {
+
@include ir();
padding: 0 !important;
height: 2em !important;
width: 2em;
&::after {
+
@include icon("\f111");
- font-family: "Dashicons";
+ font-family: Dashicons;
line-height: 1.85;
}
}
@@ -3686,6 +3820,7 @@ ul.order_notes {
gap: 16px;
li {
+
.note_content {
background: #fff;
border: 1px solid $gray-200;
@@ -3769,6 +3904,7 @@ ul.order_notes {
}
.order_note_visibility {
+
select {
width: 100%;
max-width: 100%;
@@ -3792,6 +3928,7 @@ ul.order_notes {
}
table.wp-list-table {
+
.woocommerce-Price-amount {
white-space: nowrap;
}
@@ -3808,6 +3945,7 @@ table.wp-list-table {
}
tbody {
+
td.column-handle {
cursor: move;
width: 17px;
@@ -3816,7 +3954,7 @@ table.wp-list-table {
&::before {
content: "\f333";
- font-family: "Dashicons";
+ font-family: Dashicons;
text-align: center;
line-height: 1;
color: #999;
@@ -3912,15 +4050,18 @@ table.wp-list-table {
span.wc-image,
span.wc-featured {
+
@include ir();
margin: 0 auto;
&::before {
+
@include icon_dashicons("\f128");
}
}
span.wc-featured {
+
&::before {
content: "\f155";
}
@@ -3936,6 +4077,7 @@ table.wp-list-table {
}
mark {
+
&.instock,
&.outofstock,
&.onbackorder {
@@ -3960,10 +4102,12 @@ table.wp-list-table {
.order-notes_head,
.notes_head,
.status_head {
+
@include ir();
margin: 0 auto;
&::after {
+
@include icon;
}
}
@@ -4137,7 +4281,7 @@ table.wc_input_table {
&::before {
content: "\f333";
- font-family: "Dashicons";
+ font-family: Dashicons;
text-align: center;
line-height: 1;
color: #999;
@@ -4188,6 +4332,7 @@ table.wc_input_table {
}
table.wc_tax_rates {
+
td.country {
position: relative;
}
@@ -4246,9 +4391,8 @@ table.wc_shipping {
&::before {
content: "\f333";
- font-family: "Dashicons";
+ font-family: Dashicons;
text-align: center;
- line-height: 1;
color: #999;
display: block;
width: 24px;
@@ -4282,7 +4426,7 @@ table.wc_shipping {
right: 0;
width: 100%;
height: 100%;
- font: normal 20px/23px dashicons;
+ font: 400 20px/23px dashicons;
text-align: center;
text-indent: 0;
-webkit-font-smoothing: antialiased;
@@ -4311,14 +4455,14 @@ table.wc_shipping {
}
.wc-payment-gateway-method-name {
- font-weight: normal;
+ font-weight: 400;
}
.wc-email-settings-table-name {
font-weight: 700;
span {
- font-weight: normal;
+ font-weight: 400;
color: #999;
margin: 0 0 0 4px !important;
}
@@ -4343,6 +4487,7 @@ table.wc_shipping {
}
.wc-shipping-zone-settings {
+
#zone_name {
width: 600px;
padding: 2px 8px;
@@ -4353,6 +4498,7 @@ table.wc_shipping {
}
td.forminp {
+
input,
textarea {
padding: 8px;
@@ -4407,13 +4553,13 @@ table.wc_shipping {
font-size: 13px;
font-weight: 400;
line-height: 18px;
- color: #3C434A;
+ color: #3c434a;
}
}
#wc-shipping-zone-region-picker-root {
width: 100%;
- max-width: 600px;
+ max-width: 600px;
}
}
@@ -4431,6 +4577,7 @@ table.wc_shipping {
.wc-backbone-modal-add-shipping-method,
.wc-backbone-modal-shipping-method-settings,
.wc-shipping-class-modal {
+
&.wc-backbone-modal .wc-backbone-modal-content {
max-width: 600px;
}
@@ -4440,6 +4587,7 @@ table.wc_shipping {
}
.wc-backbone-modal-main footer {
+
.inner {
flex-direction: row-reverse;
}
@@ -4450,7 +4598,7 @@ table.wc_shipping {
font-size: 11px;
font-weight: 500;
line-height: 16px;
- color: #787C82;
+ color: #787c82;
&.wc-shipping-zone-method-modal-info-inactive {
display: none;
@@ -4461,12 +4609,13 @@ table.wc_shipping {
.wc-shipping-method-add-class-costs {
margin-top: -16px;
text-decoration: none;
- color: #3858E9;
+ color: #3858e9;
font-size: 12px;
line-height: 16px;
}
.wc-shipping-zone-method-input {
+
input {
clip: rect(0 0 0 0);
clip-path: inset(100%);
@@ -4489,7 +4638,7 @@ table.wc_shipping {
display: block;
width: 100%;
padding: 20px 16px;
- outline: 1px solid #DDDDDD;
+ outline: 1px solid #ddd;
margin: 12px 0;
border-radius: 4px;
}
@@ -4516,7 +4665,7 @@ table.wc_shipping {
.woocommerce-help-tip {
color: #949494;
- &:after {
+ &::after {
top: -6px;
font-size: 24px;
}
@@ -4524,16 +4673,16 @@ table.wc_shipping {
.wc-shipping-zone-method-fields {
- & > label {
+ > label {
font-size: 12px;
font-weight: 500;
line-height: 16px;
- & > .woocommerce-help-tip {
+ > .woocommerce-help-tip {
display: none;
}
- & > .woocommerce-help-tip.wc-shipping-visible-help-text {
+ > .woocommerce-help-tip.wc-shipping-visible-help-text {
display: inline-block;
}
}
@@ -4553,31 +4702,37 @@ table.wc_shipping {
width: 100%;
max-width: 100%;
}
+
&[type="checkbox"] {
border-radius: 2px;
margin: 4px 8px 6px 0;
- & + .woocommerce-help-tip {
+ + .woocommerce-help-tip {
margin: 6px 0 4px 8px;
}
}
&.wc-shipping-modal-price {
+
&.wc-shipping-currency-position-left,
&.wc-shipping-currency-position-left_space {
&.wc-shipping-currency-size-1 {
padding-left: 28px;
}
+
&.wc-shipping-currency-size-2 {
padding-left: 33px;
}
+
&.wc-shipping-currency-size-3 {
padding-left: 38px;
}
+
&.wc-shipping-currency-size-4 {
padding-left: 43px;
}
+
&.wc-shipping-currency-size-5 {
padding-left: 48px;
}
@@ -4587,8 +4742,9 @@ table.wc_shipping {
&.wc-shipping-currency-position-right_space {
padding-left: 12px;
}
+
&.wc-shipping-invalid-price {
- border: 2px solid var( --wc-red, #a00);
+ border: 2px solid var(--wc-red, #a00);
}
}
@@ -4622,11 +4778,12 @@ table.wc_shipping {
font-weight: 400;
line-height: 16px;
color: #757575;
+
&.wc-shipping-invalid-price-message {
- color: var( --wc-red, #a00);
+ color: var(--wc-red, #a00);
display: block;
margin-top: 6px;
- margin-bottom: -24px
+ margin-bottom: -24px;
}
}
@@ -4649,16 +4806,21 @@ table.wc_shipping {
animation-fill-mode: none;
animation-play-state: running;
animation-name: components-button__busy-animation;
+ // stylelint-disable property-no-unknown -- scroll-driven animation properties, newer than stylelint 14's property list.
animation-timeline: auto;
animation-range-start: normal;
+ // stylelint-enable property-no-unknown
color: #757575;
}
}
table {
+
tr,
tr:hover {
+
table.wc-shipping-zone-methods {
+
tr .row-actions {
position: relative;
}
@@ -4671,6 +4833,7 @@ table {
}
.wc-shipping-class-modal {
+
.edit {
margin: 5px 0;
}
@@ -4710,7 +4873,8 @@ table {
display: flex;
align-items: center;
- .page-title-action, .page-title-action:active {
+ .page-title-action,
+ .page-title-action:active {
margin: 7px 0 0 10px;
}
}
@@ -4720,7 +4884,7 @@ table {
}
.wc-shipping-zone-heading-help-text {
- color: #3C434A;
+ color: #3c434a;
font-size: 13px;
font-style: normal;
font-weight: 400;
@@ -4728,7 +4892,7 @@ table {
}
.wc-shipping-zone-help-text {
- color: #3C434A;
+ color: #3c434a;
font-size: 12px;
font-style: normal;
font-weight: 400;
@@ -4801,6 +4965,7 @@ table.wc-shipping-classes {
}
thead {
+
.wc-shipping-zone-sort {
text-align: center;
}
@@ -4809,6 +4974,7 @@ table.wc-shipping-classes {
.wc-shipping-zone-rows,
.wc-shipping-zone-method-rows,
.wc-shipping-class-rows {
+
tr:nth-child(even) td {
background: #f9f9f9;
}
@@ -4840,7 +5006,7 @@ table.wc-shipping-classes {
margin: 0 0 1.5em;
position: relative;
z-index: 1;
- text-shadow: 1px 1px 1px white;
+ text-shadow: 1px 1px 1px #fff;
&.main {
font-size: 1.6em;
@@ -4854,7 +5020,7 @@ table.wc-shipping-classes {
&::before {
content: "\e01b";
- font-family: "WooCommerce";
+ font-family: WooCommerce;
text-align: center;
line-height: 1;
color: #e9e9e9;
@@ -4878,6 +5044,7 @@ table.wc-shipping-classes {
}
tbody.wc-shipping-tables-tbody {
+
.wc-shipping-zone-name,
.wc-shipping-zone-method-title,
.wc-shipping-class-name {
@@ -4887,6 +5054,7 @@ table.wc-shipping-classes {
}
tr.wc-shipping-zone-worldwide {
+
td {
background: #f9f9f9;
border-top: 2px solid #e1e1e1;
@@ -4906,10 +5074,10 @@ table.wc-shipping-classes {
&::before {
content: "";
- mask: url(../images/icons/move-icon.svg);
- mask-image: url(../images/icons/move-icon.svg);
- -webkit-mask-image: url(../images/icons/move-icon.svg);
- background-color: #1E1E1E;
+ mask: url("../images/icons/move-icon.svg");
+ mask-image: url("../images/icons/move-icon.svg");
+ -webkit-mask-image: url("../images/icons/move-icon.svg");
+ background-color: #1e1e1e;
display: block;
width: 17px;
float: left;
@@ -4926,9 +5094,8 @@ table.wc-shipping-classes {
&::before {
content: "\f319";
- font-family: "dashicons";
+ font-family: dashicons;
text-align: center;
- line-height: 1;
color: #000;
display: block;
width: 17px;
@@ -4959,6 +5126,7 @@ table.wc-shipping-classes {
.wc-shipping-zone-name,
.wc-shipping-class-actions,
.wc-shipping-zone-region {
+
input,
select,
textarea {
@@ -4971,6 +5139,7 @@ table.wc-shipping-classes {
}
td.wc-shipping-zone-methods {
+
.method_disabled {
text-decoration: line-through;
}
@@ -4989,7 +5158,7 @@ table.wc-shipping-classes {
}
.wc-shipping-zone-method {
- background-color: #F0F0F0;
+ background-color: #f0f0f0;
margin: 0 3px 3px 0;
padding: 5px 9px;
border-radius: 5px;
@@ -5004,8 +5173,9 @@ table.wc-shipping-classes {
cursor: pointer;
&::before {
+
@include icon;
- font-family: "Dashicons";
+ font-family: Dashicons;
content: "\f502";
color: #999;
vertical-align: middle;
@@ -5045,6 +5215,7 @@ table.wc-shipping-classes {
}
tfoot {
+
input,
select {
vertical-align: middle !important;
@@ -5056,6 +5227,7 @@ table.wc-shipping-classes {
}
.editing {
+
.wc-shipping-zone-view,
.wc-shipping-zone-edit {
display: none;
@@ -5110,6 +5282,7 @@ table.wc-shipping-classes {
margin: 0 0 1.5em;
tr {
+
th {
width: 40%;
position: relative;
@@ -5125,6 +5298,7 @@ table.wc-shipping-classes {
}
td {
+
input,
select,
textarea {
@@ -5177,21 +5351,25 @@ img.help_tip {
}
.status-manual::before {
+
@include icon("\e008");
color: #999;
}
.status-enabled::before {
+
@include icon("\e015");
color: var(--wp-admin-theme-color, $woocommerce);
}
.status-disabled::before {
+
@include icon("\e013");
color: #ccc;
}
.woocommerce {
+
h2.woo-nav-tab-wrapper {
margin-bottom: 1em;
}
@@ -5213,13 +5391,16 @@ img.help_tip {
}
.wc-admin-header {
+
small {
margin-right: 0.5em;
}
+
a {
color: #1d2327;
text-decoration: none;
}
+
a:hover {
color: var(--wp-admin-theme-color, #3858e9);
}
@@ -5244,6 +5425,7 @@ img.help_tip {
}
.settings-panel {
+
ul.advice {
list-style: square;
list-style-position: inside;
@@ -5252,6 +5434,7 @@ img.help_tip {
table.form-table {
margin: 0;
+
&.wc-shipping-zone-settings {
margin-top: 8px;
}
@@ -5326,6 +5509,7 @@ img.help_tip {
// Ignore nested inputs.
table {
+
select,
textarea,
input[type="text"],
@@ -5396,22 +5580,24 @@ img.help_tip {
label:has(input:disabled) {
cursor: not-allowed;
+
> input:disabled {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
}
+
&[disabled-tooltip] {
position: relative;
}
+
&[disabled-tooltip]::before {
- pointer-events: none;
content: attr(disabled-tooltip);
position: absolute;
top: -6px;
left: 6px;
transform: translateX(-50%) translateY(-100%);
- background: black;
+ background: #000;
text-align: center;
color: #fff;
padding: 6px;
@@ -5420,11 +5606,12 @@ img.help_tip {
max-width: 200px;
border-radius: 5px;
pointer-events: none;
- opacity:0;
+ opacity: 0;
}
+
&[disabled-tooltip]:hover::before,
&[disabled-tooltip]:focus::before {
- opacity:1
+ opacity: 1;
}
}
@@ -5439,7 +5626,8 @@ img.help_tip {
p.description {
margin-bottom: 8px;
- &.is-error, span.is-error {
+ &.is-error,
+ span.is-error {
color: $red;
}
}
@@ -5450,9 +5638,11 @@ img.help_tip {
}
td.with-tooltip {
+
> fieldset {
margin-top: 0;
}
+
span.help-tooltip {
position: absolute;
margin-left: -30px;
@@ -5521,7 +5711,9 @@ img.help_tip {
}
.wc-shipping-zone-settings {
+
td.forminp {
+
input,
textarea {
width: 448px;
@@ -5536,7 +5728,9 @@ img.help_tip {
}
.wc-wp-version-gte-53 {
+
.woocommerce {
+
h2.wc-table-list-header {
margin: 1em 0 0.35em 0;
}
@@ -5568,6 +5762,7 @@ img.help_tip {
}
select {
+
@media only screen and (max-width: 782px) {
width: 100%;
}
@@ -5575,6 +5770,7 @@ img.help_tip {
th label,
th .wc-settings-radio-title {
+
img.help_tip,
.woocommerce-help-tip {
margin: -7px -24px 0 0;
@@ -5631,6 +5827,7 @@ img.help_tip {
}
#postimagediv {
+
.inside {
padding: 0;
margin: 0;
@@ -5678,6 +5875,7 @@ img.help_tip {
padding: 0 0 0 9px;
ul {
+
@include clearfix();
margin: 0;
padding: 0;
@@ -5711,6 +5909,7 @@ img.help_tip {
}
&.video::before {
+
@include icon_dashicons("\f522");
left: 50%;
@@ -5732,6 +5931,7 @@ img.help_tip {
position: relative;
&::after {
+
@include icon_dashicons("\f161");
font-size: 2.618em;
line-height: 72px;
@@ -5756,7 +5956,6 @@ img.help_tip {
a {
width: 1em;
- height: 1em;
margin: 0;
height: 0;
display: block;
@@ -5768,10 +5967,12 @@ img.help_tip {
}
a.delete {
+
@include ir();
font-size: 1.4em;
&::before {
+
@include icon_dashicons("\f153");
color: #999;
background: #fff;
@@ -5796,6 +5997,7 @@ img.help_tip {
}
#woocommerce-product-data {
+
.hndle {
padding: 10px;
@@ -5805,6 +6007,7 @@ img.help_tip {
}
.product-data-wrapper {
+
label > * {
display: inline-block;
}
@@ -5897,6 +6100,7 @@ img.help_tip {
#woocommerce-product-data,
#woocommerce-coupon-data {
+
.panel-wrap {
background: #fff;
}
@@ -5929,9 +6133,10 @@ img.help_tip {
}
#usage_restriction_coupon_data.woocommerce_options_panel {
+
.options_group {
- border-bottom: 0px;
+ border-bottom: 0;
.hr-section {
display: flex;
@@ -5945,20 +6150,21 @@ img.help_tip {
top: 8px;
padding-bottom: 10px;
- &:before, &:after {
+ &::before,
+ &::after {
content: "";
flex-grow: 1;
background: #eee;
height: 1px;
- font-size: 0px;
+ font-size: 0;
line-height: 0px;
}
- &:before {
+ &::before {
margin: 0 16px 0 0;
}
- &:after {
+ &::after {
margin: 0 0 0 16px;
}
}
@@ -5968,6 +6174,7 @@ img.help_tip {
#woocommerce-product-data,
#woocommerce-coupon-data,
.woocommerce {
+
.panel-wrap {
overflow: hidden;
}
@@ -6024,6 +6231,7 @@ img.help_tip {
}
&::before {
+
@include iconbeforedashicons("\f107");
}
}
@@ -6037,7 +6245,7 @@ img.help_tip {
}
&.shipping_options a::before {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e01a";
}
@@ -6050,7 +6258,7 @@ img.help_tip {
}
&.advanced_options a::before {
- font-family: "Dashicons";
+ font-family: Dashicons;
content: "\f111";
}
@@ -6063,17 +6271,17 @@ img.help_tip {
}
&.usage_restriction_options a::before {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e602";
}
&.usage_limit_options a::before {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e601";
}
&.general_coupon_data a::before {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e600";
}
@@ -6090,6 +6298,7 @@ img.help_tip {
* Settings / Advanced / Features
*/
.woocommerce_page_wc-settings {
+
.wc-settings-row-woocommerce_custom_orders_table_enabled td.forminp {
padding-bottom: 0;
}
@@ -6106,6 +6315,7 @@ img.help_tip {
margin: 0 0 0 10px;
&::before {
+
@include iconbeforedashicons("\f348");
vertical-align: middle;
font-size: 1.1em;
@@ -6121,12 +6331,14 @@ img.help_tip {
* Shipping
*/
.woocommerce_page_wc-settings {
+
input[type="url"],
input[type="email"] {
direction: ltr;
}
.shippingrows {
+
th.check-column {
padding-top: 20px;
}
@@ -6136,6 +6348,7 @@ img.help_tip {
}
.add.button::before {
+
@include iconbefore("\e007");
}
}
@@ -6150,6 +6363,7 @@ img.help_tip {
#woocommerce-order-data,
#woocommerce-order-downloads,
#woocommerce-coupon-data {
+
.inside {
margin: 0;
padding: 0;
@@ -6203,6 +6417,7 @@ img.help_tip {
.woocommerce_variations,
.woocommerce_options_panel {
+
.downloadable_files table {
width: 100%;
padding: 0 !important;
@@ -6238,6 +6453,7 @@ img.help_tip {
}
&.file_url {
+
/* Reduce the size of this field to make space for a warning asterisk. */
input {
display: inline-block;
@@ -6252,15 +6468,18 @@ img.help_tip {
}
.delete {
+
@include ir();
font-size: 1.2em;
&::before {
+
@include icon_dashicons("\f153");
color: #999;
}
&:hover {
+
&::before {
color: $red;
}
@@ -6278,7 +6497,7 @@ img.help_tip {
&::before {
content: "\f333";
- font-family: "Dashicons";
+ font-family: Dashicons;
text-align: center;
line-height: 1;
color: #999;
@@ -6301,6 +6520,7 @@ img.help_tip {
}
.woocommerce_variation .woocommerce_variable_attributes .dimensions_field.form-row {
+
.wrap {
display: flex;
gap: 12px;
@@ -6313,6 +6533,7 @@ img.help_tip {
.woocommerce_attribute,
.woocommerce_variation {
+
h3 .sort {
width: 17px;
height: 26px;
@@ -6326,7 +6547,7 @@ img.help_tip {
&::before {
content: "\f333";
- font-family: "Dashicons";
+ font-family: Dashicons;
text-align: center;
line-height: 28px;
color: #999;
@@ -6340,22 +6561,25 @@ img.help_tip {
color: #777;
}
}
+
.edit_variation {
margin-left: 0.5em;
}
h3:hover,
&.ui-sortable-helper {
+
.sort {
visibility: visible;
}
}
&.wc-metabox {
+
&.postbox {
- border-top: 0px;
- border-left: 0px;
- border-right: 0px;
+ border-top: 0;
+ border-left: 0;
+ border-right: 0;
}
}
}
@@ -6387,11 +6611,12 @@ img.help_tip {
/** Padding for aligning labels left - 12px + 150 label width **/
&._sold_individually_field {
- padding-right: 0px !important;
+ padding-right: 0 !important;
}
}
.sale_price_dates_fields {
+
.short:first-of-type {
margin-bottom: 1em;
}
@@ -6479,7 +6704,7 @@ img.help_tip {
}
.options_group {
- border-top: 1px solid white;
+ border-top: 1px solid #fff;
border-bottom: 1px solid #eee;
&:first-child {
@@ -6573,15 +6798,18 @@ img.help_tip {
* WooCommerce meta boxes
*/
.wc-metaboxes-wrapper {
+
:not(#variable_product_options_inner),
&#product_attributes {
+
.toolbar:not(.expand-close-hidden) {
border-bottom: 1px solid #eee;
}
}
+
.toolbar {
margin: 0 !important;
- border-top: 1px solid white;
+ border-top: 1px solid #fff;
padding: 9px 12px !important;
&:first-child {
@@ -6667,7 +6895,7 @@ img.help_tip {
content: "\f142" !important;
cursor: pointer;
display: inline-block;
- font: 400 20px/1 "Dashicons";
+ font: 400 20px/1 Dashicons;
line-height: 0.5 !important;
padding: 8px 10px;
position: relative;
@@ -6677,6 +6905,7 @@ img.help_tip {
}
&.closed {
+
@include border-radius(3px);
.handlediv::before {
@@ -6705,14 +6934,14 @@ img.help_tip {
a.delete {
color: var(--wc-destructive, #cc1818);
- font-weight: normal;
+ font-weight: 400;
line-height: 26px;
text-decoration: none;
position: relative;
}
a.edit {
- font-weight: normal;
+ font-weight: 400;
line-height: 26px;
text-decoration: none;
position: relative;
@@ -6723,7 +6952,6 @@ img.help_tip {
}
strong {
- font-weight: normal;
line-height: 26px;
font-weight: 700;
}
@@ -6758,6 +6986,7 @@ img.help_tip {
}
&.woocommerce_variation h3 {
+
> select[name^="attribute_"] {
max-width: min(100%, 25rem);
margin-inline: 0;
@@ -6857,6 +7086,7 @@ img.help_tip {
float: right;
}
}
+
.placeholder {
color: $gray-700;
}
@@ -6903,6 +7133,7 @@ img.help_tip {
border-top: 1px solid #eee;
.data {
+
@include clearfix;
padding: 1em 2em;
}
@@ -6924,7 +7155,7 @@ img.help_tip {
&::before {
content: "\f128";
- font-family: "Dashicons";
+ font-family: Dashicons;
position: absolute;
top: 0;
left: 0;
@@ -6938,6 +7169,7 @@ img.help_tip {
}
&.remove {
+
img {
display: block;
}
@@ -6971,6 +7203,7 @@ img.help_tip {
}
.form-row {
+
label {
display: inline-block;
}
@@ -7006,6 +7239,7 @@ img.help_tip {
}
&.dimensions_field {
+
.wrap {
clear: left;
display: block;
@@ -7191,12 +7425,13 @@ img.ui-datepicker-trigger {
* Reports
*/
.woocommerce-reports-remove-filter {
- color: red;
+ color: #f00;
text-decoration: none;
}
.woocommerce-reports-wrap,
.woocommerce-reports-wide {
+
&.woocommerce-reports-wrap {
margin-left: 300px;
padding-top: 18px;
@@ -7222,6 +7457,7 @@ img.ui-datepicker-trigger {
}
.postbox {
+
&::after {
content: ".";
display: block;
@@ -7254,6 +7490,7 @@ img.ui-datepicker-trigger {
text-decoration: none;
&::before {
+
@include iconbeforedashicons("\f346");
margin-right: 4px;
}
@@ -7282,7 +7519,7 @@ img.ui-datepicker-trigger {
margin: 0;
padding: 0;
line-height: 26px;
- font-weight: bold;
+ font-weight: 700;
font-size: 14px;
a {
@@ -7380,6 +7617,7 @@ img.ui-datepicker-trigger {
display: block;
&::after {
+
@include iconafter("\e035");
float: right;
font-size: 0.9em;
@@ -7474,7 +7712,7 @@ img.ui-datepicker-trigger {
.description {
margin-left: 0.5em;
- font-weight: normal;
+ font-weight: 400;
opacity: 0.8;
}
}
@@ -7502,19 +7740,23 @@ img.ui-datepicker-trigger {
font-size: 1.618em;
line-height: 1.2em;
color: #464646;
- font-weight: normal;
+ font-weight: 400;
display: block;
- font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
- "Helvetica Neue", sans-serif;
+ font-family:
+ HelveticaNeue-Light,
+ "Helvetica Neue Light",
+ "Helvetica Neue",
+ sans-serif;
del {
color: #e74c3c;
- font-weight: normal;
+ font-weight: 400;
}
}
&:hover {
- box-shadow: inset 0 -1px 0 0 #dfdfdf,
+ box-shadow:
+ inset 0 -1px 0 0 #dfdfdf,
inset 300px 0 0 #f7edf7;
border-right: 5px solid var(--wc-primary) !important;
padding-left: 1.5em;
@@ -7612,6 +7854,7 @@ img.ui-datepicker-trigger {
padding-bottom: 11px;
.widefat {
+
.export-data {
float: right;
}
@@ -7625,6 +7868,7 @@ img.ui-datepicker-trigger {
}
form.report_filters {
+
p {
vertical-align: middle;
}
@@ -7652,11 +7896,12 @@ table.bar_chart {
}
tbody {
+
th {
padding: 6px 0;
width: 25%;
text-align: left !important;
- font-weight: normal !important;
+ font-weight: 400 !important;
border-bottom: 1px solid #fee;
}
@@ -7746,6 +7991,7 @@ table.bar_chart {
.woocommerce-BlankState--api,
.woocommerce-BlankState--webhooks,
.woocommerce-BlankState--stock-notifications {
+
.woocommerce-BlankState-message::before {
content: "";
display: block;
@@ -7785,6 +8031,7 @@ table.bar_chart {
}
.post-type-product {
+
#wp-pointer-2 .wp-pointer-arrow {
left: 240px;
}
@@ -7799,7 +8046,9 @@ table.bar_chart {
* Small screen optimisation
*/
@media only screen and (max-width: 1280px) {
+
#order_data {
+
.order_data_column {
width: 48%;
@@ -7813,6 +8062,7 @@ table.bar_chart {
}
.woocommerce_options_panel {
+
.description {
display: block;
clear: both;
@@ -7831,6 +8081,7 @@ table.bar_chart {
.woocommerce_variations,
.woocommerce_options_panel {
+
.downloadable_files {
padding: 0;
clear: both;
@@ -7860,6 +8111,7 @@ table.bar_chart {
* Optimisation for screens 900px and smaller
*/
@media only screen and (max-width: 900px) {
+
#woocommerce-coupon-data ul.coupon_data_tabs,
#woocommerce-product-data ul.product_data_tabs,
#woocommerce-product-data .wc-tabs-back {
@@ -7898,6 +8150,7 @@ table.bar_chart {
* Optimisation for screens 782px and smaller
*/
@media only screen and (max-width: 782px) {
+
#wp-excerpt-media-buttons a {
font-size: 16px;
line-height: 37px;
@@ -7942,7 +8195,9 @@ table.bar_chart {
}
.post-type-product {
+
.wp-list-table {
+
.column-thumb {
display: none;
text-align: left;
@@ -7968,7 +8223,9 @@ table.bar_chart {
}
.post-type-shop_order {
+
.wp-list-table {
+
.column-customer_message,
.column-order_notes {
text-align: inherit;
@@ -7987,6 +8244,7 @@ table.bar_chart {
}
@media only screen and (max-width: 500px) {
+
.woocommerce_options_panel label,
.woocommerce_options_panel legend {
float: none;
@@ -8005,12 +8263,12 @@ table.bar_chart {
}
.wc-addons-wrap {
+
.addons-wcs-banner-block {
padding: 40px;
}
.addons-wcs-banner-block-image {
- padding: 1em;
text-align: center;
width: 100%;
padding: 2em 0;
@@ -8027,6 +8285,7 @@ table.bar_chart {
* Backbone modal dialog
*/
.wc-backbone-modal {
+
* {
box-sizing: border-box;
}
@@ -8049,7 +8308,7 @@ table.bar_chart {
}
&.wc-backbone-modal-add-shipping-method .wc-backbone-modal-content article {
- min-height: 180px
+ min-height: 180px;
}
// Fixed layout so a long nowrap select2 selection truncates inside the Product
@@ -8069,6 +8328,7 @@ table.bar_chart {
// Reserve the end of the field for the clear (x) and chevron inside modals on every WP
// version; the .wc-wp-version-gte-70 rule below only reaches WP 7.0+.
.wc-backbone-modal-content .select2-container .select2-selection--single {
+
.select2-selection__rendered {
padding-inline-end: 40px;
}
@@ -8094,7 +8354,7 @@ table.bar_chart {
}
.wc-backbone-modal-main {
- padding-bottom: calc( 1.5rem + 40px );
+ padding-bottom: calc(1.5rem + 40px);
header,
article {
@@ -8129,7 +8389,7 @@ table.bar_chart {
transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
&::before {
- font: normal 22px/50px "dashicons" !important;
+ font: 400 22px/50px dashicons !important;
color: #666;
display: block;
content: "\f335";
@@ -8212,9 +8472,11 @@ table.bar_chart {
}
table.widefat.wc-tax-rate-results {
+
thead th,
tbody td,
tbody th {
+
&:first-child {
padding-left: 1em;
}
@@ -8279,8 +8541,9 @@ table.bar_chart {
}
.wc-modal-add-tax {
+
.wc-backbone-modal-main {
- padding-bottom: calc( 2.5em + 40px );
+ padding-bottom: calc(2.5em + 40px);
.search-box {
float: none;
@@ -8311,6 +8574,7 @@ table.bar_chart {
}
@media screen and (max-width: 782px) {
+
.wc-backbone-modal .wc-backbone-modal-content {
border-radius: 0;
transform: none;
@@ -8321,6 +8585,7 @@ table.bar_chart {
min-width: auto;
width: 100%;
}
+
.wc-backbone-modal-main .wc-backbone-modal-header .modal-close-link {
border-radius: 0;
}
@@ -8363,6 +8628,7 @@ table.bar_chart {
}
.select2-container {
+
.select2-selection__rendered.ui-sortable li {
cursor: move;
}
@@ -8427,9 +8693,12 @@ table.bar_chart {
}
.wc-wp-version-gte-53 {
+
.select2-results {
+
.select2-results__option,
.select2-results__group {
+
&:focus {
outline: none;
}
@@ -8466,6 +8735,7 @@ table.bar_chart {
}
.select2-container {
+
@media only screen and (max-width: 782px) {
font-size: 16px;
}
@@ -8503,7 +8773,8 @@ table.bar_chart {
right: 1px;
height: 28px;
width: 23px;
- background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E")
+ background:
+ url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E")
no-repeat right 5px top 55%;
background-size: 16px 16px;
@@ -8537,6 +8808,7 @@ table.bar_chart {
}
.woocommerce table.form-table .select2-container {
+
@media only screen and (max-width: 782px) {
min-width: 100% !important;
}
@@ -8544,7 +8816,9 @@ table.bar_chart {
}
.wc-wp-version-gte-55 {
+
#woocommerce-product-data {
+
.hndle {
display: block;
line-height: 28px;
@@ -8567,17 +8841,20 @@ table.bar_chart {
.woocommerce table.form-table th {
padding-top: 25px;
}
+
.woocommerce table.form-table td.forminp-checkbox,
.woocommerce table.form-table td.forminp-radio,
.woocommerce table.form-table td.forminp-textarea {
padding-top: 20px;
}
+
.woocommerce table.form-table textarea {
padding: 6px 8px;
}
// Adopt WP 7.0 12px horizontal padding on settings inputs.
.woocommerce table.form-table {
+
input[type="text"],
input[type="email"],
input[type="number"],
@@ -8602,6 +8879,7 @@ table.bar_chart {
// Select2 single: match WP 7.0 native select height (40px).
.select2-container {
+
.select2-selection--single {
height: 40px; // Match WP 7.0 native select height.
@@ -8678,7 +8956,9 @@ table.bar_chart {
// Table action icon buttons: prevent WP 7.0 min-height from stretching them.
.widefat {
+
.column-wc_actions {
+
a.button {
min-height: 0 !important;
line-height: 1 !important;
@@ -8693,6 +8973,7 @@ table.bar_chart {
// Order preview action buttons.
.wc-order-preview footer {
+
.button.button-large {
min-height: 32px;
}
@@ -8715,9 +8996,9 @@ table.bar_chart {
}
-
// Order actions reload button: icon line-height must match WP 7.0 button height.
.button.wc-reload {
+
&::after {
line-height: 40px;
}
@@ -8730,6 +9011,7 @@ table.bar_chart {
// Order date hour/minute inputs: WP 7.0 padding pushes stepper controls inward.
#order_data .order_data_column .form-field-wide {
+
input.hour,
input.minute {
padding-right: 0;
@@ -8756,6 +9038,7 @@ table.bar_chart {
// Short inputs are wider to compensate for WP 7.0 increased padding.
.woocommerce_options_panel {
+
.short,
input[type="text"].short,
input[type="number"].short,
@@ -8788,6 +9071,7 @@ table.bar_chart {
}
@media screen and (max-width: 850px), screen and (min-width: 931px) {
+
#woocommerce-order-downloads .buttons button {
margin: 0;
}
@@ -8813,6 +9097,7 @@ table.bar_chart {
@media screen and (max-width: 1200px) {
// Order items meta box: reduce button padding to prevent wrapping prematurely.
#woocommerce-order-items .wc-order-data-row {
+
.button {
padding-left: 8px;
padding-right: 8px;
@@ -8852,7 +9137,9 @@ table.bar_chart {
&.woocommerce_page_wc-orders .tablenav,
&.post-type-product .tablenav,
&.post-type-shop_order .tablenav {
+
@media screen and (max-width: 782px) {
+
#current-page-selector {
height: 44px;
}
@@ -8876,19 +9163,20 @@ table.bar_chart {
// Align editor meta box border-radius with WP 7.0's dashboard widgets (8px).
// Product, order (CPT + HPOS), and coupon editor screens.
- //
+
// BRIDGE: WP 7.0 rounded dashboard widgets but left editor .postbox square,
// creating an inconsistency (dashboard widgets vs. Posts/Pages/Media/Woo
// editors all use the same .postbox class). We're applying the radius
// ourselves, scoped to Woo editor screens, as a bridge until Core unifies
// this.
- //
+
// TODO: Remove these rules when Core rounds editor .postbox containers.
// Upstream proposal: https://core.trac.wordpress.org/ticket/65142
&.post-type-product,
&.post-type-shop_order,
&.post-type-shop_coupon,
&.woocommerce_page_wc-orders {
+
.postbox,
#postdivrich {
border-radius: var(--wc-card-border-radius, 8px);
@@ -8916,29 +9204,20 @@ table.bar_chart {
--wc-product-publish-spacing-2: var(--wp-admin-grid-unit-10, 8px);
--wc-product-publish-icon-size: 20px;
--wc-product-publish-row-horizontal-padding: 10px;
- --wc-product-publish-summary-row-offset: calc(
- var(--wc-product-publish-icon-size) +
- 6px
- );
- --wc-product-publish-panel-offset: calc(
- var(--wc-product-publish-icon-size) +
- 5px
- );
+ --wc-product-publish-summary-row-offset: calc(var(--wc-product-publish-icon-size) + 6px);
+ --wc-product-publish-panel-offset: calc(var(--wc-product-publish-icon-size) + 5px);
.misc-pub-catalog-visibility {
- padding-left: calc(
- var(--wc-product-publish-row-horizontal-padding) +
- var(--wc-product-publish-summary-row-offset)
- );
+ padding-left: calc(var(--wc-product-publish-row-horizontal-padding) + var(--wc-product-publish-summary-row-offset));
position: relative;
}
.misc-pub-catalog-visibility::before {
- color: currentColor;
+ color: currentcolor;
content: "\f180";
content: "\f180" / "";
display: inline-block;
- font: normal 20px/1 dashicons;
+ font: 400 20px/1 dashicons;
left: calc(var(--wc-product-publish-row-horizontal-padding) - 1px);
position: absolute;
speak: never;
@@ -8954,13 +9233,15 @@ table.bar_chart {
#catalog-visibility-select > p:first-of-type {
color: $wp-admin-icon-gray;
- margin: var(--wc-product-publish-spacing-1) 0
+ margin:
+ var(--wc-product-publish-spacing-1) 0
var(--wc-product-publish-spacing-2);
}
#catalog-visibility-select input[type="radio"],
#catalog-visibility-select input[type="checkbox"] {
- margin: 0 var(--wc-product-publish-spacing-1)
+ margin:
+ 0 var(--wc-product-publish-spacing-1)
var(--wc-product-publish-spacing-1) 0;
vertical-align: text-top;
}
@@ -8968,10 +9249,7 @@ table.bar_chart {
#catalog-visibility-select #_featured,
#catalog-visibility-select label[for="_featured"] {
position: relative;
- top: calc(
- var(--wc-product-publish-spacing-2) -
- 5px
- );
+ top: calc(var(--wc-product-publish-spacing-2) - 5px);
}
#catalog-visibility-select label.selectit,
@@ -8989,13 +9267,15 @@ table.bar_chart {
}
@media screen and (max-width: 782px) {
+
.misc-pub-catalog-visibility::before {
top: calc(var(--wc-product-publish-spacing-2) + 3px);
}
#catalog-visibility-select input[type="radio"],
#catalog-visibility-select input[type="checkbox"] {
- margin: calc(-1 * var(--wc-product-publish-spacing-1))
+ margin:
+ calc(-1 * var(--wc-product-publish-spacing-1))
var(--wc-product-publish-spacing-1) 0 0;
vertical-align: middle;
}
@@ -9052,7 +9332,9 @@ table.bar_chart {
* Select2 colors for built-in admin color themes.
*/
.wp-admin {
+
&.wc-wp-version-gte-53 {
+
.select2-dropdown {
border-color: var(--wp-admin-theme-color, #007cba);
}
@@ -9080,7 +9362,7 @@ table.bar_chart {
}
.select2-container--default
- .select2-results__option--highlighted[aria-selected],
+ .select2-results__option--highlighted[aria-selected],
.select2-container--default
.select2-results__option--highlighted[data-selected] {
background-color: var(--wp-admin-theme-color, #007cba);
@@ -9092,6 +9374,7 @@ table.bar_chart {
.woocommerce_page_wc-orders .tablenav,
.post-type-product .tablenav,
.post-type-shop_order .tablenav {
+
.actions {
overflow: visible;
}
@@ -9113,6 +9396,7 @@ table.bar_chart {
// Tablenav: WP 7.0 tablenav uses compact 32px sizing for native selects.
// Match Select2 to 32px here (not the global 40px).
.wc-wp-version-gte-70 .tablenav {
+
.select2-container {
margin-top: 0; // Align with other tablenav elements.
}
@@ -9247,12 +9531,11 @@ table.bar_chart {
margin: 0 0 24px;
color: #555;
font-size: 24px;
- font-weight: normal;
+ font-weight: 400;
line-height: 1em;
}
p {
- font-size: 1em;
line-height: 1.75em;
font-size: 16px;
color: #555;
@@ -9277,7 +9560,7 @@ table.bar_chart {
label {
color: #555;
- font-weight: normal;
+ font-weight: 400;
}
input[type="checkbox"] {
@@ -9304,7 +9587,6 @@ table.bar_chart {
code {
background: none;
font-size: smaller;
- padding: 0;
margin: 0;
color: #999;
padding: 7px 0 0 7px;
@@ -9333,9 +9615,7 @@ table.bar_chart {
width: 100%;
height: 42px;
margin: 0 auto 24px;
- display: block;
-webkit-appearance: none;
- border: none;
display: none;
background: #f5f5f5;
border: 2px solid #eee;
@@ -9378,6 +9658,7 @@ table.bar_chart {
&.woocommerce-exporter__exporting,
&.woocommerce-importer__importing {
+
.spinner {
display: block;
}
@@ -9423,7 +9704,7 @@ table.bar_chart {
}
th {
- font-weight: bold;
+ font-weight: 700;
}
td:first-child,
@@ -9448,8 +9729,10 @@ table.bar_chart {
background: none;
padding: 0;
white-space: pre-line;
+
/* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word;
+
/* IE */
word-break: break-all;
}
@@ -9464,6 +9747,7 @@ table.bar_chart {
line-height: 1.75em;
&::before {
+
@include icon("\e015");
color: var(--wp-admin-theme-color, $woocommerce);
position: static;
@@ -9477,7 +9761,9 @@ table.bar_chart {
}
.wc-pointer {
+
.wc-pointer-buttons {
+
.close {
float: left;
margin: 6px 0 0 15px;
@@ -9486,8 +9772,8 @@ table.bar_chart {
}
.wc-quick-edit-warning {
- color: darkred;
- font-weight: bold;
+ color: #8b0000;
+ font-weight: 700;
}
.wc-addons__empty {
@@ -9507,12 +9793,15 @@ table.bar_chart {
}
@media screen and (min-width: 600px) {
+
.wc-addons-wrap {
+
.marketplace-header {
padding-left: 84px;
}
.storefront {
+
h2 {
margin-top: 0;
}
@@ -9531,17 +9820,20 @@ table.bar_chart {
}
@media screen and (min-width: 961px) {
+
.marketplace-header__tabs {
margin-left: 84px;
}
}
@media screen and (min-width: 1024px) {
+
.current-section-name {
display: none;
}
.wc-addons-wrap {
+
.current-section-dropdown__title {
display: block;
font-size: 20px;
@@ -9599,6 +9891,7 @@ table.bar_chart {
}
li:last-child {
+
a::after {
display: none;
}
@@ -9611,6 +9904,7 @@ table.bar_chart {
* Product Reviews
*/
.wp-list-table.product-reviews {
+
.column-author {
width: 20%;
}
@@ -9620,6 +9914,7 @@ table.bar_chart {
}
@media screen and (max-width: 782px) {
+
th.column-type,
td.column-type,
th.column-author,
@@ -9645,7 +9940,9 @@ table.bar_chart {
}
#postexcerpt {
+
> .postbox-header {
+
> .hndle {
justify-content: flex-start;
@@ -9658,25 +9955,28 @@ table.bar_chart {
#postdivrich.woocommerce-product-description {
margin-top: 20px;
- margin-bottom: 0px;
+ margin-bottom: 0;
.wp-editor-tools {
background: #fff;
- padding-top: 0px;
+ padding-top: 0;
width: 100%;
}
+
.wp-editor-wrap {
margin: 6px 12px 0;
}
+
#post-status-info {
- margin: 0px 12px 12px;
+ margin: 0 12px 12px;
width: calc(100% - 24px);
}
}
.order-attribution-metabox {
+
h4 {
- margin-bottom: .1em;
+ margin-bottom: 0.1em;
}
&:has(.woocommerce-order-attribution-details-toggle[aria-expanded="false"]) .order-attribution-origin {
@@ -9720,12 +10020,14 @@ table.bar_chart {
}
&[aria-expanded="false"] {
+
.toggle-indicator::before {
content: "\f140";
}
}
&[aria-expanded="true"] {
+
.toggle-indicator::before {
content: "\f142";
}
@@ -9733,7 +10035,7 @@ table.bar_chart {
}
}
-html:has(#status-table-templates){
+html:has(#status-table-templates) {
scroll-padding-top: 80px;
}
@@ -9743,7 +10045,9 @@ html:has(#status-table-templates){
}
body.woocommerce_page_wc-settings {
+
.woocommerce-layout {
+
.woocommerce-store-alerts {
margin-top: 5px;
}
@@ -9752,9 +10056,10 @@ body.woocommerce_page_wc-settings {
#wpcontent {
background: #f0f0f1;
}
+
#wpbody-content {
background: #fff;
- padding-bottom: 0px;
+ padding-bottom: 0;
}
// Floating header on Settings sits directly above the tab nav with no
@@ -9782,6 +10087,7 @@ body.woocommerce_page_wc-settings {
}
.woocommerce-layout__primary {
+
@media screen and (max-width: 782px) {
padding-top: 0 !important;
}
@@ -9803,6 +10109,7 @@ body.woocommerce_page_wc-settings {
}
#mainform {
+
nav {
margin: 0 -30px 24px -30px;
}
@@ -9811,20 +10118,27 @@ body.woocommerce_page_wc-settings {
.subsubsub {
margin-bottom: 0;
+
li {
color: #2271b1;
- &:first-child a{
+
+ &:first-child a {
padding: 0;
}
+
a {
margin: 0 4px 0 4px;
}
+
&:first-child {
+
a {
margin-left: 0;
}
}
+
&:last-child {
+
a {
margin-right: 0;
}
@@ -9883,7 +10197,10 @@ body.woocommerce_page_wc-settings {
color: #505050;
padding: 0 0 10px 0;
text-decoration: none;
- &:focus, &:hover, &:active {
+
+ &:focus,
+ &:hover,
+ &:active {
outline: none;
box-shadow: none;
}
@@ -9897,7 +10214,10 @@ body.woocommerce_page_wc-settings {
// shared variables file.
border-bottom: 1px solid #dcdcde;
- .nav-tab-active, .nav-tab-active:focus, .nav-tab-active:focus:active, .nav-tab-active:hover {
+ .nav-tab-active,
+ .nav-tab-active:focus,
+ .nav-tab-active:focus:active,
+ .nav-tab-active:hover {
border-bottom: 2px solid var(--wp-admin-theme-color, #3858e9);
color: #070707;
}
@@ -9910,6 +10230,7 @@ body.woocommerce_page_wc-settings {
@media screen and (max-width: 500px) {
overflow: auto;
flex-wrap: nowrap;
+
a {
font-size: 16px;
}
@@ -9919,6 +10240,7 @@ body.woocommerce_page_wc-settings {
.woocommerce-embedded-layout__primary {
background-color: #f0f0f1;
padding: 0 30px;
+
.woocommerce-dismissable-list {
margin-bottom: 0;
}
@@ -9932,6 +10254,7 @@ body.woocommerce_page_wc-settings {
padding: 34px 32px;
&--create {
+
.notification-data__product-data {
margin-top: 20px;
}
@@ -9979,7 +10302,7 @@ body.woocommerce_page_wc-settings {
}
@media screen and (max-width: 782px) {
- margin-bottom: 0px;
+ margin-bottom: 0;
&--columns {
@@ -10023,6 +10346,7 @@ body.woocommerce_page_wc-settings {
}
&__product-data {
+
img {
max-width: 100%;
height: auto;
@@ -10033,7 +10357,7 @@ body.woocommerce_page_wc-settings {
clear: both;
label,
- input:not([type=checkbox]),
+ input:not([type="checkbox"]),
select,
textarea {
width: 100%;
@@ -10041,7 +10365,7 @@ body.woocommerce_page_wc-settings {
label {
color: #333;
- font-weight: bold;
+ font-weight: 700;
display: block;
padding: 0 0 15px;
@@ -10097,8 +10421,9 @@ body.woocommerce_page_wc-settings-advanced-webhooks,
body.woocommerce-admin-page__extensions,
body.woocommerce-admin-launch-your-store,
body.woocommerce-admin-full-screen {
+
#screen-meta-links {
- display:none;
+ display: none;
}
}
@@ -10106,6 +10431,7 @@ body.woocommerce-admin-full-screen {
* Fixes for offline payment methods pages rendered in legacy mode (not Reactified).
*/
body.woocommerce-settings-payments-section_legacy {
+
.woocommerce-layout__header {
border-bottom: 1px solid #ebebeb;
}
@@ -10128,7 +10454,7 @@ body.woocommerce-settings-payments-section_legacy {
top: -1px;
&.is-empty::before {
- content: '';
+ content: "";
border-radius: 50%;
position: absolute;
top: 0;
diff --git a/plugins/woocommerce/client/legacy/css/auth.scss b/plugins/woocommerce/client/legacy/css/auth.scss
index 8d99c263948..c5fffb92b2b 100644
--- a/plugins/woocommerce/client/legacy/css/auth.scss
+++ b/plugins/woocommerce/client/legacy/css/auth.scss
@@ -27,7 +27,10 @@ body {
padding: 24px 24px 0;
zoom: 1;
- h1, h2, h3, table {
+ h1,
+ h2,
+ h3,
+ table {
border: 0;
clear: none;
color: #666;
@@ -35,7 +38,8 @@ body {
padding: 0;
}
- p, ul {
+ p,
+ ul {
color: #666;
font-size: 1em;
line-height: 1.75em;
@@ -48,12 +52,15 @@ body {
a {
color: $primary;
- &:hover, &:focus {
+
+ &:hover,
+ &:focus {
color: darken($primary, 40%);
}
}
.wc-auth-login {
+
label {
color: #999;
display: block;
@@ -77,6 +84,7 @@ body {
}
}
}
+
.wc-auth-permissions {
list-style: disc inside;
padding: 0;
@@ -85,6 +93,7 @@ body {
font-size: 1em;
}
}
+
.wc-auth-logged-in-as {
background: #f5f5f5;
border-bottom: 2px solid #eee;
@@ -107,13 +116,13 @@ body {
float: right;
}
}
+
.wc-auth .wc-auth-actions {
overflow: hidden;
padding-left: 24px;
.button {
background: #f7f7f7;
- border-bottom-width: 2px;
border: 1px solid #d7d7d7;
box-sizing: border-box;
color: #777;
@@ -125,10 +134,12 @@ body {
text-align: center;
width: 50%;
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background: #fcfcfc;
}
}
+
.button-primary {
background: $primary;
border-color: $primary;
@@ -138,14 +149,17 @@ body {
opacity: 1;
text-shadow: none;
- &:hover, &:focus {
+ &:hover,
+ &:focus {
background: lighten($primary, 5%);
color: #fff;
}
}
+
.wc-auth-approve {
float: right;
}
+
.wc-auth-deny {
float: left;
margin-left: -24px;
diff --git a/plugins/woocommerce/client/legacy/css/brands.scss b/plugins/woocommerce/client/legacy/css/brands.scss
index 58676a34a60..04272c03e08 100644
--- a/plugins/woocommerce/client/legacy/css/brands.scss
+++ b/plugins/woocommerce/client/legacy/css/brands.scss
@@ -3,10 +3,12 @@
overflow: hidden;
zoom: 1;
}
+
.tax-product_brand .brand-description img.brand-thumbnail {
width: 25%;
float: right;
}
+
.tax-product_brand .brand-description .text {
width: 72%;
float: left;
@@ -30,14 +32,14 @@ ul.brand-thumbnails,
list-style: none;
}
-ul.brand-thumbnails:before,
+ul.brand-thumbnails::before,
:where(.brand-thumbnails-description)::before {
clear: both;
content: "";
display: table;
}
-ul.brand-thumbnails:after,
+ul.brand-thumbnails::after,
:where(.brand-thumbnails-description)::after {
clear: both;
content: "";
@@ -95,6 +97,7 @@ ul.brand-thumbnails.columns-6 li {
}
@media screen and (max-width: 768px) {
+
ul.brand-thumbnails:not(.fluid-columns) li {
width: 48% !important;
}
@@ -104,7 +107,7 @@ ul.brand-thumbnails.columns-6 li {
}
ul.brand-thumbnails:not(.fluid-columns) li.last {
- margin-right: 3.8%
+ margin-right: 3.8%;
}
ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd) {
@@ -144,35 +147,43 @@ ul.brand-thumbnails.columns-6 li {
#brands_a_z h3:target {
text-decoration: underline;
}
+
ul.brands_index {
list-style: none outside;
overflow: hidden;
zoom: 1;
}
+
ul.brands_index li {
float: left;
margin: 0 2px 2px 0;
}
-ul.brands_index li a, ul.brands_index li span {
+
+ul.brands_index li a,
+ul.brands_index li span {
border: 1px solid #ccc;
padding: 6px;
line-height: 1em;
float: left;
text-decoration: none;
}
+
ul.brands_index li span {
border-color: #eee;
color: #ddd;
}
+
ul.brands_index li a:hover {
border-width: 2px;
padding: 5px;
text-decoration: none;
}
+
ul.brands_index li a.active {
border-width: 2px;
padding: 5px;
}
+
div#brands_a_z a.top {
border: 1px solid #ccc;
padding: 4px;
diff --git a/plugins/woocommerce/client/legacy/css/coming-soon-entire-site-deprecated.scss b/plugins/woocommerce/client/legacy/css/coming-soon-entire-site-deprecated.scss
index e8d21c492d9..e9f90a4d6f3 100644
--- a/plugins/woocommerce/client/legacy/css/coming-soon-entire-site-deprecated.scss
+++ b/plugins/woocommerce/client/legacy/css/coming-soon-entire-site-deprecated.scss
@@ -44,6 +44,7 @@ body:has(.woocommerce-coming-soon-entire-site) {
}
.wp-container-core-group-is-layout-4 {
+
&.wp-container-core-group-is-layout-4 {
justify-content: space-between;
}
@@ -89,6 +90,7 @@ body:has(.woocommerce-coming-soon-entire-site) {
}
.coming-soon-cover {
+
.wp-block-cover__background {
background-color: var(--woocommerce-coming-soon-color) !important;
}
@@ -119,6 +121,7 @@ body:has(.woocommerce-coming-soon-entire-site) {
gap: 10px;
box-sizing: border-box;
}
+
.wp-block-loginout a {
color: #fff;
text-decoration: none;
@@ -131,4 +134,5 @@ body:has(.woocommerce-coming-soon-entire-site) {
.woocommerce-coming-soon-entire-site .wp-block-loginout a {
text-decoration: none;
}
+
/* End of styles for the deprecated version of the coming soon block */
diff --git a/plugins/woocommerce/client/legacy/css/coming-soon.scss b/plugins/woocommerce/client/legacy/css/coming-soon.scss
index 18c6cdaab59..5b7adc61c23 100644
--- a/plugins/woocommerce/client/legacy/css/coming-soon.scss
+++ b/plugins/woocommerce/client/legacy/css/coming-soon.scss
@@ -16,7 +16,6 @@
box-sizing: border-box;
z-index: 100;
- /* stylelint-disable-next-line selector-class-pattern */
.coming-soon-footer-banner__content {
text-align: center;
flex: 1;
@@ -35,7 +34,6 @@
}
a.coming-soon-footer-banner-dismiss {
- /* stylelint-disable-next-line function-url-quotes */
background-image: url('data:image/svg+xml,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4995 13.0602L16.2118 16.7725L17.2725 15.7118L13.5602 11.9995L17.2725 8.28723L16.2119 7.22657L12.4995 10.9389L8.78722 7.22656L7.72656 8.28722L11.4389 11.9995L7.72657 15.7119L8.78723 16.7725L12.4995 13.0602Z" fill="%23#{str-slice("#{$gray-900}", 2)}"/></svg>');
width: 24px;
height: 24px;
diff --git a/plugins/woocommerce/client/legacy/css/dashboard.scss b/plugins/woocommerce/client/legacy/css/dashboard.scss
index 9ccc6922128..8665359ab55 100644
--- a/plugins/woocommerce/client/legacy/css/dashboard.scss
+++ b/plugins/woocommerce/client/legacy/css/dashboard.scss
@@ -62,7 +62,7 @@ ul.woocommerce_stats {
font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
font-size: 4em;
line-height: 1.2em;
- font-weight: normal;
+ font-weight: 400;
text-align: center;
display: block;
}
@@ -127,7 +127,7 @@ ul.woocommerce_stats {
strong {
font-size: 16px;
line-height: 1.2em;
- font-weight: normal;
+ font-weight: 400;
display: block;
color: $gray-900;
}
@@ -237,7 +237,7 @@ ul.woocommerce_stats {
font-size: 13px;
line-height: 1.5;
margin: 0;
- font-weight: normal;
+ font-weight: 400;
color: $wp-admin-icon-gray;
}
@@ -267,7 +267,7 @@ ul.woocommerce_stats {
line-height: 1.5;
margin-left: 0.5em;
width: 5.4em;
- font-family: "WooCommerce" !important;
+ font-family: WooCommerce !important;
&::before {
content: "\e021\e021\e021\e021\e021";
@@ -302,14 +302,18 @@ ul.woocommerce_stats {
}
#dash-right-now li.product-count a::before {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e01d";
}
#dashboard_activity {
+
#activity-widget {
+
#the-comment-list {
+
.review.comment-item {
+
.avatar {
margin-right: 12px;
position: relative;
diff --git a/plugins/woocommerce/client/legacy/css/forms.scss b/plugins/woocommerce/client/legacy/css/forms.scss
index 67e9cf28250..566476a2bcf 100644
--- a/plugins/woocommerce/client/legacy/css/forms.scss
+++ b/plugins/woocommerce/client/legacy/css/forms.scss
@@ -1,4 +1,5 @@
.woocommerce {
+
/**
* Generic forms styles used in places such as my account and the shortcode based checkout.
*/
@@ -17,7 +18,7 @@
&.hidden {
visibility: hidden;
- }
+ }
&.inline {
display: inline;
@@ -66,9 +67,9 @@
.input-text,
select {
font-family: inherit;
- font-weight: normal;
+ font-weight: 400;
letter-spacing: normal;
- padding: .5em;
+ padding: 0.5em;
display: block;
background-color: var(--wc-form-color-background, #fff);
border: var(--wc-form-border-width) solid var(--wc-form-border-color);
@@ -81,16 +82,17 @@
height: auto;
&:focus {
- border-color: currentColor;
+ border-color: currentcolor;
}
}
select {
cursor: pointer;
+
/* We hide the default chevron because it cannot be directly modified. Instead, we add a custom chevron using a background image. */
appearance: none;
padding-right: 3em;
- background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=);
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=");
background-repeat: no-repeat;
background-size: 16px;
background-position: calc(100% - 0.5em) 50%;
@@ -128,23 +130,28 @@
}
&.woocommerce-invalid {
+
label {
color: var(--wc-red);
}
+
input.input-text,
select {
border-color: var(--wc-red);
}
+
.select2-container:not(.select2-container--open) .select2-selection {
border-color: var(--wc-red);
}
}
&.woocommerce-validated {
+
input.input-text,
select {
border-color: var(--wc-green);
}
+
.select2-container:not(.select2-container--open) .select2-selection {
border-color: var(--wc-green);
}
@@ -165,6 +172,7 @@
}
:where(.woocommerce) {
+
.select2-container {
width: 100%;
@@ -176,7 +184,7 @@
line-height: normal;
box-sizing: border-box;
color: var(--wc-form-color-text, #444);
- font-weight: normal;
+ font-weight: 400;
}
.select2-selection__placeholder {
@@ -194,7 +202,7 @@
border: none;
display: block;
background:
- url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=)
+ url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=")
no-repeat;
background-size: 16px;
width: 16px;
diff --git a/plugins/woocommerce/client/legacy/css/helper.scss b/plugins/woocommerce/client/legacy/css/helper.scss
index 835786e6eb3..8e24dee2cc2 100644
--- a/plugins/woocommerce/client/legacy/css/helper.scss
+++ b/plugins/woocommerce/client/legacy/css/helper.scss
@@ -732,7 +732,7 @@ $admin-theme-color: var(--wp-admin-theme-color);
}
td.color-bar.expiring {
- border-left-color: orange;
+ border-left-color: #ffa500;
}
td.color-bar.update-available {
@@ -1006,7 +1006,7 @@ $admin-theme-color: var(--wp-admin-theme-color);
}
}
- & + .form-toggle__label .form-toggle__switch {
+ + .form-toggle__label .form-toggle__switch {
background: #999;
}
diff --git a/plugins/woocommerce/client/legacy/css/menu.scss b/plugins/woocommerce/client/legacy/css/menu.scss
index aa9f9159a87..a626669d405 100644
--- a/plugins/woocommerce/client/legacy/css/menu.scss
+++ b/plugins/woocommerce/client/legacy/css/menu.scss
@@ -41,7 +41,7 @@ span.mce_woocommerce_shortcodes_button {
}
.wc_plugin_upgrade_notice {
- font-weight: normal;
+ font-weight: 400;
background: #fff8e5 !important;
border-left: 4px solid #ffb900;
border-top: 1px solid #ffb900;
@@ -96,7 +96,7 @@ span.mce_woocommerce_shortcodes_button {
}
th {
- font-weight: bold;
+ font-weight: 700;
}
}
}
@@ -168,7 +168,7 @@ span.mce_woocommerce_shortcodes_button {
}
th {
- font-weight: bold;
+ font-weight: 700;
margin-top: 0;
}
}
diff --git a/plugins/woocommerce/client/legacy/css/network-order-widget.scss b/plugins/woocommerce/client/legacy/css/network-order-widget.scss
index 8aac7845cff..da2dea34f54 100644
--- a/plugins/woocommerce/client/legacy/css/network-order-widget.scss
+++ b/plugins/woocommerce/client/legacy/css/network-order-widget.scss
@@ -1,4 +1,5 @@
#woocommerce_network_orders {
+
.inside {
margin: 0;
padding: 0;
@@ -17,12 +18,14 @@
.woocommerce-network-orders-no-orders,
.woocommerce-network-order-table-loading {
+
p {
text-align: center;
}
}
.woocommerce-network-order-table {
+
&.is-active {
display: table;
}
@@ -40,28 +43,33 @@
}
.post-type-shop_order {
+
.woocommerce-network-order-table {
+
tbody {
- th, td {
+
+ th,
+ td {
border-top: 1px solid #f5f5f5;
}
+
td {
vertical-align: middle;
padding: 1em;
.order-status {
display: inline-flex;
- padding: 0px 1em;
+ padding: 0 1em;
line-height: 2.5em;
color: #777;
- background: #E5E5E5;
+ background: #e5e5e5;
border-radius: 4px;
- border-bottom: 1px solid rgba(0,0,0,0.05);
- margin: -.5em 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+ margin: -0.5em 0;
cursor: inherit !important;
&.status-completed {
- background: #C8D7E1;
+ background: #c8d7e1;
color: #2e4453;
}
@@ -76,8 +84,8 @@
}
&.status-processing {
- background: #C6E1C6;
- color: #5B841B;
+ background: #c6e1c6;
+ color: #5b841b;
}
&.status-trash {
diff --git a/plugins/woocommerce/client/legacy/css/order-review.scss b/plugins/woocommerce/client/legacy/css/order-review.scss
index 7225254bc9e..f6d2cd88f51 100644
--- a/plugins/woocommerce/client/legacy/css/order-review.scss
+++ b/plugins/woocommerce/client/legacy/css/order-review.scss
@@ -2,7 +2,9 @@
// sibling selector can fill stars 1..N without `:has()`.
.woocommerce-review-order {
+
&.is-success {
+
.woocommerce-review-order__title,
.woocommerce-review-order__intro,
.woocommerce-review-order__legend,
@@ -142,6 +144,7 @@
}
@media (max-width: 600px) {
+
&__item-row {
flex-direction: column;
}
@@ -194,7 +197,7 @@
display: inline-flex;
padding: 0;
margin: 0;
- color: currentColor;
+ color: currentcolor;
}
&__input + &__star {
@@ -207,7 +210,7 @@
display: block;
width: 24px;
height: 24px;
- fill: currentColor;
+ fill: currentcolor;
opacity: 0.3;
transition: opacity 100ms ease-in-out;
}
@@ -227,7 +230,7 @@
}
&__input:focus-visible + .woocommerce-star-rating__star {
- outline: 2px solid currentColor;
+ outline: 2px solid currentcolor;
outline-offset: 2px;
}
diff --git a/plugins/woocommerce/client/legacy/css/prettyPhoto.scss b/plugins/woocommerce/client/legacy/css/prettyPhoto.scss
index 1e0517ef6d2..ab862921f7a 100644
--- a/plugins/woocommerce/client/legacy/css/prettyPhoto.scss
+++ b/plugins/woocommerce/client/legacy/css/prettyPhoto.scss
@@ -7,9 +7,9 @@
/**
* Imports
*/
-@import 'mixins';
-@import 'variables';
-@import 'fonts';
+@import "mixins";
+@import "variables";
+@import "fonts";
/**
* Mixins
@@ -23,6 +23,7 @@
color: #fff !important;
font-size: 16px !important;
line-height: 1em;
+
@include transition();
&:hover {
@@ -34,25 +35,31 @@
* Custom WooCommerce prettyPhoto theme
*/
div.pp_woocommerce {
+
.pp_content_container {
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
padding: 20px 0;
+
@include clearfix();
}
.pp_loaderIcon {
+
@include loader();
}
div.ppt {
- color: black;
+ color: #000;
}
.pp_gallery {
+
ul {
+
li {
+
a {
border: 1px solid rgba(0, 0, 0, 0.5);
background: #fff;
@@ -66,6 +73,7 @@ div.pp_woocommerce {
}
&.selected {
+
a {
border-color: #000;
}
@@ -76,10 +84,12 @@ div.pp_woocommerce {
.pp_previous,
.pp_next {
+
&::before {
+
@include button();
- font-family: 'WooCommerce';
- content: '\e00b';
+ font-family: WooCommerce;
+ content: "\e00b";
text-indent: 0;
display: none;
position: absolute;
@@ -89,6 +99,7 @@ div.pp_woocommerce {
}
&:hover {
+
&::before {
display: block;
}
@@ -96,16 +107,18 @@ div.pp_woocommerce {
}
.pp_previous {
+
&::before {
left: 1em;
}
}
.pp_next {
+
&::before {
right: 1em;
- font-family: 'WooCommerce';
- content: '\e008';
+ font-family: WooCommerce;
+ content: "\e008";
}
}
@@ -134,14 +147,15 @@ div.pp_woocommerce {
}
.pp_close {
+
@include button();
top: -0.5em;
right: -0.5em;
font-size: 1.618em !important;
&::before {
- font-family: 'WooCommerce';
- content: '\e013';
+ font-family: WooCommerce;
+ content: "\e013";
display: block;
position: absolute;
top: 0;
@@ -155,13 +169,14 @@ div.pp_woocommerce {
.pp_arrow_previous,
.pp_arrow_next {
+
@include button();
position: relative;
margin-top: -1px;
&::before {
- font-family: 'WooCommerce';
- content: '\e00b';
+ font-family: WooCommerce;
+ content: "\e00b";
display: block;
position: absolute;
top: 0;
@@ -181,12 +196,13 @@ div.pp_woocommerce {
margin-left: 0.5em;
&::before {
- content: '\e008';
+ content: "\e008";
}
}
a.pp_expand,
a.pp_contract {
+
@include button();
right: auto;
left: -0.5em;
@@ -194,8 +210,8 @@ div.pp_woocommerce {
font-size: 1.618em !important;
&::before {
- font-family: 'WooCommerce';
- content: '\e005';
+ font-family: WooCommerce;
+ content: "\e005";
display: block;
position: absolute;
top: 0;
@@ -208,8 +224,9 @@ div.pp_woocommerce {
}
a.pp_contract {
+
&::before {
- content: '\e004';
+ content: "\e004";
}
}
@@ -227,13 +244,15 @@ div.pp_woocommerce {
}
.pp_inline {
- padding: 0!important;
+ padding: 0 !important;
}
}
// RTL support
.rtl {
+
div.pp_woocommerce {
+
.pp_content_container {
text-align: right;
}
@@ -241,6 +260,7 @@ div.pp_woocommerce {
}
@media only screen and (max-width: 768px) {
+
div.pp_woocommerce {
left: 5% !important;
right: 5% !important;
@@ -281,7 +301,8 @@ div.pp_woocommerce {
width: 100% !important;
#pp_full_res {
- & > img {
+
+ > img {
width: 100% !important;
height: auto !important;
}
diff --git a/plugins/woocommerce/client/legacy/css/reports-print.scss b/plugins/woocommerce/client/legacy/css/reports-print.scss
index c546f6a6019..d67e268df54 100644
--- a/plugins/woocommerce/client/legacy/css/reports-print.scss
+++ b/plugins/woocommerce/client/legacy/css/reports-print.scss
@@ -5,9 +5,9 @@
* {
background: transparent !important;
- color: black !important;
+ color: #000 !important;
text-shadow: none !important;
- filter:none !important;
+ filter: none !important;
-ms-filter: none !important;
font-size: 9pt !important;
opacity: 1;
@@ -69,5 +69,5 @@ h2 .nav-tab {
.chart-legend li {
padding: 0.25em 0.5em !important;
box-shadow: none !important;
- border-bottom: 1px solid gray !important;
+ border-bottom: 1px solid #808080 !important;
}
diff --git a/plugins/woocommerce/client/legacy/css/twenty-nineteen.scss b/plugins/woocommerce/client/legacy/css/twenty-nineteen.scss
index b6436af59fc..084fc68f11e 100644
--- a/plugins/woocommerce/client/legacy/css/twenty-nineteen.scss
+++ b/plugins/woocommerce/client/legacy/css/twenty-nineteen.scss
@@ -105,7 +105,9 @@ body {
*/
.woocommerce,
.woocommerce-page {
+
table.shop_table {
+
td,
th {
word-break: normal;
@@ -238,7 +240,7 @@ a.remove {
text-align: center;
border-radius: 100%;
text-decoration: none !important;
- background: firebrick;
+ background: #b22222;
color: #fff;
&:hover {
@@ -273,6 +275,7 @@ dl.variation,
* Single product
*/
.single-product {
+
div.product {
position: relative;
}
@@ -282,6 +285,7 @@ dl.variation,
}
.entry {
+
.entry-title {
margin-top: 0;
@@ -292,6 +296,7 @@ dl.variation,
}
.summary {
+
p.price {
margin-bottom: 2rem;
}
@@ -308,6 +313,7 @@ dl.variation,
}
form.cart {
+
.quantity {
float: left;
margin-right: 0.5rem;
@@ -319,6 +325,7 @@ dl.variation,
}
.woocommerce-variation-add-to-cart {
+
.button {
padding-top: 0.72rem;
padding-bottom: 0.72rem;
@@ -331,6 +338,7 @@ dl.variation,
}
table.variations {
+
label {
margin: 0;
}
@@ -378,6 +386,7 @@ table.variations {
}
.flex-control-thumbs {
+
li {
list-style: none;
cursor: pointer;
@@ -401,6 +410,7 @@ table.variations {
}
.woocommerce-product-gallery--columns-3 {
+
.flex-control-thumbs li {
width: 33.3333%;
}
@@ -411,6 +421,7 @@ table.variations {
}
.woocommerce-product-gallery--columns-4 {
+
.flex-control-thumbs li {
width: 25%;
}
@@ -421,6 +432,7 @@ table.variations {
}
.woocommerce-product-gallery--columns-5 {
+
.flex-control-thumbs li {
width: 20%;
}
@@ -431,6 +443,7 @@ table.variations {
}
.woocommerce-product-gallery__trigger {
+
@include woocommerce-product-gallery__trigger;
}
@@ -452,6 +465,7 @@ table.variations {
}
&.active {
+
a {
color: $highlights-color;
box-shadow: 0 2px 0 $highlights-color;
@@ -461,12 +475,14 @@ table.variations {
}
.panel {
+
> * {
margin-top: 0 !important;
}
h1,
h2 {
+
&::before {
content: none;
}
@@ -491,6 +507,7 @@ table.variations {
}
#reviews {
+
ol.commentlist {
padding: 0;
}
@@ -539,6 +556,7 @@ table.variations {
}
&:hover {
+
~ a::before {
content: "\e021";
}
@@ -546,7 +564,9 @@ table.variations {
}
&:hover {
+
a {
+
&::before {
content: "\e020";
}
@@ -554,7 +574,9 @@ table.variations {
}
&.selected {
+
a.active {
+
&::before {
content: "\e020";
}
@@ -565,6 +587,7 @@ table.variations {
}
a:not(.active) {
+
&::before {
content: "\e020";
}
@@ -578,6 +601,7 @@ table.variations {
* Widgets
*/
.widget.woocommerce {
+
ul {
padding-left: 0;
@@ -618,7 +642,9 @@ table.variations {
}
.widget_shopping_cart {
+
.buttons {
+
a {
display: inline-block;
margin: 0 0.5rem 0 0;
@@ -627,7 +653,9 @@ table.variations {
}
.widget_layered_nav {
+
.chosen {
+
&::before {
content: "×";
display: inline-block;
@@ -637,13 +665,14 @@ table.variations {
font-size: 16px;
text-align: center;
border-radius: 100%;
- border: 1px solid black;
+ border: 1px solid #000;
margin-right: 0.25rem;
}
}
}
.widget_price_filter {
+
.price_slider {
margin-bottom: 1rem;
}
@@ -714,6 +743,7 @@ table.variations {
}
.widget_rating_filter {
+
li {
text-align: right;
@@ -725,6 +755,7 @@ table.variations {
}
.widget_product_search {
+
form {
position: relative;
}
@@ -746,6 +777,7 @@ table.variations {
* Account section
*/
.woocommerce-account {
+
.woocommerce-MyAccount-navigation {
font-family: $headings;
margin: 0 0 2rem;
@@ -776,6 +808,7 @@ table.variations {
}
&.is-active {
+
a {
text-decoration: underline;
}
@@ -784,6 +817,7 @@ table.variations {
}
table.account-orders-table {
+
.button {
margin: 0 0.35rem 0.35rem 0;
}
@@ -794,6 +828,7 @@ table.variations {
* Cart
*/
.woocommerce-cart-form {
+
img {
max-width: 42px;
height: auto;
@@ -814,6 +849,7 @@ table.variations {
}
.actions {
+
.input-text {
width: 200px !important;
float: left;
@@ -822,6 +858,7 @@ table.variations {
}
.quantity {
+
input {
width: 4rem;
}
@@ -829,6 +866,7 @@ table.variations {
}
.cart_totals {
+
th,
td {
vertical-align: top;
@@ -930,7 +968,7 @@ table.variations {
display: block;
width: 14px;
height: 14px;
- background: white;
+ background: #fff;
position: absolute;
top: 7px;
right: 17px;
@@ -955,6 +993,7 @@ table.variations {
}
.woocommerce-no-js {
+
form.woocommerce-form-login,
form.woocommerce-form-coupon {
display: block !important;
@@ -993,9 +1032,11 @@ table.variations {
}
.woocommerce-checkout {
+
.woocommerce-input-wrapper {
+
.description {
- background: royalblue;
+ background: #4169e1;
color: #fff;
border-radius: 3px;
padding: 1rem;
@@ -1020,7 +1061,7 @@ table.variations {
position: absolute;
border-width: 4px 6px 0 6px;
border-style: solid;
- border-color: royalblue transparent transparent transparent;
+ border-color: #4169e1 transparent transparent transparent;
z-index: 100;
display: block;
}
@@ -1029,6 +1070,7 @@ table.variations {
}
.woocommerce-checkout-review-order-table {
+
td {
padding: 1rem 0.5rem;
}
@@ -1043,6 +1085,7 @@ table.variations {
}
.woocommerce-checkout-review-order {
+
ul {
margin: 2rem 0 1rem;
padding-left: 0;
@@ -1058,6 +1101,7 @@ table.variations {
ul,
ol {
+
&:last-of-type {
margin-bottom: 0;
}
@@ -1075,6 +1119,7 @@ table.variations {
}
p {
+
&:first-child {
margin-top: 0;
}
@@ -1103,15 +1148,16 @@ table.variations {
input.input-radio[name="payment_method"] {
display: none;
- & + label {
+ + label {
+
&::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
- border: 2px solid white;
- box-shadow: 0 0 0 2px black;
- background: white;
+ border: 2px solid #fff;
+ box-shadow: 0 0 0 2px #000;
+ background: #fff;
margin-left: 4px;
margin-right: 0.5rem;
border-radius: 100%;
@@ -1120,8 +1166,9 @@ table.variations {
}
&:checked + label {
+
&::before {
- background: black;
+ background: #000;
}
}
}
@@ -1139,7 +1186,9 @@ table.variations {
* Layout stuff
*/
.woocommerce {
+
.content-area {
+
.site-main {
margin: calc(2 * 1rem) 1rem;
}
@@ -1147,9 +1196,12 @@ table.variations {
}
@media only screen and (max-width: 768px) {
+
.woocommerce,
.woocommerce-page {
+
table.shop_table_responsive {
+
tr {
margin: 0 0 1.5rem;
@@ -1174,13 +1226,17 @@ table.variations {
}
@media only screen and (min-width: 768px) {
+
/**
* Tables
*/
.woocommerce,
.woocommerce-page {
+
table.shop_table {
+
tbody {
+
tr {
font-size: 0.88889em;
}
@@ -1196,6 +1252,7 @@ table.variations {
}
.woocommerce-pagination {
+
span.page-numbers,
a.page-numbers,
.next.page-numbers,
@@ -1208,6 +1265,7 @@ table.variations {
* Account section
*/
.woocommerce-account {
+
.woocommerce-MyAccount-navigation {
float: none;
width: 100%;
@@ -1242,6 +1300,7 @@ table.variations {
* Layout stuff
*/
.woocommerce {
+
.content-area {
margin: 0 calc(10% + 60px);
@@ -1253,7 +1312,9 @@ table.variations {
}
.single-product {
+
.entry {
+
.entry-content,
.entry-summary {
max-width: none;
@@ -1269,8 +1330,11 @@ table.variations {
}
@media only screen and (min-width: 1168px) {
+
.woocommerce {
+
.content-area {
+
.site-main {
max-width: calc(6 * (100vw / 12) - 28px);
}
@@ -1313,7 +1377,7 @@ table.variations {
}
.woocommerce-error {
- background: firebrick;
+ background: #b22222;
}
.woocommerce-info {
@@ -1349,13 +1413,17 @@ table.variations {
* Coupon error notice
*/
.woocommerce-cart {
+
td.actions .coupon .coupon-error-notice {
+
@include coupon-error-notice-cart();
}
}
form.checkout_coupon {
+
.coupon-error-notice {
+
@include coupon-error-notice-checkout();
}
@@ -1368,11 +1436,13 @@ form.checkout_coupon {
* Checkout error message
*/
.woocommerce-checkout {
+
form .form-row.woocommerce-invalid input.input-text {
border-color: var(--wc-red);
}
.checkout-inline-error-message {
+
@include checkout-inline-error-message();
}
}
@@ -1381,8 +1451,11 @@ form.checkout_coupon {
* Log in form
*/
.woocommerce-page {
+
form {
+
.password-input {
+
input[type="text"] {
padding-right: 2.5rem;
}
diff --git a/plugins/woocommerce/client/legacy/css/twenty-seventeen.scss b/plugins/woocommerce/client/legacy/css/twenty-seventeen.scss
index 86abcf1961d..e338fe1180b 100644
--- a/plugins/woocommerce/client/legacy/css/twenty-seventeen.scss
+++ b/plugins/woocommerce/client/legacy/css/twenty-seventeen.scss
@@ -41,6 +41,7 @@
* Global elements
*/
.woocommerce {
+
.blockUI.blockOverlay {
position: relative;
@@ -48,10 +49,12 @@
}
.loader {
+
@include loader();
}
.woocommerce-form-login {
+
.woocommerce-form-login__submit {
float: left;
margin-right: 1em;
@@ -78,6 +81,7 @@
font-size: 0.8125rem;
a {
+
@include link();
}
}
@@ -133,6 +137,7 @@
}
.price {
+
del {
opacity: 0.7;
display: inline-block;
@@ -159,6 +164,7 @@
* Products
*/
ul.products {
+
li.product {
list-style: none;
@@ -177,6 +183,7 @@ ul.products {
}
.button {
+
@include link();
&.loading {
@@ -185,6 +192,7 @@ ul.products {
}
.added_to_cart {
+
@include link();
margin-left: 0.5em;
}
@@ -277,6 +285,7 @@ dl.variation,
* Single product
*/
.single-product {
+
div.product {
position: relative;
}
@@ -304,6 +313,7 @@ dl.variation,
}
form.cart {
+
.quantity {
float: left;
margin-right: 0.5em;
@@ -315,6 +325,7 @@ dl.variation,
}
.woocommerce-variation-add-to-cart {
+
.button {
padding-top: 0.72em;
padding-bottom: 0.72em;
@@ -327,6 +338,7 @@ dl.variation,
}
table.variations {
+
label {
margin: 0;
}
@@ -370,6 +382,7 @@ table.variations {
}
.flex-control-thumbs {
+
li {
list-style: none;
cursor: pointer;
@@ -393,6 +406,7 @@ table.variations {
}
.woocommerce-product-gallery--columns-3 {
+
.flex-control-thumbs li {
width: 33.3333%;
}
@@ -403,6 +417,7 @@ table.variations {
}
.woocommerce-product-gallery--columns-4 {
+
.flex-control-thumbs li {
width: 25%;
}
@@ -413,6 +428,7 @@ table.variations {
}
.woocommerce-product-gallery--columns-5 {
+
.flex-control-thumbs li {
width: 20%;
}
@@ -423,6 +439,7 @@ table.variations {
}
.woocommerce-product-gallery__trigger {
+
@include woocommerce-product-gallery__trigger;
}
@@ -433,6 +450,7 @@ table.variations {
margin-right: 1em;
&.active {
+
a {
box-shadow: 0 3px 0 rgba(15, 15, 15, 1);
}
@@ -440,6 +458,7 @@ table.variations {
}
a {
+
@include link();
}
@@ -457,6 +476,7 @@ table.variations {
}
#reviews {
+
li.review,
li.comment {
list-style: none;
@@ -475,6 +495,7 @@ table.variations {
}
p.stars {
+
a {
position: relative;
height: 1em;
@@ -499,6 +520,7 @@ table.variations {
}
&:hover {
+
~ a::before {
content: "\e021";
}
@@ -506,7 +528,9 @@ table.variations {
}
&:hover {
+
a {
+
&::before {
content: "\e020";
}
@@ -514,7 +538,9 @@ table.variations {
}
&.selected {
+
a.active {
+
&::before {
content: "\e020";
}
@@ -525,6 +551,7 @@ table.variations {
}
a:not(.active) {
+
&::before {
content: "\e020";
}
@@ -565,7 +592,9 @@ table.variations {
}
.widget_shopping_cart {
+
.buttons {
+
a {
display: inline-block;
margin: 0 0.5em 0 0;
@@ -574,7 +603,9 @@ table.variations {
}
.widget_layered_nav {
+
.chosen {
+
&::before {
content: "×";
display: inline-block;
@@ -584,13 +615,14 @@ table.variations {
font-size: 16px;
text-align: center;
border-radius: 100%;
- border: 1px solid black;
+ border: 1px solid #000;
margin-right: 0.25em;
}
}
}
.widget_price_filter {
+
.price_slider {
margin-bottom: 1em;
}
@@ -661,6 +693,7 @@ table.variations {
}
.widget_rating_filter {
+
li {
text-align: right;
@@ -672,6 +705,7 @@ table.variations {
}
.widget_product_search {
+
form {
position: relative;
}
@@ -693,6 +727,7 @@ table.variations {
* Account section
*/
.woocommerce-account {
+
.woocommerce-MyAccount-navigation {
float: right;
width: 25%;
@@ -719,6 +754,7 @@ table.variations {
}
&.is-active {
+
a {
box-shadow: 0 3px 0 rgba(15, 15, 15, 1);
}
@@ -735,6 +771,7 @@ table.variations {
* Cart
*/
.woocommerce-cart-form {
+
td {
padding: 1em 0.5em;
}
@@ -759,6 +796,7 @@ table.variations {
}
.actions {
+
.input-text {
width: 130px !important;
float: left;
@@ -767,6 +805,7 @@ table.variations {
}
.quantity {
+
input {
width: 4em;
}
@@ -774,6 +813,7 @@ table.variations {
}
.cart_totals {
+
th,
td {
vertical-align: top;
@@ -839,6 +879,7 @@ table.variations {
* Checkout
*/
#ship-to-different-address {
+
label {
font-weight: 300;
cursor: pointer;
@@ -867,7 +908,7 @@ table.variations {
display: block;
width: 14px;
height: 14px;
- background: white;
+ background: #fff;
position: absolute;
top: 7px;
right: 17px;
@@ -892,6 +933,7 @@ table.variations {
}
.woocommerce-no-js {
+
form.woocommerce-form-login,
form.woocommerce-form-coupon {
display: block !important;
@@ -930,9 +972,11 @@ table.variations {
}
.woocommerce-checkout {
+
.woocommerce-input-wrapper {
+
.description {
- background: royalblue;
+ background: #4169e1;
color: #fff;
border-radius: 3px;
padding: 1em;
@@ -957,7 +1001,7 @@ table.variations {
position: absolute;
border-width: 4px 6px 0 6px;
border-style: solid;
- border-color: royalblue transparent transparent transparent;
+ border-color: #4169e1 transparent transparent transparent;
z-index: 100;
display: block;
}
@@ -966,6 +1010,7 @@ table.variations {
}
.woocommerce-checkout-review-order-table {
+
td {
padding: 1em 0.5em;
}
@@ -989,6 +1034,7 @@ table.variations {
ul,
ol {
+
&:last-of-type {
margin-bottom: 0;
}
@@ -1027,15 +1073,16 @@ table.variations {
input.input-radio[name="payment_method"] {
display: none;
- & + label {
+ + label {
+
&::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
- border: 2px solid white;
- box-shadow: 0 0 0 2px black;
- background: white;
+ border: 2px solid #fff;
+ box-shadow: 0 0 0 2px #000;
+ background: #fff;
margin-left: 4px;
margin-right: 0.5em;
border-radius: 100%;
@@ -1044,14 +1091,16 @@ table.variations {
}
&:checked + label {
+
&::before {
- background: black;
+ background: #000;
}
}
}
}
.colors-dark {
+
.page-numbers {
color: #444;
@@ -1070,6 +1119,7 @@ table.variations {
}
.wc_payment_method {
+
.payment_box {
background: #333;
}
@@ -1080,7 +1130,9 @@ table.variations {
* Layout stuff
*/
@media screen and (min-width: 48em) {
+
.has-sidebar.woocommerce-page:not(.error404) {
+
#primary {
width: 74%;
}
@@ -1092,21 +1144,21 @@ table.variations {
body.page-two-column.woocommerce-cart:not(.archive) #primary .entry-header,
body.page-two-column.woocommerce-checkout:not(.archive)
- #primary
- .entry-header,
+ #primary
+ .entry-header,
body.page-two-column.woocommerce-account:not(.archive)
- #primary
- .entry-header {
+ #primary
+ .entry-header {
width: 16%;
}
body.page-two-column.woocommerce-cart:not(.archive) #primary .entry-content,
body.page-two-column.woocommerce-checkout:not(.archive)
- #primary
- .entry-content,
+ #primary
+ .entry-content,
body.page-two-column.woocommerce-account:not(.archive)
- #primary
- .entry-content {
+ #primary
+ .entry-content {
width: 78%;
}
}
@@ -1120,30 +1172,32 @@ table.variations {
}
.woocommerce-message {
- background: teal;
+ background: #008080;
color: #fff;
}
.woocommerce-error {
- background: firebrick;
+ background: #b22222;
color: #fff;
}
.woocommerce-info {
- background: royalblue;
+ background: #4169e1;
color: #fff;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
+
a {
+
@include link_white();
}
}
.woocommerce-store-notice {
- background: royalblue;
+ background: #4169e1;
color: #fff;
padding: 1em;
position: absolute;
@@ -1171,13 +1225,17 @@ table.variations {
* Coupon error notice
*/
.woocommerce-cart {
+
td.actions .coupon .coupon-error-notice {
+
@include coupon-error-notice-cart();
}
}
form.checkout_coupon {
+
.coupon-error-notice {
+
@include coupon-error-notice-checkout();
}
@@ -1190,11 +1248,13 @@ form.checkout_coupon {
* Checkout error message
*/
.woocommerce-checkout {
+
form .form-row.woocommerce-invalid input.input-text {
border-color: var(--wc-red);
}
.checkout-inline-error-message {
+
@include checkout-inline-error-message();
}
}
@@ -1203,8 +1263,11 @@ form.checkout_coupon {
* Log in form
*/
.woocommerce-page {
+
form {
+
.password-input {
+
input[type="text"] {
padding-right: 2.5rem;
}
diff --git a/plugins/woocommerce/client/legacy/css/twenty-twenty-one-admin.scss b/plugins/woocommerce/client/legacy/css/twenty-twenty-one-admin.scss
index cc2bb26d384..8bfc9ae6e35 100644
--- a/plugins/woocommerce/client/legacy/css/twenty-twenty-one-admin.scss
+++ b/plugins/woocommerce/client/legacy/css/twenty-twenty-one-admin.scss
@@ -2,9 +2,13 @@
* Admin
*/
.wp-admin.woocommerce-admin-page {
+
table.wp-list-table {
+
tr.type-product {
+
td.thumb {
+
img {
max-width: 40px !important;
}
diff --git a/plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss b/plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
index f7378988f06..2c7aab25251 100644
--- a/plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
+++ b/plugins/woocommerce/client/legacy/css/twenty-twenty-one.scss
@@ -44,8 +44,10 @@ body {
}
.woocommerce {
+
form.woocommerce-form-login,
form.woocommerce-form-register {
+
p,
label {
font-family: $headings;
@@ -73,7 +75,9 @@ body {
}
.woocommerce-view-order {
+
.woocommerce-MyAccount-content {
+
table {
border: 0;
@@ -82,6 +86,7 @@ body {
}
tfoot {
+
tr:last-of-type {
border-top: 1px solid $body-color;
@@ -101,6 +106,7 @@ body {
}
.site-main {
+
.woocommerce-breadcrumb {
margin-bottom: var(--global--spacing-vertical);
font-size: 0.88889em;
@@ -219,6 +225,7 @@ body {
}
#main {
+
.post-inner {
padding-top: 0;
}
@@ -229,6 +236,7 @@ body {
}
.cross-sells {
+
.woocommerce-loop-product__title {
font-family: $headings;
}
@@ -250,6 +258,7 @@ body {
*/
.woocommerce,
.woocommerce-page {
+
&.is-dark-theme {
--wc-form-color-background: var(--global--color-white-90);
@@ -259,6 +268,7 @@ body {
}
table.shop_table {
+
td,
th {
word-break: normal;
@@ -438,6 +448,7 @@ dl.variation,
* Single product
*/
.single-product {
+
div.product {
position: relative;
@@ -501,6 +512,7 @@ dl.variation,
}
form.cart {
+
.quantity {
float: left;
margin-right: 0.5rem;
@@ -512,6 +524,7 @@ dl.variation,
}
.woocommerce-variation-add-to-cart {
+
.button {
padding-top: 1.55rem;
padding-bottom: 1.59rem;
@@ -525,6 +538,7 @@ dl.variation,
.woocommerce-Tabs-panel--additional_information,
.woocommerce-Tabs-panel--reviews {
+
table {
border: 1px solid #ddd;
@@ -545,6 +559,7 @@ dl.variation,
}
.woocommerce-product-attributes-item__value {
+
p {
margin-bottom: 0;
}
@@ -606,6 +621,7 @@ a.reset_variations {
}
.flex-control-thumbs {
+
li {
list-style: none;
cursor: pointer;
@@ -629,6 +645,7 @@ a.reset_variations {
}
.woocommerce-product-gallery--columns-3 {
+
.flex-control-thumbs li {
width: 33.3333%;
}
@@ -639,6 +656,7 @@ a.reset_variations {
}
.woocommerce-product-gallery--columns-4 {
+
ol {
margin-left: 0;
margin-bottom: 0;
@@ -659,6 +677,7 @@ a.reset_variations {
}
.woocommerce-product-gallery--columns-5 {
+
.flex-control-thumbs li {
width: 20%;
}
@@ -669,6 +688,7 @@ a.reset_variations {
}
.woocommerce-product-gallery__trigger {
+
@include woocommerce-product-gallery__trigger;
&:focus {
@@ -682,6 +702,7 @@ a.reset_variations {
/* reset description tab width to full width */
#tab-description {
+
h2,
p {
max-width: 100vw;
@@ -691,6 +712,7 @@ a.reset_variations {
/* reset additional info tab width to full width */
#tab-additional_information {
+
.woocommerce-product-attributes {
max-width: 100vw;
width: 100%;
@@ -698,6 +720,7 @@ a.reset_variations {
}
#tab-reviews {
+
/* reset reviews tab width to full width */
.woocommerce-Reviews {
max-width: 100vw;
@@ -713,7 +736,8 @@ a.reset_variations {
margin: 0 0 1.5rem;
padding: 0;
font-family: $headings;
- border-bottom: var(--button--border-width) solid
+ border-bottom:
+ var(--button--border-width) solid
var(--button--color-background);
li {
@@ -723,15 +747,18 @@ a.reset_variations {
color: $body-color;
text-decoration: none;
font-weight: 700;
- padding: var(--button--padding-vertical)
+ padding:
+ var(--button--padding-vertical)
var(--button--padding-horizontal);
}
&.active {
+
a {
color: var(--button--color-text);
background-color: var(--button--color-background);
- border: var(--button--border-width) solid
+ border:
+ var(--button--border-width) solid
var(--button--color-background);
&:focus {
@@ -743,12 +770,14 @@ a.reset_variations {
}
.panel {
+
> * {
margin-top: 0 !important;
}
h1,
h2 {
+
&::before {
content: none;
}
@@ -772,6 +801,7 @@ a.reset_variations {
}
#reviews {
+
ol.commentlist {
padding: 0;
margin: 0;
@@ -794,6 +824,7 @@ a.reset_variations {
}
.comment-form-rating {
+
label {
max-width: 58rem;
margin: 0 auto;
@@ -827,6 +858,7 @@ a.reset_variations {
}
&:hover {
+
~ a::before {
content: "\e021";
}
@@ -834,7 +866,9 @@ a.reset_variations {
}
&:hover {
+
a {
+
&::before {
content: "\e020";
}
@@ -842,7 +876,9 @@ a.reset_variations {
}
&.selected {
+
a.active {
+
&::before {
content: "\e020";
}
@@ -853,6 +889,7 @@ a.reset_variations {
}
a:not(.active) {
+
&::before {
content: "\e020";
}
@@ -874,6 +911,7 @@ a.reset_variations {
.related.products,
.up-sells {
+
h2 {
margin-bottom: 2rem;
}
@@ -898,6 +936,7 @@ a.reset_variations {
* Widgets
*/
.widget.woocommerce {
+
ul {
padding-left: 0;
@@ -938,7 +977,9 @@ a.reset_variations {
}
.widget_shopping_cart {
+
.buttons {
+
a {
display: inline-block;
margin: 0 0.5rem 0 0;
@@ -951,7 +992,9 @@ a.reset_variations {
}
.widget_layered_nav {
+
.chosen {
+
&::before {
content: "×";
display: inline-block;
@@ -968,6 +1011,7 @@ a.reset_variations {
}
.widget_price_filter {
+
.price_slider {
margin-bottom: 1rem;
}
@@ -1038,6 +1082,7 @@ a.reset_variations {
}
.widget_rating_filter {
+
li {
text-align: right;
@@ -1049,6 +1094,7 @@ a.reset_variations {
}
.widget_product_search {
+
form {
position: relative;
}
@@ -1070,7 +1116,9 @@ a.reset_variations {
* Account section
*/
.woocommerce-account {
+
#main {
+
.post-inner {
padding-top: 0;
}
@@ -1114,6 +1162,7 @@ a.reset_variations {
}
&.is-active {
+
a {
text-decoration: underline;
color: $highlights-color;
@@ -1123,12 +1172,14 @@ a.reset_variations {
}
.woocommerce-MyAccount-content {
+
p {
font-family: $headings;
font-size: 2rem;
}
form {
+
h3 {
margin-top: 0;
}
@@ -1138,6 +1189,7 @@ a.reset_variations {
margin-top: -1rem;
.woocommerce-Address-title {
+
h3 {
display: inline-block;
margin-right: 1rem;
@@ -1152,6 +1204,7 @@ a.reset_variations {
}
.woocommerce-address-fields {
+
label {
font-size: 1.5rem;
margin-bottom: 0.1rem;
@@ -1181,6 +1234,7 @@ a.reset_variations {
}
&.woocommerce-lost-password {
+
.woocommerce {
max-width: var(--responsive--alignwide-width) !important;
padding: 0 !important;
@@ -1225,8 +1279,11 @@ a.reset_variations {
}
table.account-orders-table:not(.has-background) {
+
tbody {
+
tr:nth-child(2n + 1) {
+
td {
background: var(--global--color-background);
filter: brightness(88%);
@@ -1240,6 +1297,7 @@ a.reset_variations {
}
.woocommerce-EditAccountForm {
+
label {
font-size: 1.5rem;
}
@@ -1286,7 +1344,9 @@ a.reset_variations {
}
.logged-in.woocommerce-account {
+
#main {
+
.woocommerce {
display: flex;
flex-direction: row;
@@ -1312,7 +1372,9 @@ a.reset_variations {
}
.woocommerce-cart {
+
table.woocommerce-cart-form__contents {
+
thead,
tfoot {
text-align: left;
@@ -1324,6 +1386,7 @@ a.reset_variations {
}
#main {
+
.woocommerce {
max-width: var(--responsive--alignwide-width);
margin: 0 auto;
@@ -1331,6 +1394,7 @@ a.reset_variations {
}
p.form-row {
+
input {
border: 1px solid #ddd;
}
@@ -1434,6 +1498,7 @@ a.reset_variations {
}
.woocommerce-no-js {
+
form.woocommerce-form-login,
form.woocommerce-form-coupon {
display: block !important;
@@ -1472,6 +1537,7 @@ a.reset_variations {
}
.woocommerce-checkout {
+
.woocommerce {
max-width: var(--responsive--alignwide-width);
margin: 0 auto;
@@ -1492,6 +1558,7 @@ a.reset_variations {
}
.woocommerce-billing-fields {
+
h3 {
margin: 2rem 0;
}
@@ -1508,6 +1575,7 @@ a.reset_variations {
}
form {
+
.col2-set {
width: 50%;
float: left;
@@ -1565,6 +1633,7 @@ a.reset_variations {
}
.form-row.woocommerce-invalid {
+
input.input-text {
border: 2px solid var(--wc-red);
}
@@ -1572,6 +1641,7 @@ a.reset_variations {
}
.woocommerce-input-wrapper {
+
.description {
background: #4169e1;
color: #fff;
@@ -1606,6 +1676,7 @@ a.reset_variations {
}
.woocommerce-form-login {
+
p.form-row.form-row-first,
p.form-row.form-row-last {
float: none;
@@ -1614,6 +1685,7 @@ a.reset_variations {
}
.woocommerce-checkout-review-order-table {
+
ul li {
list-style-type: none;
}
@@ -1621,13 +1693,15 @@ a.reset_variations {
input[type="radio"].shipping_method {
display: none;
- & + label {
+ + label {
+
&::before {
content: "";
display: inline-block;
width: 14px !important;
height: 14px;
- border: var(--form--border-width) solid
+ border:
+ var(--form--border-width) solid
var(--form--border-color);
background: var(--global--color-white);
margin-left: 4px;
@@ -1638,6 +1712,7 @@ a.reset_variations {
}
&:checked + label {
+
&::before {
background: var(--global--color-border);
}
@@ -1676,7 +1751,9 @@ a.reset_variations {
}
.woocommerce-order-received {
+
.woocommerce-order {
+
p,
li {
font-family: $headings;
@@ -1712,6 +1789,7 @@ a.reset_variations {
}
.woocommerce-checkout-review-order {
+
ul {
margin: 2rem 0 3rem;
padding-left: 0;
@@ -1738,6 +1816,7 @@ a.reset_variations {
ul,
ol {
+
&:last-of-type {
margin-bottom: 0;
}
@@ -1755,6 +1834,7 @@ a.reset_variations {
}
p {
+
&:first-child {
margin-top: 0;
}
@@ -1769,7 +1849,8 @@ a.reset_variations {
}
input[type="radio"] {
- & + label::before {
+
+ + label::before {
background: #fff !important;
border: var(--form--border-width) solid #000 !important;
}
@@ -1798,7 +1879,7 @@ a.reset_variations {
input[type="radio"] {
display: none;
- & + label {
+ + label {
font-family: $headings;
&::before {
@@ -1806,7 +1887,8 @@ a.reset_variations {
display: inline-block;
width: 14px;
height: 14px;
- border: var(--form--border-width) solid
+ border:
+ var(--form--border-width) solid
var(--form--border-color);
background: var(--global--color-white);
margin-left: 4px;
@@ -1817,6 +1899,7 @@ a.reset_variations {
}
&:checked + label {
+
&::before {
background: var(--global--color-border);
}
@@ -1829,7 +1912,9 @@ a.reset_variations {
}
.wc_payment_methods {
+
.payment_box {
+
p {
font-family: $headings;
}
@@ -1846,12 +1931,14 @@ a.reset_variations {
}
tr:nth-child(2n) {
+
td {
background: transparent !important;
}
}
tr:nth-child(2n + 1) {
+
td {
background: var(--global--color-background);
filter: brightness(88%);
@@ -1889,6 +1976,7 @@ a.reset_variations {
margin-bottom: 5rem;
.woocommerce-privacy-policy-text {
+
p {
font-family: $headings;
font-size: 1.6rem;
@@ -1913,12 +2001,14 @@ a.reset_variations {
* Layout stuff
*/
.woocommerce {
+
section {
padding-top: 2rem;
padding-bottom: 0;
}
.content-area {
+
.site-main {
margin: 0 5vw;
}
@@ -1935,30 +2025,35 @@ a.reset_variations {
min-width: 12vw;
&.columns-2 {
+
li.product {
width: calc(100% / 2 - 16px) !important;
}
}
&.columns-3 {
+
li.product {
width: calc(100% / 3 - 16px) !important;
}
}
&.columns-4 {
+
li.product {
width: calc(100% / 4 - 16px) !important;
}
}
&.columns-5 {
+
li.product {
width: calc(100% / 5 - 16px) !important;
}
}
&.columns-6 {
+
li.product {
width: calc(100% / 6 - 16px) !important;
}
@@ -1979,6 +2074,7 @@ a.reset_variations {
}
li.product-category {
+
a {
text-align: left;
text-decoration: none;
@@ -2003,7 +2099,9 @@ a.reset_variations {
}
@media only screen and (max-width: 600px) {
+
.woocommerce {
+
.woocommerce-ordering {
float: left;
clear: both;
@@ -2018,9 +2116,12 @@ a.reset_variations {
}
@media only screen and (max-width: 667px) {
+
.woocommerce,
.woocommerce-page {
+
ul.products[class*="columns-"] {
+
li.product {
width: auto !important;
margin-left: auto;
@@ -2031,10 +2132,14 @@ a.reset_variations {
}
@media only screen and (min-width: 668px) and (max-width: 768px) {
+
.woocommerce,
.woocommerce-page {
+
.related.products {
+
ul.products[class*="columns-"] {
+
li.product {
padding: 0 2vw 3em 0 !important;
margin-bottom: 2em;
@@ -2058,14 +2163,19 @@ a.reset_variations {
}
@media only screen and (max-width: 768px) {
+
.woocommerce section.content-area {
padding-top: 0;
}
#main {
+
.woocommerce {
+
.woocommerce-cart-form {
+
.actions {
+
.coupon {
margin-bottom: 2rem;
@@ -2082,6 +2192,7 @@ a.reset_variations {
}
#shipping_method {
+
li {
display: flex;
justify-content: flex-end;
@@ -2091,17 +2202,21 @@ a.reset_variations {
.woocommerce,
.woocommerce-page {
+
.onsale {
right: -0.7rem !important;
}
.woocommerce-tabs {
+
ul {
+
li {
font-size: 1rem;
a {
- padding: calc(0.75 * var(--button--padding-vertical))
+ padding:
+ calc(0.75 * var(--button--padding-vertical))
calc(0.75 * var(--button--padding-horizontal));
}
}
@@ -2109,7 +2224,9 @@ a.reset_variations {
}
table.shop_table_responsive {
+
.button {
+
@include inversebuttoncolors();
}
@@ -2129,12 +2246,14 @@ a.reset_variations {
}
&:nth-child(2n) {
+
td {
background: transparent;
}
}
&:nth-child(2n + 1) {
+
td {
background: var(--global--color-background);
filter: brightness(88%);
@@ -2184,6 +2303,7 @@ a.reset_variations {
}
.related.products {
+
ul.products {
display: flex;
flex-direction: column;
@@ -2210,7 +2330,9 @@ a.reset_variations {
}
.woocommerce-cart-form {
+
table {
+
td.product-name {
padding-left: 0.5em;
}
@@ -2222,7 +2344,9 @@ a.reset_variations {
}
.woocommerce-checkout {
+
form {
+
.col2-set {
width: 100%;
float: none;
@@ -2247,15 +2371,19 @@ a.reset_variations {
}
table {
+
tbody {
+
td.product-total {
text-align: end;
}
}
tfoot {
+
.cart-subtotal,
.order-total {
+
td {
text-align: end;
}
@@ -2266,7 +2394,9 @@ a.reset_variations {
}
.logged-in.woocommerce-account {
+
#main {
+
.woocommerce {
flex-direction: column;
}
@@ -2277,6 +2407,7 @@ a.reset_variations {
}
table.account-orders-table {
+
.button {
padding-left: 0.5em;
padding-right: 0.5em;
@@ -2287,6 +2418,7 @@ a.reset_variations {
}
table.account-orders-table {
+
td {
padding-bottom: 1.5rem;
}
@@ -2295,13 +2427,17 @@ a.reset_variations {
}
@media only screen and (min-width: 768px) {
+
/**
* Tables
*/
.woocommerce,
.woocommerce-page {
+
table.shop_table {
+
tbody {
+
tr {
font-size: 0.88889em;
}
@@ -2317,6 +2453,7 @@ a.reset_variations {
* Home page
*/
.home #main {
+
[class*="woocommerce columns-"] {
word-break: break-word;
max-width: var(--responsive--aligndefault-width);
@@ -2330,6 +2467,7 @@ a.reset_variations {
*/
.woocommerce-pagination {
+
span.page-numbers,
a.page-numbers,
.next.page-numbers,
@@ -2342,6 +2480,7 @@ a.reset_variations {
* Account section
*/
.woocommerce-account {
+
.woocommerce-MyAccount-navigation {
float: none;
width: 20%;
@@ -2414,6 +2553,7 @@ a.reset_variations {
* Layout stuff
*/
.woocommerce {
+
.content-area {
margin: 0 auto;
padding: 0 6vw;
@@ -2425,7 +2565,9 @@ a.reset_variations {
}
.single-product {
+
.entry {
+
.entry-content,
.entry-summary {
max-width: none;
@@ -2450,7 +2592,9 @@ a.reset_variations {
}
.woocommerce-checkout {
+
#main {
+
.woocommerce {
max-width: 1600px;
padding: 0 6vw;
@@ -2461,14 +2605,13 @@ a.reset_variations {
}
@media only screen and (min-width: 1168px) {
+
.woocommerce {
+
.content-area {
max-width: 1600px;
margin: 0 auto;
padding: 0 6vw;
-
- .site-main {
- }
}
.onsale {
@@ -2487,7 +2630,9 @@ a.reset_variations {
}
.woocommerce-account {
+
table.account-orders-table {
+
th,
td,
td.woocommerce-orders-table__cell-order-actions {
@@ -2499,6 +2644,7 @@ a.reset_variations {
}
@media only screen and (max-width: 768px) {
+
.woocommerce-products-header {
border-bottom: none !important;
padding-bottom: 0;
@@ -2507,6 +2653,7 @@ a.reset_variations {
}
@media only screen and (min-width: 600px) {
+
.woocommerce-products-header {
padding-bottom: 1.5vw;
}
@@ -2518,18 +2665,22 @@ a.reset_variations {
}
@media only screen and (min-width: 690px) {
+
.woocommerce-products-header {
border-bottom: 3px solid var(--global--color-border);
}
}
.woocommerce-account {
+
.woocommerce-MyAccount-content {
+
p:first-of-type {
margin-bottom: 2rem;
}
#add_payment_method {
+
ul {
list-style-type: none !important;
}
@@ -2564,6 +2715,7 @@ a.reset_variations {
}
.woocommerce-PaymentBox {
+
p,
label {
font-size: 1.3rem;
@@ -2601,7 +2753,8 @@ a.reset_variations {
}
.alignwide .woocommerce {
- & > * {
+
+ > * {
max-width: var(--responsive--alignwide-width);
display: block;
margin: var(--global--spacing-vertical) auto;
@@ -2609,8 +2762,10 @@ a.reset_variations {
}
.woocommerce {
+
.return-to-shop,
.wc-proceed-to-checkout {
+
a.button {
margin-top: var(--global--spacing-vertical);
float: left;
@@ -2651,6 +2806,7 @@ a.reset_variations {
}
.product-thumbnail {
+
.attachment-woocommerce_thumbnail {
height: auto !important;
}
@@ -2663,6 +2819,7 @@ a.reset_variations {
}
.cart-collaterals {
+
h2 {
margin-bottom: var(--global--spacing-vertical);
}
@@ -2673,12 +2830,14 @@ a.reset_variations {
}
.shipping-calculator-form {
+
p {
margin-bottom: 0.5rem;
}
}
.cross-sells {
+
li {
list-style: none;
}
@@ -2708,12 +2867,14 @@ a.reset_variations {
}
tr:nth-child(2n) {
+
td {
background: transparent !important;
}
}
tr:nth-child(2n + 1) {
+
td {
background: var(--global--color-background);
filter: brightness(88%);
@@ -2756,6 +2917,7 @@ a.reset_variations {
}
@media only screen and (max-width: 768px) {
+
.woocommerce-message,
.woocommerce-error li,
.woocommerce-info {
@@ -2764,7 +2926,8 @@ a.reset_variations {
a.button {
margin-left: 10px;
min-width: 100px;
- padding: calc(0.7 * var(--button--padding-vertical))
+ padding:
+ calc(0.7 * var(--button--padding-vertical))
calc(0.5 * var(--button--padding-horizontal));
}
}
@@ -2812,13 +2975,17 @@ a.reset_variations {
* Coupon error notice
*/
.woocommerce-cart {
+
td.actions .coupon .coupon-error-notice {
+
@include coupon-error-notice-cart();
}
}
form.checkout_coupon {
+
.coupon-error-notice {
+
@include coupon-error-notice-checkout();
}
@@ -2831,7 +2998,9 @@ form.checkout_coupon {
* Checkout error message
*/
.checkout {
+
.checkout-inline-error-message {
+
@include checkout-inline-error-message();
}
}
diff --git a/plugins/woocommerce/client/legacy/css/twenty-twenty-three.scss b/plugins/woocommerce/client/legacy/css/twenty-twenty-three.scss
index 48ed301d374..fe95f7ddcbf 100644
--- a/plugins/woocommerce/client/legacy/css/twenty-twenty-three.scss
+++ b/plugins/woocommerce/client/legacy/css/twenty-twenty-three.scss
@@ -2,14 +2,13 @@
* Fonts
*/
@import "fonts";
-
@import "mixins";
@import "animation";
/**
* Forms
*/
- @import "forms";
+@import "forms";
/*
Layout fix.
@@ -23,12 +22,14 @@
margin-right: auto;
.woocommerce {
+
@include clearfix();
}
}
}
.theme-twentytwentythree {
+
.container-colors {
display: flex;
flex-direction: row;
@@ -38,7 +39,6 @@
width: 20%;
height: 100px;
text-align: center;
- vert-align: middle;
}
.base {
@@ -73,6 +73,7 @@
// Make quantity selector less wide.
.quantity {
+
input[type="number"] {
width: 3em;
}
@@ -94,6 +95,7 @@
}
// Checkout notice group styling.
.woocommerce-NoticeGroup-checkout {
+
ul.woocommerce-error[role="alert"] {
color: var(--wp--preset--color--contrast);
background: var(--wp--preset--color--primary);
@@ -101,6 +103,7 @@
&::before {
display: none;
}
+
li {
display: inherit;
margin-bottom: 1rem;
@@ -158,6 +161,7 @@
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
+
@media only screen and (max-width: 768px) {
justify-content: space-between;
}
@@ -242,6 +246,7 @@
// How price gets displayed
.entry-summary {
+
.woocommerce-Price-amount,
del,
.price {
@@ -253,6 +258,7 @@
position: relative;
.woocommerce-product-gallery__trigger {
+
@include woocommerce-product-gallery__trigger;
}
@@ -283,9 +289,11 @@
}
.woocommerce-product-rating {
+
.star-rating {
display: inline-block;
}
+
.woocommerce-review-link {
display: inline-block;
overflow: hidden;
@@ -335,6 +343,7 @@
}
table.group_table {
+
td {
padding-right: 0.5rem;
padding-bottom: 1rem;
@@ -355,6 +364,7 @@
// Reviews tab.
.woocommerce-Reviews {
+
ol.commentlist {
list-style: none;
padding-left: 0;
@@ -384,6 +394,7 @@
}
.comment-form-rating {
+
label {
display: inline-block;
padding-right: var(--wp--style--block-gap);
@@ -392,6 +403,7 @@
p.stars {
display: inline;
+
a::before {
color: var(--wp--preset--color--contrast);
}
@@ -399,6 +411,7 @@
}
.comment-form-comment {
+
label {
float: left;
padding-right: var(--wp--style--block-gap);
@@ -573,9 +586,11 @@ ul.wc-tabs {
// Attributes table styles.
table.woocommerce-product-attributes {
+
tbody {
- td, th {
+ td,
+ th {
padding: 0.2rem 0.2rem 0.2rem 0;
p {
@@ -592,6 +607,7 @@ ul.wc-tabs {
}
.woocommerce-page {
+
.woocommerce-cart-form {
// Make coupon code input less ginormous.
@@ -600,6 +616,7 @@ ul.wc-tabs {
}
.actions {
+
button.button {
height: initial;
}
@@ -620,6 +637,7 @@ ul.wc-tabs {
}
@media only screen and (max-width: 768px) {
+
td {
padding-left: 0;
}
@@ -675,7 +693,7 @@ ul.wc-tabs {
}
.woocommerce-Price-amount {
- font-weight: normal;
+ font-weight: 400;
}
}
@@ -684,7 +702,7 @@ ul.wc-tabs {
input[type="radio"].shipping_method {
display: none;
- & + label {
+ + label {
&::before {
content: "";
@@ -700,7 +718,7 @@ ul.wc-tabs {
}
}
- & ~ .payment_box {
+ ~ .payment_box {
padding-left: 3rem;
margin-top: 1rem;
}
@@ -708,14 +726,14 @@ ul.wc-tabs {
&:checked + label {
&::before {
- background: radial-gradient(circle at center, black 45%, white 0);
+ background: radial-gradient(circle at center, #000 45%, #fff 0);
}
}
}
// Style labels like "Remember me?" or "Ship to different address".
label.woocommerce-form__label-for-checkbox {
- font-weight: normal;
+ font-weight: 400;
cursor: pointer;
span {
@@ -749,7 +767,7 @@ ul.wc-tabs {
th,
td {
font-size: var(--wp--preset--font-size--small);
- font-weight: normal;
+ font-weight: 400;
}
th {
@@ -763,6 +781,7 @@ ul.wc-tabs {
}
td {
+
a.button,
button {
margin-bottom: 1rem;
@@ -770,6 +789,7 @@ ul.wc-tabs {
}
&.woocommerce-orders-table__cell-order-actions {
+
a.button {
display: block;
@@ -785,10 +805,13 @@ ul.wc-tabs {
table.shop_table,
table.shop_table_responsive {
+
tbody {
+
.product-name {
.variation {
+
dt {
font-style: italic;
margin-right: 0.25rem;
@@ -819,6 +842,7 @@ ul.wc-tabs {
width: calc(100% - 1.5rem);
.form-row {
+
button[name="apply_coupon"] {
margin-top: 0;
}
@@ -868,6 +892,7 @@ ul.wc-tabs {
.blockUI.blockOverlay {
position: relative;
+
@include loader();
}
@@ -883,6 +908,7 @@ ul.wc-tabs {
}
@media only screen and (max-width: 768px) {
+
.col2-set,
#customer_details {
width: 100%;
@@ -908,7 +934,7 @@ ul.wc-tabs {
th {
text-align: left;
- font-weight: normal;
+ font-weight: 400;
}
th,
@@ -926,7 +952,7 @@ ul.wc-tabs {
}
.product-quantity {
- font-weight: normal;
+ font-weight: 400;
}
.product-total,
@@ -935,8 +961,9 @@ ul.wc-tabs {
.tax-rate,
input[type="radio"].shipping_method:checked + label,
input[type="hidden"].shipping_method + label {
+
.woocommerce-Price-amount {
- font-weight: bold;
+ font-weight: 700;
}
}
}
@@ -958,11 +985,13 @@ ul.wc-tabs {
// Bottom section of the Thank you page---customer details: align, add border, make it look nice.
.woocommerce-customer-details {
+
address {
border: 1px solid var(--wp--preset--color--black);
font-style: inherit;
p[class^="woocommerce-customer-details--"] {
+
&:first-of-type {
margin-top: 2rem;
}
@@ -993,7 +1022,7 @@ ul.wc-tabs {
text-align: left;
border-top: 1px solid var(--wp--preset--color--black);
border-bottom: 1px solid var(--wp--preset--color--black);
- font-weight: normal;
+ font-weight: 400;
}
thead th {
@@ -1023,11 +1052,12 @@ ul.wc-tabs {
table.woocommerce-table--order-downloads,
table.woocommerce-MyAccount-orders {
+
thead tr {
border-top: 2px solid var(--wp--preset--color--contrast);
span {
- font-weight: bold;
+ font-weight: 700;
}
}
@@ -1038,7 +1068,9 @@ ul.wc-tabs {
}
.woocommerce-MyAccount-navigation li {
+
&.is-active a {
+
&::before {
content: "> ";
}
@@ -1066,9 +1098,9 @@ ul.wc-tabs {
// Store-wide notice
.theme-twentytwentythree .woocommerce-store-notice {
- color: black;
+ color: #000;
border-top: 2px solid var(--wp--preset--color--primary);
- background: lightgray;
+ background: #d3d3d3;
padding: 2rem;
position: fixed;
bottom: 0;
@@ -1090,68 +1122,74 @@ Notice messages (like 'Added to cart', 'Billing address needs to be filled in',
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
- background-color: rgba( 176, 176, 176, 0.6 );
- color: #222;
- border-top-color: var( --wp--preset--color--primary );
- border-top-style: solid;
- border-top-width: 2px;
- padding: 1rem 1.5rem 1rem 3.5rem;
- margin-bottom: 2rem;
- list-style: none;
- font-size: var( --wp--preset--font-size--small );
- position: relative;
-
- @include clearfix();
-
- &[role='alert']::before {
- background: #d5d5d5;
- color: black;
- border-radius: 5rem;
- font-size: 1rem;
- content: "\e028";
- display: inline-block;
- margin-right: 1rem;
- height: 1.5em;
- line-height: 1.5em;
- text-align: center;
- width: 1.5em;
- position: absolute;
- top: 1em;
- left: 1.5em;
- }
-
- a.button {
- margin-bottom: -0.5rem;
- margin-top: -0.5rem;
- border: none;
- padding: 0.5rem 1rem;
- }
+ background-color: rgba(176, 176, 176, 0.6);
+ color: #222;
+ border-top-color: var(--wp--preset--color--primary);
+ border-top-style: solid;
+ border-top-width: 2px;
+ padding: 1rem 1.5rem 1rem 3.5rem;
+ margin-bottom: 2rem;
+ list-style: none;
+ font-size: var(--wp--preset--font-size--small);
+ position: relative;
+
+ @include clearfix();
+
+ &[role="alert"]::before {
+ background: #d5d5d5;
+ color: #000;
+ border-radius: 5rem;
+ font-size: 1rem;
+ content: "\e028";
+ display: inline-block;
+ margin-right: 1rem;
+ height: 1.5em;
+ line-height: 1.5em;
+ text-align: center;
+ width: 1.5em;
+ position: absolute;
+ top: 1em;
+ left: 1.5em;
+ }
+
+ a.button {
+ margin-bottom: -0.5rem;
+ margin-top: -0.5rem;
+ border: none;
+ padding: 0.5rem 1rem;
+ }
}
.woocommerce-error {
- &[role='alert']::before {
- content: 'X';
- }
+
+ &[role="alert"]::before {
+ content: "X";
+ }
}
.woocommerce-message {
- &[role='alert']::before {
- content: '\2713';
- }
+
+ &[role="alert"]::before {
+ content: "\2713";
+ }
}
/**
* Coupon error notice
*/
- .woocommerce-cart {
+.woocommerce-cart {
+
td.actions .coupon .coupon-error-notice {
+
@include coupon-error-notice-cart();
margin-top: 0;
- }
+ }
}
form.checkout_coupon {
+
.coupon-error-notice {
+
@include coupon-error-notice-checkout();
}
@@ -1163,12 +1201,14 @@ form.checkout_coupon {
/**
* Checkout error message
*/
- .woocommerce-checkout {
+.woocommerce-checkout {
+
form .form-row.woocommerce-invalid input.input-text {
border-color: var(--wc-red);
}
.checkout-inline-error-message {
+
@include checkout-inline-error-message();
}
}
diff --git a/plugins/woocommerce/client/legacy/css/twenty-twenty-two.scss b/plugins/woocommerce/client/legacy/css/twenty-twenty-two.scss
index 7afd67191bf..1e15130253a 100644
--- a/plugins/woocommerce/client/legacy/css/twenty-twenty-two.scss
+++ b/plugins/woocommerce/client/legacy/css/twenty-twenty-two.scss
@@ -2,7 +2,6 @@
* Fonts
*/
@import "fonts";
-
@import "mixins";
@import "animation";
@import "variables";
@@ -12,7 +11,7 @@ $tt2-gray: #f7f7f7;
/**
* Forms
*/
- @import "forms";
+@import "forms";
/**
* Main layout.
@@ -29,7 +28,9 @@ $tt2-gray: #f7f7f7;
}
main {
+
.woocommerce {
+
@include clearfix();
max-width: 1000px;
}
@@ -40,6 +41,7 @@ $tt2-gray: #f7f7f7;
// Common
.woocommerce-products-header {
+
h1.page-title {
font-family: var(--wp--preset--font-family--source-serif-pro);
font-size: var(--wp--custom--typography--font-size--gigantic);
@@ -62,6 +64,7 @@ $tt2-gray: #f7f7f7;
}
.quantity {
+
input[type="number"] {
width: 3em;
}
@@ -81,10 +84,13 @@ $tt2-gray: #f7f7f7;
}
.woocommerce-NoticeGroup-checkout {
+
ul.woocommerce-error[role="alert"] {
+
&::before {
display: none;
}
+
li {
display: inherit;
margin-bottom: 1rem;
@@ -262,6 +268,7 @@ $tt2-gray: #f7f7f7;
position: relative;
.woocommerce-product-gallery__trigger {
+
@include woocommerce-product-gallery__trigger;
}
@@ -292,9 +299,11 @@ $tt2-gray: #f7f7f7;
}
.woocommerce-product-rating {
+
.star-rating {
display: inline-block;
}
+
.woocommerce-review-link {
display: inline-block;
overflow: hidden;
@@ -331,6 +340,7 @@ $tt2-gray: #f7f7f7;
}
table.group_table {
+
td {
padding-right: 0.5rem;
padding-bottom: 1rem;
@@ -345,6 +355,7 @@ $tt2-gray: #f7f7f7;
}
.woocommerce-Reviews {
+
ol.commentlist {
list-style: none;
padding-left: 0;
@@ -374,6 +385,7 @@ $tt2-gray: #f7f7f7;
}
.comment-form-rating {
+
label {
display: inline-block;
padding-right: var(--wp--style--block-gap);
@@ -382,6 +394,7 @@ $tt2-gray: #f7f7f7;
p.stars {
display: inline;
+
a::before {
color: var(--wp--preset--color--secondary);
}
@@ -389,6 +402,7 @@ $tt2-gray: #f7f7f7;
}
.comment-form-comment {
+
label {
float: left;
padding-right: var(--wp--style--block-gap);
@@ -512,6 +526,7 @@ $tt2-gray: #f7f7f7;
}
.return-to-shop {
+
a.button {
background-color: #fff;
color: var(--wp--preset--color--primary);
@@ -576,9 +591,11 @@ ul.wc-tabs {
// Attributes table styles.
table.woocommerce-product-attributes {
+
tbody {
- td, th {
+ td,
+ th {
padding: 0.2rem 0.2rem 0.2rem 0;
p {
@@ -622,7 +639,7 @@ ul.wc-tabs {
input[type="radio"].shipping_method {
display: none;
- & + label {
+ + label {
&::before {
content: "";
@@ -638,7 +655,7 @@ ul.wc-tabs {
}
}
- & ~ .payment_box {
+ ~ .payment_box {
padding-left: 3rem;
margin-top: 1rem;
}
@@ -646,13 +663,13 @@ ul.wc-tabs {
&:checked + label {
&::before {
- background: radial-gradient(circle at center, black 45%, white 0);
+ background: radial-gradient(circle at center, #000 45%, #fff 0);
}
}
}
label.woocommerce-form__label-for-checkbox {
- font-weight: normal;
+ font-weight: 400;
cursor: pointer;
span {
@@ -685,7 +702,7 @@ ul.wc-tabs {
th,
td {
font-size: var(--wp--preset--font-size--small);
- font-weight: normal;
+ font-weight: 400;
}
th {
@@ -699,6 +716,7 @@ ul.wc-tabs {
}
td {
+
a.button,
button {
margin-bottom: 1rem;
@@ -714,6 +732,7 @@ ul.wc-tabs {
}
&.woocommerce-orders-table__cell-order-actions {
+
a.button {
display: block;
}
@@ -724,8 +743,11 @@ ul.wc-tabs {
table.shop_table,
table.shop_table_responsive {
+
tbody {
+
.product-name {
+
a:not(:hover) {
text-decoration: none;
}
@@ -736,6 +758,7 @@ ul.wc-tabs {
}
.variation {
+
dt {
font-style: italic;
margin-right: 0.25rem;
@@ -778,6 +801,7 @@ ul.wc-tabs {
}
@media only screen and (max-width: 768px) {
+
td {
padding-left: 0;
}
@@ -840,7 +864,7 @@ ul.wc-tabs {
}
.woocommerce-Price-amount {
- font-weight: normal;
+ font-weight: 400;
}
}
@@ -861,6 +885,7 @@ ul.wc-tabs {
.blockUI.blockOverlay {
position: relative;
+
@include loader();
}
@@ -876,6 +901,7 @@ ul.wc-tabs {
}
@media only screen and (max-width: 768px) {
+
.col2-set,
#customer_details {
width: 100%;
@@ -901,7 +927,7 @@ ul.wc-tabs {
th {
text-align: left;
- font-weight: normal;
+ font-weight: 400;
}
th,
@@ -919,7 +945,7 @@ ul.wc-tabs {
}
.product-quantity {
- font-weight: normal;
+ font-weight: 400;
}
.product-total,
@@ -928,8 +954,9 @@ ul.wc-tabs {
.tax-rate,
input[type="radio"].shipping_method:checked + label,
input[type="hidden"].shipping_method + label {
+
.woocommerce-Price-amount {
- font-weight: bold;
+ font-weight: 700;
}
}
}
@@ -948,6 +975,7 @@ ul.wc-tabs {
width: calc(100% - 1.5rem);
.form-row {
+
button[name="apply_coupon"] {
margin-top: 0;
}
@@ -970,7 +998,7 @@ ul.wc-tabs {
}
}
- // PayPal logo in payment methods list on classic checkout page, more specific selector for precedence over general theme styles.
+ // PayPal logo in payment methods list on classic checkout page, more specific selector for precedence over general theme styles.
ul.wc_payment_methods li.payment_method_paypal img {
max-height: 24px;
vertical-align: middle;
@@ -993,11 +1021,13 @@ ul.wc-tabs {
}
.woocommerce-customer-details {
+
address {
border: 1px solid var(--wp--preset--color--black);
font-style: inherit;
p[class^="woocommerce-customer-details--"] {
+
&:first-of-type {
margin-top: 2rem;
}
@@ -1027,7 +1057,7 @@ ul.wc-tabs {
text-align: left;
border-top: 1px solid var(--wp--preset--color--black);
border-bottom: 1px solid var(--wp--preset--color--black);
- font-weight: normal;
+ font-weight: 400;
}
thead th {
@@ -1069,20 +1099,25 @@ ul.wc-tabs {
}
.wp-block-search {
+
.wp-block-search__label {
- font-weight: normal;
+ font-weight: 400;
}
+
.wp-block-search__input {
padding: 0.9rem 1.1rem;
border: 1px solid var(--wp--preset--color--black);
}
+
.wp-block-search__button {
padding: 1rem 1.2rem;
}
}
.wc-block-product-search {
+
form {
+
.wc-block-product-search__fields {
display: flex;
flex: auto;
@@ -1178,6 +1213,7 @@ ul.wc-tabs {
}
.woocommerce-message {
+
&[role="alert"]::before {
content: "\2713";
}
@@ -1186,14 +1222,18 @@ ul.wc-tabs {
/**
* Coupon error notice
*/
- .woocommerce-cart {
+.woocommerce-cart {
+
td.actions .coupon .coupon-error-notice {
+
@include coupon-error-notice-cart();
- }
+ }
}
form.checkout_coupon {
+
.coupon-error-notice {
+
@include coupon-error-notice-checkout();
}
@@ -1205,12 +1245,14 @@ form.checkout_coupon {
/**
* Checkout error message
*/
- .woocommerce-checkout {
+.woocommerce-checkout {
+
form .form-row.woocommerce-invalid input.input-text {
border-color: var(--wc-red);
}
.checkout-inline-error-message {
+
@include checkout-inline-error-message();
}
}
diff --git a/plugins/woocommerce/client/legacy/css/twenty-twenty.scss b/plugins/woocommerce/client/legacy/css/twenty-twenty.scss
index ad6cf7c20f0..183ea8aaa55 100644
--- a/plugins/woocommerce/client/legacy/css/twenty-twenty.scss
+++ b/plugins/woocommerce/client/legacy/css/twenty-twenty.scss
@@ -41,6 +41,7 @@ a.button {
}
.select2-container {
+
.select2-selection,
.select2-dropdown {
font-size: 1.6rem;
@@ -58,8 +59,11 @@ body {
}
.woocommerce {
+
form .form-row {
+
.woocommerce-input-wrapper {
+
select,
.input-text {
font-size: 1.6rem;
@@ -70,6 +74,7 @@ body {
form.woocommerce-form-login,
form.woocommerce-form-register {
+
p,
label {
font-family: $headings;
@@ -86,7 +91,9 @@ body {
}
.woocommerce-view-order {
+
.woocommerce-MyAccount-content {
+
table {
border: 0;
@@ -95,6 +102,7 @@ body {
}
tfoot {
+
tr:last-of-type {
border-top: 1px solid #ddd;
@@ -187,6 +195,7 @@ body {
}
#site-content {
+
.post-inner {
padding-top: 0;
}
@@ -197,6 +206,7 @@ body {
}
.cross-sells {
+
.woocommerce-loop-product__title {
font-family: $headings;
}
@@ -218,7 +228,9 @@ body {
*/
.woocommerce,
.woocommerce-page {
+
table.shop_table {
+
td,
th {
word-break: normal;
@@ -388,6 +400,7 @@ dl.variation,
* Single product
*/
.single-product {
+
div.product {
position: relative;
@@ -437,6 +450,7 @@ dl.variation,
}
form.cart {
+
.quantity {
float: left;
margin-right: 0.5rem;
@@ -448,6 +462,7 @@ dl.variation,
}
.woocommerce-variation-add-to-cart {
+
.button {
padding-top: 1.55rem;
padding-bottom: 1.59rem;
@@ -461,6 +476,7 @@ dl.variation,
.woocommerce-Tabs-panel--additional_information,
.woocommerce-Tabs-panel--reviews {
+
table {
border: 1px solid #ddd;
@@ -481,6 +497,7 @@ dl.variation,
}
.woocommerce-product-attributes-item__value {
+
p {
margin-bottom: 0;
}
@@ -488,6 +505,7 @@ dl.variation,
}
table.variations {
+
label {
margin: 0;
padding: 6px 0;
@@ -537,6 +555,7 @@ a.reset_variations {
}
.flex-control-thumbs {
+
li {
list-style: none;
cursor: pointer;
@@ -560,6 +579,7 @@ a.reset_variations {
}
.woocommerce-product-gallery--columns-3 {
+
.flex-control-thumbs li {
width: 33.3333%;
}
@@ -570,6 +590,7 @@ a.reset_variations {
}
.woocommerce-product-gallery--columns-4 {
+
ol {
margin-left: 0;
margin-bottom: 0;
@@ -590,6 +611,7 @@ a.reset_variations {
}
.woocommerce-product-gallery--columns-5 {
+
.flex-control-thumbs li {
width: 20%;
}
@@ -600,6 +622,7 @@ a.reset_variations {
}
.woocommerce-product-gallery__trigger {
+
@include woocommerce-product-gallery__trigger;
}
@@ -608,6 +631,7 @@ a.reset_variations {
/* reset description tab width to full width */
#tab-description {
+
h2,
p {
max-width: 100vw;
@@ -617,6 +641,7 @@ a.reset_variations {
/* reset additional info tab width to full width */
#tab-additional_information {
+
.woocommerce-product-attributes {
max-width: 100vw;
width: 100%;
@@ -624,6 +649,7 @@ a.reset_variations {
}
#tab-reviews {
+
/* reset reviews tab width to full width */
.woocommerce-Reviews {
max-width: 100vw;
@@ -650,6 +676,7 @@ a.reset_variations {
}
&.active {
+
a {
color: $highlights-color;
box-shadow: 0 2px 0 $highlights-color;
@@ -659,12 +686,14 @@ a.reset_variations {
}
.panel {
+
> * {
margin-top: 0 !important;
}
h1,
h2 {
+
&::before {
content: none;
}
@@ -688,6 +717,7 @@ a.reset_variations {
}
#reviews {
+
ol.commentlist {
padding: 0;
margin: 0;
@@ -710,6 +740,7 @@ a.reset_variations {
}
.comment-form-rating {
+
label {
max-width: 58rem;
margin: 0 auto;
@@ -743,6 +774,7 @@ a.reset_variations {
}
&:hover {
+
~ a::before {
content: "\e021";
}
@@ -750,7 +782,9 @@ a.reset_variations {
}
&:hover {
+
a {
+
&::before {
content: "\e020";
}
@@ -758,7 +792,9 @@ a.reset_variations {
}
&.selected {
+
a.active {
+
&::before {
content: "\e020";
}
@@ -769,6 +805,7 @@ a.reset_variations {
}
a:not(.active) {
+
&::before {
content: "\e020";
}
@@ -810,6 +847,7 @@ a.reset_variations {
* Widgets
*/
.widget.woocommerce {
+
ul {
padding-left: 0;
@@ -850,7 +888,9 @@ a.reset_variations {
}
.widget_shopping_cart {
+
.buttons {
+
a {
display: inline-block;
margin: 0 0.5rem 0 0;
@@ -863,7 +903,9 @@ a.reset_variations {
}
.widget_layered_nav {
+
.chosen {
+
&::before {
content: "×";
display: inline-block;
@@ -880,6 +922,7 @@ a.reset_variations {
}
.widget_price_filter {
+
.price_slider {
margin-bottom: 1rem;
}
@@ -950,6 +993,7 @@ a.reset_variations {
}
.widget_rating_filter {
+
li {
text-align: right;
@@ -961,6 +1005,7 @@ a.reset_variations {
}
.widget_product_search {
+
form {
position: relative;
}
@@ -982,7 +1027,9 @@ a.reset_variations {
* Account section
*/
.woocommerce-account {
+
#site-content {
+
.post-inner {
padding-top: 0;
}
@@ -1026,6 +1073,7 @@ a.reset_variations {
}
&.is-active {
+
a {
text-decoration: underline;
color: $highlights-color;
@@ -1035,12 +1083,14 @@ a.reset_variations {
}
.woocommerce-MyAccount-content {
+
p {
font-family: $headings;
font-size: 2rem;
}
form {
+
h3 {
margin-top: 0;
}
@@ -1072,14 +1122,18 @@ a.reset_variations {
}
table.account-orders-table:not(.has-background) {
+
tbody {
+
tr:nth-child(2n) {
+
td {
background: #eee;
}
}
tr:nth-child(2n + 1) {
+
td {
background: #fff;
}
@@ -1088,6 +1142,7 @@ a.reset_variations {
}
.woocommerce-EditAccountForm {
+
input {
border: 1px solid #ddd;
}
@@ -1107,7 +1162,9 @@ a.reset_variations {
}
.logged-in.woocommerce-account {
+
#site-content {
+
.woocommerce {
display: flex;
flex-direction: row;
@@ -1119,6 +1176,7 @@ a.reset_variations {
* Cart
*/
.woocommerce-cart-form {
+
img {
max-width: 120px;
height: auto;
@@ -1146,6 +1204,7 @@ a.reset_variations {
}
.actions {
+
.input-text {
width: 200px !important;
float: left;
@@ -1168,6 +1227,7 @@ a.reset_variations {
}
.quantity {
+
input {
width: 8rem;
border: 1px solid #eee;
@@ -1193,6 +1253,7 @@ a.reset_variations {
}
tbody {
+
tr {
border-top: 1px solid #eee;
}
@@ -1204,6 +1265,7 @@ a.reset_variations {
}
.actions {
+
button {
padding-top: 1.55rem;
padding-bottom: 1.59rem;
@@ -1213,6 +1275,7 @@ a.reset_variations {
}
.cart_totals {
+
th,
td {
vertical-align: top;
@@ -1250,7 +1313,8 @@ a.reset_variations {
input[type="radio"].shipping_method {
display: none;
- & + label {
+ + label {
+
&::before {
content: "";
display: inline-block;
@@ -1267,6 +1331,7 @@ a.reset_variations {
}
&:checked + label {
+
&::before {
background: #555;
}
@@ -1323,11 +1388,13 @@ a.reset_variations {
}
.woocommerce-cart {
+
.post-inner {
padding-top: 0;
}
#site-content {
+
.entry-header {
padding: 3vw 0 1.5vw;
}
@@ -1403,6 +1470,7 @@ a.reset_variations {
}
.woocommerce-no-js {
+
form.woocommerce-form-login,
form.woocommerce-form-coupon {
display: block !important;
@@ -1441,6 +1509,7 @@ a.reset_variations {
}
.woocommerce-checkout {
+
ul.woocommerce-error {
flex-direction: column;
align-items: flex-start;
@@ -1456,6 +1525,7 @@ a.reset_variations {
}
.woocommerce-billing-fields {
+
h3 {
margin-top: 4rem;
}
@@ -1473,6 +1543,7 @@ a.reset_variations {
}
form {
+
.col2-set {
width: 50%;
float: left;
@@ -1540,6 +1611,7 @@ a.reset_variations {
}
.form-row.woocommerce-invalid {
+
input.input-text {
border: 2px solid $highlights-color;
}
@@ -1547,6 +1619,7 @@ a.reset_variations {
}
.woocommerce-input-wrapper {
+
.description {
background: #4169e1;
color: #fff;
@@ -1581,6 +1654,7 @@ a.reset_variations {
}
.woocommerce-form-login {
+
p.form-row.form-row-first,
p.form-row.form-row-last {
float: none;
@@ -1601,10 +1675,12 @@ a.reset_variations {
}
.woocommerce-checkout-review-order-table {
+
input[type="radio"].shipping_method {
display: none;
- & + label {
+ + label {
+
&::before {
content: "";
display: inline-block;
@@ -1621,6 +1697,7 @@ a.reset_variations {
}
&:checked + label {
+
&::before {
background: #555;
}
@@ -1651,7 +1728,9 @@ a.reset_variations {
}
.woocommerce-order-received {
+
.woocommerce-order {
+
p,
li {
font-family: $headings;
@@ -1687,6 +1766,7 @@ a.reset_variations {
}
.woocommerce-checkout-review-order {
+
ul {
margin: 2rem 0 3rem;
padding-left: 0;
@@ -1706,6 +1786,7 @@ a.reset_variations {
ul,
ol {
+
&:last-of-type {
margin-bottom: 0;
}
@@ -1723,6 +1804,7 @@ a.reset_variations {
}
p {
+
&:first-child {
margin-top: 0;
}
@@ -1751,7 +1833,7 @@ a.reset_variations {
input.input-radio[name="payment_method"] {
display: none;
- & + label {
+ + label {
font-family: $headings;
&::before {
@@ -1770,6 +1852,7 @@ a.reset_variations {
}
&:checked + label {
+
&::before {
background: #555;
}
@@ -1778,7 +1861,9 @@ a.reset_variations {
}
.wc_payment_methods {
+
.payment_box {
+
p {
font-family: $headings;
font-size: 1.6rem;
@@ -1790,6 +1875,7 @@ a.reset_variations {
margin-bottom: 5rem;
.woocommerce-privacy-policy-text {
+
p {
font-family: $headings;
font-size: 1.6rem;
@@ -1809,12 +1895,14 @@ a.reset_variations {
* Layout stuff
*/
.woocommerce {
+
section {
padding-top: 2rem;
padding-bottom: 0;
}
.content-area {
+
.site-main {
margin: 0 5vw;
}
@@ -1836,6 +1924,7 @@ a.reset_variations {
}
li.product-category {
+
a {
text-align: center;
@@ -1849,7 +1938,9 @@ a.reset_variations {
}
@media only screen and (max-width: 600px) {
+
.woocommerce {
+
.woocommerce-ordering {
float: left;
clear: both;
@@ -1858,9 +1949,12 @@ a.reset_variations {
}
@media only screen and (max-width: 667px) {
+
.woocommerce,
.woocommerce-page {
+
ul.products[class*="columns-"] {
+
li.product {
width: 100%;
}
@@ -1869,9 +1963,12 @@ a.reset_variations {
}
@media only screen and (min-width: 668px) and (max-width: 768px) {
+
.woocommerce,
.woocommerce-page {
+
ul.products[class*="columns-"] {
+
li.product {
width: 50%;
}
@@ -1888,10 +1985,15 @@ a.reset_variations {
}
@media only screen and (max-width: 768px) {
+
#site-content {
+
.woocommerce {
+
.woocommerce-cart-form {
+
.actions {
+
.coupon {
margin-bottom: 2rem;
@@ -1908,6 +2010,7 @@ a.reset_variations {
}
#shipping_method {
+
li {
display: flex;
justify-content: flex-end;
@@ -1917,7 +2020,9 @@ a.reset_variations {
.woocommerce,
.woocommerce-page {
+
table.shop_table_responsive {
+
tr {
margin: 0 0 1.5rem;
@@ -1930,6 +2035,7 @@ a.reset_variations {
}
&:nth-child(2n) {
+
td {
background: #fff;
}
@@ -1972,6 +2078,7 @@ a.reset_variations {
}
.related.products {
+
ul.products {
display: flex;
flex-direction: column;
@@ -1998,7 +2105,9 @@ a.reset_variations {
}
.woocommerce-cart-form {
+
table {
+
td.product-name {
padding-left: 0.5em;
}
@@ -2010,7 +2119,9 @@ a.reset_variations {
}
.woocommerce-checkout {
+
form {
+
.col2-set {
width: 100%;
float: none;
@@ -2035,15 +2146,19 @@ a.reset_variations {
}
table {
+
tbody {
+
td.product-total {
text-align: end;
}
}
tfoot {
+
.cart-subtotal,
.order-total {
+
td {
text-align: end;
}
@@ -2054,7 +2169,9 @@ a.reset_variations {
}
.logged-in.woocommerce-account {
+
#site-content {
+
.woocommerce {
flex-direction: column;
}
@@ -2065,6 +2182,7 @@ a.reset_variations {
}
table.account-orders-table {
+
.button {
padding-left: 0.5em;
padding-right: 0.5em;
@@ -2075,6 +2193,7 @@ a.reset_variations {
}
table.account-orders-table {
+
td {
padding-bottom: 1.5rem;
}
@@ -2083,13 +2202,17 @@ a.reset_variations {
}
@media only screen and (min-width: 768px) {
+
/**
* Tables
*/
.woocommerce,
.woocommerce-page {
+
table.shop_table {
+
tbody {
+
tr {
font-size: 0.88889em;
}
@@ -2111,6 +2234,7 @@ a.reset_variations {
}
.woocommerce-pagination {
+
span.page-numbers,
a.page-numbers,
.next.page-numbers,
@@ -2123,6 +2247,7 @@ a.reset_variations {
* Account section
*/
.woocommerce-account {
+
.woocommerce-MyAccount-navigation {
float: none;
width: 20%;
@@ -2184,6 +2309,7 @@ a.reset_variations {
* Layout stuff
*/
.woocommerce {
+
.content-area {
margin: 0 auto;
padding: 2vw 6vw;
@@ -2195,7 +2321,9 @@ a.reset_variations {
}
.single-product {
+
.entry {
+
.entry-content,
.entry-summary {
max-width: none;
@@ -2220,7 +2348,9 @@ a.reset_variations {
}
.woocommerce-checkout {
+
#site-content {
+
.woocommerce {
max-width: 1600px;
padding: 0 6vw;
@@ -2231,7 +2361,9 @@ a.reset_variations {
}
@media only screen and (min-width: 1168px) {
+
.woocommerce {
+
.content-area {
max-width: 1600px;
padding: 4vw 6vw;
@@ -2255,7 +2387,9 @@ a.reset_variations {
}
.woocommerce-account {
+
table.account-orders-table {
+
th,
td,
td.woocommerce-orders-table__cell-order-actions {
@@ -2312,12 +2446,14 @@ a.reset_variations {
}
.wc-block-components-notice-banner.is-error {
+
li {
margin: 0.5rem 0 0;
}
}
#site-content {
+
.woocommerce-error,
.woocommerce-info {
font-family: $headings;
@@ -2354,13 +2490,17 @@ a.reset_variations {
* Coupon error notice
*/
.woocommerce-cart {
+
td.actions .coupon .coupon-error-notice {
+
@include coupon-error-notice-cart();
}
}
form.checkout_coupon {
+
.coupon-error-notice {
+
@include coupon-error-notice-checkout();
}
@@ -2373,7 +2513,9 @@ form.checkout_coupon {
* Checkout error message
*/
.checkout {
+
.checkout-inline-error-message {
+
@include checkout-inline-error-message();
}
}
diff --git a/plugins/woocommerce/client/legacy/css/variation-gallery-admin.scss b/plugins/woocommerce/client/legacy/css/variation-gallery-admin.scss
index 28f686f6e82..f98232ca82b 100644
--- a/plugins/woocommerce/client/legacy/css/variation-gallery-admin.scss
+++ b/plugins/woocommerce/client/legacy/css/variation-gallery-admin.scss
@@ -26,7 +26,8 @@
}
#variable_product_options
- .woocommerce_variation:has(.wc-variation-gallery-field) {
+.woocommerce_variation:has(.wc-variation-gallery-field) {
+
/* === Design tokens ============================================== */
/* Colors (WP admin palette). */
@@ -69,7 +70,8 @@
/* Elevation. */
--wc-vg-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12);
--wc-vg-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.2);
- --wc-vg-elevation-3-hover: 0 1px 4px rgba(0, 0, 0, 0.3),
+ --wc-vg-elevation-3-hover:
+ 0 1px 4px rgba(0, 0, 0, 0.3),
0 0 0 2px var(--wc-vg-focus-ring);
/* Typography. */
@@ -82,6 +84,7 @@
--wc-vg-transition-fast: 120ms ease-out;
/* === Layout overrides for the gallery's flex row ================= */
+
/* Scoped to the specific .form-flex-box that contains the gallery
* field; other variation rows (pricing, weight, dimensions, etc.)
* use the same .form-flex-box class and must keep their own layout. */
@@ -181,11 +184,13 @@
}
.wc-variation-gallery-field__hero-img {
+
@include fill-parent;
@include cover-image;
}
.wc-variation-gallery-field__hero-broken {
+
@include fill-parent;
@include center-content;
color: var(--wc-vg-text-placeholder);
@@ -247,6 +252,7 @@
}
.wc-variation-gallery-field__empty-cta {
+
@include fill-parent;
display: inline-flex;
flex-direction: column;
@@ -259,7 +265,8 @@
color: var(--wc-vg-text-muted);
cursor: pointer;
font-size: var(--wc-vg-font-size-sm);
- transition: background-color var(--wc-vg-transition-fast),
+ transition:
+ background-color var(--wc-vg-transition-fast),
border-color var(--wc-vg-transition-fast);
&:hover,
@@ -302,7 +309,8 @@
position: relative;
border: 2px solid transparent;
cursor: grab;
- transition: border-color var(--wc-vg-transition-fast),
+ transition:
+ border-color var(--wc-vg-transition-fast),
box-shadow var(--wc-vg-transition-fast);
&.is-active {
@@ -324,6 +332,7 @@
}
&.is-broken {
+
@include center-content;
background: var(--wc-vg-surface);
color: var(--wc-vg-text-placeholder);
@@ -350,6 +359,7 @@
}
img {
+
@include cover-image;
}
}
diff --git a/plugins/woocommerce/client/legacy/css/wc-setup.scss b/plugins/woocommerce/client/legacy/css/wc-setup.scss
index 56aab18ea72..1087f0f0577 100644
--- a/plugins/woocommerce/client/legacy/css/wc-setup.scss
+++ b/plugins/woocommerce/client/legacy/css/wc-setup.scss
@@ -1,4 +1,3 @@
-/* stylelint-disable no-descending-specificity */
@import "variables";
@@ -184,7 +183,7 @@ body {
&::before {
content: "\f333";
- font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+ font-family: dashicons;
}
}
@@ -206,7 +205,7 @@ body {
&::before {
content: "\f502";
- font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+ font-family: dashicons;
position: absolute;
left: 0;
top: 0;
@@ -226,7 +225,7 @@ body {
&::before {
content: "\f182";
- font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+ font-family: dashicons;
position: absolute;
left: 0;
top: 0;
@@ -375,7 +374,7 @@ body {
li a::before {
color: #82878c;
- font: 400 20px/1 dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+ font: 400 20px/1 dashicons;
speak: never;
display: inline-block;
padding: 0 10px 0 0;
@@ -874,7 +873,7 @@ body {
.wc-wizard-service-enable::before {
content: "\f343"; // up chevron
- font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+ font-family: dashicons;
color: #666;
font-size: 25px;
margin-top: -7px;
@@ -1131,7 +1130,7 @@ h3.jetpack-reasons {
line-height: 1.5;
margin: 5px 0;
- & > * {
+ > * {
display: block;
}
@@ -1500,19 +1499,19 @@ p.jetpack-terms {
background-color: #f4a224;
max-height: 3em;
max-width: 3em;
- padding: calc( ( 3.5em - 3em ) / 2 );
+ padding: calc(( 3.5em - 3em ) / 2);
}
&.recommended-item-icon-automated_taxes {
background-color: #d0011b;
max-height: 1.75em;
- padding: calc( ( 3.5em - 1.75em ) / 2 );
+ padding: calc(( 3.5em - 1.75em ) / 2);
}
&.recommended-item-icon-mailchimp {
background-color: #ffe01b;
height: 2em;
- padding: calc( ( 3.5em - 2em ) / 2 );
+ padding: calc(( 3.5em - 2em ) / 2);
}
&.recommended-item-icon-woocommerce_services {
@@ -1627,4 +1626,3 @@ p.jetpack-terms {
}
}
}
-/* stylelint-enable */
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss b/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss
index 13ed7d2bc43..dea14f3d50d 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss
@@ -11,6 +11,7 @@
.woocommerce-cart,
.woocommerce-account,
.woocommerce-checkout {
+
.wp-block-post-title,
main .woocommerce {
// Allow Cart/Checkout/Account pages more space to breathe.
@@ -26,6 +27,7 @@
* General
*/
.woocommerce {
+
button.button,
a.button {
@@ -62,6 +64,7 @@
* Products
*/
.woocommerce {
+
/**
* Shop products list
*/
@@ -88,6 +91,7 @@
}
.woocommerce-tabs {
+
ul.tabs li.active {
&::before {
@@ -101,6 +105,7 @@
}
form.cart {
+
div.quantity {
float: none; // Remove float set by WC core.
vertical-align: middle;
@@ -122,7 +127,9 @@
}
.variations {
- td, th {
+
+ td,
+ th {
word-break: normal;
}
}
@@ -135,6 +142,7 @@
}
.woocommerce-Reviews {
+
#comments {
// Add spacing between the review comments and the review form.
margin-bottom: var(--wp--style--block-gap);
@@ -152,8 +160,12 @@
}
}
- .price, .woocommerce-grouped-product-list-item__price, .wc-block-components-product-price {
- ins, bdi {
+ .price,
+ .woocommerce-grouped-product-list-item__price,
+ .wc-block-components-product-price {
+
+ ins,
+ bdi {
// Ensure discounted prices aren't underlined.
// For details see https://github.com/woocommerce/woocommerce-blocks/pull/5684.
text-decoration: none;
@@ -173,6 +185,7 @@
display: block;
tr {
+
th,
td {
padding-bottom: var(--wp--style--block-gap);
@@ -235,7 +248,9 @@ a.added_to_cart {
}
.woocommerce {
+
form {
+
.form-row {
margin-bottom: 1em;
}
@@ -251,6 +266,7 @@ a.added_to_cart {
* Cart / Checkout
*/
.woocommerce-page {
+
/**
* Tables
*/
@@ -279,6 +295,7 @@ a.added_to_cart {
* Cart specific
*/
.woocommerce-cart-form {
+
.product-remove {
// Decrease width of the product remove column.
width: 1em;
@@ -309,6 +326,7 @@ a.added_to_cart {
}
@media only screen and ( max-width: 768px ) {
+
.product-remove {
width: auto;
}
@@ -381,7 +399,9 @@ a.added_to_cart {
* My account
*/
.woocommerce-account {
+
.woocommerce-MyAccount-navigation {
+
ul {
// Ensure top left alignment of the navigation.
margin: 0 0 2em;
@@ -402,6 +422,7 @@ a.added_to_cart {
}
&.is-active {
+
a {
text-decoration: underline;
}
@@ -418,6 +439,7 @@ a.added_to_cart {
}
.woocommerce-MyAccount-content {
+
> p:first-of-type,
p.form-row-first,
p.form-row-last {
@@ -444,6 +466,7 @@ a.added_to_cart {
}
.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
+
&::before {
display: none;
}
@@ -462,6 +485,7 @@ a.added_to_cart {
.woocommerce-page {
// For block themes we increase the padding of the input fields across classic checkout and my account pages.
form .form-row {
+
select,
textarea.input-text,
input.input-text {
@@ -480,9 +504,11 @@ a.added_to_cart {
// Ensure dropdowns are visually consistent with other form fields.
.select2-container {
+
.select2-selection--single .select2-selection__rendered {
padding: 0.9rem 1.1rem;
}
+
.select2-selection--single .select2-selection__arrow {
right: 1.1em;
}
@@ -490,15 +516,18 @@ a.added_to_cart {
}
.select2-container {
+
.select2-search--dropdown {
padding: 0 1.1rem 0.5rem;
}
+
.select2-search--dropdown .select2-search__field {
padding: 0.5rem;
font-size: var(--wp--preset--font-size--small);
}
+
.select2-results__option {
- padding: 0.5rem 1.1rem;
+ padding: 0.5rem 1.1rem;
}
}
}
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce-layout.scss b/plugins/woocommerce/client/legacy/css/woocommerce-layout.scss
index 7d6cbadf93a..e719757a8b1 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce-layout.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce-layout.scss
@@ -428,22 +428,22 @@
right: 0.7em;
text-decoration: none;
top: 50%;
- transform: translateY( -50% );
+ transform: translateY(-50%);
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
-webkit-font-smoothing: inherit;
}
-
+
.show-password-input::before {
background-repeat: no-repeat;
background-size: cover;
background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>');
- content: '';
+ content: "";
display: block;
height: 22px;
width: 22px;
}
-
+
.show-password-input.display-password::before {
background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
}
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss b/plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss
index 4ca5127e5f3..6d9d29c7f5f 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce-smallscreen.scss
@@ -6,8 +6,8 @@
/**
* Imports
*/
-@import 'mixins';
-@import 'variables';
+@import "mixins";
+@import "variables";
/**
* Style begins
@@ -16,12 +16,15 @@
.woocommerce-page {
table.shop_table_responsive {
+
thead {
display: none;
}
tbody {
+
tr:first-child {
+
td:first-child {
border-top: 0;
}
@@ -44,20 +47,22 @@
}
&::before {
- content: attr(data-title) ': ';
+ content: attr(data-title) ": ";
font-weight: 700;
float: left;
}
&.product-remove,
&.actions {
+
&::before {
display: none;
}
}
}
- &:nth-child( 2n ) {
+ &:nth-child(2n) {
+
td {
background-color: rgba(0, 0, 0, 0.025);
}
@@ -66,8 +71,11 @@
}
table.my_account_orders {
+
tr {
+
td {
+
&.order-actions {
text-align: left;
@@ -88,6 +96,7 @@
* Product attributes table
*/
table.shop_attributes {
+
tr {
display: block;
@@ -127,6 +136,7 @@
* General layout
*/
.col2-set {
+
.col-1,
.col-2 {
float: none;
@@ -137,14 +147,15 @@
/**
* Products
*/
- ul.products[class*='columns-'] {
+ ul.products[class*="columns-"] {
+
li.product {
width: 48%;
float: left;
clear: both;
margin: 0 0 2.992em;
- &:nth-child( 2n ) {
+ &:nth-child(2n) {
float: right;
clear: none !important; // This should never clear.
}
@@ -156,6 +167,7 @@
*/
div.product,
#content div.product {
+
div.images,
div.summary {
float: none;
@@ -168,6 +180,7 @@
*/
table.cart,
#content table.cart {
+
.product-thumbnail {
display: none;
}
@@ -177,6 +190,7 @@
.coupon {
float: none;
+
@include clearfix();
padding-bottom: 0.5em;
@@ -211,6 +225,7 @@
}
.cart-collaterals {
+
.cart_totals,
.shipping_calculator,
.cross-sells {
@@ -224,7 +239,9 @@
* Checkout
*/
&.woocommerce-checkout {
+
form.login {
+
.form-row {
width: 100%;
float: none;
@@ -233,6 +250,7 @@
}
#payment {
+
.terms {
text-align: left;
padding: 0;
@@ -250,6 +268,7 @@
* Account
*/
.lost_reset_password {
+
.form-row-first,
.form-row-last {
width: 100%;
@@ -260,6 +279,7 @@
}
.woocommerce-account {
+
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
float: none;
@@ -271,7 +291,9 @@
* Twenty Thirteen specific styles
*/
.single-product {
+
.twentythirteen {
+
.panel {
padding-left: 20px !important;
padding-right: 20px !important;
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce.scss b/plugins/woocommerce/client/legacy/css/woocommerce.scss
index 09303aa97ab..697e96f2797 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce.scss
@@ -80,6 +80,7 @@ p.demo_store,
* Main WooCommerce styles
*/
.woocommerce {
+
.blockUI.blockOverlay {
position: relative;
@@ -87,6 +88,7 @@ p.demo_store,
}
.loader {
+
@include loader();
}
@@ -98,9 +100,7 @@ p.demo_store,
text-align: center;
line-height: 1;
border-radius: 100%;
- color: var(
- --wc-red
- ) !important; // Required for default theme compatibility
+ color: var(--wc-red) !important; // Required for default theme compatibility
text-decoration: none;
font-weight: 700;
border: 0;
@@ -119,6 +119,7 @@ p.demo_store,
}
.woocommerce-breadcrumb {
+
@include clearfix();
margin: 0 0 1em;
padding: 0;
@@ -144,6 +145,7 @@ p.demo_store,
span.price,
p.price {
+
ins {
background: inherit;
font-weight: 700;
@@ -214,6 +216,7 @@ p.demo_store,
}
.woocommerce-product-gallery__trigger {
+
@include woocommerce-product-gallery__trigger;
}
@@ -243,6 +246,7 @@ p.demo_store,
}
&.woocommerce-product-gallery__video-thumbnail {
+
&::before {
content: "\25B6";
position: absolute;
@@ -272,8 +276,7 @@ p.demo_store,
}
&:hover .woocommerce-product-gallery__video-thumbnail-preview,
- .woocommerce-product-gallery__video-thumbnail-placeholder.flex-active
- + .woocommerce-product-gallery__video-thumbnail-preview {
+ .woocommerce-product-gallery__video-thumbnail-placeholder.flex-active + .woocommerce-product-gallery__video-thumbnail-preview {
opacity: 1;
}
}
@@ -282,18 +285,21 @@ p.demo_store,
}
.woocommerce-product-gallery--columns-3 {
+
.flex-control-thumbs li:nth-child(3n + 1) {
clear: left;
}
}
.woocommerce-product-gallery--columns-4 {
+
.flex-control-thumbs li:nth-child(4n + 1) {
clear: left;
}
}
.woocommerce-product-gallery--columns-5 {
+
.flex-control-thumbs li:nth-child(5n + 1) {
clear: left;
}
@@ -327,6 +333,7 @@ p.demo_store,
}
.woocommerce-tabs {
+
ul.tabs {
list-style: none;
padding: 0 0 0 1em;
@@ -483,7 +490,8 @@ p.demo_store,
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 3em;
- background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=)
+ background:
+ url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=")
no-repeat;
background-size: 16px;
-webkit-background-size: 16px;
@@ -515,6 +523,7 @@ p.demo_store,
}
.group_table {
+
td.woocommerce-grouped-product-list-item__label {
padding-right: 1em;
padding-left: 1em;
@@ -545,7 +554,6 @@ p.demo_store,
min-height: 3.236em;
min-width: 3.236em;
padding: 0.202em;
- font-size: 1em;
font-weight: 700;
position: absolute;
text-align: center;
@@ -578,6 +586,7 @@ p.demo_store,
}
ul.products li.product {
+
.onsale {
top: 0;
right: 0;
@@ -628,7 +637,7 @@ p.demo_store,
.price {
display: block;
- font-weight: normal;
+ font-weight: 400;
margin-bottom: 0.5em;
font-size: 0.857em;
@@ -693,10 +702,9 @@ p.demo_store,
span {
margin: 0;
text-decoration: none;
- padding: 0;
line-height: 1;
font-size: 1em;
- font-weight: normal;
+ font-weight: 400;
padding: 0.5em;
min-width: 1em;
display: block;
@@ -726,6 +734,7 @@ p.demo_store,
* Reviews
*/
#reviews {
+
h2 small {
float: right;
color: $subtext;
@@ -753,7 +762,9 @@ p.demo_store,
}
#comments {
+
.add_review {
+
@include clearfix();
}
@@ -762,6 +773,7 @@ p.demo_store,
}
ol.commentlist {
+
@include clearfix();
margin: 0;
padding: 0;
@@ -772,7 +784,6 @@ p.demo_store,
li {
padding: 0;
margin: 0 0 20px;
- border: 0;
position: relative;
background: 0;
border: 0;
@@ -876,6 +887,7 @@ p.demo_store,
}
.woocommerce-product-rating {
+
@include clearfix();
line-height: 2;
display: block;
@@ -897,6 +909,7 @@ p.demo_store,
}
#review_form #respond {
+
@include clearfix();
position: static;
margin: 0;
@@ -920,6 +933,7 @@ p.demo_store,
}
p.stars {
+
a {
position: relative;
height: 1em;
@@ -937,7 +951,7 @@ p.demo_store,
width: 1em;
height: 1em;
line-height: 1;
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e021";
text-indent: 0;
}
@@ -952,7 +966,9 @@ p.demo_store,
}
&.selected {
+
a.active {
+
&::before {
content: "\e020";
}
@@ -1008,7 +1024,7 @@ p.demo_store,
}
table.shop_table {
- border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+ border: 1px solid color-mix(in srgb, currentcolor 20%, transparent);
margin: 0 -1px 24px 0;
text-align: left;
width: 100%;
@@ -1023,21 +1039,22 @@ p.demo_store,
}
td {
- border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+ border-top: 1px solid color-mix(in srgb, currentcolor 20%, transparent);
padding: 9px 12px;
vertical-align: middle;
line-height: 1.5em;
small {
- font-weight: normal;
+ font-weight: 400;
}
del {
- font-weight: normal;
+ font-weight: 400;
}
}
tbody:first-child tr:first-child {
+
th,
td {
border-top: 0;
@@ -1048,7 +1065,7 @@ p.demo_store,
tfoot th,
tbody th {
font-weight: 700;
- border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+ border-top: 1px solid color-mix(in srgb, currentcolor 20%, transparent);
}
}
@@ -1067,6 +1084,7 @@ p.demo_store,
}
table.woocommerce-MyAccount-downloads {
+
td,
th {
vertical-align: top;
@@ -1088,6 +1106,7 @@ p.demo_store,
}
td.product-name {
+
dl.variation,
.wc-item-meta {
list-style: none outside;
@@ -1187,6 +1206,7 @@ p.demo_store,
&.widget_shopping_cart,
.widget_shopping_cart {
+
.total {
border-top: 3px double $secondary;
padding: 4px 0 0;
@@ -1210,6 +1230,7 @@ p.demo_store,
}
.buttons {
+
@include clearfix();
a {
@@ -1233,7 +1254,9 @@ p.demo_store,
}
form.checkout_coupon {
+
.coupon-error-notice {
+
@include coupon-error-notice-checkout();
}
@@ -1289,7 +1312,7 @@ p.demo_store,
align-items: center;
justify-content: flex-start;
gap: 0.7em;
- margin: .7em 0;
+ margin: 0.7em 0;
}
&__input {
@@ -1304,13 +1327,13 @@ p.demo_store,
}
&__checkbox {
- font-size: var(--wp--preset--font-size--small, .7em);
+ font-size: var(--wp--preset--font-size--small, 0.7em);
display: block;
}
}
:where(.wc_bis_form__input, .wc_bis_form__button) {
- padding: .9rem 1.1rem;
+ padding: 0.9rem 1.1rem;
line-height: 1;
}
@@ -1318,6 +1341,7 @@ p.demo_store,
* Order page
*/
ul.order_details {
+
@include clearfix();
margin: 0 0 3em;
list-style: none;
@@ -1348,7 +1372,7 @@ p.demo_store,
}
.wc-bacs-bank-details-account-name {
- font-weight: bold;
+ font-weight: 700;
}
.woocommerce-order-downloads,
@@ -1390,7 +1414,7 @@ p.demo_store,
margin: 0;
padding: 0;
font-style: normal;
- font-weight: bold;
+ font-weight: 700;
display: inline;
&::after {
@@ -1412,7 +1436,7 @@ p.demo_store,
}
.wc-block-order-confirmation-additional-fields-wrapper
- .wc-block-components-additional-fields-list {
+ .wc-block-components-additional-fields-list {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0;
display: grid;
@@ -1421,7 +1445,7 @@ p.demo_store,
dt {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-style: normal;
- font-weight: bold;
+ font-weight: 700;
padding: 1rem;
box-sizing: border-box;
margin: 0 !important;
@@ -1449,6 +1473,7 @@ p.demo_store,
}
.woocommerce-customer-details {
+
.woocommerce-column__title {
margin-top: 0;
}
@@ -1476,6 +1501,7 @@ p.demo_store,
}
.woocommerce-customer-details--phone::before {
+
@include iconbefore("\e037");
margin-left: -1.5em;
line-height: 1.75;
@@ -1483,6 +1509,7 @@ p.demo_store,
}
.woocommerce-customer-details--email::before {
+
@include iconbefore("\e02d");
margin-left: -1.5em;
line-height: 1.75;
@@ -1500,6 +1527,7 @@ p.demo_store,
list-style: none outside;
.woocommerce-widget-layered-nav-list__item {
+
@include clearfix();
padding: 0 0 1px;
list-style: none;
@@ -1511,6 +1539,7 @@ p.demo_store,
}
.woocommerce-widget-layered-nav-list__item--chosen a::before {
+
@include iconbefore("\e013");
color: var(--wc-red);
}
@@ -1537,6 +1566,7 @@ p.demo_store,
text-decoration: none;
&::before {
+
@include iconbefore("\e013");
color: var(--wc-red);
vertical-align: inherit;
@@ -1550,6 +1580,7 @@ p.demo_store,
* Price filter widget
*/
.widget_price_filter {
+
.price_slider {
margin-bottom: 1em;
}
@@ -1634,6 +1665,7 @@ p.demo_store,
list-style: none outside;
li {
+
@include clearfix();
padding: 0 0 1px;
list-style: none;
@@ -1650,12 +1682,14 @@ p.demo_store,
}
li.chosen a::before {
+
@include iconbefore("\e013");
color: var(--wc-red);
}
}
.woocommerce-form-login {
+
.woocommerce-form-login__submit {
float: left;
margin-right: 1em;
@@ -1672,9 +1706,10 @@ p.demo_store,
*/
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)),
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(
- :not(.edit-post-visual-editor)
- )
- .woocommerce {
+ :not(.edit-post-visual-editor)
+)
+.woocommerce {
+
a.button,
button.button,
input.button,
@@ -1703,7 +1738,7 @@ p.demo_store,
padding-right: 2.618em;
&::after {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e01c";
vertical-align: top;
font-weight: 400;
@@ -1715,7 +1750,7 @@ p.demo_store,
}
&.added::after {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e017";
margin-left: 0.53em;
vertical-align: bottom;
@@ -1772,6 +1807,7 @@ p.demo_store,
* WooCommerce specific styles for legacy themes.
*/
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) {
+
.woocommerce-breadcrumb {
font-size: 0.92em;
color: $subtext;
@@ -1782,6 +1818,7 @@ p.demo_store,
}
div.product {
+
span.price,
p.price {
color: $highlight;
@@ -1808,6 +1845,7 @@ p.demo_store,
}
.woocommerce-no-js {
+
form.woocommerce-form-login,
form.woocommerce-form-coupon {
display: block !important;
@@ -1836,7 +1874,7 @@ p.demo_store,
word-wrap: break-word;
&::before {
- font-family: "WooCommerce";
+ font-family: WooCommerce;
content: "\e028";
content: "\e028"/ ""; // Add an empty alternative text so screen readers ignore it
display: inline-block;
@@ -1861,6 +1899,7 @@ p.demo_store,
*/
.rtl.woocommerce .price_label,
.rtl.woocommerce .price_label span {
+
/* rtl:ignore */
direction: ltr;
unicode-bidi: embed;
@@ -1896,11 +1935,14 @@ p.demo_store,
* Account page
*/
.woocommerce-account {
+
.woocommerce {
+
@include clearfix();
}
.addresses .title {
+
@include clearfix();
h3 {
@@ -1913,6 +1955,7 @@ p.demo_store,
}
ol.commentlist.notes li.note {
+
p.meta {
font-weight: 700;
margin-bottom: 0;
@@ -1933,6 +1976,7 @@ p.demo_store,
padding-left: 0;
&::before {
+
@include iconbefore("\e00a");
}
@@ -1949,7 +1993,9 @@ p.demo_store,
.woocommerce-cart,
.woocommerce-checkout,
#add_payment_method {
+
table.cart {
+
.product-thumbnail {
min-width: 32px;
}
@@ -1978,6 +2024,7 @@ p.demo_store,
}
td.actions .coupon .coupon-error-notice {
+
@include coupon-error-notice-cart();
}
@@ -1988,6 +2035,7 @@ p.demo_store,
}
.wc-proceed-to-checkout {
+
@include clearfix;
padding: 1em 0;
@@ -2001,6 +2049,7 @@ p.demo_store,
}
.cart-collaterals {
+
.shipping-calculator-button {
float: none;
margin-top: 0.5em;
@@ -2008,6 +2057,7 @@ p.demo_store,
}
.shipping-calculator-button::after {
+
@include iconafter("\e019");
content: "\e019" / "";
}
@@ -2017,6 +2067,7 @@ p.demo_store,
}
.cart_totals {
+
p small {
color: $subtext;
font-size: 0.83em;
@@ -2028,6 +2079,7 @@ p.demo_store,
padding: 0;
tr:first-child {
+
th,
td {
border-top: 0;
@@ -2075,7 +2127,9 @@ p.demo_store,
}
.checkout {
+
.col-2 {
+
h3#ship-to-different-address {
float: left;
clear: none;
@@ -2093,7 +2147,7 @@ p.demo_store,
.create-account small {
font-size: 11px;
color: $subtext;
- font-weight: normal;
+ font-weight: 400;
}
div.shipping-address {
@@ -2119,11 +2173,13 @@ p.demo_store,
border-radius: 5px;
ul.payment_methods {
+
@include clearfix();
text-align: left;
padding: 1em;
// We use the old WooCommerce color as the base on purpose. See https://github.com/woocommerce/woocommerce/issues/55165.
- border-bottom: 1px solid
+ border-bottom:
+ 1px solid
darken(desaturate(rgba(#7f54b3, 0.14), 21%), 10%);
margin: 0;
list-style: none outside;
@@ -2132,7 +2188,7 @@ p.demo_store,
line-height: 2;
text-align: left;
margin: 0;
- font-weight: normal;
+ font-weight: 400;
input {
margin: 0 1em 0 0;
@@ -2153,6 +2209,7 @@ p.demo_store,
// PayPal logo in payment methods list on classic checkout page, more specific selector for precedence over general theme styles.
li.payment_method_paypal {
+
img {
max-height: 24px;
vertical-align: middle;
@@ -2162,6 +2219,7 @@ p.demo_store,
}
li:not(.woocommerce-notice) {
+
@include clearfix;
}
}
@@ -2271,7 +2329,7 @@ p.demo_store,
span.help {
font-size: 0.857em;
color: $subtext;
- font-weight: normal;
+ font-weight: 400;
}
.form-row {
@@ -2297,6 +2355,7 @@ p.demo_store,
}
.payment_method_paypal {
+
.about_paypal {
float: right;
line-height: 52px;
@@ -2319,6 +2378,7 @@ p.demo_store,
}
.woocommerce-invalid {
+
#terms {
outline: 2px solid var(--wc-red);
outline-offset: 2px;
@@ -2367,6 +2427,7 @@ p.demo_store,
}
&__step {
+
&:not(:last-child)::after {
content: "";
display: inline-block;
@@ -2374,7 +2435,7 @@ p.demo_store,
height: 0.25em;
margin-left: 1em;
border-radius: 50%;
- background: currentColor;
+ background: currentcolor;
vertical-align: middle;
}
@@ -2444,7 +2505,7 @@ p.demo_store,
&__button--secondary.button {
background: transparent;
- border: 1px solid currentColor;
+ border: 1px solid currentcolor;
color: inherit;
&:hover,
@@ -2506,6 +2567,7 @@ p.demo_store,
* Twenty Thirteen specific styles
*/
.single-product .twentythirteen {
+
.entry-summary,
#reply-title,
#respond #commentform {
diff --git a/plugins/woocommerce/client/legacy/package.json b/plugins/woocommerce/client/legacy/package.json
index 4b1548c5bb5..7a7e4aac426 100644
--- a/plugins/woocommerce/client/legacy/package.json
+++ b/plugins/woocommerce/client/legacy/package.json
@@ -47,6 +47,19 @@
},
"config": {
"ci": {
+ "lint": {
+ "command": "lint",
+ "changes": [
+ "css/*.scss",
+ "js/admin/*.js",
+ "js/frontend/*.js",
+ "Gruntfile.js",
+ ".stylelintrc"
+ ],
+ "ignore": [
+ "css/select2.scss"
+ ]
+ },
"tests": [
{
"name": "JavaScript",