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

81 lines
1.3 KiB
SCSS

.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;
}
}
.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;
}
}
}