sce-component/carousel/slider.mat.styl

$slider-min-height       ?= 200px
$slider-padding          ?= 2.3rem
$slider-arrow-size       ?= 2rem
$slider-ovelay-color     ?= rgba(0, 0, 0, .3)
$slider-opacity          ?= .6
$slider-opacity-active   ?= 1
$slider-button-size      ?= 1.5rem
$slider-dots-size        ?= .9rem


.q-slider
  overflow hidden
  &.fullscreen
    z-index $z-absolute

.q-slider-inner
  position relative
  height 100%

.q-slider-track
  white-space nowrap
  padding 0
  margin 0
  will-change transform
  display flex
  flex-wrap nowrap
  height 100%

  > div
    flex 0 0 100%
    min-height $slider-min-height
    margin 0
    padding $slider-padding

    &.centered
      display flex
      flex-direction column
      align-items center
      justify-content center

  &.with-arrows
    > div
      padding-left 10%
      padding-right 10%
  &.with-toolbar
    > div
      padding-bottom ($slider-padding + 1rem)

  &.infinite-left > div:nth-last-child(2)
    order -1000
    margin-left -100%

  &.infinite-right > div:nth-child(2)
    order 1000

.q-slider-left-button,
.q-slider-right-button
  position absolute
  top 0
  bottom 0
  font-size $slider-arrow-size
  width 10%
  max-width 70px
  pointer-events none
  i
    cursor pointer
    pointer-events all
    padding 3px
    border-radius 50%
    background $slider-ovelay-color
    opacity $slider-opacity
    transition opacity .3s
    &:hover
      opacity $slider-opacity-active
.q-slider-left-button
  left 0
.q-slider-right-button
  right 0

.q-slider-toolbar
  position absolute
  bottom 0
  left 0
  right 0
  margin 0
  opacity $slider-opacity
  padding .5rem .8rem
  transition opacity .3s
  i
    cursor pointer
    padding 5px
    font-size $slider-button-size
  .q-slider-dots i
    font-size $slider-dots-size