initial commit
This commit is contained in:
@ -0,0 +1,65 @@
|
||||
/* stylelint-disable block-closing-brace-newline-after */
|
||||
|
||||
// Breakpoints
|
||||
// Forked from https://github.com/Automattic/wp-calypso/blob/46ae24d8800fb85da6acf057a640e60dac988a38/assets/stylesheets/shared/mixins/_breakpoints.scss
|
||||
|
||||
// Think very carefully before adding a new breakpoint.
|
||||
// The list below is based on wp-admin's main breakpoints
|
||||
// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
|
||||
$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
|
||||
|
||||
// @todo refactor breakpoints so they use the mixins from Gutenberg
|
||||
// https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
|
||||
@mixin breakpoint($sizes...) {
|
||||
@each $size in $sizes {
|
||||
@if type-of($size) == string {
|
||||
$approved-value: 0;
|
||||
@each $breakpoint in $breakpoints {
|
||||
$and-larger: ">" + $breakpoint;
|
||||
$and-smaller: "<" + $breakpoint;
|
||||
|
||||
@if $size == $and-smaller {
|
||||
$approved-value: 1;
|
||||
@media (max-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@if $size == $and-larger {
|
||||
$approved-value: 2;
|
||||
@media (min-width: $breakpoint + 1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@each $breakpoint-end in $breakpoints {
|
||||
$range: $breakpoint + "-" + $breakpoint-end;
|
||||
@if $size == $range {
|
||||
$approved-value: 3;
|
||||
@media (min-width: $breakpoint + 1) and (max-width: $breakpoint-end) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $approved-value == 0 {
|
||||
$sizes: "";
|
||||
@each $breakpoint in $breakpoints {
|
||||
$sizes: $sizes + " " + $breakpoint;
|
||||
}
|
||||
@warn "ERROR in breakpoint(#{ $size }) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
|
||||
}
|
||||
}
|
||||
@else {
|
||||
$sizes: "";
|
||||
@each $breakpoint in $breakpoints {
|
||||
$sizes: $sizes + " " + $breakpoint;
|
||||
}
|
||||
@error "ERROR in breakpoint(#{ $size }) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth($breakpoints, 1) } >#{ nth($breakpoints, 1) } #{ nth($breakpoints, 1) }-#{ nth($breakpoints, 2) } ]";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-enable */
|
||||
@ -0,0 +1,21 @@
|
||||
@import "node_modules/@wordpress/base-styles/colors";
|
||||
@import "node_modules/@automattic/color-studio/dist/color-variables";
|
||||
|
||||
// Bright colors
|
||||
$no-stock-color: $alert-red;
|
||||
$low-stock-color: $alert-yellow;
|
||||
$in-stock-color: $alert-green;
|
||||
$discount-color: $alert-green;
|
||||
|
||||
$placeholder-color: var(--global--color-primary, $gray-200);
|
||||
$input-border-gray: #50575e;
|
||||
$input-border-dark: rgba(255, 255, 255, 0.4);
|
||||
$input-disabled-dark: rgba(255, 255, 255, 0.3);
|
||||
$controls-border-dark: rgba(255, 255, 255, 0.6);
|
||||
$input-text-active: #2b2d2f;
|
||||
$input-placeholder-dark: rgba(255, 255, 255, 0.6);
|
||||
$input-text-dark: #fff;
|
||||
$input-background-dark: rgba(0, 0, 0, 0.1);
|
||||
$select-dropdown-dark: #1e1e1e;
|
||||
$select-dropdown-light: #fff;
|
||||
$select-item-dark: rgba(0, 0, 0, 0.4);
|
||||
194
packages/woocommerce-blocks/assets/css/abstracts/_mixins.scss
Normal file
194
packages/woocommerce-blocks/assets/css/abstracts/_mixins.scss
Normal file
@ -0,0 +1,194 @@
|
||||
$fontSizes: (
|
||||
"smaller": 0.75,
|
||||
"small": 0.875,
|
||||
"regular": 1,
|
||||
"large": 1.25,
|
||||
"larger": 2,
|
||||
);
|
||||
|
||||
// Maps a named font-size to its predefined size. Units default to em, but can
|
||||
// be changed using the multiplier parameter.
|
||||
@mixin font-size($sizeName, $multiplier: 1em) {
|
||||
font-size: map-get($fontSizes, $sizeName) * $multiplier;
|
||||
}
|
||||
|
||||
@keyframes loading-fade {
|
||||
0% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
// Adds animation to placeholder section
|
||||
@mixin placeholder() {
|
||||
animation: loading-fade 1.2s ease-in-out infinite;
|
||||
background-color: $placeholder-color !important;
|
||||
color: $placeholder-color !important;
|
||||
outline: 0 !important;
|
||||
border: 0 !important;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
max-width: 100%;
|
||||
|
||||
// Forces direct descendants to keep layout but lose visibility.
|
||||
> * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin force-content() {
|
||||
&::after {
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
|
||||
// Hide an element from sighted users, but available to screen reader users.
|
||||
@mixin visually-hidden() {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
|
||||
overflow-wrap: normal !important;
|
||||
word-wrap: normal !important;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
@mixin visually-hidden-focus-reveal() {
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: $input-text-active;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
height: auto;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
@mixin reset-box() {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
@mixin reset-typography() {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
text-decoration: inherit;
|
||||
text-transform: inherit;
|
||||
}
|
||||
|
||||
// Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.
|
||||
@mixin text-heading() {
|
||||
@include reset-box();
|
||||
@include reset-typography();
|
||||
box-shadow: none;
|
||||
display: inline;
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.
|
||||
@mixin text-button() {
|
||||
@include reset-box();
|
||||
@include reset-typography();
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
display: inline;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset <button> style so we can use link style for action buttons.
|
||||
@mixin link-button() {
|
||||
@include text-button();
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Makes sure long words are broken if they overflow the container.
|
||||
@mixin wrap-break-word() {
|
||||
// This is the current standard, works in most browsers.
|
||||
overflow-wrap: anywhere;
|
||||
// Safari supports word-break.
|
||||
word-break: break-word;
|
||||
// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
|
||||
-ms-word-break: break-all;
|
||||
}
|
||||
|
||||
// Shows a border with the current color and a custom opacity. That can't be achieved
|
||||
// with normal border because `currentColor` doesn't allow tweaking the opacity, and
|
||||
// setting the opacity of the entire element would change the children's opacity too.
|
||||
@mixin with-translucent-border($border-width: 1px, $opacity: 0.3) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
border-style: solid;
|
||||
border-width: $border-width;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
opacity: $opacity;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Wraps the content with a media query specially targeting IE11.
|
||||
@mixin ie11() {
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Converts a px unit to em.
|
||||
@function em($size, $base: 16px) {
|
||||
@return math.div($size, $base) * 1em;
|
||||
}
|
||||
|
||||
// Encodes hex colors so they can be used in URL content.
|
||||
@function encode-color($color) {
|
||||
@if type-of($color) != "color" or str-index(#{$color}, "#") != 1 {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
$hex: str-slice(ie-hex-str($color), 4);
|
||||
@return "%23" + unquote("#{$hex}");
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
@import "node_modules/@wordpress/base-styles/variables";
|
||||
|
||||
$gap-largest: $grid-unit-50;
|
||||
$gap-larger: 4.5 * $grid-unit;
|
||||
$gap-large: $grid-unit-30;
|
||||
$gap: $grid-unit-20;
|
||||
$gap-small: $grid-unit-15;
|
||||
$gap-smaller: $grid-unit-10;
|
||||
$gap-smallest: $grid-unit-05;
|
||||
|
||||
// Cart block
|
||||
$cart-image-width: 5rem;
|
||||
74
packages/woocommerce-blocks/assets/css/editor.scss
Normal file
74
packages/woocommerce-blocks/assets/css/editor.scss
Normal file
@ -0,0 +1,74 @@
|
||||
// Import the woocommerce components stylesheet
|
||||
@import "~@woocommerce/components/build-style/style.css";
|
||||
|
||||
// Hack to hide preview overflow.
|
||||
.editor-block-preview__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Align the block icons in edit mode
|
||||
.components-placeholder__label .gridicon,
|
||||
.components-placeholder__label .material-icon {
|
||||
margin-right: 1ch;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Remove the list styling, which is added back by core GB styles.
|
||||
.editor-styles-wrapper {
|
||||
.wc-block-grid {
|
||||
.wc-block-grid__products {
|
||||
list-style: none;
|
||||
margin: 0 (-$gap*0.5) $gap;
|
||||
padding: 0;
|
||||
|
||||
.wc-block-grid__product {
|
||||
margin: 0 0 $gap-large 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.components-placeholder {
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
&.is-loading,
|
||||
&.is-not-found {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style inline notices in the inspector.
|
||||
.components-base-control {
|
||||
+ .wc-block-base-control-notice {
|
||||
margin: -$gap 0 $gap;
|
||||
}
|
||||
|
||||
& + .wc-block-base-control-notice:last-child {
|
||||
margin: -$gap 0 $gap-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Selectors with extra specificity to override some editor styles.
|
||||
.woocommerce-search-list__list.woocommerce-search-list__list {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.woocommerce-search-list__selected.woocommerce-search-list__selected > ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.theme-twentytwenty {
|
||||
.wp-block {
|
||||
.wc-block-grid__product-title,
|
||||
.wc-block-active-filters__title,
|
||||
.wc-block-attribute-filter__title,
|
||||
.wc-block-price-filter__title,
|
||||
.wc-block-stock-filter__title {
|
||||
@include font-size(regular);
|
||||
}
|
||||
}
|
||||
}
|
||||
325
packages/woocommerce-blocks/assets/css/style.scss
Normal file
325
packages/woocommerce-blocks/assets/css/style.scss
Normal file
@ -0,0 +1,325 @@
|
||||
.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: $twentytwenty-highlights-color;
|
||||
@include font-size(regular);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.wc-block-active-filters__title,
|
||||
.wc-block-attribute-filter__title,
|
||||
.wc-block-price-filter__title,
|
||||
.wc-block-stock-filter__title {
|
||||
@include font-size(regular);
|
||||
}
|
||||
|
||||
.wc-block-active-filters .wc-block-active-filters__clear-all {
|
||||
@include font-size(smaller);
|
||||
}
|
||||
|
||||
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
|
||||
@include font-size(smaller);
|
||||
padding: em($gap-smaller);
|
||||
}
|
||||
|
||||
@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();
|
||||
}
|
||||
Reference in New Issue
Block a user