i-rubik/src/style/components/slider.styl

A Vue.js 2.0+ UI Components Framework

.slider
  height 500px
  width 100%
  position relative
  overflow hidden
  @extend .z-depth-1
  
  &-item
    display flex
    align-items center
    justify-content center
    flex 1 0 100%
    height 100%
    width 100%
    background-size cover
    background-position center center
    transition .2s ease-out
  
  &-left
    position absolute
    top calc(50% - 50px)
    z-index 2
    left 0
    
    .btn
      color #fff
      margin 0 !important
      
      i
        font-size 4rem
        
      &:hover
        background none
      
  &-right
    @extend .slider-left
    left initial
    right 0
  
  &-controls
    display flex
    position absolute
    left 0
    bottom 0
    width 100%
    height 50px
    justify-content center
    align-items center
    list-style-type none
    background rgba(0, 0, 0, .5)
    z-index 2
    
    &-item
      margin 0 1rem !important
      width 10px
      color #fff
      
      i
        opacity: .5
        transition: $primary-transition
      
      &-active
        i
          opacity: 1
          vertical-align: middle
          font-size: 2rem !important
      
      &:hover
        background: none
        
        i
          opacity: .8



// .slider {
//   position relative
//   width 100%
//   height 400px
//   margin 0 auto
//   z-index 1
//   overflow hidden
//   @extend .z-depth-1
// }
// .slider-wrapper {
//   position relative
//   width 100%
//   height 100%
//   z-index 1
//   display flex
//   -webkit-transition-property -webkit-transform
//   transition-property transform
//   box-sizing content-box
// }
// .slider-item {
//   width 100%
//   flex-shrink 0
//   height 100%
//   background-size cover
//   background-position 50%
// }
// .slider-pagination {
//   position absolute
//   bottom 0
//   width 100%
//   display flex
//   justify-content center
//   background: rgba(0, 0, 0, .5)
//   align-items: center
//   left: 0
//   height: 50px
//   list-style-type: none
//   z-index: 2
// }
// .slider-pagination-item {
//   width 9px
//   height 9px
//   background rgba(58, 58, 58, .5)
//   z-index 1
//   margin 4px
//   border-radius 50%
//   width: 10px
//   margin: 0 1rem !important
//   &.active {
//     background #fff
//   }
//   &:hover {
//     background #fff
//   }
// }