You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.9 KiB
132 lines
3.9 KiB
@use 'sass:map';
|
|
@use '../core/theming/theming';
|
|
@use '../core/typography/typography';
|
|
@use '../core/typography/typography-utils';
|
|
|
|
|
|
@mixin color($config-or-theme) {
|
|
$config: theming.get-color-config($config-or-theme);
|
|
$is-dark-theme: map.get($config, is-dark);
|
|
$primary: map.get($config, primary);
|
|
$accent: map.get($config, accent);
|
|
$warn: map.get($config, warn);
|
|
$background: map.get($config, background);
|
|
$foreground: map.get($config, foreground);
|
|
|
|
|
|
// The color of the checkbox's checkmark / mixedmark.
|
|
$checkbox-mark-color: theming.get-color-from-palette($background, background);
|
|
|
|
// NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
|
|
// this does not work well with elements layered on top of one another. To get around this we
|
|
// blend the colors together based on the base color and the theme background.
|
|
$white-30pct-opacity-on-dark: #686868;
|
|
$black-26pct-opacity-on-light: #b0b0b0;
|
|
$disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
|
|
|
|
.mat-checkbox-frame {
|
|
border-color: theming.get-color-from-palette($foreground, secondary-text);
|
|
}
|
|
|
|
.mat-checkbox-checkmark {
|
|
fill: $checkbox-mark-color;
|
|
}
|
|
|
|
.mat-checkbox-checkmark-path {
|
|
// !important is needed here because a stroke must be set as an
|
|
// attribute on the SVG in order for line animation to work properly.
|
|
stroke: $checkbox-mark-color !important;
|
|
}
|
|
|
|
.mat-checkbox-mixedmark {
|
|
background-color: $checkbox-mark-color;
|
|
}
|
|
|
|
.mat-checkbox-indeterminate, .mat-checkbox-checked {
|
|
&.mat-primary .mat-checkbox-background {
|
|
background-color: theming.get-color-from-palette($primary);
|
|
}
|
|
|
|
&.mat-accent .mat-checkbox-background {
|
|
background-color: theming.get-color-from-palette($accent);
|
|
}
|
|
|
|
&.mat-warn .mat-checkbox-background {
|
|
background-color: theming.get-color-from-palette($warn);
|
|
}
|
|
}
|
|
|
|
.mat-checkbox-disabled {
|
|
&.mat-checkbox-checked,
|
|
&.mat-checkbox-indeterminate {
|
|
.mat-checkbox-background {
|
|
background-color: $disabled-color;
|
|
}
|
|
}
|
|
|
|
&:not(.mat-checkbox-checked) {
|
|
.mat-checkbox-frame {
|
|
border-color: $disabled-color;
|
|
}
|
|
}
|
|
|
|
.mat-checkbox-label {
|
|
color: theming.get-color-from-palette($foreground, secondary-text);
|
|
}
|
|
}
|
|
|
|
// Switch this to a solid color since we're using `opacity`
|
|
// to control how opaque the ripple should be.
|
|
.mat-checkbox .mat-ripple-element {
|
|
background-color: map.get(map.get($config, foreground), base);
|
|
}
|
|
|
|
.mat-checkbox-checked:not(.mat-checkbox-disabled),
|
|
.mat-checkbox:active:not(.mat-checkbox-disabled) {
|
|
&.mat-primary .mat-ripple-element {
|
|
background: theming.get-color-from-palette($primary);
|
|
}
|
|
|
|
&.mat-accent .mat-ripple-element {
|
|
background: theming.get-color-from-palette($accent);
|
|
}
|
|
|
|
&.mat-warn .mat-ripple-element {
|
|
background: theming.get-color-from-palette($warn);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin typography($config-or-theme) {
|
|
$config: typography.private-typography-to-2014-config(
|
|
theming.get-typography-config($config-or-theme));
|
|
.mat-checkbox {
|
|
font-family: typography-utils.font-family($config);
|
|
}
|
|
|
|
// TODO(kara): Remove this style when fixing vertical baseline
|
|
.mat-checkbox-layout .mat-checkbox-label {
|
|
line-height: typography-utils.line-height($config, body-2);
|
|
}
|
|
}
|
|
|
|
@mixin _density($config-or-theme) {}
|
|
|
|
@mixin theme($theme-or-color-config) {
|
|
$theme: theming.private-legacy-get-theme($theme-or-color-config);
|
|
@include theming.private-check-duplicate-theme-styles($theme, 'mat-checkbox') {
|
|
$color: theming.get-color-config($theme);
|
|
$density: theming.get-density-config($theme);
|
|
$typography: theming.get-typography-config($theme);
|
|
|
|
@if $color != null {
|
|
@include color($color);
|
|
}
|
|
@if $density != null {
|
|
@include _density($density);
|
|
}
|
|
@if $typography != null {
|
|
@include typography($typography);
|
|
}
|
|
}
|
|
}
|