vuetify/src/stylus/components/_pickers.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'
@import '../theme'

/* Themes */

picker($material)
  color: $material.text.primary

  .picker__body
    background: $material.picker.body

dark(picker, 'picker')

picker-title($material)
  .picker__title
    background: $material.picker.title

theme(picker-title, "picker")

.picker
  border-radius: $card-border-radius
  display: flex
  flex-direction: column
  width: 290px
  contain: content

  .card__row--actions
    border: none
    margin-top: -20px

.picker__title
  color: #fff
  border-top-left-radius: $card-border-radius
  border-top-right-radius: $card-border-radius
  padding: 16px

.picker__title__btn
  transition: $primary-transition

  &.active
    opacity: 1

  &:not(.active)
    opacity: .6
    cursor: pointer

    &:hover
      opacity: 1

.picker__body
  height: 290px
  overflow: hidden
  position: relative

  > div
    width: 100%
    
    &.fade-transition-leave-active
      position: absolute

.picker--landscape
  flex-direction: row
  flex-wrap: wrap
  width: 500px

  .picker__title
    border-top-right-radius: 0
    border-bottom-right-radius: 0
    flex: 0 1 170px
    width: 170px
    position: absolute
    top: 0
    left: 0
    height: 100%
    z-index: 1

  .picker__body
    flex: 1 0
    width: 330px
    margin-left: 170px

  .card__row--actions
    margin-left: 170px
    width: 330px