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 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

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"

tableFooterCellPadding

$tableFooterCellPadding: 1rem 1rem;

Description

Padding of a table footer cell, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"

tableFooterCellBg

$tableFooterCellBg: #f8f9fa;

Description

Background of a table footer cell

tableFooterCellTextColor

$tableFooterCellTextColor: $textColor;

Description

Text color of a table footer cell

tableFooterCellFontWeight

$tableFooterCellFontWeight: 600;

Description

Font weight of a table footer cell

tableFooterCellBorder

$tableFooterCellBorder: 1px solid #e9ecef;

Description

Border of a table footer cell

tableFooterCellBorderWidth

$tableFooterCellBorderWidth: 0 0 1px 0;

Description

Border width of a table footer cell

tableResizerHelperBg

$tableResizerHelperBg: $primaryColor;

Description

Background of a table column resize indicator bar

tableDragHelperBg

$tableDragHelperBg: rgba($primaryColor, .16);

Description

Background of drag helper used for multiple row selection

tableFooterBorder

$tableFooterBorder: 1px solid #e9ecef;

Description

Border of a table footer

tableFooterBorderWidth

$tableFooterBorderWidth: 0 0 1px 0;

Description

Border width of a table footer

tableFooterBg

$tableFooterBg: #f8f9fa;

Description

Background of a table footer

tableFooterTextColor

$tableFooterTextColor: $textColor;

Description

Text color of a table footer

tableFooterFontWeight

$tableFooterFontWeight: 600;

Description

Font weight of a table footer

tableFooterPadding

$tableFooterPadding: 1rem 1rem;

Description

Padding of a table footer, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"

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

dataScrollerContentPadding

$dataScrollerContentPadding: 0;

Description

Padding for content section of a datascroller

dataScrollerContentBorder

$dataScrollerContentBorder: 0 none;

Description

Border for content section of a datascroller

dataScrollerListItemBorder

$dataScrollerListItemBorder: solid #e9ecef;

Description

Border for an item of a datascroller

dataScrollerListItemBorderWidth

$dataScrollerListItemBorderWidth: 0 0 1px 0;

Description

Border width for an item of a datascroller

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

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

calendarMonthYearHeaderHoverTextColor

$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;

Description

Text color of current month and year text in hover state

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

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

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

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

galleriaItemNavigatorBg

$galleriaItemNavigatorBg: rgba(0,0,0,.2);

Description

Background of a galleria navigator item

galleriaItemNavigatorColor

$galleriaItemNavigatorColor: #aeb6bf;

Description

Color of a galleria navigator item

galleriaItemNavigatorMargin

$galleriaItemNavigatorMargin: .5rem 0;

Description

Margin of a galleria navigator item

galleriaItemNavigatorFontSize

$galleriaItemNavigatorFontSize: 2rem;

Description

Font size of a galleria navigator item

galleriaItemNavigatorHoverBg

$galleriaItemNavigatorHoverBg: rgba(0,0,0,.3);

Description

Background of a galleria navigator item in hover state

galleriaItemNavigatorHoverColor

$galleriaItemNavigatorHoverColor: #ebedef;

Description

Color of a galleria navigator item in hover state

galleriaItemNavigatorWidth

$galleriaItemNavigatorWidth: 4rem;

Description

Width of a galleria navigator item

galleriaItemNavigatorHeight

$galleriaItemNavigatorHeight: 4rem;

Description

Height of a galleria navigator item

galleriaItemNavigatorBorderRadius

$galleriaItemNavigatorBorderRadius: $borderRadius;

Description

Border radius of a galleria navigator item

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

galleriaThumbnailNavigatorBg

$galleriaThumbnailNavigatorBg: transparent;

Description

Background of a galleria thumbnail navigator

galleriaThumbnailNavigatorColor

$galleriaThumbnailNavigatorColor: #aeb6bf;

Description

Color of a galleria thumbnail navigator

galleriaThumbnailNavigatorHoverBg

$galleriaThumbnailNavigatorHoverBg: rgba(255,255,255,0.1);

Description

Background of a galleria thumbnail navigator in hover state

galleriaThumbnailNavigatorHoverColor

$galleriaThumbnailNavigatorHoverColor: #aeb6bf;

Description

Color of a galleria thumbnail navigator in hover state

galleriaThumbnailNavigatorBorderRadius

$galleriaThumbnailNavigatorBorderRadius: 50%;

Description

Border radius of a galleria thumbnail navigator in hover state

galleriaThumbnailNavigatorWidth

$galleriaThumbnailNavigatorWidth: 2rem;

Description

Width of a galleria thumbnail navigator in hover state

galleriaThumbnailNavigatorHeight

$galleriaThumbnailNavigatorHeight: 2rem;

Description

Height of a galleria thumbnail navigator in hover state

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;

avatarBg

$avatarBg: #dee2e6;

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 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

dialogFooterBorder

$dialogFooterBorder: 1px solid #dee2e6;

Description

Border of a dialog footer

dialogFooterPadding

$dialogFooterPadding: 1.5rem;

Description

Padding of a dialog footer

confirmPopupContentPadding

$confirmPopupContentPadding: $panelContentPadding;

Description

Padding of a confirmpopup content

confirmPopupFooterPadding

$confirmPopupFooterPadding: 0 1rem 1rem 1rem;

Description

Padding of a confirmpopup footer

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

panelFooterBorder

$panelFooterBorder: 1px solid #dee2e6;

Description

Border for the footer section of a panel

panelFooterBg

$panelFooterBg: #ffffff;

Description

Background for the footer section of a panel

panelFooterTextColor

$panelFooterTextColor: $textColor;

Description

Text color for the footer section of a panel

panelFooterPadding

$panelFooterPadding: 0.5rem 1rem;

Description

Padding for the footer 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

tabviewNavBorder

$tabviewNavBorder: 1px solid #dee2e6;

Description

Border for a parent element containing all the headers of a tabview

tabviewNavBorderWidth

$tabviewNavBorderWidth: 0 0 2px 0;

Description

Border width for a parent element containing all the headers of a tabview

tabviewNavBg

$tabviewNavBg: #ffffff;

Description

Background for a parent element containing all the headers of a tabview

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

cardFooterPadding

$cardFooterPadding: 1rem 0 0 0;

Description

Padding of a card footer

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