OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2012 Google Inc. All rights reserved. | 2 * Copyright (C) 2012 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 13 matching lines...) Expand all Loading... |
24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 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. | 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
29 */ | 29 */ |
30 | 30 |
31 body { | 31 body { |
32 -webkit-user-select: none; | 32 -webkit-user-select: none; |
33 background-color: white; | 33 background-color: white; |
34 font: -webkit-small-control; | 34 font: -webkit-control; |
35 margin: 0; | 35 margin: 0; |
36 overflow: hidden; | 36 overflow: hidden; |
37 } | 37 } |
38 | 38 |
39 .no-focus-ring :focus { | 39 .no-focus-ring :focus { |
40 outline: none; | 40 outline: none; |
41 } | 41 } |
42 | 42 |
43 .calendar-picker { | 43 .calendar-picker { |
| 44 border: 1px solid #bfbfbf; |
| 45 border-radius: 2px; |
| 46 position: absolute; |
| 47 padding: 10px; |
44 background-color: white; | 48 background-color: white; |
45 border: solid 1px #8899aa; | |
46 box-shadow: inset 2px 2px 2px white, | |
47 inset -2px -2px 1px rgba(0,0,0,0.1); | |
48 padding: 6px; | |
49 white-space: nowrap; | 49 white-space: nowrap; |
50 width: 500px; | 50 width: 500px; |
51 } | 51 } |
52 | 52 |
53 .year-month-area { | 53 .year-month-area { |
54 } | 54 } |
55 | 55 |
56 .year-month-upper { | 56 .year-month-upper { |
57 /* display:-webkit-box; is added in the JS code. */ | 57 /* display:-webkit-box; is added in the JS code. */ |
58 } | 58 } |
59 | 59 |
60 .year-selector { | 60 .year-selector { |
61 text-align: right; | 61 text-align: right; |
62 width: 6em; | 62 width: 6em; |
63 } | 63 } |
64 | 64 |
65 .month-selector-box { | 65 .month-selector-box { |
66 display: inline-block; | 66 display: inline-block; |
67 text-align: center; | 67 text-align: center; |
68 -webkit-box-flex: 2; | 68 -webkit-box-flex: 2; |
69 } | 69 } |
70 | 70 |
71 .month-selector { | 71 .month-selector { |
72 background-color: white; | 72 background-color: white; |
73 cursor: pointer; | 73 cursor: pointer; |
74 display: inline-block; | 74 display: inline-block; |
75 padding: 3px 6px 3px 6px; | 75 padding: 4px 6px 4px 6px; |
76 } | 76 } |
77 .month-selector:after { | 77 |
78 content: " ▼"; | 78 .month-selector svg { |
79 font-size: smaller; | 79 margin: 0 6px 2px 6px; |
80 } | 80 } |
81 | 81 |
82 .month-selector-popup { | 82 .month-selector-popup { |
83 -webkit-box-sizing: content-box; | 83 -webkit-box-sizing: content-box; |
84 -webkit-box-shadow: | 84 -webkit-box-shadow: |
85 0 0 0 1px rgba(0,0,0,0.1), | 85 0 0 0 1px rgba(0,0,0,0.1), |
86 0 5px 1px 1px rgba(0,0,0,0.1), | 86 0 5px 1px 1px rgba(0,0,0,0.1), |
87 0 5px 2px 1px rgba(0,0,0,0.1), | 87 0 5px 2px 1px rgba(0,0,0,0.1), |
88 0 5px 12px 1px rgba(0,0,0,0.5); | 88 0 5px 12px 1px rgba(0,0,0,0.5); |
89 background: #fff; | 89 background: #fff; |
90 display: none; | 90 display: none; |
91 max-height: 10.8em; | 91 max-height: 10.8em; |
92 overflow-x: hidden; | 92 overflow-x: hidden; |
93 overflow-y: auto; | 93 overflow-y: auto; |
94 position: absolute; | 94 position: absolute; |
95 white-space: nowrap; | 95 white-space: nowrap; |
96 } | 96 } |
97 | 97 |
98 .month-selector-popup-contents { | 98 .month-selector-popup-contents { |
99 display: table; | 99 display: table; |
| 100 text-align: left; |
| 101 border: 1px solid #bfbfbf; |
| 102 margin: -1px 0 0 -1px; |
100 } | 103 } |
101 | 104 |
102 .month-selector-popup-entry { | 105 .month-selector-popup-entry { |
103 -webkit-padding-start: 5px; | 106 -webkit-padding-start: 5px; |
104 -webkit-padding-end: 5px; | 107 -webkit-padding-end: 5px; |
105 cursor: pointer; | 108 cursor: pointer; |
106 display; table-row; | 109 display; table-row; |
107 line-height: 1.2em; | 110 line-height: 1.2em; |
108 } | 111 } |
109 | 112 |
(...skipping 20 matching lines...) Expand all Loading... |
130 left: 0px; | 133 left: 0px; |
131 position: absolute; | 134 position: absolute; |
132 top: 0px; | 135 top: 0px; |
133 width: 100%; | 136 width: 100%; |
134 } | 137 } |
135 | 138 |
136 .year-month-button-left { | 139 .year-month-button-left { |
137 display: inline-block; | 140 display: inline-block; |
138 } | 141 } |
139 | 142 |
| 143 .year-month-button-left .year-month-button { |
| 144 margin-right: 4px; |
| 145 } |
| 146 |
140 .year-month-button-right { | 147 .year-month-button-right { |
141 display: inline-block; | 148 display: inline-block; |
142 } | 149 } |
143 | 150 |
| 151 .year-month-button-right .year-month-button { |
| 152 margin-left: 4px; |
| 153 } |
| 154 |
144 .days-area-container { | 155 .days-area-container { |
145 background-color: white; | 156 background-color: white; |
146 border: solid 1px black; | 157 border: 1px solid #bfbfbf; |
147 margin-bottom: 4px; | 158 margin-bottom: 8px; |
148 margin-top: 4px; | 159 margin-top: 10px; |
149 overflow: hidden; | 160 overflow: hidden; |
150 } | 161 } |
151 | 162 |
152 .days-area { /* <table> */ | 163 .days-area { /* <table> */ |
153 background-color: white; | 164 background-color: white; |
154 border-collapse: separate; | 165 border-collapse: separate; |
155 border-spacing: 0px; | 166 border-spacing: 0px; |
156 font: -webkit-small-control; | 167 font: -webkit-control; |
157 /* table-layout:fixed and width:100% are added in the JS code. */ | 168 /* table-layout:fixed and width:100% are added in the JS code. */ |
158 } | 169 } |
159 | 170 |
160 .day-label { /* <th> */ | 171 .day-label { /* <th> */ |
161 -webkit-box-sizing: border-box; | 172 -webkit-box-sizing: border-box; |
162 background-color: #e3e9ff; | 173 background-color: #f5f5f5; |
163 border-left-color: #f0f4ff; | |
164 border-top-color: #f0f4ff; | |
165 border: solid 1px #d0d4f0; | |
166 color: #20c; | |
167 font-weight: normal; | 174 font-weight: normal; |
168 text-align: center; | 175 text-align: center; |
| 176 border-bottom: 1px solid #bfbfbf; |
| 177 height: 2.1em; |
169 } | 178 } |
170 | 179 |
171 .day { /* <td> */ | 180 .day { /* <td> */ |
172 padding: 1px; | 181 padding: 1px; |
173 text-align: center; | 182 text-align: center; |
174 background-color: white; | 183 background-color: white; |
175 border: 1px solid white; | 184 border: 1px solid white; |
176 -webkit-box-sizing: border-box; | 185 -webkit-box-sizing: border-box; |
| 186 line-height: 1.4em; |
177 } | 187 } |
178 | 188 |
179 @media (pointer:coarse) { | 189 @media (pointer:coarse) { |
180 .day { | 190 .day { |
181 min-width: 28px; | 191 min-width: 28px; |
182 line-height: 28px; | 192 line-height: 28px; |
183 } | 193 } |
184 } | 194 } |
185 | 195 |
186 .available { | 196 .available { |
187 cursor: default; | 197 cursor: default; |
188 font-weight: 700; | |
189 background-color: white; | 198 background-color: white; |
190 border: 1px solid white; | 199 border: 1px solid white; |
191 border-radius: 5px; | |
192 -webkit-transition: all 0.2s ease; | 200 -webkit-transition: all 0.2s ease; |
193 } | 201 } |
194 | 202 |
195 .not-this-month { | 203 .not-this-month { |
196 color: graytext; | 204 color: graytext; |
197 font-weight: 400; | 205 font-weight: 400; |
198 text-shadow: none; | 206 text-shadow: none; |
199 } | 207 } |
200 | 208 |
201 .available.day-selected { | 209 .available.day-selected { |
(...skipping 19 matching lines...) Expand all Loading... |
221 } | 229 } |
222 | 230 |
223 .preparing .available, | 231 .preparing .available, |
224 .preparing .unavailable { | 232 .preparing .unavailable { |
225 -webkit-transition: none; | 233 -webkit-transition: none; |
226 } | 234 } |
227 | 235 |
228 .week-mode .day, | 236 .week-mode .day, |
229 .month-mode .day { | 237 .month-mode .day { |
230 -webkit-transition: none; | 238 -webkit-transition: none; |
231 border-radius: 0; | |
232 border: none; | 239 border: none; |
233 padding: 2px; | 240 padding: 2px; |
234 } | 241 } |
235 | 242 |
236 .week-mode .available.day-selected.monday { | |
237 border-top-left-radius: 5px; | |
238 border-bottom-left-radius: 5px; | |
239 } | |
240 | |
241 .week-mode .available.day-selected.sunday { | |
242 border-top-right-radius: 5px; | |
243 border-bottom-right-radius: 5px; | |
244 } | |
245 | |
246 .week-mode .unavailable.day-selected { | 243 .week-mode .unavailable.day-selected { |
247 padding: 1px 2px; | 244 padding: 1px 2px; |
248 border-top: 1px solid highlight; | 245 border-top: 1px solid highlight; |
249 border-bottom: 1px solid highlight; | 246 border-bottom: 1px solid highlight; |
250 } | 247 } |
251 | 248 |
252 .week-mode .unavailable.day-selected.monday { | 249 .week-mode .unavailable.day-selected.monday { |
253 padding-left: 1px; | 250 padding-left: 1px; |
254 border-left: 1px solid highlight; | 251 border-left: 1px solid highlight; |
255 } | 252 } |
(...skipping 10 matching lines...) Expand all Loading... |
266 | 263 |
267 .week-column { | 264 .week-column { |
268 display: none; | 265 display: none; |
269 } | 266 } |
270 | 267 |
271 .week-mode .week-column { | 268 .week-mode .week-column { |
272 display: table-cell; | 269 display: table-cell; |
273 border-right: 1px solid #999; | 270 border-right: 1px solid #999; |
274 padding-right: 1px; | 271 padding-right: 1px; |
275 } | 272 } |
| 273 |
| 274 .today-clear-area .today-button { |
| 275 margin-right: 8px; |
| 276 } |
OLD | NEW |