These are the docs for the latest stable release of the Bolt Design System. Looking for the previous release, v2.13.2?

Sass Docs

Bolt's definition of border-radius scale. Used within 'export-data()' to JSON.
  $bolt-border-radius-values: (
  small: 3px,
  large: 0.75em,
  full: 100em
);

Source

_settings-border-radius.scss:14 01-settings/settings-border-radius/_settings-border-radius.scss
View on GitHub

Author

Mike Mai
Major breakpoints used globally in Bolt.
  $bolt-breakpoints: (
  xxsmall:  320px,
  xsmall:   400px,
  small:    600px,
  medium:   800px,
  large:    1000px,
  xlarge:   1200px,
  xxlarge:  1400px,
  xxxlarge: 1920px
);

Source

_settings-breakpoints.scss:9 01-settings/settings-breakpoints/_settings-breakpoints.scss
View on GitHub

Author

Salem Ghoweri
A duplicate of $bolt-breakpoints - used within mq()
  $mq-breakpoints: $bolt-breakpoints;

Source

_settings-breakpoints.scss:22 01-settings/settings-breakpoints/_settings-breakpoints.scss
View on GitHub

Author

Salem Ghoweri
Bolt default color var.
  $bolt-color-default: 'base';

Source

_settings-colors.scss:11 01-settings/settings-colors/_settings-colors.scss
View on GitHub
Bolt Brand Colors - merged into $bolt-colors map
  $bolt-brand-colors: (
  'indigo': (
    'xdark': hsl(233, 71%, 8%),
    'dark': hsl(233, 47%, 16%),
    'base': hsl(233, 47%, 23%),
    'light': hsl(233, 33%, 49%),
    'xlight': hsl(233, 73%, 81%),
  ),
  'yellow': (
    'xdark': hsl(43, 100%, 20%),
    'dark': hsl(43, 82%, 50%),
    'base': hsl(43, 100%, 65%),
    'light': hsl(43, 100%, 80%),
    'xlight': hsl(43, 100%, 90%),
  ),
  'teal': (
    'xdark': hsl(180, 100%, 10%),
    'dark': hsl(180, 82%, 22%),
    'base': hsl(180, 100%, 30%),
    'light': hsl(180, 45%, 64%),
    'xlight': hsl(180, 48%, 81%),
  ),
  'orange': (
    'xdark': hsl(15, 100%, 20%),
    'dark': hsl(15, 82%, 39%),
    'base': hsl(15, 82%, 50%),
    'light': hsl(15, 100%, 70%),
    'xlight': hsl(15, 100%, 85%),
  ),
  'gray': (
    'xdark': hsl(233, 6%, 19%),
    'dark': hsl(233, 5.3%, 38%),
    'base': hsl(233, 5.7%, 57.6%),
    'light': hsl(233, 20%, 90%),
    'xlight': hsl(233, 23%, 97%),
  ),
  'black': (
    'base': hsl(225, 8%, 9%),
  ),
  'white': (
    'base': hsl(0, 0%, 100%),
  ),
);

Source

_settings-colors.scss:15 01-settings/settings-colors/_settings-colors.scss
View on GitHub
Bolt Status Colors - merged into $bolt-colors map
  $bolt-status-colors: (
  'blue': (
    'dark': hsl(201, 100%, 25%),
    'base': hsl(201, 100%, 35%),
    'light': hsl(201, 100%, 92%),
  ),
  'success': (
    'dark': rgb(37, 41%, 25%),
    'base': hsl(123, 41%, 35%),
    'light': hsl(123, 41%, 90%),
  ),
  'error': (
    'dark': hsl(6, 76%, 35%),
    'base': hsl(6, 76%, 40%),
    'light': hsl(6, 80%, 90%),
  ),
  'warning': (
    'dark': hsl(51, 80%, 45%),
    'base': hsl(51, 80%, 55%),
    'light': hsl(51, 80%, 90%),
  ),
);

Source

_settings-colors.scss:61 01-settings/settings-colors/_settings-colors.scss
View on GitHub
Bolt Social Colors - merged into $bolt-colors map
  $bolt-social-colors: (
  'social': (
    'facebook': hsl(222, 46%, 42%),
    'twitter': hsl(196, 100%, 46%),
    'linkedin': hsl(201, 96%, 36%),
  ),
);

Source

_settings-colors.scss:86 01-settings/settings-colors/_settings-colors.scss
View on GitHub
All Bolt Colors - used within bolt-color @mixin and @function
  $bolt-colors: map-merge(
  map-merge($bolt-brand-colors, $bolt-status-colors),
  $bolt-social-colors
);

Source

_settings-colors.scss:98 01-settings/settings-colors/_settings-colors.scss
View on GitHub
Global Default Min Base Font Size
  $bolt-base-font-size--min: 15px;

Source

_settings-global.scss:18 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Global Default Max Base Font Size
  $bolt-base-font-size--max: 18px;

Source

_settings-global.scss:20 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Async Default font subset loaded class.
  $bolt-fonts--subset-loaded-class: 'js-fonts-subset-loaded';

Source

_settings-global.scss:24 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Async Default font loaded class.
  $bolt-fonts--loaded-class: 'js-fonts-loaded';

Source

_settings-global.scss:26 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt shadow color
  $bolt-shadow-color: bolt-color(black);

Source

_settings-global.scss:31 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt small shadow
  $bolt-shadow--small: 0 2px 0.15rem rgba($bolt-shadow-color, 0.3);

Source

_settings-global.scss:33 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt medium shadow
  $bolt-shadow--medium: 0 0.15rem 0.3rem rgba($bolt-shadow-color, 0.35);

Source

_settings-global.scss:35 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt large shadow
  $bolt-shadow--large: 0 0.35rem 0.6rem rgba($bolt-shadow-color, 0.18);

Source

_settings-global.scss:37 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt border width
  $bolt-border-width: 1px;

Source

_settings-global.scss:41 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt border style
  $bolt-border-style: solid;

Source

_settings-global.scss:43 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt border color
  $bolt-border-color: rgba(bolt-color(gray), 0.2);

Source

_settings-global.scss:45 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt border radius
  $bolt-border-radius: 3px;

Source

_settings-global.scss:47 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt transition
  $bolt-transition: ease-in-out 200ms;

Source

_settings-global.scss:51 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt transition ease
  $bolt-transition-ease: ease-in-out;

Source

_settings-global.scss:53 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt transition timing
  $bolt-transition-timing: 200ms;

Source

_settings-global.scss:55 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt translate none effect
  $bolt-translate-none: translate3d(0, 0, 0);

Source

_settings-global.scss:59 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt translate raised small effect
  $bolt-translate-raised--small: translate3d(0, -1px, 0);

Source

_settings-global.scss:61 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt translate raised medium effect
  $bolt-translate-raised--medium: translate3d(0, -0.125rem, 0);

Source

_settings-global.scss:63 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt translate raised large effect
  $bolt-translate-raised--large: translate3d(0, -0.25rem, 0);

Source

_settings-global.scss:65 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt default global link hover opacity
  $bolt-global-link-hover-opacity: bolt-opacity(80);

Source

_settings-global.scss:70 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt default global link active opacity
  $bolt-global-link-active-opacity: bolt-opacity(60);

Source

_settings-global.scss:72 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt default global border opacity
  $bolt-global-border-opacity: bolt-opacity(20);

Source

_settings-global.scss:75 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt default global border color
  $bolt-global-border-color: bolt-color(gray);

Source

_settings-global.scss:77 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt default global button hover mix %
  $bolt-global-button-hover-mix: 15%;

Source

_settings-global.scss:80 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt default global button hover color
  $bolt-global-button-hover-color: bolt-color(white);

Source

_settings-global.scss:82 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt default global button active mix %
  $bolt-global-button-active-mix: 25%;

Source

_settings-global.scss:84 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt default global button active color
  $bolt-global-button-active-color: bolt-color(black);

Source

_settings-global.scss:86 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt's definition of block level elements.
  $bolt-block-elements-list: 'p',
  'pre',
  'blockquote',
  'table',
  'ol',
  'ul',
  'dl',
  'fieldset',
  'legend',
  'details',
  'summary',
  'hr',
  'address';

Source

_settings-global.scss:94 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt's definition of all unquoted block level elements.
  $bolt-all-block-elements: $bolt-unquoted-block-elements-list;

