1/*
2 * Copyright (C) 2012 Google Inc. All rights reserved.
3 *
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are
6 * met:
7 *
8 *     * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer.
10 *     * Redistributions in binary form must reproduce the above
11 * copyright notice, this list of conditions and the following disclaimer
12 * in the documentation and/or other materials provided with the
13 * distribution.
14 *     * Neither the name of Google Inc. nor the names of its
15 * contributors may be used to endorse or promote products derived from
16 * this software without specific prior written permission.
17 *
18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 */
30
31body {
32    -webkit-user-select: none;
33    background-color: white;
34    font: -webkit-control;
35    font-size: 12px;
36}
37
38.rtl {
39    direction: rtl;
40}
41
42.scroll-view {
43    overflow: hidden;
44    width: 0;
45    height: 0;
46}
47
48.list-cell {
49    position: absolute;
50    left: 0;
51    top: 0;
52    width: 0;
53    height: 0;
54}
55
56.list-cell.hidden {
57    display: none;
58}
59
60.week-number-cell,
61.day-cell {
62    position: static;
63    text-align: center;
64    box-sizing: border-box;
65    display: inline-block;
66    cursor: default;
67    transition: color 1s;
68    padding: 1px;
69}
70
71.week-number-cell {
72    box-sizing: border-box;
73    color: black;
74    padding-right: 0;
75    box-shadow: 1px 0 0 #bfbfbf;
76    margin-right: 1px;
77}
78
79.day-cell {
80    color: #bfbfbf;
81}
82
83.day-cell.highlighted.today,
84.day-cell.today {
85    border: 1px solid #bfbfbf;
86    padding: 0;
87}
88
89.week-number-cell.highlighted,
90.day-cell.highlighted {
91    background-color: #e5ecf8;
92}
93
94.week-number-cell.highlighted.disabled,
95.day-cell.highlighted.disabled {
96    border: 1px solid #e5ecf8;
97    padding: 0;
98}
99
100.week-number-cell.selected,
101.day-cell.selected {
102    background-color: #bccdec;
103}
104
105.week-number-cell.disabled,
106.day-cell.disabled {
107    background-color: #f5f5f5;
108}
109
110.day-cell.current-month {
111    color: #000000;
112}
113
114.calendar-table-view {
115    border: 1px solid #bfbfbf;
116    outline: none;
117}
118
119.week-number-label,
120.week-day-label {
121    text-align: center;
122    display: inline-block;
123    line-height: 23px;
124    padding-top: 1px;
125    box-sizing: padding-box;
126}
127
128.week-number-label {
129    box-sizing: border-box;
130    border-right: 1px solid #bfbfbf;
131}
132
133.calendar-table-header-view {
134    background-color: #f5f5f5;
135    border-bottom: 1px solid #bfbfbf;
136    height: 24px;
137}
138
139.calendar-picker {
140    border: 1px solid #bfbfbf;
141    border-radius: 2px;
142    position: absolute;
143    padding: 10px;
144    background-color: white;
145    overflow: hidden;
146    cursor: default;
147}
148
149.calendar-header-view {
150    margin-bottom: 10px;
151    display: flex;
152    flex-flow: row;
153}
154
155.calendar-title {
156    -webkit-align-self: center;
157    flex: 1;
158    text-align: left;
159}
160
161.rtl .calendar-title {
162    text-align: right;
163}
164
165.month-popup-button,
166.month-popup-button:hover,
167.month-popup-button:disabled {
168    background-color: transparent !important;
169    background-image: none !important;
170    box-shadow: none !important;
171    color: black;
172}
173
174.month-popup-button:disabled {
175    opacity: 0.7;
176}
177
178.month-popup-button {
179    font-size: 12px;
180    padding: 4px;
181    display: inline-block;
182    cursor: default;
183    border: 1px solid transparent !important;
184    height: 24px !important;
185}
186
187.month-popup-button .disclosure-triangle {
188    margin: 0 6px;
189}
190
191.month-popup-button .disclosure-triangle svg {
192    padding-bottom: 2px;
193}
194
195.today-button::after {
196    content: "";
197    display: block;
198    border-radius: 3px;
199    width: 6px;
200    height: 6px;
201    background-color: #6e6e6e;
202    margin: 0 auto;
203}
204
205.calendar-navigation-button {
206    -webkit-align-self: center;
207    width: 24px;
208    height: 24px;
209    min-width: 0 !important;
210    padding-left: 0 !important;
211    padding-right: 0 !important;
212    -webkit-margin-start: 4px !important;
213}
214
215.year-list-view {
216    border: 1px solid #bfbfbf;
217    background-color: white;
218    position: absolute;
219}
220
221.year-list-cell {
222    box-sizing: border-box;
223    border-bottom: 1px solid #bfbfbf;
224    background-color: white;
225    overflow: hidden;
226}
227
228.year-list-cell .label {
229    height: 24px;
230    line-height: 24px;
231    -webkit-padding-start: 8px;
232    background-color: #f5f5f5;
233    border-bottom: 1px solid #bfbfbf;
234}
235
236.year-list-cell .month-chooser {
237    padding: 0;
238}
239
240.month-buttons-row {
241    display: flex;
242}
243
244.month-button {
245    flex: 1;
246    height: 32px;
247    padding: 0 !important;
248    margin: 0 !important;
249    background-image: none !important;
250    background-color: #ffffff;
251    border-width: 0 !important;
252    box-shadow: none !important;
253}
254
255.month-button.highlighted {
256    background-color: #e5ecf8;
257}
258
259.scrubby-scroll-bar {
260    width: 14px;
261    height: 60px;
262    background-color: white;
263    border-left: 1px solid #bfbfbf;
264    position: absolute;
265    top: 0;
266}
267
268.scrubby-scroll-thumb {
269    width: 10px;
270    margin: 2px;
271    height: 30px;
272    background-color: #d8d8d8;
273    position: absolute;
274    left: 0;
275    top: 0;
276}
277
278.month-popup-view {
279    position: absolute;
280    top: 0;
281    right: 0;
282    bottom: 0;
283    left: 0;
284}
285
286.year-list-view .scrubby-scroll-bar {
287    right: 0;
288}
289
290.rtl .year-list-view .scrubby-scroll-bar {
291    left: 0;
292    right: auto;
293    border-left-width: 0;
294    border-right: 1px solid #bfbfbf;
295}
296
297.year-month-button {
298    width: 24px;
299    height: 24px;
300    min-width: 0;
301    padding: 0;
302}
303
304.month-popup-button:focus,
305.year-list-view:focus,
306.calendar-table-view:focus {
307    transition: border-color 200ms;
308    /* We use border color because it follows the border radius (unlike outline).
309    * This is particularly noticeable on mac. */
310    border-color: rgb(77, 144, 254) !important;
311    outline: none;
312}
313
314.preparing button:focus,
315.preparing .year-list-view:focus,
316.preparing .calendar-table-view:focus {
317    transition: none;
318}
319