Skip to content

Commit 8a20294

Browse files
committed
bug(focus indicators): Added a new _mat-mdc-core mixin with the MDC focus indicator position style.
1 parent 8d908e5 commit 8a20294

File tree

4 files changed

+15
-11
lines changed

4 files changed

+15
-11
lines changed

src/dev-app/theme.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@
1515
@include angular-material-mdc-typography();
1616
@include mat-edit-typography(mat-typography-config());
1717

18-
// MDC does not yet have an equivalent to `mat-core` to include this in.
19-
@include mat-mdc-strong-focus-indicators-base();
20-
2118
// Include base styles for strong focus indicators.
2219
.demo-strong-focus {
2320
@include mat-strong-focus-indicators();

src/material-experimental/mdc-helpers/_mdc-helpers.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -310,9 +310,9 @@ $mat-typography-level-mappings: (
310310
}
311311
}
312312

313-
/// Mixin that applies base styles required for focus indicators to render appropriately.
314-
/// Should be included once in your app.
315-
@mixin mat-mdc-strong-focus-indicators-base() {
313+
// Mixin that applies base styles required for focus indicators to render appropriately.
314+
// Private mixin included within `_mat-mdc-core`.
315+
@mixin _mat-mdc-strong-focus-indicators-base() {
316316
// Ensure that focus indicator host elements are positioned so that the focus indicator
317317
// pseudo element within is positioned relatively to the host.
318318
.mat-mdc-focus-indicator {

src/material/core/_core.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@
1515
@mixin mat-core($typography-config: null) {
1616
@include angular-material-typography($typography-config);
1717
@include mat-ripple();
18-
@include mat-strong-focus-indicators-base();
1918
@include cdk-a11y();
2019
@include cdk-overlay();
2120
@include cdk-text-field();
21+
22+
@include _mat-strong-focus-indicators-base();
23+
@include _mat-mdc-core();
2224
}
2325

2426
// Mixin that renders all of the core styles that depend on the theme.
@@ -55,3 +57,8 @@
5557
}
5658
}
5759
}
60+
61+
// Mixin that renders all of the core MDC styles.
62+
@mixin _mat-mdc-core() {
63+
@include _mat-mdc-strong-focus-indicators-base();
64+
}

src/material/core/focus-indicators/_focus-indicators.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,10 @@
100100
}
101101
}
102102

103-
/// Mixin that applies base styles required for focus indicators to render appropriately.
104-
/// Automatically included within `mat-core`, should not be directly included in your app.
105-
@mixin mat-strong-focus-indicators-base() {
106-
// Ensure that focus indicator host elements are positioned so that the focus indicator
103+
// Mixin that applies base styles required for focus indicators to render appropriately.
104+
// Private mixin included within `mat-core`.
105+
@mixin _mat-strong-focus-indicators-base() {
106+
// Ensures that focus indicator host elements are positioned so that the focus indicator
107107
// pseudo element within is positioned relatively to the host.
108108
.mat-focus-indicator {
109109
position: relative;

0 commit comments

Comments
 (0)