chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css

   1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file.
   4  */
   5
   6 /* This file defines styles for form controls. The order of rule blocks is
   7  * important as there are some rules with equal specificity that rely on order
   8  * as a tiebreaker. These are marked with OVERRIDE.
   9  */
  10
  11 /* Default state **************************************************************/
  12
  13 :-webkit-any(button,
  14              input[type='button'],
  15              input[type='submit']):not(.custom-appearance):not(.link-button),
  16 select,
  17 input[type='checkbox'],
  18 input[type='radio'] {
  19   -webkit-appearance: none;
  20   -webkit-user-select: none;
  21   background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  22   border: 1px solid rgba(0, 0, 0, 0.25);
  23   border-radius: 2px;
  24   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
  25       inset 0 1px 2px rgba(255, 255, 255, 0.75);
  26   color: #444;
  27   font: inherit;
  28   margin: 0 1px 0 0;
  29   text-shadow: 0 1px 0 rgb(240, 240, 240);
  30 }
  31
  32 :-webkit-any(button,
  33              input[type='button'],
  34              input[type='submit']):not(.custom-appearance):not(.link-button),
  35 select {
  36   min-height: 2em;
  37   min-width: 4em;
  38 <if expr="is_win">
  39   /* The following platform-specific rule is necessary to get adjacent
  40    * buttons, text inputs, and so forth to align on their borders while also
  41    * aligning on the text's baselines. */
  42   padding-bottom: 1px;
  43 </if>
  44 }
  45
  46 :-webkit-any(button,
  47              input[type='button'],
  48              input[type='submit']):not(.custom-appearance):not(.link-button) {
  49   -webkit-padding-end: 10px;
  50   -webkit-padding-start: 10px;
  51 }
  52
  53 select {
  54   -webkit-appearance: none;
  55   -webkit-padding-end: 20px;
  56   -webkit-padding-start: 6px;
  57   /* OVERRIDE */
  58   background-image: url('../images/select.png'),
  59       -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  60   background-position: right center;
  61   background-repeat: no-repeat;
  62 }
  63
  64 html[dir='rtl'] select {
  65   background-position: center left;
  66 }
  67
  68 input[type='checkbox'] {
  69   bottom: 2px;
  70   height: 13px;
  71   position: relative;
  72   vertical-align: middle;
  73   width: 13px;
  74 }
  75
  76 input[type='radio'] {
  77   /* OVERRIDE */
  78   border-radius: 100%;
  79   bottom: 3px;
  80   height: 15px;
  81   position: relative;
  82   vertical-align: middle;
  83   width: 15px;
  84 }
  85
  86 /* TODO(estade): add more types here? */
  87 input[type='password'],
  88 input[type='search'],
  89 input[type='text'],
  90 input[type='url'],
  91 input[type='number'],
  92 input:not([type]),
  93 textarea {
  94   border: 1px solid #bfbfbf;
  95   border-radius: 2px;
  96   box-sizing: border-box;
  97   color: #444;
  98   font: inherit;
  99   margin: 0;
 100   /* Use min-height to accommodate addditional padding for touch as needed. */
 101   min-height: 2em;
 102   padding: 3px;
 103 <if expr="is_win or is_macosx">
 104   /* For better alignment between adjacent buttons and inputs. */
 105   padding-bottom: 4px;
 106 </if>
 107 }
 108
 109 input[type='search'] {
 110   -webkit-appearance: textfield;
 111   /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
 112    * of the default text in relatively spacious languages (i.e. German). */
 113   min-width: 160px;
 114 }
 115
 116 /* Checked ********************************************************************/
 117
 118 input[type='checkbox']:checked::before {
 119   -webkit-user-select: none;
 120   background-image: url('../images/check.png');
 121   background-size: 100% 100%;
 122   content: '';
 123   display: block;
 124   height: 100%;
 125   width: 100%;
 126 }
 127
 128 html[dir='rtl'] input[type='checkbox']:checked::before {
 129   -webkit-transform: scaleX(-1);
 130 }
 131
 132 input[type='radio']:checked::before {
 133   background-color: #666;
 134   border-radius: 100%;
 135   bottom: 3px;
 136   content: '';
 137   display: block;
 138   left: 3px;
 139   position: absolute;
 140   right: 3px;
 141   top: 3px;
 142 }
 143
 144 /* Hover **********************************************************************/
 145
 146 :enabled:hover:-webkit-any(
 147     select,
 148     input[type='checkbox'],
 149     input[type='radio'],
 150     :-webkit-any(
 151         button,
 152         input[type='button'],
 153         input[type='submit']):not(.custom-appearance):not(.link-button)) {
 154   background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 155   border-color: rgba(0, 0, 0, 0.3);
 156   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
 157       inset 0 1px 2px rgba(255, 255, 255, 0.95);
 158   color: black;
 159 }
 160
 161 :enabled:hover:-webkit-any(select) {
 162   /* OVERRIDE */
 163   background-image: url('../images/select.png'),
 164       -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 165 }
 166
 167 /* Active *********************************************************************/
 168
 169 :enabled:active:-webkit-any(
 170     select,
 171     input[type='checkbox'],
 172     input[type='radio'],
 173     :-webkit-any(
 174         button,
 175         input[type='button'],
 176         input[type='submit']):not(.custom-appearance):not(.link-button)) {
 177   background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 178   box-shadow: none;
 179   text-shadow: none;
 180 }
 181
 182 :enabled:active:-webkit-any(select) {
 183   /* OVERRIDE */
 184   background-image: url('../images/select.png'),
 185       -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 186 }
 187
 188 /* Disabled *******************************************************************/
 189
 190 :disabled:-webkit-any(
 191     button,
 192     input[type='button'],
 193     input[type='submit']):not(.custom-appearance):not(.link-button),
 194 select:disabled {
 195   background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 196   border-color: rgba(80, 80, 80, 0.2);
 197   box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
 198       inset 0 1px 2px rgba(255, 255, 255, 0.75);
 199   color: #aaa;
 200 }
 201
 202 select:disabled {
 203   /* OVERRIDE */
 204   background-image: url('../images/disabled_select.png'),
 205       -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 206 }
 207
 208 input:disabled:-webkit-any([type='checkbox'],
 209                            [type='radio']) {
 210   opacity: .75;
 211 }
 212
 213 input:disabled:-webkit-any([type='password'],
 214                            [type='search'],
 215                            [type='text'],
 216                            [type='url'],
 217                            :not([type])) {
 218   color: #999;
 219 }
 220
 221 /* Focus **********************************************************************/
 222
 223 :enabled:focus:-webkit-any(
 224     select,
 225     input[type='checkbox'],
 226     input[type='password'],
 227     input[type='radio'],
 228     input[type='search'],
 229     input[type='text'],
 230     input[type='url'],
 231     input:not([type]),
 232     :-webkit-any(
 233          button,
 234          input[type='button'],
 235          input[type='submit']):not(.custom-appearance):not(.link-button)) {
 236   /* OVERRIDE */
 237   -webkit-transition: border-color 200ms;
 238   /* We use border color because it follows the border radius (unlike outline).
 239    * This is particularly noticeable on mac. */
 240   border-color: rgb(77, 144, 254);
 241   outline: none;
 242 }
 243
 244 /* Link buttons ***************************************************************/
 245
 246 .link-button {
 247   -webkit-box-shadow: none;
 248   background: transparent none;
 249   border: none;
 250   color: rgb(17, 85, 204);
 251   cursor: pointer;
 252   /* Input elements have -webkit-small-control which can override the body font.
 253    * Resolve this by using 'inherit'. */
 254   font: inherit;
 255   margin: 0;
 256   padding: 0 4px;
 257 }
 258
 259 .link-button:hover {
 260   text-decoration: underline;
 261 }
 262
 263 .link-button:active {
 264   color: rgb(5, 37, 119);
 265   text-decoration: underline;
 266 }
 267
 268 .link-button[disabled] {
 269   color: #999;
 270   cursor: default;
 271   text-decoration: none;
 272 }
 273
 274 /* Checkbox/radio helpers ******************************************************
 275  *
 276  * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
 277  * these classes with the markup structure:
 278  *
 279  *   <div class="checkbox">
 280  *     <label>
 281  *       <input type="checkbox"></input>
 282  *       <span>
 283  *     </label>
 284  *   </div>
 285  */
 286
 287 :-webkit-any(.checkbox, .radio) label {
 288   /* Don't expand horizontally: <http://crbug.com/112091>. */
 289   display: -webkit-inline-box;
 290   padding-bottom: 7px;
 291   padding-top: 7px;
 292 }
 293
 294 :-webkit-any(.checkbox, .radio) label input ~ span {
 295   -webkit-margin-start: 0.6em;
 296   /* Make sure long spans wrap at the same horizontal position they start. */
 297   display: block;
 298 }
 299
 300 :-webkit-any(.checkbox, .radio) label:hover {
 301   color: black;
 302 }
 303
 304 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
 305   color: #999;
 306 }