diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less index b7ab45f59..b3b00882c 100644 --- a/src/definitions/modules/slider.less +++ b/src/definitions/modules/slider.less @@ -3,63 +3,63 @@ *******************************/ @type : 'module'; - @element : 'range'; + @element : 'slider'; @import (multiple) '../../theme.config'; -.ui.range:not(.vertical) { +.ui.slider:not(.vertical) { width: 100%; padding: @padding; } -.ui.range { +.ui.slider { position: relative; } -.ui.range:focus { +.ui.slider:focus { outline: 0; } -.ui.range .inner { +.ui.slider .inner { position: relative; z-index: 2; } -.ui.range:not(.vertical) .inner { +.ui.slider:not(.vertical) .inner { height: @height; } -.ui.range .inner:hover { +.ui.slider .inner:hover { cursor: @hoverPointer; } -.ui.range .inner .track { +.ui.slider .inner .track { position: absolute; border-radius: @trackBorderRadius; background-color: @trackColor; } -.ui.range:not(.vertical) .inner .track { +.ui.slider:not(.vertical) .inner .track { width: 100%; height: @trackHeight; top: @trackPositionTop; left: 0; } -.ui.range .inner .track-fill { +.ui.slider .inner .track-fill { position: absolute; border-radius: @trackFillBorderRadius; background-color: @trackFillColor; } -.ui.range:not(.vertical) .inner .track-fill { +.ui.slider:not(.vertical) .inner .track-fill { width: 0; height: @trackFillHeight; top: @trackPositionTop; left: 0; } -.ui.range .inner .thumb { +.ui.slider .inner .thumb { position: absolute; left: 0; top: 0; @@ -71,12 +71,12 @@ transition: @thumbTransition; } -.ui.range:not(.disabled) .inner .thumb:hover { +.ui.slider:not(.disabled) .inner .thumb:hover { pointer: @thumbHoverPointer; background: @thumbHoverBackground; } -.ui.range:not(.disabled):focus .inner .thumb { +.ui.slider:not(.disabled):focus .inner .thumb { background: @thumbHoverBackground; } @@ -90,15 +90,15 @@ Disabled ---------------*/ -.ui.range.disabled { +.ui.disabled.slider { opacity: @disabledOpactiy; } -.ui.range.disabled .inner:hover { +.ui.disabled.slider .inner:hover { cursor: auto; } -.ui.range.disabled .inner .track-fill { +.ui.disabled.slider .inner .track-fill { background: @disabledTrackFillColor; } @@ -106,17 +106,17 @@ Reversed ---------------*/ -.ui.range.reversed .inner .track-fill { +.ui.reversed.slider .inner .track-fill { left: auto; right: 0; } -.ui.range.reversed .inner .thumb { +.ui.reversed.slider .inner .thumb { left: auto; right: 0; } -.ui.labeled.range.reversed > .labels .label { +.ui.labeled.reversed.slider > .labels .label { transform: translate(-100%, -100%); } @@ -128,24 +128,24 @@ Vertical ---------------*/ -.ui.range.vertical { +.ui.vertical.slider{ height: 100%; padding: @verticalPadding; } -.ui.range.vertical .inner { +.ui.vertical.slider.inner { width: @height; height: 100%; } -.ui.range.vertical .inner .track { +.ui.vertical.slider.inner .track { height: 100%; width: @trackHeight; left: @trackPositionTop; top: 0; } -.ui.range.vertical .inner .track-fill { +.ui.vertical.slider.inner .track-fill { height: 0; width: @trackFillHeight; left: @trackPositionTop; @@ -153,12 +153,12 @@ } /* Vertical Reversed */ -.ui.range.vertical.reversed .inner .thumb { +.ui.vertical.reversed.slider .inner .thumb { top: auto; bottom: 0; } -.ui.range.vertical.reversed .inner .track-fill { +.ui.vertical.reversed.slider .inner .track-fill { top: auto; bottom: 0; } @@ -167,7 +167,7 @@ Labeled ---------------*/ -.ui.labeled.range > .labels { +.ui.labeled.slider > .labels { height: @labelHeight; width: 100%; margin: 0; @@ -176,17 +176,17 @@ top: 50%; } -.ui.labeled.range:not(.vertical) > .labels { +.ui.labeled.slider:not(.vertical) > .labels { transform: translateY(-50%); } -.ui.labeled.range > .labels .label { +.ui.labeled.slider > .labels .label { display: inline-flex; position: absolute; transform: translate(-50%, -100%); } -.ui.labeled.range > .labels .label:after { +.ui.labeled.slider > .labels .label:after { content: ' '; height: @labelHeight; width: @labelWidth; @@ -198,7 +198,7 @@ /* Vertical Labels */ -.ui.labeled.vertical.range > .labels { +.ui.labeled.vertical.slider > .labels { width: @labelHeight; height: 100%; left: 50%; @@ -206,11 +206,11 @@ transform: translateX(-50%); } -.ui.labeled.vertical.range > .labels .label { +.ui.labeled.vertical.slider > .labels .label { transform: translate(-100%, -@labelWidth); } -.ui.labeled.vertical.range > .labels .label:after { +.ui.labeled.vertical.slider > .labels .label:after { width: @labelHeight; height: @labelWidth; left: 100%; @@ -221,12 +221,12 @@ Hover ---------------*/ -.ui.hover.range .inner .thumb { +.ui.hover.slider .inner .thumb { opacity: @hoverVarOpacity; transition: @hoverOpacityTransition; } -.ui.hover.range:not(.disabled):hover .inner .thumb, .ui.hover.range:not(.disabled):focus .inner .thumb { +.ui.hover.slider:not(.disabled):hover .inner .thumb, .ui.hover.slider:not(.disabled):focus .inner .thumb { opacity: @hoverVarHoverOpacity; } @@ -236,11 +236,11 @@ Inverted ---------------*/ -.ui.inverted.range .inner .track-fill { +.ui.inverted.slider .inner .track-fill { background-color: @invertedTrackFillColor; } -.ui.inverted.range .inner .track { +.ui.inverted.slider .inner .track { background-color: @transparentWhite; } @@ -249,106 +249,106 @@ ---------------*/ /* Red */ -.ui.red.range .inner .track-fill { +.ui.red.slider .inner .track-fill { background-color: @red; } -.ui.red.inverted.range .inner .track-fill { +.ui.red.inverted.slider .inner .track-fill { background-color: @lightRed; } /* Orange */ -.ui.orange.range .inner .track-fill { +.ui.orange.slider .inner .track-fill { background-color: @orange; } -.ui.orange.inverted.range .inner .track-fill { +.ui.orange.inverted.slider .inner .track-fill { background-color: @lightOrange; } /* Yellow */ -.ui.yellow.range .inner .track-fill { +.ui.yellow.slider .inner .track-fill { background-color: @yellow; } -.ui.yellow.inverted.range .inner .track-fill { +.ui.yellow.inverted.slider .inner .track-fill { background-color: @lightYellow; } /* Olive */ -.ui.olive.range .inner .track-fill { +.ui.olive.slider .inner .track-fill { background-color: @olive; } -.ui.olive.inverted.range .inner .track-fill { +.ui.olive.inverted.slider .inner .track-fill { background-color: @lightOlive; } /* Green */ -.ui.green.range .inner .track-fill { +.ui.green.slider .inner .track-fill { background-color: @green; } -.ui.green.inverted.range .inner .track-fill { +.ui.green.inverted.slider .inner .track-fill { background-color: @lightGreen; } /* Teal */ -.ui.teal.range .inner .track-fill { +.ui.teal.slider .inner .track-fill { background-color: @teal; } -.ui.teal.inverted.range .inner .track-fill { +.ui.teal.inverted.slider .inner .track-fill { background-color: @lightTeal; } /* Blue */ -.ui.blue.range .inner .track-fill { +.ui.blue.slider .inner .track-fill { background-color: @blue; } -.ui.blue.inverted.range .inner .track-fill { +.ui.blue.inverted.slider .inner .track-fill { background-color: @lightBlue; } /* Violet */ -.ui.violet.range .inner .track-fill { +.ui.violet.slider .inner .track-fill { background-color: @violet; } -.ui.violet.inverted.range .inner .track-fill { +.ui.violet.inverted.slider .inner .track-fill { background-color: @lightViolet; } /* Purple */ -.ui.purple.range .inner .track-fill { +.ui.purple.slider .inner .track-fill { background-color: @purple; } -.ui.purple.inverted.range .inner .track-fill { +.ui.purple.inverted.slider .inner .track-fill { background-color: @lightPurple; } /* Pink */ -.ui.pink.range .inner .track-fill { +.ui.pink.slider .inner .track-fill { background-color: @pink; } -.ui.pink.inverted.range .inner .track-fill { +.ui.pink.inverted.slider .inner .track-fill { background-color: @lightPink; } /* Brown */ -.ui.brown.range .inner .track-fill { +.ui.brown.slider .inner .track-fill { background-color: @brown; } -.ui.brown.inverted.range .inner .track-fill { +.ui.brown.inverted.slider .inner .track-fill { background-color: @lightBrown; } /* Grey */ -.ui.grey.range .inner .track-fill { +.ui.grey.slider .inner .track-fill { background-color: @grey; } -.ui.grey.inverted.range .inner .track-fill { +.ui.grey.inverted.slider .inner .track-fill { background-color: @lightGrey; } /* Black */ -.ui.black.range .inner .track-fill { +.ui.black.slider .inner .track-fill { background-color: @black; } -.ui.black.inverted.range .inner .track-fill { +.ui.black.inverted.slider .inner .track-fill { background-color: @lightBlack; } @@ -357,114 +357,114 @@ ---------------*/ /* Standard */ -.ui.range.basic .inner .thumb { +.ui.slider.basic .inner .thumb { background-color: @trackFillColor; } -.ui.range.basic .inner .thumb:hover, .ui.range.basic:focus .inner .thumb { +.ui.slider.basic .inner .thumb:hover, .ui.slider.basic:focus .inner .thumb { background-color: @trackFillColorFocus; } /* Red */ -.ui.red.range.basic .inner .thumb { +.ui.red.slider.basic .inner .thumb { background-color: @red; } -.ui.red.range.basic .inner .thumb:hover, .ui.red.range.basic:focus .inner .thumb { +.ui.red.slider.basic .inner .thumb:hover, .ui.red.slider.basic:focus .inner .thumb { background-color: @redHover; } /* Orange */ -.ui.orange.range.basic .inner .thumb { +.ui.orange.slider.basic .inner .thumb { background-color: @orange; } -.ui.orange.range.basic .inner .thumb:hover, .ui.orange.range.basic:focus .inner .thumb { +.ui.orange.slider.basic .inner .thumb:hover, .ui.orange.slider.basic:focus .inner .thumb { background-color: @orangeHover; } /* Yellow */ -.ui.yellow.range.basic .inner .thumb { +.ui.yellow.slider.basic .inner .thumb { background-color: @yellow; } -.ui.yellow.range.basic .inner .thumb:hover, .ui.yellow.range.basic:focus .inner .thumb { +.ui.yellow.slider.basic .inner .thumb:hover, .ui.yellow.slider.basic:focus .inner .thumb { background-color: @yellowHover; } /* Olive */ -.ui.olive.range.basic .inner .thumb { +.ui.olive.slider.basic .inner .thumb { background-color: @olive; } -.ui.olive.range.basic .inner .thumb:hover, .ui.olive.range.basic:focus .inner .thumb { +.ui.olive.slider.basic .inner .thumb:hover, .ui.olive.slider.basic:focus .inner .thumb { background-color: @oliveHover; } /* Green */ -.ui.green.range.basic .inner .thumb { +.ui.green.slider.basic .inner .thumb { background-color: @green; } -.ui.green.range.basic .inner .thumb:hover, .ui.green.range.basic:focus .inner .thumb { +.ui.green.slider.basic .inner .thumb:hover, .ui.green.slider.basic:focus .inner .thumb { background-color: @greenHover; } /* Teal */ -.ui.teal.range.basic .inner .thumb { +.ui.teal.slider.basic .inner .thumb { background-color: @teal; } -.ui.teal.range.basic .inner .thumb:hover, .ui.teal.range.basic:focus .inner .thumb { +.ui.teal.slider.basic .inner .thumb:hover, .ui.teal.slider.basic:focus .inner .thumb { background-color: @tealHover; } /* Blue */ -.ui.blue.range.basic .inner .thumb { +.ui.blue.slider.basic .inner .thumb { background-color: @blue; } -.ui.blue.range.basic .inner .thumb:hover, .ui.blue.range.basic:focus .inner .thumb { +.ui.blue.slider.basic .inner .thumb:hover, .ui.blue.slider.basic:focus .inner .thumb { background-color: @blueHover; } /* Violet */ -.ui.violet.range.basic .inner .thumb { +.ui.violet.slider.basic .inner .thumb { background-color: @violet; } -.ui.violet.range.basic .inner .thumb:hover, .ui.violet.range.basic:focus .inner .thumb { +.ui.violet.slider.basic .inner .thumb:hover, .ui.violet.slider.basic:focus .inner .thumb { background-color: @violetHover; } /* Purple */ -.ui.purple.range.basic .inner .thumb { +.ui.purple.slider.basic .inner .thumb { background-color: @purple; } -.ui.purple.range.basic .inner .thumb:hover, .ui.purple.range.basic:focus .inner .thumb { +.ui.purple.slider.basic .inner .thumb:hover, .ui.purple.slider.basic:focus .inner .thumb { background-color: @purpleHover; } /* Pink */ -.ui.pink.range.basic .inner .thumb { +.ui.pink.slider.basic .inner .thumb { background-color: @pink; } -.ui.pink.range.basic .inner .thumb:hover, .ui.pink.range.basic:focus .inner .thumb { +.ui.pink.slider.basic .inner .thumb:hover, .ui.pink.slider.basic:focus .inner .thumb { background-color: @pinkHover; } /* Brown */ -.ui.brown.range.basic .inner .thumb { +.ui.brown.slider.basic .inner .thumb { background-color: @brown; } -.ui.brown.range.basic .inner .thumb:hover, .ui.brown.range.basic:focus .inner .thumb { +.ui.brown.slider.basic .inner .thumb:hover, .ui.brown.slider.basic:focus .inner .thumb { background-color: @brownHover; } /* Grey */ -.ui.grey.range.basic .inner .thumb { +.ui.grey.slider.basic .inner .thumb { background-color: @grey; } -.ui.grey.range.basic .inner .thumb:hover, .ui.grey.range.basic:focus .inner .thumb { +.ui.grey.slider.basic .inner .thumb:hover, .ui.grey.slider.basic:focus .inner .thumb { background-color: @greyHover; } /* Black */ -.ui.black.range.basic .inner .thumb { +.ui.black.slider.basic .inner .thumb { background-color: @black; } -.ui.black.range.basic .inner .thumb:hover, .ui.black.range.basic:focus .inner .thumb { +.ui.black.slider.basic .inner .thumb:hover, .ui.black.slider.basic:focus .inner .thumb { background-color: @blackHover; } @@ -473,114 +473,114 @@ ---------------*/ /* Standard */ -.ui.inverted.range.basic .inner .thumb { +.ui.inverted.slider.basic .inner .thumb { background-color: @invertedTrackFillColor; } -.ui.inverted.range.basic .inner .thumb:hover, .ui.inverted.range.basic:focus .inner .thumb { +.ui.inverted.slider.basic .inner .thumb:hover, .ui.inverted.slider.basic:focus .inner .thumb { background-color: @invertedTrackFillColorFocus; } /* Red */ -.ui.red.inverted.range.basic .inner .thumb { +.ui.red.inverted.slider.basic .inner .thumb { background-color: @lightRed; } -.ui.red.inverted.range.basic .inner .thumb:hover, .ui.red.inverted.range.basic:focus .inner .thumb { +.ui.red.inverted.slider.basic .inner .thumb:hover, .ui.red.inverted.slider.basic:focus .inner .thumb { background-color: @lightRedHover; } /* Orange */ -.ui.orange.inverted.range.basic .inner .thumb { +.ui.orange.inverted.slider.basic .inner .thumb { background-color: @lightOrange; } -.ui.orange.inverted.range.basic .inner .thumb:hover, .ui.orange.inverted.range.basic:focus .inner .thumb { +.ui.orange.inverted.slider.basic .inner .thumb:hover, .ui.orange.inverted.slider.basic:focus .inner .thumb { background-color: @lightOrangeHover; } /* Yellow */ -.ui.yellow.inverted.range.basic .inner .thumb { +.ui.yellow.inverted.slider.basic .inner .thumb { background-color: @lightYellow; } -.ui.yellow.inverted.range.basic .inner .thumb:hover, .ui.yellow.inverted.range.basic:focus .inner .thumb { +.ui.yellow.inverted.slider.basic .inner .thumb:hover, .ui.yellow.inverted.slider.basic:focus .inner .thumb { background-color: @lightYellowHover; } /* Olive */ -.ui.olive.inverted.range.basic .inner .thumb { +.ui.olive.inverted.slider.basic .inner .thumb { background-color: @lightOlive; } -.ui.olive.inverted.range.basic .inner .thumb:hover, .ui.olive.inverted.range.basic:focus .inner .thumb { +.ui.olive.inverted.slider.basic .inner .thumb:hover, .ui.olive.inverted.slider.basic:focus .inner .thumb { background-color: @lightOliveHover; } /* Green */ -.ui.green.inverted.range.basic .inner .thumb { +.ui.green.inverted.slider.basic .inner .thumb { background-color: @lightGreen; } -.ui.green.inverted.range.basic .inner .thumb:hover, .ui.green.inverted.range.basic:focus .inner .thumb { +.ui.green.inverted.slider.basic .inner .thumb:hover, .ui.green.inverted.slider.basic:focus .inner .thumb { background-color: @lightGreenHover; } /* Teal */ -.ui.teal.inverted.range.basic .inner .thumb { +.ui.teal.inverted.slider.basic .inner .thumb { background-color: @lightTeal; } -.ui.teal.inverted.range.basic .inner .thumb:hover, .ui.teal.inverted.range.basic:focus .inner .thumb { +.ui.teal.inverted.slider.basic .inner .thumb:hover, .ui.teal.inverted.slider.basic:focus .inner .thumb { background-color: @lightTealHover; } /* Blue */ -.ui.blue.inverted.range.basic .inner .thumb { +.ui.blue.inverted.slider.basic .inner .thumb { background-color: @lightBlue; } -.ui.blue.inverted.range.basic .inner .thumb:hover, .ui.blue.inverted.range.basic:focus .inner .thumb { +.ui.blue.inverted.slider.basic .inner .thumb:hover, .ui.blue.inverted.slider.basic:focus .inner .thumb { background-color: @lightBlueHover; } /* Violet */ -.ui.violet.inverted.range.basic .inner .thumb { +.ui.violet.inverted.slider.basic .inner .thumb { background-color: @lightViolet; } -.ui.violet.inverted.range.basic .inner .thumb:hover { +.ui.violet.inverted.slider.basic .inner .thumb:hover { background-color: @lightVioletHover; } /* Purple */ -.ui.purple.inverted.range.basic .inner .thumb { +.ui.purple.inverted.slider.basic .inner .thumb { background-color: @lightPurple; } -.ui.purple.inverted.range.basic .inner .thumb:hover, .ui.purple.inverted.range.basic:focus .inner .thumb { +.ui.purple.inverted.slider.basic .inner .thumb:hover, .ui.purple.inverted.slider.basic:focus .inner .thumb { background-color: @lightPurpleHover; } /* Pink */ -.ui.pink.inverted.range.basic .inner .thumb { +.ui.pink.inverted.slider.basic .inner .thumb { background-color: @lightPink; } -.ui.pink.inverted.range.basic .inner .thumb:hover, .ui.pink.inverted.range.basic:focus .inner .thumb { +.ui.pink.inverted.slider.basic .inner .thumb:hover, .ui.pink.inverted.slider.basic:focus .inner .thumb { background-color: @lightPinkHover; } /* Brown */ -.ui.brown.inverted.range.basic .inner .thumb { +.ui.brown.inverted.slider.basic .inner .thumb { background-color: @lightBrown; } -.ui.brown.inverted.range.basic .inner .thumb:hover, .ui.brow.inverted.range.basic:focus .inner .thumb { +.ui.brown.inverted.slider.basic .inner .thumb:hover, .ui.brow.inverted.slider.basic:focus .inner .thumb { background-color: @lightBrownHover; } /* Grey */ -.ui.grey.inverted.range.basic .inner .thumb { +.ui.grey.inverted.slider.basic .inner .thumb { background-color: @lightGrey; } -.ui.grey.inverted.range.basic .inner .thumb:hover, .ui.grey.inverted.range.basic:focus .inner .thumb { +.ui.grey.inverted.slider.basic .inner .thumb:hover, .ui.grey.inverted.slider.basic:focus .inner .thumb { background-color: @lightGreyHover; } /* Black */ -.ui.black.inverted.range.basic .inner .thumb { +.ui.black.inverted.slider.basic .inner .thumb { background-color: @lightBlack; } -.ui.black.inverted.range.basic .inner .thumb:hover, .ui.black.inverted.range.basic:focus .inner .thumb { +.ui.black.inverted.slider.basic .inner .thumb:hover, .ui.black.inverted.slider.basic:focus .inner .thumb { background-color: @lightBlackHover; } @@ -589,98 +589,98 @@ ---------------*/ /* Small */ -.ui.range.small .inner .thumb { +.ui.slider.small .inner .thumb { height: @smallHeight; width: @smallHeight; } -.ui.range.small:not(.vertical) .inner { +.ui.slider.small:not(.vertical) .inner { height: @smallHeight; } -.ui.range.small:not(.vertical) .inner .track, -.ui.range.small:not(.vertical) .inner .track-fill { +.ui.slider.small:not(.vertical) .inner .track, +.ui.slider.small:not(.vertical) .inner .track-fill { height: @smallTrackHeight; top: @trackPositionTopSmall; } -.ui.small.labeled.range:not(.vertical) > .labels, -.ui.small.labeled.range:not(.vertical) > .labels .label:after { +.ui.small.labeled.slider:not(.vertical) > .labels, +.ui.small.labeled.slider:not(.vertical) > .labels .label:after { height: @smallLabelHeight; } /* Small Vertical */ -.ui.range.small.vertical .inner { +.ui.slider.small.vertical .inner { width: @smallHeight; } -.ui.range.small.vertical .inner .track, -.ui.range.small.vertical .inner .track-fill { +.ui.slider.small.vertical .inner .track, +.ui.slider.small.vertical .inner .track-fill { width: @smallTrackHeight; left: @trackPositionTopSmall; } -.ui.small.labeled.range.vertical > .labels, -.ui.small.labeled.range.vertical > .labels .label:after { +.ui.small.labeled.vertical.slider> .labels, +.ui.small.labeled.vertical.slider> .labels .label:after { width: @smallLabelHeight; } /* Large */ -.ui.range.large .inner .thumb { +.ui.slider.large .inner .thumb { height: @largeHeight; width: @largeHeight; } -.ui.range.large:not(.vertical) .inner { +.ui.slider.large:not(.vertical) .inner { height: @largeHeight; } -.ui.range.large:not(.vertical) .inner .track, -.ui.range.large:not(.vertical) .inner .track-fill { +.ui.slider.large:not(.vertical) .inner .track, +.ui.slider.large:not(.vertical) .inner .track-fill { height: @largeTrackHeight; top: @trackPositionTopLarge; } -.ui.large.labeled.range:not(.vertical) > .labels, -.ui.large.labeled.range:not(.vertical) > .labels .label:after { +.ui.large.labeled.slider:not(.vertical) > .labels, +.ui.large.labeled.slider:not(.vertical) > .labels .label:after { height: @largeLabelHeight; } /* Large Vertical */ -.ui.range.large.vertical .inner { +.ui.slider.large.vertical .inner { width: @largeHeight; } -.ui.range.large.vertical .inner .track, -.ui.range.large.vertical .inner .track-fill { +.ui.slider.large.vertical .inner .track, +.ui.slider.large.vertical .inner .track-fill { width: @largeTrackHeight; left: @trackPositionTopLarge; } -.ui.large.labeled.range.vertical > .labels, -.ui.large.labeled.range.vertical > .labels .label:after { +.ui.large.labeled.vertical.slider> .labels, +.ui.large.labeled.vertical.slider> .labels .label:after { width: @largeLabelHeight; } /* Big */ -.ui.range.big .inner .thumb { +.ui.slider.big .inner .thumb { height: @bigHeight; width: @bigHeight; } -.ui.range.big:not(.vertical) .inner { +.ui.slider.big:not(.vertical) .inner { height: @bigHeight; } -.ui.range.big:not(.vertical) .inner .track, -.ui.range.big:not(.vertical) .inner .track-fill { +.ui.slider.big:not(.vertical) .inner .track, +.ui.slider.big:not(.vertical) .inner .track-fill { height: @bigTrackHeight; top: @trackPositionTopBig; } -.ui.big.labeled.range:not(.vertical) > .labels, -.ui.big.labeled.range:not(.vertical) > .labels .label:after { +.ui.big.labeled.slider:not(.vertical) > .labels, +.ui.big.labeled.slider:not(.vertical) > .labels .label:after { height: @bigLabelHeight; } /* Big Vertical */ -.ui.range.big.vertical .inner { +.ui.slider.big.vertical .inner { width: @bigHeight; } -.ui.range.big.vertical .inner .track, -.ui.range.big.vertical .inner .track-fill { +.ui.slider.big.vertical .inner .track, +.ui.slider.big.vertical .inner .track-fill { width: @bigTrackHeight; left: @trackPositionTopBig; } -.ui.big.labeled.range.vertical > .labels, -.ui.big.labeled.range.vertical > .labels .label:after { +.ui.big.labeled.vertical.slider> .labels, +.ui.big.labeled.vertical.slider> .labels .label:after { width: @bigLabelHeight; }