File tree 3 files changed +33
-8
lines changed
3 files changed +33
-8
lines changed Original file line number Diff line number Diff line change
1
+ @mixin mat-private-expansion-focus {
2
+ .mat-expansion-panel {
3
+ & .mat-expansion-panel-header.cdk-keyboard-focused ,
4
+ & .mat-expansion-panel-header.cdk-program-focused ,
5
+ & :not (.mat-expanded ) .mat-expansion-panel-header :hover {
6
+ & :not ([aria-disabled = ' true' ]) {
7
+ @content ;
8
+ }
9
+ }
10
+ }
11
+ }
Original file line number Diff line number Diff line change 4
4
@import ' ../core/style/private' ;
5
5
@import ' ../core/typography/typography-utils' ;
6
6
@import ' ./expansion-variables' ;
7
+ @import ' ./expansion-mixins' ;
7
8
8
9
@mixin mat-expansion-panel-color ($config-or-theme ) {
9
10
$config : mat-get-color-config ($config-or-theme );
20
21
border-top-color : mat-color ($foreground , divider );
21
22
}
22
23
23
- .mat-expansion-panel {
24
- & .mat-expansion-panel-header.cdk-keyboard-focused ,
25
- & .mat-expansion-panel-header.cdk-program-focused ,
26
- & :not (.mat-expanded ) .mat-expansion-panel-header :hover {
27
- & :not ([aria-disabled = ' true' ]) {
28
- background : mat-color ($background , hover );
29
- }
30
- }
24
+ @include mat-private-expansion-focus {
25
+ background : mat-color ($background , hover );
31
26
}
32
27
33
28
// Disable the hover on touch devices since it can appear like it is stuck. We can't use
Original file line number Diff line number Diff line change
1
+ @import ' ../core/style/layout-common' ;
2
+ @import ' ../../cdk/a11y/a11y' ;
1
3
@import ' ./expansion-variables' ;
4
+ @import ' ./expansion-mixins' ;
2
5
3
6
.mat-expansion-panel-header {
4
7
display : flex ;
76
79
transform : rotate (45deg );
77
80
vertical-align : middle ;
78
81
}
82
+
83
+ @include cdk-high-contrast (active , off) {
84
+ @include mat-private-expansion-focus {
85
+ & ::before {
86
+ // These styles are identical to the ones generated for all
87
+ // `.mat-focus-indicator` when strong focus indication is enabled.
88
+ // We have to repeat them, because strong focus is opt-in.
89
+ @include mat-fill ();
90
+ box-sizing : border-box ;
91
+ pointer-events : none ;
92
+ border : 3px solid ;
93
+ border-radius : 4px ;
94
+ content : ' ' ;
95
+ }
96
+ }
97
+ }
You can’t perform that action at this time.
0 commit comments