@rakuten-rex/stepper
Version:
Input Stepper is a UI control used to incrementally increase of decrease a numeric value.
9 lines • 3.8 kB
CSS
/*!
*
* @license @rakuten-rex/stepper v1.6.0 2020-07-01
* Stepper/Stepper.production.min.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{-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: #333;display: flex;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: 1rem;line-height: 1.5;margin: var(--rex-stepper-theme-margin-top,0) var(--rex-stepper-theme-margin-right,0) var(--rex-stepper-theme-margin-bottom,.5rem) var(--rex-stepper-theme-margin-left,0);text-align: left}.rex-stepper,.rex-stepper:after,.rex-stepper: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 input::-webkit-inner-spin-button,.rex-stepper input::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0}.rex-stepper input[type=number]{-moz-appearance: textfield}.rex-stepper button{box-sizing: border-box;font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;padding: 0;text-transform: none}.rex-stepper button::-moz-focus-inner{border-style: none;padding: 0}.rex-stepper .rex-icon-button{background-color: var(--rex-stepper-theme-button,#fff);border: none;height: 2rem;outline: none;padding: 0;transition: all .25s ease;width: 2.5rem}.rex-stepper .rex-icon-button svg path{fill: var(--rex-stepper-theme-default-icon,#606060)}.rex-stepper .rex-icon-button:focus{outline: none}.rex-stepper .rex-icon-button.hover:not([disabled]),.rex-stepper .rex-icon-button:hover:not([disabled]){background-color: var(--rex-stepper-theme-hover-button,#1364ff)}.rex-stepper .rex-icon-button.hover svg path,.rex-stepper .rex-icon-button:hover svg path{fill: var(--rex-stepper-theme-hover-icon,#fff)}.rex-stepper .rex-icon-button.active:not([disabled]),.rex-stepper .rex-icon-button.focus:not([disabled]),.rex-stepper .rex-icon-button:active:not([disabled]),.rex-stepper .rex-icon-button:focus:not([disabled]){background-color: var(--rex-stepper-theme-active-button,#1364ff)}.rex-stepper .rex-icon-button.active svg path,.rex-stepper .rex-icon-button.focus svg path,.rex-stepper .rex-icon-button:active svg path,.rex-stepper .rex-icon-button:focus svg path{fill: var(--rex-stepper-theme-active-icon,#fff)}.rex-stepper .rex-icon-button.disabled:not(.hover),.rex-stepper .rex-icon-button:disabled:not(.hover){background-color: var(--rex-stepper-theme-disabled-button,#fff);pointer-events: none}.rex-stepper .rex-icon-button.disabled svg path,.rex-stepper .rex-icon-button:disabled svg path{fill: var(--rex-stepper-theme-disabled-icon,#898989)}.rex-stepper .rex-icon-button svg:hover path{fill: var(--rex-stepper-theme-hover-icon,#fff)}.rex-stepper .rex-stepper-counter{background: var(--rex-stepper-theme-background,#fff);border: none;box-sizing: border-box;color: var(--rex-stepper-theme-number-text,#333);display: inline-block;font-size: 1rem;height: 2rem;line-height: 2rem;min-width: 3.5rem;outline: none;text-align: center;vertical-align: top;width: 100%}.rex-stepper .rex-stepper-counter:focus{outline: none}.rex-stepper .rex-stepper-counter:disabled:not(.hover){-webkit-text-fill-color: var(--rex-stepper-theme-disabled-input-text,#898989);background-color: var(--rex-stepper-theme-disabled-input-background,#fff);color: var(--rex-stepper-theme-disabled-input-text,#898989);opacity: 1;pointer-events: none}.rex-stepper .minus{border-radius: .25rem 0 0 .25rem}.rex-stepper .plus{border-radius: 0 .25rem .25rem 0}