third_party/WebKit/Source/web/resources/calendarPicker.css

   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     line-height: 32px;
 248     padding: 0 !important;
 249     margin: 0 !important;
 250     background-image: none !important;
 251     background-color: #ffffff;
 252     border-width: 0 !important;
 253     box-shadow: none !important;
 254     text-align: center;
 255 }
 256
 257 .month-button.highlighted {
 258     background-color: #e5ecf8;
 259 }
 260
 261 .month-button[aria-disabled="true"] {
 262     color: GrayText;
 263 }
 264
 265 .scrubby-scroll-bar {
 266     width: 14px;
 267     height: 60px;
 268     background-color: white;
 269     border-left: 1px solid #bfbfbf;
 270     position: absolute;
 271     top: 0;
 272 }
 273
 274 .scrubby-scroll-thumb {
 275     width: 10px;
 276     margin: 2px;
 277     height: 30px;
 278     background-color: #d8d8d8;
 279     position: absolute;
 280     left: 0;
 281     top: 0;
 282 }
 283
 284 .month-popup-view {
 285     position: absolute;
 286     top: 0;
 287     right: 0;
 288     bottom: 0;
 289     left: 0;
 290 }
 291
 292 .year-list-view .scrubby-scroll-bar {
 293     right: 0;
 294 }
 295
 296 .rtl .year-list-view .scrubby-scroll-bar {
 297     left: 0;
 298     right: auto;
 299     border-left-width: 0;
 300     border-right: 1px solid #bfbfbf;
 301 }
 302
 303 .year-month-button {
 304     width: 24px;
 305     height: 24px;
 306     min-width: 0;
 307     padding: 0;
 308 }
 309
 310 .month-popup-button:focus,
 311 .year-list-view:focus,
 312 .calendar-table-view:focus {
 313     transition: border-color 200ms;
 314     /* We use border color because it follows the border radius (unlike outline).
 315     * This is particularly noticeable on mac. */
 316     border-color: rgb(77, 144, 254) !important;
 317     outline: none;
 318 }
 319
 320 .preparing button:focus,
 321 .preparing .year-list-view:focus,
 322 .preparing .calendar-table-view:focus {
 323     transition: none;
 324 }