vuetify/src/stylus/components/_carousel.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'

.carousel
  height: 500px
  width: 100%
  position: relative
  overflow: hidden
  elevation(2)

  &__left,
  &__right
    position: absolute
    top: 50%
    z-index: 1
    transform: translateY(-50%)

    .btn
      color: #FFFFFF
      margin: 0 !important
      height: auto
      width: auto

      i
        font-size: 48px

      &:hover
        background: none

  &__left
    left: 5px
    
  &__right
    right: 5px

  &__controls
    background: rgba(0, 0, 0, .5)
    align-items: center
    bottom: 0
    display: flex
    justify-content: center
    left: 0
    position: absolute
    height: 50px
    list-style-type: none
    width: 100%
    z-index: 1

    &__item
      color: #FFFFFF
      margin: 0 8px !important

      i
        opacity: .5
        transition: $primary-transition

      &--active
        i
          opacity: 1
          vertical-align: middle

      &:hover
        background: none

        i
          opacity: .8