Sha256: 868b8541e27e1c1ef42a594bdb1a973208a391b964d317ceba0f11707a02093b
Contents?: true
Size: 1.63 KB
Versions: 12
Compression:
Stored size: 1.63 KB
Contents
// 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);
}
}
}
Version data entries
12 entries across 12 versions & 2 rubygems