button
variables
buttonPadding
$buttonPadding: .5rem 1rem;Description
Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
buttonIconOnlyWidth
$buttonIconOnlyWidth: 2.357rem;Description
Width of a button having an icon with no label
buttonIconOnlyPadding
$buttonIconOnlyPadding: .5rem 0;Description
Padding of a button having an icon with no label
buttonBg
$buttonBg: $primaryColor;Description
Background of a button
buttonTextColor
$buttonTextColor: $primaryTextColor;Description
Text color of a button
buttonBorder
$buttonBorder: 1px solid $primaryColor;Description
Border of a button
buttonHoverBg
$buttonHoverBg: $primaryDarkColor;Description
Background of a button in hover state
buttonTextHoverColor
$buttonTextHoverColor: $primaryTextColor;Description
Text color of a button in hover state
buttonHoverBorderColor
$buttonHoverBorderColor: $primaryDarkColor;Description
Border color of a button in hover state
buttonActiveBg
$buttonActiveBg: $primaryDarkerColor;Description
Background of a button in pressed state
buttonTextActiveColor
$buttonTextActiveColor: $primaryTextColor;Description
Color of a button in pressed state
buttonActiveBorderColor
$buttonActiveBorderColor: $primaryDarkerColor;Description
Border color of a button in pressed state
raisedButtonShadow
$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);Description
Shadow of a raised button
roundedButtonBorderRadius
$roundedButtonBorderRadius: 2rem;Description
Border radius of a rounded button
textButtonHoverBgOpacity
$textButtonHoverBgOpacity: .04;Description
Alpha level of a text button background in hover state
textButtonActiveBgOpacity
$textButtonActiveBgOpacity: .16;Description
Alpha level of a text button background in active state
outlinedButtonBorder
$outlinedButtonBorder: 1px solid;Description
Border style of a outlined button
plainButtonTextColor
$plainButtonTextColor: #6c757d;Description
Text color of a plain text button
plainButtonHoverBgColor
$plainButtonHoverBgColor: #e9ecef;Description
Background color of a plain text button in hover state
plainButtonActiveBgColor
$plainButtonActiveBgColor: #dee2e6;Description
Background color of a plain text button in active state
secondaryButtonBg
$secondaryButtonBg: #607D8B;Description
Background of a secondary button
secondaryButtonTextColor
$secondaryButtonTextColor: #ffffff;Description
Text color of a secondary button
secondaryButtonBorder
$secondaryButtonBorder: 1px solid #607D8B;Description
Border of a secondary button
secondaryButtonHoverBg
$secondaryButtonHoverBg: #546E7A;Description
Background of a secondary button in hover state
secondaryButtonTextHoverColor
$secondaryButtonTextHoverColor: #ffffff;Description
Text color of a secondary button in hover state
secondaryButtonHoverBorderColor
$secondaryButtonHoverBorderColor: #546E7A;Description
Border color of a secondary button in hover state
secondaryButtonActiveBg
$secondaryButtonActiveBg: #455A64;Description
Background of a secondary button in pressed state
secondaryButtonTextActiveColor
$secondaryButtonTextActiveColor: #ffffff;Description
Text color of a secondary button in pressed state
secondaryButtonActiveBorderColor
$secondaryButtonActiveBorderColor: #455A64;Description
Border color of a secondary button in pressed state
secondaryButtonFocusShadow
$secondaryButtonFocusShadow: 0 0 0 0.2rem #B0BEC5;Description
Box shadow of a secondary button in focused state
infoButtonBg
$infoButtonBg: #03A9F4;Description
Background of an info button
infoButtonTextColor
$infoButtonTextColor: #ffffff;Description
Text color of an info button
infoButtonBorder
$infoButtonBorder: 1px solid #03A9F4;Description
Border of an info button
infoButtonHoverBg
$infoButtonHoverBg: #039BE5;Description
Background of an info button in hover state
infoButtonTextHoverColor
$infoButtonTextHoverColor: #ffffff;Description
Text color of an info button in hover state
infoButtonHoverBorderColor
$infoButtonHoverBorderColor: #039BE5;Description
Border color of an info button in hover state
infoButtonActiveBg
$infoButtonActiveBg: #0288D1;Description
Background of an info button in pressed state
infoButtonTextActiveColor
$infoButtonTextActiveColor: #ffffff;Description
Text color of an info button in pressed state
infoButtonActiveBorderColor
$infoButtonActiveBorderColor: #0288D1;Description
Border color of an info button in pressed state
infoButtonFocusShadow
$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%);Description
Box shadow of an info button in focused state
successButtonBg
$successButtonBg: #4CAF50;Description
Background of a success button
successButtonTextColor
$successButtonTextColor: #ffffff;Description
Text color of a success button
successButtonBorder
$successButtonBorder: 1px solid #4CAF50;Description
Border of a success button
successButtonHoverBg
$successButtonHoverBg: #43A047;Description
Background of a success button in hover state
successButtonTextHoverColor
$successButtonTextHoverColor: #ffffff;Description
Text color of a success button in hover state
successButtonHoverBorderColor
$successButtonHoverBorderColor: #43A047;Description
Border color of a success button in hover state
successButtonActiveBg
$successButtonActiveBg: #388E3C;Description
Background of a success button in pressed state
successButtonTextActiveColor
$successButtonTextActiveColor: #ffffff;Description
Text Color of a success button in pressed state
successButtonActiveBorderColor
$successButtonActiveBorderColor: #388E3C;Description
Border color of a success button in pressed state
successButtonFocusShadow
$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%);Description
Box shadow of a success button in focused state
warningButtonBg
$warningButtonBg: #FFC107;Description
Background of a warning button
warningButtonTextColor
$warningButtonTextColor: $textColor;Description
Text color of a warning button
warningButtonBorder
$warningButtonBorder: 1px solid #FFC107;Description
Border of a warning button
warningButtonHoverBg
$warningButtonHoverBg: #FFB300;Description
Background of a warning button in hover state
warningButtonTextHoverColor
$warningButtonTextHoverColor: $textColor;Description
Text color of a warning button in hover state
warningButtonHoverBorderColor
$warningButtonHoverBorderColor: #FFB300;Description
Border color of a warning button in hover state
warningButtonActiveBg
$warningButtonActiveBg: #FFA000;Description
Background of a warning button in pressed state
warningButtonTextActiveColor
$warningButtonTextActiveColor: $textColor;Description
Text color of a warning button in pressed state
warningButtonActiveBorderColor
$warningButtonActiveBorderColor: #FFA000;Description
Border color of a warning button in pressed state
warningButtonFocusShadow
$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%);Description
Box shadow of a warning button in focused state
helpButtonBg
$helpButtonBg: #9C27B0;Description
Background of a help button
helpButtonTextColor
$helpButtonTextColor: #ffffff;Description
Text color of a help button
helpButtonBorder
$helpButtonBorder: 1px solid #9C27B0;Description
Border of a help button
helpButtonHoverBg
$helpButtonHoverBg: #8E24AA;Description
Background of a help help in hover state
helpButtonTextHoverColor
$helpButtonTextHoverColor: #ffffff;Description
Text color of a help button in hover state
helpButtonHoverBorderColor
$helpButtonHoverBorderColor: #8E24AA;Description
Border color of a help button in hover state
helpButtonActiveBg
$helpButtonActiveBg: #7B1FA2;Description
Background of a help button in pressed state
helpButtonTextActiveColor
$helpButtonTextActiveColor: #ffffff;Description
Text color of a help button in pressed state
helpButtonActiveBorderColor
$helpButtonActiveBorderColor: #7B1FA2;Description
Border color of a help button in pressed state
helpButtonFocusShadow
$helpButtonFocusShadow: 0 0 0 0.2rem #CE93D8;Description
Box shadow of a help button in focused state
dangerButtonBg
$dangerButtonBg: #f44336;Description
Background of a danger button
dangerButtonTextColor
$dangerButtonTextColor: #ffffff;Description
Text color of a danger button
dangerButtonBorder
$dangerButtonBorder: 1px solid #f44336;Description
Border of a danger button
dangerButtonHoverBg
$dangerButtonHoverBg: #e53935;Description
Background of a danger button in hover state
dangerButtonTextHoverColor
$dangerButtonTextHoverColor: #ffffff;Description
Text color of a danger button in hover state
dangerButtonHoverBorderColor
$dangerButtonHoverBorderColor: #e53935;Description
Border color of a danger button in hover state
dangerButtonActiveBg
$dangerButtonActiveBg: #d32f2f;Description
Background of a danger button in pressed state
dangerButtonTextActiveColor
$dangerButtonTextActiveColor: #ffffff;Description
Text color of a danger button in pressed state
dangerButtonActiveBorderColor
$dangerButtonActiveBorderColor: #d32f2f;Description
Border color of a danger button in pressed state
dangerButtonFocusShadow
$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%);Description
Box shadow of a danger button in focused state
linkButtonColor
$linkButtonColor: $primaryDarkerColor;Description
Text color of a link button
linkButtonHoverColor
$linkButtonHoverColor: $primaryDarkerColor;Description
Text color of a link button in hover state
linkButtonTextHoverDecoration
$linkButtonTextHoverDecoration: underline;Description
Text decoration of a link button in hover state
linkButtonFocusShadow
$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor;Description
Box shadow of a link button in focused state
toggleButtonBg
$toggleButtonBg: #ffffff;Description
Background of a toggle button
toggleButtonBorder
$toggleButtonBorder: 1px solid #ced4da;Description
Border of a toggle button
toggleButtonTextColor
$toggleButtonTextColor: $textColor;Description
Text color of a toggle button
toggleButtonIconColor
$toggleButtonIconColor: $textSecondaryColor;Description
Icon color of a toggle button
toggleButtonHoverBg
$toggleButtonHoverBg: #e9ecef;Description
Background of a toggle button in hover state
toggleButtonHoverBorderColor
$toggleButtonHoverBorderColor: #ced4da;Description
Border color of a toggle button in hover state
toggleButtonTextHoverColor
$toggleButtonTextHoverColor: $textColor;Description
Text color of a toggle button in hover state
toggleButtonIconHoverColor
$toggleButtonIconHoverColor: $textSecondaryColor;Description
Icon color of a toggle button in hover state
toggleButtonActiveBg
$toggleButtonActiveBg: $primaryColor;Description
Background of a toggle button in selected state
toggleButtonActiveBorderColor
$toggleButtonActiveBorderColor: $primaryColor;Description
Border color of a toggle button in selected state
toggleButtonTextActiveColor
$toggleButtonTextActiveColor: $primaryTextColor;Description
Text color of a toggle button in selected state
toggleButtonIconActiveColor
$toggleButtonIconActiveColor: $primaryTextColor;Description
Icon color of a toggle button in selected state
toggleButtonActiveHoverBg
$toggleButtonActiveHoverBg: $primaryDarkColor;Description
Hover background of a toggle button in selected state
toggleButtonActiveHoverBorderColor
$toggleButtonActiveHoverBorderColor: $primaryDarkColor;Description
Hover border color of a toggle button in selected state
toggleButtonTextActiveHoverColor
$toggleButtonTextActiveHoverColor: $primaryTextColor;Description
Hover text color of a toggle button in selected state
toggleButtonIconActiveHoverColor
$toggleButtonIconActiveHoverColor: $primaryTextColor;Description
Hover icon of a toggle button in selected state
speedDialButtonWidth
$speedDialButtonWidth: 4rem;Description
Width of the speed dial button
speedDialButtonHeight
$speedDialButtonHeight: 4rem;Description
Height of the speed dial button
speedDialButtonIconFontSize
$speedDialButtonIconFontSize: 1.3rem;Description
Icon size of the speed dial button
speedDialActionWidth
$speedDialActionWidth: 3rem;Description
Width of a speed dial item
speedDialActionHeight
$speedDialActionHeight: 3rem;Description
Height of a speed dial item
speedDialActionBg
$speedDialActionBg: #ffffff;Description
Background color of a speed dial item
speedDialActionHoverBg
$speedDialActionHoverBg: #F5F5F5;Description
Background color of a speed dial item in hover state
speedDialActionTextColor
$speedDialActionTextColor: #212121;Description
Text color of a speed dial item
speedDialActionTextHoverColor
$speedDialActionTextHoverColor: #212121;Description
Text color of a speed dial item in hover state
data
variables
paginatorBg
$paginatorBg: #ffffff;Description
Background of a paginator
paginatorTextColor
$paginatorTextColor: $textSecondaryColor;Description
Text color of a paginator
paginatorBorder
$paginatorBorder: solid #e9ecef;Description
Border of a paginator
paginatorBorderWidth
$paginatorBorderWidth: 0;Description
Border width of a paginator
paginatorPadding
$paginatorPadding: .5rem 1rem;Description
Padding of a paginator
paginatorElementWidth
$paginatorElementWidth: $buttonIconOnlyWidth;Description
Width of a paginator element
paginatorElementHeight
$paginatorElementHeight: $buttonIconOnlyWidth;Description
Height of a paginator element
paginatorElementBg
$paginatorElementBg: transparent;Description
Background of a paginator element
paginatorElementBorder
$paginatorElementBorder: 0 none;Description
Border of a paginator element
paginatorElementIconColor
$paginatorElementIconColor: $textSecondaryColor;Description
Icon color of a paginator element
paginatorElementHoverBg
$paginatorElementHoverBg: #e9ecef;Description
Background of a paginator element in hover state
paginatorElementHoverBorderColor
$paginatorElementHoverBorderColor: transparent;Description
Border color of a paginator element in hover state
paginatorElementIconHoverColor
$paginatorElementIconHoverColor: $textSecondaryColor;Description
Icon color of a paginator element in hover state
paginatorElementBorderRadius
$paginatorElementBorderRadius: $borderRadius;Description
Border radius of a paginator element
paginatorElementMargin
$paginatorElementMargin: .143rem;Description
Margin of a paginator element
paginatorElementPadding
$paginatorElementPadding: 0;Description
Padding of a paginator element
tableHeaderBorder
$tableHeaderBorder: 1px solid #e9ecef;Description
Border of a table header
tableHeaderBorderWidth
$tableHeaderBorderWidth: 0 0 1px 0;Description
Border width of a table header
tableHeaderBg
$tableHeaderBg: #f8f9fa;Description
Background of a table header
tableHeaderTextColor
$tableHeaderTextColor: $textColor;Description
Text color of a table header
tableHeaderFontWeight
$tableHeaderFontWeight: 600;Description
Font weight of a table header
tableHeaderPadding
$tableHeaderPadding: 1rem 1rem;Description
Padding of a table header, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
tableHeaderCellPadding
$tableHeaderCellPadding: 1rem 1rem;Description
Padding of a table header cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
tableHeaderCellBg
$tableHeaderCellBg: #f8f9fa;Description
Background of a table header cell
tableHeaderCellTextColor
$tableHeaderCellTextColor: $textColor;Description
Text color of a table header cell
tableHeaderCellFontWeight
$tableHeaderCellFontWeight: 600;Description
Font weight of a table header cell
tableHeaderCellBorder
$tableHeaderCellBorder: 1px solid #e9ecef;Description
Border of a table header cell
tableHeaderCellBorderWidth
$tableHeaderCellBorderWidth: 0 0 1px 0;Description
Border width of a table header cell
tableHeaderCellHoverBg
$tableHeaderCellHoverBg: #e9ecef;Description
Background of a table header cell in hover state
tableHeaderCellTextHoverColor
$tableHeaderCellTextHoverColor: $textColor;Description
Text color of a table header cell in hover state
tableHeaderCellIconColor
$tableHeaderCellIconColor: $textSecondaryColor;Description
Icon color of a table header cell
tableHeaderCellIconHoverColor
$tableHeaderCellIconHoverColor: $textSecondaryColor;Description
Icon color of a table header cell in hover state
tableHeaderCellHighlightBg
$tableHeaderCellHighlightBg: #f8f9fa;Description
Background of a table header cell in sorted state
tableHeaderCellHighlightTextColor
$tableHeaderCellHighlightTextColor: $primaryColor;Description
Text color of a table header cell in sorted state
tableHeaderCellHighlightHoverBg
$tableHeaderCellHighlightHoverBg: #e9ecef;Description
Hover background of a table header cell in sorted state
tableHeaderCellHighlightTextHoverColor
$tableHeaderCellHighlightTextHoverColor: $primaryColor;Description
Hover text color of a table header cell in sorted state
tableSortableColumnBadgeSize
$tableSortableColumnBadgeSize: 1.143rem;Description
Size of a multiple column sorting order indicator
tableBodyRowBg
$tableBodyRowBg: #ffffff;Description
Background of a table body row
tableBodyRowTextColor
$tableBodyRowTextColor: $textColor;Description
Text color of a table body row
tableBodyRowEvenBg
$tableBodyRowEvenBg: #ffffff;Description
Background of an even table body row
tableBodyRowHoverBg
$tableBodyRowHoverBg: #e9ecef;Description
Background of a table body row in hover state
tableBodyRowTextHoverColor
$tableBodyRowTextHoverColor: $textColor;Description
Text color of a table body row in hover state
tableBodyCellBorder
$tableBodyCellBorder: 1px solid rgba(0,0,0,0.08);Description
Border for a cell of a table toby row
tableBodyCellBorderWidth
$tableBodyCellBorderWidth: 0 0 1px 0;Description
Border width for a cell of a table toby row
tableBodyCellPadding
$tableBodyCellPadding: 1rem 1rem;Description
Padding for a cell of a table toby row, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
tableResizerHelperBg
$tableResizerHelperBg: $primaryColor;Description
Backgground of a table column resize indicator bar
tableCellContentAlignment
$tableCellContentAlignment: left;Description
Content alignment of a table cell
tableTopPaginatorBorderWidth
$tableTopPaginatorBorderWidth: 1px 0 1px 0;Description
Border width of a table paginator positioned at top
tableBottomPaginatorBorderWidth
$tableBottomPaginatorBorderWidth: 0 0 1px 0;Description
Border width of a table paginator positioned at bottom
tableScaleSM
$tableScaleSM: 0.5;Description
Scale factor of a small datatable
tableScaleLG
$tableScaleLG: 1.25;Description
Scale factor of a large datatable
dataViewContentPadding
$dataViewContentPadding: 0;Description
Padding for content section of a dataview
dataViewContentBorder
$dataViewContentBorder: 0 none;Description
Border for content section of a dataview
dataViewListItemBorder
$dataViewListItemBorder: solid #e9ecef;Description
Border for an item of a dataview in list orientation
dataViewListItemBorderWidth
$dataViewListItemBorderWidth: 0 0 1px 0;Description
Border width for an item of a dataview in list orientation
fullCalendarEventBg
$fullCalendarEventBg: $primaryDarkColor;Description
Background of a full calendar event
fullCalendarEventBorderColor
$fullCalendarEventBorderColor: $primaryDarkColor;Description
Border color of a full calendar event
fullCalendarEventBorder
$fullCalendarEventBorder: 1px solid $primaryDarkColor;Description
Border of a full calendar event
fullCalendarEventTextColor
$fullCalendarEventTextColor: $primaryTextColor;Description
Text color of a full calendar event
treeContainerPadding
$treeContainerPadding: 0.286rem;Description
Padding of a tree
treeNodePadding
$treeNodePadding: 0.143rem;Description
Padding of a tree node
treeNodeContentPadding
$treeNodeContentPadding: .5rem;Description
Padding of a tree node content consists of toggler, icon and label
treeNodeChildrenPadding
$treeNodeChildrenPadding: 0 0 0 1rem;Description
Padding of a tree node children container
treeNodeIconColor
$treeNodeIconColor: $textSecondaryColor;Description
Color of a treenode data icon, $dataActionIconColor for the toggler element
timelineVerticalEventContentPadding
$timelineVerticalEventContentPadding: 0 1rem;Description
Padding of a vertical timeline content element
timelineHorizontalEventContentPadding
$timelineHorizontalEventContentPadding: 1rem 0;Description
Padding of a horizontal timeline content element
timelineEventMarkerWidth
$timelineEventMarkerWidth: 1rem;Description
Width of a timeline marker
timelineEventMarkerHeight
$timelineEventMarkerHeight: 1rem;Description
Height of a timeline marker
timelineEventMarkerBorderRadius
$timelineEventMarkerBorderRadius: 50%;Description
Border radius of a timeline marker
timelineEventMarkerBorder
$timelineEventMarkerBorder: 2px solid $highlightBg;Description
Border of a timeline marker
timelineEventMarkerBackground
$timelineEventMarkerBackground: $highlightTextColor;Description
Background of a timeline marker
timelineEventConnectorSize
$timelineEventConnectorSize: 2px;Description
Size of a timeline connector
timelineEventColor
$timelineEventColor: #dee2e6;Description
Color of a timeline event
organizationChartConnectorColor
$organizationChartConnectorColor: #dee2e6;Description
Color of a line to connect to organization chart nodes
form
variables
inputPadding
$inputPadding: .5rem .5rem;Description
Padding of an input field, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
inputBg
$inputBg: #ffffff;Description
Background of an input field
inputTextFontSize
$inputTextFontSize: 1rem;Description
Font size of an input field
inputTextColor
$inputTextColor: $textColor;Description
Text color of an input field
inputIconColor
$inputIconColor: $textColor;Description
Color of an icon inside an input field
inputBorder
$inputBorder: 1px solid #ced4da;Description
Border of an input field
inputHoverBorderColor
$inputHoverBorderColor: $primaryColor;Description
Border of an input field in hover state
inputFocusBorderColor
$inputFocusBorderColor: $primaryColor;Description
Border of an input field in focus state
inputErrorBorderColor
$inputErrorBorderColor: #ced4da #ced4da #ced4da $errorColor;Description
Color of an input field in invalid state
inputPlaceholderTextColor
$inputPlaceholderTextColor: #6c757d;Description
Text color of a placeholder
inputFilledBg
$inputFilledBg: #f8f9fa;Description
Background of a filled input
inputFilledHoverBg
$inputFilledHoverBg: #f8f9fa;Description
Background of a filled input in hover state
inputFilledFocusBg
$inputFilledFocusBg: #f8f9fa;Description
Background of a filled input in focus state
inputGroupBg
$inputGroupBg: #e9ecef;Description
Backgroud color of an input group addon
inputGroupTextColor
$inputGroupTextColor: $textSecondaryColor;Description
Text color of an input group addon
inputGroupAddOnMinWidth
$inputGroupAddOnMinWidth: 2.357rem;Description
Minimum width of an input group addon
inputListBg
$inputListBg: #ffffff;Description
Background of an input list such as dropdown, listbox, multiselect
inputListTextColor
$inputListTextColor: $textColor;Description
Text color of an input list
inputListBorder
$inputListBorder: $inputBorder;Description
Border of an input list
inputListPadding
$inputListPadding: .5rem 0;Description
Padding of an input list
inputListItemPadding
$inputListItemPadding: .5rem 1rem;Description
Padding for an individual itrem of an input list
inputListItemBg
$inputListItemBg: transparent;Description
Background for an individual itrem of an input list
inputListItemTextColor
$inputListItemTextColor: $textColor;Description
Text color for an individual itrem of an input list
inputListItemHoverBg
$inputListItemHoverBg: #e9ecef;Description
Hover state background for an individual itrem of an input list
inputListItemTextHoverColor
$inputListItemTextHoverColor: $textColor;Description
Hover state text color for an individual itrem of an input list
inputListItemFocusBg
$inputListItemFocusBg: #f8f9fa;Description
Focus state background for an individual itrem of an input list
inputListItemTextFocusColor
$inputListItemTextFocusColor: $textColor;Description
Focus state text color for an individual itrem of an input list
inputListItemBorder
$inputListItemBorder: 0 none;Description
Border for an individual itrem of an input list
inputListItemBorderRadius
$inputListItemBorderRadius: 0;Description
Border radius for an individual itrem of an input list
inputListItemMargin
$inputListItemMargin: 0;Description
Margin for an individual itrem of an input list
inputListItemFocusShadow
$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;Description
Box shadow for an individual itrem of an input list in focused state
inputListHeaderPadding
$inputListHeaderPadding: .5rem 1rem;Description
Padding for a header of an input list
inputListHeaderMargin
$inputListHeaderMargin: 0;Description
Margin for a header of an input list
inputListHeaderBg
$inputListHeaderBg: #f8f9fa;Description
Background for a header of an input list
inputListHeaderTextColor
$inputListHeaderTextColor: $textColor;Description
Text color for a header of an input list
inputListHeaderBorder
$inputListHeaderBorder: 0 none;Description
Border for a header of an input list
inputOverlayBg
$inputOverlayBg: $inputListBg;Description
Background for an overlay of an input such as autocomplete or dropdown
inputOverlayHeaderBg
$inputOverlayHeaderBg: $inputListHeaderBg;Description
Background for an overlay header of an input such as autocomplete or dropdown
inputOverlayBorder
$inputOverlayBorder: 0 none;Description
Border for an overlay of an input such as autocomplete or dropdown
inputOverlayShadow
$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);Description
Shadow for an overlay of an input such as autocomplete or dropdown
checkboxWidth
$checkboxWidth: 20px;Description
Width of a checkbox
checkboxHeight
$checkboxHeight: 20px;Description
Height of a checkbox
checkboxBorder
$checkboxBorder: 2px solid #ced4da;Description
Border of a checkbox
checkboxIconFontSize
$checkboxIconFontSize: 14px;Description
Size of a checkbox icon
checkboxActiveBorderColor
$checkboxActiveBorderColor: $primaryColor;Description
Border color of a selected checkbox
checkboxActiveBg
$checkboxActiveBg: $primaryColor;Description
Background of a selected checkbox
checkboxIconActiveColor
$checkboxIconActiveColor: $primaryTextColor;Description
Icon color of a selected checkbox
checkboxActiveHoverBg
$checkboxActiveHoverBg: $primaryDarkerColor;Description
Background of a selected checkbox in hover state
checkboxIconActiveHoverColor
$checkboxIconActiveHoverColor: $primaryTextColor;Description
Icon color of a selected checkbox in hover state
checkboxActiveHoverBorderColor
$checkboxActiveHoverBorderColor: $primaryDarkerColor;Description
Border color of a selected checkbox in hover state
radiobuttonWidth
$radiobuttonWidth: 20px;Description
Width of a radiobutton
radiobuttonHeight
$radiobuttonHeight: 20px;Description
Height of a radiobutton
radiobuttonBorder
$radiobuttonBorder: 2px solid #ced4da;Description
Border of a radiobutton
radiobuttonIconSize
$radiobuttonIconSize: 12px;Description
Font size of a radiobutton icon
radiobuttonActiveBorderColor
$radiobuttonActiveBorderColor: $primaryColor;Description
Border color of a selected radiobutton
radiobuttonActiveBg
$radiobuttonActiveBg: $primaryColor;Description
Background of a selected radiobutton
radiobuttonIconActiveColor
$radiobuttonIconActiveColor: $primaryTextColor;Description
Icon color of a selected radiobutton
radiobuttonActiveHoverBg
$radiobuttonActiveHoverBg: $primaryDarkerColor;Description
Background of a selected radiobutton in hover state
radiobuttonIconActiveHoverColor
$radiobuttonIconActiveHoverColor: $primaryTextColor;Description
Icon color of a selected radiobutton in hover state
radiobuttonActiveHoverBorderColor
$radiobuttonActiveHoverBorderColor: $primaryDarkerColor;Description
Border color of a selected radiobutton in hover state
colorPickerPreviewWidth
$colorPickerPreviewWidth: 2rem;Description
Width of a color picker preview element
colorPickerPreviewHeight
$colorPickerPreviewHeight: 2rem;Description
Height of a color picker preview element
colorPickerBg
$colorPickerBg: #323232;Description
Background of a color picker
colorPickerBorder
$colorPickerBorder: 1px solid #191919;Description
Border color of a color picker
colorPickerHandleColor
$colorPickerHandleColor: #ffffff;Description
Handle color of a color picker
ratingIconFontSize
$ratingIconFontSize: 1.143rem;Description
Font size of a rating icon
ratingCancelIconColor
$ratingCancelIconColor: #e74c3c;Description
Icon color for the cancel icon of a rating
ratingCancelIconHoverColor
$ratingCancelIconHoverColor: #c0392b;Description
Hover icon color for the cancel icon of a rating
ratingStarIconOffColor
$ratingStarIconOffColor: $textColor;Description
Icon color for the star icon of a rating in unselected state
ratingStarIconOnColor
$ratingStarIconOnColor: $primaryColor;Description
Icon color for the star icon of a rating in selected state
ratingStarIconHoverColor
$ratingStarIconHoverColor: $primaryColor;Description
Icon color for the star icon of a rating in hover state
sliderBg
$sliderBg: #dee2e6;Description
Background of a slider
sliderBorder
$sliderBorder: 0 none;Description
Border of a slider
sliderHorizontalHeight
$sliderHorizontalHeight: .286rem;Description
Height of a horizontal slider
sliderVerticalWidth
$sliderVerticalWidth: 0.286rem;Description
Width of a vertical slider
sliderHandleWidth
$sliderHandleWidth: 1.143rem;Description
Width of a slider handle
sliderHandleHeight
$sliderHandleHeight: 1.143rem;Description
Height of a slider handle
sliderHandleBg
$sliderHandleBg: #ffffff;Description
Background of a slider handle
sliderHandleBorder
$sliderHandleBorder: 2px solid $primaryColor;Description
Border of a slider handle
sliderHandleBorderRadius
$sliderHandleBorderRadius: 50%;Description
Border radius of a slider handle
sliderHandleHoverBorderColor
$sliderHandleHoverBorderColor: $primaryColor;Description
Border of a slider handle in hover state
sliderHandleHoverBg
$sliderHandleHoverBg: $primaryColor;Description
Background of a slider handle in hover state
sliderRangeBg
$sliderRangeBg: $primaryColor;Description
Background color of a range slider
calendarTableMargin
$calendarTableMargin: .5rem 0;Description
Margin of a calendar table
calendarPadding
$calendarPadding: .5rem;Description
Margin of a calendar
calendarBg
$calendarBg: #ffffff;Description
Background of a calendar
calendarInlineBg
$calendarInlineBg: $calendarBg;Description
Background of an inlime calendar
calendarTextColor
$calendarTextColor: $textColor;Description
Text color of a calendar
calendarBorder
$calendarBorder: $inputListBorder;Description
Border of an inline calendar
calendarOverlayBorder
$calendarOverlayBorder: $inputOverlayBorder;Description
Border of an overlay calendar
calendarHeaderPadding
$calendarHeaderPadding: .5rem;Description
Padding of a calendar header
calendarHeaderBg
$calendarHeaderBg: #ffffff;Description
Background of a calendar header
calendarInlineHeaderBg
$calendarInlineHeaderBg: $calendarBg;Description
Background of an inline calendar header
calendarHeaderBorder
$calendarHeaderBorder: 1px solid #dee2e6;Description
Border of a calendar header
calendarHeaderTextColor
$calendarHeaderTextColor: $textColor;Description
Text color of a calendar header
calendarHeaderFontWeight
$calendarHeaderFontWeight: 600;Description
Font weight of a calendar header
calendarHeaderCellPadding
$calendarHeaderCellPadding: .5rem;Description
Padding of a calendar weekday cell
calendarMonthYearHeaderHoverTextColor
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;Description
Text color of current month and year text in hover state
calendarCellDatePadding
$calendarCellDatePadding: .5rem;Description
Padding of a calendar date cell
calendarCellDateWidth
$calendarCellDateWidth: 2.5rem;Description
Width of a calendar date cell
calendarCellDateHeight
$calendarCellDateHeight: 2.5rem;Description
Height of a calendar date cell
calendarCellDateBorderRadius
$calendarCellDateBorderRadius: 50%;Description
Border radius of a calendar date cell
calendarCellDateBorder
$calendarCellDateBorder: 1px solid transparent;Description
Border of a calendar date cell
calendarCellDateHoverBg
$calendarCellDateHoverBg: #e9ecef;Description
Background of a calendar date cell in hover state
calendarCellDateTodayBg
$calendarCellDateTodayBg: #ced4da;Description
Background of a calendar date cell indicating today
calendarCellDateTodayBorderColor
$calendarCellDateTodayBorderColor: transparent;Description
Border color of a calendar date cell indicating today
calendarCellDateTodayTextColor
$calendarCellDateTodayTextColor: $textColor;Description
Text color of a calendar date cell indicating today
calendarButtonBarPadding
$calendarButtonBarPadding: 1rem 0;Description
Padding of the calendar button bar
calendarTimePickerPadding
$calendarTimePickerPadding: .5rem;Description
Padding of a time picker container of a calendar
calendarTimePickerElementPadding
$calendarTimePickerElementPadding: 0 .429rem;Description
Padding of a time picker element of a calendar
calendarTimePickerTimeFontSize
$calendarTimePickerTimeFontSize: 1.286rem;Description
Font size of a time picker element of a calendar
calendarBreakpoint
$calendarBreakpoint: 769px;Description
Breakpoint of calendar to apply styles for small screens like phones
calendarCellDatePaddingSM
$calendarCellDatePaddingSM: 0;Description
Padding of a calendar date cell on small screens like phones
inputSwitchWidth
$inputSwitchWidth: 3rem;Description
Width of an inputswitch
inputSwitchHeight
$inputSwitchHeight: 1.75rem;Description
Height of an inputswitch
inputSwitchBorderRadius
$inputSwitchBorderRadius: 30px;Description
Border radius of an inputswitch
inputSwitchHandleWidth
$inputSwitchHandleWidth: 1.250rem;Description
Width of an inputswitch handle
inputSwitchHandleHeight
$inputSwitchHandleHeight: 1.250rem;Description
Height of an inputswitch handle
inputSwitchHandleBorderRadius
$inputSwitchHandleBorderRadius: 50%;Description
Border radius of an inputswitch handle
inputSwitchSliderPadding
$inputSwitchSliderPadding: .25rem;Description
Padding of an inputswitch slider
inputSwitchSliderOffBg
$inputSwitchSliderOffBg: #ced4da;Description
Background color of an inputswitch slider when unselected
inputSwitchHandleOffBg
$inputSwitchHandleOffBg: #ffffff;Description
Background color of an inputswitch handle when unselected
inputSwitchSliderOffHoverBg
$inputSwitchSliderOffHoverBg: #c3cad2;Description
Hover background color of an inputswitch slider when unselected
inputSwitchSliderOnBg
$inputSwitchSliderOnBg: $primaryColor;Description
Background color of an inputswitch slider when selected
inputSwitchSliderOnHoverBg
$inputSwitchSliderOnHoverBg: $primaryDarkColor;Description
Hover background color of an inputswitch slider when selected
inputSwitchHandleOnBg
$inputSwitchHandleOnBg: #ffffff;Description
Background color of an inputswitch handle when selected
fileUploadProgressBarHeight
$fileUploadProgressBarHeight: .25rem;Description
Height for the progress bar of a fileupload
fileUploadContentPadding
$fileUploadContentPadding: 2rem 1rem;Description
Padding of the fileupload content section
fileUploadFileBorder
$fileUploadFileBorder: 1px solid #c3cad2;;Description
Border of the fileupload content item section
fileUploadFilePadding
$fileUploadFilePadding: 1rem;Description
Padding of the fileupload content item section
editorToolbarBg
$editorToolbarBg: #f8f9fa;Description
Background of an editor toolbar
editorToolbarBorder
$editorToolbarBorder: 1px solid #dee2e6;Description
Border of an editor toolbar
editorToolbarPadding
$editorToolbarPadding: 1rem;Description
Padding of an editor toolbar
editorToolbarIconColor
$editorToolbarIconColor: #6c757d;Description
Icon color of an editor toolbar
editorToolbarIconHoverColor
$editorToolbarIconHoverColor: #495057;Description
Icon color of an editor toolbar in hover state
editorIconActiveColor
$editorIconActiveColor: $primaryColor;Description
Icon color of an editor toolbar in active state
editorContentBorder
$editorContentBorder: 1px solid #dee2e6;Description
Border of an editor content
editorContentBg
$editorContentBg: #ffffff;Description
Background of an editor content
passwordMeterBg
$passwordMeterBg: #dee2e6;Description
Background of a password meter
passwordWeakBg
$passwordWeakBg: #E53935;Description
Background of a week password
passwordMediumBg
$passwordMediumBg: #FFB300;Description
Background of a medium password
passwordStrongBg
$passwordStrongBg: #43A047;Description
Background of a strong password
general
variables
fontFamily
$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";Description
Font of the theme
fontSize
$fontSize: 1rem;Description
Size of the font
fontWeight
$fontWeight: normal;Description
Thickness of the texts
textColor
$textColor: #495057;Description
Primary text color
textSecondaryColor
$textSecondaryColor: #6c757d;Description
Secondary text color
highlightBg
$highlightBg: $primaryColor;Description
Background of a highlighted item
highlightTextColor
$highlightTextColor: $primaryTextColor;Description
Text color of a highlighted item
highlightFocusBg
$highlightFocusBg: rgba($primaryColor, .24) !default;Description
Background of a highlighted item in focus state
borderRadius
$borderRadius: 3px;Description
Radius of the corners
transitionDuration
$transitionDuration: .2s;Description
Duration of the property transitions
formElementTransition
$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;Description
Properties of a form element transition
actionIconTransition
$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration;Description
Properties of a action icon transition
listItemTransition
$listItemTransition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;Description
Properties of a list item transition
primeIconFontSize
$primeIconFontSize: 1rem;Description
Size of the Icons
divider
$divider: 1px solid #dee2e6;Description
Separator border
inlineSpacing
$inlineSpacing: .5rem;Description
Space between two inline items
disabledOpacity
$disabledOpacity: .8;Description
Opacity of the disabled elements
maskBg
$maskBg: rgba(0, 0, 0, 0.4);Description
Background of the modal layer
loadingIconFontSize
$loadingIconFontSize: 2rem;Description
Font size of the loading icons
errorColor
$errorColor: #e4677e;Description
Color to use on an invalid element e.g. invalid input
focusOutlineColor
$focusOutlineColor: #bfd1f6;Description
Outline color of a focused element
focusOutline
$focusOutline: 0 none;Description
Outline of a focused element
focusOutlineOffset
$focusOutlineOffset: 0;Description
Outline offset of a focused element
focusShadow
$focusShadow: 0 0 0 0.2rem $focusOutlineColor;Description
Box shadow of a focused element
actionIconWidth
$actionIconWidth: 2rem;Description
Width of an action icon
actionIconHeight
$actionIconHeight: 2rem;Description
Height of an action icon
actionIconBg
$actionIconBg: transparent;Description
Background of an action icon
actionIconBorder
$actionIconBorder: 0 none;Description
Border of an action icon
actionIconColor
$actionIconColor: $textSecondaryColor;Description
Color of an action icon
actionIconHoverBg
$actionIconHoverBg: #e9ecef;Description
Backgroun of an action icon in hover state
actionIconHoverBorderColor
$actionIconHoverBorderColor: transparent;Description
Border of an action icon in hover state
actionIconHoverColor
$actionIconHoverColor: $textColor;Description
Color of an action icon in hover state
actionIconBorderRadius
$actionIconBorderRadius: 50%;Description
Border radius of an action icon
scaleSM
$scaleSM: 0.875;Description
Scale factor of small component size
scaleLG
$scaleLG: 1.25;Description
Scale factor of small large size
media
variables
carouselIndicatorsPadding
$carouselIndicatorsPadding: 1rem;Description
Padding of a carousel indicators container
carouselIndicatorBg
$carouselIndicatorBg: #e9ecef;Description
Padding of a carousel indicator
carouselIndicatorHoverBg
$carouselIndicatorHoverBg: #dee2e6;Description
Padding of a carousel indicator in hover state
carouselIndicatorBorderRadius
$carouselIndicatorBorderRadius: 0;Description
Border radius of a carousel indicator
carouselIndicatorWidth
$carouselIndicatorWidth: 2rem;Description
Width of a carousel indicator
carouselIndicatorHeight
$carouselIndicatorHeight: .5rem;Description
Height of a carousel indicator
galleriaMaskBg
$galleriaMaskBg: rgba(0,0,0,0.9);Description
Background of a galleria modal
galleriaCloseIconMargin
$galleriaCloseIconMargin: .5rem;Description
Margin of a galleria close icon
galleriaCloseIconFontSize
$galleriaCloseIconFontSize: 2rem;Description
Font size of a galleria close icon
galleriaCloseIconBg
$galleriaCloseIconBg: transparent;Description
Background of a galleria close icon
galleriaCloseIconColor
$galleriaCloseIconColor: #ebedef;Description
Color of a galleria close icon
galleriaCloseIconHoverBg
$galleriaCloseIconHoverBg: rgba(255,255,255,0.1);Description
Background of a galleria close icon in hover state
galleriaCloseIconHoverColor
$galleriaCloseIconHoverColor: #ebedef;Description
Color of a galleria close icon in hover state
galleriaCloseIconWidth
$galleriaCloseIconWidth: 4rem;Description
Width of a galleria close icon
galleriaCloseIconHeight
$galleriaCloseIconHeight: 4rem;Description
Height of a galleria close icon
galleriaCloseIconBorderRadius
$galleriaCloseIconBorderRadius: 50%;Description
Border radius of a galleria close icon
galleriaCaptionBg
$galleriaCaptionBg: rgba(0,0,0,.5);Description
Background of a galleria caption
galleriaCaptionTextColor
$galleriaCaptionTextColor: #ebedef;Description
Color of a galleria caption
galleriaCaptionPadding
$galleriaCaptionPadding: 1rem;Description
Padding of a galleria caption
galleriaIndicatorsPadding
$galleriaIndicatorsPadding: 1rem;Description
Padding of a galleria indicators container
galleriaIndicatorBg
$galleriaIndicatorBg: #e9ecef;Description
Background of a galleria indicator
galleriaIndicatorHoverBg
$galleriaIndicatorHoverBg: #dee2e6;Description
Background of a galleria indicator in hover state
galleriaIndicatorBorderRadius
$galleriaIndicatorBorderRadius: 50%;Description
Border radius of a galleria indicator
galleriaIndicatorWidth
$galleriaIndicatorWidth: 1rem;Description
Width of a galleria indicator
galleriaIndicatorHeight
$galleriaIndicatorHeight: 1rem;Description
Height of a galleria indicator
galleriaIndicatorsBgOnItem
$galleriaIndicatorsBgOnItem: rgba(0,0,0,.5);Description
Background of a galleria indicator container when placed inside the viewport
galleriaIndicatorBgOnItem
$galleriaIndicatorBgOnItem: rgba(255,255,255,.4);Description
Background of a galleria indicator when placed inside the viewport
galleriaIndicatorHoverBgOnItem
$galleriaIndicatorHoverBgOnItem: rgba(255,255,255,.6);Description
Background of a galleria indicator in hover state when placed inside the viewport
galleriaThumbnailContainerBg
$galleriaThumbnailContainerBg: rgba(0,0,0,.9);Description
Background of a galleria thumbnail container
galleriaThumbnailContainerPadding
$galleriaThumbnailContainerPadding: 1rem .25rem;Description
Padding of a galleria thumbnail container
imageMaskBg
$imageMaskBg: rgba(0,0,0,0.9) !default;Description
Background of an image preview modal
imagePreviewToolbarPadding
$imagePreviewToolbarPadding: 1rem !default;Description
Padding of image preview toolbar
imagePreviewIndicatorColor
$imagePreviewIndicatorColor: #f8f9fa !default;Description
Text color of the image preview indicator
imagePreviewIndicatorBg
$imagePreviewIndicatorBg: rgba(0,0,0,0.5) !default;Description
Background of the image preview indicator
imagePreviewActionIconBg
$imagePreviewActionIconBg: transparent !default;Description
Background of an image action item
imagePreviewActionIconColor
$imagePreviewActionIconColor: #f8f9fa !default;Description
Text color of an image action item
imagePreviewActionIconHoverBg
$imagePreviewActionIconHoverBg: rgba(255,255,255,0.1) !default;Description
Background of an image action item in hover state
imagePreviewActionIconHoverColor
$imagePreviewActionIconHoverColor: #f8f9fa !default;Description
Tect color of an image action item in hover state
imagePreviewActionIconWidth
$imagePreviewActionIconWidth: 3rem !default;Description
Width of an image action item
imagePreviewActionIconHeight
$imagePreviewActionIconHeight: 3rem !default;Description
Height of an image action item
imagePreviewActionIconFontSize
$imagePreviewActionIconFontSize: 1.5rem !default;Description
Font size of an image action item icon
imagePreviewActionIconBorderRadius
$imagePreviewActionIconBorderRadius: 50% !default;Description
Border radius of an image action item
menu
message
variables
messageMargin
$messageMargin: 1rem 0;Description
Margin of a message
messagePadding
$messagePadding: 1rem 1.5rem;Description
Padding of a message
messageBorderWidth
$messageBorderWidth: 0 0 0 4px;Description
Border width of a message
messageIconFontSize
$messageIconFontSize: 1.5rem;Description
Font size of a message icon
messageTextFontSize
$messageTextFontSize: 1rem;Description
Font size of a message text
messageTextFontWeight
$messageTextFontWeight: 500;Description
Font weight of a message text
inlineMessagePadding
$inlineMessagePadding: $inputPadding;Description
Padding of an inline message
inlineMessageMargin
$inlineMessageMargin: 0;Description
Margin of an inline message
inlineMessageIconFontSize
$inlineMessageIconFontSize: 1rem;Description
Font size of an inline message icon
inlineMessageTextFontSize
$inlineMessageTextFontSize: 1rem;Description
Padding of an inline message text
inlineMessageBorderWidth
$inlineMessageBorderWidth: 1px;Description
Border width of an inline message text
toastIconFontSize
$toastIconFontSize: 2rem;Description
Font size of a toast message icon
toastMessageTextMargin
$toastMessageTextMargin: 0 0 0 1rem;Description
Margin of a toast message text
toastMargin
$toastMargin: 0 0 1rem 0;Description
Margin of a toast message
toastPadding
$toastPadding: 1rem;Description
Padding of a toast message
toastBorderWidth
$toastBorderWidth: 0 0 0 4px;Description
Border width of a toast message
toastShadow
$toastShadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3);Description
Box shadow of a toast message
toastOpacity
$toastOpacity: .9;Description
Opacity of a toast message
toastTitleFontWeight
$toastTitleFontWeight: 700;Description
Font weight of a toast message title text
toastDetailMargin
$toastDetailMargin: $inlineSpacing 0 0 0;Description
Margin of a toast message detail text
infoMessageBg
$infoMessageBg: #039BE5;Description
Background of an info message
infoMessageBorder
$infoMessageBorder: solid #027cb7;Description
Border of an info message
infoMessageTextColor
$infoMessageTextColor: #ffffff;Description
Text color of an info message
infoMessageIconColor
$infoMessageIconColor: #ffffff;Description
Icon color of an info message
successMessageBg
$successMessageBg: #43A047;Description
Background of a success message
successMessageBorder
$successMessageBorder: 0 none;Description
Border of a success message
successMessageTextColor
$successMessageTextColor: #ffffff;Description
Text color of a success message
successMessageIconColor
$successMessageIconColor: #ffffff;Description
Icon color of a success message
warningMessageBg
$warningMessageBg: #FFB300;Description
Background of a warning message
warningMessageBorder
$warningMessageBorder: 0 none;Description
Border of a warning message
warningMessageTextColor
$warningMessageTextColor: $textColor;Description
Text color of a warning message
warningMessageIconColor
$warningMessageIconColor: $textColor;Description
Icon color of a warning message
errorMessageBg
$errorMessageBg: #E53935;Description
Background of an error message
errorMessageBorder
$errorMessageBorder: 0 none;Description
Border of an error message
errorMessageTextColor
$errorMessageTextColor: #ffffff;Description
Text color of an error message
errorMessageIconColor
$errorMessageIconColor: #ffffff;Description
Icon color of an error message
misc
variables
inplacePadding
$inplacePadding: $inputPadding;Description
Padding of an inplace element
inplaceHoverBg
$inplaceHoverBg: #e9ecef;Description
Background of an inplace element in hover state
inplaceTextHoverColor
$inplaceTextHoverColor: $textColor;Description
Text color of an inplace element in hover state
badgeBg
$badgeBg: $primaryColor;Description
Background of a badge
badgeTextColor
$badgeTextColor: $primaryTextColor;Description
Text color of a badge
badgeMinWidth
$badgeMinWidth: 1.5rem;Description
Minimum width of a badge
badgeHeight
$badgeHeight: 1.5rem;Description
Height of a badge
badgeFontWeight
$badgeFontWeight: 700;Description
Font weight of a badge
badgeFontSize
$badgeFontSize: .75rem;Description
Font size of a badge
tagPadding
$tagPadding: .25rem .4rem;Description
Padding of a badge
progressBarHeight
$progressBarHeight: 1.5rem;Description
Height of a progress bar
progressBarBorder
$progressBarBorder: 0 none;Description
Border of a progress bar
progressBarBg
$progressBarBg: #dee2e6;Description
Background of a progress bar
progressBarValueBg
$progressBarValueBg: $primaryColor;Description
Background of a progress bar value
progressBarValueTextColor
$progressBarValueTextColor: $primaryTextColor;Description
Text color of a progress bar value
progressSpinnerStrokeColor
$progressSpinnerStrokeColor: $errorMessageTextColor !default;Description
Stroke color of a progress spinner
progressSpinnerColorOne
$progressSpinnerColorOne: $errorMessageTextColor !default;Description
First spinner color of a progress spinner
progressSpinnerColorTwo
$progressSpinnerColorTwo: $infoMessageTextColor !default;Description
Second spinner color of a progress spinner
progressSpinnerColorThree
$progressSpinnerColorThree: $successMessageTextColor !default;Description
Third spinner color of a progress spinner
progressSpinnerColorFour
$progressSpinnerColorFour: $warningMessageTextColor !default;Description
Fourth spinner color of a progress spinner
avatarBg
$avatarBg: #dee2e6;Description
Background of an avatar
avatarTextColor
$avatarTextColor: $textColor;Description
Text color of an avatar
chipBg
$chipBg: #dee2e6;Description
Background of a chip
chipTextColor
$chipTextColor: $textColor;Description
Text color of a chip
chipBorderRadius
$chipBorderRadius: 16px;Description
Border radius of a chip
chipFocusBg
$chipFocusBg: #dee2e6 !default;Description
Background of a chip in focus state
chipFocusTextColor
$chipFocusTextColor: $textColor !default;Description
Color of a chip in focus state
scrollTopBg
$scrollTopBg: rgba(0,0,0,0.7);Description
Background of a scrollTop
scrollTopHoverBg
$scrollTopHoverBg: rgba(0,0,0,0.8);Description
Background of a scrollTop in hover state
scrollTopWidth
$scrollTopWidth: 3rem;Description
Width of a scrollTop
scrollTopHeight
$scrollTopHeight: 3rem;Description
Height of a scrollTop
scrollTopBorderRadius
$scrollTopBorderRadius: 50%;Description
Border radius of a scrollTop
scrollTopFontSize
$scrollTopFontSize: 1.5rem;Description
Font size of a scrollTop
scrollTopTextColor
$scrollTopTextColor: #f8f9fa;Description
Text color of a scrollTop
skeletonBg
$skeletonBg: #e9ecef;Description
Background of a skeleton
skeletonAnimationBg
$skeletonAnimationBg: rgba(255,255,255,0.4);Description
Background of a skeleton animation
overlay
variables
overlayContentBorder
$overlayContentBorder: 0 none;Description
Border of an overlay container element such as dialog or overlaypanel
overlayContentBg
$overlayContentBg: $panelContentBg;Description
Background of an overlay container element such as dialog or overlaypanel
overlayContainerShadow
$overlayContainerShadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);Description
Box shadow of an overlay container element such as dialog or overlaypanel
dialogHeaderBg
$dialogHeaderBg: #ffffff;Description
Background of a dialog header
dialogHeaderBorder
$dialogHeaderBorder: 1px solid #dee2e6;Description
Border of a dialog header
dialogHeaderTextColor
$dialogHeaderTextColor: $panelHeaderTextColor;Description
Text color of a dialog header
dialogHeaderFontWeight
$dialogHeaderFontWeight: 600;Description
Font weight of a dialog header
dialogHeaderFontSize
$dialogHeaderFontSize: 1.25rem;Description
Font size of a dialog header
dialogHeaderPadding
$dialogHeaderPadding: 1.5rem;Description
Padding of a dialog header
dialogContentPadding
$dialogContentPadding: 0 1.5rem;Description
Padding of a dialog content
confirmPopupContentPadding
$confirmPopupContentPadding: $panelContentPadding;Description
Padding of a confirmpopup content
tooltipBg
$tooltipBg: $textColor;Description
Background of a tooltip
tooltipTextColor
$tooltipTextColor: #ffffff;Description
Text color of a tooltip
tooltipPadding
$tooltipPadding: $inputPadding;Description
Padding of a tooltip
panel
variables
panelHeaderBorderColor
$panelHeaderBorderColor: #dee2e6;Description
Border color of a panel header
panelHeaderBorder
$panelHeaderBorder: 1px solid #dee2e6;Description
Border of a panel header
panelHeaderBg
$panelHeaderBg: #f8f9fa;Description
Background of a panel header
panelHeaderTextColor
$panelHeaderTextColor: $textColor;Description
Text color of a panel header
panelHeaderFontWeight
$panelHeaderFontWeight: 600;Description
Font weight of a panel header
panelHeaderPadding
$panelHeaderPadding: 1rem;Description
Padding of a panel header
panelToggleableHeaderPadding
$panelToggleableHeaderPadding: .5rem 1rem;Description
Font weight of a toggleable panel header
panelHeaderHoverBg
$panelHeaderHoverBg: #e9ecef;Description
Background of a panel header in hover state e.g. toggleable state
panelHeaderHoverBorderColor
$panelHeaderHoverBorderColor: #dee2e6;Description
Border color of a panel header in hover state e.g. toggleable state
panelHeaderTextHoverColor
$panelHeaderTextHoverColor: #495057;Description
Text color of a panel header in hover state e.g. toggleable state
panelContentBorderColor
$panelContentBorderColor: #dee2e6;Description
Border color for the content section of a panel
panelContentBorder
$panelContentBorder: 1px solid #dee2e6;Description
Border for the content section of a panel
panelContentBg
$panelContentBg: #ffffff;Description
Background for the content section of a panel
panelContentEvenRowBg
$panelContentEvenRowBg: #e9ecef;Description
Background for the striped row.
panelContentTextColor
$panelContentTextColor: $textColor;Description
Text color for the content section of a panel
panelContentPadding
$panelContentPadding: 1rem;Description
Padding for the content section of a panel
accordionSpacing
$accordionSpacing: 0;Description
Spacing between to accordion panels
accordionHeaderBorder
$accordionHeaderBorder: $panelHeaderBorder;Description
Border of an accordion panel header
accordionHeaderBg
$accordionHeaderBg: $panelHeaderBg;Description
Background of an accordion panel header
accordionHeaderTextColor
$accordionHeaderTextColor: $panelHeaderTextColor;Description
Text color of an accordion panel header
accordionHeaderFontWeight
$accordionHeaderFontWeight: $panelHeaderFontWeight;Description
Font weight of an accordion panel header
accordionHeaderPadding
$accordionHeaderPadding: $panelHeaderPadding;Description
Padding of an accordion panel header
accordionHeaderHoverBg
$accordionHeaderHoverBg: #e9ecef;Description
Background of an accordion panel header in hover state
accordionHeaderHoverBorderColor
$accordionHeaderHoverBorderColor: $panelHeaderBorder;Description
Border of an accordion panel header in hover state
accordionHeaderTextHoverColor
$accordionHeaderTextHoverColor: $textColor;Description
Text color of an accordion panel header in hover state
accordionHeaderActiveBg
$accordionHeaderActiveBg: $panelHeaderBg;Description
Background of an accordion panel header in expanded state
accordionHeaderActiveBorderColor
$accordionHeaderActiveBorderColor: #dee2e6;Description
Border of an accordion panel header in expanded state
accordionHeaderTextActiveColor
$accordionHeaderTextActiveColor: $textColor;Description
Text color of an accordion panel header in expanded state
accordionHeaderActiveHoverBg
$accordionHeaderActiveHoverBg: #e9ecef;Description
Hover background of an accordion panel header in expanded state
accordionHeaderActiveHoverBorderColor
$accordionHeaderActiveHoverBorderColor: #dee2e6;Description
Hover border of an accordion panel header in expanded state
accordionHeaderTextActiveHoverColor
$accordionHeaderTextActiveHoverColor: $textColor;Description
Text color of an accordion panel header in expanded state
accordionContentBorder
$accordionContentBorder: $panelContentBorder;Description
Border for a content section of an accordion panel
accordionContentBg
$accordionContentBg: $panelContentBg;Description
Background for a content section of an accordion panel
accordionContentTextColor
$accordionContentTextColor: $panelContentTextColor;Description
Text color for a content section of an accordion panel
accordionContentPadding
$accordionContentPadding: $panelContentPadding;Description
Padding for a content section of an accordion panel
tabviewHeaderSpacing
$tabviewHeaderSpacing: 0;Description
Spacing between tabview headers
tabviewHeaderBorder
$tabviewHeaderBorder: solid #dee2e6;Description
Border of a tabview header
tabviewHeaderBorderWidth
$tabviewHeaderBorderWidth: 0 0 2px 0;Description
Border width of a tabview header
tabviewHeaderBorderColor
$tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent;Description
Border color of a tabview header
tabviewHeaderBg
$tabviewHeaderBg: #ffffff;Description
Background of a tabview header
tabviewHeaderTextColor
$tabviewHeaderTextColor: $textSecondaryColor;Description
Text color of a tabview header
tabviewHeaderFontWeight
$tabviewHeaderFontWeight: $panelHeaderFontWeight;Description
Font weight of a tabview header
tabviewHeaderPadding
$tabviewHeaderPadding: $panelHeaderPadding;Description
Padding of a tabview header
tabviewHeaderMargin
$tabviewHeaderMargin: 0 0 -2px 0;Description
Margin of a tabview header
tabviewHeaderHoverBg
$tabviewHeaderHoverBg: #ffffff;Description
Background of a tabview header in hover state
tabviewHeaderHoverBorderColor
$tabviewHeaderHoverBorderColor: #9ba2aa;Description
Border of a tabview header in hover state
tabviewHeaderTextHoverColor
$tabviewHeaderTextHoverColor: $textSecondaryColor;Description
Text color of a tabview header in hover state
tabviewHeaderActiveBg
$tabviewHeaderActiveBg: #ffffff;Description
Background of a tabview header in selected state
tabviewHeaderActiveBorderColor
$tabviewHeaderActiveBorderColor: $primaryColor;Description
Border of a tabview header in selected state
tabviewHeaderTextActiveColor
$tabviewHeaderTextActiveColor: $primaryColor;Description
Text color of a tabview header in selected state
tabviewContentBorder
$tabviewContentBorder: 0 none;Description
Border for content section of a tabview tab
tabviewContentBg
$tabviewContentBg: $panelContentBg;Description
Background for content section of a tabview tab
tabviewContentTextColor
$tabviewContentTextColor: $panelContentTextColor;Description
Text color for a content section of a tabview tab
tabviewContentPadding
$tabviewContentPadding: $panelContentPadding;Description
Padding for a content section of a tabview tab
panelHeaderHoverBg
$panelHeaderHoverBg: #e9ecef;Description
Background of a fieldset header in hover state
panelHeaderHoverBorderColor
$panelHeaderHoverBorderColor: #dee2e6;Description
Border of a fieldset header in hover state
panelHeaderTextHoverColor
$panelHeaderTextHoverColor: $textColor;Description
Text color of a fieldset header in hover state
scrollPanelTrackBorder
$scrollPanelTrackBorder: 0 none;Description
Border for a track bar of a scroll panel
scrollPanelTrackBg
$scrollPanelTrackBg: #f8f9fa;Description
Background for a track bar of a scroll panel
cardBodyPadding
$cardBodyPadding: 1rem;Description
Padding of a card body
cardTitleFontSize
$cardTitleFontSize: 1.5rem;Description
Font size of a card title
cardTitleFontWeight
$cardTitleFontWeight: 700;Description
Font weight of a card title
cardSubTitleFontWeight
$cardSubTitleFontWeight: 700;Description
Font size of a card subtitle
cardSubTitleColor
$cardSubTitleColor: $textSecondaryColor;Description
Text color of a card subtitle
cardContentPadding
$cardContentPadding: 1rem 0;Description
Padding of a card content
cardShadow
$cardShadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12);Description
Box shadow of a card
dividerHorizontalMargin
$dividerHorizontalMargin: 1rem 0;Description
Margin of divider in horizontal layout
dividerHorizontalPadding
$dividerHorizontalPadding: 0 1rem;Description
Padding of divider in horizontal layout
dividerVerticalMargin
$dividerVerticalMargin: 0 1rem;Description
Margin of divider in vertical layout
dividerVerticalPadding
$dividerVerticalPadding: 1rem 0;Description
Padding of divider in vertical layout
dividerSize
$dividerSize: 1px;Description
Border width of the divider
dividerColor
$dividerColor: #dee2e6;Description
Color of the divider border
splitterGutterBg
$splitterGutterBg: #f8f9fa;Description
Background of the splitter gutter
splitterGutterHandleBg
$splitterGutterHandleBg: #dee2e6;Description
Background of the splitter gutter handle