topcoat-rails 0.1.5 → 0.1.6

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,136 +1,124 @@
1
- @font-face {
2
- font-family: "Source Sans";
3
- src: font-url("topcoat/SourceSansPro-Regular.otf");
4
- }
5
- @font-face {
6
- font-family: "Source Sans";
7
- src: font-url("topcoat/SourceSansPro-Light.otf");
8
- font-weight: 200;
9
- }
10
- @font-face {
11
- font-family: "Source Sans";
12
- src: font-url("topcoat/SourceSansPro-Semibold.otf");
13
- font-weight: 600;
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
- body {
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
- .topcoat-icon--menu-stack {
27
- background: image-url("topcoat/hamburger_dark.svg") no-repeat;
28
- -webkit-background-size: cover;
29
- -moz-background-size: cover;
30
- background-size: cover;
27
+ .button-bar__item {
28
+ display: table-cell;
29
+ width: auto;
30
+ border-radius: 0;
31
31
  }
32
32
 
33
- .quarter {
34
- width: 25%;
35
- }
36
- .half {
37
- width: 50%;
38
- }
39
- .three-quarters {
40
- width: 75%;
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
- .left {
53
- text-align: left;
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
- .reset-ui {
63
- -webkit-box-sizing: border-box;
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
- -webkit-user-select: none;
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
- Copyright 2012 Adobe Systems Inc.;
91
- Licensed under the Apache License, Version 2.0 (the "License");
92
- you may not use this file except in compliance with the License.
93
- You may obtain a copy of the License at
94
-
95
- http://www.apache.org/licenses/LICENSE-2.0
96
-
97
- Unless required by applicable law or agreed to in writing, software
98
- distributed under the License is distributed on an "AS IS" BASIS,
99
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
100
- See the License for the specific language governing permissions and
101
- limitations under the License.
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
- Button
106
- ------
107
-
108
- :active - Active state
109
-
110
- .is-active - Simulates an active state on mobile devices
111
-
112
- :disabled - Disabled state
113
-
114
- .is-disabled - Simulates a disabled state on mobile devices
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
- <a class="topcoat-button">Button</a>
117
- <a class="topcoat-button is-active">Button</a>
118
- <a class="topcoat-button is-disabled">Button</a>
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,253 +131,301 @@ 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;
150
- padding: 0 1.16rem;
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 {
168
+ padding: 0 0.563rem;
151
169
  font-size: 12px;
152
- line-height: 2rem;
153
- letter-spacing: 1px;
170
+ line-height: 1.313rem;
171
+ letter-spacing: 0;
154
172
  color: #454545;
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: 3px;
162
- border-radius: 3px;
178
+ border-radius: 4px;
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;
163
188
  }
189
+
164
190
  .topcoat-button:active,
165
- .topcoat-button.is-active,
166
191
  .topcoat-button--large:active,
167
- .topcoat-button--large.is-active {
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
198
 
182
- :active - Quiet button active state
183
-
184
- .is-active - Simulates active state for a quiet button on touch interfaces
185
-
186
- :disabled - Disabled state
187
-
188
- .is-disabled - Simulates disabled state
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.is-active,
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
-
221
- :active - Active state
222
-
223
- .is-active - Simulates active state touch interfaces
224
-
225
- :disabled - Disabled state
226
233
 
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
- font-size: 1.167rem;
236
- line-height: 2.6rem;
237
- }
238
- .topcoat-button--large:disabled,
239
- .topcoat-button--large.is-disabled {
240
- opacity: 0.3;
241
- cursor: default;
242
- pointer-events: none;
235
+ .topcoat-button--large--quiet,
236
+ .topcoat-button-bar__button--large {
237
+ font-size: 0.875rem;
238
+ font-weight: 600;
239
+ line-height: 1.688rem;
240
+ padding: 0 0.875rem;
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.is-active,
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
- :active - Active state
270
+ .topcoat-button--large--cta {
271
+ font-size: 0.875rem;
272
+ font-weight: 600;
273
+ line-height: 1.688rem;
274
+ padding: 0 0.875rem;
275
+ }
320
276
 
321
- .is-active - Simulates active state touch interfaces
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
- :disabled - Disabled state
286
+ .button-bar__item,
287
+ .topcoat-button-bar__item {
288
+ display: table-cell;
289
+ width: auto;
290
+ border-radius: 0;
291
+ }
324
292
 
325
- .is-disabled - Simulates disabled state
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
- <a class="topcoat-button--large--cta" >Button</a>
328
- <a class="topcoat-button--large--cta is-active" >Button</a>
329
- <a class="topcoat-button--large--cta is-disabled" >Button</a>
330
- */
331
- .topcoat-button--large--cta {
332
- font-size: 1.167rem;
333
- line-height: 2.6rem;
305
+ .button-bar__button {
306
+ border-radius: inherit;
334
307
  }
335
- .topcoat-button--large-cta:disabled,
336
- .topcoat-button--large--cta.is-disabled {
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
- Copyright 2012 Adobe Systems Inc.;
344
- Licensed under the Apache License, Version 2.0 (the "License");
345
- you may not use this file except in compliance with the License.
346
- You may obtain a copy of the License at
347
-
348
- http://www.apache.org/licenses/LICENSE-2.0
349
-
350
- Unless required by applicable law or agreed to in writing, software
351
- distributed under the License is distributed on an "AS IS" BASIS,
352
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
353
- See the License for the specific language governing permissions and
354
- limitations under the License.
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
- Icon Button
359
- -----------
344
+ .topcoat-button-bar > .topcoat-button-bar__item:first-child {
345
+ border-top-left-radius: 4px;
346
+ border-bottom-left-radius: 4px;
347
+ }
360
348
 
361
- :active - Active state
349
+ .topcoat-button-bar > .topcoat-button-bar__item:last-child {
350
+ border-top-right-radius: 4px;
351
+ border-bottom-right-radius: 4px;
352
+ }
362
353
 
363
- .is-active - Simulates an active state on mobile devices
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
- :disabled - Disabled state
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
- .is-disabled - Simulates a disabled state on mobile devices
364
+ .topcoat-button-bar__button {
365
+ border-radius: inherit;
366
+ }
368
367
 
369
- <a class="topcoat-icon-button">
370
- <span class="topcoat-icon topcoat-icon--menu-stack"></span>
371
- </a>
368
+ .topcoat-button-bar__button:focus,
369
+ .topcoat-button-bar__button--large:focus {
370
+ z-index: 1;
371
+ }
372
372
 
373
- <a class="topcoat-icon-button is-active">
374
- <span class="topcoat-icon topcoat-icon--menu-stack"></span>
375
- </a>
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
- <a class="topcoat-icon-button is-disabled">
378
- <span class="topcoat-icon topcoat-icon--menu-stack"></span>
379
- </a>
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
- .topcoat-icon-button,
382
- .topcoat-icon-button--quiet,
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,3013 @@ 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
- padding: 0 0.5rem;
410
- line-height: 2rem;
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: 3px;
420
- border-radius: 3px;
444
+ text-decoration: none;
421
445
  }
422
- .topcoat-icon-button:active,
423
- .topcoat-icon-button.is-active {
424
- background-color: #d3d7d7;
425
- -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
426
- box-shadow: inset 0 1px rgba(0,0,0,0.12);
446
+
447
+ .button--quiet {
448
+ background: transparent;
449
+ border: 1px solid transparent;
450
+ box-shadow: none;
427
451
  }
428
- .topcoat-icon-button:disabled,
429
- .topcoat-icon-button.is-disabled {
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
-
438
- :active - Button active state
439
458
 
440
- .is-active - Simulates active state for a button on touch interfaces
441
-
442
- :disabled - Disabled state
443
-
444
- .is-disabled - Simulates disabled state
445
-
446
- <a class="topcoat-icon-button--quiet">
447
- <span class="topcoat-icon topcoat-icon--menu-stack"></span>
448
- </a>
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
+ */
449
476
 
450
- <a class="topcoat-icon-button--quiet is-active">
451
- <span class="topcoat-icon topcoat-icon--menu-stack"></span>
452
- </a>
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
+ */
453
494
 
454
- <a class="topcoat-icon-button--quiet is-disabled">
455
- <span class="topcoat-icon topcoat-icon--menu-stack"></span>
456
- </a>
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
+ *
457
511
  */
458
- .topcoat-icon-button--quiet {
459
- background: transparent;
460
- border: 1px solid transparent;
461
- -webkit-box-shadow: none;
462
- box-shadow: none;
512
+
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;
463
541
  }
464
- .topcoat-icon-button--quiet:active,
465
- .topcoat-icon-button--quiet.is-active,
466
- .topcoat-icon-button--large--quiet:active,
467
- .topcoat-icon-button--large--quiet.is-active {
468
- color: #454545;
469
- text-shadow: 0 1px #fff;
470
- background-color: #d3d7d7;
471
- border: 1px solid #a5a8a8;
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);
542
+
543
+ .button--quiet {
544
+ background: transparent;
545
+ border: 1px solid transparent;
546
+ box-shadow: none;
474
547
  }
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
- :disabled - Disabled state
490
-
491
- .is-disabled - Simulates a disabled state on mobile devices
492
-
493
- <a class="topcoat-icon-button--large">
494
- <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
495
- </a>
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
- <a class="topcoat-icon-button--large is-active">
498
- <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
499
- </a>
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 0.563rem;
588
+ font-size: 12px;
589
+ line-height: 1.313rem;
590
+ letter-spacing: 0;
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: 4px;
598
+ }
500
599
 
501
- <a class="topcoat-icon-button--large is-disabled">
502
- <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
503
- </a>
504
- */
505
- .topcoat-icon-button--large,
506
- .topcoat-icon-button--large--quiet {
507
- width: 2.6rem;
508
- height: 2.6rem;
509
- line-height: 2.6rem;
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
- .topcoat-icon-button--large:active,
512
- .topcoat-icon-button--large.is-active {
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
-
527
- :active - Active state
528
612
 
529
- .is-active - Simulates an active state on mobile devices
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
+ */
530
642
 
531
- :disabled - Disabled state
643
+ .topcoat-button--quiet {
644
+ background: transparent;
645
+ border: 1px solid transparent;
646
+ box-shadow: none;
647
+ }
532
648
 
533
- .is-disabled - Simulates a disabled state on mobile devices
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
+ }
534
655
 
535
- <a class="topcoat-icon-button--large--quiet">
536
- <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
537
- </a>
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
+ }
538
664
 
539
- <a class="topcoat-icon-button--large--quiet is-active">
540
- <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
541
- </a>
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
+ */
542
683
 
543
- <a class="topcoat-icon-button--large--quiet is-disabled">
544
- <span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
545
- </a>
684
+ .topcoat-button--large,
685
+ .topcoat-button--large--quiet {
686
+ font-size: 0.875rem;
687
+ font-weight: 600;
688
+ line-height: 1.688rem;
689
+ padding: 0 0.875rem;
690
+ }
691
+
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
- .topcoat-icon-button--large--quiet {
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
- .topcoat-icon-button--large--quiet:disabled,
554
- .topcoat-icon-button--large--quiet.is-disabled {
555
- opacity: 0.3;
556
- cursor: default;
557
- pointer-events: none;
558
- }
559
- .topcoat-icon,
560
- .topcoat-icon--large {
561
- position: relative;
562
- display: inline-block;
563
- vertical-align: top;
564
- overflow: hidden;
565
- width: 1rem;
566
- height: 1rem;
567
- vertical-align: middle;
568
- }
569
- .topcoat-icon--large {
570
- width: 1.3rem;
571
- height: 1.3rem;
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
- Copyright 2012 Adobe Systems Inc.;
576
- Licensed under the Apache License, Version 2.0 (the "License");
577
- you may not use this file except in compliance with the License.
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
- http://www.apache.org/licenses/LICENSE-2.0
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
- Unless required by applicable law or agreed to in writing, software
583
- distributed under the License is distributed on an "AS IS" BASIS,
584
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
585
- See the License for the specific language governing permissions and
586
- limitations under the License.
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
- List
591
- ------------
592
-
593
- <div class="topcoat-list__container">
594
- <h3 class="topcoat-list__header">Category</h3>
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>
607
-
778
+ .topcoat-button--large--cta {
779
+ font-size: 0.875rem;
780
+ font-weight: 600;
781
+ line-height: 1.688rem;
782
+ padding: 0 0.875rem;
783
+ }
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
- .topcoat-list__container {
802
+
803
+ input[type="checkbox"] {
804
+ position: absolute;
805
+ overflow: hidden;
610
806
  padding: 0;
611
- margin: 0;
612
- font: inherit;
613
- color: inherit;
614
- background: transparent;
615
- border: none;
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
- .topcoat-list__header {
628
- margin: 0;
629
- padding: 0.3rem 1.6rem;
630
- font-size: 0.9em;
631
- font-weight: 400;
632
- background-color: #cccfcf;
633
- color: #656565;
634
- text-shadow: 0 1px 0 rgba(255,255,255,0.5);
635
- border-top: solid 1px rgba(255,255,255,0.5);
636
- border-bottom: solid 1px rgba(255,255,255,0.23);
637
- }
638
- .topcoat-list {
639
- padding: 0;
640
- margin: 0;
641
- list-style-type: none;
642
- border-top: 1px solid #bcbfbf;
643
- color: #454545;
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;
644
837
  }
645
- .topcoat-list__item {
646
- margin: 0;
647
- padding: 0;
648
- padding: 1.16rem;
649
- border-top: 1px solid #eff1f1;
650
- border-bottom: 1px solid #bcbfbf;
838
+
839
+ .checkbox--disabled {
840
+ opacity: 0.3;
841
+ cursor: default;
842
+ pointer-events: none;
651
843
  }
652
- .topcoat-list__item:first-child {
653
- border-top: 1px solid rgba(0,0,0,0.05);
844
+
845
+ .checkbox:before,
846
+ .checkbox:after {
847
+ content: '';
848
+ position: absolute;
654
849
  }
655
850
 
656
- /*
657
- Copyright 2012 Adobe Systems Inc.;
658
- Licensed under the Apache License, Version 2.0 (the "License");
659
- you may not use this file except in compliance with the License.
660
- You may obtain a copy of the License at
851
+ .checkbox:before {
852
+ -moz-box-sizing: border-box;
853
+ box-sizing: border-box;
854
+ background-clip: padding-box;
855
+ }
661
856
 
662
- http://www.apache.org/licenses/LICENSE-2.0
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
+ */
663
874
 
664
- Unless required by applicable law or agreed to in writing, software
665
- distributed under the License is distributed on an "AS IS" BASIS,
666
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
667
- See the License for the specific language governing permissions and
668
- limitations under the License.
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
+ *
669
891
  */
670
892
 
671
- /*
672
- Navigation Bar
673
- --------------
674
-
675
- <div class="topcoat-navigation-bar">
676
- <div class="topcoat-navigation-bar__item left quarter">
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>
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
+ *
690
909
  */
691
- .topcoat-navigation-bar {
692
- -webkit-box-sizing: border-box;
910
+
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
+ }
921
+
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
- white-space: nowrap;
699
- overflow: hidden;
700
- word-spacing: 0;
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: 2.6rem;
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
- .topcoat-navigation-bar__item {
721
- -webkit-box-sizing: border-box;
722
- -moz-box-sizing: border-box;
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
- padding: 0;
731
- margin: 0;
732
- font: inherit;
733
- color: inherit;
734
- background: transparent;
735
- border: none;
736
- margin: var-margin;
737
- line-height: 2.6rem;
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
- .topcoat-navigation-bar__title {
741
- padding: 0;
742
- margin: 0;
743
- font: inherit;
744
- color: inherit;
745
- background: transparent;
746
- border: none;
747
- -o-text-overflow: ellipsis;
748
- text-overflow: ellipsis;
749
- white-space: nowrap;
750
- overflow: hidden;
751
- font-size: 1.167rem;
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
- Copyright 2012 Adobe Systems Inc.;
758
- Licensed under the Apache License, Version 2.0 (the "License");
759
- you may not use this file except in compliance with the License.
760
- You may obtain a copy of the License at
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
- http://www.apache.org/licenses/LICENSE-2.0
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
- Unless required by applicable law or agreed to in writing, software
765
- distributed under the License is distributed on an "AS IS" BASIS,
766
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
767
- See the License for the specific language governing permissions and
768
- limitations under the License.
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
- Search Input
773
- ------------
999
+ .topcoat-checkbox__checkmark {
1000
+ height: 1rem;
1001
+ }
774
1002
 
775
- :disabled - Disabled state
1003
+ input[type="checkbox"] {
1004
+ height: 1rem;
1005
+ width: 1rem;
1006
+ margin-top: 0;
1007
+ margin-right: -1rem;
1008
+ margin-bottom: -1rem;
1009
+ margin-left: 0;
1010
+ }
776
1011
 
777
- .is-disabled - Simulates a disabled state
1012
+ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
1013
+ opacity: 1;
1014
+ }
778
1015
 
779
- <input type="search" value="" placeholder="search" class="topcoat-search-input">
780
- <input type="search is-disabled" value="" placeholder="search" class="topcoat-search-input">
1016
+ .topcoat-checkbox {
1017
+ line-height: 1rem;
1018
+ }
781
1019
 
782
- */
783
- .topcoat-search-input,
784
- .topcoat-search-input--large {
1020
+ .topcoat-checkbox__checkmark:before {
1021
+ width: 1rem;
1022
+ height: 1rem;
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: 1rem;
1031
+ height: 1rem;
1032
+ }
1033
+
1034
+ .topcoat-checkbox__checkmark:after {
1035
+ top: 2px;
1036
+ left: 1px;
1037
+ opacity: 0;
1038
+ width: 14px;
1039
+ height: 4px;
1040
+ background: transparent;
1041
+ border: 7px solid #666;
1042
+ border-width: 3px;
1043
+ border-top: none;
1044
+ border-right: none;
1045
+ border-radius: 1px;
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
- padding: 0 1.25rem;
790
- -webkit-border-radius: 6px;
791
- border-radius: 6px;
792
- margin: 5px;
793
- height: 3rem;
1102
+ background-clip: padding-box;
1103
+ padding: 0;
1104
+ margin: 0;
794
1105
  font: inherit;
795
- font-weight: 200;
796
- outline: none;
797
- border: 1px solid #a5a8a8;
798
- background-color: #e5e9e8;
799
- -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
800
- box-shadow: inset 0 1px rgba(0,0,0,0.12);
801
- color: #454545;
802
- -webkit-appearance: none;
803
- padding: 0 0 0 2.7em;
804
- -webkit-border-radius: 15px;
805
- border-radius: 15px;
806
- background-image: image-url("topcoat/search.svg");
807
- background-position: 1em center;
808
- background-repeat: no-repeat;
809
- -webkit-background-size: 12px;
810
- -moz-background-size: 12px;
811
- background-size: 12px;
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
- .topcoat-search-input:focus::-webkit-input-placeholder,
823
- .topcoat-search-input:focus::-webkit-input-placeholder {
824
- color: #c6c8c8;
1119
+
1120
+ .button--quiet {
1121
+ background: transparent;
1122
+ border: 1px solid transparent;
1123
+ box-shadow: none;
825
1124
  }
826
- .topcoat-search-input:disabled,
827
- .topcoat-search-input.is-disabled {
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
- :disabled - Disabled state
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.25rem;
1164
+ line-height: 1.313rem;
1165
+ letter-spacing: 0;
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: 4px;
1173
+ }
837
1174
 
838
- .is-disabled - Simulates a disabled state
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
- <input type="search" value="" placeholder="search" class="topcoat-search-input--large">
841
- <input type="search" value="" placeholder="search" class="topcoat-search-input--large .is-disabled">
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
- .topcoat-search-input--large {
845
- height: 2.6rem;
846
- font-size: 1.167rem;
847
- font-weight: 200;
848
- padding-left: 2.8em;
849
- -webkit-border-radius: 25px;
850
- border-radius: 25px;
851
- background-position: 1.2em center;
852
- -webkit-background-size: 1.167rem;
853
- -moz-background-size: 1.167rem;
854
- background-size: 1.167rem;
1221
+
1222
+ .topcoat-icon-button--quiet {
1223
+ background: transparent;
1224
+ border: 1px solid transparent;
1225
+ box-shadow: none;
855
1226
  }
856
- .topcoat-search-input--large:disabled,
857
- .topcoat-search-input--large.is-disabled {
858
- opacity: 0.3;
859
- cursor: default;
860
- pointer-events: none;
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
- Copyright 2012 Adobe Systems Inc.;
865
- Licensed under the Apache License, Version 2.0 (the "License");
866
- you may not use this file except in compliance with the License.
867
- You may obtain a copy of the License at
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
- http://www.apache.org/licenses/LICENSE-2.0
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
- Unless required by applicable law or agreed to in writing, software
872
- distributed under the License is distributed on an "AS IS" BASIS,
873
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
874
- See the License for the specific language governing permissions and
875
- limitations under the License.
1268
+ .topcoat-icon-button--large,
1269
+ .topcoat-icon-button--large--quiet {
1270
+ width: 1.688rem;
1271
+ height: 1.688rem;
1272
+ line-height: 1.688rem;
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
- Text Input
880
- ----------
1304
+ .topcoat-icon-button--large--quiet {
1305
+ background: transparent;
1306
+ border: 1px solid transparent;
1307
+ box-shadow: none;
1308
+ }
881
1309
 
882
- :disabled - Disabled state
883
- .is-disabled - Simulates a disabled state on mobile devices
1310
+ .topcoat-icon,
1311
+ .topcoat-icon--large {
1312
+ position: relative;
1313
+ display: inline-block;
1314
+ vertical-align: top;
1315
+ overflow: hidden;
1316
+ width: 0.81406rem;
1317
+ height: 0.81406rem;
1318
+ vertical-align: middle;
1319
+ top: -1px;
1320
+ }
884
1321
 
885
- <input type="text" class="topcoat-text-input" value="" placeholder="text">
886
- <input type="text" class="topcoat-text-input is-disabled" value="" placeholder="text">
1322
+ .topcoat-icon--large {
1323
+ width: 1.06344rem;
1324
+ height: 1.06344rem;
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
- .topcoat-text-input,
890
- .topcoat-text-input--large {
891
- vertical-align: top;
892
- -webkit-box-sizing: border-box;
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
- padding: 0 1.25rem;
896
- -webkit-border-radius: 6px;
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
- .topcoat-text-input:disabled,
914
- .topcoat-text-input.is-disabled {
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
- :disabled - Disabled state
924
- .is-disabled - Simulates a disabled state on mobile devices
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
- <input type="text" class="topcoat-text-input--large" value="" placeholder="text">
927
- <input type="text" class="topcoat-text-input--large is-disabled" value="" placeholder="text">
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
- .topcoat-text-input--large {
930
- height: 2.6rem;
931
- font-size: 1.167rem;
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;
932
1434
  }
933
- .topcoat-text-input--large:focus {
934
- background-color: #fff;
935
- color: #000;
1435
+
1436
+ .list__header {
1437
+ margin: 0;
936
1438
  }
937
- .topcoat-text-input--large.is-disabled,
938
- .topcoat-text-input--large:disabled {
939
- opacity: 0.3;
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
+ /**
1488
+ *
1489
+ * Copyright 2012 Adobe Systems Inc.;
1490
+ *
1491
+ * Licensed under the Apache License, Version 2.0 (the "License");
1492
+ * you may not use this file except in compliance with the License.
1493
+ * You may obtain a copy of the License at
1494
+ *
1495
+ * http://www.apache.org/licenses/LICENSE-2.0
1496
+ *
1497
+ * Unless required by applicable law or agreed to in writing, software
1498
+ * distributed under the License is distributed on an "AS IS" BASIS,
1499
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1500
+ * See the License for the specific language governing permissions and
1501
+ * limitations under the License.
1502
+ *
1503
+ */
1504
+
1505
+ .navigation-bar {
1506
+ -moz-box-sizing: border-box;
1507
+ box-sizing: border-box;
1508
+ background-clip: padding-box;
1509
+ white-space: nowrap;
1510
+ overflow: hidden;
1511
+ word-spacing: 0;
1512
+ padding: 0;
1513
+ margin: 0;
1514
+ font: inherit;
1515
+ color: inherit;
1516
+ background: transparent;
1517
+ border: none;
940
1518
  cursor: default;
941
- pointer-events: none;
1519
+ -webkit-user-select: none;
1520
+ -moz-user-select: none;
1521
+ -ms-user-select: none;
1522
+ user-select: none;
942
1523
  }
1524
+
1525
+ .navigation-bar__item {
1526
+ -moz-box-sizing: border-box;
1527
+ box-sizing: border-box;
1528
+ background-clip: padding-box;
1529
+ position: relative;
1530
+ display: inline-block;
1531
+ vertical-align: top;
1532
+ padding: 0;
1533
+ margin: 0;
1534
+ font: inherit;
1535
+ color: inherit;
1536
+ background: transparent;
1537
+ border: none;
1538
+ }
1539
+
1540
+ .navigation-bar__title {
1541
+ padding: 0;
1542
+ margin: 0;
1543
+ font: inherit;
1544
+ color: inherit;
1545
+ background: transparent;
1546
+ border: none;
1547
+ text-overflow: ellipsis;
1548
+ white-space: nowrap;
1549
+ overflow: hidden;
1550
+ }
1551
+
1552
+ /*
1553
+ Copyright 2012 Adobe Systems Inc.;
1554
+ Licensed under the Apache License, Version 2.0 (the "License");
1555
+ you may not use this file except in compliance with the License.
1556
+ You may obtain a copy of the License at
1557
+
1558
+ http://www.apache.org/licenses/LICENSE-2.0
1559
+
1560
+ Unless required by applicable law or agreed to in writing, software
1561
+ distributed under the License is distributed on an "AS IS" BASIS,
1562
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1563
+ See the License for the specific language governing permissions and
1564
+ limitations under the License.
1565
+ */
1566
+
1567
+ /**
1568
+ *
1569
+ * Copyright 2012 Adobe Systems Inc.;
1570
+ *
1571
+ * Licensed under the Apache License, Version 2.0 (the "License");
1572
+ * you may not use this file except in compliance with the License.
1573
+ * You may obtain a copy of the License at
1574
+ *
1575
+ * http://www.apache.org/licenses/LICENSE-2.0
1576
+ *
1577
+ * Unless required by applicable law or agreed to in writing, software
1578
+ * distributed under the License is distributed on an "AS IS" BASIS,
1579
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1580
+ * See the License for the specific language governing permissions and
1581
+ * limitations under the License.
1582
+ *
1583
+ */
1584
+
1585
+ .notification {
1586
+ position: relative;
1587
+ display: inline-block;
1588
+ vertical-align: top;
1589
+ -moz-box-sizing: border-box;
1590
+ box-sizing: border-box;
1591
+ background-clip: padding-box;
1592
+ padding: 0;
1593
+ margin: 0;
1594
+ font: inherit;
1595
+ color: inherit;
1596
+ background: transparent;
1597
+ border: none;
1598
+ cursor: default;
1599
+ -webkit-user-select: none;
1600
+ -moz-user-select: none;
1601
+ -ms-user-select: none;
1602
+ user-select: none;
1603
+ text-overflow: ellipsis;
1604
+ white-space: nowrap;
1605
+ overflow: hidden;
1606
+ text-decoration: none;
1607
+ }
1608
+
1609
+ /*
1610
+ Copyright 2012 Adobe Systems Inc.;
1611
+ Licensed under the Apache License, Version 2.0 (the "License");
1612
+ you may not use this file except in compliance with the License.
1613
+ You may obtain a copy of the License at
1614
+
1615
+ http://www.apache.org/licenses/LICENSE-2.0
1616
+
1617
+ Unless required by applicable law or agreed to in writing, software
1618
+ distributed under the License is distributed on an "AS IS" BASIS,
1619
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1620
+ See the License for the specific language governing permissions and
1621
+ limitations under the License.
1622
+ */
1623
+
1624
+ /**
1625
+ *
1626
+ * Copyright 2012 Adobe Systems Inc.;
1627
+ *
1628
+ * Licensed under the Apache License, Version 2.0 (the "License");
1629
+ * you may not use this file except in compliance with the License.
1630
+ * You may obtain a copy of the License at
1631
+ *
1632
+ * http://www.apache.org/licenses/LICENSE-2.0
1633
+ *
1634
+ * Unless required by applicable law or agreed to in writing, software
1635
+ * distributed under the License is distributed on an "AS IS" BASIS,
1636
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1637
+ * See the License for the specific language governing permissions and
1638
+ * limitations under the License.
1639
+ *
1640
+ */
1641
+
1642
+ .notification,
1643
+ .topcoat-notification {
1644
+ position: relative;
1645
+ display: inline-block;
1646
+ vertical-align: top;
1647
+ -moz-box-sizing: border-box;
1648
+ box-sizing: border-box;
1649
+ background-clip: padding-box;
1650
+ padding: 0;
1651
+ margin: 0;
1652
+ font: inherit;
1653
+ color: inherit;
1654
+ background: transparent;
1655
+ border: none;
1656
+ cursor: default;
1657
+ -webkit-user-select: none;
1658
+ -moz-user-select: none;
1659
+ -ms-user-select: none;
1660
+ user-select: none;
1661
+ text-overflow: ellipsis;
1662
+ white-space: nowrap;
1663
+ overflow: hidden;
1664
+ text-decoration: none;
1665
+ }
1666
+
1667
+ /* topdoc
1668
+ name: Notification
1669
+ description: Notification badge
1670
+ markup:
1671
+ <span class="topcoat-notification">1</span>
1672
+ tags:
1673
+ - desktop
1674
+ - light
1675
+ - mobile
1676
+ - notification
1677
+ */
1678
+
1679
+ .topcoat-notification {
1680
+ padding: 0.15em 0.5em 0.2em;
1681
+ border-radius: 2px;
1682
+ background-color: #ec514e;
1683
+ color: #fff;
1684
+ }
1685
+
1686
+ /**
1687
+ *
1688
+ * Copyright 2012 Adobe Systems Inc.;
1689
+ *
1690
+ * Licensed under the Apache License, Version 2.0 (the "License");
1691
+ * you may not use this file except in compliance with the License.
1692
+ * You may obtain a copy of the License at
1693
+ *
1694
+ * http://www.apache.org/licenses/LICENSE-2.0
1695
+ *
1696
+ * Unless required by applicable law or agreed to in writing, software
1697
+ * distributed under the License is distributed on an "AS IS" BASIS,
1698
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1699
+ * See the License for the specific language governing permissions and
1700
+ * limitations under the License.
1701
+ *
1702
+ */
1703
+
1704
+ /**
1705
+ *
1706
+ * Copyright 2012 Adobe Systems Inc.;
1707
+ *
1708
+ * Licensed under the Apache License, Version 2.0 (the "License");
1709
+ * you may not use this file except in compliance with the License.
1710
+ * You may obtain a copy of the License at
1711
+ *
1712
+ * http://www.apache.org/licenses/LICENSE-2.0
1713
+ *
1714
+ * Unless required by applicable law or agreed to in writing, software
1715
+ * distributed under the License is distributed on an "AS IS" BASIS,
1716
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1717
+ * See the License for the specific language governing permissions and
1718
+ * limitations under the License.
1719
+ *
1720
+ */
1721
+
1722
+ input[type="radio"] {
1723
+ position: absolute;
1724
+ overflow: hidden;
1725
+ padding: 0;
1726
+ border: 0;
1727
+ opacity: 0.001;
1728
+ z-index: 1;
1729
+ vertical-align: top;
1730
+ outline: none;
1731
+ }
1732
+
1733
+ .radio-button {
1734
+ -moz-box-sizing: border-box;
1735
+ box-sizing: border-box;
1736
+ background-clip: padding-box;
1737
+ position: relative;
1738
+ display: inline-block;
1739
+ vertical-align: top;
1740
+ cursor: default;
1741
+ -webkit-user-select: none;
1742
+ -moz-user-select: none;
1743
+ -ms-user-select: none;
1744
+ user-select: none;
1745
+ }
1746
+
1747
+ .radio-button__label {
1748
+ position: relative;
1749
+ display: inline-block;
1750
+ vertical-align: top;
1751
+ cursor: default;
1752
+ -webkit-user-select: none;
1753
+ -moz-user-select: none;
1754
+ -ms-user-select: none;
1755
+ user-select: none;
1756
+ }
1757
+
1758
+ .radio-button:before,
1759
+ .radio-button:after {
1760
+ content: '';
1761
+ position: absolute;
1762
+ border-radius: 100%;
1763
+ }
1764
+
1765
+ .radio-button:after {
1766
+ top: 50%;
1767
+ left: 50%;
1768
+ -webkit-transform: translate(-50%, -50%);
1769
+ -ms-transform: translate(-50%, -50%);
1770
+ transform: translate(-50%, -50%);
1771
+ }
1772
+
1773
+ .radio-button:before {
1774
+ -moz-box-sizing: border-box;
1775
+ box-sizing: border-box;
1776
+ background-clip: padding-box;
1777
+ }
1778
+
1779
+ .radio-button--disabled {
1780
+ opacity: 0.3;
1781
+ cursor: default;
1782
+ pointer-events: none;
1783
+ }
1784
+
1785
+ /**
1786
+ *
1787
+ * Copyright 2012 Adobe Systems Inc.;
1788
+ *
1789
+ * Licensed under the Apache License, Version 2.0 (the "License");
1790
+ * you may not use this file except in compliance with the License.
1791
+ * You may obtain a copy of the License at
1792
+ *
1793
+ * http://www.apache.org/licenses/LICENSE-2.0
1794
+ *
1795
+ * Unless required by applicable law or agreed to in writing, software
1796
+ * distributed under the License is distributed on an "AS IS" BASIS,
1797
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1798
+ * See the License for the specific language governing permissions and
1799
+ * limitations under the License.
1800
+ *
1801
+ */
1802
+
1803
+ /**
1804
+ *
1805
+ * Copyright 2012 Adobe Systems Inc.;
1806
+ *
1807
+ * Licensed under the Apache License, Version 2.0 (the "License");
1808
+ * you may not use this file except in compliance with the License.
1809
+ * You may obtain a copy of the License at
1810
+ *
1811
+ * http://www.apache.org/licenses/LICENSE-2.0
1812
+ *
1813
+ * Unless required by applicable law or agreed to in writing, software
1814
+ * distributed under the License is distributed on an "AS IS" BASIS,
1815
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1816
+ * See the License for the specific language governing permissions and
1817
+ * limitations under the License.
1818
+ *
1819
+ */
1820
+
1821
+ input[type="radio"] {
1822
+ position: absolute;
1823
+ overflow: hidden;
1824
+ padding: 0;
1825
+ border: 0;
1826
+ opacity: 0.001;
1827
+ z-index: 1;
1828
+ vertical-align: top;
1829
+ outline: none;
1830
+ }
1831
+
1832
+ .radio-button,
1833
+ .topcoat-radio-button__checkmark {
1834
+ -moz-box-sizing: border-box;
1835
+ box-sizing: border-box;
1836
+ background-clip: padding-box;
1837
+ position: relative;
1838
+ display: inline-block;
1839
+ vertical-align: top;
1840
+ cursor: default;
1841
+ -webkit-user-select: none;
1842
+ -moz-user-select: none;
1843
+ -ms-user-select: none;
1844
+ user-select: none;
1845
+ }
1846
+
1847
+ .radio-button__label,
1848
+ .topcoat-radio-button {
1849
+ position: relative;
1850
+ display: inline-block;
1851
+ vertical-align: top;
1852
+ cursor: default;
1853
+ -webkit-user-select: none;
1854
+ -moz-user-select: none;
1855
+ -ms-user-select: none;
1856
+ user-select: none;
1857
+ }
1858
+
1859
+ .radio-button:before,
1860
+ .radio-button:after,
1861
+ .topcoat-radio-button__checkmark:before,
1862
+ .topcoat-radio-button__checkmark:after {
1863
+ content: '';
1864
+ position: absolute;
1865
+ border-radius: 100%;
1866
+ }
1867
+
1868
+ .radio-button:after,
1869
+ .topcoat-radio-button__checkmark:after {
1870
+ top: 50%;
1871
+ left: 50%;
1872
+ -webkit-transform: translate(-50%, -50%);
1873
+ -ms-transform: translate(-50%, -50%);
1874
+ transform: translate(-50%, -50%);
1875
+ }
1876
+
1877
+ .radio-button:before,
1878
+ .topcoat-radio-button__checkmark:before {
1879
+ -moz-box-sizing: border-box;
1880
+ box-sizing: border-box;
1881
+ background-clip: padding-box;
1882
+ }
1883
+
1884
+ .radio-button--disabled,
1885
+ input[type="radio"]:disabled + .topcoat-radio-button__checkmark {
1886
+ opacity: 0.3;
1887
+ cursor: default;
1888
+ pointer-events: none;
1889
+ }
1890
+
1891
+ /* topdoc
1892
+ name: Radio Button
1893
+ description: A button that can play music, but usually just plays ads.
1894
+ modifiers:
1895
+ markup:
1896
+ <!-- NO LABEL -->
1897
+ <label class="topcoat-radio-button">
1898
+ <input type="radio" name="topcoat">
1899
+ <div class="topcoat-radio-button__checkmark"></div>
1900
+ </label>
1901
+ <br>
1902
+ <br>
1903
+ <!-- LEFT LABEL -->
1904
+ <label class="topcoat-radio-button">
1905
+ Left label
1906
+ <input type="radio" name="topcoat">
1907
+ <div class="topcoat-radio-button__checkmark"></div>
1908
+ </label>
1909
+ <br>
1910
+ <br>
1911
+ <!-- RIGHT LABEL -->
1912
+ <label class="topcoat-radio-button">
1913
+ <input type="radio" name="topcoat">
1914
+ <div class="topcoat-radio-button__checkmark"></div>
1915
+ Right label
1916
+ </label>
1917
+ <br>
1918
+ <br>
1919
+ <!-- DISABLED -->
1920
+ <label class="topcoat-radio-button">
1921
+ <input type="radio" name="topcoat" Disabled>
1922
+ <div class="topcoat-radio-button__checkmark"></div>
1923
+ Disabled
1924
+ </label>
1925
+ examples:
1926
+ Mobile Radio Button: http://codepen.io/Topcoat/pen/HDcJj
1927
+ tags:
1928
+ - desktop
1929
+ - light
1930
+ - mobile
1931
+ - Radio
1932
+ */
1933
+
1934
+ input[type="radio"] {
1935
+ height: 1.063rem;
1936
+ width: 1.063rem;
1937
+ margin-top: 0;
1938
+ margin-right: -1.063rem;
1939
+ margin-bottom: -1.063rem;
1940
+ margin-left: 0;
1941
+ }
1942
+
1943
+ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
1944
+ opacity: 1;
1945
+ }
1946
+
1947
+ .topcoat-radio-button {
1948
+ color: #454545;
1949
+ line-height: 1.063rem;
1950
+ }
1951
+
1952
+ .topcoat-radio-button__checkmark:before {
1953
+ width: 1.063rem;
1954
+ height: 1.063rem;
1955
+ background: #e5e9e8;
1956
+ border: 1px solid #a5a8a8;
1957
+ box-shadow: inset 0 1px #fff;
1958
+ }
1959
+
1960
+ .topcoat-radio-button__checkmark {
1961
+ position: relative;
1962
+ width: 1.063rem;
1963
+ height: 1.063rem;
1964
+ }
1965
+
1966
+ .topcoat-radio-button__checkmark:after {
1967
+ opacity: 0;
1968
+ width: 0.313rem;
1969
+ height: 0.313rem;
1970
+ background: #666;
1971
+ border: 1px solid rgba(0,0,0,0.1);
1972
+ box-shadow: 0 1px rgba(255,255,255,0.5);
1973
+ -webkit-transform: none;
1974
+ -ms-transform: none;
1975
+ transform: none;
1976
+ top: 0.313rem;
1977
+ left: 0.313rem;
1978
+ }
1979
+
1980
+ input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
1981
+ border: 1px solid #0940fd;
1982
+ box-shadow: 0 0 0 2px #6fb5f1;
1983
+ }
1984
+
1985
+ /*
1986
+ Copyright 2012 Adobe Systems Inc.;
1987
+ Licensed under the Apache License, Version 2.0 (the "License");
1988
+ you may not use this file except in compliance with the License.
1989
+ You may obtain a copy of the License at
1990
+
1991
+ http://www.apache.org/licenses/LICENSE-2.0
1992
+
1993
+ Unless required by applicable law or agreed to in writing, software
1994
+ distributed under the License is distributed on an "AS IS" BASIS,
1995
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1996
+ See the License for the specific language governing permissions and
1997
+ limitations under the License.
1998
+ */
1999
+
2000
+ /*
2001
+ Copyright 2012 Adobe Systems Inc.;
2002
+ Licensed under the Apache License, Version 2.0 (the "License");
2003
+ you may not use this file except in compliance with the License.
2004
+ You may obtain a copy of the License at
2005
+
2006
+ http://www.apache.org/licenses/LICENSE-2.0
2007
+
2008
+ Unless required by applicable law or agreed to in writing, software
2009
+ distributed under the License is distributed on an "AS IS" BASIS,
2010
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2011
+ See the License for the specific language governing permissions and
2012
+ limitations under the License.
2013
+ */
2014
+
2015
+ .range {
2016
+ padding: 0;
2017
+ margin: 0;
2018
+ font: inherit;
2019
+ color: inherit;
2020
+ background: transparent;
2021
+ border: none;
2022
+ -moz-box-sizing: border-box;
2023
+ box-sizing: border-box;
2024
+ background-clip: padding-box;
2025
+ vertical-align: top;
2026
+ outline: none;
2027
+ -webkit-appearance: none;
2028
+ }
2029
+
2030
+ .range__thumb {
2031
+ cursor: pointer;
2032
+ }
2033
+
2034
+ .range__thumb--webkit {
2035
+ cursor: pointer;
2036
+ -webkit-appearance: none;
2037
+ }
2038
+
2039
+ .range:disabled {
2040
+ opacity: 0.3;
2041
+ cursor: default;
2042
+ pointer-events: none;
2043
+ }
2044
+
2045
+ /*
2046
+ Copyright 2012 Adobe Systems Inc.;
2047
+ Licensed under the Apache License, Version 2.0 (the "License");
2048
+ you may not use this file except in compliance with the License.
2049
+ You may obtain a copy of the License at
2050
+
2051
+ http://www.apache.org/licenses/LICENSE-2.0
2052
+
2053
+ Unless required by applicable law or agreed to in writing, software
2054
+ distributed under the License is distributed on an "AS IS" BASIS,
2055
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2056
+ See the License for the specific language governing permissions and
2057
+ limitations under the License.
2058
+ */
2059
+
2060
+ /*
2061
+ Copyright 2012 Adobe Systems Inc.;
2062
+ Licensed under the Apache License, Version 2.0 (the "License");
2063
+ you may not use this file except in compliance with the License.
2064
+ You may obtain a copy of the License at
2065
+
2066
+ http://www.apache.org/licenses/LICENSE-2.0
2067
+
2068
+ Unless required by applicable law or agreed to in writing, software
2069
+ distributed under the License is distributed on an "AS IS" BASIS,
2070
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2071
+ See the License for the specific language governing permissions and
2072
+ limitations under the License.
2073
+ */
2074
+
2075
+ .range,
2076
+ .topcoat-range {
2077
+ padding: 0;
2078
+ margin: 0;
2079
+ font: inherit;
2080
+ color: inherit;
2081
+ background: transparent;
2082
+ border: none;
2083
+ -moz-box-sizing: border-box;
2084
+ box-sizing: border-box;
2085
+ background-clip: padding-box;
2086
+ vertical-align: top;
2087
+ outline: none;
2088
+ -webkit-appearance: none;
2089
+ }
2090
+
2091
+ .range__thumb,
2092
+ .topcoat-range::-moz-range-thumb {
2093
+ cursor: pointer;
2094
+ }
2095
+
2096
+ .range__thumb--webkit,
2097
+ .topcoat-range::-webkit-slider-thumb {
2098
+ cursor: pointer;
2099
+ -webkit-appearance: none;
2100
+ }
2101
+
2102
+ .range:disabled,
2103
+ .topcoat-range:disabled {
2104
+ opacity: 0.3;
2105
+ cursor: default;
2106
+ pointer-events: none;
2107
+ }
2108
+
2109
+ /* topdoc
2110
+ name: Range
2111
+ description: Range input
2112
+ modifiers:
2113
+ :active: Active state
2114
+ :disabled: Disabled state
2115
+ :hover: Hover state
2116
+ :focus: Focused
2117
+ markup:
2118
+ <input type="range" class="topcoat-range">
2119
+ <input type="range" class="topcoat-range" disabled>
2120
+ examples:
2121
+ mobile range: http://codepen.io/Topcoat/pen/BskEn
2122
+ tags:
2123
+ - desktop
2124
+ - mobile
2125
+ - range
2126
+ */
2127
+
2128
+ .topcoat-range {
2129
+ border-radius: 4px;
2130
+ border: 1px solid #a5a8a8;
2131
+ background-color: #d3d7d7;
2132
+ height: 0.5rem;
2133
+ border-radius: 15px;
2134
+ }
2135
+
2136
+ .topcoat-range::-moz-range-track {
2137
+ border-radius: 4px;
2138
+ border: 1px solid #a5a8a8;
2139
+ background-color: #d3d7d7;
2140
+ height: 0.5rem;
2141
+ border-radius: 15px;
2142
+ }
2143
+
2144
+ .topcoat-range::-webkit-slider-thumb {
2145
+ height: 1.313rem;
2146
+ width: 0.75rem;
2147
+ background-color: #e5e9e8;
2148
+ border: 1px solid #a5a8a8;
2149
+ border-radius: 4px;
2150
+ box-shadow: inset 0 1px #fff;
2151
+ }
2152
+
2153
+ .topcoat-range::-moz-range-thumb {
2154
+ height: 1.313rem;
2155
+ width: 0.75rem;
2156
+ background-color: #e5e9e8;
2157
+ border: 1px solid #a5a8a8;
2158
+ border-radius: 4px;
2159
+ box-shadow: inset 0 1px #fff;
2160
+ }
2161
+
2162
+ .topcoat-range:focus::-webkit-slider-thumb {
2163
+ border: 1px solid #0940fd;
2164
+ box-shadow: 0 0 0 2px #6fb5f1;
2165
+ }
2166
+
2167
+ .topcoat-range:focus::-moz-range-thumb {
2168
+ border: 1px solid #0940fd;
2169
+ box-shadow: 0 0 0 2px #6fb5f1;
2170
+ }
2171
+
2172
+ /**
2173
+ *
2174
+ * Copyright 2012 Adobe Systems Inc.;
2175
+ *
2176
+ * Licensed under the Apache License, Version 2.0 (the "License");
2177
+ * you may not use this file except in compliance with the License.
2178
+ * You may obtain a copy of the License at
2179
+ *
2180
+ * http://www.apache.org/licenses/LICENSE-2.0
2181
+ *
2182
+ * Unless required by applicable law or agreed to in writing, software
2183
+ * distributed under the License is distributed on an "AS IS" BASIS,
2184
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2185
+ * See the License for the specific language governing permissions and
2186
+ * limitations under the License.
2187
+ *
2188
+ */
2189
+
2190
+ /**
2191
+ *
2192
+ * Copyright 2012 Adobe Systems Inc.;
2193
+ *
2194
+ * Licensed under the Apache License, Version 2.0 (the "License");
2195
+ * you may not use this file except in compliance with the License.
2196
+ * You may obtain a copy of the License at
2197
+ *
2198
+ * http://www.apache.org/licenses/LICENSE-2.0
2199
+ *
2200
+ * Unless required by applicable law or agreed to in writing, software
2201
+ * distributed under the License is distributed on an "AS IS" BASIS,
2202
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2203
+ * See the License for the specific language governing permissions and
2204
+ * limitations under the License.
2205
+ *
2206
+ */
2207
+
2208
+ .search-input {
2209
+ padding: 0;
2210
+ margin: 0;
2211
+ font: inherit;
2212
+ color: inherit;
2213
+ background: transparent;
2214
+ border: none;
2215
+ -moz-box-sizing: border-box;
2216
+ box-sizing: border-box;
2217
+ background-clip: padding-box;
2218
+ vertical-align: top;
2219
+ outline: none;
2220
+ -webkit-appearance: none;
2221
+ }
2222
+
2223
+ input[type="search"]::-webkit-search-cancel-button {
2224
+ -webkit-appearance: none;
2225
+ }
2226
+
2227
+ .search-input:disabled {
2228
+ opacity: 0.3;
2229
+ cursor: default;
2230
+ pointer-events: none;
2231
+ }
2232
+
2233
+ /**
2234
+ *
2235
+ * Copyright 2012 Adobe Systems Inc.;
2236
+ *
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
+ /**
2252
+ *
2253
+ * Copyright 2012 Adobe Systems Inc.;
2254
+ *
2255
+ * Licensed under the Apache License, Version 2.0 (the "License");
2256
+ * you may not use this file except in compliance with the License.
2257
+ * You may obtain a copy of the License at
2258
+ *
2259
+ * http://www.apache.org/licenses/LICENSE-2.0
2260
+ *
2261
+ * Unless required by applicable law or agreed to in writing, software
2262
+ * distributed under the License is distributed on an "AS IS" BASIS,
2263
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2264
+ * See the License for the specific language governing permissions and
2265
+ * limitations under the License.
2266
+ *
2267
+ */
2268
+
2269
+ .search-input,
2270
+ .topcoat-search-input,
2271
+ .topcoat-search-input--large {
2272
+ padding: 0;
2273
+ margin: 0;
2274
+ font: inherit;
2275
+ color: inherit;
2276
+ background: transparent;
2277
+ border: none;
2278
+ -moz-box-sizing: border-box;
2279
+ box-sizing: border-box;
2280
+ background-clip: padding-box;
2281
+ vertical-align: top;
2282
+ outline: none;
2283
+ -webkit-appearance: none;
2284
+ }
2285
+
2286
+ input[type="search"]::-webkit-search-cancel-button {
2287
+ -webkit-appearance: none;
2288
+ }
2289
+
2290
+ .search-input:disabled,
2291
+ .topcoat-search-input:disabled,
2292
+ .topcoat-search-input--large:disabled {
2293
+ opacity: 0.3;
2294
+ cursor: default;
2295
+ pointer-events: none;
2296
+ }
2297
+
2298
+ /* topdoc
2299
+ name: Search Input
2300
+ description: A text input designed for searching.
2301
+ modifiers:
2302
+ :disabled: Disabled state
2303
+ markup:
2304
+ <input type="search" value="" placeholder="search" class="topcoat-search-input">
2305
+ <input type="search" value="" placeholder="search" class="topcoat-search-input" disabled>
2306
+ tags:
2307
+ - desktop
2308
+ - light
2309
+ - mobile
2310
+ - text
2311
+ - input
2312
+ - search
2313
+ - form
2314
+ */
2315
+
2316
+ .topcoat-search-input,
2317
+ .topcoat-search-input--large {
2318
+ line-height: 1.313rem;
2319
+ font-size: 12px;
2320
+ border: 1px solid #a5a8a8;
2321
+ background-color: #d3d7d7;
2322
+ box-shadow: inset 0 1px rgba(0,0,0,0.12);
2323
+ color: #454545;
2324
+ padding: 0 0 0 1.3rem;
2325
+ border-radius: 15px;
2326
+ background-image: image-url("topcoat/search.svg");
2327
+ background-position: 1em center;
2328
+ background-repeat: no-repeat;
2329
+ background-size: 12px;
2330
+ }
2331
+
2332
+ .topcoat-search-input:focus,
2333
+ .topcoat-search-input--large:focus {
2334
+ background-image: image-url("topcoat/search_dark.svg");
2335
+ background-color: #edf1f1;
2336
+ color: #000;
2337
+ border: 1px solid #0940fd;
2338
+ box-shadow: 0 0 0 2px #6fb5f1;
2339
+ }
2340
+
2341
+ .topcoat-search-input::-webkit-search-cancel-button,
2342
+ .topcoat-search-input::-webkit-search-decoration,
2343
+ .topcoat-search-input--large::-webkit-search-cancel-button,
2344
+ .topcoat-search-input--large::-webkit-search-decoration {
2345
+ margin-right: 5px;
2346
+ }
2347
+
2348
+ .topcoat-search-input:focus::-webkit-input-placeholder,
2349
+ .topcoat-search-input:focus::-webkit-input-placeholder {
2350
+ color: #c6c8c8;
2351
+ }
2352
+
2353
+ .topcoat-search-input:disabled::-webkit-input-placeholder {
2354
+ color: #000;
2355
+ }
2356
+
2357
+ .topcoat-search-input:disabled::-moz-placeholder {
2358
+ color: #000;
2359
+ }
2360
+
2361
+ .topcoat-search-input:disabled:-ms-input-placeholder {
2362
+ color: #000;
2363
+ }
2364
+
2365
+ /* topdoc
2366
+ name: Large Search Input
2367
+ description: A large text input designed for searching.
2368
+ modifiers:
2369
+ :disabled: Disabled state
2370
+ markup:
2371
+ <input type="search" value="" placeholder="search" class="topcoat-search-input--large">
2372
+ <input type="search" value="" placeholder="search" class="topcoat-search-input--large" disabled>
2373
+ tags:
2374
+ - desktop
2375
+ - light
2376
+ - mobile
2377
+ - text
2378
+ - input
2379
+ - search
2380
+ - form
2381
+ - large
2382
+ */
2383
+
2384
+ .topcoat-search-input--large {
2385
+ line-height: 1.688rem;
2386
+ font-size: 0.875rem;
2387
+ font-weight: 400;
2388
+ padding: 0 0 0 1.8rem;
2389
+ border-radius: 25px;
2390
+ background-position: 1.2em center;
2391
+ background-size: 0.875rem;
2392
+ }
2393
+
2394
+ .topcoat-search-input--large:disabled {
2395
+ color: #000;
2396
+ }
2397
+
2398
+ .topcoat-search-input--large:disabled::-webkit-input-placeholder {
2399
+ color: #000;
2400
+ }
2401
+
2402
+ .topcoat-search-input--large:disabled::-moz-placeholder {
2403
+ color: #000;
2404
+ }
2405
+
2406
+ .topcoat-search-input--large:disabled:-ms-input-placeholder {
2407
+ color: #000;
2408
+ }
2409
+
2410
+ /**
2411
+ *
2412
+ * Copyright 2012 Adobe Systems Inc.;
2413
+ *
2414
+ * Licensed under the Apache License, Version 2.0 (the "License");
2415
+ * you may not use this file except in compliance with the License.
2416
+ * You may obtain a copy of the License at
2417
+ *
2418
+ * http://www.apache.org/licenses/LICENSE-2.0
2419
+ *
2420
+ * Unless required by applicable law or agreed to in writing, software
2421
+ * distributed under the License is distributed on an "AS IS" BASIS,
2422
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2423
+ * See the License for the specific language governing permissions and
2424
+ * limitations under the License.
2425
+ *
2426
+ */
2427
+
2428
+ /**
2429
+ *
2430
+ * Copyright 2012 Adobe Systems Inc.;
2431
+ *
2432
+ * Licensed under the Apache License, Version 2.0 (the "License");
2433
+ * you may not use this file except in compliance with the License.
2434
+ * You may obtain a copy of the License at
2435
+ *
2436
+ * http://www.apache.org/licenses/LICENSE-2.0
2437
+ *
2438
+ * Unless required by applicable law or agreed to in writing, software
2439
+ * distributed under the License is distributed on an "AS IS" BASIS,
2440
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2441
+ * See the License for the specific language governing permissions and
2442
+ * limitations under the License.
2443
+ *
2444
+ */
2445
+
2446
+ .switch {
2447
+ position: relative;
2448
+ display: inline-block;
2449
+ vertical-align: top;
2450
+ -moz-box-sizing: border-box;
2451
+ box-sizing: border-box;
2452
+ background-clip: padding-box;
2453
+ }
2454
+
2455
+ .switch__input {
2456
+ position: absolute;
2457
+ overflow: hidden;
2458
+ padding: 0;
2459
+ border: 0;
2460
+ opacity: 0.001;
2461
+ z-index: 1;
2462
+ vertical-align: top;
2463
+ outline: none;
2464
+ }
2465
+
2466
+ .switch__toggle {
2467
+ position: relative;
2468
+ display: inline-block;
2469
+ vertical-align: top;
2470
+ -moz-box-sizing: border-box;
2471
+ box-sizing: border-box;
2472
+ background-clip: padding-box;
2473
+ padding: 0;
2474
+ margin: 0;
2475
+ font: inherit;
2476
+ color: inherit;
2477
+ background: transparent;
2478
+ border: none;
2479
+ cursor: default;
2480
+ -webkit-user-select: none;
2481
+ -moz-user-select: none;
2482
+ -ms-user-select: none;
2483
+ user-select: none;
2484
+ }
2485
+
2486
+ .switch__toggle:before,
2487
+ .switch__toggle:after {
2488
+ content: '';
2489
+ position: absolute;
2490
+ z-index: -1;
2491
+ -moz-box-sizing: border-box;
2492
+ box-sizing: border-box;
2493
+ background-clip: padding-box;
2494
+ }
2495
+
2496
+ .switch--disabled {
2497
+ opacity: 0.3;
2498
+ cursor: default;
2499
+ pointer-events: none;
2500
+ }
2501
+
2502
+ /**
2503
+ *
2504
+ * Copyright 2012 Adobe Systems Inc.;
2505
+ *
2506
+ * Licensed under the Apache License, Version 2.0 (the "License");
2507
+ * you may not use this file except in compliance with the License.
2508
+ * You may obtain a copy of the License at
2509
+ *
2510
+ * http://www.apache.org/licenses/LICENSE-2.0
2511
+ *
2512
+ * Unless required by applicable law or agreed to in writing, software
2513
+ * distributed under the License is distributed on an "AS IS" BASIS,
2514
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2515
+ * See the License for the specific language governing permissions and
2516
+ * limitations under the License.
2517
+ *
2518
+ */
2519
+
2520
+ /**
2521
+ *
2522
+ * Copyright 2012 Adobe Systems Inc.;
2523
+ *
2524
+ * Licensed under the Apache License, Version 2.0 (the "License");
2525
+ * you may not use this file except in compliance with the License.
2526
+ * You may obtain a copy of the License at
2527
+ *
2528
+ * http://www.apache.org/licenses/LICENSE-2.0
2529
+ *
2530
+ * Unless required by applicable law or agreed to in writing, software
2531
+ * distributed under the License is distributed on an "AS IS" BASIS,
2532
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2533
+ * See the License for the specific language governing permissions and
2534
+ * limitations under the License.
2535
+ *
2536
+ */
2537
+
2538
+ .switch,
2539
+ .topcoat-switch {
2540
+ position: relative;
2541
+ display: inline-block;
2542
+ vertical-align: top;
2543
+ -moz-box-sizing: border-box;
2544
+ box-sizing: border-box;
2545
+ background-clip: padding-box;
2546
+ }
2547
+
2548
+ .switch__input,
2549
+ .topcoat-switch__input {
2550
+ position: absolute;
2551
+ overflow: hidden;
2552
+ padding: 0;
2553
+ border: 0;
2554
+ opacity: 0.001;
2555
+ z-index: 1;
2556
+ vertical-align: top;
2557
+ outline: none;
2558
+ }
2559
+
2560
+ .switch__toggle,
2561
+ .topcoat-switch__toggle {
2562
+ position: relative;
2563
+ display: inline-block;
2564
+ vertical-align: top;
2565
+ -moz-box-sizing: border-box;
2566
+ box-sizing: border-box;
2567
+ background-clip: padding-box;
2568
+ padding: 0;
2569
+ margin: 0;
2570
+ font: inherit;
2571
+ color: inherit;
2572
+ background: transparent;
2573
+ border: none;
2574
+ cursor: default;
2575
+ -webkit-user-select: none;
2576
+ -moz-user-select: none;
2577
+ -ms-user-select: none;
2578
+ user-select: none;
2579
+ }
2580
+
2581
+ .switch__toggle:before,
2582
+ .switch__toggle:after,
2583
+ .topcoat-switch__toggle:before,
2584
+ .topcoat-switch__toggle:after {
2585
+ content: '';
2586
+ position: absolute;
2587
+ z-index: -1;
2588
+ -moz-box-sizing: border-box;
2589
+ box-sizing: border-box;
2590
+ background-clip: padding-box;
2591
+ }
2592
+
2593
+ .switch--disabled,
2594
+ .topcoat-switch__input:disabled + .topcoat-switch__toggle {
2595
+ opacity: 0.3;
2596
+ cursor: default;
2597
+ pointer-events: none;
2598
+ }
2599
+
2600
+ /* topdoc
2601
+ name: Switch
2602
+ description: Default skin for Topcoat switch
2603
+ modifiers:
2604
+ :focus: Focus state
2605
+ :disabled: Disabled state
2606
+ markup:
2607
+ <label class="topcoat-switch">
2608
+ <input type="checkbox" class="topcoat-switch__input">
2609
+ <div class="topcoat-switch__toggle"></div>
2610
+ </label>
2611
+ <br>
2612
+ <br>
2613
+ <label class="topcoat-switch">
2614
+ <input type="checkbox" class="topcoat-switch__input" checked>
2615
+ <div class="topcoat-switch__toggle"></div>
2616
+ </label>
2617
+ <br>
2618
+ <br>
2619
+ <label class="topcoat-switch">
2620
+ <input type="checkbox" class="topcoat-switch__input" disabled>
2621
+ <div class="topcoat-switch__toggle"></div>
2622
+ </label>
2623
+ examples:
2624
+ mobile switch: http://codepen.io/Topcoat/pen/upxds
2625
+ tags:
2626
+ - desktop
2627
+ - light
2628
+ - mobile
2629
+ - switch
2630
+ */
2631
+
2632
+ .topcoat-switch {
2633
+ font-size: 12px;
2634
+ padding: 0 0.563rem;
2635
+ border-radius: 4px;
2636
+ border: 1px solid #a5a8a8;
2637
+ overflow: hidden;
2638
+ width: 3.5rem;
2639
+ }
2640
+
2641
+ .topcoat-switch__toggle:before,
2642
+ .topcoat-switch__toggle:after {
2643
+ top: -1px;
2644
+ width: 2.6rem;
2645
+ }
2646
+
2647
+ .topcoat-switch__toggle:before {
2648
+ content: 'ON';
2649
+ color: #0083e8;
2650
+ background-color: #e0f0fa;
2651
+ right: 0.8rem;
2652
+ padding-left: 0.75rem;
2653
+ }
2654
+
2655
+ .topcoat-switch__toggle {
2656
+ line-height: 1.313rem;
2657
+ height: 1.313rem;
2658
+ width: 1rem;
2659
+ border-radius: 4px;
2660
+ color: #454545;
2661
+ text-shadow: 0 1px #fff;
2662
+ background-color: #e5e9e8;
2663
+ border: 1px solid #a5a8a8;
2664
+ margin-left: -0.6rem;
2665
+ margin-bottom: -1px;
2666
+ margin-top: -1px;
2667
+ box-shadow: inset 0 1px #fff;
2668
+ -webkit-transition: margin-left 0.05s ease-in-out;
2669
+ transition: margin-left 0.05s ease-in-out;
2670
+ }
2671
+
2672
+ .topcoat-switch__toggle:after {
2673
+ content: 'OFF';
2674
+ background-color: #d3d7d7;
2675
+ left: 0.8rem;
2676
+ padding-left: 0.6rem;
2677
+ }
2678
+
2679
+ .topcoat-switch__input:checked + .topcoat-switch__toggle {
2680
+ margin-left: 1.85rem;
2681
+ }
2682
+
2683
+ .topcoat-switch__input:focus + .topcoat-switch__toggle {
2684
+ border: 1px solid #0940fd;
2685
+ box-shadow: 0 0 0 2px #6fb5f1;
2686
+ }
2687
+
2688
+ .topcoat-switch__input:disabled + .topcoat-switch__toggle:after,
2689
+ .topcoat-switch__input:disabled + .topcoat-switch__toggle:before {
2690
+ background: transparent;
2691
+ }
2692
+
2693
+ /**
2694
+ *
2695
+ * Copyright 2012 Adobe Systems Inc.;
2696
+ *
2697
+ * Licensed under the Apache License, Version 2.0 (the "License");
2698
+ * you may not use this file except in compliance with the License.
2699
+ * You may obtain a copy of the License at
2700
+ *
2701
+ * http://www.apache.org/licenses/LICENSE-2.0
2702
+ *
2703
+ * Unless required by applicable law or agreed to in writing, software
2704
+ * distributed under the License is distributed on an "AS IS" BASIS,
2705
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2706
+ * See the License for the specific language governing permissions and
2707
+ * limitations under the License.
2708
+ *
2709
+ */
2710
+
2711
+ /**
2712
+ *
2713
+ * Copyright 2012 Adobe Systems Inc.;
2714
+ *
2715
+ * Licensed under the Apache License, Version 2.0 (the "License");
2716
+ * you may not use this file except in compliance with the License.
2717
+ * You may obtain a copy of the License at
2718
+ *
2719
+ * http://www.apache.org/licenses/LICENSE-2.0
2720
+ *
2721
+ * Unless required by applicable law or agreed to in writing, software
2722
+ * distributed under the License is distributed on an "AS IS" BASIS,
2723
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2724
+ * See the License for the specific language governing permissions and
2725
+ * limitations under the License.
2726
+ *
2727
+ */
2728
+
2729
+ .button,
2730
+ .topcoat-tab-bar__button {
2731
+ position: relative;
2732
+ display: inline-block;
2733
+ vertical-align: top;
2734
+ -moz-box-sizing: border-box;
2735
+ box-sizing: border-box;
2736
+ background-clip: padding-box;
2737
+ padding: 0;
2738
+ margin: 0;
2739
+ font: inherit;
2740
+ color: inherit;
2741
+ background: transparent;
2742
+ border: none;
2743
+ cursor: default;
2744
+ -webkit-user-select: none;
2745
+ -moz-user-select: none;
2746
+ -ms-user-select: none;
2747
+ user-select: none;
2748
+ text-overflow: ellipsis;
2749
+ white-space: nowrap;
2750
+ overflow: hidden;
2751
+ text-decoration: none;
2752
+ }
2753
+
2754
+ .button--quiet {
2755
+ background: transparent;
2756
+ border: 1px solid transparent;
2757
+ box-shadow: none;
2758
+ }
2759
+
2760
+ .button--disabled,
2761
+ .topcoat-tab-bar__button:disabled {
2762
+ opacity: 0.3;
2763
+ cursor: default;
2764
+ pointer-events: none;
2765
+ }
2766
+
2767
+ .button-bar,
2768
+ .topcoat-tab-bar {
2769
+ display: table;
2770
+ table-layout: fixed;
2771
+ white-space: nowrap;
2772
+ margin: 0;
2773
+ padding: 0;
2774
+ }
2775
+
2776
+ .button-bar__item,
2777
+ .topcoat-tab-bar__item {
2778
+ display: table-cell;
2779
+ width: auto;
2780
+ border-radius: 0;
2781
+ }
2782
+
2783
+ .button-bar__item > input,
2784
+ .topcoat-tab-bar__item > input {
2785
+ position: absolute;
2786
+ overflow: hidden;
2787
+ padding: 0;
2788
+ border: 0;
2789
+ opacity: 0.001;
2790
+ z-index: 1;
2791
+ vertical-align: top;
2792
+ outline: none;
2793
+ }
2794
+
2795
+ .button-bar__button {
2796
+ border-radius: inherit;
2797
+ }
2798
+
2799
+ .button-bar__item:disabled {
2800
+ opacity: 0.3;
2801
+ cursor: default;
2802
+ pointer-events: none;
2803
+ }
2804
+
2805
+ /* topdoc
2806
+ name: Tab Bar
2807
+ description: Component of tab buttons
2808
+ modifiers:
2809
+ :disabled: Disabled state
2810
+ markup:
2811
+ <div class="topcoat-tab-bar">
2812
+ <label class="topcoat-tab-bar__item">
2813
+ <input type="radio" name="tab-bar">
2814
+ <button class="topcoat-tab-bar__button">One</button>
2815
+ </label>
2816
+ <label class="topcoat-tab-bar__item">
2817
+ <input type="radio" name="tab-bar">
2818
+ <button class="topcoat-tab-bar__button">Two</button>
2819
+ </label>
2820
+ <label class="topcoat-tab-bar__item">
2821
+ <input type="radio" name="tab-bar">
2822
+ <button class="topcoat-tab-bar__button">Three</button>
2823
+ </label>
2824
+ </div>
2825
+ examples:
2826
+ mobile tab bar: http://codepen.io/Topcoat/pen/rJICF
2827
+ tags:
2828
+ - desktop
2829
+ - light
2830
+ - dark
2831
+ - mobile
2832
+ - tab
2833
+ - group
2834
+ - bar
2835
+ */
2836
+
2837
+ .topcoat-tab-bar__button {
2838
+ padding: 0 0.563rem;
2839
+ height: 1.313rem;
2840
+ line-height: 1.313rem;
2841
+ letter-spacing: 0;
2842
+ color: #454545;
2843
+ text-shadow: 0 1px #fff;
2844
+ vertical-align: top;
2845
+ background-color: #e5e9e8;
2846
+ box-shadow: inset 0 1px #fff;
2847
+ border-top: 1px solid #a5a8a8;
2848
+ }
2849
+
2850
+ .topcoat-tab-bar__button:active,
2851
+ .topcoat-tab-bar__button--large:active,
2852
+ :checked + .topcoat-tab-bar__button {
2853
+ color: #0083e8;
2854
+ background-color: #e0f0fa;
2855
+ box-shadow: inset 0 0 2px #c0ced8;
2856
+ }
2857
+
2858
+ .topcoat-tab-bar__button:focus,
2859
+ .topcoat-tab-bar__button--large:focus {
2860
+ z-index: 1;
2861
+ }
2862
+
2863
+ /**
2864
+ *
2865
+ * Copyright 2012 Adobe Systems Inc.;
2866
+ *
2867
+ * Licensed under the Apache License, Version 2.0 (the "License");
2868
+ * you may not use this file except in compliance with the License.
2869
+ * You may obtain a copy of the License at
2870
+ *
2871
+ * http://www.apache.org/licenses/LICENSE-2.0
2872
+ *
2873
+ * Unless required by applicable law or agreed to in writing, software
2874
+ * distributed under the License is distributed on an "AS IS" BASIS,
2875
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2876
+ * See the License for the specific language governing permissions and
2877
+ * limitations under the License.
2878
+ *
2879
+ */
2880
+
2881
+ /**
2882
+ *
2883
+ * Copyright 2012 Adobe Systems Inc.;
2884
+ *
2885
+ * Licensed under the Apache License, Version 2.0 (the "License");
2886
+ * you may not use this file except in compliance with the License.
2887
+ * You may obtain a copy of the License at
2888
+ *
2889
+ * http://www.apache.org/licenses/LICENSE-2.0
2890
+ *
2891
+ * Unless required by applicable law or agreed to in writing, software
2892
+ * distributed under the License is distributed on an "AS IS" BASIS,
2893
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2894
+ * See the License for the specific language governing permissions and
2895
+ * limitations under the License.
2896
+ *
2897
+ */
2898
+
2899
+ .input,
2900
+ .topcoat-text-input,
2901
+ .topcoat-text-input--large {
2902
+ padding: 0;
2903
+ margin: 0;
2904
+ font: inherit;
2905
+ color: inherit;
2906
+ background: transparent;
2907
+ border: none;
2908
+ -moz-box-sizing: border-box;
2909
+ box-sizing: border-box;
2910
+ background-clip: padding-box;
2911
+ vertical-align: top;
2912
+ outline: none;
2913
+ }
2914
+
2915
+ .input:disabled,
2916
+ .topcoat-text-input:disabled,
2917
+ .topcoat-text-input--large:disabled {
2918
+ opacity: 0.3;
2919
+ cursor: default;
2920
+ pointer-events: none;
2921
+ }
2922
+
2923
+ /* topdoc
2924
+ name: Text input
2925
+ description: Topdoc text input
2926
+ modifiers:
2927
+ :disabled: Disabled state
2928
+ :focus: Focused
2929
+ :invalid: Hover state
2930
+ markup:
2931
+ <input type="text" class="topcoat-text-input" placeholder="text" value="">
2932
+ <br>
2933
+ <br>
2934
+ <input type="text" class="topcoat-text-input" placeholder="text" value="" disabled>
2935
+ <br>
2936
+ <br>
2937
+ <input type="text" class="topcoat-text-input" placeholder="text" value="fail" pattern="not-fail">
2938
+ tags:
2939
+ - desktop
2940
+ - mobile
2941
+ - text
2942
+ - input
2943
+ */
2944
+
2945
+ .topcoat-text-input,
2946
+ .topcoat-text-input--large {
2947
+ line-height: 1.313rem;
2948
+ font-size: 12px;
2949
+ letter-spacing: 0;
2950
+ padding: 0 0.563rem;
2951
+ border: 1px solid #a5a8a8;
2952
+ border-radius: 4px;
2953
+ background-color: #d3d7d7;
2954
+ box-shadow: inset 0 1px rgba(0,0,0,0.12);
2955
+ color: #454545;
2956
+ vertical-align: top;
2957
+ }
2958
+
2959
+ .topcoat-text-input:focus,
2960
+ .topcoat-text-input--large:focus {
2961
+ background-color: #edf1f1;
2962
+ color: #000;
2963
+ border: 1px solid #0940fd;
2964
+ box-shadow: 0 0 0 2px #6fb5f1;
2965
+ }
2966
+
2967
+ .topcoat-text-input:disabled::-webkit-input-placeholder {
2968
+ color: #000;
2969
+ }
2970
+
2971
+ .topcoat-text-input:disabled::-moz-placeholder {
2972
+ color: #000;
2973
+ }
2974
+
2975
+ .topcoat-text-input:disabled:-ms-input-placeholder {
2976
+ color: #000;
2977
+ }
2978
+
2979
+ .topcoat-text-input:invalid {
2980
+ border: 1px solid #d83b75;
2981
+ }
2982
+
2983
+ /* topdoc
2984
+ name: Large Text Input
2985
+ description: A bigger input, still for text.
2986
+ modifiers:
2987
+ :disabled: Disabled state
2988
+ :focus: Focused
2989
+ :invalid: Hover state
2990
+ markup:
2991
+ <input type="text" class="topcoat-text-input--large" value="" placeholder="text">
2992
+ <br>
2993
+ <br>
2994
+ <input type="text" class="topcoat-text-input--large" value="" placeholder="text" disabled>
2995
+ <br>
2996
+ <br>
2997
+ <input type="text" class="topcoat-text-input--large" placeholder="text" value="fail" pattern="not-fail">
2998
+ tags:
2999
+ - desktop
3000
+ - light
3001
+ - mobile
3002
+ - form
3003
+ - input
3004
+ - large
3005
+ */
3006
+
3007
+ .topcoat-text-input--large {
3008
+ line-height: 1.688rem;
3009
+ font-size: 0.875rem;
3010
+ }
3011
+
3012
+ .topcoat-text-input--large:disabled {
3013
+ color: #000;
3014
+ }
3015
+
3016
+ .topcoat-text-input--large:disabled::-webkit-input-placeholder {
3017
+ color: #000;
3018
+ }
3019
+
3020
+ .topcoat-text-input--large:disabled::-moz-placeholder {
3021
+ color: #000;
3022
+ }
3023
+
3024
+ .topcoat-text-input--large:disabled:-ms-input-placeholder {
3025
+ color: #000;
3026
+ }
3027
+
3028
+ .topcoat-text-input--large:invalid {
3029
+ border: 1px solid #d83b75;
3030
+ }
3031
+
3032
+ /**
3033
+ *
3034
+ * Copyright 2012 Adobe Systems Inc.;
3035
+ *
3036
+ * Licensed under the Apache License, Version 2.0 (the "License");
3037
+ * you may not use this file except in compliance with the License.
3038
+ * You may obtain a copy of the License at
3039
+ *
3040
+ * http://www.apache.org/licenses/LICENSE-2.0
3041
+ *
3042
+ * Unless required by applicable law or agreed to in writing, software
3043
+ * distributed under the License is distributed on an "AS IS" BASIS,
3044
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3045
+ * See the License for the specific language governing permissions and
3046
+ * limitations under the License.
3047
+ *
3048
+ */
3049
+
3050
+ /**
3051
+ *
3052
+ * Copyright 2012 Adobe Systems Inc.;
3053
+ *
3054
+ * Licensed under the Apache License, Version 2.0 (the "License");
3055
+ * you may not use this file except in compliance with the License.
3056
+ * You may obtain a copy of the License at
3057
+ *
3058
+ * http://www.apache.org/licenses/LICENSE-2.0
3059
+ *
3060
+ * Unless required by applicable law or agreed to in writing, software
3061
+ * distributed under the License is distributed on an "AS IS" BASIS,
3062
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3063
+ * See the License for the specific language governing permissions and
3064
+ * limitations under the License.
3065
+ *
3066
+ */
3067
+
3068
+ .textarea {
3069
+ -moz-box-sizing: border-box;
3070
+ box-sizing: border-box;
3071
+ background-clip: padding-box;
3072
+ padding: 0;
3073
+ margin: 0;
3074
+ font: inherit;
3075
+ color: inherit;
3076
+ background: transparent;
3077
+ border: none;
3078
+ vertical-align: top;
3079
+ resize: none;
3080
+ outline: none;
3081
+ }
3082
+
3083
+ .textarea:disabled {
3084
+ opacity: 0.3;
3085
+ cursor: default;
3086
+ pointer-events: none;
3087
+ }
3088
+
3089
+ /**
3090
+ *
3091
+ * Copyright 2012 Adobe Systems Inc.;
3092
+ *
3093
+ * Licensed under the Apache License, Version 2.0 (the "License");
3094
+ * you may not use this file except in compliance with the License.
3095
+ * You may obtain a copy of the License at
3096
+ *
3097
+ * http://www.apache.org/licenses/LICENSE-2.0
3098
+ *
3099
+ * Unless required by applicable law or agreed to in writing, software
3100
+ * distributed under the License is distributed on an "AS IS" BASIS,
3101
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3102
+ * See the License for the specific language governing permissions and
3103
+ * limitations under the License.
3104
+ *
3105
+ */
3106
+
3107
+ /**
3108
+ *
3109
+ * Copyright 2012 Adobe Systems Inc.;
3110
+ *
3111
+ * Licensed under the Apache License, Version 2.0 (the "License");
3112
+ * you may not use this file except in compliance with the License.
3113
+ * You may obtain a copy of the License at
3114
+ *
3115
+ * http://www.apache.org/licenses/LICENSE-2.0
3116
+ *
3117
+ * Unless required by applicable law or agreed to in writing, software
3118
+ * distributed under the License is distributed on an "AS IS" BASIS,
3119
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3120
+ * See the License for the specific language governing permissions and
3121
+ * limitations under the License.
3122
+ *
3123
+ */
3124
+
3125
+ .textarea,
3126
+ .topcoat-textarea,
3127
+ .topcoat-textarea--large {
3128
+ -moz-box-sizing: border-box;
3129
+ box-sizing: border-box;
3130
+ background-clip: padding-box;
3131
+ padding: 0;
3132
+ margin: 0;
3133
+ font: inherit;
3134
+ color: inherit;
3135
+ background: transparent;
3136
+ border: none;
3137
+ vertical-align: top;
3138
+ resize: none;
3139
+ outline: none;
3140
+ }
3141
+
3142
+ .textarea:disabled,
3143
+ .topcoat-textarea:disabled,
3144
+ .topcoat-textarea--large:disabled {
3145
+ opacity: 0.3;
3146
+ cursor: default;
3147
+ pointer-events: none;
3148
+ }
3149
+
3150
+ /* topdoc
3151
+ name: Textarea
3152
+ description: A whole area, just for text.
3153
+ modifiers:
3154
+ :disabled: Disabled state
3155
+ markup:
3156
+ <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea"></textarea>
3157
+ <br>
3158
+ <br>
3159
+ <textarea class="topcoat-textarea" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
3160
+ tags:
3161
+ - desktop
3162
+ - light
3163
+ - mobile
3164
+ - form
3165
+ - input
3166
+ - textarea
3167
+ */
3168
+
3169
+ .topcoat-textarea,
3170
+ .topcoat-textarea--large {
3171
+ padding: 1rem;
3172
+ font-size: 1rem;
3173
+ font-weight: 400;
3174
+ border-radius: 4px;
3175
+ line-height: 1.313rem;
3176
+ border: 1px solid #a5a8a8;
3177
+ background-color: #d3d7d7;
3178
+ box-shadow: inset 0 1px rgba(0,0,0,0.12);
3179
+ color: #454545;
3180
+ letter-spacing: 0;
3181
+ }
3182
+
3183
+ .topcoat-textarea:focus,
3184
+ .topcoat-textarea--large:focus {
3185
+ background-color: #edf1f1;
3186
+ color: #000;
3187
+ border: 1px solid #0940fd;
3188
+ box-shadow: 0 0 0 2px #6fb5f1;
3189
+ }
3190
+
3191
+ .topcoat-textarea:disabled::-webkit-input-placeholder {
3192
+ color: #000;
3193
+ }
3194
+
3195
+ .topcoat-textarea:disabled::-moz-placeholder {
3196
+ color: #000;
3197
+ }
3198
+
3199
+ .topcoat-textarea:disabled:-ms-input-placeholder {
3200
+ color: #000;
3201
+ }
3202
+
3203
+ /* topdoc
3204
+ name: Large Textarea
3205
+ description: A whole area, just for text; now available in large.
3206
+ modifiers:
3207
+ :disabled: Disabled state
3208
+ markup:
3209
+ <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea"></textarea>
3210
+ <br>
3211
+ <br>
3212
+ <textarea class="topcoat-textarea--large" rows="6" cols="36" placeholder="Textarea" disabled></textarea>
3213
+ tags:
3214
+ - desktop
3215
+ - light
3216
+ - mobile
3217
+ - form
3218
+ - input
3219
+ - textarea
3220
+ */
3221
+
3222
+ .topcoat-textarea--large {
3223
+ font-size: 1.3rem;
3224
+ line-height: 1.688rem;
3225
+ }
3226
+
3227
+ .topcoat-textarea--large:disabled {
3228
+ color: #000;
3229
+ }
3230
+
3231
+ .topcoat-textarea--large:disabled::-webkit-input-placeholder {
3232
+ color: #000;
3233
+ }
3234
+
3235
+ .topcoat-textarea--large:disabled::-moz-placeholder {
3236
+ color: #000;
3237
+ }
3238
+
3239
+ .topcoat-textarea--large:disabled:-ms-input-placeholder {
3240
+ color: #000;
3241
+ }
3242
+
3243
+ @font-face {
3244
+ font-family: "Source Sans";
3245
+ src: font-url("topcoat/SourceSansPro-Regular.otf");
3246
+ }
3247
+
3248
+ @font-face {
3249
+ font-family: "Source Sans";
3250
+ src: font-url("topcoat/SourceSansPro-Light.otf");
3251
+ font-weight: 200;
3252
+ }
3253
+
3254
+ @font-face {
3255
+ font-family: "Source Sans";
3256
+ src: font-url("topcoat/SourceSansPro-Semibold.otf");
3257
+ font-weight: 600;
3258
+ }
3259
+
3260
+ body {
3261
+ margin: 0;
3262
+ padding: 0;
3263
+ background: #dfe2e2;
3264
+ color: #000;
3265
+ font: 16px "Source Sans", helvetica, arial, sans-serif;
3266
+ font-weight: 200;
3267
+ }
3268
+
3269
+ :focus {
3270
+ outline-color: transparent;
3271
+ outline-style: none;
3272
+ }
3273
+
3274
+ .topcoat-icon--menu-stack {
3275
+ background: image-url("topcoat/hamburger_dark.svg") no-repeat;
3276
+ background-size: cover;
3277
+ }
3278
+
3279
+ .quarter {
3280
+ width: 25%;
3281
+ }
3282
+
3283
+ .half {
3284
+ width: 50%;
3285
+ }
3286
+
3287
+ .three-quarters {
3288
+ width: 75%;
3289
+ }
3290
+
3291
+ .third {
3292
+ width: 33.333%;
3293
+ }
3294
+
3295
+ .two-thirds {
3296
+ width: 66.666%;
3297
+ }
3298
+
3299
+ .full {
3300
+ width: 100%;
3301
+ }
3302
+
3303
+ .left {
3304
+ text-align: left;
3305
+ }
3306
+
3307
+ .center {
3308
+ text-align: center;
3309
+ }
3310
+
3311
+ .right {
3312
+ text-align: right;
3313
+ }
3314
+
3315
+ .reset-ui {
3316
+ -moz-box-sizing: border-box;
3317
+ box-sizing: border-box;
3318
+ background-clip: padding-box;
3319
+ position: relative;
3320
+ display: inline-block;
3321
+ vertical-align: top;
3322
+ padding: 0;
3323
+ margin: 0;
3324
+ font: inherit;
3325
+ color: inherit;
3326
+ background: transparent;
3327
+ border: none;
3328
+ cursor: default;
3329
+ -webkit-user-select: none;
3330
+ -moz-user-select: none;
3331
+ -ms-user-select: none;
3332
+ user-select: none;
3333
+ text-overflow: ellipsis;
3334
+ white-space: nowrap;
3335
+ overflow: hidden;
3336
+ }
3337
+
3338
+ /* This file should include color and image variables corresponding to the dark theme */
3339
+
3340
+ /* Call To Action */
3341
+
3342
+ /* Icons */
3343
+
3344
+ /* Navigation Bar */
3345
+
3346
+ /* Text Input */
3347
+
3348
+ /* Search Input */
3349
+
3350
+ /* List */
3351
+
3352
+ /* Checkbox */
3353
+
3354
+ /* Overlay */
3355
+
3356
+ /* Progress bar */
3357
+
3358
+ /* Checkbox */
3359
+
3360
+ /* Radio Button */
3361
+
3362
+ /* Tab bar */
3363
+
3364
+ /* Switch */
3365
+
3366
+ /* Icon Button */
3367
+
3368
+ /* Navigation bar */
3369
+
3370
+ /* List */
3371
+
3372
+ /* Search Input */
3373
+
3374
+ /* Textarea */
3375
+
3376
+ /* Checkbox */
3377
+
3378
+ /* Radio */
3379
+
3380
+ /* Range input */
3381
+
3382
+ /* Search Input */
3383
+
3384
+ /* Switch */
3385
+
3386
+ /* This file should include color and image variables corresponding to the light theme */
3387
+
3388
+ /* Call To Action */
3389
+
3390
+ /* Icons */
3391
+
3392
+ /* Navigation Bar */
3393
+
3394
+ /* Text Input */
3395
+
3396
+ /* List */
3397
+
3398
+ /* Overlay */
3399
+
3400
+ /* Progress bar */
3401
+
3402
+ /* Checkbox */
3403
+
3404
+ /* Range input */
3405
+
3406
+ /* Radio Button */
3407
+
3408
+ /* Tab bar */
3409
+
3410
+ /* Switch */
3411
+
3412
+ /* Containers */
3413
+
3414
+ /* Icon Button */
3415
+
3416
+ /* Navigation bar */
3417
+
3418
+ /* List */
3419
+
3420
+ /* Search Input */
3421
+
3422
+ /* Text Area */
3423
+
3424
+ /* Checkbox */
3425
+
3426
+ /* Radio */
3427
+
3428
+ /* Range input */
3429
+
3430
+ /* Search Input */
3431
+
3432
+ /* Switch */
3433
+
3434
+ /* Text Input */
3435
+
3436
+ /* Radio input */
3437
+
3438
+ /* Overlay */
3439
+
3440
+ /* Textarea */
3441
+
3442
+ /* Progress bar container */
3443
+
3444
+ /* Progress bar progress */
3445
+
3446
+ /* Search input */
3447
+
3448
+ /* Switch */
3449
+
3450
+ /* Notification */