// Variables //—————————————————— $stepper-primary: $aqua-dark !default; $stepper-primary-hover: $aqua-light !default;
$stepper-arrow-width: 20px !default;
// Exports //——————————————————
@include exports(“stepper”) {
/** * stepper * -------------------------------------------------- */ .stepper { & .stepper-input { overflow: hidden; -moz-appearance: textfield; &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } } & .stepper-arrow { background-color: $stepper-primary; cursor: pointer; display: block; height: 50%; position: absolute; right: 15px; text-indent: -99999px; width: $stepper-arrow-width; &:hover, &:active { background-color: $stepper-primary-hover; } } & .up { @include prefixer($property: border-top-right-radius, $value: 3px, $prefixes: webkit moz spec); border: 1px solid darken($stepper-primary, 7%); top: 0; } & .down { @include prefixer($property: border-bottom-right-radius, $value: 3px, $prefixes: webkit moz spec); bottom: 0; } & .up::before, & .down::before { content: ""; position: absolute; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } & .up::before { top: 5px; left: 5px; border-bottom: 4px solid $white; } & .down:before { bottom: 5px; left: 6px; border-top: 4px solid $white; } &.disabled .stepper-arrow { background-color: $stepper-primary; @include opacity($opacity: 45, $filter: true); } }
}