@rakuten-rex/stepper
Version:
Input Stepper is a UI control used to incrementally increase of decrease a numeric value.
62 lines (61 loc) • 2.05 kB
CSS
/*!
*
* @license @rakuten-rex/stepper v1.6.0 2020-07-01
* LabelUi/LabelUi.development.css
*
* Copyright (c) 2018-present, Rakuten, Inc.
*
* This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.
*/
.rex-stepper-label-ui {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
background-color: inherit;
color: var(--rex-stepper-label-theme-text, #606060);
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
font-size: 0.75rem;
line-height: 1.5;
text-align: left;
transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.rex-stepper-label-ui,
.rex-stepper-label-ui:after,
.rex-stepper-label-ui:before {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.rex-stepper-label-ui.hover {
color: var(--rex-stepper-label-theme-hover-text, #1364ff);
}
.rex-stepper-label-ui.disabled,
.rex-stepper-label-ui.disabled.active,
.rex-stepper-label-ui.disabled.focus,
.rex-stepper-label-ui.disabled:active,
.rex-stepper-label-ui.disabled:focus,
.rex-stepper-label-ui[disabled],
.rex-stepper-label-ui[disabled].active,
.rex-stepper-label-ui[disabled].focus,
.rex-stepper-label-ui[disabled]:active,
.rex-stepper-label-ui[disabled]:focus {
color: var(--rex-stepper-label-theme-disabled-text, #898989);
}
.rex-stepper-label-ui.active,
.rex-stepper-label-ui.focus,
.rex-stepper-label-ui:active,
.rex-stepper-label-ui:focus {
outline: none;
}
.rex-stepper-label-ui.active:not([disabled]),
.rex-stepper-label-ui.focus:not([disabled]),
.rex-stepper-label-ui:active:not([disabled]),
.rex-stepper-label-ui:focus:not([disabled]) {
color: var(--rex-stepper-label-theme-active-text, #1364ff);
}