button
variables
buttonTextOnlyPadding
$buttonTextOnlyPadding: .5rem 1rem;Description
Padding of a button with only text
buttonWithLeftIconPadding
$buttonWithLeftIconPadding: .5rem 1rem .5rem 2rem;Description
Padding of a button having an icon on left side of the text
buttonWithRightIconPadding
$buttonWithRightIconPadding: .5rem 2rem .5rem 1rem;Description
Padding of a button having an icon on right side of the text
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
buttonBorder
$buttonBorder: 1px solid $primaryColor;Description
Border of a button
buttonTextColor
$buttonTextColor: $primaryTextColor;Description
Text color of a button
buttonHoverBg
$buttonHoverBg: $primaryDarkColor;Description
Background of a button in hover state
buttonHoverBorderColor
$buttonHoverBorderColor: $primaryDarkColor;Description
Border color of a button in hover state
buttonTextHoverColor
$buttonTextHoverColor: $primaryTextColor;Description
Text color of a button in hover state
buttonActiveBg
$buttonActiveBg: $primaryDarkerColor;Description
Background of a button in pressed state
buttonActiveBorderColor
$buttonActiveBorderColor: $primaryDarkerColor;Description
Border color of a button in pressed state
buttonTextActiveColor
$buttonTextActiveColor: $primaryTextColor;Description
Color of a button in pressed state
buttonFocusOutline
$buttonFocusOutline: 0 none;Description
Outline of a button in focused state
buttonFocusOutlineOffset
$buttonFocusOutlineOffset: 0;Description
Outline offset of a button in focused state
buttonFocusShadow
$buttonFocusShadow: 0 0 0 0.2rem $focusOutlineColor;Description
Box shadow of a button in focused 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
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
toggleButtonHoverIconColor
$toggleButtonHoverIconColor: $textColor;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
toggleButtonActiveIconColor
$toggleButtonActiveIconColor: $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
toggleButtonActiveTextHoverColor
$toggleButtonActiveTextHoverColor: $primaryTextColor;Description
Hover text color of a toggle button in selected state
toggleButtonActiveHoverIconColor
$toggleButtonActiveHoverIconColor: $primaryTextColor;Description
Hover icon of a toggle button in selected state
speedDialButtonWidth
$speedDialButtonWidth: 4rem;Description
Width of a floating action button on speed dial
speedDialButtonHeight
$speedDialButtonHeight: 4rem;Description
Height of a floating action button on speed dial
speedDialButtonIconFontSize
$speedDialButtonIconFontSize: 1.3rem;Description
Font Size of a floating action button on speed dial
speedDialActionWidth
$speedDialActionWidth: 3rem;Description
Width of any action button on speed dial
speedDialActionHeight
$speedDialActionHeight: 3rem;Description
Height of any action button on speed dial
speedDialActionBg
$speedDialActionBg: #495057;Description
Background color of any action button on speed dial
speedDialActionHoverBg
$speedDialActionHoverBg: #343a40;Description
Background color of any action button on speed dial in hover state
speedDialActionTextColor
$speedDialActionTextColor: #fff;Description
Color of any action button on speed dial
speedDialActionTextHoverColor
$speedDialActionTextHoverColor: #fff;Description
Color of any action button on speed dial in hover state
data
variables
paginatorBg
$paginatorBg: #ffffff;Description
Background of a paginator
paginatorBorder
$paginatorBorder: solid #e9ecef;Description
Border of a paginator
paginatorBorderWidth
$paginatorBorderWidth: 0;Description
Border width of a paginator
paginatorIconColor
$paginatorIconColor: $textSecondaryColor;Description
Icon color 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
paginatorElementHoverBg
$paginatorElementHoverBg: #e9ecef;Description
Background of a paginator element in hover state
paginatorElementHoverIconColor
$paginatorElementHoverIconColor: $textSecondaryColor;Description
Icon color of a paginator element in hover state
paginatorElementMargin
$paginatorElementMargin: .143rem;Description
Margin of a paginator element
paginatorElementBorder
$paginatorElementBorder: 0 none;Description
Border of a paginator element
paginatorElementHoverBorderColor
$paginatorElementHoverBorderColor: transparent;Description
Border color of a paginator element in hover state
paginatorElementBorderRadius
$paginatorElementBorderRadius: $borderRadius;Description
Border radius of a paginator element
datatableHeaderBorder
$datatableHeaderBorder: 1px solid #e9ecef;Description
Border of a datatable header
datatableHeaderBorderWidth
$datatableHeaderBorderWidth: 0 0 1px 0;Description
Border width of a datatable header
datatableHeaderBg
$datatableHeaderBg: #f8f9fa;Description
Background of a datatable header
datatableHeaderTextColor
$datatableHeaderTextColor: $textColor;Description
Text color of a datatable header
datatableHeaderFontWeight
$datatableHeaderFontWeight: 600;Description
Font weight of a datatable header
datatableHeaderPadding
$datatableHeaderPadding: 1rem 1rem;Description
Padding of a datatable header, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
datatableHeaderBorderWidth
$datatableHeaderBorderWidth: 0 0 1px 0;Description
Border width of a datatable header cell
datatableHeaderCellPadding
$datatableHeaderCellPadding: 1rem 1rem;Description
Padding of a datatable header cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
datatableHeaderCellBg
$datatableHeaderCellBg: #f8f9fa;Description
Background of a datatable header cell
datatableHeaderCellTextColor
$datatableHeaderCellTextColor: $textColor;Description
Text color of a datatable header cell
datatableHeaderCellFontWeight
$datatableHeaderCellFontWeight: 600;Description
Font weight of a datatable header cell
datatableHeaderCellBorder
$datatableHeaderCellBorder: 1px solid #e9ecef;Description
Border of a datatable header cell
datatableHeaderCellBorderWidth
$datatableHeaderCellBorderWidth: 0 0 1px 0;Description
Border width of a datatable header cell
datatableHeaderCellHoverBg
$datatableHeaderCellHoverBg: #e9ecef;Description
Background of a datatable header cell in hover state
datatableHeaderCellTextHoverColor
$datatableHeaderCellTextHoverColor: $textColor;Description
Text color of a datatable header cell in hover state
datatableHeaderCellHighlightBg
$datatableHeaderCellHighlightBg: #f8f9fa;Description
Background of a datatable header cell in sorted state
datatableHeaderCellHighlightTextColor
$datatableHeaderCellHighlightTextColor: $primaryColor;Description
Text color of a datatable header cell in sorted state
datatableHeaderCellHighlightHoverBg
$datatableHeaderCellHighlightHoverBg: #e9ecef;Description
Hover background of a datatable header cell in sorted state
datatableHeaderCellHighlightTextHoverColor
$datatableHeaderCellHighlightTextHoverColor: $primaryColor;Description
Hover text color of a datatable header cell in sorted state
datatableSortableColumnBadgeSize
$datatableSortableColumnBadgeSize: 1.143rem;Description
Size of a multiple column sorting order indicator
datatableBodyRowBg
$datatableBodyRowBg: #ffffff;Description
Background of a datatable body row
datatableBodyRowTextColor
$datatableBodyRowTextColor: $textColor;Description
Text color of a datatable body row
datatableBodyRowBorder
$datatableBodyRowBorder: 1px solid rgba(0, 0, 0, 0.08);Description
Border for a cell of a datatable body row
datatableBodyRowOddBg
$datatableBodyRowOddBg: #ffffff;Description
Background of an odd datatable body row
datatableBodyRowHoverBg
$datatableBodyRowHoverBg: #e9ecef;Description
Background of a datatable body row in hover state
datatableBodyRowTextHoverColor
$datatableBodyRowTextHoverColor: $textColor;Description
Text color of a datatable body row in hover state
datatableBodyCellPadding
$datatableBodyCellPadding: 1rem 1rem;Description
Padding for a cell of a datatable body row, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
datatableBodyCellBorderWidth
$datatableBodyCellBorderWidth: 0 0 1px 0;Description
Border width for a cell of a datatable body
datatableResizerHelperBg
$datatableResizerHelperBg: $primaryColor;Description
Backgground of a datatable column resize indicator bar
datatableTopPaginatorBorderWidth
$datatableTopPaginatorBorderWidth: 1px 0 1px 0;Description
Border width of a datatable paginator positioned at top
datatableBottomPaginatorBorderWidth
$datatableBottomPaginatorBorderWidth: 0 0 1px 0;Description
Border width of a datatable paginator positioned at bottom
datatableScaleSm
$datatableScaleSm: 0.5;Description
Scale factor of a small datatable
datatableScaleLg
$datatableScaleLg: 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
orderListDropPlaceholderBg
$orderListDropPlaceholderBg: scale-color($highlightBg, $lightness: -20%);Description
Background used to determine the drop area of ​​a item on orderList
pickListDropPlaceholderBg
$pickListDropPlaceholderBg: scale-color($highlightBg, $lightness: -20%);Description
Background used to determine the drop area of ​​a item on pickList
scheduleCellBorderColor
$scheduleCellBorderColor: #dee2e6;Description
Border color of a schedule cell
scheduleTodayBg
$scheduleTodayBg: $highlightBg;Description
Background of the schedule cell indicating today
scheduleEventBg
$scheduleEventBg: $primaryDarkColor;Description
Background of a schedule event
scheduleEventBorder
$scheduleEventBorder: 1px solid $primaryDarkColor;Description
Border of a schedule event
scheduleEventTextColor
$scheduleEventTextColor: $primaryTextColor;Description
Text color of a schedule event
treeNodePadding
$treeNodePadding: .143rem;Description
Padding of a tree node
treeNodeLabelPadding
$treeNodeLabelPadding: .286rem;Description
Padding of a tree node label
chronolineVerticalEventContentPadding
$chronolineVerticalEventContentPadding: 0 1rem;Description
Padding of a vertical chronoline content element
chronolineHorizontalEventContentPadding
$chronolineHorizontalEventContentPadding: 1rem 0;Description
Padding of a horizontal chronoline content element
chronolineEventMarkerWidth
$chronolineEventMarkerWidth: 1rem;Description
Width of a chronoline marker
chronolineEventMarkerHeight
$chronolineEventMarkerHeight: 1rem;Description
Height of a chronoline marker
chronolineEventMarkerBorderRadius
$chronolineEventMarkerBorderRadius: 50%;Description
Border radius of a chronoline marker
chronolineEventMarkerBorder
$chronolineEventMarkerBorder: 2px solid $highlightBg;Description
Border of a chronoline marker
chronolineEventMarkerBackground
$chronolineEventMarkerBackground: $highlightTextColor;Description
Background of a chronoline marker
chronolineEventConnectorSize
$chronolineEventConnectorSize: 2px;Description
Size of a chronoline connector
chronolineEventColor
$chronolineEventColor: #dee2e6;Description
Color of a chronoline event
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
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
inputFocusShadow
$inputFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;Description
Focus shadow of a input
inputGroupBorderColor
$inputGroupBorderColor: #dee2e6;Description
Border color of an input group addon
inputGroupBg
$inputGroupBg: #e9ecef;Description
Backgroud color of an input group addon
inputGroupTextColor
$inputGroupTextColor: $textSecondaryColor;Description
Text color of an input group addon
inputGroupIconColor
$inputGroupIconColor: $textColor;Description
Icon color of an input group addon
inputGroupAddonMinWidth
$inputGroupAddonMinWidth: 2.357rem;Description
Minimum width of the input group addon
inputListMinWidth
$inputListMinWidth: 12rem;Description
Minimum width of the input list
inputListBg
$inputListBg: #ffffff;Description
Background of an input list such as selectonemenu, selectonelistbox, multiselectlistbox
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 item of an input list
inputListItemBg
$inputListItemBg: transparent;Description
Background for an individual item of an input list
inputListItemTextColor
$inputListItemTextColor: $textColor;Description
Text color for an individual item of an input list
inputListItemHoverBg
$inputListItemHoverBg: #e9ecef;Description
Hover state background for an individual item of an input list
inputListItemTextHoverColor
$inputListItemTextHoverColor: $textColor;Description
Hover state text color for an individual item of an input list
inputListItemHighlightBg
$inputListItemHighlightBg: $highlightBg;Description
Background color for an individual item of an input list in highlight state
inputListItemHighlightTextColor
$inputListItemHighlightTextColor: $highlightTextColor;Description
Text color for an individual item of an input list in highlight state
inputListItemBorder
$inputListItemBorder: 0 none;Description
Border for an individual item of an input list
inputListItemBorderRadius
$inputListItemBorderRadius: 0;Description
Border radius for an individual item of an input list
inputListItemMargin
$inputListItemMargin: 0;Description
Margin for an individual item 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
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
inputContentPanelPadding
$inputContentPanelPadding: 1rem;Description
Padding for a content of an input panel
inputContentPanelBg
$inputContentPanelBg: #ffffff;Description
Background for a content of an input panel
inputContentPanelTextColor
$inputContentPanelTextColor: $textSecondaryColor;Description
Text color of the content of an input panel
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
inputButtonWidth
$inputButtonWidth: 2.357rem;Description
Width of the button in input
checkboxWidth
$checkboxWidth: 20px;Description
Width of a checkbox
checkboxHeight
$checkboxHeight: 20px;Description
Height of a checkbox
checkboxBorderWidth
$checkboxBorderWidth: 2px;Description
Border width of a checkbox
checkboxActiveBorderColor
$checkboxActiveBorderColor: $primaryColor;Description
Border color of a selected checkbox
checkboxActiveBg
$checkboxActiveBg: $primaryColor;Description
Background of a selected checkbox
checkboxActiveHoverBg
$checkboxActiveHoverBg: $primaryDarkerColor;Description
Background of a selected checkbox in hover state
checkboxTextActiveColor
$checkboxTextActiveColor: $primaryTextColor;Description
Text color of a selected checkbox in hover state
checkboxFocusShadow
$checkboxFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;Description
Box shadow for a checkbox in focused state
radiobuttonWidth
$radiobuttonWidth: 20px;Description
Width of a radiobutton
radiobuttonHeight
$radiobuttonHeight: 20px;Description
Height of a radiobutton
radiobuttonBorderWidth
$radiobuttonBorderWidth: 2px;Description
Border width 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
radiobuttonActiveHoverBg
$radiobuttonActiveHoverBg: $primaryDarkerColor;Description
Background of a selected radiobutton in hover state
radiobuttonTextActiveColor
$radiobuttonTextActiveColor: $primaryTextColor;Description
Text color of a selected radiobutton
radiobuttonFocusShadow
$radiobuttonFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;Description
Box shadow for a radiobutton in focused state
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
ratingCancelIconColor
$ratingCancelIconColor: #e74c3c;Description
Icon color for the cancel icon of a rating
ratingCancelHoverIconColor
$ratingCancelHoverIconColor: #c0392b;Description
Hover icon color for the cancel icon of a rating
ratingIconWidth
$ratingIconWidth: 1.25rem;Description
Width of the rating
ratingIconHeight
$ratingIconHeight: 1.25rem;Description
Height of the rating
ratingIconFontSize
$ratingIconFontSize: 1.143rem;Description
Font size of a rating icon
ratingStarIconColor
$ratingStarIconColor: $textColor;Description
Icon color for the star icon of a rating in unselected state
ratingStarIconHoverColor
$ratingStarIconHoverColor: $primaryColor;Description
Icon color for the star icon of a rating in hover state
ratingStarActiveIconColor
$ratingStarActiveIconColor: $primaryColor;Description
Icon color for the star icon of a rating in selected state
sliderBg
$sliderBg: #dee2e6;Description
Background of a slider
sliderHeight
$sliderHeight: .286rem;Description
Height of the slider
sliderWidth
$sliderWidth: .286rem;Description
Width of the 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
calendarPadding
$calendarPadding: .5rem;Description
Padding of a calendar
calendarTitlePadding
$calendarTitlePadding: .5rem;Description
Padding of a calendar title
calendarTitleBg
$calendarTitleBg: #ffffff;Description
Background of a calendar title
calendarTitleTextColor
$calendarTitleTextColor: $textColor;Description
Text color of a calendar title
calendarTitleBorder
$calendarTitleBorder: solid #dee2e6;Description
Border of a calendar title
calendarTitleBorderWidth
$calendarTitleBorderWidth: 0 0 1px 0;Description
Border width of a calendar title
calendarTableMargin
$calendarTableMargin: .5rem 0;Description
Margin of a calendar table
calendarCellPadding
$calendarCellPadding: .5rem;Description
Padding of a calendar cell
calendarCellDateTextColor
$calendarCellDateTextColor: $textSecondaryColor;Description
Text color 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
calendarCellDateBorder
$calendarCellDateBorder: solid transparent;Description
Border of a calendar date cell
calendarCellDateHoverBg
$calendarCellDateHoverBg: #e9ecef;Description
Background of a calendar date cell in hover state
calendarCellDateHoverBorderColor
$calendarCellDateHoverBorderColor: transparent;Description
Border color of a calendar date cell in hover state
calendarCellDateBorderRadius
$calendarCellDateBorderRadius: 50%;Description
Border radius of a calendar date cell
calendarCellDateSelectedBg
$calendarCellDateSelectedBg: $highlightBg;Description
Background of a selected calendar date cell
calendarCellDateSelectedTextColor
$calendarCellDateSelectedTextColor: $highlightTextColor;Description
Text color of a selected calendar date cell
calendarCellDateSelectedBorder
$calendarCellDateSelectedBorder: 0 none;Description
Border of a selected calendar date cell
calendarCellDateTodayBg
$calendarCellDateTodayBg: #ced4da;Description
Background of a calendar date cell indicating today
calendarCellDateTodayTextColor
$calendarCellDateTodayTextColor: $textColor;Description
Text color of a calendar date cell indicating today
calendarCellDateTodayBorder
$calendarCellDateTodayBorder: 0 none;Description
Border of a calendar date cell indicating today
calendarButtonBarPadding
$calendarButtonBarPadding: 1rem 0;Description
Padding of the calendar button bar
calendarTimePickerMargin
$calendarTimePickerMargin: .857em 0;Description
Margin of a time picker container of a calendar
calendarTimePickerLabelPadding
$calendarTimePickerLabelPadding: 0;Description
Padding of a label of the time picker element of a calendar
calendarTimePickerInputPadding
$calendarTimePickerInputPadding: .5em 0;Description
Padding of a time picker input element of a calendar
calendarTimePickerInputMargin
$calendarTimePickerInputMargin: 0 .714em .714em 40%;Description
Margin of a time picker input element of a calendar
inputSwitchOffBg
$inputSwitchOffBg: #ced4da;Description
Background color of an inputswitch when unchecked
inputSwitchHandleOffBg
$inputSwitchHandleOffBg: #ffffff;Description
Background color of an inputswitch handle when unselected
inputSwitchHandleBorderRadius
$inputSwitchHandleBorderRadius: 50%;Description
Border radius of the inputswitch handle
inputSwitchHandleOffBorder
$inputSwitchHandleOffBorder: 2px solid #c3cad2;Description
Border of the inputswitch handle when unselected
inputSwitchOnBg
$inputSwitchOnBg: $primaryColor;Description
Background color of an inputswitch when checked
inputSwitchHandleOnBg
$inputSwitchHandleOnBg: #ffffff;Description
Background color of an inputswitch handle when selected
inputSwitchHandleOnBorderColor
$inputSwitchHandleOnBorderColor: $primaryDarkColor;Description
Border color of the inputswitch handle when selected
inputSwitchHandleShadow
$inputSwitchHandleShadow: 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, .12);Description
Shadow of the inputswitch handle
inputSwitchBorderRadius
$inputSwitchBorderRadius: 30px;Description
Border radius of the toggleswitch slider
keyboardButtonPadding
$keyboardButtonPadding: .5rem;Description
Padding of the keyboard
keyboardButtonMargin
$keyboardButtonMargin: 2px;Description
Margin of the keyboard
keyboardButtonBorder
$keyboardButtonBorder: $inputBorder;Description
Border of the keyboard
keyboardButtonBg
$keyboardButtonBg: $inputBg;Description
Background of the keyboard
keyboardButtonTextColor
$keyboardButtonTextColor: $textColor;Description
Text color of the keyboard
keyboardButtonHoverBorderColor
$keyboardButtonHoverBorderColor: #dee2e6;Description
Border color of the keyboard in hover state
keyboardButtonHoverBg
$keyboardButtonHoverBg: #ebebef;Description
Background of the keyboard in hover state
keyboardButtonTextHoverColor
$keyboardButtonTextHoverColor: $textSecondaryColor;Description
Text color of the keyboard in hover state
keyboardButtonActiveBorderColor
$keyboardButtonActiveBorderColor: $primaryDarkerColor;Description
Border color of the keyboard in active state
keyboardButtonActiveBg
$keyboardButtonActiveBg: $primaryDarkerColor;Description
Background of the keyboard in active state
keyboardButtonTextActiveColor
$keyboardButtonTextActiveColor: #ffffff;Description
Text color of the keyboard in active state
general
variables
fontSize
$fontSize: 1rem;Description
Size of the font
fontFamily
$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";Description
Font of the theme
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
transitionDuration
$transitionDuration: .2s;Description
Duration of the property transitions
transition
$transition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;Description
Properties of a transition
actionIconTransition
$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration, opacity $transitionDuration ease-in-out;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
animationDuration
$animationDuration: .4s;Description
Duration of the animations
animationTimingFunction
$animationTimingFunction: cubic-bezier(.05, .74, .2, .99);Description
Timing function of the animations
letterSpacing
$letterSpacing: normal;Description
Spacing of the letters
borderRadius
$borderRadius: 3px;Description
Border radius of the some primefaces components
tabletBreakpoint
$tabletBreakpoint: 991px;Description
Breakpoint of the tablets
phoneBreakpoint
$phoneBreakpoint: 576px;Description
Breakpoint of the phones
divider
$divider: 1px solid #dee2e6;Description
Separator border
disabledOpacity
$disabledOpacity: .8;Description
Opacity of the disabled elements
maskBg
$maskBg: rgba(0, 0, 0, 0.4);Description
Background of the modal layer
inlineSpacing
$inlineSpacing: .5rem;Description
Space between two inline items
iconSize
$iconSize: 1rem;Description
Size of the 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
input
variables
fileItemPadding
$fileItemPadding: 1rem;Description
Padding for the fileupload files
media
variables
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: .8rem .25rem;Description
Padding of a galleria thumbnail container
galleriaThumbnailContentMargin
$galleriaThumbnailContentMargin: .2rem;Description
Margin of a galleria thumbnail content
menu
message
variables
messagesMargin
$messagesMargin: 1rem 0;Description
Margin of a messages
messagesPadding
$messagesPadding: 1rem 1.5rem;Description
Padding of a messages
messagesIconFontSize
$messagesIconFontSize: 1.5rem;Description
Font size of a messages icon
messagesBorderWidth
$messagesBorderWidth: 0 0 0 4px;Description
Border width of a messages
messagesFontWeight
$messagesFontWeight: 500;Description
Font weight of a messages 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
warnMessageBg
$warnMessageBg: #FFB300;Description
Background of a warning message
warnMessageBorder
$warnMessageBorder: 0 none;Description
Border of a warning message
warnMessageTextColor
$warnMessageTextColor: $textColor;Description
Text color of a warning message
warnMessageIconColor
$warnMessageIconColor: $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
growlIconFontSize
$growlIconFontSize: 2rem;Description
Font size of a growl message icon
growlMargin
$growlMargin: 0 0 0 1rem;Description
Margin of a growl message text
growlPadding
$growlPadding: 1rem;Description
Padding of a growl message
messageBorderWidth
$messageBorderWidth: 0 0 0 4px;Description
Border width of a message
misc
variables
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 tag
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
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
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 overlay panel
overlayContainerShadow
$overlayContainerShadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);Description
Box shadow of an overlay container element such as dialog or overlay panel
overlayPanelCloseIconBg
$overlayPanelCloseIconBg: $primaryColor;Description
Background for close icon of the overlay panel
overlayPanelCloseIconColor
$overlayPanelCloseIconColor: $primaryTextColor;Description
Icon color of the overlay panel close icon
overlayPanelCloseIconHoverBg
$overlayPanelCloseIconHoverBg: $primaryDarkColor;Description
Background for close icon of the overlay panel in hover state
overlayPanelCloseIconHoverColor
$overlayPanelCloseIconHoverColor: $primaryTextColor;Description
Icon color of the overlay panel close icon in hover state
dialogHeaderBorder
$dialogHeaderBorder: 1px solid #dee2e6;Description
Border of a dialog header
dialogHeaderBg
$dialogHeaderBg: #ffffff;Description
Background 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
dialogContentBorder
$dialogContentBorder: 0 none;Description
Border of a dialog content
dialogContentBg
$dialogContentBg: #ffffff;Description
Background of a dialog content
dialogContentTextColor
$dialogContentTextColor: $panelContentTextColor;Description
Text color of a dialog content
dialogContentPadding
$dialogContentPadding: 0 1.5rem;Description
Padding of a dialog content
confirmDialogContentPadding
$confirmDialogContentPadding: 1rem 2rem;Description
Padding of a confirm dialog content
confirmDialogIconFontSize
$confirmDialogIconFontSize: 2.5rem;Description
Font size of a confirm dialog icon
confirmPopupContentPadding
$confirmPopupContentPadding: $panelContentPadding;Description
Padding of a confirm popup content
tooltipBg
$tooltipBg: $textColor;Description
Background of a tooltip
tooltipTextColor
$tooltipTextColor: #ffffff;Description
Text color of a tooltip
panel
variables
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
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
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
panelHeaderHoverBg
$panelHeaderHoverBg: #e9ecef;Description
Background of a panel header in hover state
panelHeaderHoverBorderColor
$panelHeaderHoverBorderColor: #dee2e6;Description
Border color of a panel header in hover state
panelHeaderTextHoverColor
$panelHeaderTextHoverColor: #495057;Description
Text color of a panel header in hover state
panelHeaderHoverIconColor
$panelHeaderHoverIconColor: #495057;Description
Icon color of a panel header in hover state
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
accordionHeaderActiveTextHoverColor
$accordionHeaderActiveTextHoverColor: $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
tabsHeaderSpacing
$tabsHeaderSpacing: 0;Description
Spacing between tabview headers
tabsHeaderBg
$tabsHeaderBg: #ffffff;Description
Background of a tabview header
tabsHeaderTextColor
$tabsHeaderTextColor: $textSecondaryColor;Description
Text color of a tabview header
tabsHeaderFontWeight
$tabsHeaderFontWeight: $panelHeaderFontWeight;Description
Font weight of a tabview header
tabsHeaderPadding
$tabsHeaderPadding: $panelHeaderPadding;Description
Padding of a tabview header
tabsHeaderHoverBg
$tabsHeaderHoverBg: #ffffff;Description
Background of a tabview header in hover state
tabsHeaderHoverBorderColor
$tabsHeaderHoverBorderColor: #9ba2aa;Description
Border of a tabview header in hover state
tabsHeaderTextHoverColor
$tabsHeaderTextHoverColor: $textSecondaryColor;Description
Text color of a tabview header in hover state
tabsHeaderActiveBg
$tabsHeaderActiveBg: #ffffff;Description
Background of a tabview header in selected state
tabsHeaderActiveBorderColor
$tabsHeaderActiveBorderColor: $primaryColor;Description
Border of a tabview header in selected state
tabsHeaderTextActiveColor
$tabsHeaderTextActiveColor: $primaryColor;Description
Text color of a tabview header in selected state
tabsContentBorder
$tabsContentBorder: 0 none;Description
Border for content section of a tabview tab
tabsContentBg
$tabsContentBg: $panelContentBg;Description
Background for content section of a tabview tab
tabsContentTextColor
$tabsContentTextColor: $panelContentTextColor;Description
Text color for a content section of a tabview tab
tabsContentPadding
$tabsContentPadding: $panelContentPadding;Description
Padding for a content section of a tabview tab
tabsScrollerButtonBg
$tabsScrollerButtonBg: #ffffff;Description
Background for tabview scroll button
tabsScrollerButtonHoverBg
$tabsScrollerButtonHoverBg: #e9ecef;Description
Background for tabview scroll button in hover state
tabsScrollerButtonIconColor
$tabsScrollerButtonIconColor: $textSecondaryColor;Description
Background for icon of the tabview scroll button
tabsScrollerButtonIconHoverColor
$tabsScrollerButtonIconHoverColor: $textColor;Description
Background for icon of the tabview scroll button in hover state
scrollPanelHandleBg
$scrollPanelHandleBg: #dadada;Description
Background of handle of a scroll panel
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