/
chips.scss
176 lines (143 loc) · 4.24 KB
/
chips.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
@use '@material/chips/deprecated' as mdc-chips;
@use '@material/ripple' as mdc-ripple;
@use '../../material/core/style/layout-common';
@use '../../cdk/a11y';
@use '../mdc-helpers/mdc-helpers';
@include mdc-chips.without-ripple($query: mdc-helpers.$mat-base-styles-query);
@include mdc-chips.set-core-styles($query: mdc-helpers.$mat-base-styles-query);
.mat-mdc-chip {
// MDC uses a pointer cursor
cursor: default;
&._mat-animation-noopable {
animation: none;
transition: none;
.mdc-chip__checkmark-svg {
transition: none;
}
}
@include a11y.high-contrast(active, off) {
outline: solid 1px;
&:focus {
// Use 2px here since the dotted outline is a little thinner.
outline: dotted 2px;
}
}
}
// The ripple container should match the bounds of the entire chip.
.mat-mdc-chip-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.
border-radius: inherit;
}
// The MDC chip styles related to hover and focus states are intertwined with the MDC ripple styles.
// We currently don't use the MDC ripple due to size concerns, therefore we need to add some
// additional styles to restore these states.
.mdc-chip__ripple {
@include mdc-ripple.target-common($query: structure);
&::after, &::before {
@include layout-common.fill;
content: '';
pointer-events: none;
opacity: 0;
border-radius: inherit;
._mat-animation-noopable & {
transition: none;
}
}
}
// Angular Material supports disabled chips, which MDC does not.
// Dim the disabled chips and stop MDC from changing the icon color on click.
.mat-mdc-chip-disabled.mat-mdc-chip {
opacity: 0.4;
.mat-mdc-chip-trailing-icon, .mat-mdc-chip-row-focusable-text-content {
pointer-events: none;
}
// Do not show state interactions for disabled chips.
.mdc-chip__ripple::after, .mdc-chip__ripple::before {
display: none;
}
}
// Angular Material supports vertically-stacked chips, which MDC does not.
.mat-mdc-chip-set-stacked {
flex-direction: column;
align-items: flex-start;
.mat-mdc-chip {
width: 100%;
}
}
// Add styles for the matChipInputFor input element.
$mat-chip-input-width: 150px;
input.mat-mdc-chip-input {
flex: 1 0 $mat-chip-input-width;
}
// The margin value is set in MDC.
$chip-margin: 4px;
// Don't let the chip margin increase the mat-form-field height.
.mat-mdc-chip-grid {
margin: -$chip-margin;
// Keep the mat-chip-grid height the same even when there are no chips.
input.mat-mdc-chip-input {
margin: $chip-margin;
}
}
.mdc-chip__checkmark-path {
._mat-animation-noopable & {
transition: none;
}
@include a11y.high-contrast(black-on-white, off) {
// SVG colors won't be changed in high contrast mode and since the checkmark is white
// by default, it'll blend in with the background in black-on-white mode. Override the color
// to ensure that it's visible. We need !important, because the theme styles are very specific.
stroke: #000 !important;
}
}
// Needed for the focus indicator.
.mat-mdc-chip-row-focusable-text-content {
position: relative;
}
.mat-mdc-chip-remove {
// Reset the user agent styles in case a button is used.
border: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0;
background: none;
.mat-icon {
width: inherit;
height: inherit;
font-size: inherit;
}
}
.mat-mdc-chip-row-focusable-text-content,
.mat-mdc-chip-remove-icon {
display: flex;
align-items: center;
}
.mat-mdc-chip-content {
display: inline-flex;
}
.mdc-chip--editing {
background-color: transparent;
display: flex;
flex-direction: column;
.mat-mdc-chip-content {
pointer-events: none;
height: 0;
overflow: hidden;
}
}
.mat-chip-edit-input {
cursor: text;
display: inline-block;
}
.mat-mdc-chip-edit-input-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}