quasar-framework
Version:
Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
129 lines (111 loc) • 2.47 kB
text/stylus
.q-datetime-input
min-width $datetime-input-min-width
.q-datetime
border 1px solid $grey-4
&.type-date, &.type-datetime
min-width 320px
&.type-time
min-width 250px
.q-datetime-content
height 200px
position relative
.q-datetime-inner
font-size 21px
overflow hidden
perspective 1200px
height 100%
text-align right
position relative
padding 0
direction ltr /* rtl:ignore */
.q-datetime-col
display block
overflow visible
transform-style preserve-3d
position relative
max-height 100%
.q-datetime-col-wrapper, .q-datetime-item
transform-style preserve-3d
transition all .2s ease-out
cursor pointer
.q-datetime-col-divider
max-height 100%
width 10px
.q-datetime-col-month
width 117px
text-align left
.q-datetime-col-day
width 37px
.q-datetime-col-year
width 61px
.q-datetime-col-hour
width 37px
.q-datetime-col-minute
width 37px
.q-datetime-item
font-size 85%
height 36px
line-height 36px
color rgba(0, 0, 0, .87)
position absolute
white-space nowrap
overflow hidden
text-overflow ellipsis
left 0
top 0
width 100%
backface-visibility hidden
transform-origin center center -110px
[dir=rtl] .q-datetime-col-month .q-datetime-item
padding-right 5px
.q-datetime-mask
position absolute
top 0
right 0
bottom 0
left 0
height 100%
width 100%
background linear-gradient(to top, white, rgba(255, 255, 255, 0.0) 50%, white)
pointer-events none
.q-datetime-highlight
height 36px
position absolute
left 0
right 0
width 100%
top 50%
margin-top -18px
pointer-events none
border-top 1px solid $grey-5
border-bottom 1px solid $grey-5
.q-datetime-range
&.row
.q-datetime-range-left
border-top-right-radius 0
border-bottom-right-radius 0
.q-datetime-range-right
border-top-left-radius 0
border-bottom-left-radius 0
&.column > div + div
margin-top $datetime-range-space
.q-datetime-dark
background $dark
background var(--q-color-dark)
.modal-buttons
background black
.q-datetime-item
color rgba(255, 255, 255, .87)
.q-datetime-mask
background linear-gradient(to top, black, rgba(0, 0, 0, 0.0) 50%, black)
@media (max-width $breakpoint-sm-max)
.datetime-ios-modal
&.type-date, &.type-datetime
min-width 320px
width auto
&.type-time
min-width 250px
width auto
@media (min-width $breakpoint-md-min)
.datetime-ios-modal.type-time
min-width 280px