@@ -226,12 +226,12 @@ DOM and CSS of the components, you may need to tweak some of your application's
226
226
* ` <mat-card-content> ` no longer sets any typography styles, users are free to add whatever
227
227
typography styles make sense for their application, either to ` <mat-card-content> ` itself or any
228
228
child elements as appropriate. For example:
229
-
229
+
230
230
``` scss
231
231
@use ' @angular/material' as mat ;
232
232
@include mat .typography-hierarchy ();
233
233
```
234
-
234
+
235
235
``` html
236
236
<mat-card >
237
237
<mat-card-content class =" mat-body-1" >...</mat-card-content >
@@ -246,12 +246,12 @@ DOM and CSS of the components, you may need to tweak some of your application's
246
246
247
247
* Checkbox touch targets are larger, now 40px instead of 16px, which is more accessible. Be sure to
248
248
allow enough space in your layout so that the touch target does not overlap other components. If
249
- you are not concerned with accessibility you can match the previous size by using density -5 for
249
+ you are not concerned with accessibility you can match the previous size by using density -1 for
250
250
the checkbox.
251
-
251
+
252
252
``` scss
253
253
@use ' @angular/material' as mat ;
254
- @include mat .checkbox-density (-5 px );
254
+ @include mat .checkbox-density (-1 );
255
255
```
256
256
257
257
* Checkbox color may be changed to white or black due to a change in heuristics based on the
@@ -461,11 +461,11 @@ DOM and CSS of the components, you may need to tweak some of your application's
461
461
462
462
* The touch target is now much larger and more accessible. Be sure to allow enough space in your
463
463
layout so that the touch target does not overlap other components. If you are not concerned with
464
- accessibility you can match the previous size by using density -5 for the radio.
464
+ accessibility you can match the previous size by using density -1 for the radio.
465
465
466
466
```scss
467
467
@use '@angular/material' as mat;
468
- @include mat.radio-density(-5px );
468
+ @include mat.radio-density(-1 );
469
469
```
470
470
471
471
### Select
@@ -491,11 +491,11 @@ DOM and CSS of the components, you may need to tweak some of your application's
491
491
492
492
* The touch target is much larger and more accessible. Be sure to allow enough space in your
493
493
layout so that the touch target does not overlap other components. If you are not concerned with
494
- accessibility you can match the previous size by using density -5 for the slide-toggle.
494
+ accessibility you can match the previous size by using density -1 for the slide-toggle.
495
495
496
496
``` scss
497
497
@use ' @angular/material' as mat ;
498
- @include mat .slide-toggle-density (-5 px );
498
+ @include mat .slide-toggle-density (-1 );
499
499
```
500
500
501
501
* The label is closer to the enabled toggle
@@ -532,7 +532,7 @@ DOM and CSS of the components, you may need to tweak some of your application's
532
532
<input matSliderThumb >
533
533
</mat-slider >
534
534
```
535
-
535
+
536
536
* The ` tickInterval ` property has been removed. To switch to the new API, use ` showTickMarks ` to
537
537
create a slider with tick marks, and the interval for your tick marks will match your slider's
538
538
` step ` . The ` tickInterval ` property is under consideration to be added back in future releases.
0 commit comments