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 31 body { 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