quasar/src/components/datetime/datetime.ios.styl at v0.17 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
.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