woocommerce/plugins/woocommerce-blocks/assets/js/base/components/button/style.scss

82 lines
1.3 KiB
SCSS
Raw Normal View History

.wc-block-components-button:not(.is-link) {
align-items: center;
display: inline-flex;
Add theme-level global styles to Cart and Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/8809) * Dummy commit to open a PR * Revert the last change * Ensure Checkout block supports the theme-level global styles for `Colors » Buttons` (https://github.com/woocommerce/woocommerce-blocks/pull/8844) * Add GS support for button colors in Checkout block * Sync button hover effect with GB * Fix link margin/padding (https://github.com/woocommerce/woocommerce-blocks/pull/8908) * Replace <AddToCartButton /> with <ProductButton /> (https://github.com/woocommerce/woocommerce-blocks/pull/8914) * Add GS support for button typography in Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/8918) * Ensure Checkout block supports the theme-level global styles for Typography » Buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8892) * Remove classname from cart image to avoid conflicts (https://github.com/woocommerce/woocommerce-blocks/pull/8898) Co-authored-by: Niels Lange <info@nielslange.de> * Use consistent and semantically correct HTML elements in the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/9065) * Allow button height to adjust * Ensure to display full width heading background * Inherit font style and font weight for headings * Inherit font style and font weight for textarea * Inherit font family and font weight for buttons --------- Co-authored-by: Niels Lange <info@nielslange.de> Co-authored-by: Mike Jolley <mike.jolley@me.com>
2023-04-21 20:11:10 +00:00
height: auto;
justify-content: center;
text-align: center;
position: relative;
transition: box-shadow 0.1s linear;
&:focus {
box-shadow: 0 0 0 2px $studio-blue;
box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $studio-blue;
outline: 3px solid transparent;
}
.wc-block-components-button__text {
display: block;
> svg {
fill: currentColor;
}
}
Update Express Payments Loading UI (https://github.com/woocommerce/woocommerce-blocks/pull/4228) * Separate button spinner to separate component for reuse * Use block checkout spinner in loading mask * Block pointer events within loading mask * Give the useRef within useShallowEqual a default value This prevents the potential of having an undefined value returned. * State setter and dispatch are stable These do not need to be used as dependencies. * Prevent re-renders of children when using loading mask. This prevents children being rerendered and losing state. Loading styles are applied instead using a classname, but leaving the divs in place. * Use memoization to to prevent excessive express payment rerenders * Wrap express payment in loading mask * Show loading state after submission * remove eslint exclusion * Move spinner to base components so it's available outside of the checkout package * Avoid extra is-loading classname * Update snaps/fix tests * Remove memorization of payment method content due to stale data * Express payment error handling * Split up payment method context to make it more manageable * Add blocking logic to cart * Update snap * Restore useRef * Fix missing function removed by accident * Fix setActivePaymentMethod and started status (so saved methods still allow express to be initialized) * Loading Mask Todo * Remove boolean shallow equals * Missing dep * Memoize typo * Document changes in useStoreEvents * Replace expressPaymentMethodActive * setExpressPaymentError deprecation * Only change status if an error is passed * Track disabled state via useCheckoutSubmit * useCallback on error message functions * Fix mocks in test
2021-06-16 12:44:40 +00:00
.wc-block-components-spinner + .wc-block-components-button__text {
visibility: hidden;
}
&.text {
color: $gray-900;
&:hover {
opacity: 0.9;
}
}
&:disabled {
.wc-block-components-button__text {
opacity: 0.5;
}
}
&.outlined {
background: transparent;
color: currentColor;
&:not(:focus) {
box-shadow: inset 0 0 0 1px currentColor;
}
&:disabled,
&:hover,
&:focus,
&:active {
background-color: $gray-900;
color: $white;
}
&:hover {
background-color: $gray-900;
color: $white;
opacity: 1;
}
}
}
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
min-height: 3em;
&:focus {
box-shadow: 0 0 0 2px $studio-blue;
box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $studio-blue;
outline: 3px solid transparent;
}
&.text {
color: $gray-900;
&:hover {
opacity: 0.9;
}
}
}