Theme state layer

Variables to customize Material Fields states (hover, focus, active)

$mt-field-hover-outline-width

Sets the hover outline width

Type: size

Default value: $gbc-border-s

Computed value: "2px"

Alias (for compatibility): $theme-hover-border-width

$mt-field-hover-color

Sets the color applied when hovering Material Fields. This color opacity is managed by the mt-field-hover-opacity

Type: color

Default value: $mt-dark-grey

Computed value: "#181818"

Alias (for compatibility): $theme-hover-color

$mt-field-hover-opacity

Sets the hover color opacity (in percent)

Type: number

Default value: "0.1"

Computed value: "0.1"

Alias (for compatibility): $theme-hover-opacity

$mt-field-hover-opacity-on-color

Sets the hover color opacity with a colored background (in percent)

Type: number

Default value: "0.1"

Computed value: "0.1"

Alias (for compatibility): $theme-hover-opacity-on-color

$mt-field-active-border-width

Sets the active outline width

Type: size

Default value: $gbc-border-s

Computed value: "2px"

Alias (for compatibility): $theme-active-border-width

$mt-field-active-color

Sets the color applied when clicking on a Material Field. This color opacity is managed by the mt-field-active-opacity

Type: color

Default value: $ui-primary-color

Computed value: "rgb(11, 121, 209)"

Alias (for compatibility): $theme-active-color

$mt-field-active-opacity

Sets the active color opacity (in percent)

Type: number

Default value: "0.5"

Computed value: "0.5"

Alias (for compatibility): $theme-active-opacity

$mt-field-active-color-on-color

Sets the color applied when clicking on a Material Field with a colored background. This color opacity is managed by the mt-field-active-opacity-on-color

Type: color

Default value: $mt-white

Computed value: "#ffffff"

Alias (for compatibility): $theme-active-color-on-color

$mt-field-active-opacity-on-color

Sets the active color opacity for Material Fields with a colored background (in percent)

Type: number

Default value: "0.5"

Computed value: "0.5"

Alias (for compatibility): $theme-active-opacity-on-color

$mt-field-focus-border-width

Sets the focus outline width

Type: size

Default value: $gbc-border-s

Computed value: "2px"

Alias (for compatibility): $theme-focus-border-width

$mt-field-focus-color

Sets the color applied when focusing a Material Field. This color opacity is managed by the mt-field-focus-opacity

Type: color

Default value: $ui-primary-color

Computed value: "rgb(11, 121, 209)"

Alias (for compatibility): $theme-focus-color

$mt-field-focus-opacity

Sets the focus color opacity (in percent)

Type: number

Default value: "0.9"

Computed value: "0.9"

Alias (for compatibility): $theme-focus-opacity

$mt-field-focus-color-on-color

Sets the color applied when focusing a Material Field with a colored background. This color opacity is managed by the mt-field-focus-opacity-on-color

Type: color

Default value: $mt-white

Computed value: "#ffffff"

Alias (for compatibility): $theme-focus-color-on-color

$mt-field-focus-opacity-on-color

Sets the focus color opacity for Material Fields with a colored background (in percent)

Type: number

Default value: "0.5"

Computed value: "0.5"

Alias (for compatibility): $theme-focus-opacity-on-color

$mt-field-state-animation-duration

Duration of the animation, in seconds, when the Material field state change. (Such as hover, focus and active)

Type: number

Default value: "0.05s"

Computed value: "0.05s"

Alias (for compatibility): $theme-state-animation-duration

$gbc-mt-field-hover-border-width

Border width for material field when hovered

Type: size

Default value: "$mt-field-hover-outline-width - $mt-field-border-width-top"

Computed value: "1px"

$gbc-mt-field-hover-color

Border color for material field when hovered

Type: color

Default value: "color.change($mt-field-hover-color, $alpha: $mt-field-hover-opacity)"

Computed value: "rgba(24, 24, 24, 0.1)"

$gbc-mt-field-focus-border-width

Border width for material field when focused

Type: size

Default value: "$mt-field-focus-border-width - $mt-field-border-width-top"

Computed value: "1px"

$gbc-mt-field-focus-color

Border color for material field when focused

Type: color

Default value: "color.change($mt-field-focus-color, $alpha: $mt-field-focus-opacity)"

Computed value: "rgba(11, 121, 209, 0.9)"

$gbc-mt-field-active-border-width

Border width for material field when clicked

Type: size

Default value: "$mt-field-focus-border-width - $mt-field-border-width-top"

Computed value: "1px"

$gbc-mt-field-active-color

Border color for material field when clicked

Type: color

Default value: "color.change($mt-field-active-color, $alpha: $mt-field-active-opacity)"

Computed value: "rgba(11, 121, 209, 0.5)"