// TODO: BEMify all of this .slider margin: 0 auto position: relative overflow: hidden list-style: none padding: 0 z-index: 1 height: 100% overflow: visible .slider_no-flexbox .slider__slide float: left .slider_vertical > .slider__wrapper flex-direction: column .slider_type_horizontal-list height: initial width: 100% .slider_type_fake position: absolute left: 0 pointer-events: none top: 0 width: 100% z-index: 3 .slider__wrapper position: relative width: 100% height: 100% z-index: 1 display: flex transition-property: transform box-sizing: content-box .slider_android .slider__slide, .slider__wrapper transform: translate3d(0px,0,0) .slider_multirow > .slider__wrapper flex-wrap: wrap .slider_free-mode > .slider__wrapper transition-timing-function: ease-out margin: 0 auto .slider_type_vertical-list .slider__slide display: flex height: calc(250px + 3em) justify-content: center .slider__slide flex-shrink: 0 width: 100% height: 100% position: relative transition-property: transform .slider__slide_invisible-blank visibility: hidden .slider__slide_frame width: 250px * (16 / 9) $arrow-size: 64 // The diagonal length of the square containg the arrow (The hypotenuse of half the square) $button-size: sqrt(pow($arrow-size, 2)*2) + 8px .slider__button outline: none pointer-events: none position: absolute z-index: 2 &:before border: 4px solid $white border-radius: 8px border-width: 0 8px 8px 0 content: ' ' cursor: pointer filter: drop-shadow(0 0 3px #444) height: 64px pointer-events: all position: absolute transition: 0.4s width: 64px .slider__button_type_vertical height: $button-size left: 0 width: 100% &:before left: 50% .slider__button_type_horizontal height: 100% top: 0 width: $button-size &:before top: 50% .slider__button_direction_up top: 0 width: 100% &:before bottom: 0 transform: translateX(-50%) translateY(0) rotateZ(225deg) &:hover:before transform: translateX(-50%) translateY(-10px) rotateZ(225deg) &.slider__button_disabled, &.slider__button_disalllow &:before transform: translateX(-50%) translateY(-$button-size) rotateZ(225deg) .slider__button_direction_down bottom: 0 width: 100% &:before top: 0 transform: translateX(-50%) translateY(0) rotateZ(45deg) &:hover:before transform: translateX(-50%) translateY(10px) rotateZ(45deg) &.slider__button_disabled, &.slider__button_disalllow &:before transform: translateX(-50%) translateY($button-size) rotateZ(45deg) .slider__button_direction_left left: 0 &:before right: 0 transform: translateX(0) translateY(-50%) rotateZ(135deg) &:hover:before transform: translateX(-10px) translateY(-50%) rotateZ(135deg) &.slider__button_disabled, &.slider__button_disalllow &:before transform: translateX(-$button-size) translateY(-50%) rotateZ(135deg) .slider__button_direction_right right: 0 &:before left: 0 transform: translateX(0) translateY(-50%) rotateZ(315deg) &:hover:before transform: translateX(10px) translateY(-50%) rotateZ(315deg) &.slider__button_disabled, &.slider__button_disalllow &:before transform: translateX($button-size) translateY(-50%) rotateZ(315deg)
