codecheck

1
// core
2
.p-calendar {
3
    display: inline-flex;
4
    max-width: 100%;
5
}
6

7
.p-calendar .p-inputtext {
8
    flex: 1 1 auto;
9
    width: 1%;
10
}
11

12
.p-calendar-w-btn .p-inputtext {
13
    border-top-right-radius: 0;
14
    border-bottom-right-radius: 0;
15
}
16

17
.p-calendar-w-btn .p-datepicker-trigger {
18
    border-top-left-radius: 0;
19
    border-bottom-left-radius: 0;
20
}
21

22
.p-calendar .p-datepicker-trigger-icon {
23
    cursor: pointer;
24
}
25

26
/* Fluid */
27
.p-fluid .p-calendar {
28
    display: flex;
29
}
30

31
.p-fluid .p-calendar .p-inputtext {
32
    width: 1%;
33
}
34

35
/* Datepicker */
36
.p-calendar .p-datepicker {
37
    min-width: 100%;
38
}
39

40
.p-datepicker {
41
    width: auto;
42
}
43

44
.p-datepicker-inline {
45
    display: inline-block;
46
    overflow-x: auto;
47
}
48

49
/* Header */
50
.p-datepicker-header {
51
    display: flex;
52
    align-items: center;
53
    justify-content: space-between;
54
}
55

56
.p-datepicker-header .p-datepicker-title {
57
    margin: 0 auto;
58
}
59

60
.p-datepicker-prev,
61
.p-datepicker-next {
62
    cursor: pointer;
63
    display: inline-flex;
64
    justify-content: center;
65
    align-items: center;
66
    overflow: hidden;
67
    position: relative;
68
}
69

70
/* Multiple Month DatePicker */
71
.p-datepicker-multiple-month .p-datepicker-group-container {
72
    display: flex;
73
}
74

75
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
76
    flex: 1 1 auto;
77
}
78

79
/* DatePicker Table */
80
.p-datepicker table {
81
    width: 100%;
82
    border-collapse: collapse;
83
}
84

85
.p-datepicker td > span {
86
    display: flex;
87
    justify-content: center;
88
    align-items: center;
89
    cursor: pointer;
90
    margin: 0 auto;
91
    overflow: hidden;
92
    position: relative;
93
}
94

95
/* Month Picker */
96
.p-monthpicker-month {
97
    width: 33.3%;
98
    display: inline-flex;
99
    align-items: center;
100
    justify-content: center;
101
    cursor: pointer;
102
    overflow: hidden;
103
    position: relative;
104
}
105

106
/* Year Picker */
107
.p-yearpicker-year {
108
    width: 50%;
109
    display: inline-flex;
110
    align-items: center;
111
    justify-content: center;
112
    cursor: pointer;
113
    overflow: hidden;
114
    position: relative;
115
}
116

117
/*  Button Bar */
118
.p-datepicker-buttonbar {
119
    display: flex;
120
    justify-content: space-between;
121
    align-items: center;
122
}
123

124
/* Time Picker */
125
.p-timepicker {
126
    display: flex;
127
    justify-content: center;
128
    align-items: center;
129
}
130

131
.p-timepicker button {
132
    display: flex;
133
    align-items: center;
134
    justify-content: center;
135
    cursor: pointer;
136
    overflow: hidden;
137
    position: relative;
138
}
139

140
.p-timepicker > div {
141
    display: flex;
142
    align-items: center;
143
    flex-direction: column;
144
}
145

146
/* Touch UI */
147
.p-datepicker-touch-ui,
148
.p-calendar .p-datepicker-touch-ui {
149
    min-width: 80vw;
150
}
151

152
// theme
153
.p-calendar {
154
    &.p-invalid.p-component > .p-inputtext {
155
        @include invalid-input();
156
    }
157

158
    &:not(.p-calendar-disabled).p-focus > .p-inputtext {
159
        @include focused-input();
160
    }
161
}
162

