108 lines
2.0 KiB
SCSS
108 lines
2.0 KiB
SCSS
@mixin reset-button {
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: none transparent;
|
|
box-shadow: none;
|
|
|
|
&:focus {
|
|
outline: 2px solid $core-grey-light-600;
|
|
}
|
|
}
|
|
|
|
.wc-block-components-quantity-selector {
|
|
display: flex;
|
|
min-width: 100px;
|
|
border: 1px solid $core-grey-light-600;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
// needed so that buttons fill the container.
|
|
box-sizing: content-box;
|
|
|
|
.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: $core-grey-light-200;
|
|
outline: 1px solid $core-grey-light-600;
|
|
}
|
|
&:disabled {
|
|
color: $core-grey-dark-100;
|
|
}
|
|
|
|
.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: $core-grey-dark-700;
|
|
font-style: normal;
|
|
text-align: center;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
@include reset-button;
|
|
color: $core-grey-dark-900;
|
|
}
|
|
&:disabled {
|
|
color: $core-grey-dark-100;
|
|
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;
|
|
}
|
|
}
|