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