Source

_settings-global.scss:115 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt's definition of heading elements.
  $bolt-heading-elements-list: 'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6';

Source

_settings-global.scss:123 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Bolt's definition of all unquoted heading elements.
  $bolt-all-heading-elements: $bolt-unquoted-heading-elements-list;

Source

_settings-global.scss:137 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Quoted custom block elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.
  $_bolt-custom-block-elements: ();

Source

_settings-global.scss:148 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Quoted custom inline elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.
  $_bolt-custom-inline-elements: ();

Source

_settings-global.scss:151 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Quoted custom inline-block elements used to globally collect group generic styles. Elements registered via @mixin bolt-register-element.
  $_bolt-custom-inline-block-elements: ();

Source

_settings-global.scss:154 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
All (unquoted) custom block elements used to globally collect group generic styles
  $bolt-all-custom-block-elements: ();

Source

_settings-global.scss:158 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
All (unquoted) custom inline-block elements used to globally collect group generic styles
  $bolt-all-custom-inline-block-elements: ();

Source

_settings-global.scss:160 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
All (unquoted) custom inline elements used to globally collect group generic styles
  $bolt-all-custom-inline-elements: ();

Source

_settings-global.scss:162 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Register Element helper mixin: registers any custom elements getting included (used outside selector or declaration)
  @mixin bolt-register-element($element, $element-type) { 
  @if ($element-type != 'inline' and $element-type != 'inline-block' and $element-type != 'block'){
    @error 'Please register your #{$element} element as either an inline, inline-block or block.';
  }

  // @TODO: find a way to dynamically assign the right list to this
  @if ($element-type == 'inline') {
    $_bolt-custom-inline-elements: append($_bolt-custom-inline-elements, $element) !global;

  } @else if  ( $element-type == 'block') {
    $_bolt-custom-block-elements: append($_bolt-custom-block-elements, $element) !global;
  } @else if  ( $element-type == 'inline-block') {
    $_bolt-custom-inline-block-elements: append($_bolt-custom-inline-block-elements, $element) !global;
  }
}
Name Type Description Default
$element string The custom element to register (None)
$element-type string Three different types available: inline, inline-block (which may be rendered as inline-flex), and block (None)
  @include bolt-register-element('bolt-ordered-list', 'block');

Throws

Please register your #{$element} element as either an inline, inline-block or block.

Source

_settings-global.scss:170 01-settings/settings-global/_settings-global.scss
View on GitHub

Author

Mike Mai
Z-Index Settings
  $bolt-z-indexes: (
  sets: (
    fab: 300,
    modal: 200,
    modalBG: 180,
    navFixed: 160,
    tooltip: 140,
    popover: 120,
    nav: 100,
    contentTop: 80,
    content: 60,
    contentBottom: 40,
    backgroundTop: 20,
    background: 0,
    backgroundBottom: -20,
  ),
);

Source

_settings-z-index.scss:14 01-settings/_settings-z-index.scss
View on GitHub
Bolt gutter spacing value
  $bolt-spacing-gutter: 2rem;

Source

_settings-spacing.scss:12 01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai
Bolt default leading spacing value
  $bolt-spacing-leading: 1.65;

Source

_settings-spacing.scss:14 01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai
Bolt squished spacing value
  $bolt-spacing-squished: 0.5;

Source

_settings-spacing.scss:16 01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai
Bolt stretched spacing value
  $bolt-spacing-stretched: 1.5;

Source

_settings-spacing.scss:18 01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai
Bolt's definition of spacing scale. Used within 'export-data()' to JSON.
  $bolt-spacing-values: (
  '': 1,
  'xxsmall': 0.125,
  'xsmall': 0.25,
  'small': 0.5,
  'medium': 1,
  'large': 2,
  'xlarge': 4,
  'xxlarge': 8,
);

Source

_settings-spacing.scss:22 01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai
Bolt's definition of available spacing properties.
  $bolt-spacing-properties: ('padding', 'margin');

Source

_settings-spacing.scss:37 01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai
Bolt's definition of spacing directions.
  $bolt-spacing-directions: ('', 'top', 'right', 'bottom', 'left');

Source

_settings-spacing.scss:41 01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai
Bolt's definition of spacing types.
  $bolt-spacing-types: ('', 'squished', 'stretched');

Source

_settings-spacing.scss:45 01-settings/settings-spacing/_settings-spacing.scss
View on GitHub

Author

Mike Mai
Bolt's opacity scale. The keys in this array are the opacity value names and not necessarily numeric. For example, a valid key could be "semi-transparent". However, the values in this array must be valid numeric values for the CSS 'opacity' property.
  $bolt-opacities: (
  0: 0,
  20: .2,
  40: .4,
  60: .6,
  80: .8,
  100: 1
);

Source

_settings-opacity.scss:14 01-settings/settings-opacity/_settings-opacity.scss
View on GitHub

Author

Remy Denton
Bolt's definition of language-specific quoatation marks. http://www.witch.westfalen.de/csstest/quotes/quotes.html
  $bolt-quotation-marks: (
  'en': (
    'open': '\201C',
    'close': '\201D',
  ),
  'de': (
    'open': '\201E',
    'close': '\201C',
  ),
  'fr': (
    'open': '\00AB',
    'close': '\00BB',
  ),
  'ja': (
    'open': '\300C',
    'close': '\300D',
  ),
);

Source

_settings-quotes.scss:13 01-settings/settings-quotes/_settings-quotes.scss
View on GitHub

Author

Dan Morse
Helper function to return $bolt-shadows map
  @function bolt-get-shadows-map($base-color: rgb(6, 10, 36)) { 
  $bolt-shadows: (
    'sets': (
      //'b1': (
      //  'base': 'inset 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 2px rgba(0,0,0,0.24)',
      //  'lifted': ''
      //),
      'level-10': (
        'base': '0 1px 2px 1px #{transparentize($base-color, .92)}',
        'raised': ''
      ),
      'level-20': (
        'base': '0 1px 4px 1px #{transparentize($base-color, .90)}, 0 5px 10px 0 #{transparentize($base-color, .92)}',
        'raised': '0 1px 8px 1px #{transparentize($base-color, .82)}, 0 5px 10px 1px #{transparentize($base-color, .85)}, 0 15px 30px 0 #{transparentize($base-color, .84)}'
      ),
      'level-30': (
        'base': '0 8px 15px 1px #{transparentize($base-color, .90)}, 0 18px 24px 1px #{transparentize($base-color, .88)}',
        'raised': '0 8px 15px 1px #{transparentize($base-color, .90)}, 0 24px 36px 1px #{transparentize($base-color, .82)}, 0 35px 50px 0 #{transparentize($base-color, .75)}'
      ),
      'level-40': (
        'base': '0 10px 20px 1px #{transparentize($base-color, .90)}, 0 24px 36px 1px #{transparentize($base-color, .82)}',
        'raised': '0 10px 20px 1px #{transparentize($base-color, .90)}, 0 36px 49px 1px #{transparentize($base-color, .80)}, 0 45px 65px 0 #{transparentize($base-color, .70)}'
      ),
      'level-50': (
        'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 40px 48px 1px #{transparentize($base-color, .75)}',
        'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 50px 70px 1px #{transparentize($base-color, .80)}, 0 55px 80px 0 #{transparentize($base-color, .70)}'
      ),
      'level-60': (
        'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 50px 60px 1px #{transparentize($base-color, .60)}',
        'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 70px 80px 1px #{transparentize($base-color, .80)}, 0 80px 120px 0 #{transparentize($base-color, .65)}'
      ),
      'level-70': (
        'base': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 80px 90px 1px #{transparentize($base-color, .60)}',
        'raised': '0 10px 30px 1px #{transparentize($base-color, .90)}, 0 110px 130px 1px #{transparentize($base-color, .75)}, 0 130px 150px 0 #{transparentize($base-color, .65)}'
      )
    )
  ) !default;
  @return $bolt-shadows;
}
Name Type Description Default
$base-color color The base shadow color (with the 'transparentize' filter applied) rgb(6, 10, 36)
  $shadows: map-get(bolt-get-shadows-map(), 'sets');

Returns

mapReturns sass map of all shadow levels 'base' and 'raised' variations

