Merge pull request #28494 from woocommerce/fix/2021-notices-and-cart-image
Twenty Twenty-One Compatibility: Fix issues with notice display and cart product images
This commit is contained in:
commit
97a5bf1347
|
@ -174,7 +174,7 @@ a.button {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: "";
|
||||||
float: left;
|
float: left;
|
||||||
padding-top: 100%;
|
padding-top: 100%;
|
||||||
}
|
}
|
||||||
|
@ -186,7 +186,7 @@ a.button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.single-product .type-product.sale > .onsale {
|
.single-product .type-product.sale > .onsale {
|
||||||
right: calc( 52% - 0.7rem );
|
right: calc(52% - 0.7rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
|
@ -220,7 +220,6 @@ a.button {
|
||||||
.woocommerce-error li,
|
.woocommerce-error li,
|
||||||
.woocommerce-info {
|
.woocommerce-info {
|
||||||
padding: 1.5rem 3rem;
|
padding: 1.5rem 3rem;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
@ -251,6 +250,7 @@ a.button {
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
|
|
||||||
.woocommerce-error,
|
.woocommerce-error,
|
||||||
.woocommerce-info {
|
.woocommerce-info {
|
||||||
font-family: $headings;
|
font-family: $headings;
|
||||||
|
@ -795,6 +795,7 @@ a.reset_variations {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-flex !important;
|
display: inline-flex !important;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $body-color;
|
color: $body-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -1232,6 +1233,7 @@ a.reset_variations {
|
||||||
margin-top: -1rem;
|
margin-top: -1rem;
|
||||||
|
|
||||||
.woocommerce-Address-title {
|
.woocommerce-Address-title {
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
|
@ -1246,12 +1248,14 @@ a.reset_variations {
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-address-fields {
|
.woocommerce-address-fields {
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin-bottom: 0.1rem;
|
margin-bottom: 0.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, .selection {
|
input,
|
||||||
|
.selection {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
padding-top: 0.3rem;
|
padding-top: 0.3rem;
|
||||||
padding-bottom: 0.3rem;
|
padding-bottom: 0.3rem;
|
||||||
|
@ -1325,11 +1329,12 @@ a.reset_variations {
|
||||||
td {
|
td {
|
||||||
background: var(--global--color-background);
|
background: var(--global--color-background);
|
||||||
filter: brightness(88%);
|
filter: brightness(88%);
|
||||||
|
|
||||||
.is-dark-theme & {
|
.is-dark-theme & {
|
||||||
filter: brightness(112%);
|
filter: brightness(112%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1441,7 +1446,8 @@ a.reset_variations {
|
||||||
border-radius: var(--form--border-radius);
|
border-radius: var(--form--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container--focus .select2-selection,.select2-container--open .select2-selection {
|
.select2-container--focus .select2-selection,
|
||||||
|
.select2-container--open .select2-selection {
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
outline: 2px dotted var(--form--border-color);
|
outline: 2px dotted var(--form--border-color);
|
||||||
}
|
}
|
||||||
|
@ -1474,6 +1480,7 @@ a.reset_variations {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-form-coupon {
|
.woocommerce-form-coupon {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
@ -1776,7 +1783,8 @@ a.reset_variations {
|
||||||
height: 46px;
|
height: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2-container--focus .select2-selection,.select2-container--open .select2-selection {
|
.select2-container--focus .select2-selection,
|
||||||
|
.select2-container--open .select2-selection {
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
outline: 2px dotted var(--form--border-color);
|
outline: 2px dotted var(--form--border-color);
|
||||||
}
|
}
|
||||||
|
@ -2022,6 +2030,7 @@ a.reset_variations {
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(2n) {
|
tr:nth-child(2n) {
|
||||||
|
|
||||||
td {
|
td {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
@ -2032,8 +2041,9 @@ a.reset_variations {
|
||||||
td {
|
td {
|
||||||
background: var(--global--color-background);
|
background: var(--global--color-background);
|
||||||
filter: brightness(88%);
|
filter: brightness(88%);
|
||||||
|
|
||||||
.is-dark-theme & {
|
.is-dark-theme & {
|
||||||
filter: brightness(112%);
|
filter: brightness(112%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2300,12 +2310,14 @@ a.reset_variations {
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-tabs {
|
.woocommerce-tabs {
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
padding: calc( 0.75 * var(--button--padding-vertical) ) calc( 0.75 * var(--button--padding-horizontal) );
|
padding: calc(0.75 * var(--button--padding-vertical)) calc(0.75 * var(--button--padding-horizontal));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2314,6 +2326,7 @@ a.reset_variations {
|
||||||
table.shop_table_responsive {
|
table.shop_table_responsive {
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
|
||||||
@include inversebuttoncolors();
|
@include inversebuttoncolors();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2340,8 +2353,9 @@ a.reset_variations {
|
||||||
td {
|
td {
|
||||||
background: var(--global--color-background);
|
background: var(--global--color-background);
|
||||||
filter: brightness(88%);
|
filter: brightness(88%);
|
||||||
|
|
||||||
.is-dark-theme & {
|
.is-dark-theme & {
|
||||||
filter: brightness(112%);
|
filter: brightness(112%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2535,6 +2549,7 @@ a.reset_variations {
|
||||||
* Home page
|
* Home page
|
||||||
*/
|
*/
|
||||||
.home #main {
|
.home #main {
|
||||||
|
|
||||||
[class*="woocommerce columns-"] {
|
[class*="woocommerce columns-"] {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
max-width: var(--responsive--aligndefault-width);
|
max-width: var(--responsive--aligndefault-width);
|
||||||
|
@ -2624,6 +2639,7 @@ a.reset_variations {
|
||||||
padding-right: 0.5em;
|
padding-right: 0.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 1.5rem 0;
|
margin: 1.5rem 0;
|
||||||
|
|
||||||
@include inversebuttoncolors();
|
@include inversebuttoncolors();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2771,6 +2787,7 @@ a.reset_variations {
|
||||||
}
|
}
|
||||||
|
|
||||||
#add_payment_method {
|
#add_payment_method {
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: none !important;
|
list-style-type: none !important;
|
||||||
}
|
}
|
||||||
|
@ -2805,7 +2822,9 @@ a.reset_variations {
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-PaymentBox {
|
.woocommerce-PaymentBox {
|
||||||
p, label {
|
|
||||||
|
p,
|
||||||
|
label {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2855,7 +2874,6 @@ a.reset_variations {
|
||||||
.woocommerce-notices-wrapper {
|
.woocommerce-notices-wrapper {
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
background: var(--global--color-light-gray);
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
@ -2887,7 +2905,8 @@ a.reset_variations {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button[name="update_cart"],button[name="apply_coupon"] {
|
button[name="update_cart"],
|
||||||
|
button[name="apply_coupon"] {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
color: var(--global--color-primary);
|
color: var(--global--color-primary);
|
||||||
background: var(--global--color-background);
|
background: var(--global--color-background);
|
||||||
|
@ -2899,6 +2918,13 @@ a.reset_variations {
|
||||||
background: var(--global--color-primary);
|
background: var(--global--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-thumbnail {
|
||||||
|
|
||||||
|
.attachment-woocommerce_thumbnail {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-collaterals {
|
.cart-collaterals {
|
||||||
|
@ -2970,17 +2996,20 @@ a.reset_variations {
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(2n) {
|
tr:nth-child(2n) {
|
||||||
|
|
||||||
td {
|
td {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(2n+1) {
|
tr:nth-child(2n+1) {
|
||||||
|
|
||||||
td {
|
td {
|
||||||
background: var(--global--color-background);
|
background: var(--global--color-background);
|
||||||
filter: brightness(88%);
|
filter: brightness(88%);
|
||||||
|
|
||||||
.is-dark-theme & {
|
.is-dark-theme & {
|
||||||
filter: brightness(112%);
|
filter: brightness(112%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue