@financial-times/n-myft-ui 28.2.7 → 28.3.0
Sign up to get free protection for your applications and to get access to all the features.
package/demos/src/demo.scss
CHANGED
|
@@ -37,6 +37,10 @@ $system-code: "n-myft-ui-demo";
|
|
|
37
37
|
background-color: oColorsByName('claret-60');
|
|
38
38
|
color: oColorsByName('white');
|
|
39
39
|
}
|
|
40
|
+
.concept-collection--alphaville {
|
|
41
|
+
background-color: oColorsByName('matisse');
|
|
42
|
+
color: oColorsByName('white');
|
|
43
|
+
}
|
|
40
44
|
|
|
41
45
|
.concept-collection--opinion {
|
|
42
46
|
background-color: oColorsByName('sky');
|
|
@@ -249,6 +249,40 @@
|
|
|
249
249
|
</div>
|
|
250
250
|
</div>
|
|
251
251
|
</div>
|
|
252
|
+
<div class="o-grid-row">
|
|
253
|
+
<div data-o-grid-colspan="12">
|
|
254
|
+
<div class="concept-collection concept-collection--alphaville">
|
|
255
|
+
<h3 class="concept-collection__title">
|
|
256
|
+
Alphaville
|
|
257
|
+
</h3>
|
|
258
|
+
<ul class="concept-collection__list">
|
|
259
|
+
<li>
|
|
260
|
+
<button
|
|
261
|
+
class="n-myft-follow-button n-myft-follow-button--alphaville"
|
|
262
|
+
aria-pressed="false">
|
|
263
|
+
Theo Leanse
|
|
264
|
+
</button>
|
|
265
|
+
</li>
|
|
266
|
+
<li>
|
|
267
|
+
<button
|
|
268
|
+
class="n-myft-follow-button n-myft-follow-button--alphaville"
|
|
269
|
+
aria-pressed="true">
|
|
270
|
+
Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
|
|
271
|
+
say that they were perfectly normal, thank you very much.
|
|
272
|
+
</button>
|
|
273
|
+
</li>
|
|
274
|
+
<li>
|
|
275
|
+
<button
|
|
276
|
+
disabled
|
|
277
|
+
class="n-myft-follow-button n-myft-follow-button--alphaville"
|
|
278
|
+
aria-pressed="false">
|
|
279
|
+
chee
|
|
280
|
+
</button>
|
|
281
|
+
</li>
|
|
282
|
+
</ul>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
252
286
|
</section>
|
|
253
287
|
|
|
254
288
|
<section
|
|
@@ -431,6 +465,40 @@
|
|
|
431
465
|
</div>
|
|
432
466
|
</div>
|
|
433
467
|
</div>
|
|
468
|
+
<div class="o-grid-row">
|
|
469
|
+
<div data-o-grid-colspan="12">
|
|
470
|
+
<div class="concept-collection concept-collection--alphaville">
|
|
471
|
+
<h3 class="concept-collection__title">
|
|
472
|
+
Alphaville topper
|
|
473
|
+
</h3>
|
|
474
|
+
<ul class="concept-collection__list">
|
|
475
|
+
<li>
|
|
476
|
+
<a
|
|
477
|
+
class="n-myft-concept-pill n-myft-concept-pill--alphaville"
|
|
478
|
+
aria-pressed="false">
|
|
479
|
+
Theo Leanse
|
|
480
|
+
</a>
|
|
481
|
+
</li>
|
|
482
|
+
<li>
|
|
483
|
+
<a
|
|
484
|
+
class="n-myft-concept-pill n-myft-concept-pill--alphaville"
|
|
485
|
+
aria-pressed="false">
|
|
486
|
+
Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to
|
|
487
|
+
say that they were perfectly normal, thank you very much.
|
|
488
|
+
</a>
|
|
489
|
+
</li>
|
|
490
|
+
<li>
|
|
491
|
+
<a
|
|
492
|
+
disabled
|
|
493
|
+
class="n-myft-concept-pill n-myft-concept-pill--alphaville"
|
|
494
|
+
aria-pressed="true">
|
|
495
|
+
chee
|
|
496
|
+
</a>
|
|
497
|
+
</li>
|
|
498
|
+
</ul>
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
</div>
|
|
434
502
|
</section>
|
|
435
503
|
|
|
436
504
|
<section
|
|
@@ -30,6 +30,14 @@ $myft-lozenge-themes: (
|
|
|
30
30
|
pressed-highlight: rgba(oColorsByName('white'), 0.2),
|
|
31
31
|
disabled: rgba(oColorsByName('white'), 0.5),
|
|
32
32
|
focus-outline: oColorsByName('white')
|
|
33
|
+
),
|
|
34
|
+
alphaville: (
|
|
35
|
+
background: oColorsByName('white'),
|
|
36
|
+
text: oColorsByName('matisse'),
|
|
37
|
+
highlight: rgba(white, 0.8),
|
|
38
|
+
pressed-highlight: rgba(white, 0.2),
|
|
39
|
+
disabled: rgba(oColorsByName('white'), 0.5),
|
|
40
|
+
focus-outline: oColorsByName('white')
|
|
33
41
|
)
|
|
34
42
|
);
|
|
35
43
|
|