Source

_settings-shadow.scss:17 01-settings/settings-shadow/_settings-shadow.scss
View on GitHub
Variable containing default $bolt-shadows map - utility class and sets. Used within 'export-data()' to JSON.
  $bolt-shadows: bolt-get-shadows-map();

Source

_settings-shadow.scss:58 01-settings/settings-shadow/_settings-shadow.scss
View on GitHub
Bolt's definition of a Japanese specific font-stack.
  $bolt-font-family--japanese: -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;

Source

_settings.lang-ja.scss:16 01-settings/00-settings-lang/_settings.lang-ja.scss
View on GitHub
Default sans-serif fallback font stack containing [1] maps to the system UI font and [2] known system UI fonts. Used within the $bolt-font-families map.
  $bolt-font-family--sans-fallback: -apple-system, BlinkMacSystemFont, /* [1] */
  'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', /* [2] */
  'Helvetica Neue', sans-serif;

Source

_settings-font-family.scss:18 01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai
Default serif font stack. Used within the $bolt-font-families map.
  $bolt-font-family--serif: 'Georgia', serif;

Source

_settings-font-family.scss:25 01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai
Default monospace fallback font stack. Used within the $bolt-font-families map.
  $bolt-font-family--mono-fallback: monospace, monospace;

Source

_settings-font-family.scss:29 01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai
Default sans-serif font stack. Used within the $bolt-font-families map.
  $bolt-font-family--sans: 'Open Sans', 'Helvetica Neue', sans-serif;

Source

_settings-font-family.scss:38 01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai
Default sans-serif subset font stack. Used within the $bolt-font-families map.
  $bolt-font-family--sans-subset: 'OpenSansSubset', 'Helvetica Neue', sans-serif;

Source

_settings-font-family.scss:43 01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai
Default monospace font stack. Used within the $bolt-font-families map.
  $bolt-font-family--mono: monospace, monospace;

Source

_settings-font-family.scss:47 01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai
Bolt's definition of body, heading, and code text.
  $bolt-font-families: (
  font-families: (
    body: (
      fallback-font: $bolt-font-family--sans-fallback,
      custom-font:   $bolt-font-family--sans,
      loaded-class:  $bolt-fonts--loaded-class
    ),
    bodySubset: (
      fallback-font: $bolt-font-family--sans-fallback,
      custom-font:   $bolt-font-family--sans-subset,
      loaded-class:  $bolt-fonts--subset-loaded-class
    ),
    heading: (
      fallback-font: $bolt-font-family--sans-fallback,
      custom-font:   $bolt-font-family--sans,
      loaded-class:  $bolt-fonts--loaded-class
    ),
    code: (
      fallback-font: $bolt-font-family--mono-fallback,
      custom-font:   $bolt-font-family--mono,
      loaded-class:  $bolt-fonts--loaded-class
    )
  )
);

Source

_settings-font-family.scss:57 01-settings/settings-font-family/_settings-font-family.scss
View on GitHub

Author

Mike Mai
Small breakpoint font-size
  $bolt-font-size--small-bp: bolt-rem(bolt-breakpoint(xxsmall));

Source

_settings-font-size.scss:10 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Medium breakpoint font-size
  $bolt-font-size--medium-bp: bolt-rem(bolt-breakpoint(medium));

Source

_settings-font-size.scss:12 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default XXX Large Max font-size. Used within $bolt-font-sizes map.
  $bolt-font-size--xxxlarge--max: 3.083rem;

Source

_settings-font-size.scss:20 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default XXX Large Min font-size. Used within $bolt-font-sizes map.
  $bolt-font-size--xxxlarge--min: 2.275rem;

Source

_settings-font-size.scss:23 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default XX Large font-size. Used within $bolt-font-sizes map.
  $bolt-font-size--xxlarge: 1.781rem;

Source

_settings-font-size.scss:26 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default X Large font-size. Used within $bolt-font-sizes map.
  $bolt-font-size--xlarge: 1.417rem;

Source

_settings-font-size.scss:29 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default Large font-size. Used within $bolt-font-sizes map.
  $bolt-font-size--large: 1.111rem;

Source

_settings-font-size.scss:32 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Medium font-size. Used within $bolt-font-sizes map.
  $bolt-font-size--medium: 1rem;

Source

_settings-font-size.scss:35 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Small font-size. Used within $bolt-font-sizes map.
  $bolt-font-size--small: 0.9rem;

Source

_settings-font-size.scss:38 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
X Small font-size. Used within $bolt-font-sizes map.
  $bolt-font-size--xsmall: 0.8rem;

Source

_settings-font-size.scss:41 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default XXX Large line-height. Used within $bolt-font-sizes map.
  $bolt-line-height--xxxlarge: 1.14;

Source

_settings-font-size.scss:45 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default XX Large line-height. Used within $bolt-font-sizes map.
  $bolt-line-height--xxlarge: 1.31;

Source

_settings-font-size.scss:48 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default X Large line-height. Used within $bolt-font-sizes map.
  $bolt-line-height--xlarge: 1.35;

Source

_settings-font-size.scss:51 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default Large line-height. Used within $bolt-font-sizes map.
  $bolt-line-height--large: 1.45;

Source

_settings-font-size.scss:54 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default Medium line-height. Used within $bolt-font-sizes map.
  $bolt-line-height--medium: 1.65;

Source

_settings-font-size.scss:57 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default Small line-height. Used within $bolt-font-sizes map.
  $bolt-line-height--small: 1.51;

Source

_settings-font-size.scss:60 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default X Small line-height. Used within $bolt-font-sizes map.
  $bolt-line-height--xsmall: 1.45;

Source

_settings-font-size.scss:63 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default Tight line-height. Used within $bolt-font-sizes map.
  $bolt-line-height--tight: 1.111;

Source

_settings-font-size.scss:66 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Bolt's definition of all options of possible text sizes.
  $bolt-font-sizes: (
  font-sizes: (
    xxxlarge: (
      font-size: (
        $bolt-font-size--small-bp: $bolt-font-size--xxxlarge--min,
        $bolt-font-size--medium-bp: $bolt-font-size--xxxlarge--max
      ),
      line-height: (
        regular: $bolt-line-height--xxxlarge,
        tight: $bolt-line-height--tight
      ),
    ),
    xxlarge: (
      font-size: $bolt-font-size--xxlarge,
      line-height: (
        regular: $bolt-line-height--xxlarge,
        tight: $bolt-line-height--tight
      )
    ),
    xlarge: (
      font-size: $bolt-font-size--xlarge,
      line-height: (
        regular: $bolt-line-height--xlarge,
        tight: $bolt-line-height--tight
      )
    ),
    large: (
      font-size: $bolt-font-size--large,
      line-height: (
        regular: $bolt-line-height--large,
        tight: $bolt-line-height--tight
      )
    ),
    medium: (
      font-size: $bolt-font-size--medium,
      line-height: (
        regular: $bolt-line-height--medium,
        tight: $bolt-line-height--tight
      )
    ),
    small: (
      font-size: $bolt-font-size--small,
      line-height: (
        regular: $bolt-line-height--small,
        tight: $bolt-line-height--tight
      )
    ),
    xsmall: (
      font-size: $bolt-font-size--xsmall,
      line-height: (
        regular: $bolt-line-height--xsmall,
        tight: $bolt-line-height--tight
      )
    )
  )
);

Source

_settings-font-size.scss:73 01-settings/settings-font-size/_settings-font-size.scss
View on GitHub

Author

Mike Mai
Default regular font weight
  $bolt-font-weight--regular: 400;

Source

_settings-font-weight.scss:12 01-settings/settings-font-weight/_settings-font-weight.scss
View on GitHub

Author

Mike Mai
Default semibold font weight
  $bolt-font-weight--semibold: 600;

Source

_settings-font-weight.scss:15 01-settings/settings-font-weight/_settings-font-weight.scss
View on GitHub

Author

Mike Mai
Default bold font weight
  $bolt-font-weight--bold: 800;

Source

_settings-font-weight.scss:18 01-settings/settings-font-weight/_settings-font-weight.scss
View on GitHub

Author

Mike Mai
Bolt's definition of all possible options of text weights.
  $bolt-font-weights: (
  font-weights: (
    bold:     $bolt-font-weight--bold,
    semibold: $bolt-font-weight--semibold,
    regular:  $bolt-font-weight--regular,
    normal:   $bolt-font-weight--regular
  )
);

