Selection Controls

Variables

md-selection-controls-include-group
$md-selection-controls-include-group: true !default;
Sass (Scss)

Description

Boolean if the very minimal styles for the .md-select-field-group should be included.

Type

Boolean
md-selection-controls-include-switches
$md-selection-controls-include-switches: true !default;
Sass (Scss)

Description

Boolean if the switch styles should be included.

Type

Boolean
md-switch-track-height
$md-switch-track-height: 16px !default;
Sass (Scss)

Description

The height for the switch's track.

Type

Number

Used by

md-switch-track-width
$md-switch-track-width: 40px !default;
Sass (Scss)

Description

The width for the switch's track.

Type

Number

Used by

md-switch-thumb-size
$md-switch-thumb-size: $md-font-icon-size !default;
Sass (Scss)

Description

The size for the switch's thumb.

Type

Number

Used by

md-switch-light-theme-thumb-off
$md-switch-light-theme-thumb-off: $md-grey-50 !default;
Sass (Scss)

Description

The switch's thumb's background color when it has been toggled off in the light theme.

Type

Color

Used by

md-switch-light-theme-track-off
$md-switch-light-theme-track-off: rgba($md-black-base, .38) !default;
Sass (Scss)

Description

The switch's track's background color when it has been toggled off in the light theme.

Type

Color

Used by

md-switch-light-theme-thumb-disabled
$md-switch-light-theme-thumb-disabled: $md-grey-400 !default;
Sass (Scss)

Description

The switch's thumb's background color when it is disabled in the light theme.

Type

Color

Used by

md-switch-light-theme-track-disabled
$md-switch-light-theme-track-disabled: rgba($md-black-base, .12) !default;
Sass (Scss)

Description

The switch's track's background color when it is disabled in the light theme.

Type

Color

Used by

md-switch-dark-theme-thumb-off
$md-switch-dark-theme-thumb-off: $md-grey-400 !default;
Sass (Scss)

Description

The switch's thumb's background color when it has been toggled off in the light theme.

Type

Color

Used by

md-switch-dark-theme-track-off
$md-switch-dark-theme-track-off: rgba($md-white-base, .30) !default;
Sass (Scss)

Description

The switch's track's background color when it has been toggled off in the light theme.

Type

Color

Used by

md-switch-dark-theme-thumb-disabled
$md-switch-dark-theme-thumb-disabled: $md-grey-800 !default;
Sass (Scss)

Description

The switch's thumb's background color when it is disabled in the light theme.

Type

Color

Used by

md-switch-dark-theme-track-disabled
$md-switch-dark-theme-track-disabled: rgba($md-white-base, .1) !default;
Sass (Scss)

Description

The switch's track's background color when it is disabled in the light theme.

Type

Color

Used by

md-switch-ball-fallback-color
$md-switch-ball-fallback-color: null !default;
Sass (Scss)

Description

An optional fallback color to use for the switch's ball when the $md-secondary-color is not a material design color.

Type

Color

Used by

See

Mixins

react-md-selection-controls
@mixin react-md-selection-controls($secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-group: $md-selection-controls-include-group, $include-switches: $md-selection-controls-include-switches, $include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the Selection Controls.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to use

Color
$md-secondary-color
$light-theme

Boolean if the selection controls should be styled using the light theme.

Boolean
$md-light-theme
$include-group

Boolean if the minimal styles for the .md-selection-controls-group should be included.

Boolean
$md-selection-controls-include-group
$include-switches

Boolean if the styles for switches should be included.

Boolean
$md-selection-controls-include-switches
$include-dense-icons

boolean if the checkbox and radio controls should be updated for the dense icon spec.

boolean
$md-font-icon-include-dense

Examples

Example Usage SCSS

@include react-md-selection-controls;
Sass (Scss)

Requires

Used by

react-md-selection-controls-switch
@mixin react-md-selection-controls-switch($secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $fallback-color: $md-switch-ball-fallback-color) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the Selection Controls' switch only. The $secondary-color will automatically be switched to the -500 swatch in light themes and the -200 swatch in dark themes.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to use to theme the switches with.

Color
$md-secondary-color
$light-theme

Boolean if the switch should be styled for the light theme.

Boolean
$md-light-theme
$fallback-color

The fallback color to use for the switch's ball when the $md-secondary-color is not a material design color.

Color
$md-switch-ball-fallback-color

Examples

Example Usage SCSS

@include react-md-selection-controls-switch;
Sass (Scss)

Requires

Used by

react-md-selection-controls-mobile
@mixin react-md-selection-controls-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for selection controls on mobile devices.

Parameters

None

Requires

Used by

react-md-selection-controls-desktop
@mixin react-md-selection-controls-desktop($include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the styles for selection controls on desktop displays.

Parameters

NameDescriptionTypeDefault value
$include-dense-icons

boolean if the checkbox and radio controls should be updated for the dense icon spec.

boolean
$md-font-icon-include-dense

Requires

Used by

react-md-selection-controls-media
@mixin react-md-selection-controls-media($include-dense-icons: $md-font-icon-include-dense) {}
Sass (Scss)
Click to expand

Description

Creates the media queries for selection controls for mobile and desktop.

Parameters

NameDescriptionTypeDefault value
$include-dense-icons

boolean if the checkbox and radio controls should be updated for the dense icon spec.

boolean
$md-font-icon-include-dense

Requires

Used by

react-md-theme-selection-controls
@mixin react-md-theme-selection-controls($secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-switches: $md-selection-controls-include-switches, $fallback-color: $md-switch-ball-fallback-color) {}
Sass (Scss)
Click to expand

Description

Themes the selection controls with the new theme variables. It really only modifies the switch styles, so if $include-switches param is false, it does nothing.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme with.

Color
$md-secondary-color
$light-theme

Boolean if updating the theme type to light.

Boolean
$md-light-theme
$include-switches

Boolean if the switches should be included.

Boolean
$md-selection-controls-include-switches
$fallback-color

The fallback color to use for the switch's ball when the $md-secondary-color is not a material design color.

Color
$md-switch-ball-fallback-color

Examples

Example Usage SCSS

@include react-md-theme-selection-control($md-blue-a-200, true);
Sass (Scss)

Requires

Used by

react-md-theme-selection-controls-switch
@mixin react-md-theme-selection-controls-switch($secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $fallback-color: $md-switch-ball-fallback-color) {}
Sass (Scss)
Click to expand

Description

Updates the styles for switches ONLY if

  • the $secondary-color does not equal the $md-secondary-color
  • the $light-theme does not equal the $md-light-theme

The $secondary-color will automatically be updated to be a swatch of -500 for light themes and a swatch of -200 for dark themes.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme with.

Color
$md-secondary-color
$light-theme

Boolean if updating the theme type to light.

Boolean
$md-light-theme
$fallback-color

The fallback color to use for the switch's ball when the $md-secondary-color is not a material design color.

Color
$md-switch-ball-fallback-color

Examples

Example Usage SCSS

@include react-md-theme-selection-controls-switch($md-blue-a-200, true);
Sass (Scss)

Requires

Used by