ducky/web
2015-07-03
Parent:99a43a6d1d30
ducky/web/src/styles/base/_forms.scss
Upgrade babel. Take advantage of shorter compilation times. Woohoo!
1 fieldset {
2 background-color: lighten($base-border-color, 10%);
3 border: $base-border;
4 margin: 0 0 $small-spacing;
5 padding: $base-spacing;
6 }
8 input,
9 label,
10 select {
11 display: block;
12 font-family: $base-font-family;
13 font-size: $base-font-size;
14 }
16 label {
17 font-weight: 600;
18 margin-bottom: $small-spacing / 2;
20 &.required::after {
21 content: "*";
22 }
24 abbr {
25 display: none;
26 }
27 }
29 #{$all-text-inputs},
30 select[multiple=multiple],
31 textarea {
32 background-color: $base-background-color;
33 border: $base-border;
34 border-radius: $base-border-radius;
35 box-shadow: $form-box-shadow;
36 box-sizing: border-box;
37 font-family: $base-font-family;
38 font-size: $base-font-size;
39 margin-bottom: $base-spacing / 2;
40 padding: $base-spacing / 3;
41 transition: border-color;
42 width: 100%;
44 &:hover {
45 border-color: darken($base-border-color, 10%);
46 }
48 &:focus {
49 border-color: $action-color;
50 box-shadow: $form-box-shadow-focus;
51 outline: none;
52 }
53 }
55 textarea {
56 resize: vertical;
57 }
59 input[type="search"] {
60 @include appearance(none);
61 }
63 input[type="checkbox"],
64 input[type="radio"] {
65 display: inline;
66 margin-right: $small-spacing / 2;
67 }
69 input[type="file"] {
70 padding-bottom: $small-spacing;
71 width: 100%;
72 }
74 select {
75 margin-bottom: $base-spacing;
76 max-width: 100%;
77 width: auto;
78 }