Source

_settings-font-weight.scss:43 01-settings/settings-font-weight/_settings-font-weight.scss
View on GitHub

Author

Mike Mai
Bolt border radius function
  @function bolt-border-radius($value) { 
  @if map-has-key($bolt-border-radius-values, $value) {
    @return map-get($bolt-border-radius-values, $value)
  } @else {
    @error 'A value, #{$value}, was passed into bolt-border-radius() that is not defined in $bolt-border-radius-values';
  }
}
Name Type Description Default
$value string (None)
  .element {
   border-radius: bolt-border-radius(small);
}

Throws

A value, #{$value}, was passed into bolt-border-radius() that is not defined in $bolt-border-radius-values

Source

_tools-border-radius.scss:16 02-tools/tools-border-radius/_tools-border-radius.scss
View on GitHub
Bolt border radius mixin
  @mixin bolt-border-radius($value) { 
  $border-radius: map-get-deep($bolt-border-radius-values, $value);

  @if map-has-key($bolt-border-radius-values, $value) {
    border-radius: $border-radius;
  } @else {
    @error 'A value, #{$value}, was passed into @include bolt-border-radius() that is not defined in $bolt-border-radius-values';
  }
}
Name Type Description Default
$value string (None)
  .element {
   @include bolt-border-radius(small);
}

Throws

A value, #{$value}, was passed into @include bolt-border-radius() that is not defined in $bolt-border-radius-values

Source

_tools-border-radius.scss:30 02-tools/tools-border-radius/_tools-border-radius.scss
View on GitHub
This returns the breakpoint value (with px) from $bolt-breakpoints map
  @function bolt-breakpoint($name) { 
  @return map-get($bolt-breakpoints, $name);
}
Name Type Description Default
$name string The name of the breakpoint (from within $bolt-breakpoints) (None)
  .element {
  @media screen and (max-width: #{bolt-breakpoint(xsmall)}) {
    font-size: 24px;
  }
}

Returns

stringThe breakpoint value (with px)

Source

_tools-breakpoint.scss:20 02-tools/tools-breakpoint/_tools-breakpoint.scss
View on GitHub

Author

Salem Ghoweri
Mike Mai
This provides a wrapper mixin for performing bolt media queries with mq() which allows for the use of: $from (inclusive min-width boundary), $until (exclusive max-width boundary), $and (additional custom directives), $media-type (media type: screen, print, etc)
  @mixin bolt-mq($args...) { 
  @include mq($args...) {
    @content;
  }
}
Name Type Description Default
$args... Bolt Media Query args ([breakpoint-name], $from, $until, $and, $media-type) (None)
  .element {
  @include bolt-mq(($until: small){
    flex-direction: column;
  }
}

Source

_tools-breakpoint.scss:39 02-tools/tools-breakpoint/_tools-breakpoint.scss
View on GitHub

Author

Salem Ghoweri
Mike Mai
Generate linear interpolated size values through multiple break points
  @mixin bolt-poly-fluid-sizing($property, $map) { 
  // Get the number of provided breakpoints
  $length: length(map-keys($map));

  // Error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error 'bolt-poly-fluid-sizing() $map requires at least values';
  }

  // Sort the map by viewport width (key)
  $map: bolt-map-sort($map);
  $keys: map-keys($map);


  // $map: (576px: 22px, 320px: 18px, 992px: 34px, 768px: 24px);
  // @include bolt-poly-fluid-sizing('font-size', $map);

  // Minimum size
  #{$property}: map-get($map, nth($keys, 1));

  // Interpolated size through breakpoints
  @for $i from 1 through ($length - 1) {
    @media (min-width: nth($keys, $i)) {
      $value1: map-get($map, nth($keys, $i));
      $value2: map-get($map, nth($keys, ($i + 1)));
      // If values are not equal, perform linear interpolation
      @if ($value1 != $value2) {
        #{$property}: bolt-linear-interpolation((nth($keys, $i): $value1, nth($keys, ($i + 1)): $value2));
      } @else {
        #{$property}: $value1;
      }
    }
  }

  // Maxmimum size
  @media (min-width: nth($keys, $length)) {
    #{$property}: map-get($map, nth($keys, $length));
  }
}
Name Type Description Default
$property string A string CSS property name (None)
$map map A Sass map of viewport unit and size value pairs (None)
  @include bolt-poly-fluid-sizing('font-size', (576px: 22px, 768px: 24px, 992px: 34px));

Throws

bolt-poly-fluid-sizing() $map requires at least values

Source

_tools-poly-fluid-sizing.scss:18 02-tools/tools-poly-fluid-sizing/_tools-poly-fluid-sizing.scss
View on GitHub

Author

Mike Mai
Lightweight style reset for button and input elements
  @mixin bolt-button-reset($value) { 
  @include bolt-padding(0);
  @include bolt-font-family(body);

  appearance: none; // override default [type=submit] button styles coming from Normalize
  background: none;
}
Name Type Description Default
$value string (None)
  .element {
   @include bolt-button-reset;
}

Source

_tools-button-reset.scss:15 02-tools/tools-button-reset/_tools-button-reset.scss
View on GitHub
Generate different background and border color button interaction states based on the primary color passed in
  @mixin bolt-button-color($color) { 
  color: bolt-text-contrast($color);
  border-color: mix(black, $color, 25%);
  background-color: $color;

  // &:hover {
  //   color: bolt-text-contrast($color);
  //   background-color: mix(black, $color, 15%);
  //   border-color: mix(black, $color, 40%);
  // }
  //
  // &:focus,
  // &:active {
  //   color: bolt-text-contrast($color);
  //   background-color: mix(black, $color, 30%);
  //   border-color: mix(black, $color, 55%);
  // }
}
Name Type Description Default
$color color Used to generate button text, background, and border color (None)
  .element {
  @include bolt-button-color(bolt-color(success, dark));
}

Source

_tools-button-color.scss:16 02-tools/tools-button-color/_tools-button-color.scss
View on GitHub

Author

Salem Ghoweri
Helper functions for applying global color swatches stored in Sass Maps
  @function bolt-color($color, $tone: $bolt-color-default) { 
  @return map-get-deep($bolt-colors, "#{$color}", $tone);
}
Name Type Description Default
$color string Bolt color base (e.g. indigo) (None)
$tone string Bolt color tone (e.g. light) $bolt-color-default

Returns

HSL|RGBThe mapped bolt color value

Source

_tools-color-palette.scss:13 02-tools/tools-color-palette/_tools-color-palette.scss
View on GitHub
Mixin to return color value
  @mixin bolt-color($color, $tone: $bolt-color-default, $important: null) { 
  @if $important == important {
    $important: !important;
  }

  /* stylelint-disable-next-line */
  color: map-get-deep($bolt-colors, $color, $tone) $important;
}
Name Type Description Default
$color string Bolt color base (e.g. indigo) (None)
$tone string Bolt color tone (e.g. light) $bolt-color-default
$important string If 'important', then !important will be added onto the declaration string value null
  .element {
   @include bolt-color(indigo, light, important);
}

Source

_tools-color-palette.scss:25 02-tools/tools-color-palette/_tools-color-palette.scss
View on GitHub
Places an element full browser width
  @mixin bolt-full-bleed() { 
  position: relative;
  right: 50%;
  left: 50%;
  width: 100%; //fallback if vw not supported.
  width: 100vw;
  margin-top: -0.5px; //-0.5px is currently needed to patch a rendering bug in Firefox (when combined with layers being hardware accelerated)
  margin-right: -50vw;
  margin-bottom: -0.5px; //-0.5px is currently needed to patch a rendering bug in Firefox (when combined with layers being hardware accelerated)
  margin-left: -50vw;
}
  .element {
  @include bolt-full-bleed();
}

Source

_tools-full-bleed.scss:8 02-tools/tools-full-bleed/_tools-full-bleed.scss
View on GitHub

Author

