2525// 20. Label
2626// 21. Media Object
2727// 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
4142
4243@import ' util/util' ;
4344
4748$global-font-size : 100% ;
4849$global-width : rem-calc (1200 );
4950$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+ );
5558$light-gray : #e6e6e6 ;
5659$medium-gray : #cacaca ;
5760$dark-gray : #8a8a8a ;
@@ -67,6 +70,10 @@ $global-weight-normal: normal;
6770$global-weight-bold : bold ;
6871$global-radius : 0 ;
6972$global-text-direction : ltr ;
73+ $global-flexbox : false;
74+ $print-transparent-backgrounds : true;
75+
76+ @include add-foundation-colors ;
7077
7178// 2. Breakpoints
7279// --------------
@@ -85,7 +92,7 @@ $breakpoint-classes: (small medium large);
8592
8693$grid-row-width : $global-width ;
8794$grid-column-count : 12 ;
88- $grid-column-responsive- gutter : (
95+ $grid-column-gutter : (
8996 small : 20px ,
9097 medium : 30px ,
9198);
@@ -177,9 +184,9 @@ $stat-font-size: 2.5rem;
177184
178185$abide-inputs : true;
179186$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 ) ;
183190$input-error-font-size : rem-calc (12 );
184191$input-error-font-weight : $global-weight-bold ;
185192
@@ -231,8 +238,8 @@ $button-margin: 0 0 $global-margin 0;
231238$button-fill : solid ;
232239$button-background : $primary-color ;
233240$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 ;
236243$button-radius : $global-radius ;
237244$button-sizes : (
238245 tiny : 0.6rem ,
@@ -320,7 +327,7 @@ $fieldset-padding: rem-calc(20);
320327$fieldset-margin : rem-calc (18 0 );
321328$legend-padding : rem-calc (0 3 );
322329$form-spacing : rem-calc (16 );
323- $helptext-color : #333 ;
330+ $helptext-color : $black ;
324331$helptext-font-size : rem-calc (13 );
325332$helptext-font-style : italic ;
326333$input-prefix-color : $black ;
@@ -332,9 +339,10 @@ $form-label-font-size: rem-calc(14);
332339$form-label-font-weight : $global-weight-normal ;
333340$form-label-line-height : 1.8 ;
334341$select-background : $white ;
335- $select-triangle-color : #333 ;
342+ $select-triangle-color : $dark-gray ;
336343$select-radius : $global-radius ;
337344$input-color : $black ;
345+ $input-placeholder-color : $medium-gray ;
338346$input-font-family : inherit ;
339347$input-font-size : rem-calc (16 );
340348$input-background : $white ;
@@ -371,10 +379,21 @@ $mediaobject-image-width-stacked: 100%;
371379$menu-margin : 0 ;
372380$menu-margin-nested : 1rem ;
373381$menu-item-padding : 0.7rem 1rem ;
382+ $menu-item-color-active : $white ;
383+ $menu-item-background-active : map-get ($foundation-palette , primary );
374384$menu-icon-spacing : 0.25rem ;
375- $menu-expand-max : 6 ;
376385
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
378397// --------------
379398
380399$offcanvas-size : 250px ;
@@ -387,7 +406,7 @@ $offcanvas-exit-background: rgba($white, 0.25);
387406$maincontent-class : ' off-canvas-content' ;
388407$maincontent-shadow : 0 0 10px rgba ($black , 0.5 );
389408
390- // 24 . Orbit
409+ // 25 . Orbit
391410// ---------
392411
393412$orbit-bullet-background : $medium-gray ;
@@ -402,7 +421,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
402421$orbit-control-padding : 1rem ;
403422$orbit-control-zindex : 10 ;
404423
405- // 25 . Pagination
424+ // 26 . Pagination
406425// --------------
407426
408427$pagination-font-size : rem-calc (14 );
@@ -419,7 +438,7 @@ $pagination-ellipsis-color: $black;
419438$pagination-mobile-items : false;
420439$pagination-arrows : true;
421440
422- // 26 . Progress Bar
441+ // 27 . Progress Bar
423442// ----------------
424443
425444$progress-height : 1rem ;
@@ -428,34 +447,33 @@ $progress-margin-bottom: $global-margin;
428447$progress-meter-background : $primary-color ;
429448$progress-radius : $global-radius ;
430449
431- // 27 . Reveal
450+ // 28 . Reveal
432451// ----------
433452
434453$reveal-background : $white ;
435454$reveal-width : 600px ;
436455$reveal-max-width : $global-width ;
437- $reveal-offset : rem-calc (100 );
438456$reveal-padding : $global-padding ;
439457$reveal-border : 1px solid $medium-gray ;
440458$reveal-radius : $global-radius ;
441459$reveal-zindex : 1005 ;
442460$reveal-overlay-background : rgba ($black , 0.45 );
443461
444- // 28 . Slider
462+ // 29 . Slider
445463// ----------
446464
465+ $slider-width-vertical : 0.5rem ;
466+ $slider-transition : all 0.2s ease-in-out ;
447467$slider-height : 0.5rem ;
448- $slider-width-vertical : $slider-height ;
449468$slider-background : $light-gray ;
450469$slider-fill-background : $medium-gray ;
451470$slider-handle-height : 1.4rem ;
452471$slider-handle-width : 1.4rem ;
453472$slider-handle-background : $primary-color ;
454473$slider-opacity-disabled : 0.25 ;
455474$slider-radius : $global-radius ;
456- $slider-transition : all 0.2s ease-in-out ;
457475
458- // 29 . Switch
476+ // 30 . Switch
459477// ----------
460478
461479$switch-background : $medium-gray ;
@@ -471,7 +489,7 @@ $switch-paddle-offset: 0.25rem;
471489$switch-paddle-radius : $global-radius ;
472490$switch-paddle-transition : all 0.25s ease-out ;
473491
474- // 30 . Table
492+ // 31 . Table
475493// ---------
476494
477495$table-background : $white ;
@@ -488,14 +506,13 @@ $table-foot-background: smart-scale($table-background, $table-color-scale);
488506$table-head-font-color : $body-font-color ;
489507$show-header-for-stacked : false;
490508
491- // 31 . Tabs
509+ // 32 . Tabs
492510// --------
493511
494512$tab-margin : 0 ;
495513$tab-background : $white ;
496514$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 );
499516$tab-item-background-hover : $white ;
500517$tab-item-padding : 1.25rem 1.5rem ;
501518$tab-expand-max : 6 ;
@@ -504,7 +521,7 @@ $tab-content-border: $light-gray;
504521$tab-content-color : foreground ($tab-background , $primary-color );
505522$tab-content-padding : 1rem ;
506523
507- // 32 . Thumbnail
524+ // 33 . Thumbnail
508525// -------------
509526
510527$thumbnail-border : solid 4px $white ;
@@ -514,7 +531,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
514531$thumbnail-transition : box-shadow 200ms ease-out ;
515532$thumbnail-radius : $global-radius ;
516533
517- // 33 . Title Bar
534+ // 34 . Title Bar
518535// -------------
519536
520537$titlebar-background : $black ;
@@ -525,7 +542,7 @@ $titlebar-icon-color: $white;
525542$titlebar-icon-color-hover : $medium-gray ;
526543$titlebar-icon-spacing : 0.25rem ;
527544
528- // 34 . Tooltip
545+ // 35 . Tooltip
529546// -----------
530547
531548$has-tip-font-weight : $global-weight-bold ;
@@ -536,13 +553,14 @@ $tooltip-padding: 0.75rem;
536553$tooltip-font-size : $small-font-size ;
537554$tooltip-pip-width : 0.75rem ;
538555$tooltip-pip-height : $tooltip-pip-width * 0.866 ;
539- $tooltip-pip-offset : 1.25rem ;
540556$tooltip-radius : $global-radius ;
541557
542- // 35 . Top Bar
558+ // 36 . Top Bar
543559// -----------
544560
545561$topbar-padding : 0.5rem ;
546562$topbar-background : $light-gray ;
563+ $topbar-submenu-background : $topbar-background ;
547564$topbar-title-spacing : 1rem ;
548565$topbar-input-width : 200px ;
566+ $topbar-unstack-breakpoint : medium ;
0 commit comments