vuetify/src/stylus/components/_date-picker-table.styl

Vue.js 2 Semantic Component Framework

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

v-date-picker-table($material)
  th
    color: $material.text.disabled

theme(v-date-picker-table, "v-date-picker-table")

.v-date-picker-table
  position: relative
  padding: 0 12px
  height: 242px

  table
    transition: $primary-transition
    top: 0
    table-layout: fixed
    width: 100%

  td, th
    text-align: center
    position: relative

  th
    font-size: 12px

  &--date .v-btn
    height: 32px
    width: 32px

  .v-btn
    z-index: auto
    margin: 0
    font-size: 12px

    &.v-btn--active
      color: #fff

.v-date-picker-table--month
  td
    width: 33.333333%
    height: 56px
    vertical-align: middle
    text-align: center

    .v-btn
      margin: 0 auto
      max-width: 160px
      min-width: 40px
      width: 100%

.v-date-picker-table--date
  th
    padding: 8px 0
    font-weight: 600

  td
    width: 45px

.v-date-picker-table__event
  border-radius: 50%
  bottom: 2px
  content: ""
  display: block
  height: 8px
  left: 50%
  position: absolute
  transform: translateX(-4px)
  width: 8px