Evan Lovely
Provides a bolt method for controlling vertical scroll (overflow)
  @mixin bolt-vertical-scroll() { 
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
  .element {
   @include bolt-vertical-scroll();
}

Source

_tools-scrolling.scss:15 02-tools/tools-scrolling/_tools-scrolling.scss
View on GitHub

Author

Salem Ghoweri
Provides a bolt method for controlling horizontal scroll (overflow)
  @mixin bolt-horizontal-scroll() { 
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
  .element {
   @include bolt-horizontal-scroll();
}

Source

_tools-scrolling.scss:26 02-tools/tools-scrolling/_tools-scrolling.scss
View on GitHub

Author

Salem Ghoweri
Private bolt function to generate default spacing scale, based off of the base font size
  @function _bolt-create-spacing-map($sizes, $char: '') { 
  $map: ();
  @each $name, $value in $sizes {
    $keyName: $name;
    @if ($char != '' and $keyName != null) {
      $keyName: $char + $keyName;
    }
    $keyValue: $value * $bolt-spacing-gutter;
    $map: map-merge($map, ($keyName: $keyValue));
  }
  @return $map;
}
Name Type Description Default
$sizes list Sizes to iterate over (None)
$char string String to append to $keyName setting ''
  $bolt-spacing-sizes: _bolt-create-spacing-map($bolt-spacing-values);

Returns

map$map

Source

_tools-spacing.scss:15 02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri
A map created from $bolt-spacing-values
  $bolt-spacing-sizes: _bolt-create-spacing-map($bolt-spacing-values);

Source

_tools-spacing.scss:29 02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri
Convenience function for pulling data from $bolt-spacing-sizes
  @function bolt-spacing($size) { 
  @return map-get($bolt-spacing-sizes, nth($size, 1));
}
Name Type Description Default
$size string T-shirt size to pull (None)
  .element {
  min-height: bolt-spacing(large);
}

Returns

numberA spacing unit

Source

_tools-spacing.scss:41 02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri
Convert shirt sizes in baseline-optimized sizes
  @function bolt-v-spacing($size, $modifier: null) { 
  @if ($modifier == 'squished') {
    $modifier: $bolt-spacing-squished;
  } @else if ($modifier == 'stretched') {
    $modifier: $bolt-spacing-stretched;
  } @else {
    $modifier: 1;
  }

  @return (bolt-spacing($size) / bolt-strip-unit($bolt-spacing-gutter)) * $bolt-spacing-leading * $modifier;
}
Name Type Description Default
$size string T-shirt size (None)
$modifier string Unit to multiply ending result by null
  .element {
  width: bolt-v-spacing(xsmall);
}

Returns

number

Source

_tools-spacing.scss:58 02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri
An alias for @function bolt-v-spacing
  @function bolt-vertical-spacing($size) { 
  @return bolt-v-spacing($size);
}
Name Type Description Default
$size string T-shirt size (None)
  .element {
  width: bolt-vertical-spacing(xsmall);
}

Returns

number

Source

_tools-spacing.scss:79 02-tools/tools-spacing/_tools-spacing.scss
View on GitHub

Author

Salem Ghoweri
Directional-property mixins are shorthands for writing properties like the following
  @function _bolt-collapse-directional-values($vals) { 
  $output: null;

  $a: nth($vals, 1);
  $b: if(length($vals) < 2, $a, nth($vals, 2));
  $c: if(length($vals) < 3, $a, nth($vals, 3));
  $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4)));

  @if $a == 0 { $a: 0; }
  @if $b == 0 { $b: 0; }
  @if $c == 0 { $c: 0; }
  @if $d == 0 { $d: 0; }

  @if $a == $b and $a == $c and $a == $d { $output: $a; }
  @else if $a == $c and $b == $d { $output: $a $b; }
  @else if $b == $d { $output: $a $b $c; }
  @else { $output: $a $b $c $d; }

  @return $output;
}
Name Type Description Default
$vals List List of directional values (None)
  .element {
  @include border-style(dotted null);
  @include margin(null 0 10px);
}
  .element {
  border-bottom-style: dotted;
  border-top-style: dotted;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
}

Returns

List

Source

_tools-collapse-directionals.scss:32 02-tools/tools-spacing/libs/_tools-collapse-directionals.scss
View on GitHub

Author

Salem Ghoweri
Checks if a list does not contain any values.
  @function _bolt-contains-falsy($list) { 
  @each $item in $list {
    @if not $item {
      @return true;
    }
  }

  @return false;
}
Name Type Description Default
$list list The list to check against. (None)

Returns

boolean

Source

_tools-contains-falsy.scss:15 02-tools/tools-spacing/libs/_tools-contains-falsy.scss
View on GitHub

Author

