Add WooCommerce default styles for block themes (#33518)
* Add WooCommerce default styles for block themes * Ensure sale badge remains as is in Twenty Twenty-Two * Style the mark element in theme colors * Update product variations dropdowns * address feedback * address feedback * fix store notice position Co-authored-by: Luigi <gigitux@gmail.com>
This commit is contained in:
parent
0b6de76567
commit
5ddcc40f04
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add default styles for block themes to ensure WooCommerce looks better out of the box with block themes that are not optimized for WooCommerce specifically.
|
|
@ -69,24 +69,21 @@ $tt2-gray: #f7f7f7;
|
|||
top: -1rem;
|
||||
right: -1rem;
|
||||
position: absolute;
|
||||
background: var( --wp--preset--color--secondary );
|
||||
background: var(--wp--preset--color--secondary);
|
||||
color: inherit;
|
||||
border-radius: 2rem;
|
||||
line-height: 2.6rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0rem 0.5rem 0rem 0.5rem;
|
||||
}
|
||||
|
||||
.price ins, bdi {
|
||||
text-decoration: none;
|
||||
padding: 0 0.5rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
input[type='number'] {
|
||||
input[type="number"] {
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button{
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
@ -103,16 +100,16 @@ $tt2-gray: #f7f7f7;
|
|||
.woocommerce-error,
|
||||
.woocommerce-info {
|
||||
background: $tt2-gray;
|
||||
border-top-color: var( --wp--preset--color--primary );
|
||||
border-top-color: var(--wp--preset--color--primary);
|
||||
border-top-style: solid;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
list-style: none;
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
|
||||
&[role='alert']::before {
|
||||
color: var( --wp--preset--color--background );
|
||||
background: var( --wp--preset--color--primary );
|
||||
&[role="alert"]::before {
|
||||
color: var(--wp--preset--color--background);
|
||||
background: var(--wp--preset--color--primary);
|
||||
border-radius: 5rem;
|
||||
font-size: 1rem;
|
||||
padding-left: 3px;
|
||||
|
@ -134,11 +131,11 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
}
|
||||
|
||||
.woocommerce-error[role='alert'] {
|
||||
.woocommerce-error[role="alert"] {
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
content: 'X';
|
||||
content: "X";
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
@ -149,13 +146,13 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
|
||||
.woocommerce-message {
|
||||
&[role='alert']::before {
|
||||
content: '\2713';
|
||||
&[role="alert"]::before {
|
||||
content: "\2713";
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-NoticeGroup-checkout {
|
||||
ul.woocommerce-error[role='alert'] {
|
||||
ul.woocommerce-error[role="alert"] {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
@ -167,14 +164,14 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
|
||||
a.button,
|
||||
button[name='add-to-cart'],
|
||||
input[name='submit'],
|
||||
button[name="add-to-cart"],
|
||||
input[name="submit"],
|
||||
button.single_add_to_cart_button,
|
||||
button[type='submit']:not(.wp-block-search__button) {
|
||||
button[type="submit"]:not(.wp-block-search__button) {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
background-color: var( --wp--preset--color--primary );
|
||||
background-color: var(--wp--preset--color--primary);
|
||||
color: #fff;
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
padding: 1rem 2rem;
|
||||
|
@ -185,11 +182,37 @@ $tt2-gray: #f7f7f7;
|
|||
|
||||
&:hover,
|
||||
&:visited {
|
||||
color: var( --wp--preset--color--white );
|
||||
color: var(--wp--preset--color--white);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
#respond input#submit.alt,
|
||||
a.button.alt,
|
||||
button.button.alt,
|
||||
input.button.alt {
|
||||
background-color: var(--wp--preset--color--primary);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--wp--preset--color--primary);
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:disabled[disabled],
|
||||
&.disabled:hover,
|
||||
&:disabled:hover,
|
||||
&:disabled[disabled]:hover {
|
||||
background-color: var(--wp--preset--color--primary);
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
button.woocommerce-form-login__submit,
|
||||
button.single_add_to_cart_button,
|
||||
a.checkout-button {
|
||||
|
@ -229,9 +252,8 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
|
||||
h2.woocommerce-loop-product__title {
|
||||
color: var( --wp--preset--color--primary );
|
||||
font-family: var( --wp--preset--font-family--system-font );
|
||||
font-size: 1.2rem;
|
||||
color: var(--wp--preset--color--primary);
|
||||
font-family: var(--wp--preset--font-family--system-font);
|
||||
text-decoration: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
@ -244,10 +266,6 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
}
|
||||
|
||||
a.added_to_cart {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -258,12 +276,6 @@ $tt2-gray: #f7f7f7;
|
|||
div.product {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
> span.onsale {
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
|
@ -286,8 +298,8 @@ $tt2-gray: #f7f7f7;
|
|||
line-height: 1.5rem;
|
||||
padding: 0;
|
||||
font-size: 0.6rem;
|
||||
background: var( --wp--preset--color--white );
|
||||
border-color: var( --wp--preset--color--white );
|
||||
background: var(--wp--preset--color--white);
|
||||
border-color: var(--wp--preset--color--white);
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
overflow: hidden;
|
||||
|
@ -309,10 +321,6 @@ $tt2-gray: #f7f7f7;
|
|||
div.summary {
|
||||
font-size: 1rem;
|
||||
|
||||
> *{
|
||||
margin-bottom: var( --wp--style--block-gap );
|
||||
}
|
||||
|
||||
h1.product_title {
|
||||
font-size: 2.5rem;
|
||||
margin: 0;
|
||||
|
@ -336,24 +344,10 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
}
|
||||
|
||||
button[name='add-to-cart'], button.single_add_to_cart_button {
|
||||
button[name="add-to-cart"],
|
||||
button.single_add_to_cart_button {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: var( --wp--style--block-gap );
|
||||
}
|
||||
|
||||
table.variations {
|
||||
tr {
|
||||
display: block;
|
||||
margin-bottom: var( --wp--style--block-gap );
|
||||
|
||||
th {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
td select {
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
margin-bottom: var(--wp--style--block-gap);
|
||||
}
|
||||
|
||||
ol.flex-control-thumbs {
|
||||
|
@ -380,7 +374,7 @@ $tt2-gray: #f7f7f7;
|
|||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
margin-bottom: var( --wp--style--block-gap );
|
||||
margin-bottom: var(--wp--style--block-gap);
|
||||
}
|
||||
|
||||
.related.products {
|
||||
|
@ -389,37 +383,35 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
|
||||
.woocommerce-tabs {
|
||||
padding-top: var( --wp--style--block-gap );
|
||||
padding-top: var(--wp--style--block-gap);
|
||||
|
||||
ul.wc-tabs {
|
||||
padding: 0;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #EAE9EB;
|
||||
border-bottom-color: #eae9eb;
|
||||
|
||||
li {
|
||||
background: #EAE9EB;
|
||||
background: #eae9eb;
|
||||
margin: 0;
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
border-color: #EAE9EB;
|
||||
border-color: #eae9eb;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
float: left;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-left-color: var( --wp--preset--color--background );
|
||||
border-left-color: var(--wp--preset--color--background);
|
||||
font-weight: 600;
|
||||
font-size: var(--wp--preset--font-size--medium);
|
||||
|
||||
&:first-child {
|
||||
border-left-color: #EAE9EB;
|
||||
border-left-color: #eae9eb;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var( --wp--preset--color--background );
|
||||
border-bottom-color: var( --wp--preset--color--background );
|
||||
box-shadow: 0 1px var( --wp--preset--color--background );
|
||||
box-shadow: 0 1px var(--wp--preset--color--background);
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -429,7 +421,7 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
|
||||
.woocommerce-Tabs-panel {
|
||||
padding-top: var( --wp--style--block-gap );
|
||||
padding-top: var(--wp--style--block-gap);
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
margin-left: 1em;
|
||||
|
||||
|
@ -454,7 +446,7 @@ $tt2-gray: #f7f7f7;
|
|||
|
||||
.comment-text {
|
||||
display: inline-block;
|
||||
padding-left: var( --wp--style--block-gap );
|
||||
padding-left: var(--wp--style--block-gap);
|
||||
|
||||
.star-rating {
|
||||
margin-top: 0;
|
||||
|
@ -467,14 +459,14 @@ $tt2-gray: #f7f7f7;
|
|||
.comment-form-rating {
|
||||
label {
|
||||
display: inline-block;
|
||||
padding-right: var( --wp--style--block-gap );
|
||||
padding-top: var( --wp--style--block-gap );
|
||||
padding-right: var(--wp--style--block-gap);
|
||||
padding-top: var(--wp--style--block-gap);
|
||||
}
|
||||
|
||||
p.stars {
|
||||
display: inline;
|
||||
a::before {
|
||||
color: var( --wp--preset--color--secondary );
|
||||
color: var(--wp--preset--color--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -482,18 +474,13 @@ $tt2-gray: #f7f7f7;
|
|||
.comment-form-comment {
|
||||
label {
|
||||
float: left;
|
||||
padding-right: var( --wp--style--block-gap );
|
||||
padding-right: var(--wp--style--block-gap);
|
||||
}
|
||||
}
|
||||
|
||||
#review_form_wrapper {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.comment-reply-title {
|
||||
font-size: var(--wp--preset--font-size--medium);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -504,8 +491,8 @@ $tt2-gray: #f7f7f7;
|
|||
line-height: 1;
|
||||
width: 5.4rem;
|
||||
font-family: star;
|
||||
color: var( --wp--preset--color--secondary );
|
||||
margin: 1rem auto .7rem auto;
|
||||
color: var(--wp--preset--color--secondary);
|
||||
margin: 1rem auto 0.7rem auto;
|
||||
|
||||
&::before {
|
||||
content: "\73\73\73\73\73";
|
||||
|
@ -609,14 +596,15 @@ $tt2-gray: #f7f7f7;
|
|||
.return-to-shop {
|
||||
a.button {
|
||||
background-color: #fff;
|
||||
color: var( --wp--preset--color--primary );
|
||||
border: 2px solid var( --wp--preset--color--primary );
|
||||
color: var(--wp--preset--color--primary);
|
||||
border: 2px solid var(--wp--preset--color--primary);
|
||||
padding: 0.7rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
background: var( --wp--preset--color--secondary );
|
||||
background: var(--wp--preset--color--secondary);
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -630,12 +618,6 @@ $tt2-gray: #f7f7f7;
|
|||
.input-text {
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
border-radius: 0;
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
padding: .9rem 1.1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: .7rem;
|
||||
}
|
||||
|
||||
abbr.required {
|
||||
|
@ -650,7 +632,7 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
}
|
||||
|
||||
input[type="radio"][name='payment_method'],
|
||||
input[type="radio"][name="payment_method"],
|
||||
input[type="radio"].shipping_method {
|
||||
display: none;
|
||||
|
||||
|
@ -666,7 +648,7 @@ $tt2-gray: #f7f7f7;
|
|||
margin-left: 4px;
|
||||
margin-right: 1.2rem;
|
||||
border-radius: 100%;
|
||||
transform: translateY(.2rem);
|
||||
transform: translateY(0.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -696,8 +678,8 @@ $tt2-gray: #f7f7f7;
|
|||
width: 1rem;
|
||||
border: 2px solid var(--wp--preset--color--black);
|
||||
background: var(--wp--preset--color--white);
|
||||
margin-right: .5rem;
|
||||
transform: translateY(.2rem);
|
||||
margin-right: 0.5rem;
|
||||
transform: translateY(0.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -707,15 +689,12 @@ $tt2-gray: #f7f7f7;
|
|||
|
||||
input[type="checkbox"]:checked + span::before {
|
||||
background: var(--wp--preset--color--black);
|
||||
box-shadow: inset .2rem .2rem var(--wp--preset--color--white), inset -.2rem -.2rem var(--wp--preset--color--white);
|
||||
box-shadow: inset 0.2rem 0.2rem var(--wp--preset--color--white), inset -0.2rem -0.2rem var(--wp--preset--color--white);
|
||||
}
|
||||
}
|
||||
|
||||
table.shop_table_responsive {
|
||||
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td {
|
||||
|
@ -730,7 +709,7 @@ $tt2-gray: #f7f7f7;
|
|||
tbody {
|
||||
|
||||
tr {
|
||||
border-top: 1px solid var( --wp--preset--color--black );
|
||||
border-top: 1px solid var(--wp--preset--color--black);
|
||||
}
|
||||
|
||||
td {
|
||||
|
@ -794,13 +773,16 @@ $tt2-gray: #f7f7f7;
|
|||
*/
|
||||
.woocommerce-cart-form {
|
||||
|
||||
#coupon_code {
|
||||
width: auto;
|
||||
#coupon_code,
|
||||
.actions .button {
|
||||
height: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
table.shop_table_responsive {
|
||||
|
||||
td, th {
|
||||
td,
|
||||
th {
|
||||
padding: 1rem 0 0.5rem 1rem;
|
||||
}
|
||||
|
||||
|
@ -816,43 +798,30 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
|
||||
.product-remove {
|
||||
width: auto;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
#coupon_code {
|
||||
width: 50%;
|
||||
float: left;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button[name='apply_coupon'],
|
||||
button[name='update_cart'] {
|
||||
button[name="apply_coupon"],
|
||||
button[name="update_cart"] {
|
||||
padding: 1rem 2rem;
|
||||
border: 2px solid #ebe9eb;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.product-remove {
|
||||
width: 1rem;
|
||||
font-size: var(--wp--preset--font-size--large);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.product-thumbnail {
|
||||
width: 7.5rem;
|
||||
|
||||
a {
|
||||
img {
|
||||
width: 117px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -862,7 +831,6 @@ $tt2-gray: #f7f7f7;
|
|||
h2 {
|
||||
text-transform: uppercase;
|
||||
font-family: inherit;
|
||||
font-size: var(--wp--preset--font-size--medium);
|
||||
}
|
||||
|
||||
table.shop_table_responsive {
|
||||
|
@ -875,13 +843,14 @@ $tt2-gray: #f7f7f7;
|
|||
width: 11rem;
|
||||
}
|
||||
|
||||
td, th {
|
||||
td,
|
||||
th {
|
||||
padding: 1rem 0;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
button[name='calc_shipping'] {
|
||||
button[name="calc_shipping"] {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
|
@ -914,7 +883,8 @@ $tt2-gray: #f7f7f7;
|
|||
width: 53%;
|
||||
float: left;
|
||||
|
||||
.col-1, .col-2 {
|
||||
.col-1,
|
||||
.col-2 {
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
|
@ -949,7 +919,8 @@ $tt2-gray: #f7f7f7;
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 1rem 1rem 1rem 0;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
@ -992,7 +963,7 @@ $tt2-gray: #f7f7f7;
|
|||
width: calc(100% - 1.5rem);
|
||||
|
||||
.form-row {
|
||||
button[name='apply_coupon'] {
|
||||
button[name="apply_coupon"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
@ -1005,8 +976,8 @@ $tt2-gray: #f7f7f7;
|
|||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
|
||||
input[type='radio'] {
|
||||
margin-right: .6rem;
|
||||
input[type="radio"] {
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
|
||||
li.wc_payment_method {
|
||||
|
@ -1021,24 +992,16 @@ $tt2-gray: #f7f7f7;
|
|||
.woocommerce-thankyou-order-received,
|
||||
h2.woocommerce-column__title {
|
||||
font-family: var(--wp--preset--font-family--source-serif-pro);
|
||||
font-size: var(--wp--preset--font-size--large);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.woocommerce-order > * {
|
||||
margin-bottom: var( --wp--style--block-gap );
|
||||
margin-bottom: var(--wp--style--block-gap);
|
||||
}
|
||||
|
||||
ul.woocommerce-order-overview {
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
strong {
|
||||
|
@ -1046,19 +1009,14 @@ $tt2-gray: #f7f7f7;
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-customer-details {
|
||||
address {
|
||||
padding: 2rem;
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
font-style: inherit;
|
||||
|
||||
p[class^='woocommerce-customer-details--'] {
|
||||
p[class^="woocommerce-customer-details--"] {
|
||||
&:first-of-type {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
@ -1068,12 +1026,12 @@ $tt2-gray: #f7f7f7;
|
|||
}
|
||||
|
||||
.woocommerce-customer-details--phone::before {
|
||||
content: '\01F4DE';
|
||||
content: "\01F4DE";
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.woocommerce-customer-details--email::before {
|
||||
content: '\2709';
|
||||
content: "\2709";
|
||||
margin-right: 1rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
@ -1082,12 +1040,10 @@ $tt2-gray: #f7f7f7;
|
|||
|
||||
.woocommerce-table--order-details {
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
border-collapse: collapse;
|
||||
width: 70%;
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--wp--preset--color--black);
|
||||
border-bottom: 1px solid var(--wp--preset--color--black);
|
||||
font-weight: normal;
|
||||
|
@ -1096,22 +1052,11 @@ $tt2-gray: #f7f7f7;
|
|||
thead th {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
|
||||
.select2-selection,
|
||||
.select2-search__field {
|
||||
height: 3.5rem;
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
padding: .9rem 1.1rem;
|
||||
}
|
||||
|
||||
.select2-selection,
|
||||
.select2-dropdown {
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
|
@ -1120,22 +1065,12 @@ $tt2-gray: #f7f7f7;
|
|||
|
||||
.select2-dropdown {
|
||||
border-top: 0;
|
||||
padding: .9rem 1.1rem;
|
||||
|
||||
.select2-search__field {
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
border-radius: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection .select2-selection__arrow {
|
||||
height: 3.5rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -1145,64 +1080,28 @@ $tt2-gray: #f7f7f7;
|
|||
|
||||
.woocommerce-MyAccount-navigation {
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 1rem 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
||||
a {
|
||||
color: var( --wp--preset--color--primary );
|
||||
text-decoration: underline;
|
||||
color: var(--wp--preset--color--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-MyAccount-content {
|
||||
|
||||
> p:first-of-type,
|
||||
p.form-row-first,
|
||||
p.form-row-last {
|
||||
margin-block-start: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.woocommerce-edit-address {
|
||||
|
||||
.woocommerce-MyAccount-content {
|
||||
form > h3 {
|
||||
margin-block-start: 0px;
|
||||
}
|
||||
}
|
||||
table.shop_table_responsive.my_account_orders th {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.woocommerce-form-login {
|
||||
max-width: 516px;
|
||||
margin: 0 auto;
|
||||
|
||||
.show-password-input {
|
||||
top: .8rem;
|
||||
right: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1211,7 +1110,7 @@ $tt2-gray: #f7f7f7;
|
|||
font-weight: normal;
|
||||
}
|
||||
.wp-block-search__input {
|
||||
padding: .9rem 1.1rem;
|
||||
padding: 0.9rem 1.1rem;
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
}
|
||||
.wp-block-search__button {
|
||||
|
@ -1228,7 +1127,7 @@ $tt2-gray: #f7f7f7;
|
|||
max-width: 100%;
|
||||
|
||||
.wc-block-product-search__field {
|
||||
padding: .9rem 1.1rem;
|
||||
padding: 0.9rem 1.1rem;
|
||||
flex-grow: 1;
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
font-size: inherit;
|
||||
|
@ -1237,19 +1136,19 @@ $tt2-gray: #f7f7f7;
|
|||
|
||||
.wc-block-product-search__button {
|
||||
display: flex;
|
||||
background-color: var( --wp--preset--color--primary );
|
||||
background-color: var(--wp--preset--color--primary);
|
||||
color: #fff;
|
||||
border: 1px solid var(--wp--preset--color--black);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 0 0 0 .7rem;
|
||||
margin: 0 0 0 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-store-notice {
|
||||
.theme-twentytwentytwo .woocommerce-store-notice {
|
||||
color: var(--wp--preset--color--black);
|
||||
border-top: 2px solid var( --wp--preset--color--primary );
|
||||
border-top: 2px solid var(--wp--preset--color--primary);
|
||||
background: $tt2-gray;
|
||||
padding: 2rem;
|
||||
position: fixed;
|
||||
|
@ -1262,6 +1161,6 @@ $tt2-gray: #f7f7f7;
|
|||
.woocommerce-store-notice__dismiss-link {
|
||||
float: right;
|
||||
margin-right: 4rem;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,503 @@
|
|||
/**
|
||||
* woocommerce-blocktheme.scss
|
||||
* Block theme default styles to ensure WooCommerce looks better out of the box with block themes that are not optimised for WooCommerce specifically.
|
||||
*/
|
||||
@import "variables";
|
||||
|
||||
/**
|
||||
* Layout
|
||||
*/
|
||||
.woocommerce-cart,
|
||||
.woocommerce-account,
|
||||
.woocommerce-checkout {
|
||||
.wp-block-post-title,
|
||||
main .woocommerce {
|
||||
// Allow Cart/Checkout/Account pages more space to breathe.
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* General
|
||||
*/
|
||||
.woocommerce {
|
||||
mark {
|
||||
// Style the mark element in theme colors.
|
||||
// For details see https://github.com/woocommerce/woocommerce/pull/31631.
|
||||
background-color: var(--wp--preset--color--foreground, $highlight);
|
||||
color: var(--wp--preset--color--background, $highlightext);
|
||||
}
|
||||
|
||||
/**
|
||||
* Buttons
|
||||
*/
|
||||
a.button,
|
||||
button[name="add-to-cart"],
|
||||
input[name="submit"],
|
||||
button.single_add_to_cart_button,
|
||||
button[type="submit"]:not(.wp-block-search__button) {
|
||||
// Slightly increase CTA size across the board.
|
||||
padding: 0.9rem 1.1rem;
|
||||
}
|
||||
|
||||
button.button,
|
||||
a.button {
|
||||
background-color: var(--wp--preset--color--foreground, $primary);
|
||||
color: var(--wp--preset--color--background, $primarytext);
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:disabled[disabled],
|
||||
&.disabled:hover,
|
||||
&:disabled:hover,
|
||||
&:disabled[disabled]:hover {
|
||||
background-color: var(--wp--preset--color--foreground, $primary);
|
||||
color: var(--wp--preset--color--background, $primarytext);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#respond input#submit,
|
||||
input.button,
|
||||
a.button.alt {
|
||||
// Style primary WooCommerce CTAs in theme colors by default.
|
||||
background-color: var(--wp--preset--color--foreground, $primary);
|
||||
color: var(--wp--preset--color--background, $primarytext);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--wp--preset--color--foreground, $primary);
|
||||
color: var(--wp--preset--color--background, $primarytext);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:disabled[disabled],
|
||||
&.disabled:hover,
|
||||
&:disabled:hover,
|
||||
&:disabled[disabled]:hover {
|
||||
background-color: var(--wp--preset--color--foreground, $primary);
|
||||
color: var(--wp--preset--color--background, $primarytext);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Products
|
||||
*/
|
||||
.woocommerce {
|
||||
/**
|
||||
* Shop products list
|
||||
*/
|
||||
ul.products li.product .woocommerce-loop-product__title {
|
||||
// Slightly increase font size to make product title more readable.
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Single Product
|
||||
*/
|
||||
div.product {
|
||||
// Ensure the single product contains its content.
|
||||
// For details see https://github.com/woocommerce/woocommerce/pull/33511.
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
div.summary > * {
|
||||
// Ensure a more even block gap spacing in product summary.
|
||||
margin-bottom: var(--wp--style--block-gap);
|
||||
}
|
||||
|
||||
.woocommerce-tabs {
|
||||
ul.tabs li.active {
|
||||
// Style active tab in theme colors.
|
||||
background: var(--wp--preset--color--background, $contentbg);
|
||||
border-bottom-color: var(--wp--preset--color--background, $contentbg);
|
||||
|
||||
&::before {
|
||||
box-shadow: 2px 2px 0 var(--wp--preset--color--background, $contentbg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: -2px 2px 0 var(--wp--preset--color--background, $contentbg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
// Adjust positioning of quantity selector and button.
|
||||
.qty {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
+ .single_add_to_cart_button {
|
||||
min-height: 51px;
|
||||
}
|
||||
}
|
||||
|
||||
.related.products {
|
||||
// Ensure related products doesn't stick to product tabs.
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-Reviews {
|
||||
#comments {
|
||||
// Add spacing between the review comments and the review form.
|
||||
margin-bottom: var(--wp--style--block-gap);
|
||||
}
|
||||
|
||||
.commentlist {
|
||||
// Ensure review comments width doesn't exceed review container.
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.comment-reply-title {
|
||||
// Make review form title visually distinct.
|
||||
font-size: var(--wp--preset--font-size--medium);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.price ins,
|
||||
bdi {
|
||||
// Ensure discounted prices aren't underlined.
|
||||
// For details see https://github.com/woocommerce/woocommerce-blocks/pull/5684.
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.added_to_cart {
|
||||
// Prevent "View Cart" button from sticking to "Add to Cart" button.
|
||||
// For details see https://github.com/woocommerce/woocommerce-blocks/issues/5285.
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
span.onsale {
|
||||
// Style "On Sale" badge in theme colors by default.
|
||||
background-color: var(--wp--preset--color--foreground, $highlight);
|
||||
color: var(--wp--preset--color--background, $highlightext);
|
||||
}
|
||||
|
||||
/**
|
||||
* Product variations
|
||||
*/
|
||||
table.variations {
|
||||
tr {
|
||||
// Limit variation dropdown width and add block gap.
|
||||
display: block;
|
||||
margin-bottom: var(--wp--style--block-gap);
|
||||
|
||||
th {
|
||||
// Ensure variation label doesn't stick to dropdown.
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
td select {
|
||||
// Add padding to product variation dropdowns.
|
||||
height: 3.5rem;
|
||||
padding: 0.9rem 1.1rem;
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.product form.cart table.variations th {
|
||||
// Ensure variation label is vertically centered.
|
||||
line-height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
.woocommerce-page {
|
||||
// Ensure text input fields aren't too small.
|
||||
.input-text {
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
padding: 0.9rem 1.1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
// Ensure dropdowns are visually consistent with other form fields.
|
||||
.select2-container {
|
||||
.select2-selection,
|
||||
.select2-search__field {
|
||||
height: 3.5rem;
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
padding: 0.9rem 1.1rem;
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
padding: 0.9rem 1.1rem;
|
||||
|
||||
.select2-search__field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection .select2-selection__arrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 3rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce {
|
||||
form {
|
||||
.form-row {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
// Ensure textareas don't look squished.
|
||||
min-height: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cart / Checkout
|
||||
*/
|
||||
.woocommerce-page {
|
||||
/**
|
||||
* Tables
|
||||
*/
|
||||
table.shop_table {
|
||||
// Adjust table width to new checkout width.
|
||||
width: 70%;
|
||||
border-collapse: collapse;
|
||||
|
||||
@media only screen and ( max-width: 768px ) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
// Allow cells more space to breathe.
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
table.shop_table_responsive {
|
||||
// Responsive tables should still take up the full width.
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cart specific
|
||||
*/
|
||||
.woocommerce-cart-form {
|
||||
.product-remove {
|
||||
// Decrease width of the product remove column.
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.product-thumbnail {
|
||||
// Increase product thumbnails to improve visually fidelity.
|
||||
width: 120px;
|
||||
|
||||
a img {
|
||||
width: 117px;
|
||||
}
|
||||
}
|
||||
|
||||
#coupon_code {
|
||||
// Allow sufficient space for the coupon code.
|
||||
width: auto;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
#coupon_code,
|
||||
.actions .button {
|
||||
height: 50px;
|
||||
padding: 0.9rem 1.1rem;
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: 768px ) {
|
||||
.product-remove {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#coupon_code {
|
||||
width: 50%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-collaterals h2 {
|
||||
// Ensure cart subheadline size is reasonable.
|
||||
font-size: var(--wp--preset--font-size--medium);
|
||||
}
|
||||
|
||||
/**
|
||||
* Checkout specific
|
||||
*/
|
||||
.woocommerce-form-coupon .button {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Order confirmation
|
||||
*/
|
||||
.woocommerce-thankyou-order-received,
|
||||
h2.woocommerce-column__title {
|
||||
font-size: var(--wp--preset--font-size--large);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
ul.woocommerce-order-overview {
|
||||
// Display order overview items next to each other.
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
|
||||
@media only screen and ( max-width: 768px ) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
li {
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-customer-details address {
|
||||
// Ensure customer details match order overview.
|
||||
box-sizing: border-box;
|
||||
width: 70%;
|
||||
padding: 2rem;
|
||||
border-width: 1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* My account
|
||||
*/
|
||||
.woocommerce-account {
|
||||
.woocommerce-MyAccount-navigation {
|
||||
ul {
|
||||
// Ensure top left alignment of the navigation.
|
||||
margin: 0 0 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
// Remove default list styling.
|
||||
list-style: none;
|
||||
padding: 1rem 0;
|
||||
|
||||
@media only screen and ( max-width: 768px ) {
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-MyAccount-content {
|
||||
> p:first-of-type,
|
||||
p.form-row-first,
|
||||
p.form-row-last {
|
||||
// Ensure first paragraph in content is top aligned.
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
table.shop_table.order_details,
|
||||
.woocommerce-customer-details address {
|
||||
// Ensure order/customer details are full width in My Account.
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.addresses .title .edit {
|
||||
// Align "Add" and "Edit" buttons when title is too long (/my-account/edit-address/).
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&.woocommerce-edit-address .woocommerce-MyAccount-content form > h3 {
|
||||
// Ensure headline is top aligned (/my-account/edit-address/shipping/).
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* My account - Login form
|
||||
*/
|
||||
.woocommerce-page {
|
||||
.woocommerce-form-login {
|
||||
.input-text {
|
||||
// Ensure inputs are well spaced.
|
||||
font-size: var(--wp--preset--font-size--small);
|
||||
padding: 0.9rem 1.1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.show-password-input {
|
||||
// Adjust password field icon position.
|
||||
top: 0.8rem;
|
||||
right: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Store notice
|
||||
*/
|
||||
p.demo_store,
|
||||
.woocommerce-store-notice {
|
||||
// Add theme colors to the store notice.
|
||||
|
||||
background: var(--wp--preset--color--foreground, $primary);
|
||||
bottom: 0;
|
||||
color: var(--wp--preset--color--background, $primarytext);
|
||||
position: fixed;
|
||||
top: auto !important;
|
||||
|
||||
a {
|
||||
color: var(--wp--preset--color--background, $primarytext);
|
||||
}
|
||||
}
|
|
@ -6,6 +6,8 @@
|
|||
* @version 2.3.0
|
||||
*/
|
||||
|
||||
// phpcs:disable WooCommerce.Commenting.CommentHooks.MissingHookComment
|
||||
|
||||
use Automattic\Jetpack\Constants;
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
|
@ -55,30 +57,39 @@ class WC_Frontend_Scripts {
|
|||
public static function get_styles() {
|
||||
$version = Constants::get_constant( 'WC_VERSION' );
|
||||
|
||||
return apply_filters(
|
||||
'woocommerce_enqueue_styles',
|
||||
array(
|
||||
'woocommerce-layout' => array(
|
||||
'src' => self::get_asset_url( 'assets/css/woocommerce-layout.css' ),
|
||||
'deps' => '',
|
||||
'version' => $version,
|
||||
'media' => 'all',
|
||||
'has_rtl' => true,
|
||||
),
|
||||
'woocommerce-smallscreen' => array(
|
||||
'src' => self::get_asset_url( 'assets/css/woocommerce-smallscreen.css' ),
|
||||
'deps' => 'woocommerce-layout',
|
||||
'version' => $version,
|
||||
'media' => 'only screen and (max-width: ' . apply_filters( 'woocommerce_style_smallscreen_breakpoint', '768px' ) . ')',
|
||||
'has_rtl' => true,
|
||||
),
|
||||
'woocommerce-general' => array(
|
||||
'src' => self::get_asset_url( 'assets/css/woocommerce.css' ),
|
||||
'deps' => '',
|
||||
'version' => $version,
|
||||
'media' => 'all',
|
||||
'has_rtl' => true,
|
||||
),
|
||||
return array_filter(
|
||||
apply_filters(
|
||||
'woocommerce_enqueue_styles',
|
||||
array(
|
||||
'woocommerce-layout' => array(
|
||||
'src' => self::get_asset_url( 'assets/css/woocommerce-layout.css' ),
|
||||
'deps' => '',
|
||||
'version' => $version,
|
||||
'media' => 'all',
|
||||
'has_rtl' => true,
|
||||
),
|
||||
'woocommerce-smallscreen' => array(
|
||||
'src' => self::get_asset_url( 'assets/css/woocommerce-smallscreen.css' ),
|
||||
'deps' => 'woocommerce-layout',
|
||||
'version' => $version,
|
||||
'media' => 'only screen and (max-width: ' . apply_filters( 'woocommerce_style_smallscreen_breakpoint', '768px' ) . ')',
|
||||
'has_rtl' => true,
|
||||
),
|
||||
'woocommerce-general' => array(
|
||||
'src' => self::get_asset_url( 'assets/css/woocommerce.css' ),
|
||||
'deps' => '',
|
||||
'version' => $version,
|
||||
'media' => 'all',
|
||||
'has_rtl' => true,
|
||||
),
|
||||
'woocommerce-blocktheme' => wc_current_theme_is_fse_theme() ? array(
|
||||
'src' => self::get_asset_url( 'assets/css/woocommerce-blocktheme.css' ),
|
||||
'deps' => '',
|
||||
'version' => $version,
|
||||
'media' => 'all',
|
||||
'has_rtl' => true,
|
||||
) : false,
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
@ -476,8 +487,8 @@ class WC_Frontend_Scripts {
|
|||
break;
|
||||
case 'wc-geolocation':
|
||||
$params = array(
|
||||
'wc_ajax_url' => WC_AJAX::get_endpoint( '%%endpoint%%' ),
|
||||
'home_url' => remove_query_arg( 'lang', home_url() ), // FIX for WPML compatibility.
|
||||
'wc_ajax_url' => WC_AJAX::get_endpoint( '%%endpoint%%' ),
|
||||
'home_url' => remove_query_arg( 'lang', home_url() ), // FIX for WPML compatibility.
|
||||
);
|
||||
break;
|
||||
case 'wc-single-product':
|
||||
|
|
Loading…
Reference in New Issue