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

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.quasar-datetime
  max-width 100vw
  border 1px solid $grey-4
  display inline-block

  &.type-date
    width 320px
  &.type-time
    width 200px
  &.type-datetime
    width 320px

.quasar-datetime-content
  height 200px
  position relative

.quasar-datetime-inner
  font-size 21px
  overflow hidden
  perspective 1200px
  height 100%
  text-align right
  position relative
  padding 0

.quasar-datetime-mask
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  height 100%
  width 100%
  background linear-gradient(to top, white, transparent 50%, white)
  pointer-events none

.quasar-datetime-col
  display block
  overflow visible
  transform-style preserve-3d
  position relative
  max-height 100%

.quasar-datetime-col-wrapper, .quasar-datetime-item
  transform-style preserve-3d
  transition all .2s ease-out

body.desktop .quasar-datetime-col-wrapper
  cursor pointer

.quasar-datetime-col-divider
  max-height 100%
  width 10px

.quasar-datetime-col-month
  width 117px
  text-align left
.quasar-datetime-col-day
  width 37px
.quasar-datetime-col-year
  width 61px
.quasar-datetime-col-hour
  width 37px
.quasar-datetime-col-minute
  width 37px

.quasar-datetime-item
  height 36px
  line-height 36px
  padding 0 6px
  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

.quasar-datetime-highlight
  height 36px
  position absolute
  left 0
  width 100%
  top 50%
  margin-top -18px
  pointer-events none

  &:before, &:after
    content ''
    position absolute
    transform scaleY(.5)
    left 0
    right auto
    height 1px
    width 100%
    background $grey-5
    display block
    transform-origin 50% 0

  &:before
    top 0
    bottom auto

  &:after
    bottom 0
    top auto