/
_button-base.scss
77 lines (69 loc) · 3.34 KB
/
_button-base.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
@use '@material/touch-target' as mdc-touch-target;
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/style/layout-common';
// Adds styles necessary to provide stateful interactions with the button. This includes providing
// content for the state container's ::before and ::after so that they can be given a background
// color and opacity for states like hover, active, and focus. Additionally, adds styles to the
// ripple and state container so that they fill the button, match the border radius, and avoid
// pointer events.
@mixin mat-private-button-interactive() {
.mdc-button__ripple::before, .mdc-button__ripple::after,
.mdc-fab__ripple::before, .mdc-fab__ripple::after {
content: '';
pointer-events: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
border-radius: inherit;
@content;
}
// The ripple container should match the bounds of the entire button.
.mat-mdc-button-ripple, .mdc-button__ripple, .mdc-fab__ripple {
@include layout-common.fill;
// Disable pointer events for the ripple container and state overlay because the container
// will overlay the user content and we don't want to disable mouse events on the user content.
// Pointer events can be safely disabled because the ripple trigger element is the host element.
pointer-events: none;
// Inherit the border radius from the parent so that state overlay and ripples don't exceed the
// parent button boundaries. Note that an inherited border radius does not work properly if
// the actual button element does have a border because it causes the inner content to be
// smaller. We have special logic for stroked buttons to handle this scenario.
border-radius: inherit;
}
// The content should appear over the state and ripple layers, otherwise they may adversely affect
// the accessibility of the text content.
.mdc-button__label {
z-index: 1;
}
// The focus indicator should match the bounds of the entire button.
.mat-mdc-focus-indicator {
@include layout-common.fill();
}
}
// MDC's disabled buttons define a default cursor with pointer-events none. However, they select
// :disabled for this, which does not affect anchor tags.
// TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,
// and note that having pointer-events may have unintended side-effects, e.g. allowing the user
// to click the target underneath the button.
@mixin mat-private-button-disabled() {
&[disabled] {
cursor: default;
pointer-events: none;
}
}
@mixin mat-private-button-touch-target($is-square) {
// Element used to ensure that the button has a touch target that meets the required minimum.
// Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
// class is implemented as `margin-top: 6px; margin-bottom: 6px` on the host element which
// goes against our rule of not having margins on the host node. Furthermore, having the margin on
// the button itself would require us to wrap it in another div. See:
// https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
.mat-mdc-button-touch-target {
@include mdc-touch-target.touch-target(
$set-width: $is-square,
$query: mdc-helpers.$mat-base-styles-query);
}
}