forked from angular/components
/
button.scss
76 lines (67 loc) · 2.69 KB
/
button.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
@use '@material/button/button' as mdc-button;
@use '@material/button/variables' as mdc-button-variables;
@use '../mdc-helpers/mdc-helpers';
@use '../../cdk/a11y';
@use 'button-base';
@include mdc-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
.mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
@include button-base.mat-private-button-interactive();
@include button-base.mat-private-button-disabled();
@include button-base.mat-private-button-touch-target(false);
}
// MDC expects button icons to contain this HTML content:
// ```html
// <span class="mdc-button__icon material-icons">favorite</span>
// ```
// However, Angular Material expects a `mat-icon` instead. The following
// mixins will style the icons appropriately.
.mat-mdc-button {
.mat-icon {
@include mdc-button.icon();
}
.mdc-button__label + .mat-icon {
@include mdc-button.icon-trailing();
}
}
.mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
// Icons inside contained buttons have different styles due to increased button padding
.mat-icon {
@include mdc-button.icon();
@include mdc-button.icon-contained();
}
.mdc-button__label + .mat-icon {
@include mdc-button.icon-contained-trailing();
}
}
// Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs
// don't need a special look in high-contrast mode, because those already have an outline.
.mat-mdc-button:not(.mdc-button--outlined),
.mat-mdc-unelevated-button:not(.mdc-button--outlined),
.mat-mdc-raised-button:not(.mdc-button--outlined),
.mat-mdc-outlined-button:not(.mdc-button--outlined),
.mat-mdc-icon-button {
@include a11y.high-contrast(active, off) {
outline: solid 1px;
}
}
@include a11y.high-contrast(active, off) {
.mat-mdc-button-base:focus {
outline: solid 3px;
}
}
// Since the stroked button has has an actual border that reduces the available space for
// child elements such as the ripple container or focus overlay, an inherited border radius
// for the absolute-positioned child elements does not work properly. This is because the
// child element cannot expand to the same boundaries as the parent element with a border.
// In order to work around this issue by *not* hiding overflow, we adjust the child elements
// to fully cover the actual button element. This means that the border-radius would be correct
// then. See: https://github.com/angular/components/issues/13738
.mat-mdc-outlined-button .mat-mdc-button-ripple,
.mat-mdc-outlined-button .mdc-button__ripple {
$offset: -(mdc-button-variables.$outlined-border-width);
top: $offset;
left: $offset;
bottom: $offset;
right: $offset;
border: none;
}