Product preview: Update "Add to cart" button to inherit theme's button styles (https://github.com/woocommerce/woocommerce-blocks/pull/223)
* Remove button styling & add classes to inherit style from core button * Update to CSS grid * Prevent warnings when running autoprefixer * Update spacing in preview * Update snapshots to reflect button markup change * Switch to flexbox for IE 11 support * Remove CSS grid autoprefixer support * Fix spacing on preview items * Fix stylelint issue * Remove unnecessary rule
This commit is contained in:
Kelly Dwan
GitHub
parent
15802e9c71
commit
e3dab1cbcc
|
|
@ -9,6 +9,28 @@
|
|||
|
||||
.wc-block-products-category {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.is-loading,
|
||||
&.is-not-found,
|
||||
&.cols-1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wc-product-preview {
|
||||
flex: 1;
|
||||
padding: $gap/2;
|
||||
}
|
||||
|
||||
@for $i from 2 to 7 {
|
||||
&.cols-#{$i} .wc-product-preview {
|
||||
max-width: calc(#{ 100% / $i });
|
||||
min-width: calc(#{ 100% / $i });
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.components-placeholder {
|
||||
padding: 2em 1em;
|
||||
|
|
@ -17,26 +39,10 @@
|
|||
.editor-block-preview & {
|
||||
min-width: 5em;
|
||||
|
||||
.wc-product-preview__title,
|
||||
.wc-product-preview__price,
|
||||
.wc-product-preview__add-to-cart {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
&.cols-2 {
|
||||
min-width: 2 * 5em;
|
||||
}
|
||||
&.cols-3 {
|
||||
min-width: 3 * 5em;
|
||||
}
|
||||
&.cols-4 {
|
||||
min-width: 4 * 5em;
|
||||
}
|
||||
&.cols-5 {
|
||||
min-width: 5 * 5em;
|
||||
}
|
||||
&.cols-6 {
|
||||
min-width: 6 * 5em;
|
||||
@for $i from 1 to 7 {
|
||||
&.cols-#{$i} {
|
||||
min-width: $i * 5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading,
|
||||
|
|
|
|||
|
|
@ -26,8 +26,10 @@ const ProductPreview = ( { product } ) => {
|
|||
className="wc-product-preview__price"
|
||||
dangerouslySetInnerHTML={ { __html: product.price_html } }
|
||||
/>
|
||||
<span className="wc-product-preview__add-to-cart">
|
||||
{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }
|
||||
<span className="wp-block-button">
|
||||
<span className="wc-product-preview__add-to-cart wp-block-button__link">
|
||||
{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,90 +1,47 @@
|
|||
.wc-product-preview {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-right: 3.8%;
|
||||
margin-bottom: $gap;
|
||||
|
||||
.cols-1 & {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
.wc-product-preview__title,
|
||||
.wc-product-preview__price {
|
||||
margin-top: $gap-smallest;
|
||||
}
|
||||
|
||||
.cols-2 & {
|
||||
width: 48%;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
.wp-block-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cols-3 & {
|
||||
width: 30.75%;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.cols-4 & {
|
||||
width: 22.05%;
|
||||
|
||||
&:nth-of-type(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+1) {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.cols-5 & {
|
||||
width: 16.9%;
|
||||
|
||||
&:nth-of-type(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(5n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.wc-product-preview__add-to-cart {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.wc-product-preview__add-to-cart {
|
||||
cursor: text;
|
||||
margin: $gap-small 0 0;
|
||||
}
|
||||
|
||||
.cols-4 &,
|
||||
.cols-5 &,
|
||||
.cols-6 & {
|
||||
width: 13.5%;
|
||||
|
||||
&:nth-of-type(6n) {
|
||||
margin-right: 0;
|
||||
.wc-product-preview__title {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&:nth-of-type(6n+1) {
|
||||
clear: both;
|
||||
.wc-product-preview__price {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.wc-product-preview__add-to-cart {
|
||||
font-size: 0.75em;
|
||||
font-size: 0.7em !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-block-preview & {
|
||||
.wc-product-preview__title {
|
||||
font-size: 0.7em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.wc-product-preview__price {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
.wc-product-preview__add-to-cart {
|
||||
font-size: 0.6em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-product-preview__add-to-cart {
|
||||
display: inline-block;
|
||||
background: #ababab;
|
||||
border-radius: 1.5em;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 0.75em 1.25em;
|
||||
line-height: 1.2em;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,9 +22,13 @@ exports[`ProductPreview should render a single product preview with an image 1`]
|
|||
}
|
||||
/>
|
||||
<span
|
||||
className="wc-product-preview__add-to-cart"
|
||||
className="wp-block-button"
|
||||
>
|
||||
Add to cart
|
||||
<span
|
||||
className="wc-product-preview__add-to-cart wp-block-button__link"
|
||||
>
|
||||
Add to cart
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -47,9 +51,13 @@ exports[`ProductPreview should render a single product preview without an image
|
|||
}
|
||||
/>
|
||||
<span
|
||||
className="wc-product-preview__add-to-cart"
|
||||
className="wp-block-button"
|
||||
>
|
||||
Add to cart
|
||||
<span
|
||||
className="wc-product-preview__add-to-cart wp-block-button__link"
|
||||
>
|
||||
Add to cart
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require( 'autoprefixer' )( { grid: true } ),
|
||||
]
|
||||
}
|
||||
plugins: [ require( 'autoprefixer' )( { browsers: [ '>1%' ] } ) ],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue