Component Specific Variables

Each component has its own style customization options using Sass variables. This list contains all component that have specific Sass variables. To directly access component descriptions, click on a component name. For the components that are not detailed on this page,  you can use custom style classe s to change the appearance of that component.

ActivityStream

Name

Default value

Derived value

Computed value

Comment

$activity-element-bg-color transparent transparent Activity item background.
$activity-element-border-top 1px solid $border-color $activity-element-border-top-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Activity upper separating bar.
$activity-element-bg-color-hover $gray-100 $activity-element-bg-color-hover-->$gray-100-->#f8f9fa #f8f9fa Activity item hover background color.
$activity-element-border-color-hover $border-color $activity-element-border-color-hover-->$border-color-->#e9ecef #e9ecef Activity item hover frame color.
$activity-element-padding-top $spacer * 0.7 0.7 Activity item upper padding.
$activity-margin $spacer 0 $activity-margin-->$spacer 0-->1rem 0 1rem 0 Activity stream margin.
$activity-icon-bg-color $light $activity-icon-bg-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Activity icon default background color.
$activity-time-color $gray-600 $activity-time-color-->$gray-600-->#6c757d #6c757d Activity date text color.
$activity-time-font-size $font-size-base * 0.84 0.84 rem Activity date font size.
$activity-time-margin-bottom $activity-time-font-size $activity-time-margin-bottom --> $activity-time-font-size --> $font-size-base * 0.84 0.84 rem Activity date lower margin.
$activity-time-line-height $activity-time-font-size $activity-time-line-height --> $activity-time-font-size --> $font-size-base * 0.84 0.84 rem Activity date row height.
$activity-blockquote-font-size $font-size-base 1 rem Activity history item font size.
$activity-blockquote-border-left 0.35rem solid $border-color $activity-blockquote-border-left-->0.35rem solid $border-color-->0.35rem solid $gray-200-->0.35rem solid #e9ecef 0.35rem solid #e9ecef Activity history item left separator line.
$activity-blockquote-padding 0 $spacer 0.35rem $spacer $activity-blockquote-padding--> 0 $spacer ($spacer * 0.35) $spacer-->0 1rem 0.35rem 1rem 0 1rem 0.35rem 1rem Activity history item padding.
$activity-blockquote-margin 0 0 ($spacer * 0.7) 0 0 (1 * 0.7) Activity history item margin.
$activity-blockquote-line-height ($font-size-base * 1.25) 1 rem Activity history item row height.
$activity-username-font-weight $font-weight-bold 700 Activity user name font weight.
$activity-username-margin-bottom $spacer * 0.35 0.35 Activity user name lower margin.
$activity-username-line-height 0.7rem 0.7rem Activity user name row height.
$activity-username-margin-top 0.35rem 0.35rem Activity user name upper margin.
$activity-username-font-size $font-size-base * 1.06 1.06 rem Activity user name font size.
$activity-content-line-height $font-size-base * 1.66 1.66 rem Activity content row height.
$activity-content-margin-right $spacer * 0.7 0.7 rem Activity content right margin.
$activity-content-background $light $activity-content-background-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Activity content row height.
$activity-content-padding $spacer * 0.7 0.7 rem Activity content padding.
$activity-content-border 1px solid $border-color $activity-content-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Activity content frame.
$activity-content-border-radius $border-radius 0.25 rem Activity content corner rounding radius.
$activity-content-font-size $font-size-base 1 Activity content font size.
$activity-padding-left-level-1 $spacer * 2.5 2.5 rem Indentation to the left of a first-level activity.
$activity-padding-left-level-2 2 * $activity-padding-left-level-1 $activity-padding-left-level-2-->2 * $activity-padding-left-level-1-->2 * 2.5rem 5rem Indentation to the left of a second-level activity.
$activity-padding-left-level-3 3 * $activity-padding-left-level-1 $activity-padding-left-level-3-->3 * $activity-padding-left-level-1-->7.5rem 7.5rem Indentation to the left of a third-level (or other) activity.

AdvancedFilter

Name

Default value

Derived value

Computed value

Comment

$filterbar-advanced-bg-active darken($highlight-color, 3%) $filterbar-advanced-bg-active-->darken($highlight-color, 3%)-->darken( #eefaff, 3%) darken( #eefaff, 3%) Active bar background color in case of a Filterbar AdvancedFilter.
$filterbar-advanced-menu-bg $primary $filterbar-advanced-menu-bg-->$primary-->#079e97 #079e97 Filter menu background color in case of a Filterbar AdvancedFilter.
$filterbar-advanced-menu-color $white $filterbar-advanced-menu-color-->$white-->#fff #fff Filter menu font color in case of a Filterbar AdvancedFilter.
$filterbar-advanced-menu-negate-bg $danger $filterbar-advanced-menu-negate-bg-->$danger-->#D9230F #D9230F Filter menu negated background color in case of a Filterbar AdvancedFilter.
$filterbar-advanced-menu-edited-bg $warning $filterbar-advanced-menu-edited-bg-->$warning-->#ffc107 #ffc107 Edited filter menu background color in case of a Filterbar AdvancedFilter.

Badge

Name Default value Derived value Computed value Comment
$badge-font-size 100% 100% Badge font size.
$badge-font-weight $font-weight-bold $badge-font-weight-->$font-weight-bold-->700 700 Badge font weight.
$badge-padding-y 0.25rem 0.25rem Badge padding y.
$badge-padding-x 0.4rem 0.4rem Badge padding x.
$badge-border-radius $border-radius $badge-border-radius-->$border-radius-->0.25rem 0.25rem Badge border radius.
$badge-transition $btn-transition $badge-transition-->$btn-transition-->color .15s color .15s Badge transition.
$badge-focus-width $input-btn-focus-width $badge-focus-width-->$input-btn-focus-width-->0.2rem 0.2rem Badge focus width.
$badge-pill-padding-x 0.6em 0.6rem Badge pill padding x.
$badge-pill-border-radius 10rem 0.6rem Badge pill border radius.

Blockquote

Name

Default value

Derived value

Computed value

Comment

$blockquote-border-color $gray-200 $blockquote-border-color-->$gray-200-->#e9ecef #e9ecef Blockquote border color.
$blockquote-border 0.35rem solid $blockquote-border-color $blockquote-border-->0.35rem solid $blockquote-border-color-->0.35rem solid $gray-200-->0.35rem solid #e9ecef 0.35rem solid #e9ecef Blockquote border.
$blockquote-padding ($spacer * 0.75) ($spacer * 1.5) $blockquote-padding-->($spacer * 0.75) ($spacer * 1.5) (1rem * 0.75) (1rem * 1.5) Blockquote padding.

Button

Name

Default value

Derived value

Computed value

Comment

$btn-default-color inherit inherit
$btn-default-bg $body-bg $btn-default-bg-->$body-bg-->$white #fff
$btn-default-border $input-border-color $btn-default-border-->$input-border-color-->$gray-400 #ced4da
$btn-icon-outline-color inherit inherit Button label color.
$btn-icon-outline-bg-color transparent transparent Button background color.
$btn-icon-outline-border 1px solid $border-color $btn-icon-outline-border-->1px solid $border-color--> $gray-200 --> #e9ecef 1px solid #e9ecef Button icon frame color.
$btn-icon-outline-hover-color $white $btn-icon-outline-hover-color-->$white--> #fff Button icon hover background color.
$btn-icon-outline-padding ($spacer * 0.25) ($spacer * 0.5) $btn-icon-outline-padding-->($spacer * 0.25) ($spacer * 0.5)--> (0.25rem) (0.5rem) Button inner margin.
$btn-rounded-border-radius ($spacer * 4) $btn-rounded-border-radius-->($spacer * 4)-->(4rem) (4rem) Corner radius for rounded buttons (.btn-rounded)
$btn-padding-y-xs $btn-padding-y-sm * 0.8 $btn-padding-y-xs-->$btn-padding-y-sm * 0.8-->$input-btn-padding-y-sm * 0.8-->0.25rem * 0.8 0.2rem Lower and upper padding for mini buttons.
$btn-padding-x-xs $btn-padding-x-sm $btn-padding-x-xs-->$btn-padding-x-sm-->0.5rem 0.5rem Mini button side padding.
$btn-font-size-xs $btn-font-size-sm * 0.8 $btn-font-size-xs-->$btn-font-size-sm * 0.8-->0.75rem*0.8 0.6rem Mini button font size.
$btn-line-height-xs $btn-line-height-sm $btn-line-height-xs-->$btn-line-height-sm-->$line-height-sm-->1.5 1.5 Mini button line height.
$btn-border-radius-xs $btn-border-radius-sm $btn-border-radius-xs-->$btn-border-radius-sm-->$border-radius-sm-->0.2rem 0.2rem Rounded mini button corners.

Calendar

This component does not support style customization at this time.

CheckboxItem

This component does not have specific variables to use for style customization. However, you can use  custom style classes  and   Bootstrap variables   to change the appearance of this component.

CodeViewer

Name

Default value

Derived value

Computed value

Comment

$code-font-size 87,50% 87,50% Code font size.
$code-color $pink #e83e8c Code font color.

ColorPicker

Name Default value Derived value Computed value Comment
$colorpicker-selected-base-color $gray-200 $colorpicker-selected-base-color-->$gray-200-->#e9ecef #e9ecef Color picker default color.
$colorpicker-selected-width $font-size-base * 1.4 $colorpicker-selected-width-->$font-size-base * 1.4-->1rem * 1.4 1.4rem Color picker item box width.
$colorpicker-selected-height 0,8 0,8 Color picker item box height.
$colorpicker-box-min-width 9rem 9rem Minimum width for color picker box.
$colorpicker-box-shadow 0 0 ($spacer * 0.2) $shadow-color $colorpicker-box-shadow-->0 0 ($spacer * 0.2) $shadow-color-->0 0 (1rem * 0.2) rgba(#212529, 0.5) 0 0 (1rem * 0.2) rgba(#212529, 0.5) Color picker box frame shadow.
$colorpicker-box-padding $spacer * 0.3 $colorpicker-box-padding-->$spacer * 0.3-->1rem * 0.3 0.3rem Inner margin for color picker box.
$colorpicker-saturation-size 7rem 7rem Color picker box size.
$colorpicker-saturation-size 7rem 7rem Color picker box size.
$colorpicker-box-radius $border-radius $colorpicker-box-radius-->$border-radius-->0.25rem 0.25rem Color picker frame corner radius.
$colorpicked-hue-width 1rem - 1rem Color picker scale column width.
$colorpicked-hue-height 7rem 7rem Color picker scale column height.
$colorpicked-alpha-width 1rem - 1rem Color picker transparency column width (only in RGBA).
$colorpicked-alpha-height 7rem 7rem Color picker transparency column height (only in RGBA).
$colorpicked-color-height 0.7rem 0.7rem Height of the selected color bar in the color picker.
$colorpicked-color-selector-cube-size 0.7rem 0.7rem Size of predefined boxes in the color picker.

Combobox

Name

Default value

Derived value

Computed value

Comment

$combo-bg-color-active $primary $combo-bg-color-active-->$primary-->#079e97 #079e97 Background color of a selected option and hover.
$combo-bg-color-active-old $combo-border-color $combo-bg-color-active-old-->$combo-border-color-->#ced4da #ced4da Background color of the previous option.
$combo-color-active $white $combo-color-active-->$white-->#fff #fff Color of the currently selected option and hover.
$combo-color-active-old inherit inherit Label color of the previous option.
$combo-absolute-border-color $combo-border-color $combo-absolute-border-color-->$combo-border-color-->#ced4da #ced4da Frame color for the currently opened select container.
$combo-absolute-input-border-color $combo-border-color $combo-absolute-input-border-color-->$combo-border-color-->#ced4da #ced4da Input search field frame color for the currently opened select container.
$combo-absolute-input-margin $spacer * 0.3 $combo-absolute-input-margin-->$spacer * 0.3-->1rem * 0.3 0.3rem The area around the input search field around the currently opened select container.
$combo-absolute-input-padding $spacer * 0.3 $combo-absolute-input-padding-->$spacer * 0.3-->1rem * 0.3 0.3rem The area inside the input search field around the currently opened select container.
$combo-border-color-active $primary $combo-border-color-active-->$primary-->#079e97 #079e97 Active combobox frame color.
$combo-option-padding $spacer * 0.45 $combo-option-padding-->$spacer * 0.45-->1rem * 0.45 0.45rem Spacing around option labels.
$combo-option-font-size inherit inherit Option label size.
$combo-option-color inherit inherit Option label color.
$combo-option-font-weight $font-weight-base $combo-option-font-weight-->$font-weight-base-->$font-weight-normal-->400 400 Option label font weight.
$combo-option-font-style inherit inherit Option label font style.
$combo-option-bg-color $white $combo-option-bg-color-->$white-->#fff #fff Option label background color.
$combo-selected-color $body-color $combo-selected-color-->$body-color-->$gray-900-->#212529 #212529 Color of the currently selected option’s label.
$combo-selected-font-size inherit inherit Size of the currently selected option label.
$combo-selected-font-weight $font-weight-base $combo-selected-font-weight-->$font-weight-base-->$font-weight-normal-->400 400 Font weight of the currently selected option label.
$combo-selected-padding 0 ($spacer * 1.8) 0 ($spacer * 0.55) $combo-selected-padding-->0 ($spacer * 1.8) 0 ($spacer * 0.55)-->0 (1rem * 1.8) 0 (1rem * 0.55) 0 1.8rem 0 0.55rem The area around the label in a select field.
$combo-caret-color $gray-600 $combo-caret-color-->$gray-600-->#6c757d #6c757d Dropdown arrow color.
$combo-placeholder-color $gray-600 $combo-placeholder-color-->$gray-600-->#6c757d #6c757d Combobox placeholder color.
$combo-border-color $gray-400 $combo-border-color-->$gray-400-->#ced4da #ced4da Combobox frame color.

ContextMenu

Name

Default value

Derived value

Computed value

Comment

$context-menu-title-font-size $font-size-base $context-menu-title-font-size-->$font-size-base-->0.8125rem 0.8125rem Context menu title font size.
$context-menu-title-font-weight 600 - 600 Context menu title font weight.
$context-menu-title-color $gray-600 $context-menu-title-color-->$gray-600-->#6c757d #6c757d Context menu title color.
$context-menu-title-border 1px solid $border-color $context-menu-title-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Context menu title underline type.
$context-menu-title-padding $spacer $spacer ($spacer * 0.5) $context-menu-title-padding-->$spacer $spacer ($spacer * 0.5)-->1rem 1rem (0.5rem) 1rem 1rem (0.5rem) Context menu title padding.
$context-menu-title-min-height $context-menu-title-font-size * 3.5 $context-menu-title-min-height-->$context-menu-title-font-size * 3.5-->$font-size-base * 3.5-->1rem * 3.5 3.5rem Context menu title minimum height.
$context-menu-content-color $body-color $context-menu-content-color-->$body-color-->$gray-900--> #212529 #212529 Context menu content color.
$context-menu-content-padding ($spacer * 0.35) ($spacer * 1.45) ($spacer * 0.35) ($spacer * 0.35) $context-menu-content-padding-->($spacer * 0.35) ($spacer * 1.45) ($spacer * 0.35) ($spacer * 0.35)-->(1rem * 0.35) (1rem * 1.45) (1rem * 0.35) (1rem * 0.35) 0.35rem 1.45rem 0.35rem 0.35rem Context menu content padding.
$context-menu-close-btn-color $gray-500 $context-menu-close-btn-color-->$gray-500-->#adb5bd #adb5bd Context menu closing “x” icon color.
$context-menu-close-btn-hover-color $gray-600 $context-menu-close-btn-hover-color-->$gray-600-->#6c757d #6c757d Context menu closing “x” icon hover color.
$context-menu-close-btn-padding-right $spacer * 0.35 $context-menu-close-btn-padding-right-->$spacer * 0.35-->1rem * 0.35 0.35rem Spacing of the context menu closing “x” icon from the frame to the right.
$context-menu-item-border-radius $border-radius $context-menu-item-border-radius-->$border-radius-->0.25rem 0.25rem Rounding radius of an item frame corner in the dropdown list.
$context-menu-item-line-height $context-menu-title-font-size * 1.8 $context-menu-item-line-height-->$context-menu-title-font-size * 1.8-->$font-size-base * 1.8-->1rem * 1.8 1.8rem Row height of an item in the dropdown list.
$context-menu-item-margin $spacer * 0.3 $context-menu-item-margin-->$spacer * 0.3-->1rem * 0.3 0.3rem Margin of an item in the dropdown list.
$context-menu-item-left-padding $spacer * 1.85 $context-menu-item-left-padding-->1rem * 1.85-->1rem * 1.85 1.85rem Item indentation to the left in the dropdown list.
$context-menu-item-min-height $context-menu-title-font-size * 1.45 $context-menu-item-min-height-->$context-menu-title-font-size * 1.45-->$font-size-base * 1.45-->1rem * 1.45 1.45rem Minimum height of an item in the dropdown list.
$context-menu-item-icon-left-margin -($spacer * 1.45) $context-menu-item-icon-left-margin-->-($spacer * 1.45)-->-(1rem * 1.45) -1.45rem Left margin of an item icon in the dropdown list.
$context-menu-item-icon-right-padding $spacer * 0.35 $context-menu-item-icon-right-padding-->$spacer * 0.35-->1rem * 0.35 0.35rem Spacing between an item icon and the menu title in the dropdown list.
$context-menu-item-color inherit - inherit Dropdown list item color.
$context-menu-item-icon-color $context-menu-item-color $context-menu-item-icon-color-->$context-menu-item-color-->inherit inherit Dropdown list item icon color.
$context-menu-item-font-weight normal - normal Dropdown list item font weight.
$context-menu-input-margin ($spacer * 0.35) $spacer ($spacer * 0.35) $spacer $context-menu-input-margin-->($spacer * 0.35) $spacer ($spacer * 0.35) $spacer-->(1rem * 0.35) 1rem (1rem * 0.35) 1rem 0.35rem 1rem 0.35rem 1rem Context menu filter text item margin.
$context-menu-input-border 1px solid $border-color $context-menu-input-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Context menu filter text item frame.
$context-menu-input-border-color-focus $primary $context-menu-input-border-color-focus-->$primary-->#079e97 #079e97 Context menu filter text item active frame color.

DatePicker

Name

Default value

Derived value

Computed value

Comment

$date-picker-next-color $input-color $date-picker-next-color-->$input-color-->#495057 #495057 Increment arrow color.
$date-picker-day-off-bg-color $white $date-picker-day-off-bg-color-->$white-->#fff #fff Background color for days outside or within a range.
$date-picker-day-off-color $gray-500 $date-picker-day-off-color-->$gray-500-->#adb5bd #adb5bd Label color for days outside or within a range.
$date-picker-active-day-bg-color $primary $date-picker-active-day-bg-color-->$primary-->#079e97 #079e97 Background color for a selected day.
$date-picker-active-day-color $white $date-picker-active-day-color-->$white-->#fff #fff Label color for a selected day.
$date-picker-active-day-border 1px solid transparent 1px solid transparent Frame settings for a selected day.
$date-picker-active-range-color $gray-500 $date-picker-active-range-color-->$gray-500-->#adb5bd #adb5bd Interval color for a selected day.
$date-picker-active-range-bg-color $highlight-color $date-picker-active-range-bg-color-->$highlight-color-->#eefaff #eefaff Interval background color for a selected day.
$date-picker-bg-color $white $date-picker-bg-color-->$white-->#fff #fff Component background color.
$date-picker-caret-color $white $date-picker-caret-color-->$white-->#fff #fff Component’s small arrow (pointing to the input field) color.
$date-picker-caret-border-color $gray-400 $date-picker-caret-border-color-->$gray-400-->#ced4da #ced4da Component’s small arrow (pointing to the input field) frame color.
$date-picker-table-border-color $white $date-picker-table-border-color-->$white-->#fff #fff Frame color surrounding a month.
$date-picker-table-bg-color $date-picker-bg-color $date-picker-table-bg-color-->$date-picker-bg-color-->#fff #fff Background color for a month.
$date-picker-border-color $border-color $date-picker-border-color-->$border-color-->#e9ecef #e9ecef Frame color for the outermost component.
$date-picker-hover-bg-color $gray-200 $date-picker-hover-bg-color-->$gray-200-->#e9ecef #e9ecef Hover background color for a day.
$date-picker-time-bg-color $gray-200 $date-picker-time-bg-color-->$gray-200-->#e9ecef #e9ecef Time display background color.
$date-picker-time-border-color $gray-200 $date-picker-time-border-color-->$gray-200-->#e9ecef #e9ecef Time display frame color.
$date-picker-time-color inherit inherit Time display text color.
$date-picker-disabled-color $gray-500 $date-picker-disabled-color-->$gray-500-->#adb5bd #adb5bd Color for disabled components.
$date-picker-today-bg-color $light $date-picker-today-bg-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Today’s color.
$date-picker-today-border $date-picker-active-day-border $date-picker-today-border-->$date-picker-active-day-border-->1px solid transparent 1px solid transparent Today’s frame color.
$date-picker-today-color $primary $date-picker-today-color-->$primary-->#079e97 #079e97 Today’s text color.
$date-picker-buttons-border-top-color $border-color $date-picker-buttons-border-top-color-->$border-color-->#e9ecef #e9ecef Color of the separating element between DatePicker and buttons.
$date-picker-buttons-border-top-width 1px 1px Width of the separating element between DatePicker and buttons.
$date-picker-buttons-bg-color $date-picker-bg-color $date-picker-buttons-bg-color-->$date-picker-bg-color-->#fff #fff Background color for the container encasing the buttons.
$date-picker-selected-text-color inherit inherit Label color for a selected date.
$date-picker-selected-text-font-size $font-size-base $date-picker-selected-text-font-size-->$font-size-base-->1rem 1rem Label size for a selected date.
$date-picker-selected-text-padding-right $spacer * 0.6 $date-picker-selected-text-padding-right-->$spacer * 0.6-->1rem * 0.6 0.6rem Spacing to the right of a selected label from the buttons.
$date-picker-font-family arial arial Font used.

DateRangePicker

Name

Default value

Derived value

Computed value

Comment

$date-picker-active-day-bg-color $primary $date-picker-active-day-bg-color-->$primary-->#079e97 #079e97 Background color for a selected day.
$date-picker-active-day-border 1px solid transparent 1px solid transparent Frame settings for a selected day.
$date-picker-active-day-color $white $date-picker-active-day-color-->$white-->#fff #fff Label color for a selected day.
$date-picker-active-range-bg-color $highlight-color $date-picker-active-range-bg-color-->$highlight-color-->#eefaff #eefaff Interval background color for a selected day.
$date-picker-active-range-color $gray-500 $date-picker-active-range-color-->$gray-500-->#adb5bd #adb5bd Interval color for a selected day.
$date-picker-bg-color $white $date-picker-bg-color-->$white-->#fff #fff Component background color.
$date-picker-border-color $border-color $date-picker-border-color-->$border-color-->#e9ecef #e9ecef Frame color for the outermost component.
$date-picker-buttons-bg-color $date-picker-bg-color $date-picker-buttons-bg-color-->$date-picker-bg-color-->#fff #fff Background color for the container encasing the buttons.
$date-picker-buttons-border-top-color $border-color $date-picker-buttons-border-top-color-->$border-color-->#e9ecef #e9ecef Color of the separating element between DatePicker and buttons.
$date-picker-buttons-border-top-width 1px 1px Width of the separating element between DatePicker and buttons.
$date-picker-caret-border-color $gray-400 $date-picker-caret-border-color-->$gray-400-->#ced4da #ced4da Component’s small arrow (pointing to the input field) frame color.
$date-picker-caret-color $white $date-picker-caret-color-->$white-->#fff #fff Component’s small arrow (pointing to the input field) color.
$date-picker-day-off-bg-color $white $date-picker-day-off-bg-color-->$white-->#fff #fff Background color for days outside or within a range.
$date-picker-day-off-color $gray-500 $date-picker-day-off-color-->$gray-500-->#adb5bd #adb5bd Label color for days outside or within a range.
$date-picker-disabled-color $gray-500 $date-picker-disabled-color-->$gray-500-->#adb5bd #adb5bd Color for disabled components.
$date-picker-font-family arial arial Font used.
$date-picker-hover-bg-color $gray-200 $date-picker-hover-bg-color-->$gray-200-->#e9ecef #e9ecef Hover background color for a day.
$date-picker-next-color $input-color $date-picker-next-color-->$input-color-->#495057 #495057 Increment arrow color.
$date-picker-selected-text-color inherit inherit VARIABLE NOT USED
$date-picker-selected-text-font-size $font-size-base $date-picker-selected-text-font-size-->$font-size-base-->1rem 1rem Label size for a selected date.
$date-picker-selected-text-padding-right $spacer * 0.6 $date-picker-selected-text-padding-right-->$spacer * 0.6-->1rem * 0.6 0.6rem Spacing to the right of a selected label from the buttons.
$date-picker-table-bg-color $date-picker-bg-color $date-picker-table-bg-color-->$date-picker-bg-color-->#fff #fff Background color for a month.
$date-picker-table-border-color $white $date-picker-table-border-color-->$white-->#fff #fff Frame color surrounding a month.
$date-picker-time-bg-color $gray-200 $date-picker-time-bg-color-->$gray-200-->#e9ecef #e9ecef Time display background color.
$date-picker-time-border-color $gray-200 $date-picker-time-border-color-->$gray-200-->#e9ecef #e9ecef Time display frame color.
$date-picker-time-color inherit inherit Time display text color.
$date-picker-today-bg-color $light $date-picker-today-bg-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Today’s color.
$date-picker-today-border $date-picker-active-day-border $date-picker-today-border-->$date-picker-active-day-border-->1px solid transparent 1px solid transparent Today’s frame color.
$date-picker-today-color $primary $date-picker-today-color-->$primary-->#079e97 #079e97 Today’s text color.

DualListBox

Name

Default value

Derived value

Computed value

Comment

$dual-listbox-height 20rem 20rem Dual ListBox height.
$dual-listbox-font-size $font-size-base $dual-listbox-font-size-->$font-size-base-->0.8125rem 0.8125rem Dual ListBox font size.
$dual-listbox-bg-color $white $dual-listbox-bg-color-->$white-->#fff #fff Dual ListBox background color.
$dual-listbox-color $body-color $dual-listbox-color-->$body-color-->$gray-900-->#212529 #212529 Dual ListBox label color.
$dual-listbox-btn-color $gray-500 $dual-listbox-btn-color-->$gray-500-->#adb5bd #adb5bd Dual ListBox button arrow color.

FileItem

Name

Default value

Derived value

Computed value

Comment

$file-item-color $gray-500 $file-item-color-->$gray-500-->#adb5bd #adb5bd
$file-item-hover-color $primary $file-item-hover-color-->$primary-->#079e97 #079e97
$file-item-border-color $border-color $file-item-border-color-->$border-color-->#e9ecef #e9ecef
$file-item-detail-color $gray-500 $file-item-detail-color-->$gray-500-->#adb5bd #adb5bd
$file-item-detail-hover-color $primary $file-item-detail-hover-color-->$primary-->#079e97 #079e97
$file-item-danger-color $danger $file-item-danger-color-->$danger-->#D9230F #D9230F
$file-item-dnd-upload-btn-color $primary $file-item-dnd-upload-btn-color-->$primary-->#079e97 #079e97
$file-item-dnd-upload-btn-bg-color transparent transparent
$file-item-dnd-upload-btn-color-hover $white $file-item-dnd-upload-btn-color-hover-->$white-->#fff #fff
$file-item-dnd-upload-btn-bg-color-hover darken($primary, 4%) $file-item-dnd-upload-btn-bg-color-hover-->darken($primary, 4%)--> darken(#079e97, 4%)

FileMiniature

Name Default value Derived value Computed value Comment
$file-box-border 1px solid $border-color $file-box-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef File miniature component frame.
$file-box-bg-color $white $file-box-bg-color-->$white-->#fff #fff File miniature component background color.
$file-box-icon-color $gray-400 $file-box-icon-color-->$gray-400-->#ced4da #ced4da File miniature component icon color.
$file-box-icon-height $font-size-base * 7 - 7 rem File miniature component icon height.
$file-box-image-height $font-size-base * 7  - 7  rem File miniature component image height.
$file-box-icon-font-size $font-size-base * 5 - 5 rem File miniature component icon size.
$file-box-icon-padding $spacer ($spacer * 0.7) $file-box-icon-padding-->$spacer 0.7rem-->$spacer ($spacer * 0.7) 1 (1 * 0.7) File miniature component icon container padding.
$file-box-icon-text-align center - center File miniature component icon alignment.
$file-box-name-bg-color $light $file-box-name-bg-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) File miniature component file name background color.
$file-box-name-border-top 1px solid $border-color $file-box-name-border-top-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef File miniature component file name upper frame.
$file-box-name-color $blue $file-box-name-color-->$blue-->#007BFF #007BFF File miniature component file name color.
$file-box-name-align center - center -
$file-box-name-padding $spacer * 0.7 - 0.7 File miniature component file name padding.
$file-box-name-font-size $font-size-base $file-box-name-font-size-->$font-size-base-->0.8125rem 0.8125rem File miniature component file name font size.

iBox

Name

Default value

Derived value

Computed value

Comment

$ibox-title-bg-color $gray-100 $ibox-title-bg-color-->$gray-100-->#f8f9fa #f8f9fa Ibox header background color.
$ibox-content-bg-color $white $ibox-content-bg-color-->$white-->#fff #fff Ibox content background color.
$ibox-color inherit inherit Ibox default font color.
$ibox-title-color $ibox-color $ibox-title-color-->$ibox-color-->inherit inherit Ibox header default font color.
$ibox-content-color $ibox-color $ibox-content-color-->$ibox-color-->inherit inherit Ibox content default font color.
$ibox-margin-bottom 0 0 Ibox lower margin.
$ibox-margin 0 0 $ibox-margin-bottom 0 $ibox-margin-->0 0 $ibox-margin-bottom 0-->0 0 1.5rem 0 0 0 1.5rem 0 Ibox margin.
$ibox-padding 0 0 Ibox padding.
$ibox-border 1px solid $ibox-border-color $ibox-border-->1px solid $ibox-border-color-->1px solid $border-color-->1px solid $gray-200-->1px solid  #e9ecef 1px solid  #e9ecef Ibox frame.
$ibox-title-border-color $ibox-border-color $ibox-title-border-color-->$ibox-border-color-->$border-color-->$gray-200-->#e9ecef #e9ecef Ibox title frame.
$ibox-title-border-style none none Ibox title frame style.
$ibox-title-border-width 0 0 Ibox title frame width.
$ibox-title-padding $spacer $spacer ($spacer * 0.5) $ibox-title-padding-->$spacer $spacer ($spacer * 0.5)-->1rem 1rem (0.5rem) 1rem 1rem (0.5) Ibox title padding.
$ibox-title-min-height $ibox-title-text-font-size * 3 $ibox-title-min-height-->$ibox-title-text-font-size * 3-->$font-size-lg * 3-->$font-size-base * 1.25 * 3-->1rem * 1.25 * 3 3.75rem Ibox title minimum row height.
$ibox-title-text-font-weight 600 600 Ibox title font weight.
$ibox-title-text-margin 0 0 ($spacer * 0.5) 0 $ibox-title-text-margin-->0 0 ($spacer * 0.5) 0-->0 0 (1rem * 0.5) 0 0 0 (0.5rem) 0 Ibox title margin.
$ibox-title-text-font-size $font-size-lg $ibox-title-text-font-size-->$font-size-lg-->$font-size-base * 1.25-->1rem * 1.25 1.25rem Ibox title font size.
$ibox-content-border-color $ibox-border-color $ibox-content-border-color-->$ibox-border-color-->$border-color-->$gray-200-->#e9ecef #e9ecef Ibox content frame color.
$ibox-content-border-style solid solid none solid solid none Ibox content frame style.
$ibox-content-border-width 1px 0 1px 0 Ibox content frame width.
$ibox-content-padding $spacer $ibox-content-padding-->$spacer-->1rem 1rem Ibox content padding.
$ibox-content-font-size inherit inherit Ibox content default font size.
$ibox-tools-color $gray-400 $ibox-tools-color-->$gray-400-->#ced4da #ced4da Ibox tools icon color.
$ibox-tools-margin-left $spacer * 0.5 $ibox-tools-margin-left-->$spacer * 0.5-->1rem * 0.5 0.5rem Spacing between ibox tools icons.
$ibox-border-color $border-color $ibox-border-color-->$border-color-->#e9ecef #e9ecef IBox frame color.

Image

Name

Default value

Derived value

Computed value

Comment

$thumbnail-border-radius $border-radius $thumbnail-border-radius-->$border-radius-->0.25rem 0.25rem Thumbnail border radius.
$thumbnail-caption-color $body-color $thumbnail-caption-color-->$body-color-->$gray-900-->#212529 #212529 Custom text color for thumbnail captions.
$thumbnail-caption-padding $spacer * 0.7 $thumbnail-caption-padding-->$spacer * 0.7-->1rem * 0.7 0.7rem Padding around the thumbnail caption.

Notification - Toast

Name

Default value

Derived value

Computed value

Comment

$toastr-color $white - #fff Toast font color
$toastr-hover-color $gray-400 - $gray-400 Toast hover color
$toastr-warning-color $body-color - $gray-900 Toast warning color
$toastr-width $font-size-base * 23 - 23 rem Toast width
$toastr-shadow 0 0 $font-size-base $gray-600 - 0 0 1 $gray-600 Toast shadow
$toastr-hover-shadow $floating-shadow 0 0 1.875rem rgba($black, 0.1) 0 0 1.875rem rgba(#000, 0.1) Toast hover shadow
$toastr-border-radius $border-radius - $border-radius Rounded toast corners

NumberItem

This component does not have specific variables to use for style customization. However, you can use  custom style classes  and   Bootstrap variables   to change the appearance of this component.

Paragraph

Name

Default value

Derived value

Computed value

Comment

$paragraph-margin-bottom 1rem 1rem

ProgressBar

Name

Default value

Derived value

Computed value

Comment

$progress-title-color $body-color $progress-title-color-->$body-color-->$gray-900-->#212529 #212529 Title color.
$progress-title-font-size $font-size-base * 1.15 $progress-title-font-size-->$font-size-base * 1.15-->$1rem * 1.15 1.15rem Title size.
$progress-title-font-weight $font-weight-base $progress-title-font-weight-->$font-weight-base-->$font-weight-normal-->400 Title font weight.
$progress-position-text-color lighten($body-color, 15%) $progress-position-text-color-->lighten($body-color, 15%)-->lighten($gray-900, 15%)-->lighten(#212529, 15%) lighten(#212529, 15%) Status label color.
$progress-position-text-font-size $font-size-base $progress-position-text-font-size-->$font-size-base-->1rem 1rem Status label size.
$progress-position-text-font-weight $font-weight-base $progress-position-text-font-weight-->$font-weight-base-->$font-weight-normal-->400 400 Status font weight.
$progress-bar-background-color $primary $progress-bar-background-color-->$primary-->#079e97 #079e97 Progress bar color.

Span

This component does not have specific variables to use for style customization. However, you can use  custom style classes  and   Bootstrap variables   to change the appearance of this component.

Using custom classes to make "Lorem ipsum" appear with a red, bold font:

Sparkline

Name

Default value

Derived value

Computed value

Comment

$sparkline-tooltip-bg-color rgba($body-color, 0.85) $sparkline-tooltip-bg-color-->rgba($body-color, 0.85)-->rgba($gray-900, 0.85)-->rgba( #212529, 0.85) rgba( #212529, 0.85) Sparkline tooltip background color.
$sparkline-tooltip-color $white $sparkline-tooltip-color-->$white-->#fff #fff Sparkline tooltip font color.
$sparkline-tooltip-padding $spacer * 0.35 0.35rem Sparkline tooltip padding.
$sparkline-tooltip-min-height $font-size-base * 1.8 1.8 Sparkline tooltip minimum height.
$sparkline-tooltip-border-radius $border-radius $sparkline-tooltip-border-radius-->$border-radius-->0.25rem .25rem Sparkline tooltip rounding radius.
$sparkline-border solid 1px $border-color $sparkline-border-->solid 1px $border-color-->solid 1px $gray-200-->solid 1px #e9ecef solid 1px #e9ecef Sparkline frame.

Splitter

Name

Default value

Derived value

Computed value

Comment

$splitter-bg-color $white $splitter-bg-color-->$white-->#fff #fff Splitter layout background color.
$splitter-border none none Splitter layout frame settings.
$splitter-padding 0 0 Inner margin for the two outlined areas within a splitter component.
$splitter-margin 0 0 Within-frame margin for the splitter component.
$splitter-handle-bg-color $border-color $splitter-handle-bg-color-->$border-color-->#e9ecef #e9ecef Separating bar background color.
$splitter-handle-circle-color $white $splitter-handle-circle-color-->$white-->#fff #fff Color of the 3 dots in the middle of a separating bar.
$splitter-bar-color $splitter-handle-bg-color $splitter-bar-color-->$splitter-handle-bg-color-->$border-color-->$gray-200-->#e9ecef #e9ecef Background color for the area surrounding the 3 dots in the middle of the separating bar.
$splitter-bar-color-active $primary $splitter-bar-color-active-->$primary-->#079e97 #079e97 Active background color for the area surrounding the 3 dots in the middle of the separating bar.

StaticTextItem

Name

Default value

Derived value

Computed value

Comment

$static-text-item-bg-color transparent transparent Background color.
$static-text-item-color inherit inherit Font color.

SwitchItem

Name

Default value

Derived value

Computed value

Comment

$switch-on-color $white $switch-on-color-->$white-->#fff #fff Text color when enabled.
$switch-off-color $primary $switch-off-color-->$primary-->#079e97 #079e97 Text color when disabled.
$switch-on-bg-color $primary $switch-on-bg-color-->$primary-->#079e97 #079e97 Background color when enabled.
$switch-off-bg-color $white $switch-off-bg-color-->$white-->#fff #fff Background color when disabled.
$switch-border-color $primary $switch-border-color-->$primary-->#079e97 #079e97 Toggle switch frame color.
$switch-font-family Trebuchet Arial sans-serif Trebuchet Arial sans-serif Font used.
$switch-width 3.7rem 3.7rem Toggle switch width.
$switch-border-width $border-width $switch-border-width-->$border-width-->1px 1px Toggle switch frame width.
$switch-border-radius $border-radius $switch-border-radius-->$border-radius-->0.25rem 0.25rem Rounded corners for toggle switch frame.
$switch-on-content-padding-left ($spacer * 0.5) $switch-on-content-padding-left-->($spacer * 0.5)-->0.5rem 0.5rem Position of the “on” label, starting from the left side.

Tab

Name

Default value

Derived value

Computed value

Comment

$nav-tabs-border-color $gray-300 $nav-tabs-border-color-->$gray-300-->#dee2e6 #dee2e6 Tab border color.
$nav-tabs-border-width $border-width $nav-tabs-border-width-->$border-width-->1px 1px Tab border width.
$nav-tabs-border-radius $border-radius $nav-tabs-border-radius-->$border-radius-->0.25rem 0.25rem Tab border radius.
$nav-tabs-link-hover-border-color $gray-200 $gray-200 $nav-tabs-border-color $nav-tabs-link-hover-border-color-->$gray-200 $gray-200 $nav-tabs-border-color-->#e9ecef #e9ecef $gray-300-->#e9ecef #e9ecef #dee2e6 #e9ecef #e9ecef #dee2e6 Tab link hover border color.
$nav-tabs-link-active-color $gray-700 $nav-tabs-link-active-color-->$gray-700-->#495057 #495057 Tab link active color.
$nav-tabs-link-active-bg $body-bg $nav-tabs-link-active-bg-->$body-bg-->$white-->#fff #fff Tab link active background color.
$nav-tabs-link-active-border-color $gray-300 $gray-300 $nav-tabs-link-active-bg $nav-tabs-link-active-border-color-->$gray-300 $gray-300 $nav-tabs-link-active-bg-->#dee2e6 #dee2e6 $body-bg-->#dee2e6 #dee2e6 #fff #dee2e6 #dee2e6 #fff Tab link active border color.

Table

Name Default value Derived value Computed value Comment
$table-cell-padding .75rem .75rem
$table-cell-padding-sm .3rem .3rem
$table-color $body-color #212529
$table-bg null null
$table-accent-bg rgba($black, .05) rgba(#000, .05)
$table-hover-color $table-color #212529
$table-hover-bg rgba($black, .075) rgba(#000, .075)
$table-active-bg $table-hover-bg rgba(#000, .075)
$table-border-width $border-width 1px
$table-border-color $border-color #dee2e6
$table-head-bg $gray-200 #e9ecef
$table-head-color $gray-700 #495057
$table-dark-color $white #fff
$table-dark-bg $gray-800 #343a40
$table-dark-accent-bg rgba($white, .05) rgba(#fff, .05)
$table-dark-hover-color $table-dark-color #fff
$table-dark-hover-bg rgba($white, .075) rgba(#fff, .075)
$table-dark-border-color lighten($table-dark-bg, 7.5%) lighten(#343a40, 7.5%)
$table-striped-order odd odd
$table-caption-color $text-muted #6c757d
$table-bg-level -9 -9
$table-border-level -6 -6

Timeline

Name

Default value

Derived value

Computed value

Comment

$timeline-flat-separator-color $light $timeline-flat-separator-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%)
$timeline-flat-icon-color $primary $timeline-flat-icon-color-->$primary-->#079e97 #079e97
$timeline-flat-icon-border-width 0 0 Flat timeline icon frame width.
$timeline-flat-icon-border none none Flat timeline icon frame.
$timeline-flat-margin 0 ($spacer * 0.7) $timeline-flat-margin-->0 ($spacer * 0.7)-->0 (1rem * 0.7) 0 0.7rem Flat timeline margin.
$timeline-flat-icon-width $spacer * 2.15 $timeline-flat-icon-width-->$spacer * 2.15-->1rem * 2.15 2.15rem Flat timeline icon container width.
$timeline-flat-icon-font-size $spacer * 0.9 $timeline-flat-icon-font-size-->$spacer * 0.9-->1rem * 0.9 0.9rem Flat timeline icon font size.
$timeline-flat-date-width $spacer * 7.7 $timeline-flat-date-width-->$spacer * 7.7-->1rem * 7.7 7.7rem Flat timeline date area width.
$timeline-flat-date-max-width $timeline-flat-date-width $timeline-flat-date-max-width-->$timeline-flat-date-width-->7.7rem 7.7rem Flat timeline date area maximum width.
$timeline-flat-date-icon-distance $spacer * 0.35 $timeline-flat-date-icon-distance-->$spacer * 0.35-->1rem * 0.35 0.35rem Spacing between the flat timeline icon and date.
$timeline-flat-date-font-size $spacer * 0.65 $timeline-flat-date-font-size-->$spacer * 0.65-->1rem * 0.65 0.65rem Flat timeline date font size.
$timeline-flat-content-hover-bg $light $timeline-flat-content-hover-bg-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Flat timeline content hover background color.
$timeline-padding $spacer * 1.5 1.5rem Left spacing.
$timeline-icon-size $spacer * 2.85 2.85rem Icon container size.
$timeline-icon-font-size $spacer * 1.15 1.15rem Icon font size.
$timeline-icon-border-radius 0,5 0,5 Icon container rounding.
$timeline-icon-text-align center center Icon alignment.
$timeline-icon-border-width $spacer * 0.25 $spacer * 0.25 Icon container frame width.
$timeline-icon-border $timeline-icon-border-width solid $light $timeline-icon-border-->$timeline-icon-border-width solid $light-->0.25rem solid mix($gray-100, $gray-200, 50%) 0.25rem solid mix( #f8f9fa,  #e9ecef, 50%) Icon container frame.
$timeline-line-width $spacer * 0.3 0.3rem Timeline witdh.
$timeline-dark-line-color $light $timeline-dark-line-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Dark timeline color.
$timeline-light-line-color $white $timeline-light-line-color-->$white-->#fff #fff Light timeline color.
$timeline-dark-content-bg $light $timeline-dark-content-bg-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Dark timeline content background color.
$timeline-light-content-bg $white $timeline-light-content-bg-->$white-->#fff #fff Light timeline content background color.
$timeline-block-margin ($spacer * 2) 0 2 0 Timeline content area margin.
$timeline-content-margin 0 0 0 ($spacer * 4.3) 0 0 0 4.3 Timeline content margin.
$timeline-content-padding $spacer $timeline-content-padding-->$spacer-->1rem 1rem Timeline content padding.
$timeline-content-border-radius $border-radius $timeline-content-border-radius-->$border-radius-->0.25rem .25rem Timeline content frame rounding.
$timeline-content-title-color inherit inherit Timeline content title font color.
$timeline-content-title-font-size $font-size-lg $font-size-lg Timeline content title font size.
$timeline-content-title-font-weight $font-weight-bold $font-weight-bold Timeline content title font size.
$timeline-content-font-size inherit inherit Timeline content font weight.
$timeline-content-body-color inherit inherit Timeline content font color.
$timeline-date-color inherit inherit Timeline content date color.
$timeline-date-font-weight $font-weight-normal $font-weight-normal Timeline content date font weight.
$timeline-date-text-font-weight 500 500 Font weight for the text above the timeline content.
$timeline-dark-caret-color $light $timeline-dark-caret-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Dark timeline icon content arrow color.
$timeline-dark-second-caret-color $light $timeline-dark-second-caret-color-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Dark timeline icon content arrow color (every second content area).
$timeline-light-caret-color $white $timeline-light-caret-color-->$white-->#fff #fff Light timeline icon content arrow color.
$timeline-light-second-caret-color $white $timeline-light-second-caret-color-->$white-->#fff #fff Light timeline icon content arrow color (every second content area).
$timeline-caret-top $spacer * 1.15 1.15rem Timeline icon content arrow position.
$timeline-caret-size ($spacer * 0.5) $timeline-caret-size-->($spacer * 0.5)-->(1rem * 0.5) 0.5rem Timeline icon content arrow size.
$timeline-center-block-margin ($spacer * 4) 0 4 0 Mid-line timeline content area margin.
$timeline-center-line-position -($spacer * 0.15) -0.15rem Mid-line timeline position.

Treeview

Name

Default value

Derived value

Computed value

Comment

$treeview-bg-color $white $treeview-bg-color-->$white-->#fff #fff Treeview background color.
$treeview-item-bg-color-hover $highlight-color $treeview-item-bg-color-hover-->$highlight-color-->#eefaff #eefaff Treeview item hover background color.
$treeview-item-bg-color-selected $light $treeview-item-bg-color-selected-->$light-->mix(#f8f9fa, #e9ecef, 50%) mix(#f8f9fa, #e9ecef, 50%) Treeview selected item background color.
$treeview-color inherit inherit Treeview item text color.
$treeview-folder-color $yellow $treeview-folder-color-->$yellow-->#ffc107 #ffc107 Treeview folder color.
$treeview-folder-font-size $font-size-base * 1.45 $treeview-folder-font-size-->$font-size-base * 1.45-->0.8125rem * 1.45 1,178125rem Treeview folder font size.
$treeview-folder-margin-right $spacer * 0.5 $treeview-folder-margin-right-->$spacer * 0.5-->1rem * 0.5 0.5rem Treeview folder margin to the right from the name.
$treeview-border 1px solid $border-color $treeview-border-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Treeview frame.
$treeview-icon-font-family FontAwesome FontAwesome Treeview icon font type.
$treeview-border-radius $border-radius $treeview-border-radius-->$border-radius-->0.25rem 0.25rem Treeview frame corners rounding radius.
$treeview-padding ($spacer * 0.5) $spacer $treeview-padding-->($spacer * 0.5) $spacer-->(1rem * 0.5) 1rem (0.5rem) 1rem Treeview padding.
$treeview-margin-bottom $spacer $treeview-margin-bottom-->$spacer-->1rem 1rem Treeview margin.
$treeview-line 1px solid $border-color $treeview-line-->1px solid $border-color-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Treeview lines.
$treeview-node-opener-font-size $font-size-base * 1.2 $treeview-node-opener-font-size-->$font-size-base * 1.2-->1.2rem 1.2rem Treeview node opening icon size.
$treeview-node-opener-color $gray-700 $treeview-node-opener-color-->$gray-700-->#495057 #495057 Treeview node opening icon color.
$treeview-node-opener-font-weight $font-weight-normal 400 Treeview node opening icon font weight.
$treeview-node-opener-icon-size $font-size-base * 1.5 $treeview-node-opener-icon-size → $font-size-base * 1.5 1.5 rem
$treeview-checkbox-icon-size $treeview-node-opener-icon-size $treeview-checkbox-icon-size-->$treeview-node-opener-icon-size-->1.22rem 1.22rem
$treeview-checkbox-icon-font-size $font-size-base 1rem Treeview checkbox checked icon size.
$treeview-checkbox-icon-color $gray-700 $treeview-checkbox-icon-color-->$gray-700-->#495057 #495057 Treeview checkbox checked icon color.
$treeview-checkbox-border 1px solid $gray-400 $treeview-checkbox-border-->1px solid $gray-400--> 1px solid #ced4da Treeview checkbox frame.
$treeview-checkbox-bg-color $white $treeview-checkbox-bg-color-->$white-->#fff #fff Treeview checkbox background color.
$treeview-checkbox-border-radius $border-radius $treeview-checkbox-border-radius-->$border-radius-->0.25rem 0.25rem Treeview checkbox frame corners rounding radius.
$treeview-element-margin-left $spacer * 0.25 $treeview-element-margin-left-->$spacer * 0.25-->1rem * 0.25 0.25rem Treeview item left margin from checkbox.
$treeview-element-border-radius $border-radius $treeview-element-border-radius-->$border-radius-->0.25rem 0.25rem Treeview item corners rounding radius.
$treeview-element-font-size $font-size-base $treeview-element-font-size-->$font-size-base-->0.8125rem 0.8125rem Treeview item font size.

TreeviewNode

Name

Default value

Derived value

Computed value

Comment

$treeview-node-opener-font-size

$font-size-base * 1.2

$treeview-node-opener-font-size-->$font-size-base * 1.2-->1.2rem

1.2rem

Treeview node opening icon size.

$treeview-node-opener-color

$gray-700

$treeview-node-opener-color-->$gray-700-->#495057

#495057

Treeview node opening icon color.

$treeview-node-opener-font-weight $font-weight-normal 400 Treeview node opening icon font weight.

$treeview-node-opener-icon-size

$font-size-base * 1.5 -

1.22rem

Treeview node opening icon size.

Wizard

Name

Default value

Derived value

Computed value

Comment

$wizard-bg-color $white $wizard-bg-color-->$white-->#fff #fff Wizard background color.
$wizard-iconbar-bg-color $wizard-bg-color $wizard-iconbar-bg-color-->$wizard-bg-color-->#fff #fff Wizard icons container background color.
$wizard-iconbar-border-bottom 1px solid $gray-200 $wizard-iconbar-border-bottom-->1px solid $gray-200-->1px solid #e9ecef 1px solid #e9ecef Wizard icons container separating bar.
$wizard-icon-bg-color $wizard-bg-color $wizard-icon-bg-color-->$wizard-bg-color-->#fff #fff Wizard icons background color.
$wizard-icon-border-width $spacer * 0.3 $wizard-icon-border-width-->$spacer * 0.3-->1rem * 0.3 0.3rem Wizard icons frame width.
$wizard-icon-border-color $gray-200 $wizard-icon-border-color-->$gray-200-->#e9ecef #e9ecef Wizard icons frame color.
$wizard-icon-bg-color-active $info $wizard-icon-bg-color-active-->$info-->#007BFF #007BFF Wizard icons background color.
$wizard-icon-bg-color-done $primary $wizard-icon-bg-color-done-->$primary-->#079e97 #079e97 Wizard “READY” icon background color.
$wizard-icon-bg-color-invalid $warning $wizard-icon-bg-color-invalid-->$warning-->#ffc107 #ffc107 Wizard “ERROR” icon background color.
$wizard-icon-bg-color-disabled $gray-200 $wizard-icon-bg-color-disabled-->$gray-200-->#e9ecef #e9ecef Wizard “NOT AVAILABLE” icon background color.
$wizard-content-bg-color $wizard-bg-color $wizard-content-bg-color-->$wizard-bg-color-->#fff #fff Wizard content background color.
$wizard-content-padding $spacer * 0.7 $wizard-content-padding-->$spacer * 0.7-->1rem * 0.7 0.7rem Wizard content padding.
$wizard-icons-line-color $gray-200 $wizard-icons-line-color-->$gray-200-->#e9ecef #e9ecef Wizard line color spanning over icons.
$wizard-icons-line-width $spacer * 0.3 $wizard-icons-line-width-->$spacer * 0.3-->1rem * 0.3 0.3rem Wizard line weight spanning over icons.
$wizard-footer-bg-color $wizard-bg-color $wizard-footer-bg-color-->$wizard-bg-color-->#fff #fff Wizard footer background color.
$wizard-footer-border-top 1px solid $gray-200 $wizard-footer-border-top-->1px solid $gray-200-->1px solid  #e9ecef 1px solid  #e9ecef Footer separating bar.
$wizard-footer-btn-margin-right $spacer * 1.65 $wizard-footer-btn-margin-right-->$spacer * 1.65-->1rem * 1.65 1.65rem Spacing between footer buttons.
$wizard-footer-padding $spacer * 0.7 $wizard-footer-padding-->$spacer * 0.7-->1rem * 0.7 0.7rem Footer padding.
$wizard-icon-color-active $white $wizard-icon-color-active-->$white-->#fff #fff Active icon color.
$wizard-icon-color $gray-200 $wizard-icon-color-->$gray-200-->#e9ecef #e9ecef Icon default color.
$wizard-icon-color-disabled $wizard-bg-color $wizard-icon-color-disabled-->$wizard-bg-color-->#fff #fff Disabled icon color.
$wizard-icon-size $spacer * 2.5 $wizard-icon-size-->$spacer * 2.5-->1rem * 2.5 2.5rem Wizard icon size.
$wizard-icon-font-size $spacer * 1.15 $wizard-icon-font-size-->$spacer * 1.15-->1rem * 1.15 1.15rem Wizard icon font size.
$wizard-icon-active-size $spacer * 3.6 $wizard-icon-active-size-->$spacer * 3.6-->1rem * 3.6 3.6rem Wizard icon active size.
$wizard-icon-active-font-size $spacer * 1.8 $wizard-icon-active-font-size-->$spacer * 1.8-->1rem * 1.8 1.8rem Wizard icon active font size.