UNPKG

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
.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