Salem Ghoweri
Output directional properties, for instance `margin`.
  @mixin _bolt-directional-property($prefix, $suffix, $values) { 
  @if $important == important {
    $important: !important;
  }

  // Property Names
  $top:    $prefix + '-top'    + if($suffix, '-#{$suffix}', '');
  $bottom: $prefix + '-bottom' + if($suffix, '-#{$suffix}', '');
  $left:   $prefix + '-left'   + if($suffix, '-#{$suffix}', '');
  $right:  $prefix + '-right'  + if($suffix, '-#{$suffix}', '');
  $all:    $prefix +             if($suffix, '-#{$suffix}', '');

  $values: _bolt-collapse-directional-values($values);

  @if _bolt-contains-falsy($values) {
    @if nth($values, 1) { #{$top}: nth($values, 1) $important; }

    @if length($values) == 1 {
      @if nth($values, 1) {
        #{$right}: nth($values, 1) $important;
        #{$bottom}: nth($values, 1) $important;
        #{$left}: nth($values, 1) $important;
      }
    } @else {
      @if nth($values, 2) { #{$right}: nth($values, 2) $important; }
    }

    @if length($values) == 2 {
      @if nth($values, 1) { #{$bottom}: nth($values, 1) $important; }
      @if nth($values, 2) { #{$left}: nth($values, 2) $important; }
    } @else if length($values) == 3 {
      @if nth($values, 3) { #{$bottom}: nth($values, 3) $important; }
      @if nth($values, 2) { #{$left}: nth($values, 2) $important; }
    } @else if length($values) == 4 {
      @if nth($values, 3) { #{$bottom}: nth($values, 3) $important; }
      @if nth($values, 4) { #{$left}: nth($values, 4) $important; }
    }
  } @else {
    #{$all}: $values $important;
  }
}
Name Type Description Default
$prefix String Prefix to use (None)
$suffix String Suffix to use (None)
$values List List of values (None)

Source

_tools-directional-property.scss:20 02-tools/tools-spacing/libs/_tools-directional-property.scss
View on GitHub

Author

Salem Ghoweri
Bolt Z Index mixin
  @mixin bolt-z-index($key: "content", $utility: false) { 
  $indexes: map-get($bolt-z-indexes, 'sets');
  $important: '';

  @if $utility {
    $important: '!important';
  }
  @if map-has-key($indexes, $key) {
    z-index: map-get($indexes, $key) #{$important};
  } @else {
    @error 'A value, #{$key}, was passed into @include bolt-z-index() that is not defined in $bolt-z-indexes';
  }
}
Name Type Description Default
$key string "content"
$utility boolean false
  .element {
   @include bolt-z-index(tooltip);
}

Throws

A value, #{$key}, was passed into @include bolt-z-index() that is not defined in $bolt-z-indexes

Source

_tools-z-index.scss:16 02-tools/tools-z-index/_tools-z-index.scss
View on GitHub
Bolt Z Index function
  @function bolt-z-index($key) { 
  $indexes: map-get($bolt-z-indexes, 'sets');
  @if map-has-key($indexes, $key) {
    @return map-get($indexes, $key)
  } @else {
    @error 'A value, #{$key}, was passed into bolt-z-index() that is not defined in $bolt-z-indexes';
  }
}
Name Type Description Default
$key string (None)
  .element {
   z-index: bolt-z-index('nav');
}

Throws

A value, #{$key}, was passed into bolt-z-index() that is not defined in $bolt-z-indexes

Source

_tools-z-index.scss:36 02-tools/tools-z-index/_tools-z-index.scss
View on GitHub
This outputs the correct bolt values for transform and box-shadow
  @mixin bolt-shadow($key: 'G', $lifted: false, $base-color: false, $utility: false) { 
  $shadows: map-get(bolt-get-shadows-map(), 'sets');
  @if $base-color {
    $shadows: map-get(bolt-get-shadows-map($base-color), 'sets');
  }
  $important: '';

  @if $utility {
    $important: '!important';
  }
  @if not(map-has-key($shadows, $key)) {
    @error 'A value, #{$key}, was passed into @include bolt-shadow() that is not defined in $bolt-shadows';
  } @else {
    @if $lifted {
      transform: translateY(-2px) #{$important};
      box-shadow: unquote(map-get(map-get($shadows, $key), 'raised')) #{$important};
    } @else {
      box-shadow: unquote(map-get(map-get($shadows, $key), 'base')) #{$important};
      transition: all 0.3s cubic-bezier(.25,.8,.25,1) #{$important};
    }
  }
}
Name Type Description Default
$key string The desired shadow level (e.g. 'level-30') 'G'
$lifted boolean Weather or not to use the 'raised' values false
$base-color boolean|string The base shadow color (with the 'transparentize' filter applied) false
$utility boolean If true, adds '!important' to declaration false
  .element {
   @include bolt-shadow('level-30', true);
}

Throws

A value, #{$key}, was passed into @include bolt-shadow() that is not defined in $bolt-shadows

Source

_tools-shadow.scss:19 02-tools/tools-shadow/_tools-shadow.scss
View on GitHub
A private utility function for carrying out string replacement
  @function _bolt-str-replace($string, $search, $replace: '') { 
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + _bolt-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}
Name Type Description Default
$string string The "needle" (None)
$search string The "haystack" (None)
$replace string The string value to replace ''
  $example = _bolt-str-replace($name, ' ', '_')

Source

_tools-font-face.scss:26 02-tools/tools-font-face/_tools-font-face.scss
View on GitHub

Author

Mike Mai
Adds a correctly formatted @font-face declaration. Set at the top of the stylesheet.
  @mixin bolt-font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) { 
  $src: null;

  $extmods: (
    eot: '?',
    svg: '#' + _bolt-str-replace($name, ' ', '_')
  );

  $formats: (
    otf: 'opentype',
    ttf: 'truetype'
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url('#{$path}.#{$extmod}') format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($name);
    font-style: $style;
    font-weight: $weight;
    src: $src;
  }
}
Name Type Description Default
$name string The 'font-family' name string (None)
$path string Path to the font files (None)
$weight string Default font weight null
$style string Default style null
$exts string Default extensions woff2 woff
  @include bolt-font-face('Awesome_font_name, '/path/to/font/');

Source

_tools-font-face.scss:48 02-tools/tools-font-face/_tools-font-face.scss
View on GitHub

Author

Mike Mai
This returns the font-family for a specific element. Brand fonts are the default, with system fonts as the fallback.
  @mixin bolt-font-family($type, $is_root: false) { 
  $fallback-font-family: map-get-deep($bolt-font-families, 'font-families', $type, 'fallback-font');
  $custom-font-family: map-get-deep($bolt-font-families, 'font-families', $type, 'custom-font');
  $fonts-loaded-class: map-get-deep($bolt-font-families, 'font-families', $type, 'loaded-class');

  $fontFamilyNames: map-keys(map-get($bolt-font-families, 'font-families')); // get the names of all available font families (custom and fallback)

  font-family: $fallback-font-family;
  font-family: var(--bolt-font-family-#{$type});

  @if $is_root == false {
    .#{$fonts-loaded-class} & {
      font-family: $custom-font-family;
      font-family: var(--bolt-font-family-#{$type});
    }
  }
  @else {
    @each $fontFamilyName in $fontFamilyNames {
      --bolt-font-family-#{$fontFamilyName}: #{map-get-deep($bolt-font-families, 'font-families', $fontFamilyName, 'fallback-font')};
    }

    &.#{$fonts-loaded-class} {
      @each $fontFamilyName in $fontFamilyNames {
        --bolt-font-family-#{$fontFamilyName}: #{map-get-deep($bolt-font-families, 'font-families', $fontFamilyName, 'custom-font')};
      }

      font-family: $custom-font-family;
    }
  }
}
Name Type Description Default
$type string Defines the font-family being used for each type of text: heading, body, or code. (None)
$is_root boolean false
  .element {
   @include bolt-font-family(body);
}

Source

_tools-font-family.scss:17 02-tools/tools-font-family/_tools-font-family.scss
View on GitHub

Author

Mike Mai
This applies default font kerning styles for supporting browsers.
  @mixin bolt-font-kerning() { 
  font-feature-settings: 'kern';
  font-kerning: normal; // Safari 7+, Firefox 24+, Chrome 33(?)
}
  *,
*:before,
*:after {
 @include bolt-font-kerning;
}

Source

_tools-font-kerning.scss:18 02-tools/tools-font-kerning/_tools-font-kerning.scss
View on GitHub

Author

Mike Mai
This returns the font-size and relevant line-height for a specific element.
  @mixin bolt-font-size($size, $leading: regular) { 
  $font-size: map-get-deep($bolt-font-sizes, 'font-sizes', $size, 'font-size');

  @if (type-of($font-size) == 'map') {
    $length: length(map-keys($font-size));

    @if ($length < 2) {
      font-size: nth($font-size, 2);
    } @else {
      @include bolt-poly-fluid-sizing('font-size', $font-size);
    }
  } @else {
    font-size: $font-size;
  }

  @if ($leading != '' and  $leading != null) {
    @if (type-of($leading) == number) {
      $leading: $leading;
    } @else if (type-of($leading) == string) {
      $leading: map-get-deep($bolt-font-sizes, 'font-sizes', $size, 'line-height', $leading);
    }

    @if (type-of($leading) == 'map') {
      $length: length(map-keys($leading));

      @if ($length < 2) {
        line-height: nth($leading, 2);
      } @else {
        @debug $leading;
        @include bolt-poly-fluid-sizing('line-height', $leading);
      }
    } @else {
      line-height: $leading;
    }
  }
}
Name Type Description Default
$size string Defines the size of the text: xsmall, small, base, medium, large, xlarge, or xxlarge. (None)
$leading string Defines the line-height of the text: regular or tight. regular
  .element {
   @include bolt-font-size(large);
}

Source

_tools-font-size.scss:18 02-tools/tools-font-size/_tools-font-size.scss
View on GitHub

Author

Mike Mai
This returns the font-weight for a specific element.
  @mixin bolt-font-weight($weight) { 
  $font-weight: map-get-deep($bolt-font-weights, 'font-weights', $weight);

  font-weight: $font-weight;
}
Name Type Description Default
$weight string Defines the weight of the text: bold, semi-bold, regular, or normal. (None)
  .element {
   @include bolt-font-weight(bold);
}
  .element {
   font-weight: 800;
}

Source

_tools-font-weight.scss:20 02-tools/tools-font-weight/_tools-font-weight.scss
View on GitHub

Author

Mike Mai
Determines the correct color (black or white) to return, given the color passed in
  @function bolt-text-contrast($color) { 
  @if bolt-theme-tone($color) == "dark" {
    @return bolt-color(white);
  } @else {
    @return bolt-color(black);
  }
}
Name Type Description Default
$color color The color to check against (None)
  .element:hover {
  color: bolt-text-contrast($primary-background-default);
}

Returns

colorEither 'black' or 'white'

Source

_tools-text-contrast.scss:17 02-tools/tools-text-contrast/_tools-text-contrast.scss
View on GitHub

Author

Salem Ghoweri
Provides a bolt method for transforming text to uppercase
  @mixin bolt-uppercase() { 
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
  .element {
   @include bolt-uppercase();
}

Source

_tools-uppercase.scss:15 02-tools/tools-uppercase/_tools-uppercase.scss
View on GitHub

Author

Salem Ghoweri
Just checking "@supports (display: contents)" isn't enough to know that a browser supports it FULLY. So, we check support for both "display: contents" and "caret-color" (which has similar browser support) -- if a browser fails either check, it gets the cross-browser fallback instead.
  @mixin bolt-if-browser-supports-display-contents() { 
  @supports (display: contents) and (caret-color: red) {
    @content;
  }
}
  .element {
  @include bolt-if-browser-supports-display-contents {
    .element__item {
      @media screen and (max-width: #{bolt-breakpoint(xsmall)}) {
        display: contents;
      }
    }
  }
}

Source

_tools-browser-support.scss:27 02-tools/tools-browser-support/_tools-browser-support.scss
View on GitHub

Author

Remy Denton
Provides the ability to add a proper clearfix
  @mixin bolt-clearfix($important: null) { 
  @if $important == important {
    $important: !important;
  }

  &:before,
  &:after {
    content: ' ' $important;
    display: table $important;
  }

  &:after {
    clear: both $important;
  }
}
Name Type Description Default
$important boolean Set true to add "!important" null
  .element {
  @include bolt-clearfix();
}

Source

_tools-clearfix.scss:16 02-tools/tools-clearfix/_tools-clearfix.scss
View on GitHub

Author

Salem Ghoweri
Define CSS that only targets Internet Explorer 11.
  @mixin bolt-ie11-only() { 
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}
  .element {
   @include bolt-ie11-only {
     display: block;
   }
}

Source

_tools-ie11-only.scss:17 02-tools/tools-ie11-only/_tools-ie11-only.scss
View on GitHub

Author

Mike Mai
Calculate the definition of a line between two points
  @function bolt-linear-interpolation($map) { 
  $keys: map-keys($map);
  @if (length($keys) != 2) {
    @error 'linear-interpolation() $map must be exactly 2 values';
  }

  // The slope
  $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1))) / ( nth($keys, 2) - nth($keys, 1));

  // The y-intercept
  $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);

  // Determine if the sign should be positive or negative
  $sign: '+';
  @if ($b < 0) {
    $sign: '-';
    $b: abs($b);
  }

  @return calc(#{$m * 100}vw #{$sign} #{$b});
}
Name Type Description Default
$map map A SASS map of viewport widths and size value pairs (None)
  font-size: bolt-linear-interpolation((320px: 18px, 768px: 26px));

Returns

NumberA linear equation as a calc() function

Throws

linear-interpolation() $map must be exactly 2 values

Source

_tools-linear-interpolation.scss:17 02-tools/tools-linear-interpolation/_tools-linear-interpolation.scss
View on GitHub

Author

Mike Mai
Removed an item for a SASS list based on it's index (mimics behavior of the native map-remove function)
  @function bolt-list-remove($list, $index) { 
  $newList: ();
  @for $i from 1 through length($list) {
    @if $i != $index {
      $newList: append($newList, nth($list, $i), 'space');
    }
  }
  @return $newList;
}
Name Type Description Default
$list list A SASS list (None)
$index string The list index to remove (None)
  $list: bolt-list-remove($list, index($list, $value));

Returns

list$newList - A SASS list

Source

_tools-list-remove.scss:17 02-tools/tools-list-remove/_tools-list-remove.scss
View on GitHub

Author

Mike Mai
Sort a SASS list
  @function bolt-list-sort($list) { 
    $sortedlist: ();
    @while length($list) > 0 {
        $value: nth($list, 1);
        @each $item in $list {
          @if type-of($item) == "number" and type-of($value) == "number" {
            @if $item < $value {
                $value: $item;
            }
          } @else {
            @warn 'Problem encountered'; // `@warn` shows Backtrace, `@error` does not
            @error 'These values are not sortable: ' + $item + ' and ' + $value;
          }
        }
        $sortedlist: append($sortedlist, $value, "space");
        $list: bolt-list-remove($list, index($list, $value));
    }
    @return $sortedlist;
}
Name Type Description Default
$list list A SASS list (None)
  $keys: bolt-list-sort(map-keys($map));

Returns

List$sortedlist - A sorted SASS list

Throws

These values are not sortable:

Source

_tools-list-sort.scss:17 02-tools/tools-list-sort/_tools-list-sort.scss
View on GitHub
Sort map by keys
  @function bolt-map-sort($map) { 
  $keys: bolt-list-sort(map-keys($map));
  $sortedMap: ();
  @each $key in $keys {
    $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key)));
  }
  @return $sortedMap;
}
Name Type Description Default
$map map A SASS map (None)
  $map: bolt-map-sort($map);

Returns

Map$sortedMap - A SASS map sorted by keys

Source

_tools-map-sort.scss:18 02-tools/tools-map-sort/_tools-map-sort.scss
View on GitHub

Author

Mike Mai
Provides a bolt method for controlling the user's ability to select text.
  @mixin bolt-no-select() { 
  user-select: none;
}
  .element {
   @include bolt-no-select;
}

Source

_tools-no-select.scss:15 02-tools/tools-no-select/_tools-no-select.scss
View on GitHub

Author

Salem Ghoweri
Bolt Opacity mixin
  @mixin bolt-opacity($value, $important: false) { 
  $important: '';

  @if $utility {
    $important: '!important';
  }

  @if map-has-key($bolt-opacities, $value) {
    opacity: map-get($bolt-opacities, $value) #{$important};
  } @else {
    @error 'A value, #{$value}, was passed into @include bolt-opacity() that is not defined in $bolt-opacities';
  }
}
Name Type Description Default
$value string (None)
$important boolean false
  .element {
   @include bolt-opacity(80);
}

Throws

A value, #{$value}, was passed into @include bolt-opacity() that is not defined in $bolt-opacities

Source

_tools-opacity.scss:16 02-tools/tools-opacity/_tools-opacity.scss
View on GitHub
Bolt Opacity function
  @function bolt-opacity($value) { 
  @if map-has-key($bolt-opacities, $value) {
    @return map-get($bolt-opacities, $value)
  } @else {
    @error 'A value, #{$value}, was passed into bolt-opacity() that is not defined in $bolt-opacities';
  }
}
Name Type Description Default
$value string (None)
  .element {
   opacity: bolt-opacity(80);
}

Throws

A value, #{$value}, was passed into bolt-opacity() that is not defined in $bolt-opacities

Source

_tools-opacity.scss:36 02-tools/tools-opacity/_tools-opacity.scss
View on GitHub
Bolt utility function to convert pixels to rems
  @function bolt-rem($pixels, $context: $bolt-base-font-size--min) { 
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }
  @if (unitless($context)) {
    $context: $context * 1px;
  }
  @return $pixels / $context * 1rem;
}
Name Type Description Default
$pixels string|number The pixel value to convert (None)
$context string|number Value to divide pixel value by (before rem multiplication) $bolt-base-font-size--min
  .element {
  font-size: bolt-rem(18px);
}

Returns

stringrem value (with unit)

Source

_tools-px-to-rem.scss:18 02-tools/tools-px-to-rem/_tools-px-to-rem.scss
View on GitHub

Author

Mike Mai
Repeat a block of styles as a separate rule-set for each selector provided. Does not combine multiple selectors with commas. Most often used with selectors like `:host` which do not work properly when combined with other selectors.
  @mixin bolt-repeat-rule($selectors) { 
  @each $selector in $selectors {
    #{$selector} {
      @content;
    }
  }
}
Name Type Description Default
$selectors list A SASS list of selectors (None)
  @include repeat-rule(('bolt-link', ':host')) {
  display: inline;
}

Source

_tools-repeat-rule.scss:17 02-tools/tools-repeat-rule/_tools-repeat-rule.scss
View on GitHub

Author

Dan Morse
Remove the unit of a length.
  @function bolt-strip-unit($number) { 
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}
Name Type Description Default
$number Number Number to remove unit from (None)
  $bolt-floating-label-text-scale: bolt-strip-unit($bolt-font-size--xsmall);

Returns

NumberUnitless number

Source

_tools-strip-unit.scss:17 02-tools/tools-strip-unit/_tools-strip-unit.scss
View on GitHub

Author

Mike Mai
Provides a bolt method for correctly hiding an element visually (for accessibility)
  @mixin bolt-visuallyhidden($important: null) { 
  @if $important == important {
    $important: !important;
  }
  position: absolute $important;
  width: 1px $important;
  height: 1px $important;
  overflow: hidden $important;
  margin: -1px $important;
  padding: 0 $important;
  border: 0 $important;
  clip: rect(0 0 0 0) $important;
  clip-path: inset(50%) $important;
  white-space: nowrap $important;
}
Name Type Description Default
$important string If 'important' is set, than '!important' will be returned null
  .element {
   @include bolt-visuallyhidden(important);
}

Source

_tools-visuallyhidden.scss:16 02-tools/tools-visuallyhidden/_tools-visuallyhidden.scss
View on GitHub

Author

Salem Ghoweri
Assigns a variable to the global map
  @function bolt-css-vars-assign() { 
  // CHECK PARAMS
  @if ($name==null) {
    @error "Variable name is expected, instead got: null";
  }
  @if ($value == null) {
    @error "Variable value is expected, instead got: null";
  }
  // assign to the global map
  @if ($bolt-css-vars-debug-log and map-get($bolt-css-variables, $name)) {
    @debug "'#{$name}' variable is reassigned";
  }
  @return map-merge($bolt-css-variables, ($name: $value));
}

Throws

Variable name is expected, instead got: null
Variable value is expected, instead got: null

Source

_tools-css-vars.scss:18 02-tools/tools-css-vars/_tools-css-vars.scss
View on GitHub
Emulates var() CSS native function behavior
  @function bolt-var($args, $args2) { 
  $var: '';
  $opacity: 1;

  @if (length($args) >= 1) {
    $var: nth($args, 1);
  }

  @if type-of($var) == list {
    $opacity: nth($var, 2);
  }

  $varName: str-slice(nth($var, 1), 8, str-length(nth($var, 1)));

  @if str-slice($varName, 0, 5) == 'theme' {
    $varNameSansTheme: str-slice($varName, 7, str-length($varName));

    @if bolt-is-theme-var($varNameSansTheme) and bolt-is-shimmable-theme-prop($varNameSansTheme) {
      @return bolt-theme($varNameSansTheme, $opacity);
    } @else {
      // @warn "The `#{$varNameSansTheme}` theme-specific CSS variable used isn't a registered theme variable in Bolt. Be carefull as these will not work as expected in IE 11...";
    }
  } @else {
    // @warn $varName + ' CSS variable was used but not registered as a Globally variable in Bolt. Be carefull as these will not work as expected in IE 11...';
  }
  @return var($args);
}
Name Type Description Default
$args String Variable name (None)
$args2 string Optional default value if variable is not assigned yet (None)
  color: var(--main-color);
background: var(--main-bg, green);

Source

_tools-css-vars.scss:40 02-tools/tools-css-vars/_tools-css-vars.scss
View on GitHub
CSS mixin to provide variables
  @mixin bolt-css-vars($varMap: null, $root: false) { 
  // CHECK PARAMS
  @if ($varMap == null) {
    @error "Map of variables is expected, instead got: null";
  }
  @if (type_of($varMap) != map) {
    @error "Map of variables is expected, instead got another type passed: #{type_of($varMap)}";
  }
  // PROCESS
  @if ($bolt-css-vars-debug-log or not $bolt-css-vars-use-native) { // Sass or debug
    // merge variables and values to the global map (provides no output)
    @each $name, $value in $varMap {
      $bolt-css-vars: bolt-css-vars-assign($name, $value) !global; // store in global variable
    }
  }

  @if ($bolt-css-vars-use-native) { // CSS variables
    // Native CSS: assign CSS custom properties to the global scope
    @if $root == true {
      @at-root :root {
        @each $name, $value in $varMap {
          @if (type_of($value) == string) {
            #{$name}: $value // to prevent quotes interpolation
          } @else {
            #{$name}: #{$value}
          }
        }
      }
    } @else {
      @each $name, $value in $varMap {
        @if (type_of($value) == string) {
          #{$name}: $value // to prevent quotes interpolation
        } @else {
          #{$name}: #{$value}
        }
      }
    }
  }
}
Name Type Description Default
$varMap Map Check for our params null
$root Boolean Output as root? false
   @include bolt-css-vars((
     --color: rebeccapurple,
     --height: 68px,
     --margin-top: calc(2vh + 20px)
));

Throws

Map of variables is expected, instead got: null
Map of variables is expected, instead got another type passed: #{type_of($varMap)}

Source

_tools-css-vars.scss:127 02-tools/tools-css-vars/_tools-css-vars.scss
View on GitHub
Delay the encoding of ta literal to JSON to a type-specific method
  @function bolt-json-encode($value) { 
  $type: type-of($value);

  @if function-exists('_json-encode--#{$type}') {
    @return call(get-function('_json-encode--#{$type}'), $value);
  }

  @error 'Unknown type for #{$value} (#{$type}).';
}
Name Type Description Default
$value * value to be stringified (None)

Returns

StringJSON encoded string

Throws

Unknown type for #{$value} (#{$type}).

Source

_json.scss:15 02-tools/tools-sass-json-export/encode/api/_json.scss
View on GitHub
Proof quote a value
  @function _proof-quote($value) { 
  // $value: to-string($value);
  @return '"#{$value}"';
}
Name Type Description Default
$value * value to be quoted (None)

Returns

Stringquoted value

Source

_quote.scss:8 02-tools/tools-sass-json-export/encode/helpers/_quote.scss
View on GitHub
JSON.stringify a value and pass it as a font-family of head element
  @mixin bolt-json-encode($value, $flag) { 
  $flag: if(index('all' 'regular' 'media' 'comment', $flag), $flag, 'all');
  $json: bolt-json-encode($value);

  // Persistent comment
  @if $flag == 'comment' or $flag == 'all' {
    /*! json-encode: #{$json} */
  }
  // Regular property value pair
  @if $flag == 'regular' or $flag == 'all' {
    // All browsers except IE8-
    body {
      &::before {
        // This element must be in the render tree to get it via getComputedStyle(document.body, ':before');
        content: bolt-json-encode($value);
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
      }
    }

    // All browsers except Opera (Presto based)
    head {
      font-family: bolt-json-encode($value);
    }
  }

  // Falsy media query
  @if $flag == 'media' or $flag == 'all' {
    @media -json-encode {
      json {
        json: $json;
      }
    }
  }
}
Name Type Description Default
$value * value to be stringified (None)
$flag String (all) - output driver (None)

Source

_json.scss:8 02-tools/tools-sass-json-export/encode/mixins/_json.scss
View on GitHub
Encode a bool to JSON
  @function _json-encode--bool($bool) { 
  @return $boolean;
}
Name Type Description Default
$bool Bool bool to be encoded (None)

Returns

Boolencoded bool

Source

_bool.scss:7 02-tools/tools-sass-json-export/encode/types/_bool.scss
View on GitHub
Encode a color to JSON
  @function _json-encode--color($color) { 
  @return _proof-quote($color);
}
Name Type Description Default
$color Color color to be encoded (None)

Returns

Stringencoded color

Source

_color.scss:8 02-tools/tools-sass-json-export/encode/types/_color.scss
View on GitHub
Encode a list to JSON
  @function _json-encode--list($list) { 
  $str: '';

  @each $item in $list {
    $str: $str + ', ' + bolt-json-encode($item);
  }

  @return '[' + str-slice($str, 3) + ']';
}
Name Type Description Default
$list List list to be encoded (None)

Returns

Stringencoded list

Source

_list.scss:8 02-tools/tools-sass-json-export/encode/types/_list.scss
View on GitHub
Encode a map to JSON
  @function _json-encode--map($map) { 
  $str: '';

  @each $key, $value in $map {
    $str: $str + ', ' + _proof-quote($key) + ': ' + bolt-json-encode($value);
  }

  @return '{' + str-slice($str, 3) + '}';
}
Name Type Description Default
$map Map map to be encoded (None)

Returns

Stringencoded map

Source

_map.scss:9 02-tools/tools-sass-json-export/encode/types/_map.scss
View on GitHub
Encode `null` to JSON
  @function _json-encode--null($null) { 
  @return 'null';
}
Name Type Description Default
$null Null `null` (None)

Returns

String

Source

_null.scss:7 02-tools/tools-sass-json-export/encode/types/_null.scss
View on GitHub
Encode a number to JSON
  @function _json-encode--number($number) { 
  @return if(unitless($number), $number, _proof-quote($number));
}
Name Type Description Default
$number Number number to be encoded (None)

Returns

Stringencoded number

Source

_number.scss:8 02-tools/tools-sass-json-export/encode/types/_number.scss
View on GitHub
Encode a string to JSON
  @function _json-encode--string($string) { 
  @return _proof-quote($string);
}
Name Type Description Default
$string String string to be encoded (None)

Returns

Stringencoded string

Source

_string.scss:8 02-tools/tools-sass-json-export/encode/types/_string.scss
View on GitHub
    • Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown

      Open Dropdown Close Dropdown