25
25
// 20. Label
26
26
// 21. Media Object
27
27
// 22. Menu
28
- // 23. Off-canvas
29
- // 24. Orbit
30
- // 25. Pagination
31
- // 26. Progress Bar
32
- // 27. Reveal
33
- // 28. Slider
34
- // 29. Switch
35
- // 30. Table
36
- // 31. Tabs
37
- // 32. Thumbnail
38
- // 33. Title Bar
39
- // 34. Tooltip
40
- // 35. Top Bar
28
+ // 23. Meter
29
+ // 24. Off-canvas
30
+ // 25. Orbit
31
+ // 26. Pagination
32
+ // 27. Progress Bar
33
+ // 28. Reveal
34
+ // 29. Slider
35
+ // 30. Switch
36
+ // 31. Table
37
+ // 32. Tabs
38
+ // 33. Thumbnail
39
+ // 34. Title Bar
40
+ // 35. Tooltip
41
+ // 36. Top Bar
41
42
42
43
@import ' util/util' ;
43
44
47
48
$global-font-size : 100% ;
48
49
$global-width : rem-calc (1200 );
49
50
$global-lineheight : 1.5 ;
50
- $primary-color : #2199e8 ;
51
- $secondary-color : #777 ;
52
- $success-color : #3adb76 ;
53
- $warning-color : #ffae00 ;
54
- $alert-color : #ec5840 ;
51
+ $foundation-palette : (
52
+ primary : #2199e8 ,
53
+ secondary : #777 ,
54
+ success : #3adb76 ,
55
+ warning : #ffae00 ,
56
+ alert : #ec5840 ,
57
+ );
55
58
$light-gray : #e6e6e6 ;
56
59
$medium-gray : #cacaca ;
57
60
$dark-gray : #8a8a8a ;
@@ -67,6 +70,10 @@ $global-weight-normal: normal;
67
70
$global-weight-bold : bold ;
68
71
$global-radius : 0 ;
69
72
$global-text-direction : ltr ;
73
+ $global-flexbox : false;
74
+ $print-transparent-backgrounds : true;
75
+
76
+ @include add-foundation-colors ;
70
77
71
78
// 2. Breakpoints
72
79
// --------------
@@ -85,7 +92,7 @@ $breakpoint-classes: (small medium large);
85
92
86
93
$grid-row-width : $global-width ;
87
94
$grid-column-count : 12 ;
88
- $grid-column-responsive- gutter : (
95
+ $grid-column-gutter : (
89
96
small : 20px ,
90
97
medium : 30px ,
91
98
);
@@ -177,9 +184,9 @@ $stat-font-size: 2.5rem;
177
184
178
185
$abide-inputs : true;
179
186
$abide-labels : true;
180
- $input-background-invalid : $alert-color ;
181
- $form-label-color-invalid : $alert-color ;
182
- $input-error-color : $alert-color ;
187
+ $input-background-invalid : map-get ( $foundation-palette , alert ) ;
188
+ $form-label-color-invalid : map-get ( $foundation-palette , alert ) ;
189
+ $input-error-color : map-get ( $foundation-palette , alert ) ;
183
190
$input-error-font-size : rem-calc (12 );
184
191
$input-error-font-weight : $global-weight-bold ;
185
192
@@ -231,8 +238,8 @@ $button-margin: 0 0 $global-margin 0;
231
238
$button-fill : solid ;
232
239
$button-background : $primary-color ;
233
240
$button-background-hover : scale-color ($button-background , $lightness : -15% );
234
- $button-color : #fff ;
235
- $button-color-alt : #000 ;
241
+ $button-color : $white ;
242
+ $button-color-alt : $black ;
236
243
$button-radius : $global-radius ;
237
244
$button-sizes : (
238
245
tiny : 0.6rem ,
@@ -320,7 +327,7 @@ $fieldset-padding: rem-calc(20);
320
327
$fieldset-margin : rem-calc (18 0 );
321
328
$legend-padding : rem-calc (0 3 );
322
329
$form-spacing : rem-calc (16 );
323
- $helptext-color : #333 ;
330
+ $helptext-color : $black ;
324
331
$helptext-font-size : rem-calc (13 );
325
332
$helptext-font-style : italic ;
326
333
$input-prefix-color : $black ;
@@ -332,9 +339,10 @@ $form-label-font-size: rem-calc(14);
332
339
$form-label-font-weight : $global-weight-normal ;
333
340
$form-label-line-height : 1.8 ;
334
341
$select-background : $white ;
335
- $select-triangle-color : #333 ;
342
+ $select-triangle-color : $dark-gray ;
336
343
$select-radius : $global-radius ;
337
344
$input-color : $black ;
345
+ $input-placeholder-color : $medium-gray ;
338
346
$input-font-family : inherit ;
339
347
$input-font-size : rem-calc (16 );
340
348
$input-background : $white ;
@@ -371,10 +379,21 @@ $mediaobject-image-width-stacked: 100%;
371
379
$menu-margin : 0 ;
372
380
$menu-margin-nested : 1rem ;
373
381
$menu-item-padding : 0.7rem 1rem ;
382
+ $menu-item-color-active : $white ;
383
+ $menu-item-background-active : map-get ($foundation-palette , primary );
374
384
$menu-icon-spacing : 0.25rem ;
375
- $menu-expand-max : 6 ;
376
385
377
- // 23. Off-canvas
386
+ // 23. Meter
387
+ // ---------
388
+
389
+ $meter-height : 1rem ;
390
+ $meter-radius : $global-radius ;
391
+ $meter-background : $medium-gray ;
392
+ $meter-fill-good : $success-color ;
393
+ $meter-fill-medium : $warning-color ;
394
+ $meter-fill-bad : $alert-color ;
395
+
396
+ // 24. Off-canvas
378
397
// --------------
379
398
380
399
$offcanvas-size : 250px ;
@@ -387,7 +406,7 @@ $offcanvas-exit-background: rgba($white, 0.25);
387
406
$maincontent-class : ' off-canvas-content' ;
388
407
$maincontent-shadow : 0 0 10px rgba ($black , 0.5 );
389
408
390
- // 24 . Orbit
409
+ // 25 . Orbit
391
410
// ---------
392
411
393
412
$orbit-bullet-background : $medium-gray ;
@@ -402,7 +421,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
402
421
$orbit-control-padding : 1rem ;
403
422
$orbit-control-zindex : 10 ;
404
423
405
- // 25 . Pagination
424
+ // 26 . Pagination
406
425
// --------------
407
426
408
427
$pagination-font-size : rem-calc (14 );
@@ -419,7 +438,7 @@ $pagination-ellipsis-color: $black;
419
438
$pagination-mobile-items : false;
420
439
$pagination-arrows : true;
421
440
422
- // 26 . Progress Bar
441
+ // 27 . Progress Bar
423
442
// ----------------
424
443
425
444
$progress-height : 1rem ;
@@ -428,34 +447,33 @@ $progress-margin-bottom: $global-margin;
428
447
$progress-meter-background : $primary-color ;
429
448
$progress-radius : $global-radius ;
430
449
431
- // 27 . Reveal
450
+ // 28 . Reveal
432
451
// ----------
433
452
434
453
$reveal-background : $white ;
435
454
$reveal-width : 600px ;
436
455
$reveal-max-width : $global-width ;
437
- $reveal-offset : rem-calc (100 );
438
456
$reveal-padding : $global-padding ;
439
457
$reveal-border : 1px solid $medium-gray ;
440
458
$reveal-radius : $global-radius ;
441
459
$reveal-zindex : 1005 ;
442
460
$reveal-overlay-background : rgba ($black , 0.45 );
443
461
444
- // 28 . Slider
462
+ // 29 . Slider
445
463
// ----------
446
464
465
+ $slider-width-vertical : 0.5rem ;
466
+ $slider-transition : all 0.2s ease-in-out ;
447
467
$slider-height : 0.5rem ;
448
- $slider-width-vertical : $slider-height ;
449
468
$slider-background : $light-gray ;
450
469
$slider-fill-background : $medium-gray ;
451
470
$slider-handle-height : 1.4rem ;
452
471
$slider-handle-width : 1.4rem ;
453
472
$slider-handle-background : $primary-color ;
454
473
$slider-opacity-disabled : 0.25 ;
455
474
$slider-radius : $global-radius ;
456
- $slider-transition : all 0.2s ease-in-out ;
457
475
458
- // 29 . Switch
476
+ // 30 . Switch
459
477
// ----------
460
478
461
479
$switch-background : $medium-gray ;
@@ -471,7 +489,7 @@ $switch-paddle-offset: 0.25rem;
471
489
$switch-paddle-radius : $global-radius ;
472
490
$switch-paddle-transition : all 0.25s ease-out ;
473
491
474
- // 30 . Table
492
+ // 31 . Table
475
493
// ---------
476
494
477
495
$table-background : $white ;
@@ -488,14 +506,13 @@ $table-foot-background: smart-scale($table-background, $table-color-scale);
488
506
$table-head-font-color : $body-font-color ;
489
507
$show-header-for-stacked : false;
490
508
491
- // 31 . Tabs
509
+ // 32 . Tabs
492
510
// --------
493
511
494
512
$tab-margin : 0 ;
495
513
$tab-background : $white ;
496
514
$tab-background-active : $light-gray ;
497
- $tab-border : $light-gray ;
498
- $tab-item-color : foreground ($tab-background , $primary-color );
515
+ $tab-item-font-size : rem-calc (12 );
499
516
$tab-item-background-hover : $white ;
500
517
$tab-item-padding : 1.25rem 1.5rem ;
501
518
$tab-expand-max : 6 ;
@@ -504,7 +521,7 @@ $tab-content-border: $light-gray;
504
521
$tab-content-color : foreground ($tab-background , $primary-color );
505
522
$tab-content-padding : 1rem ;
506
523
507
- // 32 . Thumbnail
524
+ // 33 . Thumbnail
508
525
// -------------
509
526
510
527
$thumbnail-border : solid 4px $white ;
@@ -514,7 +531,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
514
531
$thumbnail-transition : box-shadow 200ms ease-out ;
515
532
$thumbnail-radius : $global-radius ;
516
533
517
- // 33 . Title Bar
534
+ // 34 . Title Bar
518
535
// -------------
519
536
520
537
$titlebar-background : $black ;
@@ -525,7 +542,7 @@ $titlebar-icon-color: $white;
525
542
$titlebar-icon-color-hover : $medium-gray ;
526
543
$titlebar-icon-spacing : 0.25rem ;
527
544
528
- // 34 . Tooltip
545
+ // 35 . Tooltip
529
546
// -----------
530
547
531
548
$has-tip-font-weight : $global-weight-bold ;
@@ -536,13 +553,14 @@ $tooltip-padding: 0.75rem;
536
553
$tooltip-font-size : $small-font-size ;
537
554
$tooltip-pip-width : 0.75rem ;
538
555
$tooltip-pip-height : $tooltip-pip-width * 0.866 ;
539
- $tooltip-pip-offset : 1.25rem ;
540
556
$tooltip-radius : $global-radius ;
541
557
542
- // 35 . Top Bar
558
+ // 36 . Top Bar
543
559
// -----------
544
560
545
561
$topbar-padding : 0.5rem ;
546
562
$topbar-background : $light-gray ;
563
+ $topbar-submenu-background : $topbar-background ;
547
564
$topbar-title-spacing : 1rem ;
548
565
$topbar-input-width : 200px ;
566
+ $topbar-unstack-breakpoint : medium ;
0 commit comments