quasar-framework/src/components/datetime/datetime.ios.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.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