If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
ExampleChange the background and icon colors in action strip
$my-action-strip-theme: action-strip-theme($background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-action-strip-theme);
Map
$light-material-schema The schema used as basis for styling the component. $icon-colorColor
null The color used for the actions icons. $backgroundColor
null The color used for the action strip component content background. $actions-backgroundColor
null The color used for the actions background. $delete-actionColor
null The color used for the delete icon in action strip component. $actions-border-radiusList
null The border radius used for actions container inside action strip component. # view code open_in_new Parameters Name Type Default Description $schemaMap
$light-material-schema The schema used as basis for styling the component. # view code open_in_new ExampleChange the focused border and label colors
$my-file-input-theme: file-input-theme($file-names-foreground: #09f);
// Pass the theme to the css-vars() mixin
@include css-vars($my-file-input-theme);
Map
$light-material-schema The schema used as basis for styling the component. $file-names-backgroundColor
null The file names container background color. $file-names-background--focusedColor
null The file names container background color when the file input is focused. $file-names-background--filledColor
null The file names container background color when the file input is filled. $file-names-background--disabledColor
null The file names container background color when the file input is disabled. $file-names-foregroundColor
null The file names color. $file-names-foreground--focusedColor
null The file names color when the file input is focused. $file-names-foreground--filledColor
null The file names color when the file input is filled. $file-names-foreground--disabledColor
null The file names color when the file input is disabled. $file-selector-button-backgroundColor
null The file input selector button background color. $file-selector-button-background--focusedColor
null The selector button background color when the file input is focused. $file-selector-button-background--filledColor
null The selector button background color when the file input is filled. $file-selector-button-background--disabledColor
null The selector button background color when the file input is disabled. $file-selector-button-foregroundColor
null The file input selector button foreground color. $file-selector-button-foreground--focusedColor
null The selector button foreground color when the file input is focused. $file-selector-button-foreground--filledColor
null The selector button foreground color when the file input is filled. $file-selector-button-foreground--disabledColor
null The selector button foreground color when the file input is disabled. # view code open_in_newUsed to switch between values based on the size of the component. The passed sizes are converted to absolute values before comparing.
Example--size: #{sizable(rem(40px), rem(64px), rem(88px))};
Number
- The preferred value when the component's size is small. $mdNumber
$sm The preferred value when the component's size is medium. $lgNumber
$md The preferred value when the component's size is large. # view code open_in_new Example$custom-chart-theme: category-chart-theme($brushes: (red, green, blue));
// Pass the theme to the css-vars mixin
@include css-vars($custom-chart-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $marginList
null Sets the margin (top, right, bottom, left) of the chart content. $brushesList
series Defines the palette from which automatically assigned series brushes colors are selected. $marker-brushesList
series Defines the palette from which automatically assigned series marker brushes colors are selected. $negative-brushesList
series Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall. $outlinesList
series Defines the palette from which automatically assigned series outline colors are selected. $marker-outlinesList
series Defines the palette from which automatically assigned series marker outline colors are selected. $negative-outlinesList
series Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall. $title-alignmentString
null The horizontal alignment to use for the title. $title-marginList
null Sets the margin (top, right, bottom, left) of the chart title. $title-text-colorColor
null Sets the color of the chart title. $title-text-styleString
null Sets the CSS font property of the chart title. $subtitle-marginList
null Sets the margins (top, right, bottom, left) of the chart subtitle. $subtitle-alignmentString
null The horizontal alignment to use for the subtitle. $subtitle-text-colorColor
null Sets the color of the chart subtitle. $subtitle-text-styleString
null Sets the CSS font property of the chart subtitle. $thicknessNumber
null Sets the thickness for all series in a chart. $trend-line-brushesList
series Defines the palette of brushes used for coloring trend lines in a chart. $trend-line-thicknessNumber
null Sets the thickness of the trend lines in a chart of type point, line, spline or bubble. $x-axis-label-marginList
null Sets the margin (top, right, bottom, left) of labels on the X-axis. $x-axis-label-text-colorColor
null Sets the color of labels on the X-axis. $x-axis-label-text-styleString
null Sets the CSS font property for labels on X-axis. $x-axis-label-vertical-alignmentString
null Sets the vertical alignment of X-axis labels. $x-axis-major-strokeColor
null Sets the color to apply to major gridlines along the X-axis. $x-axis-major-stroke-thicknessNumber
null Sets the thickness to apply to major gridlines along the X-axis. $x-axis-minor-strokeColor
null Sets the color to apply to minor gridlines along the X-axis. $x-axis-minor-stroke-thicknessNumber
null Sets the thickness to apply to minor gridlines along the X-axis. $x-axis-stripColor
null Sets the color to apply to stripes along the X-axis. $x-axis-strokeColor
null Sets the color to apply to the X-axis line. $x-axis-stroke-thicknessNumber
null Sets the thickness to apply to the X-axis line. $x-axis-tick-lengthNumber
null Sets the length of tickmarks along the X-axis. $x-axis-tick-strokeColor
null Sets the color to apply to tickmarks along the X-axis. $x-axis-tick-stroke-thicknessNumber
null Sets the thickness to apply to tickmarks along the X-axis. $x-axis-title-alignmentString
null Sets the horizontal alignment of the X-axis title. $x-axis-title-marginList
null Sets the margin (top, right, bottom, left) of a title on the X-axis. $x-axis-title-text-colorColor
null Sets the color of the title on the X-axis. $x-axis-title-text-styleString
null Sets the CSS font property for the title on the X-axis. $y-axis-label-marginList
null Sets the margin (top, right, bottom, left) of labels on the Y-axis. $y-axis-label-text-colorColor
null Sets the color of labels on the Y-axis. $y-axis-label-text-styleString
null Sets the CSS font property for labels on Y-axis. $y-axis-label-vertical-alignmentString
null Sets the vertical alignment of Y-axis labels. $y-axis-major-strokeColor
null Sets the color to apply to major gridlines along the y-axis. $y-axis-major-stroke-thicknessNumber
null Sets the thickness to apply to major gridlines along the Y-axis. $y-axis-minor-strokeColor
null Sets the color to apply to minor gridlines along the Y-axis. $y-axis-minor-stroke-thicknessNumber
null Sets the thickness to apply to minor gridlines along the Y-axis. $y-axis-stripColor
null Sets the color to apply to stripes along the Y-axis. $y-axis-strokeColor
null Sets the color to apply to the Y-axis line. $y-axis-stroke-thicknessNumber
null Sets the thickness to apply to the Y-axis line. $y-axis-title-alignmentString
null Sets the horizontal alignment of the Y-axis title. $y-axis-title-marginList
null Sets the margin (top, right, bottom, left) of a title on the Y-axis. $y-axis-title-text-colorColor
null Sets the color of a title on the Y-axis. $y-axis-title-text-styleString
null Sets the CSS font property for the title on the Y-axis. $y-axis-tick-lengthNumber
null Sets the length of tickmarks along the Y-axis. $y-axis-tick-strokeColor
null Sets the color to apply to tickmarks along the Y-axis. $y-axis-tick-stroke-thicknessNumber
null Sets the thickness to apply to tickmarks along the Y-axis. # view code open_in_new Example$my-chart-theme: data-chart-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $marginList
null Sets the margin (top, right, bottom, left) of the chart content. $title-text-colorColor
null Sets the color of the chart title. $title-marginList
null Sets the margin (top, right, bottom, left) of the chart title. $subtitle-text-colorColor
null Sets the color of the chart subtitle. $subtitle-marginList
null Sets the margins (top, right, bottom, left) of the chart subtitle. $brushesList
null Defines the palette from which automatically assigned series colors are selected. $marker-brushesList
null Defines the palette from which automatically assigned marker brushes are selected. $outlinesList
null Defines the palette from which automatically assigned series outline colors are selected. $marker-outlinesList
null Defines the palette from which automatically assigned marker outlines are selected. $plot-area-backgroundColor
null Sets the brush used as the background for the current Chart object's plot area. $title-horizontal-alignmentString
null The horizontal alignment to use for the title. Valid options are 'left', 'center', and 'right'; $subtitle-horizontal-alignmentString
null The horizontal alignment to use for the subtitle. Valid options are 'left', 'center', and 'right'; $axis-label-marginList
null Sets the margin (top, right, bottom, left) of labels on the both axes. $axis-label-text-colorColor
null Sets the color of labels on both axes. $axis-label-text-styleString
null Sets the CSS font property for labels on both axes. $axis-label-vertical-alignmentString
null Sets the vertical alignment of X-axis labels. $axis-major-strokeColor
null Sets the color to apply to major gridlines along both axes. $axis-major-stroke-thicknessNumber
null Sets the thickness to apply to major gridlines on both axes. $axis-minor-strokeColor
null Sets the color to apply to minor gridlines along both axes. $axis-minor-stroke-thicknessNumber
null Sets the thickness to apply to minor gridlines along both axes. $axis-stripColor
null Sets the color to apply to stripes along both axes. $axis-strokeColor
null Sets the color to apply to both axes. $axis-stroke-thicknessNumber
null Sets the thickness to apply to both axes. $axis-tick-lengthNumber
null Sets the length of tickmarks along both axes. $axis-tick-strokeColor
null Sets the color to apply to tickmarks along both axes. $axis-tick-stroke-thicknessNumber
null Sets the thickness to apply to tickmarks along both axes. $axis-title-alignmentString
null Sets the horizontal alignment of both axes. $axis-title-marginList
null Sets the margin (top, right, bottom, left) of a title on both axes. $axis-title-text-colorColor
null Sets the color of the title on the X-axis. $axis-title-text-styleString
null Sets the CSS font property for the title on both axes. # view code open_in_new Example$my-chart-theme: doughnut-chart-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $others-category-fillColor
null Sets the fill color for others category. $others-category-opacityNumber
null Sets the opacity for others category. $others-category-strokeColor
null Sets the others category stroke color. $others-category-stroke-thicknessNumber
null Sets the others category stroke thickness. $selected-slice-fillColor
null Sets the fill color of the selected slice. $selected-slice-opacityNumber
null Sets the opacity of the selected slice. $selected-slice-strokeColor
null Sets the stroke color of the selected slice. $selected-slice-stroke-thicknessNumber
null Sets the stroke thickness of the selected slice. # view code open_in_new Example$custom-gauge-theme: linear-gauge-theme($brushes: (red, green, blue));
// Pass the theme to the css-vars mixin
@include css-vars($custom-gauge-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $backing-brushColor
null Sets the color to use to fill the backing of the linear gauge. $backing-outlineColor
null Sets the color to use for the outline of the backing. $backing-stroke-thicknessNumber
null Sets the stroke thickness of the backing outline. $font-brushColor
null Sets the color to use for the label font. $minor-tick-stroke-thicknessNumber
null Sets the stroke thickness to use when rendering minor ticks. $needle-breadthNumber
null Sets the needle breadth. $needle-brushColor
null Sets the color to use for the needle element. $needle-inner-base-widthNumber
null Sets the width of the needle's inner base. $needle-inner-point-widthNumber
null Sets the width of the needle's inner point. $needle-outer-base-widthNumber
null Sets the width of the needle's outer base. $needle-outer-point-widthNumber
null Sets the width of the needle's outer point. $needle-outlineColor
null Sets the color to use for the outline of needle element. $needle-stroke-thicknessNumber
null Sets the stroke thickness to use when rendering single actual value element. $range-brushesList
null Sets a collection of colors to be used as the palette for linear gauge ranges. $range-outlinesList
null Sets a collection of colors to be used as the palette for linear gauge outlines. $scale-brushColor
null Sets the color to use to fill the scale of the linear gauge. $scale-outlineColor
null Sets the color to use for the outline of the scale. $scale-stroke-thicknessNumber
null Sets the stroke thickness of the scale outline. $tick-brushColor
null Sets the color to use for the major tickmarks. $tick-stroke-thicknessNumber
null Sets the stroke thickness to use when rendering ticks. # view code open_in_new Example$custom-gauge-theme: radial-gauge-theme($brushes: (red, green, blue));
// Pass the theme to the css-vars mixin
@include css-vars($custom-gauge-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $widthMap
null The width of the gauge in pixels, string (px) or percentage (%). $heightMap
null The height of the gauge in pixels, string (px) or percentage (%). $backing-brushColor
null Sets the color to use to fill the backing of the linear gauge. $backing-outlineColor
null Sets the color to use for the outline of the backing. $backing-stroke-thicknessNumber
null Sets the stroke thickness of the backing outline. $font-brushColor
null Sets the color to use for the label font. $minor-tick-stroke-thicknessNumber
null Sets the stroke thickness to use when rendering minor ticks. $needle-brushColor
null Sets the color to use for the needle element. $needle-outlineColor
null Sets the color to use for the outline of needle element. $needle-stroke-thicknessNumber
null Sets the stroke thickness to use when rendering single actual value element. $range-brushesList
null Sets a collection of colors to be used as the palette for linear gauge ranges. $range-outlinesList
null Sets a collection of colors to be used as the palette for linear gauge outlines. $scale-brushColor
null Sets the color to use to fill the scale of the linear gauge. $tick-brushColor
null Sets the color to use for the major tickmarks. $tick-stroke-thicknessNumber
null Sets the stroke thickness to use when rendering ticks. $needle-pivot-brushColor
null Sets the color of the needle pivot point. $needle-pivot-outlineColor
null Sets the outline color of the needle pivot point. # view code open_in_new Example$my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $backing-brushColor
null Sets the brush to use to fill the backing of the bullet graph. $backing-outlineColor
null Sets the brush to use for the outline of the backing. $backing-stroke-thicknessNumber
null Sets the stroke thickness of the backing outline. $font-brushColor
null Sets the brush to use for the label font. $minor-tick-brushColor
null Sets the brush to use for the minor tickmarks. $minor-tick-thicknessNumber
null Stroke thickness to use when rendering minor ticks. $range-brushesList
null Sets a collection of brushes to be used as the palette for bullet graph ranges. $range-outlinesList
null Sets a collection of brushes to be used as the palette for bullet graph outlines. $scale-background-brushColor
null Sets the background brush for the scale. $scale-background-outlineColor
null Sets the background outline for the scale. $scale-background-thicknessNumber
null Sets the background outline thickness for the scale. $target-value-breadthNumber
null Sets the breadth of the target value element. $target-value-brushColor
null Sets the brush to use when rendering the fill of the comparative marker. $target-value-outlineColor
null Sets the brush to use when rendering the outline of the target value. $target-value-thicknessNumber
null Sets the stroke thickness of the outline of the target value bar. $tick-brushColor
null Sets the brush to use for the major tickmarks. $tick-stroke-thicknessNumber
null Sets the stroke thickness to use when rendering ticks. $value-brushColor
null Sets the brush to use for the actual value element. $value-outlineColor
null Sets the brush to use for the outline of actual value element. $value-stroke-thicknessNumber
null Sets the stroke thickness to use when rendering single actual value element. # view code open_in_new Example$my-chart-theme: pie-chart-theme($brushes: (red, orange, blue));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $brushesList
series Defines the palette from which automatically assigned series colors are selected. $outlinesList
series Defines the palette from which automatically assigned series outline colors are selected. $label-extentNumber
null Sets the pixel amount by which the labels are offset from the edge of the slices. $label-inner-colorColor
null Sets the color for labels rendered inside of the pie chart. $label-outer-colorColor
null Sets the color for labels rendered outside of the pie chart. $labels-positionString
null Sets the position of chart labels. Valid values are: 'none', 'center', 'insideEnd', 'outsideEnd', and 'bestFit'. $leader-line-marginNumber
null Sets the margin between a label and the end of its leader line. $leader-line-typeString
null Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'. $leader-line-visibilityString
null Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'. $radius-factorNumber
null Sets the scaling factor of the chart's radius. Value between 0 and 1. # view code open_in_new Example$my-chart-theme: shape-chart-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $marginList
null Sets the margin (top, right, bottom, left) of the chart content. $title-alignmentColor
null Sets horizontal alignment which determines the title position, relative to the left and right edges of the control. $title-text-colorColor
null Sets the color of the chart title. $title-marginList
null Sets the margin (top, right, bottom, left) of the chart title. $subtitle-alignmentString
null Sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control. $subtitle-text-colorColor
null Sets the color of the chart subtitle. $subtitle-marginList
null Sets the margins (top, right, bottom, left) of the chart subtitle. $brushesList
null Defines the palette from which automatically assigned series colors are selected. $marker-brushesList
null Sets the palette of brushes used for rendering fill area of data point markers. $outlinesList
null Sets the palette of brushes to use for outlines on the chart series. $marker-outlinesList
null Sets the palette of brushes used for rendering outlines of data point markers. $thicknessNumber
null Sets the thickness for all series in this chart. $trend-line-brushesList
null Sets the palette of brushes to used for coloring trend lines in this chart. $trend-line-thicknessNumber
null Sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble. $x-axis-label-marginList
null Sets the margin of labels on the X-axis. $x-axis-label-text-colorColor
null Sets color of labels on the X-axis. $x-axis-label-vertical-alignmentString
null Sets Vertical alignment of X-axis labels. $x-axis-major-strokeColor
null Sets the color to apply to major gridlines along the X-axis. $x-axis-major-stroke-thicknessNumber
null Sets the thickness to apply to major gridlines along the X-axis. $x-axis-minor-strokeColor
null Sets the color to apply to minor gridlines along the X-axis. $x-axis-minor-stroke-thicknessNumber
null Sets the thickness to apply to minor gridlines along the X-axis. $x-axis-stripColor
null Sets the color to apply to stripes along the X-axis. $x-axis-strokeColor
null Sets the color to apply to the X-axis line. $x-axis-stroke-thicknessNumber
null Sets the thickness to apply to the X-axis line. $x-axis-title-alignmentString
null Sets Horizontal alignment of the X-axis title. $x-axis-title-colorColor
null Sets color of title on the X-axis. $x-axis-title-marginList
null Sets the margin around the title on the X-axis. $y-axis-label-marginList
null Sets the margin of labels on the Y-axis. $y-axis-label-text-colorColor
null Sets color of labels on the Y-axis. $y-axis-label-vertical-alignmentString
null Sets Vertical alignment of Y-axis labels. $y-axis-major-strokeColor
null Sets the color to apply to major gridlines along the Y-axis. $y-axis-major-stroke-thicknessNumber
null Sets the thickness to apply to major gridlines along the Y-axis. $y-axis-minor-strokeColor
null Sets the color to apply to minor gridlines along the Y-axis. $y-axis-minor-stroke-thicknessNumber
null Sets the thickness to apply to minor gridlines along the Y-axis. $y-axis-stripColor
null Sets the color to apply to stripes along the Y-axis. $y-axis-strokeColor
null Sets the color to apply to the Y-axis line. $y-axis-stroke-thicknessNumber
null Sets the thickness to apply to the Y-axis line. $y-axis-title-alignmentString
null Sets Horizontal alignment of the Y-axis title. $y-axis-title-colorColor
null Sets color of title on the Y-axis. $y-axis-title-marginList
null Sets the margin around the title on the Y-axis. # view code open_in_new Example$my-sparkline-theme: sparkline-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-sparkline-theme);
Map
$light-material-schema The schema used as basis for styling the component. $targetMap
'angular' The target platform to be used when scoping the theme variables. $brushColor
null Sets the sparkline brush. $line-thicknessNumber
null Sets the line thickness of the sparkline. $marker-brushColor
null Sets the marker brush of the sparkline. $marker-sizeColor
null Sets the marker size of the sparkline. $first-marker-brushColor
null Sets the first marker brush of the sparkline. $first-marker-sizeNumber
null Sets the first marker size of the sparkline. $last-marker-brushColor
null Sets the last marker brush of the sparkline. $last-marker-sizeNumber
null Sets the last marker size of the sparkline. $low-marker-brushColor
null Sets the low marker brush of the sparkline. $low-marker-sizeNumber
null Sets the low marker size of the sparkline. $high-marker-brushColor
null Sets the high marker brush of the sparkline. $high-marker-sizeNumber
null Sets the high marker size of the sparkline. $negative-brushColor
null Sets the negative brush of the sparkline. $negative-marker-brushColor
null Sets the negative marker brush of the sparkline. $negative *Number
- marker-size [null] - Sets the negative marker size of the sparkline. $trend-line-brushColor
null Sets the trendline brush of the sparkline. $trend-line-thicknessColor
null Sets the thickness of the sparkline's trendline. $horizontal-axis-brushColor
null Sets the horizontal axis line brush of the sparkline. $vertical-axis-brushColor
null Sets the vertical axis line brush of the sparkline. $normal-range-fillColor
null Sets the normal range brush of the sparkline. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color.
ExampleChange the background and icon colors in icon avatars
$my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);
// Pass the theme to the css-vars() mixin
@include css-vars($my-avatar-theme);
Map
$light-material-schema The schema used as basis for styling the component. $colorColor
null The text color used of the avatar. $icon-colorColor
null The icon color used of the avatar. $backgroundColor
null The background color used of the avatar. $border-radiusNumber
null The border-radius used of the avatar. $sizeNumber
null The size of the avatar. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color.
ExampleChange the text and icon colors in a badge
$my-badge-theme: badge-theme($icon-color: black, $background-color: white);
// Pass the theme to the css-vars() mixin
@include css-vars($my-badge-theme);
Map
$light-material-schema The schema used as basis for styling the component. $icon-colorColor
null The icon color used. $text-colorColor
null The text color used. $border-colorColor
null The border color used. $background-colorColor
null The background color used. $shadowbox-shadow
null Sets a shadow to be used for the badge. $border-radiusNumber
null The border radius used for badge component. #If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
ExampleChange the background in banner
$my-banner-theme: banner-theme($banner-background: #000);
// Pass the theme to the css-vars() mixin
@include css-vars($my-banner-theme);
Map
$light-material-schema The schema used as basis for styling the component. $banner-backgroundColor
null The color used for the banner background. $banner-message-colorColor
null The color used for the banner label. $banner-border-colorColor
null The color used for the banner border. $banner-illustration-colorColor
null The color used for the banner illustration. $border-radiusNumber
null The border-radius for the banner. # view code open_in_newIf only background color is specified, the label and icon colors will be assigned automatically to a contrasting color.
ExampleSet a custom background color
$my-bottom-nav-theme: bottom-nav-theme($background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-bottom-nav-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color used for the toast. $label-colorColor
null The label color used in idle state. $icon-colorColor
null The icon color used in idle state. $label-selected-colorColor
null The label color used in selected state. $icon-selected-colorColor
null The icon color used in selected state. $icon-disabled-colorColor
null The disabled color of the icon. $label-disabled-colorColor
null The disabled color of the label. $border-colorColor
null The border color of the bottom navigation. $shadowbox-shadow
null Sets a shadow to be used for the bar. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.
ExampleChange the background, text, and border colors
$my-button-group-theme: button-group-theme(
$item-text-color: white,
$item-background: rgba(0, 0, 0, .8),
$item-border-color: #dadada
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-group-theme);
Map
$light-material-schema The schema used as basis for styling the component. $shadowbox-shadow
null The shadow to be applied for the button group. $item-text-colorColor
null The text color for button group items. $item-icon-colorcolor
null The icon color for button group items. $item-backgroundColor
null The background color for button group items . $item-border-colorColor
null The border color between button group items. $item-hover-text-colorColor
null The hover text color for button group items. $item-hover-icon-colorColor
null The hover icon color for button group items. $item-hover-backgroundColor
null The hover background color for button group items. $item-hover-border-colorColor
null The hover border color between button group items. $item-focused-text-colorColor
null The focused text color for button group items. $item-focused-backgroundColor
null The focused background color for button group items. $item-focused-border-colorColor
null The focused border color for an item from the button group. $item-focused-hover-backgroundColor
null The focused & hover background color for button group items. $idle-shadow-colorColor
null The outline color of focused button group items. $selected-shadow-colorColor
null The outline color of focused/selected button group items. $disabled-text-colorColor
null The text/icon color for a disabled item in the button group. $disabled-background-colorColor
null The background color for a disabled item in the button group. $item-disabled-borderColor
null The border color for a disabled item in the button group. $item-selected-text-colorColor
null The text color for a selected item in the button group. $item-selected-icon-colorColor
null The icon color for a selected item in the button group. $item-selected-backgroundColor
null The background color for a selected item in the button group. $item-selected-border-colorColor
null The border color for a selected item from the button group. $item-selected-hover-text-colorColor
null The text color for a selected item in hover state in the button group. $item-selected-hover-icon-colorColor
null The icon color for a selected item in hover state in the button group. $item-selected-hover-backgroundColor
null The background color for a selected item in hover state in the button group. $item-selected-hover-border-colorColor
null The border color for a selected item in hover state in the button group. $item-selected-focus-backgroundColor
null The background color for a selected item in focused state in the button group. $item-selected-focus-hover-backgroundColor
null The background color for a selected item in focused & hover state in the button group. $disabled-selected-text-colorColor
null The disabled text color for a selected item in the button group. $disabled-selected-icon-colorColor
null The disabled icon color for a selected item in the button group. $disabled-selected-backgroundColor
null The disabled background color for a selected item in the button group. $disabled-selected-border-colorColor
null The disabled border color for a selected item from the button group. $border-radiusList
null The border radius used for button-group component. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.
ExampleChange the background and text colors in contained buttons
$my-button-theme: button-theme(
$foreground: white,
$background: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color of the button. $foregroundColor
null The text color of the button. $icon-colorColor
null The icon color in the button. $icon-color-hoverColor
null The icon color in the button on hover. $hover-backgroundColor
null The hover background color of the button. $hover-foregroundColor
null The hover text color of the button. $focus-backgroundColor
null The focus background color of the button. $focus-foregroundColor
null The focus text color of the button. $focus-hover-backgroundColor
null The background color on focus hovered state of the button. $focus-hover-foregroundColor
null The text color on focus hovered state of the button. $focus-visible-backgroundColor
null The focus-visible background color of the button. $focus-visible-foregroundColor
null The focus-visible text color of the button. $active-backgroundColor
null The active background of the button. $active-foregroundColor
null The active text color of the button. $border-radiusList
null The border radius of the button. $border-colorColor
null The border color of the button. $hover-border-colorColor
null The hover border color of the button. $focus-border-colorColor
null The focus border color of the button. $focus-visible-border-colorColor
null The focus-visible border color of the button. $active-border-colorColor
null The active border color of the button. $shadow-colorColor
null The shadow color of the button. $resting-shadowColor
null The shadow of the button in its idle state. $hover-shadowColor
null The shadow of the button in its hover state. $focus-shadowColor
null The shadow of the button in its focus state. $active-shadowColor
null The shadow of the button in its active state. $disabled-backgroundColor
null The disabled background color of the button. $disabled-foregroundColor
null The disabled text color of the button. $disabled-icon-colorColor
null The disabled icon color of the button. $disabled-border-colorColor
null The disabled border color of the button. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.
ExampleChange the background and text colors in contained buttons
$my-button-theme: contained-button-theme(
$foreground: white,
$background: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color of the button. $foregroundColor
null The text color of the button. $icon-colorColor
null The icon color in the button. $icon-color-hoverColor
null The icon color in the button on hover. $hover-backgroundColor
null The hover background color of the button. $hover-foregroundColor
null The hover text color of the button. $focus-backgroundColor
null The focus background color of the button. $focus-foregroundColor
null The focus text color of the button. $focus-hover-backgroundColor
null The background color on focus hovered state of the button. $focus-hover-foregroundColor
null The text color on focus hovered state of the button. $focus-visible-backgroundColor
null The focus-visible background color of the button. $focus-visible-foregroundColor
null The focus-visible text color of the button. $active-backgroundColor
null The active background of the button. $active-foregroundColor
null The active text color of the button. $border-radiusList
null The border radius of the button. $border-colorColor
null The border color of the button. $hover-border-colorColor
null The hover border color of the button. $focus-border-colorColor
null The focus border color of the button. $focus-visible-border-colorColor
null The focus-visible border color of the button. $active-border-colorColor
null The active border color of the button. $shadow-colorColor
null The shadow color of the button. $resting-shadowColor
null The shadow of the button in its idle state. $hover-shadowColor
null The shadow of the button in its hover state. $focus-shadowColor
null The shadow of the button in its focus state. $active-shadowColor
null The shadow of the button in its focus state. $disabled-backgroundColor
null The disabled background color of the button. $disabled-foregroundColor
null The disabled text color of the button. $disabled-icon-colorColor
null The disabled icon color of the button. $disabled-border-colorColor
null The disabled border color of the button. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.
ExampleChange the background and text colors in fab buttons
$my-button-theme: fab-button-theme(
$foreground: white,
$background: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color of the button. $foregroundColor
null The text color of the button. $icon-colorColor
null The icon color in the button. $icon-color-hoverColor
null The icon color in the button on hover. $hover-backgroundColor
null The hover background color of the button. $hover-foregroundColor
null The hover text color of the button. $focus-backgroundColor
null The focus background color of the button. $focus-foregroundColor
null The focus text color of the button. $focus-hover-backgroundColor
null The background color on focus hovered state of the button. $focus-hover-foregroundColor
null The text color on focus hovered state of the button. $focus-visible-backgroundColor
null The focus-visible background color of the button. $focus-visible-foregroundColor
null The focus-visible text color of the button. $active-backgroundColor
null The active background of the button. $active-foregroundColor
null The active text color of the button. $border-radiusList
null The border radius of the button. $border-colorColor
null The border color of the button. $hover-border-colorColor
null The hover border color of the button. $focus-border-colorColor
null The focus border color of the button. $focus-visible-border-colorColor
null The focus-visible border color of the button. $active-border-colorColor
null The active border color of the button. $shadow-colorColor
null The shadow color of the button. $resting-shadowColor
null The shadow of the button in its idle state. $hover-shadowColor
null The shadow of the button in its hover state. $focus-shadowColor
null The shadow of the button in its focus state. $active-shadowColor
null The shadow of the button in its focus state. $disabled-backgroundColor
null The disabled background color of the button. $disabled-foregroundColor
null The disabled text color of the button. $disabled-icon-colorColor
null The disabled icon color of the button. $disabled-border-colorColor
null The disabled border color of the button. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.
ExampleChange the text colors in flat buttons
$my-button-theme: flat-button-theme(
$foreground: black,
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color of the button. $foregroundColor
null The text color of the button. $icon-colorColor
null The icon color in the button. $icon-color-hoverColor
null The icon color in the button on hover. $hover-backgroundColor
null The hover background color of the button. $hover-foregroundColor
null The hover text color of the button. $focus-backgroundColor
null The focus background color of the button. $focus-foregroundColor
null The focus text color of the button. $focus-hover-backgroundColor
null The background color on focus hovered state of the button. $focus-hover-foregroundColor
null The text color on focus hovered state of the button. $focus-visible-backgroundColor
null The focus-visible background color of the button. $focus-visible-foregroundColor
null The focus-visible text color of the button. $active-backgroundColor
null The active background of the button. $active-foregroundColor
null The active text color of the button. $border-radiusList
null The border radius of the button. $border-colorColor
null The border color of the button. $hover-border-colorColor
null The hover border color of the button. $focus-border-colorColor
null The focus border color of the button. $focus-visible-border-colorColor
null The focus-visible border color of the button. $active-border-colorColor
null The active border color of the button. $shadow-colorColor
null The shadow color of the button. $resting-shadowColor
null The shadow of the button in its idle state. $hover-shadowColor
null The shadow of the button in its hover state. $focus-shadowColor
null The shadow of the button in its focus state. $active-shadowColor
null The shadow of the button in its focus state. $disabled-backgroundColor
null The disabled background color of the button. $disabled-foregroundColor
null The disabled text color of the button. $disabled-icon-colorColor
null The disabled icon color of the button. $disabled-border-colorColor
null The disabled border color of the button. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.
ExampleChange the text colors in outlined buttons
$my-button-theme: outlined-button-theme(
$foreground: black,
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color of the button. $foregroundColor
null The text color of the button. $icon-colorColor
null The icon color in the button. $icon-color-hoverColor
null The icon color in the button on hover. $hover-backgroundColor
null The hover background color of the button. $hover-foregroundColor
null The hover text color of the button. $focus-backgroundColor
null The focus background color of the button. $focus-foregroundColor
null The focus text color of the button. $focus-hover-backgroundColor
null The background color on focus hovered state of the button. $focus-hover-foregroundColor
null The text color on focus hovered state of the button. $focus-visible-backgroundColor
null The focus-visible background color of the button. $focus-visible-foregroundColor
null The focus-visible text color of the button. $active-backgroundColor
null The active background of the button. $active-foregroundColor
null The active text color of the button. $border-radiusList
null The border radius of the button. $border-colorColor
null The border color of the button. $hover-border-colorColor
null The hover border color of the button. $focus-border-colorColor
null The focus border color of the button. $focus-visible-border-colorColor
null The focus-visible border color of the button. $active-border-colorColor
null The active border color of the button. $shadow-colorColor
null The shadow color of the button. $resting-shadowColor
null The shadow of the button in its idle state. $hover-shadowColor
null The shadow of the button in its hover state. $focus-shadowColor
null The shadow of the button in its focus state. $active-shadowColor
null The shadow of the button in its focus state. $disabled-backgroundColor
null The disabled background color of the button. $disabled-foregroundColor
null The disabled text color of the button. $disabled-icon-colorColor
null The disabled icon color of the button. $disabled-border-colorColor
null The disabled border color of the button. # view code open_in_newIf only header background color is specified, that color will be used as the leading color for all accented elements, such as: - current date color - selected date background - picker elements hover colors - year/month hover/selected colors If only background colors are specified, text/icon colors will be assigned automatically to a contrasting color.
ExampleChange the header and content background colors
$my-calendar-theme: calendar-theme(
$header-background: purple,
$content-background: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-calendar-theme);
Map
$light-material-schema The schema used as basis for styling the component. $content-foregroundColor
null The foreground of the days, months and years views. $content-backgroundColor
null The background of the days, months and years views. $border-sizeColor
null The border size of all calendar views. $header-foregroundColor
null The header foreground. $header-backgroundColor
null The header background. $picker-foregroundColor
null The foreground of the month and year pickers. $picker-backgroundColor
null The background of the month and year pickers. $picker-hover-foregroundColor
null The :hover color of the month and year pickers. $weekday-colorColor
null The color for weekday labels. $inactive-colorColor
null The color for previous and next month dates (visible only if [hideOutsideDays] is set to false(default)). $weekend-colorColor
null The color for weekend days. $week-number-foregroundColor
null The foreground of the week number column. $week-number-backgroundColor
null The background of the week number column. $ym-selected-current-hover-foregroundColor
null The :hover foreground color of the current selected month/year. $ym-selected-current-hover-backgroundColor
null The :hover background color of the current selected month/year. $navigation-colorColor
null The color of the icon button responsible for month navigation. $navigation-hover-colorColor
null The :hover color of the icon button responsible for month navigation. $navigation-focus-colorColor
null The :focus color of the icon button responsible for month navigation. $ym-hover-foregroundColor
null The :hover foreground of the month/year. $ym-hover-backgroundColor
null The :hover background of the month/year. $ym-current-foregroundColor
null The foreground of the current month/year. $ym-current-backgroundColor
null The background of the current month/year. $ym-current-hover-foregroundColor
null The :hover foreground of the current month/year. $ym-current-hover-backgroundColor
null The :hover background of the current month/year. $ym-selected-foregroundColor
null The foreground color of the selected month/year. $ym-selected-backgroundColor
null The background color of the selected month/year. $ym-selected-hover-foregroundColor
null The :hover foreground color of the currently selected month/year. $ym-selected-hover-backgroundColor
null The :hover background color of the currently selected month/year. $ym-selected-current-foregroundColor
null The foreground color of the selected current month/year. $ym-selected-current-backgroundColor
null The background color of the selected current month/year. $ym-selected-current-hover-foregroundColor
null The :hover foreground color of the current selected month/year. $ym-selected-current-hover-backgroundColor
null The :hover background color of the current selected month/year. $ym-current-outline-colorColor
null The outline color of the current month/year. $ym-current-outline-hover-colorColor
null The :hover outline color of the current month/year. $ym-current-outline-focus-colorColor
null The :focus outline color of the current month/year. $ym-selected-outline-colorColor
null The outline color of the selected month/year. $ym-selected-hover-outline-colorColor
null The :hover outline color of the selected month/year. $ym-selected-focus-outline-colorColor
null The :focus outline color of the selected month/year. $ym-selected-current-outline-colorColor
null The outline color of the selected current month/year. $ym-selected-current-outline-hover-colorColor
null The :hover outline color of the selected current month/year. $ym-selected-current-outline-focus-colorColor
null The :focus outline color of the selected current month/year. $date-hover-foregroundColor
null The :hover foreground in idle state of a date. $date-hover-backgroundColor
null The :hover background in idle state of a date. $date-focus-foregroundColor
null The :focus foreground in idle state of a date. $date-focus-backgroundColor
null The :focus background in idle state of a date. $date-selected-foregroundColor
null The text color for the selected date. $date-selected-backgroundColor
null The background color for the selected date. $date-selected-hover-backgroundColor
null The hover background color for the selected date. $date-selected-focus-backgroundColor
null The focus background color for the selected date. $date-selected-hover-foregroundColor
null The hover text color for the selected date. $date-selected-focus-foregroundColor
null The focus text color for the selected date. $date-selected-current-backgroundColor
null The background color for the selected/current date. $date-selected-current-hover-backgroundColor
null The hover background color for the selected/current date. $date-selected-current-focus-backgroundColor
null The focus background color for the selected/current date. $date-selected-current-foregroundColor
null The text color for the selected/current date. $date-selected-current-hover-foregroundColor
null The hover text color for the selected/current date. $date-selected-current-focus-foregroundColor
null The focus text color for the selected/current date. $date-selected-range-foregroundColor
null The foreground of the dates in the selected range. $date-selected-range-backgroundColor
null The background of the dates in the selected range. $date-selected-range-hover-foregroundColor
null The :hover foreground of the dates in the selected range. $date-selected-range-hover-backgroundColor
null The :hover background of the dates in the selected range. $date-selected-range-focus-foregroundColor
null The :focus foreground of the dates in the selected range. $date-selected-range-focus-backgroundColor
null The :focus background of the dates in the selected range. $date-selected-current-range-foregroundColor
null The foreground of the current date in the selected range. $date-selected-current-range-backgroundColor
null The background of the current date in the selected range. $date-selected-current-range-hover-foregroundColor
null The :hover foreground of the current date in the selected range. $date-selected-current-range-hover-backgroundColor
null The :hover background of the current date in the selected range. $date-selected-current-range-focus-foregroundColor
null The :focus foreground of the current date in the selected range. $date-selected-current-range-focus-backgroundColor
null The :focus background of the current date in the selected range. $date-selected-special-border-color:Color
null The border color of the selected special date, $date-selected-special-hover-border-color:Color
null The :hover border color of the selected special date, $date-selected-special-focus-border-color:Color
null The :focus border color of the selected special date, $date-current-foregroundColor
null The foreground of the current date. $date-current-backgroundColor
null The background color of the current date. $date-current-hover-foregroundColor
null The :hover text color of the current date. $date-current-hover-backgroundColor
null The :hover background color of the current date. $date-current-focus-foregroundColor
null The :focus text color of the current date. $date-current-focus-backgroundColor
null The :focus background color of the current date. $date-special-backgroundColor
null The background of the dates marked as special. $date-special-foregroundColor
null The foreground of the dates marked as special. $date-special-hover-backgroundColor
null The background of the dates marked as special. $date-special-hover-foregroundColor
null The foreground of the dates marked as special. $date-special-focus-backgroundColor
null The background of the dates marked as special. $date-special-focus-foregroundColor
null The foreground of the dates marked as special. $date-special-border-colorColor
null The outline of the dates marked as special. $date-special-range-backgroundColor
null The background of the dates inside a range and marked as special. $date-special-range-hover-backgroundColor
null The :hover background of the dates inside a range and marked as special. $date-special-range-focus-backgroundColor
null The :focus background of the dates inside a range and marked as special. $date-special-range-foregroundColor
null The foreground of the dates inside a range and marked as special. $date-special-range-border-colorColor
null The outline of the dates inside a range and marked as special. $border-colorColor
null The calendar border color. $date-border-colorColor
null The border color of the date. $date-hover-border-colorColor
null The :hover border color of the date. $date-focus-border-colorColor
null The :focus border color of the date. $date-selected-border-colorColor
null The border color of the selected date. $date-selected-hover-border-colorColor
null The :hover border color of the selected date. $date-selected-focus-border-colorColor
null The :focus border color of the selected date. $date-current-border-colorColor
null The border color of the current date. $date-current-hover-border-colorColor
null The :hover border color of the current date. $date-current-focus-border-colorColor
null The :focus border color of the current date. $date-selected-current-border-colorColor
null The border color of the selected current date. $date-selected-current-hover-border-colorColor
null The :hover border color of the selected current date. $date-selected-current-focus-border-colorColor
null The :focus border color of the selected current date. $date-range-border-colorColor
null The border color of range selection. $date-range-preview-border-colorColor
null The border color of the range selection in preview state(visible before selecting the end of the range). $date-disabled-foregroundColor
color: ('gray', 500, .5) The foreground color of disabled dates. $date-disabled-range-foregroundColor
color: ('gray', 500) The foreground color of disabled dates. $sizeNumber
null The size of the days, months, and years views. $border-radiusList
null The border radius used for the calendar. $date-border-radiusList
null The border radius used for the date. $date-range-border-radiusList
null The border radius used for the date range selection. $date-current-border-radiusList
null The border radius used for the current date . $date-special-border-radiusList
null The border radius used for the special date. $ym-border-radiusList
null The border radius used for the month/year. $actions-divider-colorColor
null The border color used for the date-picker actions divider. # view code open_in_new ExampleChange the background and content text colors in card
$my-card-theme: card-theme($background: #fff);
// Pass the theme to the css-vars() mixin
@include css-vars($my-card-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The card background color. $outline-colorColor
null The color of the outline for outlined type cards. $header-text-colorColor
null The text color of the card title. $subtitle-text-colorColor
null The text color of the card subtitle. $content-text-colorColor
null The text color of the card content. $actions-text-colorColor
null The text color of the card buttons. $resting-shadowbox-shadow
null The shadow of the card in its resting state. $hover-shadowbox-shadow
null The shadow of the card in its hover state. $border-radiusList
null The border radius used for card component. # view code open_in_new ExampleChange the previous/next button colors
$my-carousel-theme: carousel-theme(
$button-background: black,
$button-hover-background: white
);
// Pass the carousel theme to the css-vars() mixin
@include css-vars($my-carousel-theme);
Map
$light-material-schema The schema used as basis for styling the component. $slide-backgroundColor
null The slide background color. $button-backgroundColor
null The previous/next buttons idle background color. $button-hover-backgroundColor
null The previous/next buttons hover background color. $button-disabled-backgroundColor
null The previous/next buttons disabled background color. $button-arrow-colorColor
null The previous/next buttons idle arrow color. $button-hover-arrow-colorColor
null The previous/next buttons hover arrow color. $button-disabled-arrow-colorColor
null The previous/next buttons disabled arrow color. $button-border-colorColor
null The previous/next buttons idle border color. $button-hover-border-colorColor
null The previous/next buttons hover border color. $button-focus-border-colorColor
null The navigation buttons border color on focus. $button-disabled-border-colorColor
null The previous/next buttons disabled border color. $indicator-backgroundColor
null The indicators container background color. $label-indicator-backgroundColor
null The label indicator container background color. $indicator-dot-colorColor
null The idle indicator dot color. $indicator-hover-dot-colorColor
null The hover indicator dot color. $indicator-focus-colorColor
null The indicators border and dot color on focus. $indicator-border-colorColor
null The idle indicator border color. $indicator-active-dot-colorColor
null The active indicator dot color. $indicator-active-border-colorColor
null The active indicator border color. $indicator-active-hover-dot-colorColor
null The active indicator dot color on hover. $button-shadowbox-shadow
null Shadow underneath the previous/next buttons. $border-radiusList
null The border radius used for carousel component. # view code open_in_newCheckbox Theme
ExampleChange the checked fill color
$my-checkbox-theme: igx-checkbox-theme($fill-color: magenta);
// Pass the theme to the css-vars mixin
@include css-vars($my-checkbox-theme);
Map
$light-material-schema The schema used as basis for styling the component. $label-colorColor
null The text color used for the label text. $label-color-hoverColor
null The text color used for the label text on hover. $empty-colorColor
null The unchecked border color. $empty-color-hoverColor
null The unchecked border color on hover. $empty-fill-colorColor
null The unchecked fill color. $fill-colorColor
null The checked border and fill colors. $fill-color-hoverColor
null The checked border and fill colors on hover. $tick-colorColor
null The checked mark color. $tick-color-hoverColor
null The checked mark color on hover. $disabled-colorColor
null The disabled border and fill colors. $disabled-tick-colorColor
null The checked mark color in disabled state. $disabled-indeterminate-colorColor
null The disabled border and fill colors in indeterminate state. $disabled-color-labelColor
null The disabled label color. $border-radiusList
null The border radius used for checkbox component. $border-radius-rippleList
null The border radius used for checkbox ripple. $focus-outline-colorColor
null The focus outlined color. $focus-outline-color-focusedColor
null The focus outlined color for focused state. $focus-border-colorColor
null The focus border color. $error-colorColor
null The border and fill colors in invalid state. $error-color-hoverColor
null The border and fill colors in invalid state on hover. $focus-outline-color-errorColor
null The focus outline error color. Set to light when the surrounding area is dark. # view code open_in_newChip Theme
ExampleChange the background color
$my-chip-theme: igx-chip-theme($background: black);
// Pass the theme to the css-vars mixin
@include css-vars($my-chip-theme);
Map
$light-material-schema The schema used as basis for styling the component. $border-radiusList
null The chip border-radius. $text-colorColor
null The chip text color. $backgroundColor
null The chip background color. $border-colorColor
null The chip border color. $disabled-text-colorColor
null The disabled chip text color. $disabled-backgroundColor
null The disabled chip background color. $disabled-border-colorColor
null The disabled chip border color. $ghost-backgroundColor
null The chip ghost background color. $ghost-shadowbox-shadow
null The chip ghost shadow. $hover-text-colorColor
null The chip text hover color. $hover-backgroundColor
null The chip hover background color. $hover-border-colorColor
null The chip hover border color. $focus-text-colorColor
null The chip text focus color. $focus-backgroundColor
null The chip focus background color. $focus-border-colorcolor
null The chip focus border color. $selected-text-colorcolor
null The selected chip text color. $selected-backgroundcolor
null The selected chip background color. $selected-border-colorcolor
null The selected chip border color. $hover-selected-text-colorcolor
null The selected chip hover text color. $hover-selected-backgroundcolor
null The selected chip hover background color. $hover-selected-border-colorcolor
null The selected chip hover border color. $focus-selected-text-colorcolor
null The selected chip text focus color. $focus-selected-backgroundcolor
null The selected chip focus background color. $focus-selected-border-colorcolor
null The selected chip focus border color. $remove-icon-colorcolor
null The remove icon color for the chip. $remove-icon-color-focuscolor
null The remove icon color on focus for the chip. # view code open_in_newColumn actions Theme
ExampleChange the title color
$column-actions-theme: igx-column-actions-theme($title-color: black);
// Pass the theme to the css-vars mixin
@include css-vars($column-actions-theme);
Map
$light-material-schema The schema used as basis for styling the component. $title-colorColor
null The text color used for the title of the list. $background-colorColor
null The background color of the panel. # view code open_in_new ExampleChange the combo empty list background
$my-combo-theme: igx-checkbox-theme($empty-list-background);
// Pass the theme to the css-vars mixin
@include css-vars($my-combo-theme);
Map
$light-material-schema The schema used as basis for styling the component. $search-separator-border-colorColor
null The combo search box separator color. $empty-list-placeholder-colorColor
null The combo placeholder text color. $empty-list-backgroundColor
null The combo list background color. $toggle-button-backgroundColor
null The combo toggle button background color. $toggle-button-background-focusColor
null The combo toggle button background color when the combo is focused in material box variant. $toggle-button-background-focus--borderColor
null The combo toggle button background color when the combo is focused in material border variant. $toggle-button-background-disabledColor
null The combo toggle button background color when the combo is disabled. $toggle-button-foregroundColor
null The combo toggle button foreground color. $toggle-button-foreground-focusColor
null The combo toggle button foreground color when the combo is focused. $toggle-button-foreground-disabledColor
null The combo toggle button foreground color when the combo is disabled. $toggle-button-foreground-filledColor
null The combo toggle button foreground color when the combo is filled. $clear-button-backgroundColor
null The combo clear button background color. $clear-button-background-focusColor
null The combo clear button background color when the combo is focused. $clear-button-foregroundColor
null The combo clear button foreground color. $clear-button-foreground-focusColor
null The combo clear button foreground color when the combo is focused. # view code open_in_new Parameters Name Type Default Description $schemaMap
$light-material-schema The schema used as basis for styling the component. $label-colorcolor
null The color for date range separator label. # view code open_in_newDialog Theme
ExampleChange the background color
$my-dialog-theme: dialog-theme($background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-dialog-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The dialog background color. $title-colorColor
null The dialog title text color. $message-colorColor
null The dialog message text color. $shadowbox-shadow
null The shadow used for the dialog. $border-radiusList
null The border radius used for dialog component. $border-colorColor
null The border color used for dialog component. # view code open_in_new ExampleChange the color of the divider
$my-divider-theme: divider-theme($color: orange);
// Pass the theme to the css-vars() mixin
@include css-vars($my-divider-theme);
Map
$light-material-schema The schema used as basis for styling the component. $colorColor
null The color of the divider. (Gradients are not supported for dashed dividers). $insetnumber
null The inset value of the divider. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color.
ExampleChange the background and icon colors in icon dock-managers
$my-dock-manager-theme: dock-manager-theme();
// Pass the theme to the css-vars() mixin
@include css-vars($my-dock-manager-theme);
Map
$light-material-schema The schema used as basis for styling the component. $accent-colorColor
null Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color. $active-colorColor
null Sets the active text and border colors for tabs, panes, and menus. $border-colorColor
null Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors. $button-textColor
null Sets the button text color. $context-menu-backgroundColor
null Sets the background color for context menus. $context-menu-background-activeColor
null Sets the background color for active context menus. $context-menu-colorColor
null Sets the text color for context menus. $context-menu-color-activeColor
null Sets the text color for active context menus. $dock-backgroundColor
null Sets the background color of the dock manager. $dock-textColor
null Sets the text color of the dock manager. $drop-shadow-backgroundColor
null Sets the drop-shadow background color. $floating-pane-border-colorColor
null Sets the border color for floating panes. $flyout-shadow-colorColor
null Sets the flyout shadow color. $joystick-backgroundColor
null Sets the background color of the joystick. $joystick-background-activeColor
null Sets the background color of the joysticks. $joystick-border-colorColor
null Sets the border color of the joystick. $joystick-icon-colorColor
null Sets the color for the joystick icons. $joystick-icon-color-activeColor
null Sets the color of the active joystick icons. $pane-content-backgroundColor
null Sets the background color of the content panes. $pane-content-textColor
null Sets the text color of the content panes. $pane-header-backgroundColor
null Sets the background color for pane headers. $pane-header-textColor
null Sets the text color for pane headers. $pinned-header-backgroundColor
null Sets the background colors of pinned headers. $pinned-header-textColor
null Sets the text colors of pinned headers. $background-colorColor
null Sets the base dock manager color as well as the pane headers and tabs background colors. $splitter-backgroundColor
null Sets the background color for the splitters. $splitter-handleColor
null Sets the background color for the splitter handles. $tab-backgroundColor
null Sets the background color for tabs. $tab-background-activeColor
null Sets the background color for active tabs. $tab-border-colorColor
null Sets the border color for tabs. $tab-border-color-activeColor
null Sets the border color for active tabs. $tab-textColor
null Sets the text color for tabs. $tab-text-activeColor
null Sets the text color for active tabs. $text-colorColor
null Sets the text color for most elements in the dock manager. Used as the default joystick icon color. # view code open_in_newGenerates a drop-down theme.
ExampleChange the background-color of the dropdown
$my-dropdown-theme: drop-down-theme($background-color: #09f);
// Pass the theme to the css-vars() mixin
@include css-vars($my-dropdown-theme);
Map
$light-material-schema The schema used as basis for styling the component. $background-colorColor
null The drop-down background color. $header-text-colorColor
null The drop-down header text color. $item-text-colorColor
null The drop-down item text color. $item-icon-colorColor
null The drop-down item icon color. $hover-item-text-colorColor
null The drop-down item hover text color. $hover-item-icon-colorColor
null The drop-down item hover icon color. $hover-item-backgroundColor
null The drop-down hover item background color. $focused-item-backgroundColor
null The drop-down focused item background color. $focused-item-text-colorColor
null The drop-down focused item text color. $focused-item-border-colorColor
null The drop-down item focused border color. $selected-item-backgroundColor
null The drop-down selected item background color. $selected-item-text-colorColor
null The drop-down selected item text color. $selected-item-icon-colorColor
null The drop-down selected item icon color. $selected-hover-item-backgroundColor
null The drop-down selected item hover background color. $selected-hover-item-text-colorColor
null The drop-down selected item hover text color. $selected-hover-item-icon-colorColor
null The drop-down selected item hover icon color. $selected-focus-item-backgroundColor
null The drop-down selected item focus background color. $selected-focus-item-text-colorColor
null The drop-down selected item focus text color. $disabled-item-backgroundColor
null The drop-down disabled item background color. $disabled-item-text-colorColor
null The drop-down disabled item text color. $shadowbox-shadow
null Sets a shadow to be used for the drop-down. $border-widthNumber
null The border width used for drop-down component. $border-colorColor
null The border color used for drop-down component. $border-radiusList
null The border radius used for drop-down component. $item-border-radiusList
null The border radius used for drop-down items. # view code open_in_newExpansion panel Theme
ExampleChange the header background color
$my-expansion-panel-theme: expansion-panel-theme($header-background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-expansion-panel-theme);
Map
$light-material-schema The schema used as basis for styling the component. $header-backgroundColor
null The panel header background color. $header-focus-backgroundColor
null The panel header focus background color. $header-title-colorColor
null The panel header title text color. $header-description-colorColor
null The panel header description text color. $header-icon-colorColor
null The panel header icon color. $body-colorColor
null The panel body text color. $body-backgroundColor
null The panel body background color. $disabled-text-colorColor
null The panel disabled text color. $disabled-description-colorColor
null The panel disabled header description text color. $expanded-marginNumber
null The expansion panel margin in expanded state when positioned inside accordion. $border-radiusList
null The border radius used for expansion-panel component. # view code open_in_new ExampleChange the summaries background and labels color
$my-summary-theme: grid-summary-theme(
$background-color: black,
$label-color: white
);
// Pass the theme to the css-vars mixin
@include css-vars($my-summary-theme);
Map
$light-material-schema The schema used as basis for styling the component. $background-colorColor
null The summaries background color is inherited form igx-grid__tfoot $label-colorColor
null The summaries label color. $result-colorColor
null The summaries value/result color. $border-colorColor
null The summaries border color. $pinned-border-widthColor
null The border width of the summary panel. $pinned-border-styleColor
null The border style of the summary panel. $pinned-border-colorColor
null The border color of the summary panel. $label-hover-colorColor
null The summaries hover label color. # view code open_in_new ExampleChange the header background color
$my-grid-theme: grid-theme($header-background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-grid-theme);
Map
$light-material-schema The schema used as basis for styling the component. $header-backgroundColor
null The table header background color. $header-text-colorColor
null The table header text color. $header-border-widthString
null The border width used for header borders. $header-border-styleString
null The border style used for header borders. $header-border-colorColor
null The color used for header borders. $header-selected-backgroundColor
null The table header background color when selected (ex. column selection). $header-selected-text-colorColor
null The table header text color when selected (ex. column selection). $sorted-header-icon-colorColor
null The sort icon color when sorted. $sortable-header-icon-hover-colorcolor
null The icon color on hover in grid header when the column is sortable. $content-backgroundColor
null The table body background color. $content-text-colorColor
null The table body text color. $ghost-header-text-colorColor
null The dragged header text color. $ghost-header-icon-colorColor
null The dragged header icon color. $ghost-header-backgroundColor
null The dragged header background color. $row-odd-backgroundColor
null The background color of odd rows. $row-even-backgroundColor
null The background color of even rows. $row-odd-text-colorColor
null The text color of odd rows. $row-even-text-colorColor
null The text color of even rows. $row-selected-backgroundColor
null The selected row background color. $row-selected-hover-backgroundColor
null The selected row hover background color. $row-selected-text-colorColor
null The selected row text color. $row-selected-hover-text-colorColor
null The selected row hover text color. $row-hover-backgroundColor
null The hover row background color. $row-hover-text-colorColor
null The hover row text color. $row-border-colorColor
null The row bottom border color. $pinned-border-widthString
null The border width of the pinned border. $pinned-border-styleString
null The CSS border style of the pinned border. $pinned-border-colorColor
null The color of the pinned border. $cell-active-border-colorColor
null The border color for the currently active(focused) cell. $cell-selected-backgroundColor
null The selected cell background color. $cell-selected-text-colorColor
null The selected cell text color. $cell-editing-backgroundColor
null The background color of the cell being edited. $cell-editing-foregroundColor
null The cell text color in edit mode. $cell-editing-focus-foregroundColor
null The cell text color in edit mode on focus. $cell-edited-value-colorColor
null The text color of a cell that has been edited. $cell-new-colorColor
null The text color of a new, unedited cell. Used when adding new row in a grid. $cell-disabled-colorColor
null The text color of a disabled cell. $cell-selected-within-backgroundColor
null The background of the selected cell inside a selected row/column. $cell-selected-within-text-colorColor
null The color of the selected cell inside a selected row/column. $edit-mode-colorColor
null The color applied around the row/cell when in editing mode. $edited-row-indicatorColor
null The color applied to the edited row indicator line. $resize-line-colorColor
null The table header resize line color. $drop-indicator-colorColor
null The color applied to the line between the columns when dragging a column. $grouparea-backgroundColor
null The grid group area background color. $grouparea-colorColor
null The grid group area color. $group-row-backgroundColor
null The grid group row background color. $group-row-selected-backgroundColor
null The drop area background on drop color. $group-label-column-name-textColor
null The grid group row column name text color. $group-label-iconColor
null The grid group row icon color. $group-label-textColor
null The grid group row text color. $expand-all-icon-colorColor
null The grid header expand all group rows icon color. $expand-all-icon-hover-colorColor
null The grid header expand all group rows icon hover color. $expand-icon-colorColor
null The grid row expand icon color. $expand-icon-hover-colorColor
null The grid row expand icon hover color. $active-expand-icon-colorColor
null The drop area background on drop color. $active-expand-icon-hover-colorColor
null The drop area background on drop color. $group-count-backgroundColor
null The grid group row cont badge background color. $group-count-text-colorColor
null The grid group row cont badge text color. $drop-area-text-colorColor
null The drop area text color. $drop-area-icon-colorColor
null The drop area icon color. $drop-area-backgroundColor
null The drop area background color. $drop-area-on-drop-backgroundColor
null The drop area background on drop color. $filtering-background-andColor
null The background color of advanced filtering "AND" condition. $filtering-background-and--focusColor
null The background color on focus/selected of advanced filtering "AND" condition. $filtering-background-orColor
null The background color of advanced filtering "OR" condition. $filtering-background-or--focusColor
null The background color on focus/selected of advanced filtering "OR" condition. $filtering-header-backgroundColor
null The background color of the filtered column header. $filtering-header-text-colorColor
null The text color of the filtered column header. $filtering-row-backgroundColor
null The background color of the filtering row. $filtering-row-text-colorColor
null The text color of the filtering row. $excel-filtering-header-foregroundColor
null The text color of the header in the excel style filtering. $excel-filtering-subheader-foregroundColor
null The text color of the sorting and moving headers in the excel style filtering. $excel-filtering-actions-foregroundColor
null The text color of the excel style filtering options. $excel-filtering-actions-hover-foregroundColor
null The text color of the excel style filtering options in hover/focus state. $excel-filtering-actions-disabled-foregroundColor
null The text color of the excel style filtering options in disabled state. $tree-filtered-text-colorColor
null Grouping row background color on focus. $summaries-patch-backgroundColor
null The leading summaries patch backround. Used in hierarchical grids. $row-highlightColor
null The grid row highlight indication color. $grid-shadowbox-shadow
null The shadow of the grid. $drag-shadowbox-shadow
null The shadow used for movable elements (ex. column headers). $row-ghost-backgroundcolor
null The dragged row background color. $row-drag-colorcolor
null The row drag handle color. $grid-border-colorColor
null The color of the grid border. $drop-area-border-radiusList
null The border radius used for column drop area. # ExampleChange the toolbar background color
$my-toolbar-theme: grid-toolbar-theme(
$background-color: black
);
// Pass the theme to the css-vars mixin
@include css-vars($my-toolbar-theme);
Map
$light-material-schema The schema used as basis for styling the component. $background-colorColor
null The toolbar background color. $title-text-colorColor
null The toolbar title text color. $dropdown-backgroundColor
null The toolbar drop-down background color. $item-text-colorColor
null The toolbar drop-down item text color. $item-hover-backgroundColor
null The toolbar drop-down item hover background color. $item-hover-text-colorColor
null The toolbar drop-down item hover text color. $item-focus-backgroundColor
null The toolbar drop-down item focus background color. $item-focus-text-colorColor
null The toolbar drop-down item focus text color. $border-colorColor
null The toolbar border-bottom color. # view code open_in_newIf only background color(s) specified, text color(s) will be assigned automatically to a contrasting color.
ExampleChange the background and icon colors in icon highlight
$my-highlight-theme: highlight-theme($resting-background: black, $active-color: white);
// Pass the theme to the css-vars() mixin
@include css-vars($my-highlight-theme);
Map
$light-material-schema The schema used as basis for styling the component. $resting-backgroundColor
null The background color used for the highlight in its resting state. $resting-colorColor
null The text color used for the highlight in its resting state. $active-backgroundColor
null The background color used for the highlight in its active state. $active-colorColor
null The text color used for the highlight in its active state. # view code open_in_new ExampleChange the icon color
$my-icon-theme: icon-theme($color: orange);
// Pass the theme to the css-vars() mixin
@include css-vars($my-icon-theme);
Map
$light-material-schema The schema used as basis for styling the component. $colorColor
null The icon color. $sizeString
null The icon size. $disabled-colorColor
null The disabled icon color. # view code open_in_new ExampleChange the focused border and label colors
$my-input-group-theme: input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink);
// Pass the theme to the css-vars() mixin
@include css-vars($my-input-group-theme);
Map
$light-material-schema The schema used as basis for styling the component. $idle-text-colorColor
null The input text color in the idle state. $filled-text-colorColor
null The input text color in the filled state. $filled-text-hover-colorColor
null The input text color in the filled state on hover. $focused-text-colorColor
null The input text color in the focused state. $disabled-text-colorColor
null The input text color in the disabled state. $helper-text-colorColor
null The helper text color. $input-prefix-colorColor
null The input prefix color in the idle state. $input-prefix-backgroundColor
null The background color of an input prefix in the idle state. $input-prefix-color--filledColor
null The input prefix color in the filled state. $input-prefix-background--filled *Color
- ] - The background color of an input prefix in the filled state. $input-prefix-color--focusedColor
null The input prefix color in the focused state. $input-prefix-background--focusedColor
null The background color of an input prefix in the focused state. $input-suffix-colorColor
null The input suffix color in the idle state. $input-suffix-backgroundColor
null The background color of an input suffix in the idle state. $input-suffix-color--filledColor
null The input suffix color in the filled state. $input-suffix-background-filledColor
null The background color of an input suffix in the filled state. $input-suffix-color--focusedColor
null The input suffix color in the focused state. $input-suffix-background--focusedColor
null The background color of an input suffix in the focused state. $idle-secondary-colorColor
null The label color in the idle state. $focused-secondary-colorColor
null The label color in the focused state. $idle-bottom-line-colorColor
null The bottom line and border colors in the idle state. $hover-bottom-line-colorColor
null The bottom line and border colors in the hover state. $focused-bottom-line-colorColor
null The bottom line and border colors in the focused state. $disabled-bottom-line-colorColor
null The bottom line and border colors in the disabled state. $border-colorColor
null The border color for input groups of type border and fluent. $hover-border-colorColor
null The hover input border for input groups of type border and fluent. $focused-border-colorColor
null The focused input border color for input groups of type border and fluent. $disabled-border-colorColor
null The disabled border color for input groups of type border and fluent. $box-backgroundColor
null The background color of an input group of type box. $box-background-hoverColor
null The background color on hover of an input group of type box. $box-background-focusColor
null The background color on focus of an input group of type box. $box-disabled-backgroundColor
null The background color of an input group of type box in the disabled state. $border-backgroundColor
null The background color of an input group of type border. $border-disabled-backgroundColor
null The background color of an input group of type border in the disabled state. $search-backgroundColor
null The background color of an input group of type search. $search-disabled-backgroundColor
null The background color of an input group of type search in the disabled state. $search-resting-shadowbox-shadow
null The shadow color of an input group of type search in its resting state. $search-hover-shadowbox-shadow
null The shadow color of an input group of type search in its hover state. $search-disabled-shadowbox-shadow
null The shadow color of an input group of type search in its disabled state. $success-secondary-colorColor
null The success color used in the valid state. $warning-secondary-colorColor
null The warning color used in the warning state. $error-secondary-colorColor
null The error color used in the error state. $box-border-radiusList
null The border radius used for box input. $border-border-radiusList
null The border radius used for border input. $search-border-radiusList
null The border radius used for search input. $placeholder-colorColor
null The placeholder color of an input group. $hover-placeholder-colorColor
null The placeholder color of an input group on hover. $disabled-placeholder-colorColor
null The disabled placeholder color of an input group. # view code open_in_new Parameters Name Type Default Description $schemaMap
$light-material-schema The schema used as basis for styling the component. $colorMap
null The text color. $disabled-colorMap
null The disabled text color. # view code open_in_new ExampleChange the list background color
$my-list-theme: list-theme($background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-list-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The list background color. $header-backgroundColor
null The list header background color. $header-text-colorColor
null The list header text color. $item-backgroundColor
null The list item background color. $item-background-hoverColor
null The list item hover background color. $item-background-activeColor
null The active list item background color. $item-background-selectedColor
null The selected list item background color. $item-text-colorColor
null The list item text color. $item-text-color-hoverColor
null The list item hover text color. $item-text-color-activeColor
null The active list item text color. $item-text-color-selectedColor
null The selected list item text color. $item-title-colorColor
null The list item title color. $item-title-color-hoverColor
null The list item hover title color. $item-title-color-activeColor
null The active list item title color. $item-title-color-selectedColor
null The selected list item title color. $item-subtitle-colorColor
null The list item subtitle color. $item-subtitle-color-hoverColor
null The list item hover subtitle color. $item-subtitle-color-activeColor
null The active list item subtitle color. $item-subtitle-color-selectedColor
null The selected list item subtitle color. $item-action-colorColor
null The list item action color. $item-action-color-hoverColor
null The list item hover action color. $item-action-color-activeColor
null The active list item action color. $item-action-color-selectedColor
null The selected list item action color. $item-thumbnail-colorColor
null The list item thumbnail color. $item-thumbnail-color-hoverColor
null The list item hover thumbnail color. $item-thumbnail-color-activeColor
null The active list item thumbnail color. $item-thumbnail-color-selectedColor
null The selected list item thumbnail color. $border-radiusList
null The border radius used for list component. $item-border-radiusList
null The border radius used for list item. $border-widthColor
null The list border width. $border-colorNumber
null The list border color. # view code open_in_new ExampleChange the background color
$my-navbar-theme: navbar-theme($background: green);
// Pass the theme to the css-vars() mixin
@include css-vars($my-navbar-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The navbar background color. $text-colorColor
null The navbar text color. $border-colorColor
null The navbar border color. $shadowbox-shadow
null The shadow of the navbar. $idle-icon-colorColor
null The navbar idle icon color. $hover-icon-colorColor
null The navbar hover icon color. $disable-shadowBool
true Sets the navbar shadow visibility. # view code open_in_new ExampleChange the background and item colors
$navdrawer-theme: navdrawer-theme(
$background: #2d313a,
$item-active-background: #ecc256,
$item-icon-color: #ecc256
);
// Pass the theme to the css-vars() mixin
@include css-vars($navdrawer-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The navigation drawer background color. $border-colorColor
null The navigation drawer right border color. $item-header-text-colorColor
null The header's idle text color. $item-text-colorColor
null The item's idle text color. $item-icon-colorColor
null The item's icon color. $item-active-text-colorColor
null The item's active text color. $item-active-backgroundColor
null The item's active background color. $item-active-icon-colorColor
null The item's icon active color. $item-hover-backgroundColor
null The item's hover background color. $item-hover-text-colorColor
null The item's hover text color. $item-hover-icon-colorColor
null The item's hover icon color. $item-disabled-text-colorColor
null The item's disabled text color. $item-disabled-icon-colorColor
null The item's disabled icon color. $shadowColor
null Sets a custom shadow to be used by the drawer. $border-radiusList
null The border radius used for the navdrawer. $item-border-radiusList
null The border radius used for the navdrawer item. # view code open_in_new ExampleChange the background color
$my-overlay-theme: overlay-theme($background-color: rgba(yellow, .74));
// Pass the theme to the css-vars() mixin
@include css-vars($my-overlay-theme);
Map
$light-material-schema The schema used as basis for styling the component. $background-colorColor
null The background color used for modal overlays. # view code open_in_newGrid Paging Theme
ExampleChange the stripes color
$my-paginator-theme: paginator-theme(
$stripes-color: orange
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-paginator-theme);
Map
$light-material-schema The schema used as basis for styling the component. $text-colorColor
currentColor The text color. $background-colorColor
rgba(0, 0, 0, .04) The background color of the paging panel. $border-colorColor
rgba(0, 0, 0, .26) The border color of the paging panel. # view code open_in_new ExampleChange the stripes color
$my-progress-linear-theme: progress-linear-theme(
$stripes-color: orange
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-progress-linear-theme);
Map
$light-material-schema The schema used as basis for styling the component. $track-colorColor
null The main track color. $fill-color-defaultColor
null The track default fill color. $fill-color-dangerColor
null The track danger fill color. $fill-color-warningColor
null The track warning fill color. $fill-color-infoColor
null The track info fill color. $fill-color-successColor
null The track success fill color. $stripes-colorColor
null The track stripes color. $text-colorColor
null The track value text color. $track-border-radiusList
null The border radius fraction, between 0 - 8 to be used fot the progress bar track $track-heightNumber
null The linear progress track height. $strip-sizeNumber
null The linear progress bar strip width. # view code open_in_new ExampleChange the checked dot and border colors
$my-radio-theme: radio-theme($fill-color: magenta);
// Pass the theme to the css-vars() mixin
@include css-vars($my-radio-theme);
Map
$light-material-schema The schema used as basis for styling the component. $label-colorColor
null The text color used for the label text. $label-color-hoverColor
null The text color used for the label text on hover. $empty-colorColor
null The unchecked border color. $empty-fill-colorColor
null The unchecked radio fill color. $fill-colorColor
null The checked border and dot colors. $disabled-colorColor
null The disabled border and dot colors. $disabled-label-colorColor
null The disabled label color. $disabled-fill-colorColor
null The disabled checked border and dot colors. $hover-colorColor
null The border and dot colors on hover. $fill-color-hoverColor
null The checked dot color on hover. $fill-hover-border-colorColor
null The checked border color on hover. $focus-border-colorColor
null The focus border color. $focus-outline-colorColor
null The focus outlined color. $focus-outline-color-filledColor
null The focus outline color when radio is filled. $error-colorColor
null The label, border and dot color in invalid state. $error-color-hoverColor
null The label, border and dot color in invalid state on hover. $focus-outline-color-errorColor
null The focus outline color in invalid state. # view code open_in_new ExampleChange the rating filled symbol color
$my-rating-theme: rating-theme($symbol-full-color: red);
// Pass the theme to the css-vars() mixin
@include css-vars($my-rating-theme);
Map
$light-material-schema The schema used as basis for styling the component. $label-colorColor
null sets the color for the label. $symbol-sizeNumber
null the size of the symbols. $symbol-empty-colorColor
null sets the idle color for the symbol when it is a plane text. $symbol-full-colorColor
null sets the color in selected state for the symbol when it is a plane text. $symbol-empty-filterColor
null the filter(s) used for the empty symbol. $symbol-full-filterColor
null the filter(s) used for the filled symbol. $disabled-label-colorColor
null sets the color for the label in disabled state. $disabled-empty-symbol-colorColor
null sets the idle color for the symbol in disabled state when it is a plane text. $disabled-full-symbol-colorColor
null sets the color for the symbol in selected/disabled state when it is a plane text. # view code open_in_new ExampleChange the color
$my-ripple-theme: igx-ripple-theme($color: yellow);
// Pass the theme to the css-vars() mixin
@include css-vars($my-ripple-theme);
Map
$light-material-schema The schema used as basis for styling the component. $colorColor
null The color of the ripple. #If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
ExampleChange the background and track colors
$my-scrollbar-theme: scrollbar-theme($sb-thumb-bg-color: black, $sb-track-bg-color: gray);
// Pass the theme to the css-vars() mixin
@include css-vars($my-scrollbar-theme);
Color
$light-material-schema The schema used as basis for styling the component. $sb-sizeString | Number
null The size of the scrollbar. $sb-thumb-min-heightString | Number
null The min-height of the thumb. $sb-thumb-bg-colorColor
null The background color of the thumb. $sb-thumb-bg-color-hoverColor
null The :hover background color of the thumb. $sb-thumb-border-colorColor
null The border color of the thumb. $sb-thumb-border-sizeString | Number
null The border size of the thumb. $sb-thumb-border-radiusString | Number
null The border radius of the thumb. $sb-track-bg-colorColor
null The background color of the track. $sb-track-bg-color-hoverColor
null The :hover background color of the track. $sb-track-border-colorColor
null The border color of the track. $sb-track-border-sizeString | Number
null The border size of the track. $sb-corner-bgColor
null The background color of the corner. $sb-corner-border-colorColor
null The border color of the corner. $sb-corner-border-sizeString | Number
null The border size of the corner. # view code open_in_new ExampleChange the select empty list background
$my-select-theme: igx-select-theme($empty-list-background);
// Pass the theme to the css-vars mixin
@include css-vars($my-select-theme);
Map
$light-material-schema The schema used as basis for styling the component. $toggle-button-backgroundColor
null The select toggle button background color. $toggle-button-background-focusColor
null The select toggle button background color when the select is focused. $toggle-button-background-disabledColor
null The select toggle button background color when the select is disabled. $toggle-button-foregroundColor
null The select toggle button foreground color. $toggle-button-foreground-focusColor
null The select toggle button foreground color when the select is focused. $toggle-button-foreground-disabledColor
null The select toggle button foreground color when the select is disabled. $toggle-button-foreground-filledColor
null The select toggle button foreground color when the select is filled. $toggle-button-background-focus--borderColor
null The select toggle button background color when the select is focused in material border variant. # view code open_in_new ExampleSet custom track and thumb on colors
$my-slider-theme: slider-theme($thumb-color: black, $track-color: yellow);
// Pass the theme to the css-vars() mixin
@include css-vars($my-slider-theme);
Map
$light-material-schema The schema used as basis for styling the component. $track-colorColor
null The color of the track. $track-step-colorColor
null The color of the track steps. $track-step-sizeNumber
null The size of the track steps. $track-hover-colorColor
null The color of the track on hover. $thumb-colorColor
null The color of the thumb. $thumb-focus-colorColor
null The focus color of the thumb. $thumb-border-colorColor
null The thumb border color. $thumb-border-hover-colorColor
null The thumb border color when hovered. $thumb-border-focus-colorColor
null The thumb border color when focused. $thumb-disabled-border-colorColor
null The thumb border color when it's disabled. $disabled-thumb-colorColor
null The thumb color when its disabled. $label-background-colorColor
null The background color of the bubble label. $label-text-colorColor
null The text color of the bubble label. $base-track-colorColor
null The base background color of the track. $base-track-hover-colorColor
null The base background color of the track on hover. $disabled-base-track-colorColor
null The base background color of the track when is disabled. $disabled-fill-track-colorColor
null The base background color of the fill track when is disabled. $tick-label-colorColor
null The color of the tick label. $tick-colorColor
null The background-color of the tick. # view code open_in_newIf you specify a background color, but do not specify colors for either the button or the text, their colors will be set automatically to a contrasting color.
ExampleSet a custom background color
$my-snackbar-theme: snackbar-theme($background: white);
// Pass the theme to the css-vars() mixin
@include css-vars($my-snackbar-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color used in the snackbar. $text-colorColor
null The text color used in the snackbar. $button-colorColor
null The button color used in the snackbar. $shadowbox-shadow
null Sets a shadow to be used for the snackbar. $border-radiusList
null The border radius used for the snackbar component. # view code open_in_new ExampleSet custom stepper colors
$my-stepper-theme: stepper-theme($step-hover-background: red);
// Pass the theme to the css-vars() mixin
@include css-vars($my-stepper-theme);
Map
$light-material-schema The schema used as basis for styling the component. $content-foregroundColor
null The foreground of the step content. $step-backgroundColor
null The background of the step header. $step-hover-backgroundColor
null The background of the step header on hover. $step-focus-backgroundColor
null The background of the step header on focus. $title-colorColor
null The color of the step title. $title-hover-colorColor
null The color of the step title on hover. $title-focus-colorColor
null The color of the step title on focus. $subtitle-colorColor
null The color of the step subtitle. $subtitle-hover-colorColor
null The color of the step subtitle on hover. $subtitle-focus-colorColor
null The color of the step subtitle on focus. $indicator-colorColor
null The text color of the step indicator. $indicator-backgroundColor
null The background color of the step indicator. $indicator-outlineColor
null The outline color of the step indicator. $invalid-step-backgroundColor
null The background of the invalid step header. $invalid-step-hover-backgroundColor
null The background of the invalid step header on hover. $invalid-step-focus-backgroundColor
null The background of the invalid step header on focus. $invalid-title-colorColor
null The color of the invalid step title. $invalid-title-hover-colorColor
null The color of the invalid step title on hover. $invalid-title-focus-colorColor
null The color of the invalid step title on focus. $invalid-subtitle-colorColor
null The color of the invalid step subtitle. $invalid-subtitle-hover-colorColor
null The color of the invalid step subtitle on hover. $invalid-subtitle-focus-colorColor
null The color of the invalid step subtitle on focus. $invalid-indicator-colorColor
null The color of the invalid step indicator. $invalid-indicator-backgroundColor
null The background color of the invalid step indicator. $invalid-indicator-outlineColor
null The outline color of the invalid step indicator. $current-step-backgroundColor
null The background of the current step header. $current-step-hover-backgroundColor
null The background of the current step header on hover. $current-step-focus-backgroundColor
null The background of the current step header on focus. $current-title-colorColor
null The color of the current step title. $current-title-hover-colorColor
null The color of the current step title on hover. $current-title-focus-colorColor
null The color of the current step title on focus. $current-subtitle-colorColor
null The color of the current step subtitle. $current-subtitle-hover-colorColor
null The color of the current step subtitle on hover. $current-subtitle-focus-colorColor
null The color of the current step subtitle on focus. $current-indicator-colorColor
null The color of the current step indicator. $current-indicator-backgroundColor
null The background color of the current step indicator. $current-indicator-outlineColor
null The outline color of the current step indicator. $complete-step-backgroundColor
null The background of the complete step header. $complete-step-hover-backgroundColor
null The background of the complete step header on hover. $complete-step-focus-backgroundColor
null The background of the complete step header on focus. $complete-title-colorColor
null The color of the complete step title. $complete-title-hover-colorColor
null The color of the complete step title on hover. $complete-title-focus-colorColor
null The color of the complete step title on focus. $complete-subtitle-colorColor
null The color of the complete step subtitle. $complete-subtitle-hover-colorColor
null The color of the complete step subtitle on hover. $complete-subtitle-focus-colorColor
null The color of the complete step subtitle on focus. $complete-indicator-colorColor
null The color of the completed step indicator. $complete-indicator-backgroundColor
null The background color of the completed step indicator. $complete-indicator-outlineColor
null The outline color of the completed step indicator. $disabled-title-colorColor
null The title color of the disabled step. $disabled-subtitle-colorColor
null The subtitle color of the disabled step. $disabled-indicator-colorColor
null The indicator color of the disabled step. $disabled-indicator-backgroundColor
null The indicator background of the disabled step. $disabled-indicator-outlineColor
null The indicator outline color of the disabled step. $step-separator-colorColor
null The separator border-color of between the steps. $complete-step-separator-colorColor
null The separator border-color between the completed steps. $step-separator-styleColor
null The separator border-style of between the steps. $complete-step-separator-styleColor
null The separator border-style between the completed steps. $border-radius-indicatorList
null The border-radius of the step indicator. $border-radius-step-headerList
null The border-radius of the step header. # view code open_in_new ExampleSet custom track and thumb on colors
$my-switch-theme: switch-theme($thumb-on-color: black, $track-on-color: yellow);
// Pass the theme to the css-vars() mixin
@include css-vars($my-switch-theme);
Map
$light-material-schema The schema used as basis for styling the component. $thumb-on-colorColor
null The color of the thumb when the switch is on. $track-on-colorColor
null The color of the track when the switch is on. $track-on-hover-colorColor
null The color of the track when the switch is on and hovered. $thumb-off-colorColor
null The color of the thumb when the switch is off. $thumb-off-hover-colorColor
null The color of the thumb when the switch is off and hovered. $track-off-colorColor
null The color of the track when the switch is off. $thumb-disabled-colorColor
null The color of the thumb when the switch is disabled. $thumb-on-disabled-colorColor
null The color of the thumb when the switch is on and disabled. $track-disabled-colorColor
null The color of the track when the switch is disabled. $track-on-disabled-colorColor
null The color of the track when the switch is on and disabled. $label-colorColor
null The color of the switch label $label-hover-colorColor
null The color of the switch label on hover. $label-disabled-colorColor
null The color of the switch label when the switch is disabled $resting-shadowbox-shadow
null The shadow used for the thumb in resting state of the switch. $hover-shadowbox-shadow
null The shadow used for the thumb in hover state of the switch. $disabled-shadowbox-shadow
null The shadow used for the thumb in disable state of the switch. $border-radius-trackList
null The border radius used for switch track. $border-radius-thumbList
null The border radius used for switch thumb. $border-radius-rippleList
null The border radius used for switch ripple. $border-colorColor
null The border color of the switch. $border-hover-colorColor
null The border color of the switch on hover. $border-disabled-colorColor
null The border color of the switch when it is disabled. $border-on-colorColor
null The border color when the switch is on. $border-on-hover-colorColor
null The border color when the switch is on and hovered. $focus-outline-colorColor
null The focus outlined color. $focus-outline-color-focusedColor
null The focus outlined color for focused state. $focus-fill-colorColor
null The focus fill color. $focus-fill-hover-colorColor
null The focus fill color on hover. # view code open_in_newIf only background color is specified, the idle item color will be assigned automatically to a contrasting color.
ExampleSet a custom background color
$my-tabs-theme: tabs-theme(
$item-background: orange
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-tabs-theme);
Map
$light-material-schema The schema used as basis for styling the component. $item-text-colorColor
null The color used for the tab text color. $item-backgroundColor
null The background color used for the tabs header. $item-hover-backgroundColor
null The background used for the tabs on hover. $item-hover-colorColor
null The text color used for the tabs on hover. $item-icon-colorColor
null The color used for the tab icon. $item-active-icon-colorColor
null The color used for the active tab icon. $item-hover-icon-colorColor
null The color used for the tab icon on hover. $item-disabled-icon-colorColor
null The color used for the disabled tab icon. $item-active-colorColor
null The color used for the active tabs text. $item-active-backgroundColor
null The color used for the active/focused tab background. $item-disabled-colorColor
null The color used for the disabled tabs text. $indicator-colorColor
null The color used for the active tab indicator. $button-colorColor
null The color used for the button icon/text color. $button-hover-colorColor
null The color used for the button icon/text color on hover. $button-disabled-colorColor
null The color used for the disabled button icon/text. $button-backgroundColor
null The color used for the button background. $button-hover-backgroundColor
null The color used for the button background on hover. $border-radiusList
null The border radius for the tabs. $border-colorColor
null The border color of the tabs. $border-color--hoverColor
null The border color of the tabs on hover. $tab-ripple-colorColor
null The color used for the button background. $button-ripple-colorColor
null The color used for the button background on hover. # view code open_in_newIf only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.
ExampleChange the background and text colors in time picker
$my-time-picker-theme: time-picker-theme(
$text-color: white,
$background-color: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-time-picker-theme);
Map
$light-material-schema The schema used as basis for styling the component. $text-colorColor
null The text color of a open time picker. $hover-text-colorColor
null The hover text color of a open time picker. $selected-text-colorColor
null The text color of a selected item in time picker. $active-item-backgroundColor
null The background color for current item in focused column inside the time picker. $active-item-foregroundColor
null The foreground color for current item in focused column inside the time picker. $disabled-text-colorColor
null The text color for disabled values. $disabled-item-backgroundColor
null The background color for disabled values . $header-backgroundColor
null The header background color of a time picker. $header-hour-text-colorColor
null The header hour text color of a time picker. $background-colorColor
null The time-picker panel background color. $time-item-sizeNumber
null The height of the time item. $divider-colorColor
null The color for the actions area divider. $border-colorColor
null The border color around the time picker. $modal-shadowbox-shadow
null The custom shadow to be used for the time picker in modal mode. $dropdown-shadowbox-shadow
null The custom shadow to be used for the time picker in dropdown mode. $border-radiusList
null The border radius used for the outline of the picker. $active-item-border-radiusList
null The border radius used for the outline of the currently active item (hours, minutes, AM/PM). # view code open_in_newIf only background color is specified, the text-color will be assigned automatically to a contrasting color.
ExampleSet a custom background color
$my-toast-theme: toast-theme($background: green);
// Pass the theme to the css-vars() mixin
@include css-vars($my-toast-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color used for the toast. $text-colorColor
null The text-color used for the toast. $border-colorColor
null The border-color used for the toast. $border-radiusList
null The border radius used for the toast component. $shadowbox-shadow
null Sets a shadow to be used for the toast. #Returns a map containing all style properties related to the theming the tooltip directive.
ExampleChange the tooltip background
$my-tooltip-theme: tooltip-theme($background: magenta);
// Pass the theme to the css-vars() mixin
@include css-vars($my-tooltip-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color of the tooltip. $text-colorColor
null The text color of the tooltip. $border-radiusList
null The border radius used for the tooltip component. $shadowbox-shadow
null Sets a shadow to be used for the tooltip component. # view code open_in_newReturns a map containing all style properties related to the theming of the tree component.
ExampleChange the tree background
$my-tree-theme: tree-theme($background: magenta);
// Pass the theme to the css-vars() mixin
@include css-vars($my-tree-theme);
Map
$light-material-schema The schema used as basis for styling the component. $backgroundColor
null The background color used for the tree node. $foregroundColor
null The color used for the tree node content. $icon-colorColor
null The color used for the tree node icon. $background-selectedColor
null The background color used for the selected tree node. $foreground-selectedColor
null The color used for the content of the selected tree node. $background-activeColor
null The background color used for the active tree node. $foreground-activeColor
null The color used for the content of the active tree node. $background-active-selectedColor
null The background color used for the active selected tree node. $foreground-active-selectedColor
null The color used for the content of the active selected tree node. $background-disabledColor
null The background color used for the tree node in disabled state. $foreground-disabledColor
null The color used for the content of the disabled tree node. $drop-area-colorColor
null The background color used for the tree node drop aria. $border-colorColor
null The outline shadow color used for tree node in focus state. $hover-colorColor
null The background color used for the tree node on hover. $hover-selected-colorColor
null The background color used for the selected tree node on hover. # view code open_in_new warning DeprecatedUse the `css-vars` mixin instead.
Parameters Name Type Default Description $theme *Map
- The theme used to style the component. # view code open_in_new warning DeprecatedUse the `css-vars` mixin instead.
Parameters Name Type Default Description $theme *Map
- The calendar theme used to style the component. # view code open_in_new warning DeprecatedUse the `css-vars` mixin instead.
Parameters Name Type Default Description $theme *Map
- The theme used to style the component. # view code open_in_new warning DeprecatedUse the `css-vars` mixin instead.
Parameters Name Type Default Description $theme *Map
- The theme used to style the component. # view code open_in_new Parameters Name Type Default Description $print-layoutboolean
true Activates the printing styles of the components. $enhanced-accesibilityboolean
false Switches component colors and other properties to more accessible values. # view code open_in_newAdd theme colors as CSS variables to a given scope.
ExampleConvert grid theme colors to css variables
$my-grid-theme grid-theme(
$header-background: red,
$content-background: #222
);
.my-grid {
@include css-vars($my-grid-theme);
}
map
- The component theme to be used. $scopemap
null The CSS variables scope to be used.. # view code open_in_newAdds the required CSS properties so that the scope can react to size changes.
ExampleSample usage
.my-component {
@include sizable();
}
Generates an Ignite UI for Angular global theme.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $schemaMap
$light-material-schema The schema used as basis for styling the components. $excludeList
( ) A list of igx components to be excluded from the global theme styles. $roundnessNumber
null Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components. $elevationBoolean
true Turns on/off elevations for all components in the theme. $elevationsMap
$elevations The elevation map to be used by all component themes. # view code open_in_newA wrapper around the theme mixin. Creates a global material theme that can be used with light backgrounds.
warning Deprecated- Use the theme mixin instead.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $excludeList
( ) A list of ig components to be excluded from the global theme styles. # view code open_in_newA wrapper around the theme mixin. Creates a global material theme that can be used with dark backgrounds.
warning Deprecated- Use the theme mixin instead.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $excludeList
( ) A list of igx components to be excluded from the global theme styles. # view code open_in_newA wrapper around the theme mixin. Creates a global bootstrap-like theme that can be used with light backgrounds.
warning Deprecated- Use the theme mixin instead.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $excludeList
( ) A list of ig components to be excluded from the global theme styles. # view code open_in_newA wrapper around the theme mixin. Creates a global bootstrap-like theme that can be used with dark backgrounds.
warning Deprecated- Use the theme mixin instead.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $excludeList
( ) A list of ig components to be excluded from the global theme styles. # view code open_in_newA wrapper around the theme mixin. Creates a global fluent theme that can be used with light backgrounds.
warning Deprecated- Use the theme mixin instead.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $excludeList
( ) A list of ig components to be excluded from the global theme styles. # view code open_in_newA wrapper around the theme mixin. Creates a global fluent theme that can be used with dark backgrounds.
warning Deprecated- Use the theme mixin instead.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $excludeList
( ) A list of ig components to be excluded from the global theme styles. # view code open_in_newA wrapper around the theme mixin. Creates a global indigo theme that can be used with light backgrounds.
warning Deprecated- Use the theme mixin instead.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $excludeList
( ) A list of ig components to be excluded from the global theme styles. # view code open_in_newA wrapper around the theme mixin. Creates a global indigo theme that can be used with dark backgrounds.
warning Deprecated- Use the theme mixin instead.
Parameters Name Type Default Description $palette *Map
- An palette to be used by the global theme. $excludeList
( ) A list of ig components to be excluded from the global theme styles.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4