@financial-times/n-myft-ui 30.0.1 → 30.0.2
Sign up to get free protection for your applications and to get access to all the features.
package/demos/src/demo.scss
CHANGED
|
@@ -42,6 +42,12 @@ $system-code: "n-myft-ui-demo";
|
|
|
42
42
|
background-color: oColorsByName('claret-60');
|
|
43
43
|
color: oColorsByName('white');
|
|
44
44
|
}
|
|
45
|
+
|
|
46
|
+
.concept-collection--inverse-monochrome {
|
|
47
|
+
background-color: oColorsByName('white');
|
|
48
|
+
color: oColorsByName('black');
|
|
49
|
+
}
|
|
50
|
+
|
|
45
51
|
.concept-collection--alphaville {
|
|
46
52
|
background-color: oColorsByName('matisse');
|
|
47
53
|
color: oColorsByName('white');
|
|
@@ -212,6 +212,41 @@
|
|
|
212
212
|
</div>
|
|
213
213
|
</div>
|
|
214
214
|
|
|
215
|
+
<div class="o-grid-row">
|
|
216
|
+
<div data-o-grid-colspan="12">
|
|
217
|
+
<div class="concept-collection concept-collection--inverse-monochrome">
|
|
218
|
+
<h3 class="concept-collection__title">
|
|
219
|
+
Inverse Monochrome
|
|
220
|
+
</h3>
|
|
221
|
+
<ul class="concept-collection__list">
|
|
222
|
+
<li>
|
|
223
|
+
<button
|
|
224
|
+
class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
|
|
225
|
+
aria-pressed="false">
|
|
226
|
+
Theo Leanse
|
|
227
|
+
</button>
|
|
228
|
+
</li>
|
|
229
|
+
<li>
|
|
230
|
+
<button
|
|
231
|
+
class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
|
|
232
|
+
aria-pressed="true">
|
|
233
|
+
Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
|
|
234
|
+
say that they were perfectly normal, thank you very much.
|
|
235
|
+
</button>
|
|
236
|
+
</li>
|
|
237
|
+
<li>
|
|
238
|
+
<button
|
|
239
|
+
disabled
|
|
240
|
+
class="n-myft-follow-button n-myft-follow-button--inverse-monochrome"
|
|
241
|
+
aria-pressed="true">
|
|
242
|
+
chee
|
|
243
|
+
</button>
|
|
244
|
+
</li>
|
|
245
|
+
</ul>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
215
250
|
<div class="o-grid-row">
|
|
216
251
|
<div data-o-grid-colspan="12">
|
|
217
252
|
<div class="concept-collection concept-collection--opinion">
|
|
@@ -428,6 +463,42 @@
|
|
|
428
463
|
</div>
|
|
429
464
|
</div>
|
|
430
465
|
|
|
466
|
+
<div class="o-grid-row">
|
|
467
|
+
<div data-o-grid-colspan="12">
|
|
468
|
+
<div class="concept-collection concept-collection--inverse-monochrome">
|
|
469
|
+
<h3 class="concept-collection__title">
|
|
470
|
+
Inverse Monochrome
|
|
471
|
+
</h3>
|
|
472
|
+
|
|
473
|
+
<ul class="concept-collection__list">
|
|
474
|
+
<li>
|
|
475
|
+
<a
|
|
476
|
+
class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
|
|
477
|
+
aria-pressed="false">
|
|
478
|
+
Theo Leanse
|
|
479
|
+
</a>
|
|
480
|
+
</li>
|
|
481
|
+
<li>
|
|
482
|
+
<a
|
|
483
|
+
class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
|
|
484
|
+
aria-pressed="false">
|
|
485
|
+
Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
|
|
486
|
+
say that they were perfectly normal, thank you very much.
|
|
487
|
+
</a>
|
|
488
|
+
</li>
|
|
489
|
+
<li>
|
|
490
|
+
<a
|
|
491
|
+
disabled
|
|
492
|
+
class="n-myft-concept-pill n-myft-concept-pill--inverse-monochrome"
|
|
493
|
+
aria-pressed="true">
|
|
494
|
+
chee
|
|
495
|
+
</a>
|
|
496
|
+
</li>
|
|
497
|
+
</ul>
|
|
498
|
+
</div>
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
431
502
|
<div class="o-grid-row">
|
|
432
503
|
<div data-o-grid-colspan="12">
|
|
433
504
|
<div class="concept-collection concept-collection--opinion">
|
|
@@ -32,6 +32,14 @@ $myft-lozenge-themes: (
|
|
|
32
32
|
pressed-highlight: rgba(oColorsByName('white'), 0.2),
|
|
33
33
|
disabled: rgba(oColorsByName('white'), 0.5),
|
|
34
34
|
),
|
|
35
|
+
inverse-monochrome: (
|
|
36
|
+
toggle-button-theme: ('color': 'black'),
|
|
37
|
+
background: oColorsByName('black'),
|
|
38
|
+
text: oColorsByName('white'),
|
|
39
|
+
highlight: oColorsByName('black-80'),
|
|
40
|
+
pressed-highlight: rgba(oColorsByName('black'), 0.2),
|
|
41
|
+
disabled: rgba(oColorsByName('black'), 0.5),
|
|
42
|
+
),
|
|
35
43
|
alphaville: (
|
|
36
44
|
toggle-button-theme: 'inverse',
|
|
37
45
|
background: oColorsByName('white'),
|