| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 |
- .wc-block-link-button {
- @include link-button();
- }
- .wc-block-suspense-placeholder {
- @include placeholder();
- @include force-content();
- }
- // These styles are for the server side rendered product grid blocks.
- .wc-block-grid__products .wc-block-grid__product-image {
- text-decoration: none;
- display: block;
- position: relative;
- a {
- text-decoration: none;
- border: 0;
- outline: 0;
- box-shadow: none;
- }
- img {
- height: auto;
- width: 100%;
- &[hidden] {
- display: none;
- }
- }
- }
- .edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title,
- .editor-styles-wrapper .wc-block-grid__product-title,
- .wc-block-grid__product-title {
- font-family: inherit;
- line-height: 1.2em;
- font-weight: 700;
- padding: 0;
- color: inherit;
- font-size: inherit;
- display: block;
- }
- .wc-block-grid__product-price {
- display: block;
- .wc-block-grid__product-price__regular {
- margin-right: 0.5em;
- }
- }
- .wc-block-grid__product-add-to-cart.wp-block-button {
- word-break: break-word;
- white-space: normal;
- .wp-block-button__link {
- word-break: break-word;
- white-space: normal;
- margin: 0 auto !important;
- display: inline-flex;
- justify-content: center;
- text-align: center;
- // Set button font size and padding so it inherits from parent.
- padding: 0.5em 1em;
- font-size: 1em;
- &.loading {
- opacity: 0.25;
- }
- &.added::after {
- font-family: WooCommerce; /* stylelint-disable-line */
- content: "\e017";
- margin-left: 0.5em;
- display: inline-block;
- width: auto;
- height: auto;
- }
- &.loading::after {
- font-family: WooCommerce; /* stylelint-disable-line */
- content: "\e031";
- animation: spin 2s linear infinite;
- margin-left: 0.5em;
- display: inline-block;
- width: auto;
- height: auto;
- }
- }
- }
- // Remove button sugar if unlikely to fit.
- .has-5-columns:not(.alignfull),
- .has-6-columns,
- .has-7-columns,
- .has-8-columns,
- .has-9-columns {
- .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after {
- content: "";
- margin: 0;
- }
- }
- .wc-block-grid__product-rating {
- display: block;
- .wc-block-grid__product-rating__stars,
- .star-rating {
- overflow: hidden;
- position: relative;
- width: 5.3em;
- height: 1.618em;
- line-height: 1.618;
- font-size: 1em;
- /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
- font-family: star;
- font-weight: 400;
- margin: 0 auto;
- text-align: left;
- &::before {
- content: "\53\53\53\53\53";
- top: 0;
- left: 0;
- right: 0;
- position: absolute;
- opacity: 0.5;
- color: #aaa;
- white-space: nowrap;
- }
- span {
- overflow: hidden;
- top: 0;
- left: 0;
- right: 0;
- position: absolute;
- padding-top: 1.5em;
- }
- span::before {
- content: "\53\53\53\53\53";
- top: 0;
- left: 0;
- right: 0;
- position: absolute;
- color: #000;
- white-space: nowrap;
- }
- }
- }
- .wc-block-grid__product-onsale {
- @include font-size(small);
- padding: em($gap-smallest) em($gap-small);
- display: inline-block;
- width: auto;
- border: 1px solid #43454b;
- border-radius: 3px;
- color: #43454b;
- background: #fff;
- text-align: center;
- text-transform: uppercase;
- font-weight: 600;
- z-index: 9;
- position: relative;
- }
- // Element spacing.
- .wc-block-grid__product {
- .wc-block-grid__product-image,
- .wc-block-grid__product-title {
- margin: 0 0 $gap-small;
- }
- // If centered when toggling alignment on, use auto margins to prevent flexbox stretching it.
- .wc-block-grid__product-price,
- .wc-block-grid__product-rating,
- .wc-block-grid__product-add-to-cart,
- .wc-block-grid__product-onsale {
- margin: 0 auto $gap-small;
- }
- }
- .theme-twentysixteen {
- .wc-block-grid {
- // Prevent white theme styles.
- .price ins {
- color: #77a464;
- }
- }
- }
- .theme-twentynineteen {
- .wc-block-grid__product {
- font-size: 0.88889em;
- }
- // Change the title font to match headings.
- .wc-block-grid__product-title,
- .wc-block-grid__product-onsale,
- .wc-block-components-product-title,
- .wc-block-components-product-sale-badge {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
- }
- .wc-block-grid__product-title::before {
- display: none;
- }
- .wc-block-grid__product-onsale,
- .wc-block-components-product-sale-badge {
- line-height: 1;
- }
- .editor-styles-wrapper .wp-block-button .wp-block-button__link:not(.has-text-color) {
- color: #fff;
- }
- }
- .theme-twentytwenty {
- $twentytwenty-headings: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans-serif;
- $twentytwenty-highlights-color: #cd2653;
- .wc-block-grid__product-link {
- color: #000;
- }
- .wc-block-grid__product-title,
- .wc-block-components-product-title {
- font-family: $twentytwenty-headings;
- color: #000;
- font-size: 1.2em;
- }
- .wp-block-columns .wc-block-components-product-title {
- margin-top: 0;
- }
- .wc-block-grid__product-price,
- .wc-block-components-product-price {
- &__value,
- .woocommerce-Price-amount {
- font-family: $twentytwenty-headings;
- font-size: 0.9em;
- }
- del {
- opacity: 0.5;
- }
- ins {
- text-decoration: none;
- }
- }
- .wc-block-grid__product-rating,
- .star-rating {
- font-size: 0.7em;
- .wc-block-grid__product-rating__stars,
- .wc-block-components-product-rating__stars {
- line-height: 1;
- }
- }
- .wc-block-grid__product-add-to-cart > .wp-block-button__link,
- .wc-block-components-product-button > .wp-block-button__link {
- font-family: $twentytwenty-headings;
- }
- .wc-block-grid__products .wc-block-grid__product-onsale,
- .wc-block-components-product-sale-badge {
- background: $twentytwenty-highlights-color;
- color: #fff;
- font-family: $twentytwenty-headings;
- font-weight: 700;
- letter-spacing: -0.02em;
- line-height: 1.2;
- text-transform: uppercase;
- }
- // Override style from WC Core that set its position to absolute.
- // These rulesets can be removed once https://github.com/woocommerce/woocommerce/pull/26516 is released.
- .wc-block-grid__products .wc-block-components-product-sale-badge {
- position: static;
- }
- .wc-block-grid__products .wc-block-grid__product-image .wc-block-components-product-sale-badge {
- position: absolute;
- }
- // These styles are not applied to the All Products atomic block, so it can be positioned normally.
- .wc-block-grid__products .wc-block-grid__product-onsale:not(.wc-block-components-product-sale-badge) {
- position: absolute;
- right: 4px;
- top: 4px;
- z-index: 1;
- }
- @media only screen and (min-width: 768px) {
- .wc-block-grid__products .wc-block-grid__product-onsale {
- @include font-size(small);
- padding: em($gap-smaller);
- }
- }
- @media only screen and (min-width: 1168px) {
- .wc-block-grid__products .wc-block-grid__product-onsale {
- @include font-size(small);
- padding: em($gap-smaller);
- }
- }
- }
- // Default screen-reader styles. Included as a fallback for themes that don't have support.
- .screen-reader-text {
- @include visually-hidden();
- }
- .screen-reader-text:focus {
- @include visually-hidden-focus-reveal();
- }
|