_forms.scss (1515B)
1 fieldset { 2 background-color: $secondary-background-color; 3 border: $base-border; 4 margin: 0 0 $small-spacing; 5 padding: $base-spacing; 6 } 7 8 input, 9 label, 10 select { 11 display: block; 12 font-family: $base-font-family; 13 font-size: $base-font-size; 14 } 15 16 label { 17 font-weight: 600; 18 margin-bottom: $small-spacing / 2; 19 20 &.required::after { 21 content: "*"; 22 } 23 24 abbr { 25 display: none; 26 } 27 } 28 29 #{$all-text-inputs}, 30 select[multiple=multiple] { 31 background-color: $base-background-color; 32 border: $base-border; 33 border-radius: $base-border-radius; 34 box-shadow: $form-box-shadow; 35 box-sizing: border-box; 36 font-family: $base-font-family; 37 font-size: $base-font-size; 38 margin-bottom: $small-spacing; 39 padding: $base-spacing / 3; 40 transition: border-color $base-duration $base-timing; 41 width: 100%; 42 43 &:hover { 44 border-color: shade($base-border-color, 20%); 45 } 46 47 &:focus { 48 border-color: $action-color; 49 box-shadow: $form-box-shadow-focus; 50 outline: none; 51 } 52 53 &:disabled { 54 background-color: shade($base-background-color, 5%); 55 cursor: not-allowed; 56 57 &:hover { 58 border: $base-border; 59 } 60 } 61 } 62 63 textarea { 64 resize: vertical; 65 } 66 67 input[type="search"] { 68 appearance: none; 69 } 70 71 input[type="checkbox"], 72 input[type="radio"] { 73 display: inline; 74 margin-right: $small-spacing / 2; 75 76 + label { 77 display: inline-block; 78 } 79 } 80 81 input[type="file"] { 82 margin-bottom: $small-spacing; 83 width: 100%; 84 } 85 86 select { 87 margin-bottom: $base-spacing; 88 max-width: 100%; 89 width: auto; 90 }