You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.6 KiB
79 lines
1.6 KiB
// 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);
|
|
}
|
|
}
|
|
|
|
}
|
|
|