1input[type="text"], 2input[type="password"], 3input[type="email"], 4input[type="url"], 5input[type="date"], 6input[type="month"], 7input[type="time"], 8input[type="datetime"], 9input[type="datetime-local"], 10input[type="week"], 11input[type="number"], 12input[type="search"], 13input[type="tel"], 14select, 15textarea { 16 background: $bg-light-well; 17 background-clip: padding-box; 18 border: $border-width solid $bg-light-well; 19 border-bottom: $border-ui; 20 border-radius: $br; 21 color: $text-ui; 22 display: inline-block; 23 width: 100%; 24 padding: $sm-pad $md-pad; 25 line-height: 1.5; 26 transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; 27 font-family: $font-family; 28 font-size: $font-size-ui; 29 margin-right: $sm-pad; 30} 31 32.dark input[type="text"], 33.dark input[type="password"], 34.dark input[type="email"], 35.dark input[type="url"], 36.dark input[type="date"], 37.dark input[type="month"], 38.dark input[type="time"], 39.dark input[type="datetime"], 40.dark input[type="datetime-local"], 41.dark input[type="week"], 42.dark input[type="number"], 43.dark input[type="search"], 44.dark input[type="tel"], 45.dark select, 46.dark textarea { 47 background: $bg-dark-well; 48 border: $border-width solid transparent; 49 border-bottom: $border-width solid $text-light; 50 color: $text-light; 51} 52 53input[type="color"], 54{ 55 background: $white; 56 border: $border; 57 border-radius: $br; 58 display: inline-block; 59 vertical-align: middle; 60} 61 62input:not([type]) { 63 -webkit-appearance: none; 64 background: $bg-light-well; 65 background-clip: padding-box; 66 border: $border; 67 border-radius: $br; 68 color: $text-default; 69 display: block; 70 width: 100%; 71 padding: $sm-pad $md-pad; 72 line-height: 1.5; 73 transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; 74 text-align: left; 75} 76 77input[type="text"]:focus, 78input[type="password"]:focus, 79input[type="email"]:focus, 80input[type="url"]:focus, 81input[type="date"]:focus, 82input[type="month"]:focus, 83input[type="time"]:focus, 84input[type="datetime"]:focus, 85input[type="datetime-local"]:focus, 86input[type="week"]:focus, 87input[type="number"]:focus, 88input[type="search"]:focus, 89input[type="tel"]:focus, 90input[type="color"]:focus, 91select:focus, 92textarea:focus { 93 background-color: #fff; 94 border-color: mix($primary, #fff); 95 outline: 0; 96 box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75); 97} 98 99.dark input[type="text"]:focus, 100.dark input[type="password"]:focus, 101.dark input[type="email"]:focus, 102.dark input[type="url"]:focus, 103.dark input[type="date"]:focus, 104.dark input[type="month"]:focus, 105.dark input[type="time"]:focus, 106.dark input[type="datetime"]:focus, 107.dark input[type="datetime-local"]:focus, 108.dark input[type="week"]:focus, 109.dark input[type="number"]:focus, 110.dark input[type="search"]:focus, 111.dark input[type="tel"]:focus, 112.dark input[type="color"]:focus, 113.dark select:focus, 114.dark textarea:focus { 115 color: $text-light; 116 background-color: $bg-dark-well-active; 117} 118 119input:not([type]):focus { 120 background-color: #fff; 121 border-color: mix($primary, #fff); 122 outline: 0; 123 box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75); 124} 125 126input[type="file"]:focus, 127input[type="radio"]:focus, 128input[type="checkbox"]:focus { 129 outline: 1px thin $dividers; 130} 131 132input[type="text"][disabled], 133input[type="password"][disabled], 134input[type="email"][disabled], 135input[type="url"][disabled], 136input[type="date"][disabled], 137input[type="month"][disabled], 138input[type="time"][disabled], 139input[type="datetime"][disabled], 140input[type="datetime-local"][disabled], 141input[type="week"][disabled], 142input[type="number"][disabled], 143input[type="search"][disabled], 144input[type="tel"][disabled], 145input[type="color"][disabled], 146select[disabled], 147textarea[disabled] { 148 background-color: $dividers; 149 color: $text-ui; 150 cursor: not-allowed; 151 opacity: 1; 152} 153 154input:not([type])[disabled] { 155 background-color: $dividers; 156 color: $text-ui; 157 cursor: not-allowed; 158 opacity: 1; 159} 160 161input[readonly], 162select[readonly], 163textarea[readonly] { 164 border-color: $dividers; 165 color: $text-ui; 166} 167 168input:focus:invalid, 169textarea:focus:invalid, 170select:focus:invalid { 171 border-color: darken($red, 10); 172 color: $red; 173} 174 175input[type="file"]:focus:invalid:focus, 176input[type="radio"]:focus:invalid:focus, 177input[type="checkbox"]:focus:invalid:focus { 178 outline-color: $red; 179} 180 181select { 182 border: $border; 183 vertical-align: sub; 184} 185 186select:not([size]):not([multiple]) { 187 height: calc(40px); 188} 189 190select[multiple] { 191 height: auto; 192} 193 194label { 195 display: inline-block; 196 line-height: 2; 197 color: $text-ui; 198 font-size: $font-size-ui; 199} 200 201fieldset { 202 border: 0; 203 margin: 0; 204 padding: $sm-pad 0; 205} 206 207fieldset li { 208 list-style: none; 209} 210 211legend { 212 border-bottom: $border; 213 color: $text-default; 214 display: block; 215 margin-bottom: $sm-pad; 216 padding: $sm-pad 0; 217 width: 100%; 218} 219 220textarea { 221 overflow: auto; 222 resize: vertical; 223} 224 225input[type=checkbox], 226input[type=radio] { 227 box-sizing: border-box; 228 padding: 0; 229 display: inline; 230} 231