115 lines
2.9 KiB
Stylus
115 lines
2.9 KiB
Stylus
@import "{design}/app"
|
|
|
|
$imageSliderBorderRadius = 57px
|
|
$imageSliderTrackColor = rgba(0,0,0,0)
|
|
$imageSliderBorder = none
|
|
|
|
// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
|
|
$imageSliderWidth = 12px
|
|
$imageSliderHeight = 39px
|
|
$imageSliderCursor = grab
|
|
|
|
.imageControls
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
height: 100%
|
|
padding: 5px
|
|
|
|
#scrollbar
|
|
height: calc(100% - 20px);
|
|
margin-top: 5px
|
|
width: 31px
|
|
|
|
#imageSlider
|
|
position: absolute
|
|
left: 20px
|
|
|
|
vendorize(transform, rotate(90deg))
|
|
vendorize(transform-origin, top left)
|
|
|
|
-webkit-appearance: none
|
|
background-color: $imageSliderTrackColor
|
|
|
|
// Remove focus highlights on range input
|
|
&:focus
|
|
outline: none
|
|
vendorize(box-shadow, none)
|
|
|
|
// Remove focus border in Firefox
|
|
&::-moz-focus-outer
|
|
border: none
|
|
|
|
// --- Style the range track --- //
|
|
&::-webkit-slider-runnable-track
|
|
height: 5px
|
|
border: none
|
|
cursor: pointer
|
|
background-color: $imageSliderTrackColor
|
|
z-index: 6
|
|
|
|
&::-moz-range-track
|
|
height: 2px
|
|
border: none
|
|
cursor: pointer
|
|
background-color: $imageSliderTrackColor
|
|
z-index: 6
|
|
|
|
&::-ms-track
|
|
width: 100%
|
|
height: 2px
|
|
border: none
|
|
cursor: pointer
|
|
animate: 0.2s
|
|
background: transparent
|
|
border-width: 15px 0
|
|
color: $imageSliderTrackColor
|
|
|
|
// Hide any fill IE tries to add
|
|
&::-ms-fill-lower
|
|
background: $imageSliderTrackColor
|
|
|
|
&::-ms-fill-upper
|
|
background: $imageSliderTrackColor
|
|
|
|
// --- Style the range thumb --- //
|
|
&::-webkit-slider-thumb
|
|
-webkit-appearance: none !important
|
|
theme('background-color', '$imageSliderColor')
|
|
border-radius: $imageSliderBorderRadius
|
|
border: $imageSliderBorder
|
|
height: $imageSliderWidth
|
|
width: $imageSliderHeight
|
|
cursor: $imageSliderCursor
|
|
margin-top: -7px
|
|
|
|
&:active
|
|
theme('background-color', '$activeColor')
|
|
|
|
&::-moz-range-thumb
|
|
theme('background-color', '$imageSliderColor')
|
|
border-radius: $imageSliderBorderRadius
|
|
border: $imageSliderBorder
|
|
height: $imageSliderWidth
|
|
width: $imageSliderHeight
|
|
cursor: $imageSliderCursor
|
|
z-index: 7
|
|
|
|
&:active
|
|
theme('background-color', '$activeColor')
|
|
|
|
&::-ms-thumb
|
|
theme('background-color', '$imageSliderColor')
|
|
border-radius: $imageSliderBorderRadius
|
|
border: $imageSliderBorder
|
|
height: $imageSliderWidth
|
|
width: $imageSliderHeight
|
|
cursor: $imageSliderCursor
|
|
|
|
&:active
|
|
theme('background-color', '$activeColor')
|
|
|
|
// Set left position in IE, border-width attribute breaks left position of imageSlider
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
|
|
#imageSlider
|
|
left: 50px |