163
.p-datepicker {
164
    padding: $calendarPadding;
165
    background: $calendarInlineBg;
166
    color: $calendarTextColor;
167
    border: $calendarBorder;
168
    border-radius: $borderRadius;
169

170
    &:not(.p-datepicker-inline) {
171
        background: $calendarBg;
172
        border: $calendarOverlayBorder;
173
        box-shadow: $inputOverlayShadow;
174

175
        .p-datepicker-header {
176
            background: $calendarHeaderBg;
177
        }
178
    }
179

180
    .p-datepicker-header {
181
        padding: $calendarHeaderPadding;
182
        color: $calendarHeaderTextColor;
183
        background: $calendarInlineHeaderBg;
184
        font-weight: $calendarHeaderFontWeight;
185
        margin: $inputListHeaderMargin;
186
        border-bottom: $calendarHeaderBorder;
187
        border-top-right-radius: $borderRadius;
188
        border-top-left-radius: $borderRadius;
189

190
        .p-datepicker-prev,
191
        .p-datepicker-next {
192
            @include action-icon();
193
        }
194

195
        .p-datepicker-title {
196
            line-height: $actionIconHeight;
197

198
            .p-datepicker-year,
199
            .p-datepicker-month {
200
                color: $calendarHeaderTextColor;
201
                transition: $actionIconTransition;
202
                font-weight: $calendarHeaderFontWeight;
203
                padding: $calendarHeaderCellPadding;
204

205
                &:enabled:hover {
206
                    color: $calendarMonthYearHeaderHoverTextColor;
207
                }
208
            }
209

210
            .p-datepicker-month {
211
                margin-right: $inlineSpacing;
212
            }
213
        }
214
    }
215

216
    table {
217
        font-size: $fontSize;
218
        margin: $calendarTableMargin;
219

220
        th {
221
            padding: $calendarHeaderCellPadding;
222

223
            > span {
224
                width: $calendarCellDateWidth;
225
                height: $calendarCellDateHeight;
226
            }
227
        }
228

229
        td {
230
            padding: $calendarCellDatePadding;
231

232
            > span {
233
                width: $calendarCellDateWidth;
234
                height: $calendarCellDateHeight;
235
                border-radius: $calendarCellDateBorderRadius;
236
                transition: $listItemTransition;
237
                border: $calendarCellDateBorder;
238
                outline-color: transparent;
239

240
                &.p-highlight {
241
                    color: $highlightTextColor;
242
                    background: $highlightBg;
243
                }
244

245
                &:focus {
246
                    @include focused();
247
                }
248
            }
249

250
            &.p-datepicker-today {
251
                > span {
252
                    background: $calendarCellDateTodayBg;
253
                    color: $calendarCellDateTodayTextColor;
254
                    border-color: $calendarCellDateTodayBorderColor;
255

256
                    &.p-highlight {
257
                        color: $highlightTextColor;
258
                        background: $highlightBg;
259
                    }
260
                }
261
            }
262
        }
263
    }
264

265
    .p-datepicker-buttonbar {
266
        padding: $calendarButtonBarPadding;
267
        border-top: $divider;
268

269
        .p-button {
270
            width: auto;
271
        }
272
    }
273

274
    .p-timepicker {
275
        border-top: $divider;
276
        padding: $calendarTimePickerPadding;
277

278
        button {
279
            @include action-icon();
280

281
            &:last-child {
282
                margin-top: 0.2em;
283
            }
284
        }
285

286
        span {
287
            font-size: $calendarTimePickerTimeFontSize;
288
        }
289

290
        > div {
291
            padding: $calendarTimePickerElementPadding;
292
        }
293
    }
294

295
    &.p-datepicker-timeonly {
296
        .p-timepicker {
297
            border-top: 0 none;
298
        }
299
    }
300

301
    .p-monthpicker {
302
        margin: $calendarTableMargin;
303

304
        .p-monthpicker-month {
305
            padding: $calendarCellDatePadding;
306
            transition: $listItemTransition;
307
            border-radius: $borderRadius;
308

309
            &.p-highlight {
310
                color: $highlightTextColor;
311
                background: $highlightBg;
312
            }
313
        }
314
    }
315

316
    .p-yearpicker {
317
        margin: $calendarTableMargin;
318

319
        .p-yearpicker-year {
320
            padding: $calendarCellDatePadding;
321
            transition: $listItemTransition;
322
            border-radius: $borderRadius;
323

324
            &.p-highlight {
325
                color: $highlightTextColor;
326
                background: $highlightBg;
327
            }
328
        }
329
    }
330

331
    &.p-datepicker-multiple-month {
332
        .p-datepicker-group {
333
            border-left: $divider;
334
            padding-right: $calendarPadding;
335
            padding-left: $calendarPadding;
336
            padding-top: 0;
337
            padding-bottom: 0;
338

339
            &:first-child {
340
                padding-left: 0;
341
                border-left: 0 none;
342
            }
343

344
            &:last-child {
345
                padding-right: 0;
346
            }
347
        }
348
    }
349

350
    &.p-datepicker-mobile {
351
        table {
352
            th,
353
            td {
354
                padding: $calendarCellDatePaddingSM;
355
            }
356
        }
357
    }
358

359
    &:not(.p-disabled) {
360
        table {
361
            td {
362
                span:not(.p-highlight):not(.p-disabled) {
363
                    outline-color: transparent;
364

365
                    &:hover {
366
                        background: $calendarCellDateHoverBg;
367
                    }
368

369
                    &:focus {
370
                        @include focused();
371
                    }
372
                }
373
            }
374
        }
375

376
        .p-monthpicker {
377
            .p-monthpicker-month {
378
                &:not(.p-disabled) {
379
                    outline-color: transparent;
380

381
                    &:not(.p-highlight):hover {
382
                        background: $calendarCellDateHoverBg;
383
                    }
384

385
                    &:focus {
386
                        @include focused();
387
                    }
388
                }
389
            }
390
        }
391

392
        .p-yearpicker {
393
            .p-yearpicker-year {
394
                &:not(.p-disabled) {
395
                    outline-color: transparent;
396

397
                    &:not(.p-highlight):hover {
398
                        background: $calendarCellDateHoverBg;
399
                    }
400

401
                    &:focus {
402
                        @include focused();
403
                    }
404
                }
405
            }
406
        }
407
    }
408
}
409