| 1 |
/** |
| 2 |
* Shared corrections for WooCommerce loop markup rendered inside King Addons widgets. |
| 3 |
* |
| 4 |
* WooCommerce styles its sale badge with min-width and min-height of 3.236em |
| 5 |
* and border-radius:100%, but also gives it line-height:3.236 and padding:.202em. |
| 6 |
* The padding lands on top of the line box, so the badge ends up 3.64em tall |
| 7 |
* against 3.236em wide - a vertical ellipse rather than the circle the |
| 8 |
* border-radius is asking for. Centring the text with flex instead of a tall |
| 9 |
* line box lets both minimums decide the size. |
| 10 |
* |
| 11 |
* Scoped to the widgets that render product loops, so a theme's own shop pages |
| 12 |
* keep whatever they already look like. |
| 13 |
* |
| 14 |
* ".onsale.onsale" is not a typo: WooCommerce's own rule is ".woocommerce |
| 15 |
* span.onsale", and on pages where that .woocommerce wrapper sits inside the |
| 16 |
* widget it outweighs a single class here. Repeating the class settles it |
| 17 |
* without reaching for !important. |
| 18 |
*/ |
| 19 |
.elementor-widget-woo_shortcode_products span.onsale.onsale, |
| 20 |
.elementor-widget-woo_shortcode_product_page span.onsale.onsale, |
| 21 |
.elementor-widget-woo_shortcode_product_category span.onsale.onsale, |
| 22 |
.elementor-widget-woo_product_related span.onsale.onsale, |
| 23 |
.elementor-widget-woo_product_upsell span.onsale.onsale, |
| 24 |
.elementor-widget-woo_product_cross_sell span.onsale.onsale, |
| 25 |
.elementor-widget-woo_cart_cross_sells span.onsale.onsale, |
| 26 |
.elementor-widget-woo_shortcode_cart span.onsale.onsale { |
| 27 |
display: inline-flex; |
| 28 |
align-items: center; |
| 29 |
justify-content: center; |
| 30 |
line-height: 1; |
| 31 |
box-sizing: border-box; |
| 32 |
|
| 33 |
/* A long label - "-30%", or a translation - grows sideways into a pill of |
| 34 |
the same height rather than wrapping and stretching the circle. Horizontal |
| 35 |
padding stays at WooCommerce's own .202em: widening it pushed "Sale!" past |
| 36 |
the 3.236em minimum and produced an ellipse the other way round. */ |
| 37 |
white-space: nowrap; |
| 38 |
} |
| 39 |
|
