1/* Form Styles */ 2 3@import "../functions/forms"; 4 5 6form { 7 margin: 0 0 18px; 8 label { 9 display: block; 10 @include font-size($norm); 11 @include adjust-leading-to(1); 12 cursor: pointer; 13 margin-bottom: 9px; 14 &.inline { 15 display: inline-block; 16 padding-right: 20px; 17 } 18 } 19 dt { 20 margin: 0; 21 } 22 textarea { 23 height: 150px; 24 } 25 ul, ul li { 26 margin-left: 0; 27 list-style-type: none; 28 } 29 fieldset { 30 @include rhythm-borders(1px,1,$norm,solid); 31 border-color: darken($default-color, 10%); 32 margin: 18px 0; 33 legend { 34 padding: 5px 10px; 35 } 36 } 37} 38 39.field { 40 position: relative; 41 max-width: 100%; 42 margin-bottom: 10px; 43 vertical-align: middle; 44 // Font-size 16px for weird form style error 45 font-size: 16px; 46 overflow: hidden; 47 &.metro, .metro { 48 @include border-radius(0); 49 } 50 input, input[type="*"], textarea { 51 max-width: 100%; 52 width: 100%; 53 padding: 0; 54 margin: 0; 55 border: none; 56 outline: none; 57 resize: none; 58 -webkit-appearance: none; 59 font-family: $font-family; 60 font-weight: $font-weight-light; 61 @include font-size($norm); 62 @include box-shadow(none); 63 } 64 .input { 65 position: relative; 66 padding: 0 10px; 67 background: #fff; 68 border: 1px solid darken($default-color, 10%); 69 @include line-and-height(height-calc($norm)); 70 @include font-size($norm); 71 @include border-radius(4px); 72 &.search { 73 @include line-and-height(height-calc($norm)); 74 @include shape(oval); 75 padding-right: 0; 76 } 77 } 78 .input.textarea { 79 height: auto; 80 } 81} 82 83input, .input { 84 @each $width in $field-sizes { 85 &.#{nth($width, 1)} { 86 @include input-size(#{nth($width, 1)}); 87 margin:0; 88 &:last-child { 89 margin-left: -4px; 90 } 91 &:first-child { 92 margin-right: 3.94%; 93 margin-left: 0; 94 } 95 &:first-child:last-child { 96 margin: 0; 97 } 98 } 99 } 100} 101 102label + { 103 @include input-sizes-list() { 104 &:last-child { 105 margin-left: 0; 106 } 107 } 108} 109 110@include respond(document-width) { 111 .xxwide:first-child, .xxwide:last-child { 112 margin-right: 0%; 113 } 114} 115 116/* remove inline-block white-space — A 0px font-size = 0px of white space */ 117.prepend, .append { 118 font-size: 0; 119 white-space: nowrap; 120 padding-bottom: 3.5px; 121} 122 123.prepend input, 124.prepend .input, 125.append input, 126.append .input { 127 display: inline-block; 128 max-width: 100%; 129 margin-right: 0; 130 margin-left: 0; 131} 132 133.prepend input, 134.prepend .input, 135.prepend.append input:last-child, 136.append *:last-child { 137 @include border-radius(0px $button-radius $button-radius 0); 138} 139 140.append input, 141.append .input, 142.prepend.append input:first-child, 143.prepend *:first-child { 144 @include border-radius($button-radius 0 0 $button-radius); 145} 146 147.prepend.append input { 148 @include border-radius(0); 149} 150 151.prepend.append input:last-child { 152 margin-left: -1px; 153} 154 155.prepend .adjoined, .append .adjoined, .prepend .btn, .append .btn { 156 position: relative; 157 display: inline-block; 158 margin-bottom:0; 159 z-index: 99; 160} 161.prepend .btn, .append .btn { 162 a, input, button { 163 padding: 0 12px; 164 } 165} 166 167.prepend .adjoined, .append .adjoined { 168 padding: 0 10px 0 10px; 169 background: $default-color; 170 border: 1px solid darken($default-color, 10%); 171 font-family: $font-family; 172 font-weight: $font-weight-semibold; 173 color: $body-font-color; 174 @include font-size($norm); 175 @include line-and-height(height-calc($norm)); 176} 177 178.prepend .adjoined, .prepend .btn { 179 margin-right: -1px; 180} 181 182.adjoined:first-child { 183 margin-left: 0 !important; 184} 185 186.append .adjoined, .append .btn { 187 margin-left: -1px; 188} 189 190.append button, .prepend button { 191 display: inline-block; 192} 193 194.prepend input:first-child, 195.append input:first-child, 196.prepend .input:first-child, 197.append .input:first-child { 198 margin-right: 0; 199} 200 201.double input, .double .input { 202 width: 50% !important; 203 &:last-child { 204 margin-left: -1px; 205 } 206} 207 208.field { 209 input, .input, textarea, .textarea, .radio span, .checkbox span, .picker { 210 @include transition-duration(.2s); 211 } 212 @each $error in danger $danger-color, warning $warning-color, success $success-color { 213 &.#{nth($error, 1)} { 214 &:after { 215 @if($icons != ""){ 216 font-family: "#{$icons}"; 217 @if nth($error, 1) == danger { 218 content: "#{$entypo-icon-cancel-circled}"; 219 } 220 @if nth($error, 1) == warning { 221 content: "#{$entypo-icon-attention}"; 222 } 223 @if nth($error, 1) == success { 224 content: "#{$entypo-icon-check}"; 225 } 226 font-size: $norm; 227 position: absolute; 228 top: percentage((strip-units($base-font-size)) / 100) - 2; 229 right: 15px; 230 z-index: 999; 231 color: nth($error, 2); 232 } 233 } 234 235 &.no-icon:after { 236 display: none; 237 } 238 239 // <input> does not allow :before & :after 240 // pseudo elements. Removing validation 241 // icons from those elements to avoid 242 // edge-case styling issues 243 &.append:after, &.prepend:after { 244 content: ""; 245 } 246 input, .input, textarea, .textarea, .radio span, .checkbox span, .picker { 247 border-color: nth($error, 2); 248 background: lighten(nth($error, 2), 35%); 249 } 250 251 input, .input, textarea, .textarea, 252 .radio span, .checkbox span, .picker, 253 input::-webkit-input-placeholder, 254 textarea::-webkit-input-placeholder, 255 input:-moz-placeholder, 256 textarea:-moz-placeholder 257 textarea { color: nth($error, 2); } 258 259 } 260 } 261 262 .picker { 263 @each $error in danger $danger-color, warning $warning-color, success $success-color { 264 &.#{nth($error, 1)} { 265 border-color: nth($error, 2); 266 color: nth($error, 2); 267 background: lighten(nth($error, 2), 35%); 268 @include transition-duration(.2s); 269 select, &:after { color: nth($error, 2); } 270 } 271 } 272 } 273} 274 275 276.field .text input[type="search"] { 277 -webkit-appearance: textfield; 278} 279 280// checkboxes/radio buttons only styled where JS supported 281.no-js { 282 .radio input { 283 -webkit-appearance: radio; 284 margin-left: 1px; 285 } 286 .checkbox input { 287 -webkit-appearance: checkbox; 288 } 289 .radio input, .checkbox input { 290 display: inline-block; 291 width: 16px; 292 } 293} 294 295.js .field { 296 .radio, .checkbox { 297 @each $error in danger $danger-color, warning $warning-color, success $success-color { 298 &.#{nth($error, 1)} { 299 color: nth($error, 2); 300 @if nth($error, 1) == success { 301 color: $body-font-color; 302 i { color: nth($error, 2); } 303 } 304 span { 305 border-color: nth($error, 2); 306 color: nth($error, 2); 307 background: lighten(nth($error, 2), 35%); 308 @include transition-duration(.2s); 309 } 310 } 311 } 312 position: relative; 313 &.checked i { 314 position: absolute; 315 top: -1px; 316 left: -8px; 317 line-height: 16px; 318 } 319 span { 320 display: inline-block; 321 width: 16px; 322 height: 16px; 323 position: relative; 324 top: 2px; 325 border: solid 1px #ccc; 326 background: #fefefe; 327 } 328 input[type="radio"], input[type="checkbox"] { 329 display: none; 330 } 331 } 332 .radio span { 333 @include border-radius(8px); 334 } 335 .checkbox span { 336 @include border-radius(3px); 337 } 338} 339 340.field .text input[type="search"] { 341 -webkit-appearance: textfield; 342} 343 344 345/* Form Picker Element (<select>) */ 346 347.picker { 348 position: relative; 349 width: auto; 350 display: inline-block; 351 margin: 0 0 2px 1.2%; 352 overflow: hidden; 353 border: 1px solid darken($default-color, 5%); 354 @include border-radius(4px); 355 font-family: $font-family; 356 font-weight: $font-weight-semibold; 357 height: auto; 358 @include background-image(linear-gradient(lighten($default-color, 20%), $default-color)); 359 &:after { 360 content: "\25BE"; 361 font-family: $icons; 362 z-index: 0; 363 position:absolute; 364 right: 8%; 365 top: 50%; 366 margin-top: -12px; 367 color: $body-font-color; 368 } 369 &:first-child { 370 margin-left: 0; 371 } 372 select { 373 position: relative; 374 display: block; 375 min-width: 100%; 376 width: 135%; 377 height: 34px; 378 padding: 6px 45px 6px 15px; 379 color: $body-font-color; 380 border: none; 381 background: transparent; 382 outline: none; 383 -webkit-appearance: none; 384 z-index: 99; 385 cursor: pointer; 386 @include font-size($norm); 387 } 388 select::-ms-expand { 389 display: none; 390 } 391} 392 393