/
_date_picker.styl
162 lines (161 loc) · 4.16 KB
/
_date_picker.styl
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
/* ==========================================================================
$BASE-PICKER
========================================================================== */
/**
* Note: the root picker element should *NOT* be styled more than what's here.
*/
.picker
font-size: 16px
text-align: left
line-height: 1.2
color: #000000
position: absolute
z-index: 10000
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
/**
* The picker input element.
*/
.picker__input
cursor: default
/*!
* Default mobile-first, responsive styling for pickadate.js
* Demo: http://amsul.github.io/pickadate.js
*/
/**
* Note: the root picker element should *NOT* be styled more than what's here.
*/
/**
* Make the holder and frame fullscreen.
*/
.picker__holder,
.picker__frame
bottom: 0
left: 0
right: 0
top: 100%
/**
* The holder is the only "scrollable" top-level container element.
* The holder should overlay the entire screen.
*/
.picker__holder
width: 100%
overflow-y: auto
-webkit-overflow-scrolling: touch
position: fixed
-webkit-transition: background 0.15s ease-out, top 0s 0.15s
-moz-transition: background 0.15s ease-out, top 0s 0.15s
transition: background 0.15s ease-out, top 0s 0.15s
-webkit-backface-visibility: hidden
/**
* The frame that bounds the box contents of the picker.
*/
.picker__frame
position: absolute
margin: 0 auto
min-width: 256px
// picker width
max-width: 300px
max-height: 350px
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
filter unquote('alpha(opacity = 0)')
-moz-opacity: 0
opacity: 0
-webkit-transition: all 0.15s ease-out
-moz-transition: all 0.15s ease-out
transition: all 0.15s ease-out
@media (min-height: 28.875em)
.picker__frame
overflow: visible
top: auto
bottom: -100%
max-height: 80%
@media (min-height: 40.125em)
.picker__frame
margin-bottom: 7.5%
/**
* The wrapper sets the stage to vertically align the box contents.
*/
.picker__wrap
display: table
width: 100%
height: 100%
@media (min-height: 28.875em)
.picker__wrap
display: block
/**
* The box contains all the picker contents.
*/
.picker__box
background: #ffffff
display: table-cell
vertical-align: middle
//@media (min-height: 26.5em) {
// .picker__box {
//// font-size: 1.25em;
// }
//}
@media (min-height: 28.875em)
.picker__box
display: block
// picker header font-size
// font-size: 1rem;
border: 1px solid #777777
border-top-color: #898989
border-bottom-width: 0
-webkit-border-radius: 5px 5px 0 0
-moz-border-radius: 5px 5px 0 0
border-radius: 5px 5px 0 0
-webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24)
-moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24)
box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24)
//@media (min-height: 40.125em) {
// .picker__box {
// font-size: 1.1rem;
// border-bottom-width: 1px;
// -webkit-border-radius: 5px;
// -moz-border-radius: 5px;
// border-radius: 5px;
// }
//}
/**
* When the picker opens...
*/
.picker--opened .picker__holder
top: 0
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)"
zoom: 1
background: rgba(0, 0, 0, 0.32)
-webkit-transition: background 0.15s ease-out
-moz-transition: background 0.15s ease-out
transition: background 0.15s ease-out
.picker--opened .picker__frame
top: 0
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
filter: unquote('alpha(opacity = 100)')
-moz-opacity: 1
opacity: 1
@media (min-height: 35.875em)
.picker--opened .picker__frame
top: 10%
bottom: 20%auto
/**
* For `large` screens, transform into an inline picker.
*/
/* ==========================================================================
CUSTOM MATERIALIZE STYLES
========================================================================== */
/**
* When the picker is opened, the input element is "activated".
*/
.picker__input.picker__input--active
border-color: color("blue", "lighten-5")
.picker__frame
margin: 0 auto
max-width: 325px
@media (min-height: 38.875em)
.picker--opened .picker__frame
top: 10%
bottom: auto