@finqu/cool 1.0.0

package/scss/_variables.scss

@@ -0,0 +1,697 @@
+// Variables
+// -----------------------------------------------------------------------------------------
+
+// Colors
+$white:                                      #ffffff !default;
+$grey-100:                                   #F9F9F9 !default; // Lightest
+$grey-200:                                   #F5F5F5 !default; // Lighter
+$grey-300:                                   #EEEEEE !default; // Light
+$grey-400:                                   #DDDDDD !default; // Grey
+$grey-500:                                   #95A0A9 !default; // Dark
+$grey-600:                                   #76848F !default; // Darker
+$grey-700:                                   #646F7A !default;
+$grey-800:                                   #535B64 !default;
+$grey-900:                                   #41464F !default; // Darkest
+$black:                                      #000 !default;
+$blue-light:                                 #DFF4FB !default;
+$blue:                                       #03A2D2 !default;
+$blue-dark:                                  #2491C2 !default;
+$blue-grey:                                  #283543 !default;
+$green:                                      #5eb951 !default;
+$pink:                                       #DE367B !default;
+$red:                                        #DA7070 !default;
+$yellow:                                     #ffa900 !default;
+
+$colors: () !default;
+$colors: map-merge(
+	(
+	    'white':                             $white,
+	    'grey-lightest':                     $grey-100,
+	    'grey-lighter':                      $grey-200,
+	    'grey-light':                        $grey-300,
+	    'grey':                              $grey-400,
+	    'grey-dark':                         $grey-500,
+	    'grey-darker':                       $grey-600,
+	    'grey-darkest':                      $grey-900,
+	    'black':                             $black,
+	    'blue-light':                        $blue-light,
+	    'blue':                              $blue,
+	    'blue-dark':                         $blue-dark,
+	    'blue-grey':                         $blue-grey,
+	    'green':                             $green,
+	    'pink':                              $pink,
+	    'red':                               $red,
+	    'yellow':                            $yellow
+	),
+	$colors
+);
+
+$primary:                                    color('blue-grey') !default;
+$secondary:                                  color('grey-darker') !default;
+$success:                                    color('green') !default;
+$info:                                       color('blue-dark') !default;
+$warning:                                    color('yellow') !default;
+$danger:                                     color('red') !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge(
+	(
+	    'primary':                           $primary,
+	    'secondary':                         $secondary,
+	    'success':                           $success,
+	    'info':                              $info,
+	    'warning':                           $warning,
+	    'danger':                            $danger
+   	),
+	$theme-colors
+);
+
+
+// Color contrast
+$yiq-contrasted-threshold:                   150 !default;
+$yiq-text-dark:                              color('grey-darkest') !default;
+$yiq-text-light:                             color('white') !default;
+
+
+// Utilities
+$displays: (
+	none,
+	inline,
+	inline-block,
+	block,
+	table,
+	table-row,
+	table-cell,
+	flex,
+	inline-flex
+) !default;
+
+$overflows: (
+	auto,
+	hidden,
+	visible
+) !default;
+
+$positions: (
+	static,
+	relative,
+	absolute,
+	fixed,
+	sticky
+) !default;
+
+
+// Grid
+$grid-columns:                               12 !default;
+$grid-gutter-width:                          20px !default;
+$grid-breakpoints: (
+	xs: 0,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1200px
+) !default;
+
+@include _assert-ascending(
+	$grid-breakpoints,
+	'$grid-breakpoints'
+);
+
+@include _assert-starts-at-zero(
+	$grid-breakpoints,
+	'$grid-breakpoints'
+);
+
+$container-content-max-width:                1200px;
+$container-max-widths: (
+	sm: 540px,
+	md: 720px,
+	lg: 960px,
+	xl: 1140px
+) !default;
+
+@include _assert-ascending(
+	$container-max-widths,
+	'$container-max-widths'
+);
+
+
+// Spacing
+$spacer:                                     5px !default;
+$spacers: () !default;
+$spacers: map-merge(
+	(
+		0: $spacer * 0,
+		1: $spacer * 1,
+		2: $spacer * 2,
+		3: $spacer * 3,
+		4: $spacer * 4,
+		5: $spacer * 5,
+		6: $spacer * 6
+	),
+	$spacers
+);
+
+
+// Sizing
+$sizes: () !default;
+$sizes: map-merge(
+	(
+		25: 25%,
+		50: 50%,
+		75: 75%,
+		100: 100%,
+		auto: auto
+	),
+	$sizes
+);
+
+
+// Body
+$body-bg:                                    color('grey-lighter') !default;
+$body-color:                                 color('grey-darkest') !default;
+
+
+// Borders
+$border-width:                               1px !default;
+$border-color:                               color('grey');
+
+$border-radius:                              3px !default;
+$border-radius-sm:                           3px !default;
+$border-radius-lg:                           5px !default;
+
+
+// Navbar
+$navbar-bg:                                  color('blue-grey') !default;
+$navbar-color:                               darken(color('grey'), 10%) !default;
+$navbar-hover-color:                         color('blue') !default;
+$navbar-height:                              60px;
+$navbar-height-sm:                           48px;
+$navbar-border-width:                        1px;
+$navbar-border-color:                        transparent;
+$navbar-padding-x:                           15px;
+
+$navbar-item-min-width:                      45px;
+$navbar-item-padding-x:                      8px;
+$navbar-item-font-size:                      14px;
+$navbar-item-icon-size:                      20px;
+
+
+// Frame
+$frame-enable:                               true !default;
+
+$frame-sidebar-left-width:                   250px !default;
+$frame-sidebar-left-bg:                      $body-bg !default;
+$frame-sidebar-left-bg-mobile:               color('white') !default;
+$frame-sidebar-left-border-width:            1px !default;
+$frame-sidebar-left-border-color:            $border-color !default;
+
+$frame-sidebar-right-width:                  250px !default;
+$frame-sidebar-right-bg:                     $body-bg !default;
+$frame-sidebar-right-bg-mobile:              color('white') !default;
+$frame-sidebar-right-border-width:           1px !default;
+$frame-sidebar-right-border-color:           $border-color !default;
+
+
+$frame-sidebar-nav-icon-size:                20px !default;
+$frame-sidebar-nav-icon-color:               color('grey-darkest') !default;
+$frame-sidebar-nav-icon-hover-color:         darken(color('blue-grey'), 5%) !default;
+$frame-sidebar-nav-icon-active-color:        color('blue') !default;
+
+$frame-sidebar-nav-item-border-color:        $border-color !default;
+
+$frame-sidebar-nav-item-parent-font-size:    14px !default;
+$frame-sidebar-nav-item-parent-color:        darken(color('blue-grey'), 5%) !default;
+$frame-sidebar-nav-item-parent-hover-color:  darken(color('blue-grey'), 15%) !default;
+$frame-sidebar-nav-item-parent-active-color: darken(color('blue-grey'), 5%) !default;
+
+$frame-sidebar-nav-item-child-font-size:     14px !default;
+$frame-sidebar-nav-item-child-color:         darken(color('blue-grey'), 5%) !default;
+$frame-sidebar-nav-item-child-hover-color:   color('blue') !default;
+$frame-sidebar-nav-item-child-active-color:  color('blue') !default;
+
+$frame-sidebar-tabs-color:                   color('grey-darker') !default;
+$frame-sidebar-tabs-bg:                      transparent !default;
+$frame-sidebar-tabs-border-color:            $border-color !default;
+
+$frame-sidebar-tabs-hover-color:             color('grey-darker') !default;
+$frame-sidebar-tabs-hover-bg:                transparent !default;
+$frame-sidebar-tabs-hover-border-color:      $border-color !default;
+
+$frame-sidebar-tabs-active-color:            darken(color('grey-darker'), 10%) !default;
+$frame-sidebar-tabs-active-bg:               color('grey-lightest') !default;
+$frame-sidebar-tabs-active-border-color:     color('blue') !default;
+
+
+// Fonts
+$font-family-sans-serif:                     'Roboto', Helvetica, Arial, sans-serif !default;
+$font-family-serif:                          Georgia, 'Times New Roman', Times, serif !default;
+
+$font-family-monospace:                      Menlo, Monaco, Consolas, 'Courier New', monospace !default;
+$font-family-base:                           $font-family-sans-serif !default;
+
+$font-size-base:                             14px !default;
+$font-size-lg:                               16px !default;
+$font-size-sm:                               12px !default;
+
+$font-weight-lighter:                        lighter !default;
+$font-weight-light:                          300 !default;
+$font-weight-normal:                         400 !default;
+$font-weight-bold:                           500 !default;
+$font-weight-bolder:                         bolder !default;
+$font-weight-base:                           $font-weight-normal !default;
+
+$line-height-lg:                             1.5 !default;
+$line-height-base:                           1.5 !default;
+$line-height-sm:                             1.35 !default;
+$line-height-xs:                             1.25 !default;
+$line-height-computed:                       floor(($font-size-base * $line-height-base)) !default; // 21px
+
+$h1-font-size:                               floor(($font-size-base * 1.86)) !default; // ~26px
+$h2-font-size:                               floor(($font-size-base * 1.60)) !default; // ~22px
+$h3-font-size:                               ceil(($font-size-base * 1.35)) !default; // ~19px
+$h4-font-size:                               ceil(($font-size-base * 1.20)) !default; // ~17px
+$h5-font-size:                               $font-size-base !default;
+$h6-font-size:                               ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$headings-margin-bottom:	                 calc(#{$line-height-computed / 2}) !default;
+$headings-font-family:                       inherit !default;
+$headings-font-weight:                       400 !default;
+$headings-line-height:                       1.2 !default;
+$headings-color:                             inherit !default;
+
+$display1-size:                              84px !default;
+$display2-size:                              77px !default;
+$display3-size:                              63px !default;
+$display4-size:                              49px !default;
+
+$display1-weight:                            300 !default;
+$display2-weight:                            300 !default;
+$display3-weight:                            300 !default;
+$display4-weight:                            300 !default;
+$display-line-height:                        $headings-line-height !default;
+
+$lead-font-size:                             calc(#{$font-size-base * 1.25}) !default;
+$lead-font-weight:                           300 !default;
+
+$small-font-size:                            80% !default;
+
+$hr-border-color:                            $border-color !default;
+$hr-border-width:                            $border-width !default;
+$hr-margin-y:                                spacer(3) !default;
+
+
+// Icon
+$icon-color:                                 color('grey-darker') !default;
+$icon-spacer:                                7px;
+
+
+// Box shadow
+$box-shadow-sm:                              0 17px 3px rgba(color('black'), .075) !default;
+$box-shadow:                                 0 7px 14px rgba(color('black'), .15) !default;
+$box-shadow-lg:                              0 14px 42px rgba(color('black'), .175) !default;
+
+
+// Caret
+$caret-width:                                4px !default;
+
+
+// Buttons + Forms
+$input-btn-padding-y:                        7px !default;
+$input-btn-padding-x:                        14px !default;
+$input-btn-font-family:                      null !default;
+$input-btn-font-size:                        $font-size-base !default;
+$input-btn-line-height:                      $line-height-base !default;
+
+$input-btn-padding-y-sm:                     6px !default;
+$input-btn-padding-x-sm:                     12px !default;
+$input-btn-font-size-sm:                     $font-size-sm !default;
+$input-btn-line-height-sm:                   $line-height-sm !default;
+
+$input-btn-padding-y-lg:                     10px !default;
+$input-btn-padding-x-lg:                     14px !default;
+$input-btn-font-size-lg:                     $font-size-base + 1px !default;
+$input-btn-line-height-lg:                   $line-height-lg !default;
+
+$input-btn-border-width:                     $border-width !default;
+
+
+// Buttons
+$btn-padding-y:                              $input-btn-padding-y !default;
+$btn-padding-x:                              $input-btn-padding-x !default;
+$btn-font-family:                            $input-btn-font-family !default;
+$btn-font-size:                              $input-btn-font-size !default;
+$btn-line-height:                            $input-btn-line-height !default;
+
+$btn-padding-y-sm:                           $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:                           $input-btn-padding-x-sm !default;
+$btn-font-size-sm:                           $input-btn-font-size-sm !default;
+$btn-line-height-sm:                         $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:                           $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:                           $input-btn-padding-x-lg !default;
+$btn-font-size-lg:                           $input-btn-font-size-lg !default;
+$btn-line-height-lg:                         $input-btn-line-height-lg !default;
+
+$btn-border-width:                           $input-btn-border-width !default;
+
+$btn-font-weight:                            normal !default;
+$btn-block-spacing-y:                        8px !default;
+
+$btn-border-radius:                          $border-radius !default;
+$btn-border-radius-lg:                       $border-radius-lg !default;
+$btn-border-radius-sm:                       $border-radius-sm !default;
+
+$btn-icon-height:                            calc(#{$btn-line-height * $btn-font-size} + #{$btn-padding-y * 2}) !default;
+$btn-icon-height-sm:                         calc(#{$btn-line-height-sm * $btn-font-size-sm} + #{$btn-padding-y-sm * 2}) !default;
+$btn-icon-height-lg:                         calc(#{$btn-line-height-lg * $btn-font-size-lg} + #{$btn-padding-y-lg * 2}) !default;
+
+
+// Forms
+$label-font-size:                            $font-size-sm !default;
+$label-margin-bottom:                        6px !default;
+
+$input-padding-y:                            $input-btn-padding-y !default;
+$input-padding-x:                            $input-btn-padding-x !default;
+$input-font-family:                          $input-btn-font-family !default;
+$input-font-size:                            $input-btn-font-size !default;
+$input-font-weight:                          $font-weight-base !default;
+$input-line-height:                          $input-btn-line-height !default;
+
+$input-padding-y-sm:                         $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                         $input-btn-padding-x-sm !default;
+$input-font-size-sm:                         $input-btn-font-size-sm !default;
+$input-line-height-sm:                       $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                         $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                         $input-btn-padding-x-lg !default;
+$input-font-size-lg:                         $input-btn-font-size-lg !default;
+$input-line-height-lg:                       $input-btn-line-height-lg !default;
+
+$input-bg:                                   color('white') !default;
+$input-disabled-bg:                          color('grey-lighter') !default;
+
+$input-color:                                $body-color !default;
+$input-border-color:                        $border-color !default;
+$input-border-width:                         $input-btn-border-width !default;
+
+$input-border-radius:                        $border-radius !default;
+$input-border-radius-lg:                     $border-radius-lg !default;
+$input-border-radius-sm:                     $border-radius-sm !default;
+
+$input-focus-border-color:                   darken($border-color, 20%) !default;
+$input-placeholder-color:                    color('grey-dark') !default;
+$input-plaintext-color:                      $body-color !default;
+
+$input-height-border:                        $input-border-width * 2 !default;
+$input-height-inner:                         $input-line-height * $input-font-size + $input-padding-y * 2 !default;
+$input-height-inner-half:                    $input-line-height * $input-font-size / 2 + $input-padding-y !default;
+$input-height-inner-quarter:                 $input-line-height * $input-font-size / 4 + $input-padding-y / 2 !default;
+
+$input-height:                               $input-line-height * $input-font-size + $input-padding-y * 2 + $input-height-border !default;
+$input-height-sm:                            $input-line-height-sm * $input-font-size-sm + $input-btn-padding-y-sm * 2 + $input-height-border !default;
+$input-height-lg:                            $input-line-height-lg * $input-font-size-lg + $input-btn-padding-y-lg * 2 + $input-height-border !default;
+
+$input-group-addon-color:                    $input-color !default;
+$input-group-addon-bg:                       color('white') !default;
+$input-group-addon-border-color:             $input-border-color !default;
+
+$form-text-margin-top:                       4px !default;
+
+$form-check-input-gutter:                    spacer(3) !default;
+$form-check-input-margin-y:                  4px !default;
+$form-check-input-margin-x:                  3px !default;
+
+$form-check-inline-margin-x:                 10px !default;
+$form-check-inline-input-margin-x:           5px !default;
+
+$form-grid-gutter-width:                     spacer(3) !default;
+$form-group-margin-bottom:                   spacer(3) !default;
+
+$form-feedback-margin-top:                   $form-text-margin-top !default;
+$form-feedback-font-size:                    $small-font-size !default;
+$form-feedback-valid-color:                  theme-color('success') !default;
+$form-feedback-invalid-color:                theme-color('danger') !default;
+
+$form-validation-states: () !default;
+$form-validation-states: map-merge(
+	(
+		'valid': (
+			'color': $form-feedback-valid-color,
+		),
+		'invalid': (
+			'color': $form-feedback-invalid-color,
+		),
+	),
+	$form-validation-states
+);
+
+
+// Badge
+$badge-xs-font-size:                         $font-size-sm !default;
+$badge-xs-font-weight:                       $font-weight-normal !default;
+$badge-xs-line-height:                       $line-height-xs !default;
+$badge-xs-padding-y:                         0 !default;
+$badge-xs-padding-x:                         5px !default;
+
+$badge-sm-font-size:                         $font-size-sm !default;
+$badge-sm-font-weight:                       $font-weight-normal !default;
+$badge-sm-line-height:                       $line-height-sm !default;
+$badge-sm-padding-y:                         0 !default;
+$badge-sm-padding-x:                         5px !default;
+
+$badge-font-size:                            $font-size-sm !default;
+$badge-font-weight:                          $font-weight-normal !default;
+$badge-line-height:                          $line-height-sm !default;
+$badge-padding-y:                            8px !default;
+$badge-padding-x:                            14px !default;
+$badge-border-radius:                        $border-radius !default;
+
+
+// Pagination
+$pagination-padding-y:                       8px !default;
+$pagination-padding-x:                       12px !default;
+
+$pagination-active-color:                    color('white') !default;
+$pagination-active-bg:                       theme-color('primary') !default;
+$pagination-active-border-color:             theme-color('primary') !default;
+
+$pagination-disabled-color:                  color('grey-dark') !default;
+$pagination-disabled-bg:                     color('grey-lighter') !default;
+$pagination-disabled-border-color:           $border-color !default;
+
+$pagination-color:                           color('grey-darker') !default;
+$pagination-bg:                              color('white') !default;
+$pagination-border: 1px solid                $border-color !default;
+$pagination-line-height:                     20px !default;
+
+$pagination-hover-color:                     color('grey-darkest') !default;
+$pagination-hover-bg:                        color('grey-lightest') !default;
+$pagination-hover-border-color:              $border-color !default;
+
+
+// Z-index
+$zindex-fixed:                               1005 !default;
+$zindex-sticky:                              1005 !default;
+$zindex-popover:                             1005 !default;
+$zindex-tooltip:                             1005 !default;
+$zindex-dropdown:                            1005 !default;
+$zindex-select:                              1005 !default;
+$zindex-toast:                               1010 !default;
+$zindex-dialog:                              1010 !default;
+
+
+// Links colors
+$link-color:                                 color('blue') !default;
+$link-hover-color:                           darken(color('blue'), 15%) !default;
+$emphasized-link-hover-darken-percentage:    15% !default;
+
+
+// Table
+$table-color:                                $body-color !default;
+$table-bg:                                   color('white') !default;
+$table-hover-color:                          $table-color !default;
+$table-hover-bg:                             #ecf4f9 !default;
+$table-accent-bg:                            color('grey-lighter') !default;
+
+$table-link-color:                           $link-color !default;
+$table-link-hover-color:                     $link-hover-color !default;
+
+$table-head-bg:                              transparent !default;
+$table-head-color:                           color('grey-darker') !default;
+
+$table-icon-color:                           color('grey-darker') !default;
+$table-border-color:                         color('grey') !default;
+
+
+// Tabs
+$tabs-bg:                                    color('white') !default;
+$tabs-bg-active:                             color('white') !default;
+$tabs-text-color:                            color('grey-darker') !default;
+$tabs-text-active-color:                     $body-color !default;
+
+
+// Tooltips
+$tooltip-font-size:                          $font-size-sm !default;
+$tooltip-max-width:                          200px !default;
+$tooltip-color:                              color('white') !default;
+$tooltip-bg:                                 color('black') !default;
+$tooltip-border-radius:                      $border-radius !default;
+$tooltip-opacity:                            .9 !default;
+$tooltip-padding-y:                          4px !default;
+$tooltip-padding-x:                          7px !default;
+$tooltip-margin:                             0 !default;
+
+$tooltip-arrow-width:                        12px !default;
+$tooltip-arrow-height:                       6px !default;
+$tooltip-arrow-color:                        $tooltip-bg !default;
+
+
+// Popovers
+$popover-font-size:                          $font-size-sm !default;
+$popover-bg:                                 color('white') !default;
+$popover-max-width:                          276px !default;
+$popover-border-width:                       $border-width !default;
+$popover-border-color:                       rgba(color('black'), 0.2) !default;
+$popover-border-radius:                      $border-radius !default;
+
+$popover-header-bg:                          darken($popover-bg, 3%) !default;
+$popover-header-color:                       $headings-color !default;
+$popover-header-padding-y:                  8px !default;
+$popover-header-padding-x:                   12px !default;
+
+$popover-body-color:                         $body-color !default;
+$popover-body-padding-y:                     $popover-header-padding-y !default;
+$popover-body-padding-x:                     $popover-header-padding-x !default;
+
+$popover-arrow-width:                        14px !default;
+$popover-arrow-height:                       7px !default;
+$popover-arrow-color:                        $popover-bg !default;
+
+$popover-arrow-outer-color:                  fade-in($popover-border-color, 0.05) !default;
+
+
+// Nav divider
+$nav-divider-color:                          color('grey-light') !default;
+$nav-divider-margin-y:                       14px / 2 !default;
+
+
+// Dropdown
+$dropdown-min-width:                         140px !default;
+$dropdown-padding-y:                         7px !default;
+$dropdown-spacer:                            3px !default;
+$dropdown-bg:                                color('white') !default;
+$dropdown-color:                             $body-color !default;
+$dropdown-border-color:                      rgba(color('black'), 0.15) !default;
+$dropdown-border-radius:                     $border-radius !default;
+$dropdown-border-width:                      $border-width !default;
+$dropdown-divider-bg:                        color('grey-light') !default;
+$dropdown-box-shadow:                        0 2px 5px rgba(color('black'), 0.16) !default;
+
+$dropdown-link-color:                        color('grey-darkest') !default;
+$dropdown-link-hover-color:                  darken(color('grey-darkest'), 5%) !default;
+$dropdown-link-hover-bg:                     color('grey-lightest') !default;
+
+$dropdown-link-active-color:                 color('grey-darkest') !default;
+$dropdown-link-active-bg:                    color('blue') !default;
+
+$dropdown-link-disabled-color:               color('grey-darker') !default;
+
+$dropdown-item-padding-y:                    5px !default;
+$dropdown-item-padding-x:                    21px !default;
+
+$dropdown-header-color:                      color('grey-darker') !default;
+
+
+// Select
+$select-spacer:                              8px !default;
+$select-bg:                                  $input-bg !default;
+$select-border-color:                        $input-border-color !default;
+$select-border-radius:                       $border-radius !default;
+$select-border-width:                        $border-width !default;
+$select-divider-bg:                          color('grey-light') !default;
+$select-box-shadow:                          0 2px 5px rgba(color('black'), 0.16) !default;
+
+$select-item-color:                          color('grey-darkest') !default;
+$select-item-hover-color:                    darken(color('grey-darkest'), 5%) !default;
+$select-item-hover-bg:                       color('grey-lightest') !default;
+
+$select-item-disabled-color:                 color('grey-darker') !default;
+
+$select-item-padding-y:                      6px !default;
+$select-item-padding-x:                      12px !default;
+
+$select-header-color:                        color('grey-darker') !default;
+
+
+// Section
+$section-font-size:                          $font-size-base !default;
+$section-border-radius:                      $border-radius !default;
+$section-spacer:                             spacer(4) !default;
+$section-spacer-mobile:                      spacer(2) !default;
+$section-padding:                            spacer(3) !default;
+
+$section-bg:                                 color('white') !default;
+$section-color:                              $body-color !default;
+$section-box-shadow:                         0 1px 2px #cccccc, 0 0 0 1px #eeeeee !default;
+$section-divider-color:                      color('grey-light') !default;
+
+$section-header-font-family:                 $font-family-base !default;
+$section-header-font-size:                   15px !default;
+$section-header-font-weight:                 $font-weight-bold !default;
+$section-header-bg:                          color('white') !default;
+$section-header-color:                       color('grey-darkest') !default;
+$section-header-actions-color:               color('black') !default;
+$section-header-icons-color:                 color('grey-darkest') !default;
+$section-header-icons-size:                  15px !default;
+
+$section-tabs-bg:                            color('white') !default;
+$section-tabs-item-padding-y:                $section-padding !default;
+$section-tabs-item-margin-x:                 $section-padding !default;
+$section-tabs-item-min-width:                50px !default;
+
+$section-tabs-color:                         color('grey-darker') !default;
+$section-tabs-hover-color:                   color('grey-darkest') !default;
+$section-tabs-active-color:                  color('grey-darkest')!default;
+
+$section-tabs-border-width:                  3px !default;
+$section-tabs-border-color:                  $border-color !default;
+$section-tabs-border-hover-color:            color('grey-dark') !default;
+$section-tabs-border-active-color:           color('blue') !default;
+
+
+// Toast
+$toast-font-size:                            $font-size-base !default;
+$toast-font-size-sm:                         $font-size-sm !default;
+$toast-font-size-lg:                         18px !default;
+
+$toast-bg-light:                             color('white') !default;
+$toast-bg-dark:                              color('grey-darkest') !default;
+$toast-border-width:                         $border-width !default;
+$toast-border-color-light:                   rgba(color('black'), 0.2) !default;
+$toast-border-color-dark:                    rgba(color('white'), 0.2) !default;
+$toast-border-radius:                        $border-radius !default;
+
+$toast-header-bg-light:                      darken($toast-bg-light, 3%) !default;
+$toast-header-bg-dark:                       darken($toast-bg-dark, 3%) !default;
+$toast-header-color-light:                   $headings-color !default;
+$toast-header-color-dark:                    color('white') !default;
+$toast-header-padding-y:                     8px !default;
+$toast-header-padding-x:                     12px !default;
+
+$toast-header-padding-y-sm:                  6px !default;
+$toast-header-padding-x-sm:                  10px !default;
+
+$toast-header-padding-y-lg:                  8px !default;
+$toast-header-padding-x-lg:                  16px !default;
+
+$toast-body-color-light:                     $body-color !default;
+$toast-body-color-dark:                      color('white') !default;
+$toast-body-padding-y:                       12px!default;
+$toast-body-padding-x:                       12px !default;
+
+$toast-body-padding-y-sm:                    10px!default;
+$toast-body-padding-x-sm:                    10px !default;
+
+$toast-body-padding-y-lg:                    16px !default;
+$toast-body-padding-x-lg:                    16px !default;