vuetify/src/stylus/components/_time-picker-title.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'

.time-picker-title
  color: #fff
  display: flex
  line-height: 1
  justify-content: flex-end

.time-picker-title__time
  white-space: nowrap

  .picker__title__btn,
  span
    align-items: center
    display: inline-flex
    height: 70px
    font-size: 70px
    justify-content: center

.time-picker-title__ampm
  align-self: flex-end
  display: flex
  flex-direction: column
  font-size: 16px
  margin: 8px 0 6px 8px
  text-transform: uppercase

  div:only-child
    flex-direction: row

.picker__title--landscape
  .time-picker-title
    flex-direction: column
    justify-content: center
    height: 100%

  .time-picker-title__time
    text-align: right

    .picker__title__btn,
    span
      height: 55px
      font-size: 55px

  .time-picker-title__ampm
    margin: 16px 0 0
    align-self: initial
    text-align: center