1
+ .p-calendar {
2
+ position : relative;
3
+ display : inline-block;
4
+ }
5
+
6
+ .p-calendar .p-calendar-button {
7
+ position : absolute;
8
+ height : 100% ;
9
+ border-top-left-radius : 0px ;
10
+ border-bottom-left-radius : 0px ;
11
+ width : 2em ;
12
+ border-left : 0 none;
13
+ }
14
+
15
+ .p-calendar .p-calendar-button : enabled : hover ,
16
+ .p-calendar .p-calendar-button : focus {
17
+ border-left : 0 none;
18
+ }
19
+
20
+ .p-calendar .p-datepicker {
21
+ min-width : 100% ;
22
+ }
23
+
24
+ /* Fluid */
25
+ .p-fluid .p-calendar {
26
+ width : 100% ;
27
+ }
28
+
29
+ .p-fluid .p-calendar-button {
30
+ width : 2em ;
31
+ }
32
+
33
+ .p-fluid .p-datepicker-buttonbar button {
34
+ width : auto;
35
+ }
36
+
37
+ .p-fluid .p-calendar .p-calendar-w-btn .p-inputtext {
38
+ width : calc (100% - 2em );
39
+ }
40
+
41
+ /* Datepicker */
42
+ .p-datepicker {
43
+ width : auto;
44
+ padding : .2em ;
45
+ display : none;
46
+ position : absolute;
47
+ }
48
+
49
+ .p-datepicker .p-datepicker-inline {
50
+ display : inline-block;
51
+ position : static;
52
+ }
53
+
54
+ .p-datepicker .p-datepicker-group {
55
+ border-left-width : 0 ;
56
+ border-right-width : 0 ;
57
+ border-top-width : 0 ;
58
+ border-bottom-width : 0 ;
59
+ }
60
+
61
+ /* Header */
62
+ .p-datepicker .p-datepicker-header {
63
+ position : relative;
64
+ padding : .5em 0 ;
65
+ }
66
+ .p-datepicker .p-datepicker-prev ,
67
+ .p-datepicker .p-datepicker-next {
68
+ position : absolute;
69
+ top : .5em ;
70
+ width : 1.8em ;
71
+ height : 1.8em ;
72
+ cursor : pointer;
73
+ }
74
+
75
+ .p-datepicker .p-datepicker-prev {
76
+ left : .125em ;
77
+ }
78
+ .p-datepicker .p-datepicker-next {
79
+ right : .125em ;
80
+ }
81
+
82
+ .p-datepicker .p-datepicker-prev span ,
83
+ .p-datepicker .p-datepicker-next span {
84
+ display : block;
85
+ position : absolute;
86
+ left : 50% ;
87
+ top : 50% ;
88
+ margin-top : -.5em ;
89
+ margin-left : -.5em ;
90
+ }
91
+
92
+ .p-datepicker .p-datepicker-title {
93
+ margin : 0 2.3em ;
94
+ line-height : 1.8em ;
95
+ text-align : center;
96
+ }
97
+ .p-datepicker .p-datepicker-title select {
98
+ font-size : 1em ;
99
+ margin : .125em 0 ;
100
+ vertical-align : middle;
101
+ }
102
+ .p-datepicker select .p-datepicker-month {
103
+ margin-right : .25em ;
104
+ }
105
+ .p-datepicker span .p-datepicker-year {
106
+ margin-left : .25em ;
107
+ }
108
+
109
+ /* Multiple Month DatePicker */
110
+ .p-datepicker-multiple-month .p-datepicker-group {
111
+ display : table-cell;
112
+ border-left-width : 0 ;
113
+ border-top-width : 0 ;
114
+ border-bottom-width : 0 ;
115
+ border-right-width : 1px ;
116
+ }
117
+
118
+ /* DatePicker Table */
119
+ .p-datepicker table {
120
+ width : 100% ;
121
+ font-size : .9em ;
122
+ border-collapse : collapse;
123
+ margin : 0 0 .4em ;
124
+ }
125
+ .p-datepicker th {
126
+ padding : .5em ;
127
+ text-align : center;
128
+ font-weight : bold;
129
+ border : 0 ;
130
+ }
131
+ .p-datepicker td {
132
+ border : 0 ;
133
+ padding : 0 ;
134
+ }
135
+ .p-datepicker td > span ,
136
+ .p-datepicker td > a {
137
+ display : block;
138
+ padding : .5em ;
139
+ text-align : right;
140
+ text-decoration : none;
141
+ }
142
+
143
+ .p-datepicker td a {
144
+ cursor : pointer;
145
+ }
146
+
147
+ .p-datepicker .p-datepicker-buttonbar ,
148
+ .p-datepicker .p-datepicker-footer {
149
+ padding : .5em ;
150
+ }
151
+
152
+ .p-datepicker .p-datepicker-buttonbar : after {
153
+ content : "" ;
154
+ display : table;
155
+ clear : both;
156
+ }
157
+
158
+ .p-datepicker .p-datepicker-buttonbar > button : last-child {
159
+ float : right;
160
+ }
161
+
162
+ .p-calendar .p-calendar-w-btn input {
163
+ -moz-border-radius-topright : 0px ;
164
+ -webkit-border-top-right-radius : 0px ;
165
+ -khtml-border-top-right-radius : 0px ;
166
+ border-top-right-radius : 0px ;
167
+ -moz-border-radius-bottomright : 0px ;
168
+ -webkit-border-bottom-right-radius : 0px ;
169
+ -khtml-border-bottom-right-radius : 0px ;
170
+ border-bottom-right-radius : 0px ;
171
+ }
172
+
173
+ /* Month Picker */
174
+ .p-monthpicker .p-monthpicker-month {
175
+ width : 33.3% ;
176
+ display : inline-block;
177
+ text-align : center;
178
+ padding : .5em ;
179
+ cursor : pointer;
180
+ }
181
+
182
+ .p-datepicker-monthpicker select .p-datepicker-year {
183
+ width : auto;
184
+ }
185
+
186
+ /* Time Picker */
187
+ .p-timepicker {
188
+ display : flex;
189
+ flex-direction : row;
190
+ justify-content : center;
191
+ align-items : center;
192
+ text-align : center;
193
+ padding : .5em 0 ;
194
+ }
195
+
196
+ .p-timepicker > div {
197
+ display : flex;
198
+ flex-direction : column;
199
+ align-items : center;
200
+ margin-left : .5em ;
201
+ min-width : 1.5em ;
202
+ }
203
+
204
+ .p-timepicker > .p-minute-picker ,
205
+ .p-timepicker > .p-second-picker ,
206
+ .p-timepicker > .p-millisecond-picker {
207
+ margin-left : 0 ;
208
+ }
209
+
210
+ .p-timepicker > .p-separator {
211
+ margin-left : 0px ;
212
+ min-width : .75em ;
213
+ }
214
+
215
+ .p-timepicker > .p-separator .p-separator-spacer {
216
+ visibility : hidden;
217
+ display : block;
218
+ }
219
+
220
+ .p-timepicker > .p-separator .p-separator-spacer : last-child {
221
+ margin-top : .3em ;
222
+ }
223
+
224
+ .p-timepicker > div button {
225
+ display : block;
226
+ cursor : pointer;
227
+ }
228
+
229
+ .p-timepicker > div button : last-child {
230
+ margin-top : .3em ;
231
+ }
232
+
233
+ input [type = text ]::-ms-clear {
234
+ display : none;
235
+ }
236
+
237
+ /* Touch UI */
238
+ .p-datepicker-touch-ui ,
239
+ .p-calendar .p-datepicker-touch-ui {
240
+ position : fixed;
241
+ top : 50% ;
242
+ left : 50% ;
243
+ min-width : 80vw ;
244
+ transform : translate (-50% , -50% );
245
+ }
246
+
247
+ .p-datepicker-touch-ui .p-datepicker th {
248
+ padding : 2em 0 ;
249
+ }
250
+ .p-datepicker-touch-ui .p-datepicker td {
251
+ padding : 0 ;
252
+ }
253
+ .p-datepicker-touch-ui .p-datepicker td span ,
254
+ .p-datepicker-touch-ui .p-datepicker td a {
255
+ padding : 2em 0 ;
256
+ }
257
+
258
+ .p-datepicker-touch-ui .p-timepicker {
259
+ padding : 1em 0 ;
260
+ }
261
+
262
+ .p-datepicker-touch-ui .p-timepicker > div a {
263
+ font-size : 2em ;
264
+ }
265
+
266
+ .p-datepicker-mask {
267
+ position : fixed;
268
+ width : 100% ;
269
+ height : 100% ;
270
+ }
271
+
272
+ @media screen and (max-width : 40em ) {
273
+ .p-datepicker-multiple-month {
274
+ width : 17em ;
275
+ overflow : auto;
276
+ }
277
+
278
+ .p-datepicker-touch-ui .p-datepicker th {
279
+ padding : 1em 0 ;
280
+ }
281
+
282
+ .p-datepicker-touch-ui .p-datepicker td span ,
283
+ .p-datepicker-touch-ui .p-datepicker td a {
284
+ padding : 1em 0 ;
285
+ }
286
+ }
0 commit comments