@slider-background: rgba(0, 0, 0, 0.1);
#slider {
- position: absolute;
- height: 6px;
- bottom: 20px;
- cursor: pointer;
- .hideifnot(@slider-display);
-
- .visible {
- height: 6px;
- width: 100%;
- position: relative;
- top: 20px;
- transition: all 250ms;
- }
-
- &:hover, &.drag {
- .visible {
- height: 12px;
- top: 17px;
- }
- }
-
- &.drag, &.hover {
- z-index: 13;
- }
-
- // When help overlay is active
- .help & {
- z-index: 22;
- }
-
- #sliderback {
- position: absolute;
- top: -20px;
- left: 0;
- width: 100%;
- z-index: 0;
- height: 46px;
- .visible {
- background-color: @slider-background;
- }
- }
-
- #slidercursor {
- height: 46px;
- position: absolute;
- left: 0;
- top: -20px;
- z-index: 1;
-
- .visible {
- background-color: #fff;
- }
- }
-
- &:hover, &.drag {
- #slidercursor {
- .visible {
- height: 10px;
- top: 18px;
- }
- }
- }
-
- @sliderthumb-height: unit(@thumb-height+60, px);
- @sliderthumb-top: unit(-1*(@sliderthumb-height+24), px);
-
- #sliderthumb {
- position: absolute;
- top: @sliderthumb-top;
- left: 0;
- background-color: @slider-thumb-background;
- padding: 25px;
- display: none;
- width: 250px;
- height: @sliderthumb-height;
-
- &.single {
- width: 150px;
- &:after {
- left: 59px;
- }
- }
-
- &:after {
- content: "";
- position: absolute;
- bottom: -16px;
- left: 109px;
- width: 0;
- height: 0;
- border-left: 16px solid transparent;
- border-right: 16px solid transparent;
- border-top: 16px solid @slider-thumb-background;
- display: block;
- }
-
- .doubleThumb {
- position: relative;
-
- > .right {
- left: 100px;
- }
- }
-
- .number {
- color: @menu-text;
-
- }
- }
- &.drag, &.hover {
- #sliderthumb {
- display: block;
- }
- }
+ position: absolute;
+ height: 6px;
+ bottom: 20px;
+ cursor: pointer;
+ .hideifnot(@slider-display);
+
+ .visible {
+ height: 6px;
+ width: 100%;
+ position: relative;
+ top: 20px;
+ transition: all 250ms;
+ }
+
+ &:hover, &.drag {
+ .visible {
+ height: 12px;
+ top: 17px;
+ }
+ }
+
+ &.drag, &.hover {
+ z-index: 13;
+ }
+
+ // When help overlay is active
+ .help & {
+ z-index: 22;
+ }
+
+ #sliderback {
+ position: absolute;
+ top: -20px;
+ left: 0;
+ width: 100%;
+ z-index: 0;
+ height: 46px;
+
+ .visible {
+ background-color: @slider-background;
+ }
+ }
+
+ #slidercursor {
+ height: 46px;
+ position: absolute;
+ left: 0;
+ top: -20px;
+ z-index: 1;
+
+ .visible {
+ background-color: #fff;
+ }
+ }
+
+ &:hover, &.drag {
+ #slidercursor {
+ .visible {
+ height: 10px;
+ top: 18px;
+ }
+ }
+ }
+
+ @sliderthumb-height: unit(@thumb-height+60, px);
+ @sliderthumb-top: unit(-1*(@sliderthumb-height+24), px);
+
+ #sliderthumb {
+ position: absolute;
+ top: @sliderthumb-top;
+ left: 0;
+ background-color: @slider-thumb-background;
+ padding: 25px;
+ display: none;
+ width: 250px;
+ height: @sliderthumb-height;
+
+ &.single {
+ width: 150px;
+
+ &:after {
+ left: 59px;
+ }
+
+ .doubleThumb .thumb.right {
+ .rtl & {
+ left: 0;
+ }
+ }
+ }
+
+ &:after {
+ content: "";
+ position: absolute;
+ bottom: -16px;
+ left: 109px;
+ width: 0;
+ height: 0;
+ border-left: 16px solid transparent;
+ border-right: 16px solid transparent;
+ border-top: 16px solid @slider-thumb-background;
+ display: block;
+ }
+
+ .doubleThumb {
+ position: relative;
+
+ > .right {
+ left: 100px;
+ }
+ }
+
+ .number {
+ color: @menu-text;
+
+ }
+ }
+
+ &.drag, &.hover {
+ #sliderthumb {
+ display: block;
+ }
+ }
}
\ No newline at end of file