_forms.scss
3.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
/**
* Forms
*/
form {
margin-bottom: 1.618em;
}
button,
input,
select,
textarea {
font-size: 100%; /* Corrects font size not being inherited in all browsers */
margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
vertical-align: baseline; /* Improves appearance and consistency in all browsers */
*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart {
border: 0;
background: none;
background-color: $color_body;
border-color: $color_body;
color: #fff;
cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
line-height: 1;
padding: .618em 1em;
text-decoration: none;
font-weight: 700;
text-shadow: none;
display: inline-block;
outline: none;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
border-radius: 0;
box-shadow:
inset 0 -2px 0 rgba(#000,.2),
0 1px 1px rgba(#000,.1);
&.cta,
&.alt {
background-color: $color_links;
border-color: $color_links;
&:hover {
background-color: $color_links;
}
}
&:hover {
color: #fff;
}
&:focus {
outline: 2px solid $color_links;
}
&.added {
&:after {
content: "\f00c";
font-family: "FontAwesome";
margin-left: .53em;
}
}
&.loading {
opacity: 0.5;
}
&.small {
padding: .53em .857em;
font-size: .857em;
}
&.disabled,
&:disabled {
opacity: 0.5 !important;
&:hover {
opacity: 0.5 !important;
}
}
}
input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}
input[type="search"] {
box-sizing: border-box; // Overrules normalize.css.
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
border: 0;
padding: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
.input-text {
padding: .618em;
background-color: darken($body-background,5%);
color: $color_body;
line-height: 1;
outline: none;
border: 0;
-webkit-appearance: none;
border-radius: 0;
box-sizing: border-box;
font-weight: normal;
box-shadow:
inset 0 1px 2px rgba(0,0,0,0.125);
&:focus {
background-color: darken( $body-background,10% );
color: darken( $color_body, 10% );
}
}
textarea {
overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
padding-left: .857em;
vertical-align: top; /* Improves readability and alignment in all browsers */
width: 100%;
}
label {
font-weight: 700;
}
label.inline {
input {
width: auto;
}
}
fieldset {
padding: 0;
border: 0;
margin-bottom: 1.618em;
legend {
font-weight: 700;
}
}
[placeholder]:focus::-webkit-input-placeholder {
-webkit-transition: opacity 0.5s 0.5s ease;
-moz-transition: opacity 0.5s 0.5s ease;
transition: opacity 0.5s 0.5s ease;
opacity: 0;
}