woocommerce/plugins/woocommerce-blocks/assets/css/style.scss

115 lines
1.9 KiB
SCSS
Raw Normal View History

.wp-block-woocommerce-handpicked-products,
.wp-block-woocommerce-product-best-sellers,
.wp-block-woocommerce-product-category,
.wp-block-woocommerce-product-top-rated,
.wp-block-woocommerce-products-by-attribute {
&.is-hidden-title {
.woocommerce-loop-product__title {
display: none !important;
}
}
&.is-hidden-price {
.price {
display: none !important;
}
}
&.is-hidden-rating {
.star-rating {
display: none;
}
}
&.is-hidden-button {
.add_to_cart_button {
display: none !important;
}
}
}
.wc-block-grid {
Update/dynamic grid blocks html (https://github.com/woocommerce/woocommerce-blocks/pull/567) * Add grid block base class to handle rendering all grid blocks Using code from the shortcode handler to create the query, subclass into newest product to show use * Update preview content to match rendering from the new grid block handler * Fix the categories query builder * Update order of rating/price * Remove center alignment * Extract rating & button into separate functions * Wrap the content in a link * Add the current class names for better theme support * Fix some styling in editor preview & frontend * Add back the deprecated cols support for existing blocks * Add multiple-rows class, style tweaks * Switch Newest Products to dynamic rendering, deprecate existing shortcode method * Add “On Sale” flag * Switch “On Sale Products” to dynamic rendering * Fix reusable block preview * Add correct classes to On Sale Products * Remove dynamic blocks from CSS hidden content rules Content is not output to browser now, so we don’t need to hide it * Fix undefined parameters * Fix attributes for on sale * Add deprecation comment, use more descriptive function name * Addressing review feedback * Update test: classnames have changed, image now wrapped in div * Disable HTML editing for dynamic blocks * Moved rendering logic into block library * Update HTML rendering for products and remove core template functions * Update styling * Put the wp block class back * Remove style import * Move container classes to div not the ul * Remove visibility classes * Avoid rending non-visible items * Revert style additons for visbility * Fix CSS now that class names have shifted
2019-05-16 16:30:40 +00:00
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0;
}
&.has-1-columns {
Update/dynamic grid blocks html (https://github.com/woocommerce/woocommerce-blocks/pull/567) * Add grid block base class to handle rendering all grid blocks Using code from the shortcode handler to create the query, subclass into newest product to show use * Update preview content to match rendering from the new grid block handler * Fix the categories query builder * Update order of rating/price * Remove center alignment * Extract rating & button into separate functions * Wrap the content in a link * Add the current class names for better theme support * Fix some styling in editor preview & frontend * Add back the deprecated cols support for existing blocks * Add multiple-rows class, style tweaks * Switch Newest Products to dynamic rendering, deprecate existing shortcode method * Add “On Sale” flag * Switch “On Sale Products” to dynamic rendering * Fix reusable block preview * Add correct classes to On Sale Products * Remove dynamic blocks from CSS hidden content rules Content is not output to browser now, so we don’t need to hide it * Fix undefined parameters * Fix attributes for on sale * Add deprecation comment, use more descriptive function name * Addressing review feedback * Update test: classnames have changed, image now wrapped in div * Disable HTML editing for dynamic blocks * Moved rendering logic into block library * Update HTML rendering for products and remove core template functions * Update styling * Put the wp block class back * Remove style import * Move container classes to div not the ul * Remove visibility classes * Avoid rending non-visible items * Revert style additons for visbility * Fix CSS now that class names have shifted
2019-05-16 16:30:40 +00:00
ul {
display: block;
}
.wc-block-grid__product {
margin-left: auto;
margin-right: auto;
}
}
@for $i from 2 to 9 {
&.has-#{$i}-columns .wc-block-grid__product {
flex: 1 0 calc(#{ 100% / $i });
max-width: 100% / $i;
}
}
.wc-block-grid__product-title {
line-height: 1.2;
}
&.has-4-columns:not(.alignwide):not(.alignfull),
&.has-5-columns:not(.alignfull),
&.has-6-columns:not(.alignfull),
&.has-7-columns,
&.has-8-columns {
.wc-block-grid__product-title {
font-size: 0.9em;
}
.wc-block-grid__product-price {
font-size: 0.8em;
}
.wc-block-grid__product-add-to-cart {
font-size: 0.8em;
line-height: 1.4;
}
}
.wc-block-grid__product {
padding-left: $gap/2;
padding-right: $gap/2;
.wc-block-grid__product-image img {
vertical-align: middle;
}
.wc-block-grid__product-image,
.wc-block-grid__product-title,
.wc-block-grid__product-price,
.wc-block-grid__product-rating {
margin-bottom: $gap-small;
}
.wc-block-grid__product-add-to-cart a {
word-break: break-word;
}
}
&.has-multiple-rows .wc-block-grid__product {
margin-bottom: $gap-large;
}
// Remove some default storefront styles.
Update/dynamic grid blocks html (https://github.com/woocommerce/woocommerce-blocks/pull/567) * Add grid block base class to handle rendering all grid blocks Using code from the shortcode handler to create the query, subclass into newest product to show use * Update preview content to match rendering from the new grid block handler * Fix the categories query builder * Update order of rating/price * Remove center alignment * Extract rating & button into separate functions * Wrap the content in a link * Add the current class names for better theme support * Fix some styling in editor preview & frontend * Add back the deprecated cols support for existing blocks * Add multiple-rows class, style tweaks * Switch Newest Products to dynamic rendering, deprecate existing shortcode method * Add “On Sale” flag * Switch “On Sale Products” to dynamic rendering * Fix reusable block preview * Add correct classes to On Sale Products * Remove dynamic blocks from CSS hidden content rules Content is not output to browser now, so we don’t need to hide it * Fix undefined parameters * Fix attributes for on sale * Add deprecation comment, use more descriptive function name * Addressing review feedback * Update test: classnames have changed, image now wrapped in div * Disable HTML editing for dynamic blocks * Moved rendering logic into block library * Update HTML rendering for products and remove core template functions * Update styling * Put the wp block class back * Remove style import * Move container classes to div not the ul * Remove visibility classes * Avoid rending non-visible items * Revert style additons for visbility * Fix CSS now that class names have shifted
2019-05-16 16:30:40 +00:00
.site-main & .products li.product {
float: none;
width: auto;
margin-right: 0;
margin-top: 0;
}
}