vuetify
Version:
Vue.js 2 Semantic Component Framework
132 lines (103 loc) • 2.07 kB
text/stylus
@import '../bootstrap'
@import '../theme'
/** Themes */
date-picker($material)
.picker--date__years
li
color: $material.text.primary
.picker--date__header-selector-date
strong:not(:hover)
color: $material.text.primary
theme(date-picker, "picker--date")
.picker--date__table
.btn.btn--active
color: #fff
/** Years */
.picker--date__years
font-size: 16px
font-weight: 400
list-style-type: none
max-height: 290px
overflow: auto
padding: 0
text-align: center
li
cursor: pointer
padding: 8px 0
transition: none
&.active
font-size: 24px
font-weight: 500
padding: 10px 0
&:hover
background: rgba(0, 0, 0, 0.12)
/** Title */
.picker--date__title
justify-content: space-between
flex-direction: column
flex-wrap: wrap
&-year
align-items: center
display: inline-flex
font-size: 14px
&-date
font-size: 34px
text-align: left
> div
position: relative
&-year, &-date
font-weight: 500
transition: $primary-transition
width: 100%
&:not(.active)
cursor: pointer
/** Header */
.picker--date__header
padding: 4px 16px
&-selector
align-items: center
display: flex
justify-content: space-between
position: relative
.btn
margin: 0
.icon
cursor: pointer
user-select: none
&-date
flex: 1
text-align: center
position: relative
overflow: hidden
strong
cursor: pointer
transition: $primary-transition
display: block
width: 100%
.picker--date
.btn
z-index: auto
&__table
position: relative
table
transition: $primary-transition
top: 0
table-layout: fixed
th
padding: 8px 0
font-weight: 600
font-size: 12px
th, td
text-align: center
width: 45px
.btn
margin: 0
height: 32px
width: 32px
.picker--month__table
table
width: 100%
td
width: 33.333333%
height: 56px
vertical-align: middle