topcoat-rails 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +1 -0
- data/README.md +4 -2
- data/Rakefile +1 -1
- data/app/assets/stylesheets/topcoat/desktop-dark.scss +942 -0
- data/app/assets/stylesheets/topcoat/desktop-light.scss +942 -0
- data/app/assets/stylesheets/topcoat/{dark.scss → mobile-dark.scss} +6 -18
- data/app/assets/stylesheets/topcoat/{light.scss → mobile-light.scss} +6 -18
- data/lib/topcoat-rails/version.rb +1 -1
- metadata +8 -6
data/.gitignore
CHANGED
data/README.md
CHANGED
|
@@ -22,8 +22,10 @@ Or install it yourself as:
|
|
|
22
22
|
Choose whatever version you prefer:
|
|
23
23
|
|
|
24
24
|
```css
|
|
25
|
-
*= require topcoat/dark
|
|
26
|
-
*= require topcoat/light
|
|
25
|
+
*= require topcoat/desktop-dark
|
|
26
|
+
*= require topcoat/desktop-light
|
|
27
|
+
*= require topcoat/mobile-dark
|
|
28
|
+
*= require topcoat/mobile-light
|
|
27
29
|
```
|
|
28
30
|
|
|
29
31
|
## Contributing
|
data/Rakefile
CHANGED
|
@@ -20,7 +20,7 @@ namespace :topcoat do
|
|
|
20
20
|
TOPCOAT_CSS = FileList["topcoat/release/css/*.*"].exclude(/min/)
|
|
21
21
|
ASSETS_CSS = TOPCOAT_CSS.pathmap("app/assets/stylesheets/topcoat/%f")
|
|
22
22
|
ASSETS_CSS.zip(TOPCOAT_CSS).each do |target, source|
|
|
23
|
-
target.gsub!(/topcoat
|
|
23
|
+
target.gsub!(/topcoat-/, '')
|
|
24
24
|
target.gsub!(/css/, 'scss')
|
|
25
25
|
# file target => [source] { cp source, target, verbose: true }
|
|
26
26
|
File.open(target,'w+') do |output_file|
|
|
@@ -0,0 +1,942 @@
|
|
|
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
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
background: #3a3f42 image-url("topcoat/bg_dark.png") repeat-x;
|
|
20
|
+
color: #000;
|
|
21
|
+
font: 16px "Source Sans", helvetica, arial, sans-serif;
|
|
22
|
+
font-weight: 200;
|
|
23
|
+
text-rendering: optimizeLegibility;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.topcoat-icon--menu-stack {
|
|
27
|
+
background: image-url("topcoat/hamburger_light.svg") no-repeat;
|
|
28
|
+
-webkit-background-size: cover;
|
|
29
|
+
-moz-background-size: cover;
|
|
30
|
+
background-size: cover;
|
|
31
|
+
}
|
|
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%;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.left {
|
|
53
|
+
text-align: left;
|
|
54
|
+
}
|
|
55
|
+
.center {
|
|
56
|
+
text-align: center;
|
|
57
|
+
}
|
|
58
|
+
.right {
|
|
59
|
+
text-align: right;
|
|
60
|
+
}
|
|
61
|
+
|
|
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;
|
|
78
|
+
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;
|
|
87
|
+
}
|
|
88
|
+
|
|
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.
|
|
102
|
+
*/
|
|
103
|
+
|
|
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
|
|
115
|
+
|
|
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>
|
|
119
|
+
*/
|
|
120
|
+
.topcoat-button,
|
|
121
|
+
.topcoat-button--quiet,
|
|
122
|
+
.topcoat-button--large,
|
|
123
|
+
.topcoat-button--large--quiet,
|
|
124
|
+
.topcoat-button--cta,
|
|
125
|
+
.topcoat-button--large--cta {
|
|
126
|
+
position: relative;
|
|
127
|
+
display: inline-block;
|
|
128
|
+
vertical-align: top;
|
|
129
|
+
-webkit-box-sizing: border-box;
|
|
130
|
+
-moz-box-sizing: border-box;
|
|
131
|
+
box-sizing: border-box;
|
|
132
|
+
-webkit-background-clip: padding;
|
|
133
|
+
-moz-background-clip: padding;
|
|
134
|
+
background-clip: padding-box;
|
|
135
|
+
padding: 0;
|
|
136
|
+
margin: 0;
|
|
137
|
+
font: inherit;
|
|
138
|
+
color: inherit;
|
|
139
|
+
background: transparent;
|
|
140
|
+
border: none;
|
|
141
|
+
cursor: default;
|
|
142
|
+
-webkit-user-select: none;
|
|
143
|
+
-moz-user-select: none;
|
|
144
|
+
-ms-user-select: none;
|
|
145
|
+
user-select: none;
|
|
146
|
+
-o-text-overflow: ellipsis;
|
|
147
|
+
text-overflow: ellipsis;
|
|
148
|
+
white-space: nowrap;
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
padding: 0 1.16rem;
|
|
151
|
+
font-size: 12px;
|
|
152
|
+
line-height: 2rem;
|
|
153
|
+
letter-spacing: 1px;
|
|
154
|
+
color: #c6c8c8;
|
|
155
|
+
text-shadow: 0 -1px rgba(0,0,0,0.69);
|
|
156
|
+
vertical-align: top;
|
|
157
|
+
background-color: #595b5b;
|
|
158
|
+
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.12);
|
|
159
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.12);
|
|
160
|
+
border: 1px solid rgba(0,0,0,0.36);
|
|
161
|
+
-webkit-border-radius: 3px;
|
|
162
|
+
border-radius: 3px;
|
|
163
|
+
}
|
|
164
|
+
.topcoat-button:active,
|
|
165
|
+
.topcoat-button.is-active,
|
|
166
|
+
.topcoat-button--large:active,
|
|
167
|
+
.topcoat-button--large.is-active {
|
|
168
|
+
background-color: #404141;
|
|
169
|
+
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
170
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
171
|
+
}
|
|
172
|
+
.topcoat-button:disabled,
|
|
173
|
+
.topcoat-button.is-disabled {
|
|
174
|
+
opacity: 0.3;
|
|
175
|
+
cursor: default;
|
|
176
|
+
pointer-events: none;
|
|
177
|
+
}
|
|
178
|
+
/*
|
|
179
|
+
Quiet Button
|
|
180
|
+
------------
|
|
181
|
+
|
|
182
|
+
:active - Quiet button active state
|
|
183
|
+
|
|
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
|
|
189
|
+
|
|
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
|
+
.topcoat-button--quiet {
|
|
195
|
+
background: transparent;
|
|
196
|
+
border: 1px solid transparent;
|
|
197
|
+
-webkit-box-shadow: none;
|
|
198
|
+
box-shadow: none;
|
|
199
|
+
}
|
|
200
|
+
.topcoat-button--quiet:active,
|
|
201
|
+
.topcoat-button--quiet.is-active,
|
|
202
|
+
.topcoat-button--large--quiet:active,
|
|
203
|
+
.topcoat-button--large--quiet.is-active {
|
|
204
|
+
color: #c6c8c8;
|
|
205
|
+
text-shadow: 0 -1px rgba(0,0,0,0.69);
|
|
206
|
+
background-color: #404141;
|
|
207
|
+
border: 1px solid rgba(0,0,0,0.36);
|
|
208
|
+
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
209
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
210
|
+
}
|
|
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
|
+
|
|
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
|
+
.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;
|
|
243
|
+
}
|
|
244
|
+
/*
|
|
245
|
+
Large Quiet Button
|
|
246
|
+
------------------
|
|
247
|
+
|
|
248
|
+
:active - Active state
|
|
249
|
+
|
|
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
|
+
.topcoat-button--large--quiet {
|
|
262
|
+
background: transparent;
|
|
263
|
+
border: 1px solid transparent;
|
|
264
|
+
-webkit-box-shadow: none;
|
|
265
|
+
box-shadow: none;
|
|
266
|
+
}
|
|
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
|
+
|
|
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
|
+
.topcoat-button--cta,
|
|
292
|
+
.topcoat-button--large--cta {
|
|
293
|
+
border: 1px solid #143250;
|
|
294
|
+
background-color: #288edf;
|
|
295
|
+
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
|
296
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
|
297
|
+
color: #fff;
|
|
298
|
+
font-weight: 500;
|
|
299
|
+
text-shadow: 0 -1px rgba(0,0,0,0.36);
|
|
300
|
+
}
|
|
301
|
+
.topcoat-button--cta:active,
|
|
302
|
+
.topcoat-button--cta.is-active,
|
|
303
|
+
.topcoat-button--large--cta:active,
|
|
304
|
+
.topcoat-button--large--cta.is-active {
|
|
305
|
+
background-color: #1976c3;
|
|
306
|
+
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
307
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
|
308
|
+
}
|
|
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
|
+
|
|
319
|
+
:active - Active state
|
|
320
|
+
|
|
321
|
+
.is-active - Simulates active state touch interfaces
|
|
322
|
+
|
|
323
|
+
:disabled - Disabled state
|
|
324
|
+
|
|
325
|
+
.is-disabled - Simulates disabled state
|
|
326
|
+
|
|
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;
|
|
334
|
+
}
|
|
335
|
+
.topcoat-button--large-cta:disabled,
|
|
336
|
+
.topcoat-button--large--cta.is-disabled {
|
|
337
|
+
opacity: 0.3;
|
|
338
|
+
cursor: default;
|
|
339
|
+
pointer-events: none;
|
|
340
|
+
}
|
|
341
|
+
|
|
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.
|
|
355
|
+
*/
|
|
356
|
+
|
|
357
|
+
/*
|
|
358
|
+
Icon Button
|
|
359
|
+
-----------
|
|
360
|
+
|
|
361
|
+
:active - Active state
|
|
362
|
+
|
|
363
|
+
.is-active - Simulates an active state on mobile devices
|
|
364
|
+
|
|
365
|
+
:disabled - Disabled state
|
|
366
|
+
|
|
367
|
+
.is-disabled - Simulates a disabled state on mobile devices
|
|
368
|
+
|
|
369
|
+
<a class="topcoat-icon-button">
|
|
370
|
+
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
|
|
371
|
+
</a>
|
|
372
|
+
|
|
373
|
+
<a class="topcoat-icon-button is-active">
|
|
374
|
+
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
|
|
375
|
+
</a>
|
|
376
|
+
|
|
377
|
+
<a class="topcoat-icon-button is-disabled">
|
|
378
|
+
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
|
|
379
|
+
</a>
|
|
380
|
+
*/
|
|
381
|
+
.topcoat-icon-button,
|
|
382
|
+
.topcoat-icon-button--quiet,
|
|
383
|
+
.topcoat-icon-button--large,
|
|
384
|
+
.topcoat-icon-button--large--quiet {
|
|
385
|
+
position: relative;
|
|
386
|
+
display: inline-block;
|
|
387
|
+
vertical-align: top;
|
|
388
|
+
-webkit-box-sizing: border-box;
|
|
389
|
+
-moz-box-sizing: border-box;
|
|
390
|
+
box-sizing: border-box;
|
|
391
|
+
-webkit-background-clip: padding;
|
|
392
|
+
-moz-background-clip: padding;
|
|
393
|
+
background-clip: padding-box;
|
|
394
|
+
padding: 0;
|
|
395
|
+
margin: 0;
|
|
396
|
+
font: inherit;
|
|
397
|
+
color: inherit;
|
|
398
|
+
background: transparent;
|
|
399
|
+
border: none;
|
|
400
|
+
cursor: default;
|
|
401
|
+
-webkit-user-select: none;
|
|
402
|
+
-moz-user-select: none;
|
|
403
|
+
-ms-user-select: none;
|
|
404
|
+
user-select: none;
|
|
405
|
+
-o-text-overflow: ellipsis;
|
|
406
|
+
text-overflow: ellipsis;
|
|
407
|
+
white-space: nowrap;
|
|
408
|
+
overflow: hidden;
|
|
409
|
+
padding: 0 0.5rem;
|
|
410
|
+
line-height: 2rem;
|
|
411
|
+
letter-spacing: 1px;
|
|
412
|
+
color: #c6c8c8;
|
|
413
|
+
text-shadow: 0 -1px rgba(0,0,0,0.69);
|
|
414
|
+
vertical-align: baseline;
|
|
415
|
+
background-color: #595b5b;
|
|
416
|
+
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.12);
|
|
417
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.12);
|
|
418
|
+
border: 1px solid rgba(0,0,0,0.36);
|
|
419
|
+
-webkit-border-radius: 3px;
|
|
420
|
+
border-radius: 3px;
|
|
421
|
+
}
|
|
422
|
+
.topcoat-icon-button:active,
|
|
423
|
+
.topcoat-icon-button.is-active {
|
|
424
|
+
background-color: #404141;
|
|
425
|
+
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
426
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
427
|
+
}
|
|
428
|
+
.topcoat-icon-button:disabled,
|
|
429
|
+
.topcoat-icon-button.is-disabled {
|
|
430
|
+
opacity: 0.3;
|
|
431
|
+
cursor: default;
|
|
432
|
+
pointer-events: none;
|
|
433
|
+
}
|
|
434
|
+
/*
|
|
435
|
+
Quiet Icon Button
|
|
436
|
+
-----------------
|
|
437
|
+
|
|
438
|
+
:active - Button active state
|
|
439
|
+
|
|
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>
|
|
449
|
+
|
|
450
|
+
<a class="topcoat-icon-button--quiet is-active">
|
|
451
|
+
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
|
|
452
|
+
</a>
|
|
453
|
+
|
|
454
|
+
<a class="topcoat-icon-button--quiet is-disabled">
|
|
455
|
+
<span class="topcoat-icon topcoat-icon--menu-stack"></span>
|
|
456
|
+
</a>
|
|
457
|
+
*/
|
|
458
|
+
.topcoat-icon-button--quiet {
|
|
459
|
+
background: transparent;
|
|
460
|
+
border: 1px solid transparent;
|
|
461
|
+
-webkit-box-shadow: none;
|
|
462
|
+
box-shadow: none;
|
|
463
|
+
}
|
|
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: #c6c8c8;
|
|
469
|
+
text-shadow: 0 -1px rgba(0,0,0,0.69);
|
|
470
|
+
background-color: #404141;
|
|
471
|
+
border: 1px solid rgba(0,0,0,0.36);
|
|
472
|
+
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
473
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
474
|
+
}
|
|
475
|
+
.topcoat-icon-button--quiet:disabled,
|
|
476
|
+
.topcoat-icon-button--quiet.is-disabled {
|
|
477
|
+
opacity: 0.3;
|
|
478
|
+
cursor: default;
|
|
479
|
+
pointer-events: none;
|
|
480
|
+
}
|
|
481
|
+
/*
|
|
482
|
+
Large Icon Button
|
|
483
|
+
-----------------
|
|
484
|
+
|
|
485
|
+
:active - Active state
|
|
486
|
+
|
|
487
|
+
.is-active - Simulates an active state on mobile devices
|
|
488
|
+
|
|
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>
|
|
496
|
+
|
|
497
|
+
<a class="topcoat-icon-button--large is-active">
|
|
498
|
+
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
|
|
499
|
+
</a>
|
|
500
|
+
|
|
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;
|
|
510
|
+
}
|
|
511
|
+
.topcoat-icon-button--large:active,
|
|
512
|
+
.topcoat-icon-button--large.is-active {
|
|
513
|
+
background-color: #404141;
|
|
514
|
+
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
515
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
516
|
+
}
|
|
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
|
+
|
|
529
|
+
.is-active - Simulates an active state on mobile devices
|
|
530
|
+
|
|
531
|
+
:disabled - Disabled state
|
|
532
|
+
|
|
533
|
+
.is-disabled - Simulates a disabled state on mobile devices
|
|
534
|
+
|
|
535
|
+
<a class="topcoat-icon-button--large--quiet">
|
|
536
|
+
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
|
|
537
|
+
</a>
|
|
538
|
+
|
|
539
|
+
<a class="topcoat-icon-button--large--quiet is-active">
|
|
540
|
+
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
|
|
541
|
+
</a>
|
|
542
|
+
|
|
543
|
+
<a class="topcoat-icon-button--large--quiet is-disabled">
|
|
544
|
+
<span class="topcoat-icon--large topcoat-icon--menu-stack"></span>
|
|
545
|
+
</a>
|
|
546
|
+
*/
|
|
547
|
+
.topcoat-icon-button--large--quiet {
|
|
548
|
+
background: transparent;
|
|
549
|
+
border: 1px solid transparent;
|
|
550
|
+
-webkit-box-shadow: none;
|
|
551
|
+
box-shadow: none;
|
|
552
|
+
}
|
|
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;
|
|
572
|
+
}
|
|
573
|
+
|
|
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
|
|
579
|
+
|
|
580
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
581
|
+
|
|
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.
|
|
587
|
+
*/
|
|
588
|
+
|
|
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
|
+
|
|
608
|
+
*/
|
|
609
|
+
.topcoat-list__container {
|
|
610
|
+
padding: 0;
|
|
611
|
+
margin: 0;
|
|
612
|
+
font: inherit;
|
|
613
|
+
color: inherit;
|
|
614
|
+
background: transparent;
|
|
615
|
+
border: none;
|
|
616
|
+
cursor: default;
|
|
617
|
+
-webkit-user-select: none;
|
|
618
|
+
-moz-user-select: none;
|
|
619
|
+
-ms-user-select: none;
|
|
620
|
+
user-select: none;
|
|
621
|
+
overflow: auto;
|
|
622
|
+
-webkit-overflow-scrolling: touch;
|
|
623
|
+
border-top: 1px solid #2f3234;
|
|
624
|
+
border-bottom: 1px solid #eff1f1;
|
|
625
|
+
background-color: #444849;
|
|
626
|
+
}
|
|
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: #3b3e40;
|
|
633
|
+
color: #868888;
|
|
634
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
|
635
|
+
border-top: solid 1px rgba(255,255,255,0.1);
|
|
636
|
+
border-bottom: solid 1px rgba(255,255,255,0.05);
|
|
637
|
+
}
|
|
638
|
+
.topcoat-list {
|
|
639
|
+
padding: 0;
|
|
640
|
+
margin: 0;
|
|
641
|
+
list-style-type: none;
|
|
642
|
+
border-top: 1px solid #2f3234;
|
|
643
|
+
color: #c6c8c8;
|
|
644
|
+
}
|
|
645
|
+
.topcoat-list__item {
|
|
646
|
+
margin: 0;
|
|
647
|
+
padding: 0;
|
|
648
|
+
padding: 1.16rem;
|
|
649
|
+
border-top: 1px solid #5e6061;
|
|
650
|
+
border-bottom: 1px solid #2f3234;
|
|
651
|
+
}
|
|
652
|
+
.topcoat-list__item:first-child {
|
|
653
|
+
border-top: 1px solid rgba(0,0,0,0.05);
|
|
654
|
+
}
|
|
655
|
+
|
|
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
|
|
661
|
+
|
|
662
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
663
|
+
|
|
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.
|
|
669
|
+
*/
|
|
670
|
+
|
|
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>
|
|
690
|
+
*/
|
|
691
|
+
.topcoat-navigation-bar {
|
|
692
|
+
-webkit-box-sizing: border-box;
|
|
693
|
+
-moz-box-sizing: border-box;
|
|
694
|
+
box-sizing: border-box;
|
|
695
|
+
-webkit-background-clip: padding;
|
|
696
|
+
-moz-background-clip: padding;
|
|
697
|
+
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;
|
|
707
|
+
cursor: default;
|
|
708
|
+
-webkit-user-select: none;
|
|
709
|
+
-moz-user-select: none;
|
|
710
|
+
-ms-user-select: none;
|
|
711
|
+
user-select: none;
|
|
712
|
+
height: 2.6rem;
|
|
713
|
+
padding-left: 1rem;
|
|
714
|
+
padding-right: 1rem;
|
|
715
|
+
background: #595b5b;
|
|
716
|
+
color: #fff;
|
|
717
|
+
-webkit-box-shadow: inset 0 -1px #333434, 0 1px rgba(0,0,0,0.15);
|
|
718
|
+
box-shadow: inset 0 -1px #333434, 0 1px rgba(0,0,0,0.15);
|
|
719
|
+
}
|
|
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;
|
|
727
|
+
position: relative;
|
|
728
|
+
display: inline-block;
|
|
729
|
+
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;
|
|
739
|
+
}
|
|
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: #fff;
|
|
754
|
+
}
|
|
755
|
+
|
|
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
|
|
761
|
+
|
|
762
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
763
|
+
|
|
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.
|
|
769
|
+
*/
|
|
770
|
+
|
|
771
|
+
/*
|
|
772
|
+
Search Input
|
|
773
|
+
------------
|
|
774
|
+
|
|
775
|
+
:disabled - Disabled state
|
|
776
|
+
|
|
777
|
+
.is-disabled - Simulates a disabled state
|
|
778
|
+
|
|
779
|
+
<input type="search" value="" placeholder="search" class="topcoat-search-input">
|
|
780
|
+
<input type="search is-disabled" value="" placeholder="search" class="topcoat-search-input">
|
|
781
|
+
|
|
782
|
+
*/
|
|
783
|
+
.topcoat-search-input,
|
|
784
|
+
.topcoat-search-input--large {
|
|
785
|
+
vertical-align: top;
|
|
786
|
+
-webkit-box-sizing: border-box;
|
|
787
|
+
-moz-box-sizing: border-box;
|
|
788
|
+
box-sizing: border-box;
|
|
789
|
+
padding: 0 1.25rem;
|
|
790
|
+
-webkit-border-radius: 6px;
|
|
791
|
+
border-radius: 6px;
|
|
792
|
+
margin: 5px;
|
|
793
|
+
height: 3rem;
|
|
794
|
+
font: inherit;
|
|
795
|
+
font-weight: 200;
|
|
796
|
+
outline: none;
|
|
797
|
+
border: 1px solid rgba(0,0,0,0.36);
|
|
798
|
+
background-color: #595b5b;
|
|
799
|
+
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
800
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
801
|
+
color: #c6c8c8;
|
|
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_light.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;
|
|
821
|
+
}
|
|
822
|
+
.topcoat-search-input:focus::-webkit-input-placeholder,
|
|
823
|
+
.topcoat-search-input:focus::-webkit-input-placeholder {
|
|
824
|
+
color: #c6c8c8;
|
|
825
|
+
}
|
|
826
|
+
.topcoat-search-input:disabled,
|
|
827
|
+
.topcoat-search-input.is-disabled {
|
|
828
|
+
opacity: 0.3;
|
|
829
|
+
cursor: default;
|
|
830
|
+
pointer-events: none;
|
|
831
|
+
}
|
|
832
|
+
/*
|
|
833
|
+
Large Search Input
|
|
834
|
+
------------------
|
|
835
|
+
|
|
836
|
+
:disabled - Disabled state
|
|
837
|
+
|
|
838
|
+
.is-disabled - Simulates a disabled state
|
|
839
|
+
|
|
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">
|
|
842
|
+
|
|
843
|
+
*/
|
|
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;
|
|
855
|
+
}
|
|
856
|
+
.topcoat-search-input--large:disabled,
|
|
857
|
+
.topcoat-search-input--large.is-disabled {
|
|
858
|
+
opacity: 0.3;
|
|
859
|
+
cursor: default;
|
|
860
|
+
pointer-events: none;
|
|
861
|
+
}
|
|
862
|
+
|
|
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
|
|
868
|
+
|
|
869
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
870
|
+
|
|
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.
|
|
876
|
+
*/
|
|
877
|
+
|
|
878
|
+
/*
|
|
879
|
+
Text Input
|
|
880
|
+
----------
|
|
881
|
+
|
|
882
|
+
:disabled - Disabled state
|
|
883
|
+
.is-disabled - Simulates a disabled state on mobile devices
|
|
884
|
+
|
|
885
|
+
<input type="text" class="topcoat-text-input" value="" placeholder="text">
|
|
886
|
+
<input type="text" class="topcoat-text-input is-disabled" value="" placeholder="text">
|
|
887
|
+
|
|
888
|
+
*/
|
|
889
|
+
.topcoat-text-input,
|
|
890
|
+
.topcoat-text-input--large {
|
|
891
|
+
vertical-align: top;
|
|
892
|
+
-webkit-box-sizing: border-box;
|
|
893
|
+
-moz-box-sizing: border-box;
|
|
894
|
+
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;
|
|
902
|
+
outline: none;
|
|
903
|
+
border: 1px solid rgba(0,0,0,0.36);
|
|
904
|
+
background-color: #595b5b;
|
|
905
|
+
-webkit-box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
906
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.18);
|
|
907
|
+
color: #c6c8c8;
|
|
908
|
+
}
|
|
909
|
+
.topcoat-text-input:focus {
|
|
910
|
+
background-color: #fff;
|
|
911
|
+
color: #000;
|
|
912
|
+
}
|
|
913
|
+
.topcoat-text-input:disabled,
|
|
914
|
+
.topcoat-text-input.is-disabled {
|
|
915
|
+
opacity: 0.3;
|
|
916
|
+
cursor: default;
|
|
917
|
+
pointer-events: none;
|
|
918
|
+
}
|
|
919
|
+
/*
|
|
920
|
+
Large Text Input
|
|
921
|
+
----------------
|
|
922
|
+
|
|
923
|
+
:disabled - Disabled state
|
|
924
|
+
.is-disabled - Simulates a disabled state on mobile devices
|
|
925
|
+
|
|
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">
|
|
928
|
+
*/
|
|
929
|
+
.topcoat-text-input--large {
|
|
930
|
+
height: 2.6rem;
|
|
931
|
+
font-size: 1.167rem;
|
|
932
|
+
}
|
|
933
|
+
.topcoat-text-input--large:focus {
|
|
934
|
+
background-color: #fff;
|
|
935
|
+
color: #000;
|
|
936
|
+
}
|
|
937
|
+
.topcoat-text-input--large.is-disabled,
|
|
938
|
+
.topcoat-text-input--large:disabled {
|
|
939
|
+
opacity: 0.3;
|
|
940
|
+
cursor: default;
|
|
941
|
+
pointer-events: none;
|
|
942
|
+
}
|