forms.scss (7085B)
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 }