topcoat-rails 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/app/assets/stylesheets/topcoat/desktop-dark.scss +3180 -672
- data/app/assets/stylesheets/topcoat/desktop-light.scss +3195 -687
- data/app/assets/stylesheets/topcoat/mobile-dark.scss +3437 -679
- data/app/assets/stylesheets/topcoat/mobile-light.scss +3433 -675
- data/lib/topcoat-rails/version.rb +1 -1
- metadata +13 -27
|
@@ -1,136 +1,124 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
.button-bar {
|
|
20
|
+
display: table;
|
|
21
|
+
table-layout: fixed;
|
|
22
|
+
white-space: nowrap;
|
|
17
23
|
margin: 0;
|
|
18
24
|
padding: 0;
|
|
19
|
-
background: #dfe2e2;
|
|
20
|
-
color: #000;
|
|
21
|
-
font: 16px "Source Sans", helvetica, arial, sans-serif;
|
|
22
|
-
font-weight: 200;
|
|
23
|
-
text-rendering: optimizeLegibility;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
background-size: cover;
|
|
27
|
+
.button-bar__item {
|
|
28
|
+
display: table-cell;
|
|
29
|
+
width: auto;
|
|
30
|
+
border-radius: 0;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
.third {
|
|
43
|
-
width: 33.333%;
|
|
44
|
-
}
|
|
45
|
-
.two-thirds {
|
|
46
|
-
width: 66.666%;
|
|
47
|
-
}
|
|
48
|
-
.full {
|
|
49
|
-
width: 100%;
|
|
33
|
+
.button-bar__item > input {
|
|
34
|
+
position: absolute;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
padding: 0;
|
|
37
|
+
border: 0;
|
|
38
|
+
opacity: 0.001;
|
|
39
|
+
z-index: 1;
|
|
40
|
+
vertical-align: top;
|
|
41
|
+
outline: none;
|
|
50
42
|
}
|
|
51
43
|
|
|
52
|
-
.
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
.center {
|
|
56
|
-
text-align: center;
|
|
57
|
-
}
|
|
58
|
-
.right {
|
|
59
|
-
text-align: right;
|
|
44
|
+
.button-bar__button {
|
|
45
|
+
border-radius: inherit;
|
|
60
46
|
}
|
|
61
47
|
|
|
62
|
-
.
|
|
63
|
-
|
|
64
|
-
-moz-box-sizing: border-box;
|
|
65
|
-
box-sizing: border-box;
|
|
66
|
-
-webkit-background-clip: padding;
|
|
67
|
-
-moz-background-clip: padding;
|
|
68
|
-
background-clip: padding-box;
|
|
69
|
-
position: relative;
|
|
70
|
-
display: inline-block;
|
|
71
|
-
vertical-align: top;
|
|
72
|
-
padding: 0;
|
|
73
|
-
margin: 0;
|
|
74
|
-
font: inherit;
|
|
75
|
-
color: inherit;
|
|
76
|
-
background: transparent;
|
|
77
|
-
border: none;
|
|
48
|
+
.button-bar__item:disabled {
|
|
49
|
+
opacity: 0.3;
|
|
78
50
|
cursor: default;
|
|
79
|
-
-
|
|
80
|
-
-moz-user-select: none;
|
|
81
|
-
-ms-user-select: none;
|
|
82
|
-
user-select: none;
|
|
83
|
-
-o-text-overflow: ellipsis;
|
|
84
|
-
text-overflow: ellipsis;
|
|
85
|
-
white-space: nowrap;
|
|
86
|
-
overflow: hidden;
|
|
51
|
+
pointer-events: none;
|
|
87
52
|
}
|
|
88
53
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
54
|
+
/**
|
|
55
|
+
*
|
|
56
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
57
|
+
*
|
|
58
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
59
|
+
* you may not use this file except in compliance with the License.
|
|
60
|
+
* You may obtain a copy of the License at
|
|
61
|
+
*
|
|
62
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
63
|
+
*
|
|
64
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
65
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
66
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
67
|
+
* See the License for the specific language governing permissions and
|
|
68
|
+
* limitations under the License.
|
|
69
|
+
*
|
|
102
70
|
*/
|
|
103
71
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
72
|
+
/**
|
|
73
|
+
*
|
|
74
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
75
|
+
*
|
|
76
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
77
|
+
* you may not use this file except in compliance with the License.
|
|
78
|
+
* You may obtain a copy of the License at
|
|
79
|
+
*
|
|
80
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
81
|
+
*
|
|
82
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
83
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
84
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
85
|
+
* See the License for the specific language governing permissions and
|
|
86
|
+
* limitations under the License.
|
|
87
|
+
*
|
|
88
|
+
*/
|
|
115
89
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
90
|
+
/**
|
|
91
|
+
*
|
|
92
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
93
|
+
*
|
|
94
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
95
|
+
* you may not use this file except in compliance with the License.
|
|
96
|
+
* You may obtain a copy of the License at
|
|
97
|
+
*
|
|
98
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
99
|
+
*
|
|
100
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
101
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
102
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
103
|
+
* See the License for the specific language governing permissions and
|
|
104
|
+
* limitations under the License.
|
|
105
|
+
*
|
|
119
106
|
*/
|
|
107
|
+
|
|
108
|
+
.button,
|
|
120
109
|
.topcoat-button,
|
|
121
110
|
.topcoat-button--quiet,
|
|
122
111
|
.topcoat-button--large,
|
|
123
112
|
.topcoat-button--large--quiet,
|
|
124
113
|
.topcoat-button--cta,
|
|
125
|
-
.topcoat-button--large--cta
|
|
114
|
+
.topcoat-button--large--cta,
|
|
115
|
+
.topcoat-button-bar__button,
|
|
116
|
+
.topcoat-button-bar__button--large {
|
|
126
117
|
position: relative;
|
|
127
118
|
display: inline-block;
|
|
128
119
|
vertical-align: top;
|
|
129
|
-
-webkit-box-sizing: border-box;
|
|
130
120
|
-moz-box-sizing: border-box;
|
|
131
121
|
box-sizing: border-box;
|
|
132
|
-
-webkit-background-clip: padding;
|
|
133
|
-
-moz-background-clip: padding;
|
|
134
122
|
background-clip: padding-box;
|
|
135
123
|
padding: 0;
|
|
136
124
|
margin: 0;
|
|
@@ -143,10 +131,40 @@ limitations under the License.
|
|
|
143
131
|
-moz-user-select: none;
|
|
144
132
|
-ms-user-select: none;
|
|
145
133
|
user-select: none;
|
|
146
|
-
-o-text-overflow: ellipsis;
|
|
147
134
|
text-overflow: ellipsis;
|
|
148
135
|
white-space: nowrap;
|
|
149
136
|
overflow: hidden;
|
|
137
|
+
text-decoration: none;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.button--quiet {
|
|
141
|
+
background: transparent;
|
|
142
|
+
border: 1px solid transparent;
|
|
143
|
+
box-shadow: none;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.button--disabled,
|
|
147
|
+
.topcoat-button:disabled,
|
|
148
|
+
.topcoat-button--quiet:disabled,
|
|
149
|
+
.topcoat-button--large:disabled,
|
|
150
|
+
.topcoat-button--large--quiet:disabled,
|
|
151
|
+
.topcoat-button--cta:disabled,
|
|
152
|
+
.topcoat-button--large--cta:disabled,
|
|
153
|
+
.topcoat-button-bar__button:disabled,
|
|
154
|
+
.topcoat-button-bar__button--large:disabled {
|
|
155
|
+
opacity: 0.3;
|
|
156
|
+
cursor: default;
|
|
157
|
+
pointer-events: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.topcoat-button,
|
|
161
|
+
.topcoat-button--quiet,
|
|
162
|
+
.topcoat-button--large,
|
|
163
|
+
.topcoat-button--large--quiet,
|
|
164
|
+
.topcoat-button--cta,
|
|
165
|
+
.topcoat-button--large--cta,
|
|
166
|
+
.topcoat-button-bar__button,
|
|
167
|
+
.topcoat-button-bar__button--large {
|
|
150
168
|
padding: 0 1.25rem;
|
|
151
169
|
font-size: 16px;
|
|
152
170
|
line-height: 3rem;
|
|
@@ -155,241 +173,259 @@ limitations under the License.
|
|
|
155
173
|
text-shadow: 0 1px #fff;
|
|
156
174
|
vertical-align: top;
|
|
157
175
|
background-color: #e5e9e8;
|
|
158
|
-
-webkit-box-shadow: inset 0 1px #fff;
|
|
159
176
|
box-shadow: inset 0 1px #fff;
|
|
160
177
|
border: 1px solid #a5a8a8;
|
|
161
|
-
-webkit-border-radius: 6px;
|
|
162
178
|
border-radius: 6px;
|
|
163
179
|
}
|
|
180
|
+
|
|
181
|
+
.topcoat-button:hover,
|
|
182
|
+
.topcoat-button--quiet:hover,
|
|
183
|
+
.topcoat-button--large:hover,
|
|
184
|
+
.topcoat-button--large--quiet:hover,
|
|
185
|
+
.topcoat-button-bar__button:hover,
|
|
186
|
+
.topcoat-button-bar__button--large:hover {
|
|
187
|
+
background-color: #edf1f1;
|
|
188
|
+
}
|
|
189
|
+
|
|
164
190
|
.topcoat-button:active,
|
|
165
|
-
.topcoat-button.is-active,
|
|
166
191
|
.topcoat-button--large:active,
|
|
167
|
-
.topcoat-button
|
|
192
|
+
.topcoat-button-bar__button:active,
|
|
193
|
+
.topcoat-button-bar__button--large:active,
|
|
194
|
+
:checked + .topcoat-button-bar__button {
|
|
168
195
|
background-color: #d3d7d7;
|
|
169
|
-
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
170
196
|
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
171
197
|
}
|
|
172
|
-
.topcoat-button:disabled,
|
|
173
|
-
.topcoat-button.is-disabled {
|
|
174
|
-
opacity: 0.3;
|
|
175
|
-
cursor: default;
|
|
176
|
-
pointer-events: none;
|
|
177
|
-
}
|
|
178
|
-
/*
|
|
179
|
-
Quiet Button
|
|
180
|
-
------------
|
|
181
|
-
|
|
182
|
-
:active - Quiet button active state
|
|
183
198
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
199
|
+
.topcoat-button:focus,
|
|
200
|
+
.topcoat-button--quiet:focus,
|
|
201
|
+
.topcoat-button--large:focus,
|
|
202
|
+
.topcoat-button--large--quiet:focus,
|
|
203
|
+
.topcoat-button--cta:focus,
|
|
204
|
+
.topcoat-button--large--cta:focus,
|
|
205
|
+
.topcoat-button-bar__button:focus,
|
|
206
|
+
.topcoat-button-bar__button--large:focus {
|
|
207
|
+
border: 1px solid #0940fd;
|
|
208
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
209
|
+
outline: 0;
|
|
210
|
+
}
|
|
189
211
|
|
|
190
|
-
<a class="topcoat-button--quiet">Button</a>
|
|
191
|
-
<a class="topcoat-button--quiet is-active">Button</a>
|
|
192
|
-
<a class="topcoat-button--quiet is-disabled">Button</a>
|
|
193
|
-
*/
|
|
194
212
|
.topcoat-button--quiet {
|
|
195
213
|
background: transparent;
|
|
196
214
|
border: 1px solid transparent;
|
|
197
|
-
-webkit-box-shadow: none;
|
|
198
215
|
box-shadow: none;
|
|
199
216
|
}
|
|
217
|
+
|
|
218
|
+
.topcoat-button--quiet:hover,
|
|
219
|
+
.topcoat-button--large--quiet:hover {
|
|
220
|
+
text-shadow: 0 1px #fff;
|
|
221
|
+
border: 1px solid #a5a8a8;
|
|
222
|
+
box-shadow: inset 0 1px #fff;
|
|
223
|
+
}
|
|
224
|
+
|
|
200
225
|
.topcoat-button--quiet:active,
|
|
201
|
-
.topcoat-button--quiet
|
|
202
|
-
.topcoat-button--large--quiet:active,
|
|
203
|
-
.topcoat-button--large--quiet.is-active {
|
|
226
|
+
.topcoat-button--large--quiet:active {
|
|
204
227
|
color: #454545;
|
|
205
228
|
text-shadow: 0 1px #fff;
|
|
206
229
|
background-color: #d3d7d7;
|
|
207
230
|
border: 1px solid #a5a8a8;
|
|
208
|
-
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
209
231
|
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
210
232
|
}
|
|
211
|
-
.topcoat-button--quiet:disabled,
|
|
212
|
-
.topcoat-button--quiet.is-disabled {
|
|
213
|
-
opacity: 0.3;
|
|
214
|
-
cursor: default;
|
|
215
|
-
pointer-events: none;
|
|
216
|
-
}
|
|
217
|
-
/*
|
|
218
|
-
Large Button
|
|
219
|
-
------------
|
|
220
233
|
|
|
221
|
-
:active - Active state
|
|
222
|
-
|
|
223
|
-
.is-active - Simulates active state touch interfaces
|
|
224
|
-
|
|
225
|
-
:disabled - Disabled state
|
|
226
|
-
|
|
227
|
-
.is-disabled - Simulates disabled state
|
|
228
|
-
|
|
229
|
-
<a class="topcoat-button--large" >Button</a>
|
|
230
|
-
<a class="topcoat-button--large is-active" >Button</a>
|
|
231
|
-
<a class="topcoat-button--large is-disabled" >Button</a>
|
|
232
|
-
*/
|
|
233
234
|
.topcoat-button--large,
|
|
234
|
-
.topcoat-button--large--quiet
|
|
235
|
+
.topcoat-button--large--quiet,
|
|
236
|
+
.topcoat-button-bar__button--large {
|
|
235
237
|
font-size: 1.3rem;
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
.
|
|
239
|
-
.topcoat-button--large.is-disabled {
|
|
240
|
-
opacity: 0.3;
|
|
241
|
-
cursor: default;
|
|
242
|
-
pointer-events: none;
|
|
238
|
+
font-weight: 400;
|
|
239
|
+
line-height: 4.375rem;
|
|
240
|
+
padding: 0 1.25rem;
|
|
243
241
|
}
|
|
244
|
-
/*
|
|
245
|
-
Large Quiet Button
|
|
246
|
-
------------------
|
|
247
|
-
|
|
248
|
-
:active - Active state
|
|
249
242
|
|
|
250
|
-
.is-pressed - Simulates active state on touch interfaces
|
|
251
|
-
|
|
252
|
-
:disabled - Disabled state
|
|
253
|
-
|
|
254
|
-
.is-disabled - Simulates disabled state
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
<a class="topcoat-button--large--quiet" >Button</a>
|
|
258
|
-
<a class="topcoat-button--large--quiet is-active" >Button</a>
|
|
259
|
-
<a class="topcoat-button--large--quiet is-disabled" >Button</a>
|
|
260
|
-
*/
|
|
261
243
|
.topcoat-button--large--quiet {
|
|
262
244
|
background: transparent;
|
|
263
245
|
border: 1px solid transparent;
|
|
264
|
-
-webkit-box-shadow: none;
|
|
265
246
|
box-shadow: none;
|
|
266
247
|
}
|
|
267
|
-
.topcoat-button--large--quiet:disabled,
|
|
268
|
-
.topcoat-button--large--quiet.is-disabled {
|
|
269
|
-
opacity: 0.3;
|
|
270
|
-
cursor: default;
|
|
271
|
-
pointer-events: none;
|
|
272
|
-
}
|
|
273
|
-
/*
|
|
274
|
-
Call To Action Button
|
|
275
|
-
---------------------
|
|
276
|
-
|
|
277
|
-
:active - Active state
|
|
278
|
-
|
|
279
|
-
.is-pressed - Simulates active state on touch interfaces
|
|
280
|
-
|
|
281
|
-
:disabled - Disabled state
|
|
282
|
-
|
|
283
|
-
.is-disabled - Simulates disabled state
|
|
284
|
-
|
|
285
248
|
|
|
286
|
-
<a class="topcoat-button--cta" >Button</a>
|
|
287
|
-
<a class="topcoat-button--cta is-active" >Button</a>
|
|
288
|
-
<a class="topcoat-button--cta is-disabled" >Button</a>
|
|
289
|
-
|
|
290
|
-
*/
|
|
291
249
|
.topcoat-button--cta,
|
|
292
250
|
.topcoat-button--large--cta {
|
|
293
251
|
border: 1px solid #143250;
|
|
294
252
|
background-color: #288edf;
|
|
295
|
-
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
|
296
253
|
box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
|
297
254
|
color: #fff;
|
|
298
255
|
font-weight: 500;
|
|
299
256
|
text-shadow: 0 -1px rgba(0,0,0,0.36);
|
|
300
257
|
}
|
|
258
|
+
|
|
259
|
+
.topcoat-button--cta:hover,
|
|
260
|
+
.topcoat-button--large--cta:hover {
|
|
261
|
+
background-color: #509bef;
|
|
262
|
+
}
|
|
263
|
+
|
|
301
264
|
.topcoat-button--cta:active,
|
|
302
|
-
.topcoat-button--cta
|
|
303
|
-
.topcoat-button--large--cta:active,
|
|
304
|
-
.topcoat-button--large--cta.is-active {
|
|
265
|
+
.topcoat-button--large--cta:active {
|
|
305
266
|
background-color: #0380e8;
|
|
306
|
-
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
307
267
|
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
308
268
|
}
|
|
309
|
-
.topcoat-button--cta:disabled,
|
|
310
|
-
.topcoat-button--cta.is-disabled {
|
|
311
|
-
opacity: 0.3;
|
|
312
|
-
cursor: default;
|
|
313
|
-
pointer-events: none;
|
|
314
|
-
}
|
|
315
|
-
/*
|
|
316
|
-
Large Call To Action Button
|
|
317
|
-
---------------------------
|
|
318
269
|
|
|
319
|
-
|
|
270
|
+
.topcoat-button--large--cta {
|
|
271
|
+
font-size: 1.3rem;
|
|
272
|
+
font-weight: 400;
|
|
273
|
+
line-height: 4.375rem;
|
|
274
|
+
padding: 0 1.25rem;
|
|
275
|
+
}
|
|
320
276
|
|
|
321
|
-
|
|
277
|
+
.button-bar,
|
|
278
|
+
.topcoat-button-bar {
|
|
279
|
+
display: table;
|
|
280
|
+
table-layout: fixed;
|
|
281
|
+
white-space: nowrap;
|
|
282
|
+
margin: 0;
|
|
283
|
+
padding: 0;
|
|
284
|
+
}
|
|
322
285
|
|
|
323
|
-
|
|
286
|
+
.button-bar__item,
|
|
287
|
+
.topcoat-button-bar__item {
|
|
288
|
+
display: table-cell;
|
|
289
|
+
width: auto;
|
|
290
|
+
border-radius: 0;
|
|
291
|
+
}
|
|
324
292
|
|
|
325
|
-
|
|
293
|
+
.button-bar__item > input,
|
|
294
|
+
.topcoat-button-bar__item > input {
|
|
295
|
+
position: absolute;
|
|
296
|
+
overflow: hidden;
|
|
297
|
+
padding: 0;
|
|
298
|
+
border: 0;
|
|
299
|
+
opacity: 0.001;
|
|
300
|
+
z-index: 1;
|
|
301
|
+
vertical-align: top;
|
|
302
|
+
outline: none;
|
|
303
|
+
}
|
|
326
304
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
<a class="topcoat-button--large--cta is-disabled" >Button</a>
|
|
330
|
-
*/
|
|
331
|
-
.topcoat-button--large--cta {
|
|
332
|
-
font-size: 1.3rem;
|
|
333
|
-
line-height: 4rem;
|
|
305
|
+
.button-bar__button {
|
|
306
|
+
border-radius: inherit;
|
|
334
307
|
}
|
|
335
|
-
|
|
336
|
-
.
|
|
308
|
+
|
|
309
|
+
.button-bar__item:disabled {
|
|
337
310
|
opacity: 0.3;
|
|
338
311
|
cursor: default;
|
|
339
312
|
pointer-events: none;
|
|
340
313
|
}
|
|
341
314
|
|
|
342
|
-
/*
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
315
|
+
/* topdoc
|
|
316
|
+
name: Button Bar
|
|
317
|
+
description: Component of grouped buttons
|
|
318
|
+
modifiers:
|
|
319
|
+
:disabled: Disabled state
|
|
320
|
+
markup:
|
|
321
|
+
<div class="topcoat-button-bar">
|
|
322
|
+
<div class="topcoat-button-bar__item">
|
|
323
|
+
<button class="topcoat-button-bar__button">One</button>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="topcoat-button-bar__item">
|
|
326
|
+
<button class="topcoat-button-bar__button">Two</button>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="topcoat-button-bar__item">
|
|
329
|
+
<button class="topcoat-button-bar__button">Three</button>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
examples:
|
|
333
|
+
mobile button bar: http://codepen.io/Topcoat/pen/kdKyg
|
|
334
|
+
tags:
|
|
335
|
+
- desktop
|
|
336
|
+
- light
|
|
337
|
+
- dark
|
|
338
|
+
- mobile
|
|
339
|
+
- button
|
|
340
|
+
- group
|
|
341
|
+
- bar
|
|
355
342
|
*/
|
|
356
343
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
344
|
+
.topcoat-button-bar > .topcoat-button-bar__item:first-child {
|
|
345
|
+
border-top-left-radius: 6px;
|
|
346
|
+
border-bottom-left-radius: 6px;
|
|
347
|
+
}
|
|
360
348
|
|
|
361
|
-
|
|
349
|
+
.topcoat-button-bar > .topcoat-button-bar__item:last-child {
|
|
350
|
+
border-top-right-radius: 6px;
|
|
351
|
+
border-bottom-right-radius: 6px;
|
|
352
|
+
}
|
|
362
353
|
|
|
363
|
-
|
|
354
|
+
.topcoat-button-bar__item:first-child > .topcoat-button-bar__button,
|
|
355
|
+
.topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {
|
|
356
|
+
border-right: none;
|
|
357
|
+
}
|
|
364
358
|
|
|
365
|
-
|
|
359
|
+
.topcoat-button-bar__item:last-child > .topcoat-button-bar__button,
|
|
360
|
+
.topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {
|
|
361
|
+
border-left: none;
|
|
362
|
+
}
|
|
366
363
|
|
|
367
|
-
|
|
364
|
+
.topcoat-button-bar__button {
|
|
365
|
+
border-radius: inherit;
|
|
366
|
+
}
|
|
368
367
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
368
|
+
.topcoat-button-bar__button:focus,
|
|
369
|
+
.topcoat-button-bar__button--large:focus {
|
|
370
|
+
z-index: 1;
|
|
371
|
+
}
|
|
372
372
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
373
|
+
/* topdoc
|
|
374
|
+
name: Large Button Bar
|
|
375
|
+
description: A button bar, only larger
|
|
376
|
+
modifiers:
|
|
377
|
+
:disabled: Disabled state
|
|
378
|
+
markup:
|
|
379
|
+
<div class="topcoat-button-bar">
|
|
380
|
+
<div class="topcoat-button-bar__item">
|
|
381
|
+
<button class="topcoat-button-bar__button--large">One</button>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="topcoat-button-bar__item">
|
|
384
|
+
<button class="topcoat-button-bar__button--large">Two</button>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="topcoat-button-bar__item">
|
|
387
|
+
<button class="topcoat-button-bar__button--large">Three</button>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
tags:
|
|
391
|
+
- desktop
|
|
392
|
+
- light
|
|
393
|
+
- dark
|
|
394
|
+
- mobile
|
|
395
|
+
- button
|
|
396
|
+
- group
|
|
397
|
+
- bar
|
|
398
|
+
- large
|
|
399
|
+
*/
|
|
376
400
|
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
401
|
+
.topcoat-button-bar__button--large {
|
|
402
|
+
border-radius: inherit;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/**
|
|
406
|
+
*
|
|
407
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
408
|
+
*
|
|
409
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
410
|
+
* you may not use this file except in compliance with the License.
|
|
411
|
+
* You may obtain a copy of the License at
|
|
412
|
+
*
|
|
413
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
414
|
+
*
|
|
415
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
416
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
417
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
418
|
+
* See the License for the specific language governing permissions and
|
|
419
|
+
* limitations under the License.
|
|
420
|
+
*
|
|
380
421
|
*/
|
|
381
|
-
|
|
382
|
-
.
|
|
383
|
-
.topcoat-icon-button--large,
|
|
384
|
-
.topcoat-icon-button--large--quiet {
|
|
422
|
+
|
|
423
|
+
.button {
|
|
385
424
|
position: relative;
|
|
386
425
|
display: inline-block;
|
|
387
426
|
vertical-align: top;
|
|
388
|
-
-webkit-box-sizing: border-box;
|
|
389
427
|
-moz-box-sizing: border-box;
|
|
390
428
|
box-sizing: border-box;
|
|
391
|
-
-webkit-background-clip: padding;
|
|
392
|
-
-moz-background-clip: padding;
|
|
393
429
|
background-clip: padding-box;
|
|
394
430
|
padding: 0;
|
|
395
431
|
margin: 0;
|
|
@@ -402,541 +438,3263 @@ limitations under the License.
|
|
|
402
438
|
-moz-user-select: none;
|
|
403
439
|
-ms-user-select: none;
|
|
404
440
|
user-select: none;
|
|
405
|
-
-o-text-overflow: ellipsis;
|
|
406
441
|
text-overflow: ellipsis;
|
|
407
442
|
white-space: nowrap;
|
|
408
443
|
overflow: hidden;
|
|
409
|
-
|
|
410
|
-
line-height: 3rem;
|
|
411
|
-
letter-spacing: 1px;
|
|
412
|
-
color: #454545;
|
|
413
|
-
text-shadow: 0 1px #fff;
|
|
414
|
-
vertical-align: baseline;
|
|
415
|
-
background-color: #e5e9e8;
|
|
416
|
-
-webkit-box-shadow: inset 0 1px #fff;
|
|
417
|
-
box-shadow: inset 0 1px #fff;
|
|
418
|
-
border: 1px solid #a5a8a8;
|
|
419
|
-
-webkit-border-radius: 6px;
|
|
420
|
-
border-radius: 6px;
|
|
444
|
+
text-decoration: none;
|
|
421
445
|
}
|
|
422
|
-
|
|
423
|
-
.
|
|
424
|
-
background
|
|
425
|
-
|
|
426
|
-
box-shadow:
|
|
446
|
+
|
|
447
|
+
.button--quiet {
|
|
448
|
+
background: transparent;
|
|
449
|
+
border: 1px solid transparent;
|
|
450
|
+
box-shadow: none;
|
|
427
451
|
}
|
|
428
|
-
|
|
429
|
-
.
|
|
452
|
+
|
|
453
|
+
.button--disabled {
|
|
430
454
|
opacity: 0.3;
|
|
431
455
|
cursor: default;
|
|
432
456
|
pointer-events: none;
|
|
433
457
|
}
|
|
434
|
-
/*
|
|
435
|
-
Quiet Icon Button
|
|
436
|
-
-----------------
|
|
437
458
|
|
|
438
|
-
|
|
459
|
+
/**
|
|
460
|
+
*
|
|
461
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
462
|
+
*
|
|
463
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
464
|
+
* you may not use this file except in compliance with the License.
|
|
465
|
+
* You may obtain a copy of the License at
|
|
466
|
+
*
|
|
467
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
468
|
+
*
|
|
469
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
470
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
471
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
472
|
+
* See the License for the specific language governing permissions and
|
|
473
|
+
* limitations under the License.
|
|
474
|
+
*
|
|
475
|
+
*/
|
|
439
476
|
|
|
440
|
-
|
|
477
|
+
/**
|
|
478
|
+
*
|
|
479
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
480
|
+
*
|
|
481
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
482
|
+
* you may not use this file except in compliance with the License.
|
|
483
|
+
* You may obtain a copy of the License at
|
|
484
|
+
*
|
|
485
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
486
|
+
*
|
|
487
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
488
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
489
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
490
|
+
* See the License for the specific language governing permissions and
|
|
491
|
+
* limitations under the License.
|
|
492
|
+
*
|
|
493
|
+
*/
|
|
441
494
|
|
|
442
|
-
|
|
495
|
+
/**
|
|
496
|
+
*
|
|
497
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
498
|
+
*
|
|
499
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
500
|
+
* you may not use this file except in compliance with the License.
|
|
501
|
+
* You may obtain a copy of the License at
|
|
502
|
+
*
|
|
503
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
504
|
+
*
|
|
505
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
506
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
507
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
508
|
+
* See the License for the specific language governing permissions and
|
|
509
|
+
* limitations under the License.
|
|
510
|
+
*
|
|
511
|
+
*/
|
|
443
512
|
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
513
|
+
.button,
|
|
514
|
+
.topcoat-button,
|
|
515
|
+
.topcoat-button--quiet,
|
|
516
|
+
.topcoat-button--large,
|
|
517
|
+
.topcoat-button--large--quiet,
|
|
518
|
+
.topcoat-button--cta,
|
|
519
|
+
.topcoat-button--large--cta {
|
|
520
|
+
position: relative;
|
|
521
|
+
display: inline-block;
|
|
522
|
+
vertical-align: top;
|
|
523
|
+
-moz-box-sizing: border-box;
|
|
524
|
+
box-sizing: border-box;
|
|
525
|
+
background-clip: padding-box;
|
|
526
|
+
padding: 0;
|
|
527
|
+
margin: 0;
|
|
528
|
+
font: inherit;
|
|
529
|
+
color: inherit;
|
|
530
|
+
background: transparent;
|
|
531
|
+
border: none;
|
|
532
|
+
cursor: default;
|
|
533
|
+
-webkit-user-select: none;
|
|
534
|
+
-moz-user-select: none;
|
|
535
|
+
-ms-user-select: none;
|
|
536
|
+
user-select: none;
|
|
537
|
+
text-overflow: ellipsis;
|
|
538
|
+
white-space: nowrap;
|
|
539
|
+
overflow: hidden;
|
|
540
|
+
text-decoration: none;
|
|
541
|
+
}
|
|
453
542
|
|
|
454
|
-
|
|
455
|
-
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
|
|
456
|
-
</a>
|
|
457
|
-
*/
|
|
458
|
-
.topcoat-icon-button--quiet {
|
|
543
|
+
.button--quiet {
|
|
459
544
|
background: transparent;
|
|
460
545
|
border: 1px solid transparent;
|
|
461
|
-
-webkit-box-shadow: none;
|
|
462
546
|
box-shadow: none;
|
|
463
547
|
}
|
|
464
|
-
|
|
465
|
-
.
|
|
466
|
-
.topcoat-
|
|
467
|
-
.topcoat-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
473
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
474
|
-
}
|
|
475
|
-
.topcoat-icon-button--quiet:disabled,
|
|
476
|
-
.topcoat-icon-button--quiet.is-disabled {
|
|
548
|
+
|
|
549
|
+
.button--disabled,
|
|
550
|
+
.topcoat-button:disabled,
|
|
551
|
+
.topcoat-button--quiet:disabled,
|
|
552
|
+
.topcoat-button--large:disabled,
|
|
553
|
+
.topcoat-button--large--quiet:disabled,
|
|
554
|
+
.topcoat-button--cta:disabled,
|
|
555
|
+
.topcoat-button--large--cta:disabled {
|
|
477
556
|
opacity: 0.3;
|
|
478
557
|
cursor: default;
|
|
479
558
|
pointer-events: none;
|
|
480
559
|
}
|
|
481
|
-
/*
|
|
482
|
-
Large Icon Button
|
|
483
|
-
-----------------
|
|
484
|
-
|
|
485
|
-
:active - Active state
|
|
486
|
-
|
|
487
|
-
.is-active - Simulates an active state on mobile devices
|
|
488
560
|
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
561
|
+
/* topdoc
|
|
562
|
+
name: Button
|
|
563
|
+
description: A simple button
|
|
564
|
+
modifiers:
|
|
565
|
+
:active: Active state
|
|
566
|
+
:disabled: Disabled state
|
|
567
|
+
:hover: Hover state
|
|
568
|
+
:focus: Focused
|
|
569
|
+
markup:
|
|
570
|
+
<button class="topcoat-button">Button</button>
|
|
571
|
+
<button class="topcoat-button" disabled>Button</button>
|
|
572
|
+
examples:
|
|
573
|
+
mobile button: http://codepen.io/Topcoat/pen/DpKtf
|
|
574
|
+
tags:
|
|
575
|
+
- desktop
|
|
576
|
+
- light
|
|
577
|
+
- mobile
|
|
578
|
+
- button
|
|
579
|
+
*/
|
|
496
580
|
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
581
|
+
.topcoat-button,
|
|
582
|
+
.topcoat-button--quiet,
|
|
583
|
+
.topcoat-button--large,
|
|
584
|
+
.topcoat-button--large--quiet,
|
|
585
|
+
.topcoat-button--cta,
|
|
586
|
+
.topcoat-button--large--cta {
|
|
587
|
+
padding: 0 1.25rem;
|
|
588
|
+
font-size: 16px;
|
|
589
|
+
line-height: 3rem;
|
|
590
|
+
letter-spacing: 1px;
|
|
591
|
+
color: #454545;
|
|
592
|
+
text-shadow: 0 1px #fff;
|
|
593
|
+
vertical-align: top;
|
|
594
|
+
background-color: #e5e9e8;
|
|
595
|
+
box-shadow: inset 0 1px #fff;
|
|
596
|
+
border: 1px solid #a5a8a8;
|
|
597
|
+
border-radius: 6px;
|
|
598
|
+
}
|
|
500
599
|
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
.topcoat-icon-button--large--quiet {
|
|
507
|
-
width: 4rem;
|
|
508
|
-
height: 4rem;
|
|
509
|
-
line-height: 4rem;
|
|
600
|
+
.topcoat-button:hover,
|
|
601
|
+
.topcoat-button--quiet:hover,
|
|
602
|
+
.topcoat-button--large:hover,
|
|
603
|
+
.topcoat-button--large--quiet:hover {
|
|
604
|
+
background-color: #edf1f1;
|
|
510
605
|
}
|
|
511
|
-
|
|
512
|
-
.topcoat-
|
|
606
|
+
|
|
607
|
+
.topcoat-button:active,
|
|
608
|
+
.topcoat-button--large:active {
|
|
513
609
|
background-color: #d3d7d7;
|
|
514
|
-
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
515
610
|
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
516
611
|
}
|
|
517
|
-
.topcoat-icon-button--large:disabled,
|
|
518
|
-
.topcoat-icon-button--large.is-disabled {
|
|
519
|
-
opacity: 0.3;
|
|
520
|
-
cursor: default;
|
|
521
|
-
pointer-events: none;
|
|
522
|
-
}
|
|
523
|
-
/*
|
|
524
|
-
Large Quiet Icon Button
|
|
525
|
-
-----------------------
|
|
526
612
|
|
|
527
|
-
|
|
613
|
+
.topcoat-button:focus,
|
|
614
|
+
.topcoat-button--quiet:focus,
|
|
615
|
+
.topcoat-button--large:focus,
|
|
616
|
+
.topcoat-button--large--quiet:focus,
|
|
617
|
+
.topcoat-button--cta:focus,
|
|
618
|
+
.topcoat-button--large--cta:focus {
|
|
619
|
+
border: 1px solid #0940fd;
|
|
620
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
621
|
+
outline: 0;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
/* topdoc
|
|
625
|
+
name: Quiet Button
|
|
626
|
+
description: A simple, yet quiet button
|
|
627
|
+
modifiers:
|
|
628
|
+
:active: Quiet button active state
|
|
629
|
+
:disabled: Disabled state
|
|
630
|
+
:hover: Hover state
|
|
631
|
+
:focus: Focused
|
|
632
|
+
markup:
|
|
633
|
+
<button class="topcoat-button--quiet">Button</button>
|
|
634
|
+
<button class="topcoat-button--quiet" disabled>Button</button>
|
|
635
|
+
tags:
|
|
636
|
+
- desktop
|
|
637
|
+
- light
|
|
638
|
+
- mobile
|
|
639
|
+
- button
|
|
640
|
+
- quiet
|
|
641
|
+
*/
|
|
528
642
|
|
|
529
|
-
|
|
643
|
+
.topcoat-button--quiet {
|
|
644
|
+
background: transparent;
|
|
645
|
+
border: 1px solid transparent;
|
|
646
|
+
box-shadow: none;
|
|
647
|
+
}
|
|
530
648
|
|
|
531
|
-
|
|
649
|
+
.topcoat-button--quiet:hover,
|
|
650
|
+
.topcoat-button--large--quiet:hover {
|
|
651
|
+
text-shadow: 0 1px #fff;
|
|
652
|
+
border: 1px solid #a5a8a8;
|
|
653
|
+
box-shadow: inset 0 1px #fff;
|
|
654
|
+
}
|
|
532
655
|
|
|
533
|
-
|
|
656
|
+
.topcoat-button--quiet:active,
|
|
657
|
+
.topcoat-button--large--quiet:active {
|
|
658
|
+
color: #454545;
|
|
659
|
+
text-shadow: 0 1px #fff;
|
|
660
|
+
background-color: #d3d7d7;
|
|
661
|
+
border: 1px solid #a5a8a8;
|
|
662
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
663
|
+
}
|
|
534
664
|
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
665
|
+
/* topdoc
|
|
666
|
+
name: Large Button
|
|
667
|
+
description: A big ol button
|
|
668
|
+
modifiers:
|
|
669
|
+
:active: Active state
|
|
670
|
+
:disabled: Disabled state
|
|
671
|
+
:hover: Hover state
|
|
672
|
+
:focus: Focused
|
|
673
|
+
markup:
|
|
674
|
+
<button class="topcoat-button--large" >Button</button>
|
|
675
|
+
<button class="topcoat-button--large" disabled>Button</button>
|
|
676
|
+
tags:
|
|
677
|
+
- desktop
|
|
678
|
+
- light
|
|
679
|
+
- mobile
|
|
680
|
+
- button
|
|
681
|
+
- large
|
|
682
|
+
*/
|
|
538
683
|
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
684
|
+
.topcoat-button--large,
|
|
685
|
+
.topcoat-button--large--quiet {
|
|
686
|
+
font-size: 1.3rem;
|
|
687
|
+
font-weight: 400;
|
|
688
|
+
line-height: 4.375rem;
|
|
689
|
+
padding: 0 1.25rem;
|
|
690
|
+
}
|
|
542
691
|
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
692
|
+
/* topdoc
|
|
693
|
+
name: Large Quiet Button
|
|
694
|
+
description: A large, yet quiet button
|
|
695
|
+
modifiers:
|
|
696
|
+
:active: Active state
|
|
697
|
+
:disabled: Disabled state
|
|
698
|
+
:hover: Hover state
|
|
699
|
+
:focus: Focused
|
|
700
|
+
markup:
|
|
701
|
+
<button class="topcoat-button--large--quiet" >Button</button>
|
|
702
|
+
<button class="topcoat-button--large--quiet" disabled>Button</button>
|
|
703
|
+
tags:
|
|
704
|
+
- desktop
|
|
705
|
+
- light
|
|
706
|
+
- mobile
|
|
707
|
+
- button
|
|
708
|
+
- large
|
|
709
|
+
- quiet
|
|
546
710
|
*/
|
|
547
|
-
|
|
711
|
+
|
|
712
|
+
.topcoat-button--large--quiet {
|
|
548
713
|
background: transparent;
|
|
549
714
|
border: 1px solid transparent;
|
|
550
|
-
-webkit-box-shadow: none;
|
|
551
715
|
box-shadow: none;
|
|
552
716
|
}
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
717
|
+
|
|
718
|
+
/* topdoc
|
|
719
|
+
name: Call To Action Button
|
|
720
|
+
description: A CALL TO ARMS, er, ACTION!
|
|
721
|
+
modifiers:
|
|
722
|
+
:active: Active state
|
|
723
|
+
:disabled: Disabled state
|
|
724
|
+
:hover: Hover state
|
|
725
|
+
:focus: Focused
|
|
726
|
+
markup:
|
|
727
|
+
<button class="topcoat-button--cta" >Button</button>
|
|
728
|
+
<button class="topcoat-button--cta" disabled>Button</button>
|
|
729
|
+
tags:
|
|
730
|
+
- desktop
|
|
731
|
+
- light
|
|
732
|
+
- mobile
|
|
733
|
+
- button
|
|
734
|
+
- call to action
|
|
735
|
+
*/
|
|
736
|
+
|
|
737
|
+
.topcoat-button--cta,
|
|
738
|
+
.topcoat-button--large--cta {
|
|
739
|
+
border: 1px solid #143250;
|
|
740
|
+
background-color: #288edf;
|
|
741
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
|
742
|
+
color: #fff;
|
|
743
|
+
font-weight: 500;
|
|
744
|
+
text-shadow: 0 -1px rgba(0,0,0,0.36);
|
|
572
745
|
}
|
|
573
746
|
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
You may obtain a copy of the License at
|
|
747
|
+
.topcoat-button--cta:hover,
|
|
748
|
+
.topcoat-button--large--cta:hover {
|
|
749
|
+
background-color: #509bef;
|
|
750
|
+
}
|
|
579
751
|
|
|
580
|
-
|
|
752
|
+
.topcoat-button--cta:active,
|
|
753
|
+
.topcoat-button--large--cta:active {
|
|
754
|
+
background-color: #0380e8;
|
|
755
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
756
|
+
}
|
|
581
757
|
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
758
|
+
/* topdoc
|
|
759
|
+
name: Large Call To Action Button
|
|
760
|
+
description: Like call to action, but bigger
|
|
761
|
+
modifiers:
|
|
762
|
+
:active: Active state
|
|
763
|
+
:disabled: Disabled state
|
|
764
|
+
:hover: Hover state
|
|
765
|
+
:focus: Focused
|
|
766
|
+
markup:
|
|
767
|
+
<button class="topcoat-button--large--cta" >Button</button>
|
|
768
|
+
<button class="topcoat-button--large--cta" disabled>Button</button>
|
|
769
|
+
tags:
|
|
770
|
+
- desktop
|
|
771
|
+
- light
|
|
772
|
+
- mobile
|
|
773
|
+
- button
|
|
774
|
+
- large
|
|
775
|
+
- call to action
|
|
587
776
|
*/
|
|
588
777
|
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
<ul class="topcoat-list">
|
|
596
|
-
<li class="topcoat-list__item">
|
|
597
|
-
Item
|
|
598
|
-
</li>
|
|
599
|
-
<li class="topcoat-list__item">
|
|
600
|
-
Item
|
|
601
|
-
</li>
|
|
602
|
-
<li class="topcoat-list__item">
|
|
603
|
-
Item
|
|
604
|
-
</li>
|
|
605
|
-
</ul>
|
|
606
|
-
</div>
|
|
778
|
+
.topcoat-button--large--cta {
|
|
779
|
+
font-size: 1.3rem;
|
|
780
|
+
font-weight: 400;
|
|
781
|
+
line-height: 4.375rem;
|
|
782
|
+
padding: 0 1.25rem;
|
|
783
|
+
}
|
|
607
784
|
|
|
785
|
+
/**
|
|
786
|
+
*
|
|
787
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
788
|
+
*
|
|
789
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
790
|
+
* you may not use this file except in compliance with the License.
|
|
791
|
+
* You may obtain a copy of the License at
|
|
792
|
+
*
|
|
793
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
794
|
+
*
|
|
795
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
796
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
797
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
798
|
+
* See the License for the specific language governing permissions and
|
|
799
|
+
* limitations under the License.
|
|
800
|
+
*
|
|
608
801
|
*/
|
|
609
|
-
|
|
802
|
+
|
|
803
|
+
input[type="checkbox"] {
|
|
804
|
+
position: absolute;
|
|
805
|
+
overflow: hidden;
|
|
610
806
|
padding: 0;
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
807
|
+
border: 0;
|
|
808
|
+
opacity: 0.001;
|
|
809
|
+
z-index: 1;
|
|
810
|
+
vertical-align: top;
|
|
811
|
+
outline: none;
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
.checkbox {
|
|
815
|
+
-moz-box-sizing: border-box;
|
|
816
|
+
box-sizing: border-box;
|
|
817
|
+
background-clip: padding-box;
|
|
818
|
+
position: relative;
|
|
819
|
+
display: inline-block;
|
|
820
|
+
vertical-align: top;
|
|
616
821
|
cursor: default;
|
|
617
822
|
-webkit-user-select: none;
|
|
618
823
|
-moz-user-select: none;
|
|
619
824
|
-ms-user-select: none;
|
|
620
825
|
user-select: none;
|
|
621
|
-
overflow: auto;
|
|
622
|
-
-webkit-overflow-scrolling: touch;
|
|
623
|
-
border-top: 1px solid #bcbfbf;
|
|
624
|
-
border-bottom: 1px solid #eff1f1;
|
|
625
|
-
background-color: #dfe2e2;
|
|
626
826
|
}
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
827
|
+
|
|
828
|
+
.checkbox__label {
|
|
829
|
+
position: relative;
|
|
830
|
+
display: inline-block;
|
|
831
|
+
vertical-align: top;
|
|
832
|
+
cursor: default;
|
|
833
|
+
-webkit-user-select: none;
|
|
834
|
+
-moz-user-select: none;
|
|
835
|
+
-ms-user-select: none;
|
|
836
|
+
user-select: none;
|
|
637
837
|
}
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
color: #454545;
|
|
838
|
+
|
|
839
|
+
.checkbox--disabled {
|
|
840
|
+
opacity: 0.3;
|
|
841
|
+
cursor: default;
|
|
842
|
+
pointer-events: none;
|
|
644
843
|
}
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
border-bottom: 1px solid #bcbfbf;
|
|
844
|
+
|
|
845
|
+
.checkbox:before,
|
|
846
|
+
.checkbox:after {
|
|
847
|
+
content: '';
|
|
848
|
+
position: absolute;
|
|
651
849
|
}
|
|
652
|
-
|
|
653
|
-
|
|
850
|
+
|
|
851
|
+
.checkbox:before {
|
|
852
|
+
-moz-box-sizing: border-box;
|
|
853
|
+
box-sizing: border-box;
|
|
854
|
+
background-clip: padding-box;
|
|
654
855
|
}
|
|
655
856
|
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
857
|
+
/**
|
|
858
|
+
*
|
|
859
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
860
|
+
*
|
|
861
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
862
|
+
* you may not use this file except in compliance with the License.
|
|
863
|
+
* You may obtain a copy of the License at
|
|
864
|
+
*
|
|
865
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
866
|
+
*
|
|
867
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
868
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
869
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
870
|
+
* See the License for the specific language governing permissions and
|
|
871
|
+
* limitations under the License.
|
|
872
|
+
*
|
|
873
|
+
*/
|
|
661
874
|
|
|
662
|
-
|
|
875
|
+
/**
|
|
876
|
+
*
|
|
877
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
878
|
+
*
|
|
879
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
880
|
+
* you may not use this file except in compliance with the License.
|
|
881
|
+
* You may obtain a copy of the License at
|
|
882
|
+
*
|
|
883
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
884
|
+
*
|
|
885
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
886
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
887
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
888
|
+
* See the License for the specific language governing permissions and
|
|
889
|
+
* limitations under the License.
|
|
890
|
+
*
|
|
891
|
+
*/
|
|
663
892
|
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
893
|
+
/**
|
|
894
|
+
*
|
|
895
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
896
|
+
*
|
|
897
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
898
|
+
* you may not use this file except in compliance with the License.
|
|
899
|
+
* You may obtain a copy of the License at
|
|
900
|
+
*
|
|
901
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
902
|
+
*
|
|
903
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
904
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
905
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
906
|
+
* See the License for the specific language governing permissions and
|
|
907
|
+
* limitations under the License.
|
|
908
|
+
*
|
|
669
909
|
*/
|
|
670
910
|
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
911
|
+
input[type="checkbox"] {
|
|
912
|
+
position: absolute;
|
|
913
|
+
overflow: hidden;
|
|
914
|
+
padding: 0;
|
|
915
|
+
border: 0;
|
|
916
|
+
opacity: 0.001;
|
|
917
|
+
z-index: 1;
|
|
918
|
+
vertical-align: top;
|
|
919
|
+
outline: none;
|
|
920
|
+
}
|
|
674
921
|
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
<a class="topcoat-icon-button--quiet">
|
|
678
|
-
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
|
|
679
|
-
</a>
|
|
680
|
-
</div>
|
|
681
|
-
<div class="topcoat-navigation-bar__item center half">
|
|
682
|
-
<h1 class="topcoat-navigation-bar__title">Header</h1>
|
|
683
|
-
</div>
|
|
684
|
-
<div class="topcoat-navigation-bar__item right quarter">
|
|
685
|
-
<a class="topcoat-icon-button--quiet">
|
|
686
|
-
<span class="topcoat-icon topcoat-icon--edit"></span>
|
|
687
|
-
</a>
|
|
688
|
-
</div>
|
|
689
|
-
</div>
|
|
690
|
-
*/
|
|
691
|
-
.topcoat-navigation-bar {
|
|
692
|
-
-webkit-box-sizing: border-box;
|
|
922
|
+
.checkbox,
|
|
923
|
+
.topcoat-checkbox__checkmark {
|
|
693
924
|
-moz-box-sizing: border-box;
|
|
694
925
|
box-sizing: border-box;
|
|
695
|
-
-webkit-background-clip: padding;
|
|
696
|
-
-moz-background-clip: padding;
|
|
697
926
|
background-clip: padding-box;
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
padding: 0;
|
|
702
|
-
margin: 0;
|
|
703
|
-
font: inherit;
|
|
704
|
-
color: inherit;
|
|
705
|
-
background: transparent;
|
|
706
|
-
border: none;
|
|
927
|
+
position: relative;
|
|
928
|
+
display: inline-block;
|
|
929
|
+
vertical-align: top;
|
|
707
930
|
cursor: default;
|
|
708
931
|
-webkit-user-select: none;
|
|
709
932
|
-moz-user-select: none;
|
|
710
933
|
-ms-user-select: none;
|
|
711
934
|
user-select: none;
|
|
712
|
-
height: 4rem;
|
|
713
|
-
padding-left: 1rem;
|
|
714
|
-
padding-right: 1rem;
|
|
715
|
-
background: #e5e9e8;
|
|
716
|
-
color: #000;
|
|
717
|
-
-webkit-box-shadow: inset 0 -1 #b9bcbc, 0 1px rgba(0,0,0,0.95);
|
|
718
|
-
box-shadow: inset 0 -1 #b9bcbc, 0 1px rgba(0,0,0,0.95);
|
|
719
935
|
}
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
box-sizing: border-box;
|
|
724
|
-
-webkit-background-clip: padding;
|
|
725
|
-
-moz-background-clip: padding;
|
|
726
|
-
background-clip: padding-box;
|
|
936
|
+
|
|
937
|
+
.checkbox__label,
|
|
938
|
+
.topcoat-checkbox {
|
|
727
939
|
position: relative;
|
|
728
940
|
display: inline-block;
|
|
729
941
|
vertical-align: top;
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
border: none;
|
|
736
|
-
margin: var-margin;
|
|
737
|
-
line-height: 4rem;
|
|
738
|
-
vertical-align: top;
|
|
942
|
+
cursor: default;
|
|
943
|
+
-webkit-user-select: none;
|
|
944
|
+
-moz-user-select: none;
|
|
945
|
+
-ms-user-select: none;
|
|
946
|
+
user-select: none;
|
|
739
947
|
}
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
border: none;
|
|
747
|
-
-o-text-overflow: ellipsis;
|
|
748
|
-
text-overflow: ellipsis;
|
|
749
|
-
white-space: nowrap;
|
|
750
|
-
overflow: hidden;
|
|
751
|
-
font-size: 1.3rem;
|
|
752
|
-
font-weight: 400;
|
|
753
|
-
color: #000;
|
|
948
|
+
|
|
949
|
+
.checkbox--disabled,
|
|
950
|
+
input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {
|
|
951
|
+
opacity: 0.3;
|
|
952
|
+
cursor: default;
|
|
953
|
+
pointer-events: none;
|
|
754
954
|
}
|
|
755
955
|
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
956
|
+
.checkbox:before,
|
|
957
|
+
.checkbox:after,
|
|
958
|
+
.topcoat-checkbox__checkmark:before,
|
|
959
|
+
.topcoat-checkbox__checkmark:after {
|
|
960
|
+
content: '';
|
|
961
|
+
position: absolute;
|
|
962
|
+
}
|
|
761
963
|
|
|
762
|
-
|
|
964
|
+
.checkbox:before,
|
|
965
|
+
.topcoat-checkbox__checkmark:before {
|
|
966
|
+
-moz-box-sizing: border-box;
|
|
967
|
+
box-sizing: border-box;
|
|
968
|
+
background-clip: padding-box;
|
|
969
|
+
}
|
|
763
970
|
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
971
|
+
/* topdoc
|
|
972
|
+
name: Checkbox
|
|
973
|
+
description: Default skin for Topcoat checkbox
|
|
974
|
+
modifiers:
|
|
975
|
+
:focus: Focus state
|
|
976
|
+
:disabled: Disabled state
|
|
977
|
+
markup:
|
|
978
|
+
<label class="topcoat-checkbox">
|
|
979
|
+
<input type="checkbox">
|
|
980
|
+
<div class="topcoat-checkbox__checkmark"></div>
|
|
981
|
+
Default
|
|
982
|
+
</label>
|
|
983
|
+
<br>
|
|
984
|
+
<br>
|
|
985
|
+
<label class="topcoat-checkbox">
|
|
986
|
+
<input type="checkbox" disabled>
|
|
987
|
+
<div class="topcoat-checkbox__checkmark"></div>
|
|
988
|
+
Disabled
|
|
989
|
+
</label>
|
|
990
|
+
examples:
|
|
991
|
+
mobile checkbox: http://codepen.io/Topcoat/pen/piHcs
|
|
992
|
+
tags:
|
|
993
|
+
- desktop
|
|
994
|
+
- light
|
|
995
|
+
- mobile
|
|
996
|
+
- checkbox
|
|
769
997
|
*/
|
|
770
998
|
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
999
|
+
.topcoat-checkbox__checkmark {
|
|
1000
|
+
height: 2rem;
|
|
1001
|
+
}
|
|
774
1002
|
|
|
775
|
-
|
|
1003
|
+
input[type="checkbox"] {
|
|
1004
|
+
height: 2rem;
|
|
1005
|
+
width: 2rem;
|
|
1006
|
+
margin-top: 0;
|
|
1007
|
+
margin-right: -2rem;
|
|
1008
|
+
margin-bottom: -2rem;
|
|
1009
|
+
margin-left: 0;
|
|
1010
|
+
}
|
|
776
1011
|
|
|
777
|
-
.
|
|
1012
|
+
input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
|
|
1013
|
+
opacity: 1;
|
|
1014
|
+
}
|
|
778
1015
|
|
|
779
|
-
|
|
780
|
-
|
|
1016
|
+
.topcoat-checkbox {
|
|
1017
|
+
line-height: 2rem;
|
|
1018
|
+
}
|
|
781
1019
|
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
1020
|
+
.topcoat-checkbox__checkmark:before {
|
|
1021
|
+
width: 2rem;
|
|
1022
|
+
height: 2rem;
|
|
1023
|
+
background: #e5e9e8;
|
|
1024
|
+
border: 1px solid #a5a8a8;
|
|
1025
|
+
border-radius: 3px;
|
|
1026
|
+
box-shadow: inset 0 1px #fff;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
.topcoat-checkbox__checkmark {
|
|
1030
|
+
width: 2rem;
|
|
1031
|
+
height: 2rem;
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
.topcoat-checkbox__checkmark:after {
|
|
1035
|
+
top: 1px;
|
|
1036
|
+
left: 2px;
|
|
1037
|
+
opacity: 0;
|
|
1038
|
+
width: 28px;
|
|
1039
|
+
height: 11px;
|
|
1040
|
+
background: transparent;
|
|
1041
|
+
border: 7px solid #666;
|
|
1042
|
+
border-width: 7px;
|
|
1043
|
+
border-top: none;
|
|
1044
|
+
border-right: none;
|
|
1045
|
+
border-radius: 2px;
|
|
1046
|
+
-webkit-transform: rotate(-50deg);
|
|
1047
|
+
-ms-transform: rotate(-50deg);
|
|
1048
|
+
transform: rotate(-50deg);
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
|
1052
|
+
border: 1px solid #0940fd;
|
|
1053
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
/**
|
|
1057
|
+
*
|
|
1058
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1059
|
+
*
|
|
1060
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1061
|
+
* you may not use this file except in compliance with the License.
|
|
1062
|
+
* You may obtain a copy of the License at
|
|
1063
|
+
*
|
|
1064
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1065
|
+
*
|
|
1066
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1067
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1068
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1069
|
+
* See the License for the specific language governing permissions and
|
|
1070
|
+
* limitations under the License.
|
|
1071
|
+
*
|
|
1072
|
+
*/
|
|
1073
|
+
|
|
1074
|
+
/**
|
|
1075
|
+
*
|
|
1076
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1077
|
+
*
|
|
1078
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1079
|
+
* you may not use this file except in compliance with the License.
|
|
1080
|
+
* You may obtain a copy of the License at
|
|
1081
|
+
*
|
|
1082
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1083
|
+
*
|
|
1084
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1085
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1086
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1087
|
+
* See the License for the specific language governing permissions and
|
|
1088
|
+
* limitations under the License.
|
|
1089
|
+
*
|
|
1090
|
+
*/
|
|
1091
|
+
|
|
1092
|
+
.button,
|
|
1093
|
+
.topcoat-icon-button,
|
|
1094
|
+
.topcoat-icon-button--quiet,
|
|
1095
|
+
.topcoat-icon-button--large,
|
|
1096
|
+
.topcoat-icon-button--large--quiet {
|
|
1097
|
+
position: relative;
|
|
1098
|
+
display: inline-block;
|
|
785
1099
|
vertical-align: top;
|
|
786
|
-
-webkit-box-sizing: border-box;
|
|
787
1100
|
-moz-box-sizing: border-box;
|
|
788
1101
|
box-sizing: border-box;
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
margin: 5px;
|
|
793
|
-
height: 3rem;
|
|
1102
|
+
background-clip: padding-box;
|
|
1103
|
+
padding: 0;
|
|
1104
|
+
margin: 0;
|
|
794
1105
|
font: inherit;
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
border:
|
|
798
|
-
|
|
799
|
-
-webkit-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
-
|
|
803
|
-
|
|
804
|
-
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
background-position: 1em center;
|
|
808
|
-
background-repeat: no-repeat;
|
|
809
|
-
-webkit-background-size: 16px;
|
|
810
|
-
-moz-background-size: 16px;
|
|
811
|
-
background-size: 16px;
|
|
812
|
-
}
|
|
813
|
-
.topcoat-search-input:focus,
|
|
814
|
-
.topcoat-search-input--large:focus {
|
|
815
|
-
background-color: #fff;
|
|
816
|
-
color: var-color-focus;
|
|
817
|
-
}
|
|
818
|
-
.topcoat-search-input::-webkit-search-cancel-button,
|
|
819
|
-
.topcoat-search-input::-webkit-search-decoration {
|
|
820
|
-
margin-right: 5px;
|
|
1106
|
+
color: inherit;
|
|
1107
|
+
background: transparent;
|
|
1108
|
+
border: none;
|
|
1109
|
+
cursor: default;
|
|
1110
|
+
-webkit-user-select: none;
|
|
1111
|
+
-moz-user-select: none;
|
|
1112
|
+
-ms-user-select: none;
|
|
1113
|
+
user-select: none;
|
|
1114
|
+
text-overflow: ellipsis;
|
|
1115
|
+
white-space: nowrap;
|
|
1116
|
+
overflow: hidden;
|
|
1117
|
+
text-decoration: none;
|
|
821
1118
|
}
|
|
822
|
-
|
|
823
|
-
.
|
|
824
|
-
|
|
1119
|
+
|
|
1120
|
+
.button--quiet {
|
|
1121
|
+
background: transparent;
|
|
1122
|
+
border: 1px solid transparent;
|
|
1123
|
+
box-shadow: none;
|
|
825
1124
|
}
|
|
826
|
-
|
|
827
|
-
.
|
|
1125
|
+
|
|
1126
|
+
.button--disabled,
|
|
1127
|
+
.topcoat-icon-button:disabled,
|
|
1128
|
+
.topcoat-icon-button--quiet:disabled,
|
|
1129
|
+
.topcoat-icon-button--large:disabled,
|
|
1130
|
+
.topcoat-icon-button--large--quiet:disabled {
|
|
828
1131
|
opacity: 0.3;
|
|
829
1132
|
cursor: default;
|
|
830
1133
|
pointer-events: none;
|
|
831
1134
|
}
|
|
832
|
-
/*
|
|
833
|
-
Large Search Input
|
|
834
|
-
------------------
|
|
835
1135
|
|
|
836
|
-
|
|
1136
|
+
/* topdoc
|
|
1137
|
+
name: Icon Button
|
|
1138
|
+
description: Like button, but it has an icon.
|
|
1139
|
+
modifiers:
|
|
1140
|
+
:active: Active state
|
|
1141
|
+
:disabled: Disabled state
|
|
1142
|
+
:hover: Hover state
|
|
1143
|
+
:focus: Focused
|
|
1144
|
+
markup:
|
|
1145
|
+
<button class="topcoat-icon-button">
|
|
1146
|
+
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
|
|
1147
|
+
</button>
|
|
1148
|
+
<button class="topcoat-icon-button" disabled>
|
|
1149
|
+
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
|
|
1150
|
+
</button>
|
|
1151
|
+
tags:
|
|
1152
|
+
- desktop
|
|
1153
|
+
- light
|
|
1154
|
+
- mobile
|
|
1155
|
+
- button
|
|
1156
|
+
- icon
|
|
1157
|
+
*/
|
|
1158
|
+
|
|
1159
|
+
.topcoat-icon-button,
|
|
1160
|
+
.topcoat-icon-button--quiet,
|
|
1161
|
+
.topcoat-icon-button--large,
|
|
1162
|
+
.topcoat-icon-button--large--quiet {
|
|
1163
|
+
padding: 0 0.75rem;
|
|
1164
|
+
line-height: 3rem;
|
|
1165
|
+
letter-spacing: 1px;
|
|
1166
|
+
color: #454545;
|
|
1167
|
+
text-shadow: 0 1px #fff;
|
|
1168
|
+
vertical-align: baseline;
|
|
1169
|
+
background-color: #e5e9e8;
|
|
1170
|
+
box-shadow: inset 0 1px #fff;
|
|
1171
|
+
border: 1px solid #a5a8a8;
|
|
1172
|
+
border-radius: 6px;
|
|
1173
|
+
}
|
|
837
1174
|
|
|
838
|
-
|
|
1175
|
+
.topcoat-icon-button:hover,
|
|
1176
|
+
.topcoat-icon-button--quiet:hover,
|
|
1177
|
+
.topcoat-icon-button--large:hover,
|
|
1178
|
+
.topcoat-icon-button--large--quiet:hover {
|
|
1179
|
+
background-color: #edf1f1;
|
|
1180
|
+
}
|
|
839
1181
|
|
|
840
|
-
|
|
841
|
-
|
|
1182
|
+
.topcoat-icon-button:active {
|
|
1183
|
+
background-color: #d3d7d7;
|
|
1184
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
1185
|
+
}
|
|
842
1186
|
|
|
1187
|
+
.topcoat-icon-button:focus,
|
|
1188
|
+
.topcoat-icon-button--quiet:focus,
|
|
1189
|
+
.topcoat-icon-button--quiet:hover:focus,
|
|
1190
|
+
.topcoat-icon-button--large:focus,
|
|
1191
|
+
.topcoat-icon-button--large--quiet:focus,
|
|
1192
|
+
.topcoat-icon-button--large--quiet:hover:focus {
|
|
1193
|
+
border: 1px solid #0940fd;
|
|
1194
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
1195
|
+
outline: 0;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
/* topdoc
|
|
1199
|
+
name: Quiet Icon Button
|
|
1200
|
+
description: Like quiet button, but it has an icon.
|
|
1201
|
+
modifiers:
|
|
1202
|
+
:active: Active state
|
|
1203
|
+
:disabled: Disabled state
|
|
1204
|
+
:hover: Hover state
|
|
1205
|
+
:focus: Focused
|
|
1206
|
+
markup:
|
|
1207
|
+
<button class="topcoat-icon-button--quiet">
|
|
1208
|
+
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
|
|
1209
|
+
</button>
|
|
1210
|
+
<button class="topcoat-icon-button--quiet" disabled>
|
|
1211
|
+
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
|
|
1212
|
+
</button>
|
|
1213
|
+
tags:
|
|
1214
|
+
- desktop
|
|
1215
|
+
- light
|
|
1216
|
+
- mobile
|
|
1217
|
+
- button
|
|
1218
|
+
- icon
|
|
1219
|
+
- quiet
|
|
843
1220
|
*/
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
-webkit-border-radius: 40px;
|
|
850
|
-
border-radius: 40px;
|
|
851
|
-
background-position: 1.2em center;
|
|
852
|
-
-webkit-background-size: 1.3rem;
|
|
853
|
-
-moz-background-size: 1.3rem;
|
|
854
|
-
background-size: 1.3rem;
|
|
1221
|
+
|
|
1222
|
+
.topcoat-icon-button--quiet {
|
|
1223
|
+
background: transparent;
|
|
1224
|
+
border: 1px solid transparent;
|
|
1225
|
+
box-shadow: none;
|
|
855
1226
|
}
|
|
856
|
-
|
|
857
|
-
.topcoat-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
1227
|
+
|
|
1228
|
+
.topcoat-icon-button--quiet:hover,
|
|
1229
|
+
.topcoat-icon-button--large--quiet:hover {
|
|
1230
|
+
text-shadow: 0 1px #fff;
|
|
1231
|
+
border: 1px solid #a5a8a8;
|
|
1232
|
+
box-shadow: inset 0 1px #fff;
|
|
861
1233
|
}
|
|
862
1234
|
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
1235
|
+
.topcoat-icon-button--quiet:active,
|
|
1236
|
+
.topcoat-icon-button--large--quiet:active {
|
|
1237
|
+
color: #454545;
|
|
1238
|
+
text-shadow: 0 1px #fff;
|
|
1239
|
+
background-color: #d3d7d7;
|
|
1240
|
+
border: 1px solid #a5a8a8;
|
|
1241
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
1242
|
+
}
|
|
868
1243
|
|
|
869
|
-
|
|
1244
|
+
/* topdoc
|
|
1245
|
+
name: Large Icon Button
|
|
1246
|
+
description: Like large button, but it has an icon.
|
|
1247
|
+
modifiers:
|
|
1248
|
+
:active: Active state
|
|
1249
|
+
:disabled: Disabled state
|
|
1250
|
+
:hover: Hover state
|
|
1251
|
+
:focus: Focused
|
|
1252
|
+
markup:
|
|
1253
|
+
<button class="topcoat-icon-button--large">
|
|
1254
|
+
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
|
|
1255
|
+
</button>
|
|
1256
|
+
<button class="topcoat-icon-button--large" disabled>
|
|
1257
|
+
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
|
|
1258
|
+
</button>
|
|
1259
|
+
tags:
|
|
1260
|
+
- desktop
|
|
1261
|
+
- light
|
|
1262
|
+
- mobile
|
|
1263
|
+
- button
|
|
1264
|
+
- icon
|
|
1265
|
+
- large
|
|
1266
|
+
*/
|
|
870
1267
|
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
1268
|
+
.topcoat-icon-button--large,
|
|
1269
|
+
.topcoat-icon-button--large--quiet {
|
|
1270
|
+
width: 4.375rem;
|
|
1271
|
+
height: 4.375rem;
|
|
1272
|
+
line-height: 4.375rem;
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
.topcoat-icon-button--large:active {
|
|
1276
|
+
background-color: #d3d7d7;
|
|
1277
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
1278
|
+
}
|
|
1279
|
+
|
|
1280
|
+
/* topdoc
|
|
1281
|
+
name: Large Quiet Icon Button
|
|
1282
|
+
description: Like large button, but it has an icon and this one is quiet.
|
|
1283
|
+
modifiers:
|
|
1284
|
+
:active: Active state
|
|
1285
|
+
:disabled: Disabled state
|
|
1286
|
+
:hover: Hover state
|
|
1287
|
+
markup:
|
|
1288
|
+
<button class="topcoat-icon-button--large--quiet">
|
|
1289
|
+
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
|
|
1290
|
+
</button>
|
|
1291
|
+
<button class="topcoat-icon-button--large--quiet" disabled>
|
|
1292
|
+
<span class="topcoat-icon--large" style="background-color:#A5A7A7;"></span>
|
|
1293
|
+
</button>
|
|
1294
|
+
tags:
|
|
1295
|
+
- desktop
|
|
1296
|
+
- light
|
|
1297
|
+
- mobile
|
|
1298
|
+
- button
|
|
1299
|
+
- icon
|
|
1300
|
+
- large
|
|
1301
|
+
- quiet
|
|
876
1302
|
*/
|
|
877
1303
|
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
1304
|
+
.topcoat-icon-button--large--quiet {
|
|
1305
|
+
background: transparent;
|
|
1306
|
+
border: 1px solid transparent;
|
|
1307
|
+
box-shadow: none;
|
|
1308
|
+
}
|
|
881
1309
|
|
|
882
|
-
|
|
883
|
-
.
|
|
1310
|
+
.topcoat-icon,
|
|
1311
|
+
.topcoat-icon--large {
|
|
1312
|
+
position: relative;
|
|
1313
|
+
display: inline-block;
|
|
1314
|
+
vertical-align: top;
|
|
1315
|
+
overflow: hidden;
|
|
1316
|
+
width: 1.62rem;
|
|
1317
|
+
height: 1.62rem;
|
|
1318
|
+
vertical-align: middle;
|
|
1319
|
+
top: -1px;
|
|
1320
|
+
}
|
|
884
1321
|
|
|
885
|
-
|
|
886
|
-
|
|
1322
|
+
.topcoat-icon--large {
|
|
1323
|
+
width: 2.499999998125rem;
|
|
1324
|
+
height: 2.499999998125rem;
|
|
1325
|
+
top: -2px;
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
/**
|
|
1329
|
+
*
|
|
1330
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1331
|
+
*
|
|
1332
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1333
|
+
* you may not use this file except in compliance with the License.
|
|
1334
|
+
* You may obtain a copy of the License at
|
|
1335
|
+
*
|
|
1336
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1337
|
+
*
|
|
1338
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1339
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1340
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1341
|
+
* See the License for the specific language governing permissions and
|
|
1342
|
+
* limitations under the License.
|
|
1343
|
+
*
|
|
1344
|
+
*/
|
|
887
1345
|
|
|
1346
|
+
/**
|
|
1347
|
+
*
|
|
1348
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1349
|
+
*
|
|
1350
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1351
|
+
* you may not use this file except in compliance with the License.
|
|
1352
|
+
* You may obtain a copy of the License at
|
|
1353
|
+
*
|
|
1354
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1355
|
+
*
|
|
1356
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1357
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1358
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1359
|
+
* See the License for the specific language governing permissions and
|
|
1360
|
+
* limitations under the License.
|
|
1361
|
+
*
|
|
888
1362
|
*/
|
|
889
|
-
|
|
890
|
-
.
|
|
891
|
-
|
|
892
|
-
|
|
1363
|
+
|
|
1364
|
+
.input {
|
|
1365
|
+
padding: 0;
|
|
1366
|
+
margin: 0;
|
|
1367
|
+
font: inherit;
|
|
1368
|
+
color: inherit;
|
|
1369
|
+
background: transparent;
|
|
1370
|
+
border: none;
|
|
893
1371
|
-moz-box-sizing: border-box;
|
|
894
1372
|
box-sizing: border-box;
|
|
895
|
-
|
|
896
|
-
-
|
|
897
|
-
border-radius: 6px;
|
|
898
|
-
margin: 5px;
|
|
899
|
-
height: 3rem;
|
|
900
|
-
font: inherit;
|
|
901
|
-
font-weight: 200;
|
|
1373
|
+
background-clip: padding-box;
|
|
1374
|
+
vertical-align: top;
|
|
902
1375
|
outline: none;
|
|
903
|
-
border: 1px solid #a5a8a8;
|
|
904
|
-
background-color: #e5e9e8;
|
|
905
|
-
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
906
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
907
|
-
color: #454545;
|
|
908
|
-
}
|
|
909
|
-
.topcoat-text-input:focus {
|
|
910
|
-
background-color: #fff;
|
|
911
|
-
color: #000;
|
|
912
1376
|
}
|
|
913
|
-
|
|
914
|
-
.
|
|
1377
|
+
|
|
1378
|
+
.input:disabled {
|
|
915
1379
|
opacity: 0.3;
|
|
916
1380
|
cursor: default;
|
|
917
1381
|
pointer-events: none;
|
|
918
1382
|
}
|
|
919
|
-
/*
|
|
920
|
-
Large Text Input
|
|
921
|
-
----------------
|
|
922
1383
|
|
|
923
|
-
|
|
924
|
-
|
|
1384
|
+
/**
|
|
1385
|
+
*
|
|
1386
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1387
|
+
*
|
|
1388
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1389
|
+
* you may not use this file except in compliance with the License.
|
|
1390
|
+
* You may obtain a copy of the License at
|
|
1391
|
+
*
|
|
1392
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1393
|
+
*
|
|
1394
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1395
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1396
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1397
|
+
* See the License for the specific language governing permissions and
|
|
1398
|
+
* limitations under the License.
|
|
1399
|
+
*
|
|
1400
|
+
*/
|
|
925
1401
|
|
|
926
|
-
|
|
927
|
-
|
|
1402
|
+
/**
|
|
1403
|
+
*
|
|
1404
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1405
|
+
*
|
|
1406
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1407
|
+
* you may not use this file except in compliance with the License.
|
|
1408
|
+
* You may obtain a copy of the License at
|
|
1409
|
+
*
|
|
1410
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1411
|
+
*
|
|
1412
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1413
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1414
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1415
|
+
* See the License for the specific language governing permissions and
|
|
1416
|
+
* limitations under the License.
|
|
1417
|
+
*
|
|
928
1418
|
*/
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
1419
|
+
|
|
1420
|
+
.list {
|
|
1421
|
+
padding: 0;
|
|
1422
|
+
margin: 0;
|
|
1423
|
+
font: inherit;
|
|
1424
|
+
color: inherit;
|
|
1425
|
+
background: transparent;
|
|
1426
|
+
border: none;
|
|
1427
|
+
cursor: default;
|
|
1428
|
+
-webkit-user-select: none;
|
|
1429
|
+
-moz-user-select: none;
|
|
1430
|
+
-ms-user-select: none;
|
|
1431
|
+
user-select: none;
|
|
1432
|
+
overflow: auto;
|
|
1433
|
+
-webkit-overflow-scrolling: touch;
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
.list__header {
|
|
1437
|
+
margin: 0;
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
.list__container {
|
|
1441
|
+
padding: 0;
|
|
1442
|
+
margin: 0;
|
|
1443
|
+
list-style-type: none;
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1446
|
+
.list__item {
|
|
1447
|
+
margin: 0;
|
|
1448
|
+
padding: 0;
|
|
1449
|
+
}
|
|
1450
|
+
|
|
1451
|
+
/**
|
|
1452
|
+
*
|
|
1453
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1454
|
+
*
|
|
1455
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1456
|
+
* you may not use this file except in compliance with the License.
|
|
1457
|
+
* You may obtain a copy of the License at
|
|
1458
|
+
*
|
|
1459
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1460
|
+
*
|
|
1461
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1462
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1463
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1464
|
+
* See the License for the specific language governing permissions and
|
|
1465
|
+
* limitations under the License.
|
|
1466
|
+
*
|
|
1467
|
+
*/
|
|
1468
|
+
|
|
1469
|
+
/**
|
|
1470
|
+
*
|
|
1471
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1472
|
+
*
|
|
1473
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1474
|
+
* you may not use this file except in compliance with the License.
|
|
1475
|
+
* You may obtain a copy of the License at
|
|
1476
|
+
*
|
|
1477
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1478
|
+
*
|
|
1479
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1480
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1481
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1482
|
+
* See the License for the specific language governing permissions and
|
|
1483
|
+
* limitations under the License.
|
|
1484
|
+
*
|
|
1485
|
+
*/
|
|
1486
|
+
|
|
1487
|
+
.list,
|
|
1488
|
+
.topcoat-list {
|
|
1489
|
+
padding: 0;
|
|
1490
|
+
margin: 0;
|
|
1491
|
+
font: inherit;
|
|
1492
|
+
color: inherit;
|
|
1493
|
+
background: transparent;
|
|
1494
|
+
border: none;
|
|
1495
|
+
cursor: default;
|
|
1496
|
+
-webkit-user-select: none;
|
|
1497
|
+
-moz-user-select: none;
|
|
1498
|
+
-ms-user-select: none;
|
|
1499
|
+
user-select: none;
|
|
1500
|
+
overflow: auto;
|
|
1501
|
+
-webkit-overflow-scrolling: touch;
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
.list__header,
|
|
1505
|
+
.topcoat-list__header {
|
|
1506
|
+
margin: 0;
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
.list__container,
|
|
1510
|
+
.topcoat-list__container {
|
|
1511
|
+
padding: 0;
|
|
1512
|
+
margin: 0;
|
|
1513
|
+
list-style-type: none;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
.list__item,
|
|
1517
|
+
.topcoat-list__item {
|
|
1518
|
+
margin: 0;
|
|
1519
|
+
padding: 0;
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
/* topdoc
|
|
1523
|
+
name: List
|
|
1524
|
+
description: Topcoat default list skin
|
|
1525
|
+
markup:
|
|
1526
|
+
<div class="topcoat-list">
|
|
1527
|
+
<h3 class="topcoat-list__header">Category</h3>
|
|
1528
|
+
<ul class="topcoat-list__container">
|
|
1529
|
+
<li class="topcoat-list__item">
|
|
1530
|
+
Item
|
|
1531
|
+
</li>
|
|
1532
|
+
<li class="topcoat-list__item">
|
|
1533
|
+
Item
|
|
1534
|
+
</li>
|
|
1535
|
+
<li class="topcoat-list__item">
|
|
1536
|
+
Item
|
|
1537
|
+
</li>
|
|
1538
|
+
</ul>
|
|
1539
|
+
</div>
|
|
1540
|
+
tags:
|
|
1541
|
+
- mobile
|
|
1542
|
+
- list
|
|
1543
|
+
*/
|
|
1544
|
+
|
|
1545
|
+
.topcoat-list {
|
|
1546
|
+
border-top: 1px solid #bcbfbf;
|
|
1547
|
+
border-bottom: 1px solid #eff1f1;
|
|
1548
|
+
background-color: #dfe2e2;
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
.topcoat-list__header {
|
|
1552
|
+
padding: 4px 20px;
|
|
1553
|
+
font-size: 0.9em;
|
|
1554
|
+
font-weight: 400;
|
|
1555
|
+
background-color: #cccfcf;
|
|
1556
|
+
color: #656565;
|
|
1557
|
+
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
|
|
1558
|
+
border-top: 1px solid rgba(255,255,255,0.5);
|
|
1559
|
+
border-bottom: 1px solid rgba(255,255,255,0.23);
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1562
|
+
.topcoat-list__container {
|
|
1563
|
+
border-top: 1px solid #bcbfbf;
|
|
1564
|
+
color: #454545;
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
.topcoat-list__item {
|
|
1568
|
+
padding: 1.25rem;
|
|
1569
|
+
border-top: 1px solid #eff1f1;
|
|
1570
|
+
border-bottom: 1px solid #bcbfbf;
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
.topcoat-list__item:first-child {
|
|
1574
|
+
border-top: 1px solid rgba(0,0,0,0.05);
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
/**
|
|
1578
|
+
*
|
|
1579
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1580
|
+
*
|
|
1581
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1582
|
+
* you may not use this file except in compliance with the License.
|
|
1583
|
+
* You may obtain a copy of the License at
|
|
1584
|
+
*
|
|
1585
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1586
|
+
*
|
|
1587
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1588
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1589
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1590
|
+
* See the License for the specific language governing permissions and
|
|
1591
|
+
* limitations under the License.
|
|
1592
|
+
*
|
|
1593
|
+
*/
|
|
1594
|
+
|
|
1595
|
+
/**
|
|
1596
|
+
*
|
|
1597
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1598
|
+
*
|
|
1599
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1600
|
+
* you may not use this file except in compliance with the License.
|
|
1601
|
+
* You may obtain a copy of the License at
|
|
1602
|
+
*
|
|
1603
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1604
|
+
*
|
|
1605
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1606
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1607
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1608
|
+
* See the License for the specific language governing permissions and
|
|
1609
|
+
* limitations under the License.
|
|
1610
|
+
*
|
|
1611
|
+
*/
|
|
1612
|
+
|
|
1613
|
+
/**
|
|
1614
|
+
*
|
|
1615
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1616
|
+
*
|
|
1617
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1618
|
+
* you may not use this file except in compliance with the License.
|
|
1619
|
+
* You may obtain a copy of the License at
|
|
1620
|
+
*
|
|
1621
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1622
|
+
*
|
|
1623
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1624
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1625
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1626
|
+
* See the License for the specific language governing permissions and
|
|
1627
|
+
* limitations under the License.
|
|
1628
|
+
*
|
|
1629
|
+
*/
|
|
1630
|
+
|
|
1631
|
+
.navigation-bar {
|
|
1632
|
+
-moz-box-sizing: border-box;
|
|
1633
|
+
box-sizing: border-box;
|
|
1634
|
+
background-clip: padding-box;
|
|
1635
|
+
white-space: nowrap;
|
|
1636
|
+
overflow: hidden;
|
|
1637
|
+
word-spacing: 0;
|
|
1638
|
+
padding: 0;
|
|
1639
|
+
margin: 0;
|
|
1640
|
+
font: inherit;
|
|
1641
|
+
color: inherit;
|
|
1642
|
+
background: transparent;
|
|
1643
|
+
border: none;
|
|
1644
|
+
cursor: default;
|
|
1645
|
+
-webkit-user-select: none;
|
|
1646
|
+
-moz-user-select: none;
|
|
1647
|
+
-ms-user-select: none;
|
|
1648
|
+
user-select: none;
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1651
|
+
.navigation-bar__item {
|
|
1652
|
+
-moz-box-sizing: border-box;
|
|
1653
|
+
box-sizing: border-box;
|
|
1654
|
+
background-clip: padding-box;
|
|
1655
|
+
position: relative;
|
|
1656
|
+
display: inline-block;
|
|
1657
|
+
vertical-align: top;
|
|
1658
|
+
padding: 0;
|
|
1659
|
+
margin: 0;
|
|
1660
|
+
font: inherit;
|
|
1661
|
+
color: inherit;
|
|
1662
|
+
background: transparent;
|
|
1663
|
+
border: none;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
.navigation-bar__title {
|
|
1667
|
+
padding: 0;
|
|
1668
|
+
margin: 0;
|
|
1669
|
+
font: inherit;
|
|
1670
|
+
color: inherit;
|
|
1671
|
+
background: transparent;
|
|
1672
|
+
border: none;
|
|
1673
|
+
text-overflow: ellipsis;
|
|
1674
|
+
white-space: nowrap;
|
|
1675
|
+
overflow: hidden;
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
/**
|
|
1679
|
+
*
|
|
1680
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1681
|
+
*
|
|
1682
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1683
|
+
* you may not use this file except in compliance with the License.
|
|
1684
|
+
* You may obtain a copy of the License at
|
|
1685
|
+
*
|
|
1686
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1687
|
+
*
|
|
1688
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1689
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1690
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1691
|
+
* See the License for the specific language governing permissions and
|
|
1692
|
+
* limitations under the License.
|
|
1693
|
+
*
|
|
1694
|
+
*/
|
|
1695
|
+
|
|
1696
|
+
/**
|
|
1697
|
+
*
|
|
1698
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1699
|
+
*
|
|
1700
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1701
|
+
* you may not use this file except in compliance with the License.
|
|
1702
|
+
* You may obtain a copy of the License at
|
|
1703
|
+
*
|
|
1704
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1705
|
+
*
|
|
1706
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1707
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1708
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1709
|
+
* See the License for the specific language governing permissions and
|
|
1710
|
+
* limitations under the License.
|
|
1711
|
+
*
|
|
1712
|
+
*/
|
|
1713
|
+
|
|
1714
|
+
.navigation-bar,
|
|
1715
|
+
.topcoat-navigation-bar {
|
|
1716
|
+
-moz-box-sizing: border-box;
|
|
1717
|
+
box-sizing: border-box;
|
|
1718
|
+
background-clip: padding-box;
|
|
1719
|
+
white-space: nowrap;
|
|
1720
|
+
overflow: hidden;
|
|
1721
|
+
word-spacing: 0;
|
|
1722
|
+
padding: 0;
|
|
1723
|
+
margin: 0;
|
|
1724
|
+
font: inherit;
|
|
1725
|
+
color: inherit;
|
|
1726
|
+
background: transparent;
|
|
1727
|
+
border: none;
|
|
1728
|
+
cursor: default;
|
|
1729
|
+
-webkit-user-select: none;
|
|
1730
|
+
-moz-user-select: none;
|
|
1731
|
+
-ms-user-select: none;
|
|
1732
|
+
user-select: none;
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1735
|
+
.navigation-bar__item,
|
|
1736
|
+
.topcoat-navigation-bar__item {
|
|
1737
|
+
-moz-box-sizing: border-box;
|
|
1738
|
+
box-sizing: border-box;
|
|
1739
|
+
background-clip: padding-box;
|
|
1740
|
+
position: relative;
|
|
1741
|
+
display: inline-block;
|
|
1742
|
+
vertical-align: top;
|
|
1743
|
+
padding: 0;
|
|
1744
|
+
margin: 0;
|
|
1745
|
+
font: inherit;
|
|
1746
|
+
color: inherit;
|
|
1747
|
+
background: transparent;
|
|
1748
|
+
border: none;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
.navigation-bar__title,
|
|
1752
|
+
.topcoat-navigation-bar__title {
|
|
1753
|
+
padding: 0;
|
|
1754
|
+
margin: 0;
|
|
1755
|
+
font: inherit;
|
|
1756
|
+
color: inherit;
|
|
1757
|
+
background: transparent;
|
|
1758
|
+
border: none;
|
|
1759
|
+
text-overflow: ellipsis;
|
|
1760
|
+
white-space: nowrap;
|
|
1761
|
+
overflow: hidden;
|
|
1762
|
+
}
|
|
1763
|
+
|
|
1764
|
+
/* topdoc
|
|
1765
|
+
name: Navigation Bar
|
|
1766
|
+
description: A place where navigation goes to drink
|
|
1767
|
+
markup:
|
|
1768
|
+
<div class="topcoat-navigation-bar">
|
|
1769
|
+
<div class="topcoat-navigation-bar__item center full">
|
|
1770
|
+
<h1 class="topcoat-navigation-bar__title">Header</h1>
|
|
1771
|
+
</div>
|
|
1772
|
+
</div>
|
|
1773
|
+
tags:
|
|
1774
|
+
- desktop
|
|
1775
|
+
- light
|
|
1776
|
+
- mobile
|
|
1777
|
+
- navigation
|
|
1778
|
+
- bar
|
|
1779
|
+
*/
|
|
1780
|
+
|
|
1781
|
+
.topcoat-navigation-bar {
|
|
1782
|
+
height: 4.375rem;
|
|
1783
|
+
padding-left: 1rem;
|
|
1784
|
+
padding-right: 1rem;
|
|
1785
|
+
background: #e5e9e8;
|
|
1786
|
+
color: #000;
|
|
1787
|
+
box-shadow: inset 0 -1px #b9bcbc, 0 1px #d4d6d6;
|
|
1788
|
+
}
|
|
1789
|
+
|
|
1790
|
+
.topcoat-navigation-bar__item {
|
|
1791
|
+
margin: 0;
|
|
1792
|
+
line-height: 4.375rem;
|
|
1793
|
+
vertical-align: top;
|
|
1794
|
+
}
|
|
1795
|
+
|
|
1796
|
+
.topcoat-navigation-bar__title {
|
|
1797
|
+
font-size: 1.3rem;
|
|
1798
|
+
font-weight: 400;
|
|
1799
|
+
color: #000;
|
|
1800
|
+
}
|
|
1801
|
+
|
|
1802
|
+
/*
|
|
1803
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
1804
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
1805
|
+
you may not use this file except in compliance with the License.
|
|
1806
|
+
You may obtain a copy of the License at
|
|
1807
|
+
|
|
1808
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
1809
|
+
|
|
1810
|
+
Unless required by applicable law or agreed to in writing, software
|
|
1811
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
1812
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1813
|
+
See the License for the specific language governing permissions and
|
|
1814
|
+
limitations under the License.
|
|
1815
|
+
*/
|
|
1816
|
+
|
|
1817
|
+
/**
|
|
1818
|
+
*
|
|
1819
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1820
|
+
*
|
|
1821
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1822
|
+
* you may not use this file except in compliance with the License.
|
|
1823
|
+
* You may obtain a copy of the License at
|
|
1824
|
+
*
|
|
1825
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1826
|
+
*
|
|
1827
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1828
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1829
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1830
|
+
* See the License for the specific language governing permissions and
|
|
1831
|
+
* limitations under the License.
|
|
1832
|
+
*
|
|
1833
|
+
*/
|
|
1834
|
+
|
|
1835
|
+
.notification {
|
|
1836
|
+
position: relative;
|
|
1837
|
+
display: inline-block;
|
|
1838
|
+
vertical-align: top;
|
|
1839
|
+
-moz-box-sizing: border-box;
|
|
1840
|
+
box-sizing: border-box;
|
|
1841
|
+
background-clip: padding-box;
|
|
1842
|
+
padding: 0;
|
|
1843
|
+
margin: 0;
|
|
1844
|
+
font: inherit;
|
|
1845
|
+
color: inherit;
|
|
1846
|
+
background: transparent;
|
|
1847
|
+
border: none;
|
|
1848
|
+
cursor: default;
|
|
1849
|
+
-webkit-user-select: none;
|
|
1850
|
+
-moz-user-select: none;
|
|
1851
|
+
-ms-user-select: none;
|
|
1852
|
+
user-select: none;
|
|
1853
|
+
text-overflow: ellipsis;
|
|
1854
|
+
white-space: nowrap;
|
|
1855
|
+
overflow: hidden;
|
|
1856
|
+
text-decoration: none;
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1859
|
+
/*
|
|
1860
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
1861
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
1862
|
+
you may not use this file except in compliance with the License.
|
|
1863
|
+
You may obtain a copy of the License at
|
|
1864
|
+
|
|
1865
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
1866
|
+
|
|
1867
|
+
Unless required by applicable law or agreed to in writing, software
|
|
1868
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
1869
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1870
|
+
See the License for the specific language governing permissions and
|
|
1871
|
+
limitations under the License.
|
|
1872
|
+
*/
|
|
1873
|
+
|
|
1874
|
+
/**
|
|
1875
|
+
*
|
|
1876
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1877
|
+
*
|
|
1878
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1879
|
+
* you may not use this file except in compliance with the License.
|
|
1880
|
+
* You may obtain a copy of the License at
|
|
1881
|
+
*
|
|
1882
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1883
|
+
*
|
|
1884
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1885
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1886
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1887
|
+
* See the License for the specific language governing permissions and
|
|
1888
|
+
* limitations under the License.
|
|
1889
|
+
*
|
|
1890
|
+
*/
|
|
1891
|
+
|
|
1892
|
+
.notification,
|
|
1893
|
+
.topcoat-notification {
|
|
1894
|
+
position: relative;
|
|
1895
|
+
display: inline-block;
|
|
1896
|
+
vertical-align: top;
|
|
1897
|
+
-moz-box-sizing: border-box;
|
|
1898
|
+
box-sizing: border-box;
|
|
1899
|
+
background-clip: padding-box;
|
|
1900
|
+
padding: 0;
|
|
1901
|
+
margin: 0;
|
|
1902
|
+
font: inherit;
|
|
1903
|
+
color: inherit;
|
|
1904
|
+
background: transparent;
|
|
1905
|
+
border: none;
|
|
1906
|
+
cursor: default;
|
|
1907
|
+
-webkit-user-select: none;
|
|
1908
|
+
-moz-user-select: none;
|
|
1909
|
+
-ms-user-select: none;
|
|
1910
|
+
user-select: none;
|
|
1911
|
+
text-overflow: ellipsis;
|
|
1912
|
+
white-space: nowrap;
|
|
1913
|
+
overflow: hidden;
|
|
1914
|
+
text-decoration: none;
|
|
1915
|
+
}
|
|
1916
|
+
|
|
1917
|
+
/* topdoc
|
|
1918
|
+
name: Notification
|
|
1919
|
+
description: Notification badge
|
|
1920
|
+
markup:
|
|
1921
|
+
<span class="topcoat-notification">1</span>
|
|
1922
|
+
tags:
|
|
1923
|
+
- desktop
|
|
1924
|
+
- light
|
|
1925
|
+
- mobile
|
|
1926
|
+
- notification
|
|
1927
|
+
*/
|
|
1928
|
+
|
|
1929
|
+
.topcoat-notification {
|
|
1930
|
+
padding: 0.15em 0.5em 0.2em;
|
|
1931
|
+
border-radius: 2px;
|
|
1932
|
+
background-color: #ec514e;
|
|
1933
|
+
color: #fff;
|
|
1934
|
+
}
|
|
1935
|
+
|
|
1936
|
+
/**
|
|
1937
|
+
*
|
|
1938
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1939
|
+
*
|
|
1940
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1941
|
+
* you may not use this file except in compliance with the License.
|
|
1942
|
+
* You may obtain a copy of the License at
|
|
1943
|
+
*
|
|
1944
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1945
|
+
*
|
|
1946
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1947
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1948
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1949
|
+
* See the License for the specific language governing permissions and
|
|
1950
|
+
* limitations under the License.
|
|
1951
|
+
*
|
|
1952
|
+
*/
|
|
1953
|
+
|
|
1954
|
+
/**
|
|
1955
|
+
*
|
|
1956
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
1957
|
+
*
|
|
1958
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1959
|
+
* you may not use this file except in compliance with the License.
|
|
1960
|
+
* You may obtain a copy of the License at
|
|
1961
|
+
*
|
|
1962
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1963
|
+
*
|
|
1964
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1965
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1966
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1967
|
+
* See the License for the specific language governing permissions and
|
|
1968
|
+
* limitations under the License.
|
|
1969
|
+
*
|
|
1970
|
+
*/
|
|
1971
|
+
|
|
1972
|
+
input[type="radio"] {
|
|
1973
|
+
position: absolute;
|
|
1974
|
+
overflow: hidden;
|
|
1975
|
+
padding: 0;
|
|
1976
|
+
border: 0;
|
|
1977
|
+
opacity: 0.001;
|
|
1978
|
+
z-index: 1;
|
|
1979
|
+
vertical-align: top;
|
|
1980
|
+
outline: none;
|
|
1981
|
+
}
|
|
1982
|
+
|
|
1983
|
+
.radio-button {
|
|
1984
|
+
-moz-box-sizing: border-box;
|
|
1985
|
+
box-sizing: border-box;
|
|
1986
|
+
background-clip: padding-box;
|
|
1987
|
+
position: relative;
|
|
1988
|
+
display: inline-block;
|
|
1989
|
+
vertical-align: top;
|
|
1990
|
+
cursor: default;
|
|
1991
|
+
-webkit-user-select: none;
|
|
1992
|
+
-moz-user-select: none;
|
|
1993
|
+
-ms-user-select: none;
|
|
1994
|
+
user-select: none;
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1997
|
+
.radio-button__label {
|
|
1998
|
+
position: relative;
|
|
1999
|
+
display: inline-block;
|
|
2000
|
+
vertical-align: top;
|
|
2001
|
+
cursor: default;
|
|
2002
|
+
-webkit-user-select: none;
|
|
2003
|
+
-moz-user-select: none;
|
|
2004
|
+
-ms-user-select: none;
|
|
2005
|
+
user-select: none;
|
|
2006
|
+
}
|
|
2007
|
+
|
|
2008
|
+
.radio-button:before,
|
|
2009
|
+
.radio-button:after {
|
|
2010
|
+
content: '';
|
|
2011
|
+
position: absolute;
|
|
2012
|
+
border-radius: 100%;
|
|
2013
|
+
}
|
|
2014
|
+
|
|
2015
|
+
.radio-button:after {
|
|
2016
|
+
top: 50%;
|
|
2017
|
+
left: 50%;
|
|
2018
|
+
-webkit-transform: translate(-50%, -50%);
|
|
2019
|
+
-ms-transform: translate(-50%, -50%);
|
|
2020
|
+
transform: translate(-50%, -50%);
|
|
2021
|
+
}
|
|
2022
|
+
|
|
2023
|
+
.radio-button:before {
|
|
2024
|
+
-moz-box-sizing: border-box;
|
|
2025
|
+
box-sizing: border-box;
|
|
2026
|
+
background-clip: padding-box;
|
|
2027
|
+
}
|
|
2028
|
+
|
|
2029
|
+
.radio-button--disabled {
|
|
2030
|
+
opacity: 0.3;
|
|
2031
|
+
cursor: default;
|
|
2032
|
+
pointer-events: none;
|
|
2033
|
+
}
|
|
2034
|
+
|
|
2035
|
+
/**
|
|
2036
|
+
*
|
|
2037
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2038
|
+
*
|
|
2039
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2040
|
+
* you may not use this file except in compliance with the License.
|
|
2041
|
+
* You may obtain a copy of the License at
|
|
2042
|
+
*
|
|
2043
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2044
|
+
*
|
|
2045
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2046
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2047
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2048
|
+
* See the License for the specific language governing permissions and
|
|
2049
|
+
* limitations under the License.
|
|
2050
|
+
*
|
|
2051
|
+
*/
|
|
2052
|
+
|
|
2053
|
+
/**
|
|
2054
|
+
*
|
|
2055
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2056
|
+
*
|
|
2057
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2058
|
+
* you may not use this file except in compliance with the License.
|
|
2059
|
+
* You may obtain a copy of the License at
|
|
2060
|
+
*
|
|
2061
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2062
|
+
*
|
|
2063
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2064
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2065
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2066
|
+
* See the License for the specific language governing permissions and
|
|
2067
|
+
* limitations under the License.
|
|
2068
|
+
*
|
|
2069
|
+
*/
|
|
2070
|
+
|
|
2071
|
+
input[type="radio"] {
|
|
2072
|
+
position: absolute;
|
|
2073
|
+
overflow: hidden;
|
|
2074
|
+
padding: 0;
|
|
2075
|
+
border: 0;
|
|
2076
|
+
opacity: 0.001;
|
|
2077
|
+
z-index: 1;
|
|
2078
|
+
vertical-align: top;
|
|
2079
|
+
outline: none;
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2082
|
+
.radio-button,
|
|
2083
|
+
.topcoat-radio-button__checkmark {
|
|
2084
|
+
-moz-box-sizing: border-box;
|
|
2085
|
+
box-sizing: border-box;
|
|
2086
|
+
background-clip: padding-box;
|
|
2087
|
+
position: relative;
|
|
2088
|
+
display: inline-block;
|
|
2089
|
+
vertical-align: top;
|
|
2090
|
+
cursor: default;
|
|
2091
|
+
-webkit-user-select: none;
|
|
2092
|
+
-moz-user-select: none;
|
|
2093
|
+
-ms-user-select: none;
|
|
2094
|
+
user-select: none;
|
|
2095
|
+
}
|
|
2096
|
+
|
|
2097
|
+
.radio-button__label,
|
|
2098
|
+
.topcoat-radio-button {
|
|
2099
|
+
position: relative;
|
|
2100
|
+
display: inline-block;
|
|
2101
|
+
vertical-align: top;
|
|
2102
|
+
cursor: default;
|
|
2103
|
+
-webkit-user-select: none;
|
|
2104
|
+
-moz-user-select: none;
|
|
2105
|
+
-ms-user-select: none;
|
|
2106
|
+
user-select: none;
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
.radio-button:before,
|
|
2110
|
+
.radio-button:after,
|
|
2111
|
+
.topcoat-radio-button__checkmark:before,
|
|
2112
|
+
.topcoat-radio-button__checkmark:after {
|
|
2113
|
+
content: '';
|
|
2114
|
+
position: absolute;
|
|
2115
|
+
border-radius: 100%;
|
|
2116
|
+
}
|
|
2117
|
+
|
|
2118
|
+
.radio-button:after,
|
|
2119
|
+
.topcoat-radio-button__checkmark:after {
|
|
2120
|
+
top: 50%;
|
|
2121
|
+
left: 50%;
|
|
2122
|
+
-webkit-transform: translate(-50%, -50%);
|
|
2123
|
+
-ms-transform: translate(-50%, -50%);
|
|
2124
|
+
transform: translate(-50%, -50%);
|
|
2125
|
+
}
|
|
2126
|
+
|
|
2127
|
+
.radio-button:before,
|
|
2128
|
+
.topcoat-radio-button__checkmark:before {
|
|
2129
|
+
-moz-box-sizing: border-box;
|
|
2130
|
+
box-sizing: border-box;
|
|
2131
|
+
background-clip: padding-box;
|
|
2132
|
+
}
|
|
2133
|
+
|
|
2134
|
+
.radio-button--disabled,
|
|
2135
|
+
input[type="radio"]:disabled + .topcoat-radio-button__checkmark {
|
|
2136
|
+
opacity: 0.3;
|
|
2137
|
+
cursor: default;
|
|
2138
|
+
pointer-events: none;
|
|
2139
|
+
}
|
|
2140
|
+
|
|
2141
|
+
/* topdoc
|
|
2142
|
+
name: Radio Button
|
|
2143
|
+
description: A button that can play music, but usually just plays ads.
|
|
2144
|
+
modifiers:
|
|
2145
|
+
markup:
|
|
2146
|
+
<!-- NO LABEL -->
|
|
2147
|
+
<label class="topcoat-radio-button">
|
|
2148
|
+
<input type="radio" name="topcoat">
|
|
2149
|
+
<div class="topcoat-radio-button__checkmark"></div>
|
|
2150
|
+
</label>
|
|
2151
|
+
<br>
|
|
2152
|
+
<br>
|
|
2153
|
+
<!-- LEFT LABEL -->
|
|
2154
|
+
<label class="topcoat-radio-button">
|
|
2155
|
+
Left label
|
|
2156
|
+
<input type="radio" name="topcoat">
|
|
2157
|
+
<div class="topcoat-radio-button__checkmark"></div>
|
|
2158
|
+
</label>
|
|
2159
|
+
<br>
|
|
2160
|
+
<br>
|
|
2161
|
+
<!-- RIGHT LABEL -->
|
|
2162
|
+
<label class="topcoat-radio-button">
|
|
2163
|
+
<input type="radio" name="topcoat">
|
|
2164
|
+
<div class="topcoat-radio-button__checkmark"></div>
|
|
2165
|
+
Right label
|
|
2166
|
+
</label>
|
|
2167
|
+
<br>
|
|
2168
|
+
<br>
|
|
2169
|
+
<!-- DISABLED -->
|
|
2170
|
+
<label class="topcoat-radio-button">
|
|
2171
|
+
<input type="radio" name="topcoat" Disabled>
|
|
2172
|
+
<div class="topcoat-radio-button__checkmark"></div>
|
|
2173
|
+
Disabled
|
|
2174
|
+
</label>
|
|
2175
|
+
examples:
|
|
2176
|
+
Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj
|
|
2177
|
+
tags:
|
|
2178
|
+
- desktop
|
|
2179
|
+
- light
|
|
2180
|
+
- mobile
|
|
2181
|
+
- Radio
|
|
2182
|
+
*/
|
|
2183
|
+
|
|
2184
|
+
input[type="radio"] {
|
|
2185
|
+
height: 1.875rem;
|
|
2186
|
+
width: 1.875rem;
|
|
2187
|
+
margin-top: 0;
|
|
2188
|
+
margin-right: -1.875rem;
|
|
2189
|
+
margin-bottom: -1.875rem;
|
|
2190
|
+
margin-left: 0;
|
|
2191
|
+
}
|
|
2192
|
+
|
|
2193
|
+
input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
|
|
2194
|
+
opacity: 1;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
.topcoat-radio-button {
|
|
2198
|
+
color: #454545;
|
|
2199
|
+
line-height: 1.875rem;
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
.topcoat-radio-button__checkmark:before {
|
|
2203
|
+
width: 1.875rem;
|
|
2204
|
+
height: 1.875rem;
|
|
2205
|
+
background: #e5e9e8;
|
|
2206
|
+
border: 1px solid #a5a8a8;
|
|
2207
|
+
box-shadow: inset 0 1px #fff;
|
|
2208
|
+
}
|
|
2209
|
+
|
|
2210
|
+
.topcoat-radio-button__checkmark {
|
|
2211
|
+
position: relative;
|
|
2212
|
+
width: 1.875rem;
|
|
2213
|
+
height: 1.875rem;
|
|
2214
|
+
}
|
|
2215
|
+
|
|
2216
|
+
.topcoat-radio-button__checkmark:after {
|
|
2217
|
+
opacity: 0;
|
|
2218
|
+
width: 0.875rem;
|
|
2219
|
+
height: 0.875rem;
|
|
2220
|
+
background: #666;
|
|
2221
|
+
border: 1px solid rgba(0,0,0,0.1);
|
|
2222
|
+
box-shadow: 0 1px rgba(255,255,255,0.5);
|
|
2223
|
+
-webkit-transform: none;
|
|
2224
|
+
-ms-transform: none;
|
|
2225
|
+
transform: none;
|
|
2226
|
+
top: 7px;
|
|
2227
|
+
left: 7px;
|
|
2228
|
+
}
|
|
2229
|
+
|
|
2230
|
+
input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
|
|
2231
|
+
border: 1px solid #0940fd;
|
|
2232
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
/*
|
|
2236
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
2237
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2238
|
+
you may not use this file except in compliance with the License.
|
|
2239
|
+
You may obtain a copy of the License at
|
|
2240
|
+
|
|
2241
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2242
|
+
|
|
2243
|
+
Unless required by applicable law or agreed to in writing, software
|
|
2244
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
2245
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2246
|
+
See the License for the specific language governing permissions and
|
|
2247
|
+
limitations under the License.
|
|
2248
|
+
*/
|
|
2249
|
+
|
|
2250
|
+
/*
|
|
2251
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
2252
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2253
|
+
you may not use this file except in compliance with the License.
|
|
2254
|
+
You may obtain a copy of the License at
|
|
2255
|
+
|
|
2256
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2257
|
+
|
|
2258
|
+
Unless required by applicable law or agreed to in writing, software
|
|
2259
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
2260
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2261
|
+
See the License for the specific language governing permissions and
|
|
2262
|
+
limitations under the License.
|
|
2263
|
+
*/
|
|
2264
|
+
|
|
2265
|
+
.range {
|
|
2266
|
+
padding: 0;
|
|
2267
|
+
margin: 0;
|
|
2268
|
+
font: inherit;
|
|
2269
|
+
color: inherit;
|
|
2270
|
+
background: transparent;
|
|
2271
|
+
border: none;
|
|
2272
|
+
-moz-box-sizing: border-box;
|
|
2273
|
+
box-sizing: border-box;
|
|
2274
|
+
background-clip: padding-box;
|
|
2275
|
+
vertical-align: top;
|
|
2276
|
+
outline: none;
|
|
2277
|
+
-webkit-appearance: none;
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
.range__thumb {
|
|
2281
|
+
cursor: pointer;
|
|
2282
|
+
}
|
|
2283
|
+
|
|
2284
|
+
.range__thumb--webkit {
|
|
2285
|
+
cursor: pointer;
|
|
2286
|
+
-webkit-appearance: none;
|
|
2287
|
+
}
|
|
2288
|
+
|
|
2289
|
+
.range:disabled {
|
|
2290
|
+
opacity: 0.3;
|
|
2291
|
+
cursor: default;
|
|
2292
|
+
pointer-events: none;
|
|
2293
|
+
}
|
|
2294
|
+
|
|
2295
|
+
/*
|
|
2296
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
2297
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2298
|
+
you may not use this file except in compliance with the License.
|
|
2299
|
+
You may obtain a copy of the License at
|
|
2300
|
+
|
|
2301
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2302
|
+
|
|
2303
|
+
Unless required by applicable law or agreed to in writing, software
|
|
2304
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
2305
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2306
|
+
See the License for the specific language governing permissions and
|
|
2307
|
+
limitations under the License.
|
|
2308
|
+
*/
|
|
2309
|
+
|
|
2310
|
+
/*
|
|
2311
|
+
Copyright 2012 Adobe Systems Inc.;
|
|
2312
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
2313
|
+
you may not use this file except in compliance with the License.
|
|
2314
|
+
You may obtain a copy of the License at
|
|
2315
|
+
|
|
2316
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
2317
|
+
|
|
2318
|
+
Unless required by applicable law or agreed to in writing, software
|
|
2319
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
2320
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2321
|
+
See the License for the specific language governing permissions and
|
|
2322
|
+
limitations under the License.
|
|
2323
|
+
*/
|
|
2324
|
+
|
|
2325
|
+
.range,
|
|
2326
|
+
.topcoat-range {
|
|
2327
|
+
padding: 0;
|
|
2328
|
+
margin: 0;
|
|
2329
|
+
font: inherit;
|
|
2330
|
+
color: inherit;
|
|
2331
|
+
background: transparent;
|
|
2332
|
+
border: none;
|
|
2333
|
+
-moz-box-sizing: border-box;
|
|
2334
|
+
box-sizing: border-box;
|
|
2335
|
+
background-clip: padding-box;
|
|
2336
|
+
vertical-align: top;
|
|
2337
|
+
outline: none;
|
|
2338
|
+
-webkit-appearance: none;
|
|
2339
|
+
}
|
|
2340
|
+
|
|
2341
|
+
.range__thumb,
|
|
2342
|
+
.topcoat-range::-moz-range-thumb {
|
|
2343
|
+
cursor: pointer;
|
|
2344
|
+
}
|
|
2345
|
+
|
|
2346
|
+
.range__thumb--webkit,
|
|
2347
|
+
.topcoat-range::-webkit-slider-thumb {
|
|
2348
|
+
cursor: pointer;
|
|
2349
|
+
-webkit-appearance: none;
|
|
2350
|
+
}
|
|
2351
|
+
|
|
2352
|
+
.range:disabled,
|
|
2353
|
+
.topcoat-range:disabled {
|
|
2354
|
+
opacity: 0.3;
|
|
2355
|
+
cursor: default;
|
|
2356
|
+
pointer-events: none;
|
|
2357
|
+
}
|
|
2358
|
+
|
|
2359
|
+
/* topdoc
|
|
2360
|
+
name: Range
|
|
2361
|
+
description: Range input
|
|
2362
|
+
modifiers:
|
|
2363
|
+
:active: Active state
|
|
2364
|
+
:disabled: Disabled state
|
|
2365
|
+
:hover: Hover state
|
|
2366
|
+
:focus: Focused
|
|
2367
|
+
markup:
|
|
2368
|
+
<input type="range" class="topcoat-range">
|
|
2369
|
+
<input type="range" class="topcoat-range" disabled>
|
|
2370
|
+
examples:
|
|
2371
|
+
mobile range: http://codepen.io/Topcoat/pen/BskEn
|
|
2372
|
+
tags:
|
|
2373
|
+
- desktop
|
|
2374
|
+
- mobile
|
|
2375
|
+
- range
|
|
2376
|
+
*/
|
|
2377
|
+
|
|
2378
|
+
.topcoat-range {
|
|
2379
|
+
border-radius: 6px;
|
|
2380
|
+
border: 1px solid #a5a8a8;
|
|
2381
|
+
background-color: #d3d7d7;
|
|
2382
|
+
height: 1rem;
|
|
2383
|
+
border-radius: 30px;
|
|
2384
|
+
}
|
|
2385
|
+
|
|
2386
|
+
.topcoat-range::-moz-range-track {
|
|
2387
|
+
border-radius: 6px;
|
|
2388
|
+
border: 1px solid #a5a8a8;
|
|
2389
|
+
background-color: #d3d7d7;
|
|
2390
|
+
height: 1rem;
|
|
2391
|
+
border-radius: 30px;
|
|
2392
|
+
}
|
|
2393
|
+
|
|
2394
|
+
.topcoat-range::-webkit-slider-thumb {
|
|
2395
|
+
height: 3rem;
|
|
2396
|
+
width: 2rem;
|
|
2397
|
+
background-color: #e5e9e8;
|
|
2398
|
+
border: 1px solid #a5a8a8;
|
|
2399
|
+
border-radius: 6px;
|
|
2400
|
+
box-shadow: inset 0 1px #fff;
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
.topcoat-range::-moz-range-thumb {
|
|
2404
|
+
height: 3rem;
|
|
2405
|
+
width: 2rem;
|
|
2406
|
+
background-color: #e5e9e8;
|
|
2407
|
+
border: 1px solid #a5a8a8;
|
|
2408
|
+
border-radius: 6px;
|
|
2409
|
+
box-shadow: inset 0 1px #fff;
|
|
2410
|
+
}
|
|
2411
|
+
|
|
2412
|
+
.topcoat-range:focus::-webkit-slider-thumb {
|
|
2413
|
+
border: 1px solid #0940fd;
|
|
2414
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2415
|
+
}
|
|
2416
|
+
|
|
2417
|
+
.topcoat-range:focus::-moz-range-thumb {
|
|
2418
|
+
border: 1px solid #0940fd;
|
|
2419
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2420
|
+
}
|
|
2421
|
+
|
|
2422
|
+
/**
|
|
2423
|
+
*
|
|
2424
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2425
|
+
*
|
|
2426
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2427
|
+
* you may not use this file except in compliance with the License.
|
|
2428
|
+
* You may obtain a copy of the License at
|
|
2429
|
+
*
|
|
2430
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2431
|
+
*
|
|
2432
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2433
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2434
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2435
|
+
* See the License for the specific language governing permissions and
|
|
2436
|
+
* limitations under the License.
|
|
2437
|
+
*
|
|
2438
|
+
*/
|
|
2439
|
+
|
|
2440
|
+
/**
|
|
2441
|
+
*
|
|
2442
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2443
|
+
*
|
|
2444
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2445
|
+
* you may not use this file except in compliance with the License.
|
|
2446
|
+
* You may obtain a copy of the License at
|
|
2447
|
+
*
|
|
2448
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2449
|
+
*
|
|
2450
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2451
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2452
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2453
|
+
* See the License for the specific language governing permissions and
|
|
2454
|
+
* limitations under the License.
|
|
2455
|
+
*
|
|
2456
|
+
*/
|
|
2457
|
+
|
|
2458
|
+
.search-input {
|
|
2459
|
+
padding: 0;
|
|
2460
|
+
margin: 0;
|
|
2461
|
+
font: inherit;
|
|
2462
|
+
color: inherit;
|
|
2463
|
+
background: transparent;
|
|
2464
|
+
border: none;
|
|
2465
|
+
-moz-box-sizing: border-box;
|
|
2466
|
+
box-sizing: border-box;
|
|
2467
|
+
background-clip: padding-box;
|
|
2468
|
+
vertical-align: top;
|
|
2469
|
+
outline: none;
|
|
2470
|
+
-webkit-appearance: none;
|
|
2471
|
+
}
|
|
2472
|
+
|
|
2473
|
+
input[type="search"]::-webkit-search-cancel-button {
|
|
2474
|
+
-webkit-appearance: none;
|
|
2475
|
+
}
|
|
2476
|
+
|
|
2477
|
+
.search-input:disabled {
|
|
2478
|
+
opacity: 0.3;
|
|
2479
|
+
cursor: default;
|
|
2480
|
+
pointer-events: none;
|
|
2481
|
+
}
|
|
2482
|
+
|
|
2483
|
+
/**
|
|
2484
|
+
*
|
|
2485
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2486
|
+
*
|
|
2487
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2488
|
+
* you may not use this file except in compliance with the License.
|
|
2489
|
+
* You may obtain a copy of the License at
|
|
2490
|
+
*
|
|
2491
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2492
|
+
*
|
|
2493
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2494
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2495
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2496
|
+
* See the License for the specific language governing permissions and
|
|
2497
|
+
* limitations under the License.
|
|
2498
|
+
*
|
|
2499
|
+
*/
|
|
2500
|
+
|
|
2501
|
+
/**
|
|
2502
|
+
*
|
|
2503
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2504
|
+
*
|
|
2505
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2506
|
+
* you may not use this file except in compliance with the License.
|
|
2507
|
+
* You may obtain a copy of the License at
|
|
2508
|
+
*
|
|
2509
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2510
|
+
*
|
|
2511
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2512
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2513
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2514
|
+
* See the License for the specific language governing permissions and
|
|
2515
|
+
* limitations under the License.
|
|
2516
|
+
*
|
|
2517
|
+
*/
|
|
2518
|
+
|
|
2519
|
+
.search-input,
|
|
2520
|
+
.topcoat-search-input,
|
|
2521
|
+
.topcoat-search-input--large {
|
|
2522
|
+
padding: 0;
|
|
2523
|
+
margin: 0;
|
|
2524
|
+
font: inherit;
|
|
2525
|
+
color: inherit;
|
|
2526
|
+
background: transparent;
|
|
2527
|
+
border: none;
|
|
2528
|
+
-moz-box-sizing: border-box;
|
|
2529
|
+
box-sizing: border-box;
|
|
2530
|
+
background-clip: padding-box;
|
|
2531
|
+
vertical-align: top;
|
|
2532
|
+
outline: none;
|
|
2533
|
+
-webkit-appearance: none;
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
input[type="search"]::-webkit-search-cancel-button {
|
|
2537
|
+
-webkit-appearance: none;
|
|
2538
|
+
}
|
|
2539
|
+
|
|
2540
|
+
.search-input:disabled,
|
|
2541
|
+
.topcoat-search-input:disabled,
|
|
2542
|
+
.topcoat-search-input--large:disabled {
|
|
2543
|
+
opacity: 0.3;
|
|
2544
|
+
cursor: default;
|
|
2545
|
+
pointer-events: none;
|
|
2546
|
+
}
|
|
2547
|
+
|
|
2548
|
+
/* topdoc
|
|
2549
|
+
name: Search Input
|
|
2550
|
+
description: A text input designed for searching.
|
|
2551
|
+
modifiers:
|
|
2552
|
+
:disabled: Disabled state
|
|
2553
|
+
markup:
|
|
2554
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input">
|
|
2555
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>
|
|
2556
|
+
tags:
|
|
2557
|
+
- desktop
|
|
2558
|
+
- light
|
|
2559
|
+
- mobile
|
|
2560
|
+
- text
|
|
2561
|
+
- input
|
|
2562
|
+
- search
|
|
2563
|
+
- form
|
|
2564
|
+
*/
|
|
2565
|
+
|
|
2566
|
+
.topcoat-search-input,
|
|
2567
|
+
.topcoat-search-input--large {
|
|
2568
|
+
line-height: 3rem;
|
|
2569
|
+
font-size: 16px;
|
|
2570
|
+
border: 1px solid #a5a8a8;
|
|
2571
|
+
background-color: #d3d7d7;
|
|
2572
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
2573
|
+
color: #454545;
|
|
2574
|
+
padding: 0 0 0 2rem;
|
|
2575
|
+
border-radius: 30px;
|
|
2576
|
+
background-image: image-url("topcoat/search.svg");
|
|
2577
|
+
background-position: 1em center;
|
|
2578
|
+
background-repeat: no-repeat;
|
|
2579
|
+
background-size: 16px;
|
|
2580
|
+
}
|
|
2581
|
+
|
|
2582
|
+
.topcoat-search-input:focus,
|
|
2583
|
+
.topcoat-search-input--large:focus {
|
|
2584
|
+
background-image: image-url("topcoat/search_dark.svg");
|
|
2585
|
+
background-color: #edf1f1;
|
|
2586
|
+
color: #000;
|
|
2587
|
+
border: 1px solid #0940fd;
|
|
2588
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2589
|
+
}
|
|
2590
|
+
|
|
2591
|
+
.topcoat-search-input::-webkit-search-cancel-button,
|
|
2592
|
+
.topcoat-search-input::-webkit-search-decoration,
|
|
2593
|
+
.topcoat-search-input--large::-webkit-search-cancel-button,
|
|
2594
|
+
.topcoat-search-input--large::-webkit-search-decoration {
|
|
2595
|
+
margin-right: 5px;
|
|
2596
|
+
}
|
|
2597
|
+
|
|
2598
|
+
.topcoat-search-input:focus::-webkit-input-placeholder,
|
|
2599
|
+
.topcoat-search-input:focus::-webkit-input-placeholder {
|
|
2600
|
+
color: #c6c8c8;
|
|
2601
|
+
}
|
|
2602
|
+
|
|
2603
|
+
.topcoat-search-input:disabled::-webkit-input-placeholder {
|
|
2604
|
+
color: #000;
|
|
2605
|
+
}
|
|
2606
|
+
|
|
2607
|
+
.topcoat-search-input:disabled::-moz-placeholder {
|
|
2608
|
+
color: #000;
|
|
2609
|
+
}
|
|
2610
|
+
|
|
2611
|
+
.topcoat-search-input:disabled:-ms-input-placeholder {
|
|
2612
|
+
color: #000;
|
|
2613
|
+
}
|
|
2614
|
+
|
|
2615
|
+
/* topdoc
|
|
2616
|
+
name: Large Search Input
|
|
2617
|
+
description: A large text input designed for searching.
|
|
2618
|
+
modifiers:
|
|
2619
|
+
:disabled: Disabled state
|
|
2620
|
+
markup:
|
|
2621
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input--large">
|
|
2622
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>
|
|
2623
|
+
tags:
|
|
2624
|
+
- desktop
|
|
2625
|
+
- light
|
|
2626
|
+
- mobile
|
|
2627
|
+
- text
|
|
2628
|
+
- input
|
|
2629
|
+
- search
|
|
2630
|
+
- form
|
|
2631
|
+
- large
|
|
2632
|
+
*/
|
|
2633
|
+
|
|
2634
|
+
.topcoat-search-input--large {
|
|
2635
|
+
line-height: 4.375rem;
|
|
2636
|
+
font-size: 1.3rem;
|
|
2637
|
+
font-weight: 200;
|
|
2638
|
+
padding: 0 0 0 2.9rem;
|
|
2639
|
+
border-radius: 40px;
|
|
2640
|
+
background-position: 1.2em center;
|
|
2641
|
+
background-size: 1.3rem;
|
|
2642
|
+
}
|
|
2643
|
+
|
|
2644
|
+
.topcoat-search-input--large:disabled {
|
|
2645
|
+
color: #000;
|
|
2646
|
+
}
|
|
2647
|
+
|
|
2648
|
+
.topcoat-search-input--large:disabled::-webkit-input-placeholder {
|
|
2649
|
+
color: #000;
|
|
2650
|
+
}
|
|
2651
|
+
|
|
2652
|
+
.topcoat-search-input--large:disabled::-moz-placeholder {
|
|
2653
|
+
color: #000;
|
|
2654
|
+
}
|
|
2655
|
+
|
|
2656
|
+
.topcoat-search-input--large:disabled:-ms-input-placeholder {
|
|
2657
|
+
color: #000;
|
|
2658
|
+
}
|
|
2659
|
+
|
|
2660
|
+
/**
|
|
2661
|
+
*
|
|
2662
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2663
|
+
*
|
|
2664
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2665
|
+
* you may not use this file except in compliance with the License.
|
|
2666
|
+
* You may obtain a copy of the License at
|
|
2667
|
+
*
|
|
2668
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2669
|
+
*
|
|
2670
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2671
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2672
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2673
|
+
* See the License for the specific language governing permissions and
|
|
2674
|
+
* limitations under the License.
|
|
2675
|
+
*
|
|
2676
|
+
*/
|
|
2677
|
+
|
|
2678
|
+
/**
|
|
2679
|
+
*
|
|
2680
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2681
|
+
*
|
|
2682
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2683
|
+
* you may not use this file except in compliance with the License.
|
|
2684
|
+
* You may obtain a copy of the License at
|
|
2685
|
+
*
|
|
2686
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2687
|
+
*
|
|
2688
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2689
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2690
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2691
|
+
* See the License for the specific language governing permissions and
|
|
2692
|
+
* limitations under the License.
|
|
2693
|
+
*
|
|
2694
|
+
*/
|
|
2695
|
+
|
|
2696
|
+
.switch {
|
|
2697
|
+
position: relative;
|
|
2698
|
+
display: inline-block;
|
|
2699
|
+
vertical-align: top;
|
|
2700
|
+
-moz-box-sizing: border-box;
|
|
2701
|
+
box-sizing: border-box;
|
|
2702
|
+
background-clip: padding-box;
|
|
2703
|
+
}
|
|
2704
|
+
|
|
2705
|
+
.switch__input {
|
|
2706
|
+
position: absolute;
|
|
2707
|
+
overflow: hidden;
|
|
2708
|
+
padding: 0;
|
|
2709
|
+
border: 0;
|
|
2710
|
+
opacity: 0.001;
|
|
2711
|
+
z-index: 1;
|
|
2712
|
+
vertical-align: top;
|
|
2713
|
+
outline: none;
|
|
2714
|
+
}
|
|
2715
|
+
|
|
2716
|
+
.switch__toggle {
|
|
2717
|
+
position: relative;
|
|
2718
|
+
display: inline-block;
|
|
2719
|
+
vertical-align: top;
|
|
2720
|
+
-moz-box-sizing: border-box;
|
|
2721
|
+
box-sizing: border-box;
|
|
2722
|
+
background-clip: padding-box;
|
|
2723
|
+
padding: 0;
|
|
2724
|
+
margin: 0;
|
|
2725
|
+
font: inherit;
|
|
2726
|
+
color: inherit;
|
|
2727
|
+
background: transparent;
|
|
2728
|
+
border: none;
|
|
2729
|
+
cursor: default;
|
|
2730
|
+
-webkit-user-select: none;
|
|
2731
|
+
-moz-user-select: none;
|
|
2732
|
+
-ms-user-select: none;
|
|
2733
|
+
user-select: none;
|
|
2734
|
+
}
|
|
2735
|
+
|
|
2736
|
+
.switch__toggle:before,
|
|
2737
|
+
.switch__toggle:after {
|
|
2738
|
+
content: '';
|
|
2739
|
+
position: absolute;
|
|
2740
|
+
z-index: -1;
|
|
2741
|
+
-moz-box-sizing: border-box;
|
|
2742
|
+
box-sizing: border-box;
|
|
2743
|
+
background-clip: padding-box;
|
|
2744
|
+
}
|
|
2745
|
+
|
|
2746
|
+
.switch--disabled {
|
|
2747
|
+
opacity: 0.3;
|
|
2748
|
+
cursor: default;
|
|
2749
|
+
pointer-events: none;
|
|
2750
|
+
}
|
|
2751
|
+
|
|
2752
|
+
/**
|
|
2753
|
+
*
|
|
2754
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2755
|
+
*
|
|
2756
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2757
|
+
* you may not use this file except in compliance with the License.
|
|
2758
|
+
* You may obtain a copy of the License at
|
|
2759
|
+
*
|
|
2760
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2761
|
+
*
|
|
2762
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2763
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2764
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2765
|
+
* See the License for the specific language governing permissions and
|
|
2766
|
+
* limitations under the License.
|
|
2767
|
+
*
|
|
2768
|
+
*/
|
|
2769
|
+
|
|
2770
|
+
/**
|
|
2771
|
+
*
|
|
2772
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2773
|
+
*
|
|
2774
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2775
|
+
* you may not use this file except in compliance with the License.
|
|
2776
|
+
* You may obtain a copy of the License at
|
|
2777
|
+
*
|
|
2778
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2779
|
+
*
|
|
2780
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2781
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2782
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2783
|
+
* See the License for the specific language governing permissions and
|
|
2784
|
+
* limitations under the License.
|
|
2785
|
+
*
|
|
2786
|
+
*/
|
|
2787
|
+
|
|
2788
|
+
.switch,
|
|
2789
|
+
.topcoat-switch {
|
|
2790
|
+
position: relative;
|
|
2791
|
+
display: inline-block;
|
|
2792
|
+
vertical-align: top;
|
|
2793
|
+
-moz-box-sizing: border-box;
|
|
2794
|
+
box-sizing: border-box;
|
|
2795
|
+
background-clip: padding-box;
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
.switch__input,
|
|
2799
|
+
.topcoat-switch__input {
|
|
2800
|
+
position: absolute;
|
|
2801
|
+
overflow: hidden;
|
|
2802
|
+
padding: 0;
|
|
2803
|
+
border: 0;
|
|
2804
|
+
opacity: 0.001;
|
|
2805
|
+
z-index: 1;
|
|
2806
|
+
vertical-align: top;
|
|
2807
|
+
outline: none;
|
|
2808
|
+
}
|
|
2809
|
+
|
|
2810
|
+
.switch__toggle,
|
|
2811
|
+
.topcoat-switch__toggle {
|
|
2812
|
+
position: relative;
|
|
2813
|
+
display: inline-block;
|
|
2814
|
+
vertical-align: top;
|
|
2815
|
+
-moz-box-sizing: border-box;
|
|
2816
|
+
box-sizing: border-box;
|
|
2817
|
+
background-clip: padding-box;
|
|
2818
|
+
padding: 0;
|
|
2819
|
+
margin: 0;
|
|
2820
|
+
font: inherit;
|
|
2821
|
+
color: inherit;
|
|
2822
|
+
background: transparent;
|
|
2823
|
+
border: none;
|
|
2824
|
+
cursor: default;
|
|
2825
|
+
-webkit-user-select: none;
|
|
2826
|
+
-moz-user-select: none;
|
|
2827
|
+
-ms-user-select: none;
|
|
2828
|
+
user-select: none;
|
|
2829
|
+
}
|
|
2830
|
+
|
|
2831
|
+
.switch__toggle:before,
|
|
2832
|
+
.switch__toggle:after,
|
|
2833
|
+
.topcoat-switch__toggle:before,
|
|
2834
|
+
.topcoat-switch__toggle:after {
|
|
2835
|
+
content: '';
|
|
2836
|
+
position: absolute;
|
|
2837
|
+
z-index: -1;
|
|
2838
|
+
-moz-box-sizing: border-box;
|
|
2839
|
+
box-sizing: border-box;
|
|
2840
|
+
background-clip: padding-box;
|
|
2841
|
+
}
|
|
2842
|
+
|
|
2843
|
+
.switch--disabled,
|
|
2844
|
+
.topcoat-switch__input:disabled + .topcoat-switch__toggle {
|
|
2845
|
+
opacity: 0.3;
|
|
2846
|
+
cursor: default;
|
|
2847
|
+
pointer-events: none;
|
|
2848
|
+
}
|
|
2849
|
+
|
|
2850
|
+
/* topdoc
|
|
2851
|
+
name: Switch
|
|
2852
|
+
description: Default skin for Topcoat switch
|
|
2853
|
+
modifiers:
|
|
2854
|
+
:focus: Focus state
|
|
2855
|
+
:disabled: Disabled state
|
|
2856
|
+
markup:
|
|
2857
|
+
<label class="topcoat-switch">
|
|
2858
|
+
<input type="checkbox" class="topcoat-switch__input">
|
|
2859
|
+
<div class="topcoat-switch__toggle"></div>
|
|
2860
|
+
</label>
|
|
2861
|
+
<br>
|
|
2862
|
+
<br>
|
|
2863
|
+
<label class="topcoat-switch">
|
|
2864
|
+
<input type="checkbox" class="topcoat-switch__input" checked>
|
|
2865
|
+
<div class="topcoat-switch__toggle"></div>
|
|
2866
|
+
</label>
|
|
2867
|
+
<br>
|
|
2868
|
+
<br>
|
|
2869
|
+
<label class="topcoat-switch">
|
|
2870
|
+
<input type="checkbox" class="topcoat-switch__input" disabled>
|
|
2871
|
+
<div class="topcoat-switch__toggle"></div>
|
|
2872
|
+
</label>
|
|
2873
|
+
examples:
|
|
2874
|
+
mobile switch: http://codepen.io/Topcoat/pen/upxds
|
|
2875
|
+
tags:
|
|
2876
|
+
- desktop
|
|
2877
|
+
- light
|
|
2878
|
+
- mobile
|
|
2879
|
+
- switch
|
|
2880
|
+
*/
|
|
2881
|
+
|
|
2882
|
+
.topcoat-switch {
|
|
2883
|
+
font-size: 16px;
|
|
2884
|
+
padding: 0 1.25rem;
|
|
2885
|
+
border-radius: 6px;
|
|
2886
|
+
border: 1px solid #a5a8a8;
|
|
2887
|
+
overflow: hidden;
|
|
2888
|
+
width: 6rem;
|
|
2889
|
+
}
|
|
2890
|
+
|
|
2891
|
+
.topcoat-switch__toggle:before,
|
|
2892
|
+
.topcoat-switch__toggle:after {
|
|
2893
|
+
top: -1px;
|
|
2894
|
+
width: 5rem;
|
|
2895
|
+
}
|
|
2896
|
+
|
|
2897
|
+
.topcoat-switch__toggle:before {
|
|
2898
|
+
content: 'ON';
|
|
2899
|
+
color: #0083e8;
|
|
2900
|
+
background-color: #e0f0fa;
|
|
2901
|
+
right: 1rem;
|
|
2902
|
+
padding-left: 1.5rem;
|
|
2903
|
+
}
|
|
2904
|
+
|
|
2905
|
+
.topcoat-switch__toggle {
|
|
2906
|
+
line-height: 3rem;
|
|
2907
|
+
height: 3rem;
|
|
2908
|
+
width: 2rem;
|
|
2909
|
+
border-radius: 6px;
|
|
2910
|
+
color: #454545;
|
|
2911
|
+
text-shadow: 0 1px #fff;
|
|
2912
|
+
background-color: #e5e9e8;
|
|
2913
|
+
border: 1px solid #a5a8a8;
|
|
2914
|
+
margin-left: -1.3rem;
|
|
2915
|
+
margin-bottom: -1px;
|
|
2916
|
+
margin-top: -1px;
|
|
2917
|
+
box-shadow: inset 0 1px #fff;
|
|
2918
|
+
-webkit-transition: margin-left 0.05s ease-in-out;
|
|
2919
|
+
transition: margin-left 0.05s ease-in-out;
|
|
2920
|
+
}
|
|
2921
|
+
|
|
2922
|
+
.topcoat-switch__toggle:after {
|
|
2923
|
+
content: 'OFF';
|
|
2924
|
+
background-color: #d3d7d7;
|
|
2925
|
+
left: 1rem;
|
|
2926
|
+
padding-left: 2rem;
|
|
2927
|
+
}
|
|
2928
|
+
|
|
2929
|
+
.topcoat-switch__input:checked + .topcoat-switch__toggle {
|
|
2930
|
+
margin-left: 2.7rem;
|
|
2931
|
+
}
|
|
2932
|
+
|
|
2933
|
+
.topcoat-switch__input:focus + .topcoat-switch__toggle {
|
|
2934
|
+
border: 1px solid #0940fd;
|
|
2935
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
2936
|
+
}
|
|
2937
|
+
|
|
2938
|
+
.topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
|
|
2939
|
+
.topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
|
|
2940
|
+
background: transparent;
|
|
2941
|
+
}
|
|
2942
|
+
|
|
2943
|
+
/**
|
|
2944
|
+
*
|
|
2945
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2946
|
+
*
|
|
2947
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2948
|
+
* you may not use this file except in compliance with the License.
|
|
2949
|
+
* You may obtain a copy of the License at
|
|
2950
|
+
*
|
|
2951
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2952
|
+
*
|
|
2953
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2954
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2955
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2956
|
+
* See the License for the specific language governing permissions and
|
|
2957
|
+
* limitations under the License.
|
|
2958
|
+
*
|
|
2959
|
+
*/
|
|
2960
|
+
|
|
2961
|
+
/**
|
|
2962
|
+
*
|
|
2963
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
2964
|
+
*
|
|
2965
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2966
|
+
* you may not use this file except in compliance with the License.
|
|
2967
|
+
* You may obtain a copy of the License at
|
|
2968
|
+
*
|
|
2969
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2970
|
+
*
|
|
2971
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2972
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2973
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2974
|
+
* See the License for the specific language governing permissions and
|
|
2975
|
+
* limitations under the License.
|
|
2976
|
+
*
|
|
2977
|
+
*/
|
|
2978
|
+
|
|
2979
|
+
.button,
|
|
2980
|
+
.topcoat-tab-bar__button {
|
|
2981
|
+
position: relative;
|
|
2982
|
+
display: inline-block;
|
|
2983
|
+
vertical-align: top;
|
|
2984
|
+
-moz-box-sizing: border-box;
|
|
2985
|
+
box-sizing: border-box;
|
|
2986
|
+
background-clip: padding-box;
|
|
2987
|
+
padding: 0;
|
|
2988
|
+
margin: 0;
|
|
2989
|
+
font: inherit;
|
|
2990
|
+
color: inherit;
|
|
2991
|
+
background: transparent;
|
|
2992
|
+
border: none;
|
|
2993
|
+
cursor: default;
|
|
2994
|
+
-webkit-user-select: none;
|
|
2995
|
+
-moz-user-select: none;
|
|
2996
|
+
-ms-user-select: none;
|
|
2997
|
+
user-select: none;
|
|
2998
|
+
text-overflow: ellipsis;
|
|
2999
|
+
white-space: nowrap;
|
|
3000
|
+
overflow: hidden;
|
|
3001
|
+
text-decoration: none;
|
|
3002
|
+
}
|
|
3003
|
+
|
|
3004
|
+
.button--quiet {
|
|
3005
|
+
background: transparent;
|
|
3006
|
+
border: 1px solid transparent;
|
|
3007
|
+
box-shadow: none;
|
|
3008
|
+
}
|
|
3009
|
+
|
|
3010
|
+
.button--disabled,
|
|
3011
|
+
.topcoat-tab-bar__button:disabled {
|
|
3012
|
+
opacity: 0.3;
|
|
3013
|
+
cursor: default;
|
|
3014
|
+
pointer-events: none;
|
|
3015
|
+
}
|
|
3016
|
+
|
|
3017
|
+
.button-bar,
|
|
3018
|
+
.topcoat-tab-bar {
|
|
3019
|
+
display: table;
|
|
3020
|
+
table-layout: fixed;
|
|
3021
|
+
white-space: nowrap;
|
|
3022
|
+
margin: 0;
|
|
3023
|
+
padding: 0;
|
|
3024
|
+
}
|
|
3025
|
+
|
|
3026
|
+
.button-bar__item,
|
|
3027
|
+
.topcoat-tab-bar__item {
|
|
3028
|
+
display: table-cell;
|
|
3029
|
+
width: auto;
|
|
3030
|
+
border-radius: 0;
|
|
3031
|
+
}
|
|
3032
|
+
|
|
3033
|
+
.button-bar__item > input,
|
|
3034
|
+
.topcoat-tab-bar__item > input {
|
|
3035
|
+
position: absolute;
|
|
3036
|
+
overflow: hidden;
|
|
3037
|
+
padding: 0;
|
|
3038
|
+
border: 0;
|
|
3039
|
+
opacity: 0.001;
|
|
3040
|
+
z-index: 1;
|
|
3041
|
+
vertical-align: top;
|
|
3042
|
+
outline: none;
|
|
3043
|
+
}
|
|
3044
|
+
|
|
3045
|
+
.button-bar__button {
|
|
3046
|
+
border-radius: inherit;
|
|
3047
|
+
}
|
|
3048
|
+
|
|
3049
|
+
.button-bar__item:disabled {
|
|
3050
|
+
opacity: 0.3;
|
|
3051
|
+
cursor: default;
|
|
3052
|
+
pointer-events: none;
|
|
3053
|
+
}
|
|
3054
|
+
|
|
3055
|
+
/* topdoc
|
|
3056
|
+
name: Tab Bar
|
|
3057
|
+
description: Component of tab buttons
|
|
3058
|
+
modifiers:
|
|
3059
|
+
:disabled: Disabled state
|
|
3060
|
+
markup:
|
|
3061
|
+
<div class="topcoat-tab-bar">
|
|
3062
|
+
<label class="topcoat-tab-bar__item">
|
|
3063
|
+
<input type="radio" name="tab-bar">
|
|
3064
|
+
<button class="topcoat-tab-bar__button">One</button>
|
|
3065
|
+
</label>
|
|
3066
|
+
<label class="topcoat-tab-bar__item">
|
|
3067
|
+
<input type="radio" name="tab-bar">
|
|
3068
|
+
<button class="topcoat-tab-bar__button">Two</button>
|
|
3069
|
+
</label>
|
|
3070
|
+
<label class="topcoat-tab-bar__item">
|
|
3071
|
+
<input type="radio" name="tab-bar">
|
|
3072
|
+
<button class="topcoat-tab-bar__button">Three</button>
|
|
3073
|
+
</label>
|
|
3074
|
+
</div>
|
|
3075
|
+
examples:
|
|
3076
|
+
mobile tab bar: http://codepen.io/Topcoat/pen/rJICF
|
|
3077
|
+
tags:
|
|
3078
|
+
- desktop
|
|
3079
|
+
- light
|
|
3080
|
+
- dark
|
|
3081
|
+
- mobile
|
|
3082
|
+
- tab
|
|
3083
|
+
- group
|
|
3084
|
+
- bar
|
|
3085
|
+
*/
|
|
3086
|
+
|
|
3087
|
+
.topcoat-tab-bar__button {
|
|
3088
|
+
padding: 0 1.25rem;
|
|
3089
|
+
height: 3rem;
|
|
3090
|
+
line-height: 3rem;
|
|
3091
|
+
letter-spacing: 1px;
|
|
3092
|
+
color: #454545;
|
|
3093
|
+
text-shadow: 0 1px #fff;
|
|
3094
|
+
vertical-align: top;
|
|
3095
|
+
background-color: #e5e9e8;
|
|
3096
|
+
box-shadow: inset 0 1px #fff;
|
|
3097
|
+
border-top: 1px solid #a5a8a8;
|
|
3098
|
+
}
|
|
3099
|
+
|
|
3100
|
+
.topcoat-tab-bar__button:active,
|
|
3101
|
+
.topcoat-tab-bar__button--large:active,
|
|
3102
|
+
:checked + .topcoat-tab-bar__button {
|
|
3103
|
+
color: #0083e8;
|
|
3104
|
+
background-color: #e0f0fa;
|
|
3105
|
+
box-shadow: inset 0 0 2px #c0ced8;
|
|
3106
|
+
}
|
|
3107
|
+
|
|
3108
|
+
.topcoat-tab-bar__button:focus,
|
|
3109
|
+
.topcoat-tab-bar__button--large:focus {
|
|
3110
|
+
z-index: 1;
|
|
3111
|
+
}
|
|
3112
|
+
|
|
3113
|
+
/**
|
|
3114
|
+
*
|
|
3115
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3116
|
+
*
|
|
3117
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3118
|
+
* you may not use this file except in compliance with the License.
|
|
3119
|
+
* You may obtain a copy of the License at
|
|
3120
|
+
*
|
|
3121
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3122
|
+
*
|
|
3123
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3124
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3125
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3126
|
+
* See the License for the specific language governing permissions and
|
|
3127
|
+
* limitations under the License.
|
|
3128
|
+
*
|
|
3129
|
+
*/
|
|
3130
|
+
|
|
3131
|
+
/**
|
|
3132
|
+
*
|
|
3133
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3134
|
+
*
|
|
3135
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3136
|
+
* you may not use this file except in compliance with the License.
|
|
3137
|
+
* You may obtain a copy of the License at
|
|
3138
|
+
*
|
|
3139
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3140
|
+
*
|
|
3141
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3142
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3143
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3144
|
+
* See the License for the specific language governing permissions and
|
|
3145
|
+
* limitations under the License.
|
|
3146
|
+
*
|
|
3147
|
+
*/
|
|
3148
|
+
|
|
3149
|
+
.input,
|
|
3150
|
+
.topcoat-text-input,
|
|
3151
|
+
.topcoat-text-input--large {
|
|
3152
|
+
padding: 0;
|
|
3153
|
+
margin: 0;
|
|
3154
|
+
font: inherit;
|
|
3155
|
+
color: inherit;
|
|
3156
|
+
background: transparent;
|
|
3157
|
+
border: none;
|
|
3158
|
+
-moz-box-sizing: border-box;
|
|
3159
|
+
box-sizing: border-box;
|
|
3160
|
+
background-clip: padding-box;
|
|
3161
|
+
vertical-align: top;
|
|
3162
|
+
outline: none;
|
|
3163
|
+
}
|
|
3164
|
+
|
|
3165
|
+
.input:disabled,
|
|
3166
|
+
.topcoat-text-input:disabled,
|
|
3167
|
+
.topcoat-text-input--large:disabled {
|
|
3168
|
+
opacity: 0.3;
|
|
3169
|
+
cursor: default;
|
|
3170
|
+
pointer-events: none;
|
|
3171
|
+
}
|
|
3172
|
+
|
|
3173
|
+
/* topdoc
|
|
3174
|
+
name: Text input
|
|
3175
|
+
description: Topdoc text input
|
|
3176
|
+
modifiers:
|
|
3177
|
+
:disabled: Disabled state
|
|
3178
|
+
:focus: Focused
|
|
3179
|
+
:invalid: Hover state
|
|
3180
|
+
markup:
|
|
3181
|
+
<input type="text" class="topcoat-text-input" placeholder="text" value="">
|
|
3182
|
+
<br>
|
|
3183
|
+
<br>
|
|
3184
|
+
<input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>
|
|
3185
|
+
<br>
|
|
3186
|
+
<br>
|
|
3187
|
+
<input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">
|
|
3188
|
+
tags:
|
|
3189
|
+
- desktop
|
|
3190
|
+
- mobile
|
|
3191
|
+
- text
|
|
3192
|
+
- input
|
|
3193
|
+
*/
|
|
3194
|
+
|
|
3195
|
+
.topcoat-text-input,
|
|
3196
|
+
.topcoat-text-input--large {
|
|
3197
|
+
line-height: 3rem;
|
|
3198
|
+
font-size: 16px;
|
|
3199
|
+
letter-spacing: 1px;
|
|
3200
|
+
padding: 0 1.25rem;
|
|
3201
|
+
border: 1px solid #a5a8a8;
|
|
3202
|
+
border-radius: 6px;
|
|
3203
|
+
background-color: #d3d7d7;
|
|
3204
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
3205
|
+
color: #454545;
|
|
3206
|
+
vertical-align: top;
|
|
3207
|
+
}
|
|
3208
|
+
|
|
3209
|
+
.topcoat-text-input:focus,
|
|
3210
|
+
.topcoat-text-input--large:focus {
|
|
3211
|
+
background-color: #edf1f1;
|
|
3212
|
+
color: #000;
|
|
3213
|
+
border: 1px solid #0940fd;
|
|
3214
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
3215
|
+
}
|
|
3216
|
+
|
|
3217
|
+
.topcoat-text-input:disabled::-webkit-input-placeholder {
|
|
3218
|
+
color: #000;
|
|
3219
|
+
}
|
|
3220
|
+
|
|
3221
|
+
.topcoat-text-input:disabled::-moz-placeholder {
|
|
3222
|
+
color: #000;
|
|
3223
|
+
}
|
|
3224
|
+
|
|
3225
|
+
.topcoat-text-input:disabled:-ms-input-placeholder {
|
|
3226
|
+
color: #000;
|
|
3227
|
+
}
|
|
3228
|
+
|
|
3229
|
+
.topcoat-text-input:invalid {
|
|
3230
|
+
border: 1px solid #d83b75;
|
|
3231
|
+
}
|
|
3232
|
+
|
|
3233
|
+
/* topdoc
|
|
3234
|
+
name: Large Text Input
|
|
3235
|
+
description: A bigger input, still for text.
|
|
3236
|
+
modifiers:
|
|
3237
|
+
:disabled: Disabled state
|
|
3238
|
+
:focus: Focused
|
|
3239
|
+
:invalid: Hover state
|
|
3240
|
+
markup:
|
|
3241
|
+
<input type="text" class="topcoat-text-input--large" value="" placeholder="text">
|
|
3242
|
+
<br>
|
|
3243
|
+
<br>
|
|
3244
|
+
<input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>
|
|
3245
|
+
<br>
|
|
3246
|
+
<br>
|
|
3247
|
+
<input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">
|
|
3248
|
+
tags:
|
|
3249
|
+
- desktop
|
|
3250
|
+
- light
|
|
3251
|
+
- mobile
|
|
3252
|
+
- form
|
|
3253
|
+
- input
|
|
3254
|
+
- large
|
|
3255
|
+
*/
|
|
3256
|
+
|
|
3257
|
+
.topcoat-text-input--large {
|
|
3258
|
+
line-height: 4.375rem;
|
|
3259
|
+
font-size: 1.3rem;
|
|
3260
|
+
}
|
|
3261
|
+
|
|
938
3262
|
.topcoat-text-input--large:disabled {
|
|
3263
|
+
color: #000;
|
|
3264
|
+
}
|
|
3265
|
+
|
|
3266
|
+
.topcoat-text-input--large:disabled::-webkit-input-placeholder {
|
|
3267
|
+
color: #000;
|
|
3268
|
+
}
|
|
3269
|
+
|
|
3270
|
+
.topcoat-text-input--large:disabled::-moz-placeholder {
|
|
3271
|
+
color: #000;
|
|
3272
|
+
}
|
|
3273
|
+
|
|
3274
|
+
.topcoat-text-input--large:disabled:-ms-input-placeholder {
|
|
3275
|
+
color: #000;
|
|
3276
|
+
}
|
|
3277
|
+
|
|
3278
|
+
.topcoat-text-input--large:invalid {
|
|
3279
|
+
border: 1px solid #d83b75;
|
|
3280
|
+
}
|
|
3281
|
+
|
|
3282
|
+
/**
|
|
3283
|
+
*
|
|
3284
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3285
|
+
*
|
|
3286
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3287
|
+
* you may not use this file except in compliance with the License.
|
|
3288
|
+
* You may obtain a copy of the License at
|
|
3289
|
+
*
|
|
3290
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3291
|
+
*
|
|
3292
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3293
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3294
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3295
|
+
* See the License for the specific language governing permissions and
|
|
3296
|
+
* limitations under the License.
|
|
3297
|
+
*
|
|
3298
|
+
*/
|
|
3299
|
+
|
|
3300
|
+
/**
|
|
3301
|
+
*
|
|
3302
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3303
|
+
*
|
|
3304
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3305
|
+
* you may not use this file except in compliance with the License.
|
|
3306
|
+
* You may obtain a copy of the License at
|
|
3307
|
+
*
|
|
3308
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3309
|
+
*
|
|
3310
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3311
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3312
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3313
|
+
* See the License for the specific language governing permissions and
|
|
3314
|
+
* limitations under the License.
|
|
3315
|
+
*
|
|
3316
|
+
*/
|
|
3317
|
+
|
|
3318
|
+
.textarea {
|
|
3319
|
+
-moz-box-sizing: border-box;
|
|
3320
|
+
box-sizing: border-box;
|
|
3321
|
+
background-clip: padding-box;
|
|
3322
|
+
padding: 0;
|
|
3323
|
+
margin: 0;
|
|
3324
|
+
font: inherit;
|
|
3325
|
+
color: inherit;
|
|
3326
|
+
background: transparent;
|
|
3327
|
+
border: none;
|
|
3328
|
+
vertical-align: top;
|
|
3329
|
+
resize: none;
|
|
3330
|
+
outline: none;
|
|
3331
|
+
}
|
|
3332
|
+
|
|
3333
|
+
.textarea:disabled {
|
|
3334
|
+
opacity: 0.3;
|
|
3335
|
+
cursor: default;
|
|
3336
|
+
pointer-events: none;
|
|
3337
|
+
}
|
|
3338
|
+
|
|
3339
|
+
/**
|
|
3340
|
+
*
|
|
3341
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3342
|
+
*
|
|
3343
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3344
|
+
* you may not use this file except in compliance with the License.
|
|
3345
|
+
* You may obtain a copy of the License at
|
|
3346
|
+
*
|
|
3347
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3348
|
+
*
|
|
3349
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3350
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3351
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3352
|
+
* See the License for the specific language governing permissions and
|
|
3353
|
+
* limitations under the License.
|
|
3354
|
+
*
|
|
3355
|
+
*/
|
|
3356
|
+
|
|
3357
|
+
/**
|
|
3358
|
+
*
|
|
3359
|
+
* Copyright 2012 Adobe Systems Inc.;
|
|
3360
|
+
*
|
|
3361
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3362
|
+
* you may not use this file except in compliance with the License.
|
|
3363
|
+
* You may obtain a copy of the License at
|
|
3364
|
+
*
|
|
3365
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3366
|
+
*
|
|
3367
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
3368
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3369
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3370
|
+
* See the License for the specific language governing permissions and
|
|
3371
|
+
* limitations under the License.
|
|
3372
|
+
*
|
|
3373
|
+
*/
|
|
3374
|
+
|
|
3375
|
+
.textarea,
|
|
3376
|
+
.topcoat-textarea,
|
|
3377
|
+
.topcoat-textarea--large {
|
|
3378
|
+
-moz-box-sizing: border-box;
|
|
3379
|
+
box-sizing: border-box;
|
|
3380
|
+
background-clip: padding-box;
|
|
3381
|
+
padding: 0;
|
|
3382
|
+
margin: 0;
|
|
3383
|
+
font: inherit;
|
|
3384
|
+
color: inherit;
|
|
3385
|
+
background: transparent;
|
|
3386
|
+
border: none;
|
|
3387
|
+
vertical-align: top;
|
|
3388
|
+
resize: none;
|
|
3389
|
+
outline: none;
|
|
3390
|
+
}
|
|
3391
|
+
|
|
3392
|
+
.textarea:disabled,
|
|
3393
|
+
.topcoat-textarea:disabled,
|
|
3394
|
+
.topcoat-textarea--large:disabled {
|
|
939
3395
|
opacity: 0.3;
|
|
940
3396
|
cursor: default;
|
|
941
3397
|
pointer-events: none;
|
|
942
3398
|
}
|
|
3399
|
+
|
|
3400
|
+
/* topdoc
|
|
3401
|
+
name: Textarea
|
|
3402
|
+
description: A whole area, just for text.
|
|
3403
|
+
modifiers:
|
|
3404
|
+
:disabled: Disabled state
|
|
3405
|
+
markup:
|
|
3406
|
+
<textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>
|
|
3407
|
+
<br>
|
|
3408
|
+
<br>
|
|
3409
|
+
<textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
|
|
3410
|
+
tags:
|
|
3411
|
+
- desktop
|
|
3412
|
+
- light
|
|
3413
|
+
- mobile
|
|
3414
|
+
- form
|
|
3415
|
+
- input
|
|
3416
|
+
- textarea
|
|
3417
|
+
*/
|
|
3418
|
+
|
|
3419
|
+
.topcoat-textarea,
|
|
3420
|
+
.topcoat-textarea--large {
|
|
3421
|
+
padding: 2rem;
|
|
3422
|
+
font-size: 2.5rem;
|
|
3423
|
+
font-weight: 200;
|
|
3424
|
+
border-radius: 6px;
|
|
3425
|
+
line-height: 3rem;
|
|
3426
|
+
border: 1px solid #a5a8a8;
|
|
3427
|
+
background-color: #d3d7d7;
|
|
3428
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
3429
|
+
color: #454545;
|
|
3430
|
+
letter-spacing: 1px;
|
|
3431
|
+
}
|
|
3432
|
+
|
|
3433
|
+
.topcoat-textarea:focus,
|
|
3434
|
+
.topcoat-textarea--large:focus {
|
|
3435
|
+
background-color: #edf1f1;
|
|
3436
|
+
color: #000;
|
|
3437
|
+
border: 1px solid #0940fd;
|
|
3438
|
+
box-shadow: 0 0 0 2px #6fb5f1;
|
|
3439
|
+
}
|
|
3440
|
+
|
|
3441
|
+
.topcoat-textarea:disabled::-webkit-input-placeholder {
|
|
3442
|
+
color: #000;
|
|
3443
|
+
}
|
|
3444
|
+
|
|
3445
|
+
.topcoat-textarea:disabled::-moz-placeholder {
|
|
3446
|
+
color: #000;
|
|
3447
|
+
}
|
|
3448
|
+
|
|
3449
|
+
.topcoat-textarea:disabled:-ms-input-placeholder {
|
|
3450
|
+
color: #000;
|
|
3451
|
+
}
|
|
3452
|
+
|
|
3453
|
+
/* topdoc
|
|
3454
|
+
name: Large Textarea
|
|
3455
|
+
description: A whole area, just for text; now available in large.
|
|
3456
|
+
modifiers:
|
|
3457
|
+
:disabled: Disabled state
|
|
3458
|
+
markup:
|
|
3459
|
+
<textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>
|
|
3460
|
+
<br>
|
|
3461
|
+
<br>
|
|
3462
|
+
<textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
|
|
3463
|
+
tags:
|
|
3464
|
+
- desktop
|
|
3465
|
+
- light
|
|
3466
|
+
- mobile
|
|
3467
|
+
- form
|
|
3468
|
+
- input
|
|
3469
|
+
- textarea
|
|
3470
|
+
*/
|
|
3471
|
+
|
|
3472
|
+
.topcoat-textarea--large {
|
|
3473
|
+
font-size: 3rem;
|
|
3474
|
+
line-height: 4.375rem;
|
|
3475
|
+
}
|
|
3476
|
+
|
|
3477
|
+
.topcoat-textarea--large:disabled {
|
|
3478
|
+
color: #000;
|
|
3479
|
+
}
|
|
3480
|
+
|
|
3481
|
+
.topcoat-textarea--large:disabled::-webkit-input-placeholder {
|
|
3482
|
+
color: #000;
|
|
3483
|
+
}
|
|
3484
|
+
|
|
3485
|
+
.topcoat-textarea--large:disabled::-moz-placeholder {
|
|
3486
|
+
color: #000;
|
|
3487
|
+
}
|
|
3488
|
+
|
|
3489
|
+
.topcoat-textarea--large:disabled:-ms-input-placeholder {
|
|
3490
|
+
color: #000;
|
|
3491
|
+
}
|
|
3492
|
+
|
|
3493
|
+
@font-face {
|
|
3494
|
+
font-family: "Source Sans";
|
|
3495
|
+
src: font-url("topcoat/SourceSansPro-Regular.otf");
|
|
3496
|
+
}
|
|
3497
|
+
|
|
3498
|
+
@font-face {
|
|
3499
|
+
font-family: "Source Sans";
|
|
3500
|
+
src: font-url("topcoat/SourceSansPro-Light.otf");
|
|
3501
|
+
font-weight: 200;
|
|
3502
|
+
}
|
|
3503
|
+
|
|
3504
|
+
@font-face {
|
|
3505
|
+
font-family: "Source Sans";
|
|
3506
|
+
src: font-url("topcoat/SourceSansPro-Semibold.otf");
|
|
3507
|
+
font-weight: 600;
|
|
3508
|
+
}
|
|
3509
|
+
|
|
3510
|
+
body {
|
|
3511
|
+
margin: 0;
|
|
3512
|
+
padding: 0;
|
|
3513
|
+
background: #dfe2e2;
|
|
3514
|
+
color: #000;
|
|
3515
|
+
font: 16px "Source Sans", helvetica, arial, sans-serif;
|
|
3516
|
+
font-weight: 200;
|
|
3517
|
+
}
|
|
3518
|
+
|
|
3519
|
+
:focus {
|
|
3520
|
+
outline-color: transparent;
|
|
3521
|
+
outline-style: none;
|
|
3522
|
+
}
|
|
3523
|
+
|
|
3524
|
+
.topcoat-icon--menu-stack {
|
|
3525
|
+
background: image-url("topcoat/hamburger_dark.svg") no-repeat;
|
|
3526
|
+
background-size: cover;
|
|
3527
|
+
}
|
|
3528
|
+
|
|
3529
|
+
.quarter {
|
|
3530
|
+
width: 25%;
|
|
3531
|
+
}
|
|
3532
|
+
|
|
3533
|
+
.half {
|
|
3534
|
+
width: 50%;
|
|
3535
|
+
}
|
|
3536
|
+
|
|
3537
|
+
.three-quarters {
|
|
3538
|
+
width: 75%;
|
|
3539
|
+
}
|
|
3540
|
+
|
|
3541
|
+
.third {
|
|
3542
|
+
width: 33.333%;
|
|
3543
|
+
}
|
|
3544
|
+
|
|
3545
|
+
.two-thirds {
|
|
3546
|
+
width: 66.666%;
|
|
3547
|
+
}
|
|
3548
|
+
|
|
3549
|
+
.full {
|
|
3550
|
+
width: 100%;
|
|
3551
|
+
}
|
|
3552
|
+
|
|
3553
|
+
.left {
|
|
3554
|
+
text-align: left;
|
|
3555
|
+
}
|
|
3556
|
+
|
|
3557
|
+
.center {
|
|
3558
|
+
text-align: center;
|
|
3559
|
+
}
|
|
3560
|
+
|
|
3561
|
+
.right {
|
|
3562
|
+
text-align: right;
|
|
3563
|
+
}
|
|
3564
|
+
|
|
3565
|
+
.reset-ui {
|
|
3566
|
+
-moz-box-sizing: border-box;
|
|
3567
|
+
box-sizing: border-box;
|
|
3568
|
+
background-clip: padding-box;
|
|
3569
|
+
position: relative;
|
|
3570
|
+
display: inline-block;
|
|
3571
|
+
vertical-align: top;
|
|
3572
|
+
padding: 0;
|
|
3573
|
+
margin: 0;
|
|
3574
|
+
font: inherit;
|
|
3575
|
+
color: inherit;
|
|
3576
|
+
background: transparent;
|
|
3577
|
+
border: none;
|
|
3578
|
+
cursor: default;
|
|
3579
|
+
-webkit-user-select: none;
|
|
3580
|
+
-moz-user-select: none;
|
|
3581
|
+
-ms-user-select: none;
|
|
3582
|
+
user-select: none;
|
|
3583
|
+
text-overflow: ellipsis;
|
|
3584
|
+
white-space: nowrap;
|
|
3585
|
+
overflow: hidden;
|
|
3586
|
+
}
|
|
3587
|
+
|
|
3588
|
+
/* This file should include color and image variables corresponding to the dark theme */
|
|
3589
|
+
|
|
3590
|
+
/* Call To Action */
|
|
3591
|
+
|
|
3592
|
+
/* Icons */
|
|
3593
|
+
|
|
3594
|
+
/* Navigation Bar */
|
|
3595
|
+
|
|
3596
|
+
/* Text Input */
|
|
3597
|
+
|
|
3598
|
+
/* Search Input */
|
|
3599
|
+
|
|
3600
|
+
/* List */
|
|
3601
|
+
|
|
3602
|
+
/* Checkbox */
|
|
3603
|
+
|
|
3604
|
+
/* Overlay */
|
|
3605
|
+
|
|
3606
|
+
/* Progress bar */
|
|
3607
|
+
|
|
3608
|
+
/* Checkbox */
|
|
3609
|
+
|
|
3610
|
+
/* Radio Button */
|
|
3611
|
+
|
|
3612
|
+
/* Tab bar */
|
|
3613
|
+
|
|
3614
|
+
/* Switch */
|
|
3615
|
+
|
|
3616
|
+
/* Icon Button */
|
|
3617
|
+
|
|
3618
|
+
/* Navigation bar */
|
|
3619
|
+
|
|
3620
|
+
/* List */
|
|
3621
|
+
|
|
3622
|
+
/* Search Input */
|
|
3623
|
+
|
|
3624
|
+
/* Textarea */
|
|
3625
|
+
|
|
3626
|
+
/* Checkbox */
|
|
3627
|
+
|
|
3628
|
+
/* Radio */
|
|
3629
|
+
|
|
3630
|
+
/* Range input */
|
|
3631
|
+
|
|
3632
|
+
/* Search Input */
|
|
3633
|
+
|
|
3634
|
+
/* Switch */
|
|
3635
|
+
|
|
3636
|
+
/* This file should include color and image variables corresponding to the light theme */
|
|
3637
|
+
|
|
3638
|
+
/* Call To Action */
|
|
3639
|
+
|
|
3640
|
+
/* Icons */
|
|
3641
|
+
|
|
3642
|
+
/* Navigation Bar */
|
|
3643
|
+
|
|
3644
|
+
/* Text Input */
|
|
3645
|
+
|
|
3646
|
+
/* List */
|
|
3647
|
+
|
|
3648
|
+
/* Overlay */
|
|
3649
|
+
|
|
3650
|
+
/* Progress bar */
|
|
3651
|
+
|
|
3652
|
+
/* Checkbox */
|
|
3653
|
+
|
|
3654
|
+
/* Range input */
|
|
3655
|
+
|
|
3656
|
+
/* Radio Button */
|
|
3657
|
+
|
|
3658
|
+
/* Tab bar */
|
|
3659
|
+
|
|
3660
|
+
/* Switch */
|
|
3661
|
+
|
|
3662
|
+
/* Containers */
|
|
3663
|
+
|
|
3664
|
+
/* Icon Button */
|
|
3665
|
+
|
|
3666
|
+
/* Navigation bar */
|
|
3667
|
+
|
|
3668
|
+
/* List */
|
|
3669
|
+
|
|
3670
|
+
/* Search Input */
|
|
3671
|
+
|
|
3672
|
+
/* Text Area */
|
|
3673
|
+
|
|
3674
|
+
/* Checkbox */
|
|
3675
|
+
|
|
3676
|
+
/* Radio */
|
|
3677
|
+
|
|
3678
|
+
/* Range input */
|
|
3679
|
+
|
|
3680
|
+
/* Search Input */
|
|
3681
|
+
|
|
3682
|
+
/* Switch */
|
|
3683
|
+
|
|
3684
|
+
/* Text Input */
|
|
3685
|
+
|
|
3686
|
+
/* Radio input */
|
|
3687
|
+
|
|
3688
|
+
/* Overlay */
|
|
3689
|
+
|
|
3690
|
+
/* Textarea */
|
|
3691
|
+
|
|
3692
|
+
/* Progress bar container */
|
|
3693
|
+
|
|
3694
|
+
/* Progress bar progress */
|
|
3695
|
+
|
|
3696
|
+
/* Search input */
|
|
3697
|
+
|
|
3698
|
+
/* Switch */
|
|
3699
|
+
|
|
3700
|
+
/* Notification */
|