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

81 lines
1.3 KiB
SCSS
Raw Normal View History

.wc-block-components-button:not(.is-link) {
@include reset-typography();
align-items: center;
display: inline-flex;
font-weight: bold;
min-height: 3em;
justify-content: center;
line-height: 1;
padding: 0 em($gap);
text-align: center;
text-decoration: none;
text-transform: none;
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;
}
}
&.contained {
background-color: $gray-900;
color: $white;
&:disabled,
&:hover,
&:focus,
&:active {
background-color: $gray-900;
color: $white;
}
&:hover {
opacity: 0.9;
}
}
&.outlined {
background-color: transparent;
color: $gray-900;
&:not(:focus) {
box-shadow: inset 0 0 0 1px $gray-900;
}
&:disabled,
&:hover,
&:focus,
&:active {
background-color: $gray-900;
color: $white;
}
&:hover {
background-color: $gray-900;
color: $white;
opacity: 1;
}
}
}