@mixin reset-button {
border: 0;
padding: 0;
margin: 0;
background: none transparent;
box-shadow: none;
&:focus {
outline: 2px solid $gray-300;
}
}
.wc-block-components-quantity-selector {
display: flex;
width: 107px;
border: 1px solid $gray-300;
background: #fff;
border-radius: 4px;
// needed so that buttons fill the container.
box-sizing: content-box;
margin: 0 0 0.25em 0;
.has-dark-controls & {
background-color: transparent;
border-color: $input-border-dark;
}
// Extra label for specificity needed in the editor.
input.wc-block-components-quantity-selector__input {
@include font-size(regular);
order: 2;
min-width: 40px;
flex: 1 1 auto;
border: 0;
padding: 0.4em 0;
margin: 0;
text-align: center;
background: transparent;
box-shadow: none;
color: #000;
line-height: 1;
vertical-align: middle;
-moz-appearance: textfield;
&:focus {
background: $gray-100;
outline: 1px solid $gray-300;
}
&:disabled {
color: $gray-600;
}
.has-dark-controls & {
color: $input-text-dark;
background: transparent;
&:focus {
background: transparent;
}
&:disabled {
color: $input-disabled-dark;
}
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.wc-block-components-quantity-selector__button {
@include reset-button;
@include font-size(regular);
min-width: 30px;
cursor: pointer;
color: $gray-900;
font-style: normal;
text-align: center;
text-decoration: none;
&:hover,
&:focus {
@include reset-button;
color: $gray-900;
}
&:disabled {
color: $gray-600;
cursor: default;
@include reset-button;
}
.has-dark-controls & {
color: $input-text-dark;
&:hover,
&:focus {
color: $input-text-dark;
}
&:disabled {
color: $input-disabled-dark;
}
}
}
> .wc-block-components-quantity-selector__button--minus {
order: 1;
}
> .wc-block-components-quantity-selector__button--plus {
order: 3;
}
}
.theme-twentyseventeen {
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
&:hover,
&:focus {
background: none transparent;
}
}
}