Edit
/* scss/sliders/_installation-slider.scss */
.installation-slider{
.list{list-style: none; position:relative; height:100px; width:100%; padding:0; overflow:hidden;}
.list .animated:not(.select2-selection__choice){height:100%; width: 100%; position:absolute; transition: all 0.3s; top:0; left:0; padding:0; margin:0; visibility:hidden; opacity: 0;
}
// ul li:nth-child(odd){ background:#448AFF;}
.list .animated.active{ transform222:translateY(0px); visibility:visible; z-index:2; opacity: 1;
}
.animated {
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
/* slideinUp */
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
.finish__install{
display: none;
}
#installation__next{
.d-none{
display: none;
}
}
.d-inline{
display: inline;
}
}
#installation__prev{
transition: .3s all ease-in-out;
&.d-none{
visibility: hidden;
opacity: 0;
}
}