[Summary view] [Print] [Text view]

   1  input[type="text"],
   2  input[type="email"],
   3  input[type="url"],
   4  input[type="password"],
   5  input[type="search"],
   6  input[type="number"],
   7  input[type="tel"],
   8  input[type="date"],
   9  input[type="month"],
  10  input[type="week"],
  11  input[type="time"],
  12  input[type="datetime"],
  13  input[type="datetime-local"],
  14  input[type="color"],
  15  .site textarea {
  16      border: var(--form--border-width) solid var(--form--border-color);
  17      border-radius: var(--form--border-radius);
  18      color: var(--form--color-text);
  19      line-height: var(--global--line-height-body);
  20      padding: var(--form--spacing-unit);
  21      // Gives a little more space for the outline offset.
  22      margin: 0 2px;
  23      max-width: 100%;
  24  
  25      &:focus {
  26          color: var(--form--color-text);
  27          outline-offset: 2px;
  28          outline: 2px dotted var(--form--border-color);
  29      }
  30  
  31      &:disabled {
  32          opacity: 0.7;
  33      }
  34  
  35      .is-dark-theme & {
  36          background: var(--global--color-white-90);
  37      }
  38  }
  39  
  40  // Reset the negative offset from normalize to make the thicker "border" work on focus.
  41  input[type="search"] {
  42  
  43      &:focus {
  44          outline-offset: -7px;
  45  
  46          .is-dark-theme & {
  47              outline-color: var(--global--color-background);
  48          }
  49      }
  50  }
  51  
  52  input[type="color"] {
  53      padding: calc(var(--form--spacing-unit) / 2);
  54      height: calc(4 * var(--form--spacing-unit));
  55  }
  56  
  57  input[type="email"],
  58  input[type="url"] {
  59  
  60      /*rtl:ignore*/
  61      direction: ltr;
  62  }
  63  
  64  select {
  65      border: var(--form--border-width) solid var(--form--border-color);
  66      color: var(--form--color-text);
  67      -moz-appearance: none;
  68      -webkit-appearance: none;
  69      appearance: none;
  70      line-height: var(--global--line-height-body);
  71      padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
  72      background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; // stylelint-disable-line function-url-quotes
  73      background-position: right var(--form--spacing-unit) top 60%;
  74  
  75      &:focus {
  76          outline-offset: 2px;
  77          outline: 2px dotted var(--form--border-color);
  78      }
  79  
  80      .is-dark-theme & {
  81          background: var(--global--color-white-90) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; // stylelint-disable-line function-url-quotes
  82          background-position: right var(--form--spacing-unit) top 60%;
  83      }
  84  }
  85  
  86  textarea {
  87      width: 100%;
  88  }
  89  
  90  label {
  91      font-size: var(--form--font-size);
  92      font-weight: var(--form--label-weight);
  93      margin-bottom: calc(var(--global--spacing-vertical) / 3);
  94  }
  95  
  96  /**
  97  https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
  98  https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
  99  License: MIT.
 100  */
 101  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
 102  
 103      input[type="checkbox"],
 104      input[type="radio"] {
 105          -webkit-appearance: none;
 106          -moz-appearance: none;
 107          position: relative;
 108          width: 25px;
 109          height: 25px;
 110          border: var(--form--border-width) solid var(--form--border-color);
 111          background: var(--global--color-white);
 112  
 113          &:disabled {
 114              opacity: 0.7;
 115          }
 116  
 117          .is-dark-theme & {
 118              background: var(--global--color-white-90);
 119          }
 120      }
 121  
 122      input[type="checkbox"] {
 123  
 124          &:focus {
 125              outline-offset: 2px;
 126              outline: 2px dotted var(--form--border-color);
 127          }
 128  
 129          &:after {
 130              content: "";
 131              opacity: 0;
 132              display: block;
 133              left: 5px;
 134              top: 2px;
 135              position: absolute;
 136              width: 7px;
 137              height: 13px;
 138              border: 3px solid var(--form--color-text);
 139              border-top: 0;
 140              border-left: 0;
 141              transform: rotate(30deg);
 142          }
 143  
 144          &:checked {
 145              color: var(--form--color-text);
 146  
 147              &:after {
 148                  opacity: 1;
 149              }
 150          }
 151      }
 152  
 153      input[type="radio"] {
 154          border-radius: 50%;
 155  
 156          &:focus {
 157              outline-offset: 2px;
 158              outline: 2px dotted var(--form--border-color);
 159          }
 160  
 161          &:after {
 162              content: "";
 163              opacity: 0;
 164              display: block;
 165              left: 3px;
 166              top: 3px;
 167              position: absolute;
 168              width: 11px;
 169              height: 11px;
 170              border-radius: 50%;
 171              background: var(--form--color-text);
 172          }
 173  
 174          &:checked {
 175              border: 4px solid var(--form--border-color);
 176  
 177              &:after {
 178                  opacity: 1;
 179              }
 180  
 181              // Focus style for checked radio buttons.
 182              &:focus {
 183                  outline-offset: 4px;
 184                  outline: 2px dotted var(--form--border-color);
 185              }
 186          }
 187      }
 188  }
 189  
 190  input[type="checkbox"] + label,
 191  input[type="radio"] + label {
 192      display: inline-block;
 193      padding-left: 10px;
 194      font-size: var(--global--font-size-xs);
 195      vertical-align: top;
 196  }
 197  
 198  /**
 199   * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
 200  */
 201  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
 202  
 203      input[type="range"] {
 204          -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
 205          width: 100%; /* Specific width is required for Firefox. */
 206          height: 6px;
 207          background: var(--form--color-ranged);
 208          border-radius: 6px;
 209          outline-offset: 10px;
 210  
 211          &:disabled {
 212              opacity: 0.7;
 213          }
 214      }
 215  
 216      input[type="range"]::-webkit-slider-thumb {
 217          -webkit-appearance: none;
 218          border: 3px solid var(--form--color-ranged);
 219          height: 44px;
 220          width: 44px;
 221          border-radius: 50%;
 222          background: var(--global--color-background);
 223          cursor: pointer;
 224      }
 225  
 226      input[type="range"]::-moz-range-thumb {
 227          border: 3px solid var(--form--color-ranged);
 228          height: 44px;
 229          width: 44px;
 230          border-radius: 50%;
 231          background: var(--global--color-background);
 232          cursor: pointer;
 233          box-sizing: border-box;
 234      }
 235  }
 236  
 237  input[type="range"]::-ms-track {
 238      width: 100%;
 239      height: 6px;
 240      border-radius: 6px;
 241      border-width: 19px 0;
 242      border-color: var(--global--color-background);
 243      background: transparent;
 244      color: transparent;
 245      cursor: pointer;
 246  }
 247  
 248  input[type="range"]::-ms-fill-upper {
 249      background: var(--form--color-ranged);
 250      border-radius: 6px;
 251  }
 252  
 253  input[type="range"]::-ms-fill-lower {
 254      background: var(--form--color-ranged);
 255      border-radius: 6px;
 256  }
 257  
 258  input[type="range"]::-ms-thumb {
 259      border: 3px solid var(--form--color-ranged);
 260      height: 44px;
 261      width: 44px;
 262      border-radius: 50%;
 263      background: var(--global--color-background);
 264      cursor: pointer;
 265  }
 266  
 267  fieldset {
 268      display: grid;
 269      border-color: var(--global--color-secondary);
 270      padding: var(--global--spacing-horizontal);
 271  
 272      legend {
 273          font-size: var(--global--font-size-lg);
 274      }
 275  
 276      input {
 277  
 278          &[type="submit"] {
 279              max-width: max-content;
 280          }
 281  
 282          &:not([type="submit"]) {
 283              margin-bottom: var(--global--spacing-unit);
 284          }
 285  
 286          &[type="radio"],
 287          &[type="checkbox"] {
 288              margin-bottom: 0;
 289          }
 290  
 291          &[type="radio"] + label,
 292          &[type="checkbox"] + label {
 293              font-size: var(--form--font-size);
 294              padding-left: 0;
 295              margin-bottom: var(--global--spacing-unit);
 296          }
 297      }
 298  }
 299  
 300  ::-moz-placeholder { // Firefox 19+
 301      opacity: 1;
 302  }
 303  
 304  .post-password-message {
 305      font-size: var(--global--font-size-lg);
 306  }
 307  
 308  .post-password-form {
 309      display: flex;
 310      flex-wrap: wrap;
 311  
 312      &__label {
 313          width: 100%;
 314          margin-bottom: 0;
 315      }
 316  
 317      input[type="password"] {
 318          flex-grow: 1;
 319          margin-top: calc(var(--global--spacing-vertical) / 3);
 320          margin-right: calc(0.66 * var(--global--spacing-horizontal));
 321      }
 322  
 323      &__submit {
 324          margin-top: calc(var(--global--spacing-vertical) / 3);
 325          @include media(tablet) {
 326              margin-left: calc(0.4 * var(--global--spacing-horizontal));
 327          }
 328      }
 329  }