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


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

dark(picker-title, 'picker')
theme(picker, "picker")

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

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

  &__title
    color: #fff
    border-top-left-radius: $card-border-radius
    border-top-right-radius: $card-border-radius
    height: 105px
    padding: 16px

  &__body
    height: 290px
    overflow: hidden
    position: relative

  &--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
      height: auto
      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