/
_button-theme-private.scss
55 lines (49 loc) · 2.22 KB
/
_button-theme-private.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/theme/theme' as mdc-theme;
@use '../../material/core/ripple/ripple-theme';
// Selector for the element that has a background color and opacity applied to its ::before and
// ::after for state interactions (hover, active, focus). Their API calls this their
// "ripple target", but we do not use it as our ripple, just state color.
$button-state-target: '.mdc-button__ripple';
$fab-state-target: '.mdc-fab__ripple';
// The MDC button's ripple ink color is based on the theme color, not on the foreground base
// which is what the ripple mixin uses. This creates a new theme that sets the color to the
// foreground base to appropriately color the ink.
@mixin ripple-ink-color($mdc-color) {
@include ripple-theme.theme((
foreground: (
base: mdc-theme-color.prop-value($mdc-color)
),
));
}
// Applies the disabled theme color to the text color.
@mixin apply-disabled-color() {
@include mdc-theme.prop(color,
mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
}
// Wraps the content style in a selector for the disabled state.
// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not
// override this, neither will it apply to anchor tags. This needs to override the
// previously set theme color, so it must be ordered after the theme styles.
// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by
// manually styling disabled buttons with a [disabled] selector.
@mixin apply-disabled-style() {
&[disabled][disabled] {
@content;
}
}
// Applies the disabled theme background color for raised buttons. Value is taken from
// mixin `mdc-button--filled`.
// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
// or otherwise have a mixin we can call to apply this style for both button and anchors.
@mixin apply-disabled-background() {
@include mdc-theme.prop(background-color, rgba(mdc-theme-color.prop-value(on-surface), 0.12));
}
// Hides the touch target on lower densities.
@mixin touch-target-density($scale) {
@if ($scale == -2 or $scale == 'minimum') {
.mat-mdc-button-touch-target {
display: none;
}
}
}