File tree Expand file tree Collapse file tree 3 files changed +19
-35
lines changed
Expand file tree Collapse file tree 3 files changed +19
-35
lines changed Original file line number Diff line number Diff line change 11@use ' sass:math' ;
22@use ' sass:map' ;
33@use ' @material/textfield' as mdc-textfield ;
4- @use ' @material/density' as mdc-density ;
54@use ' ../../token-utils' ;
65@use ' ../../../style/sass-utils' ;
76@use ' ../../../theming/theming' ;
@@ -105,12 +104,16 @@ $prefix: (mat, form-field);
105104
106105// Tokens that can be configured through Angular Material's density theming API.
107106@function get-density-tokens ($theme ) {
108- $density-scale : theming .clamp-density (inspection .get-theme-density ($theme ), -4 );
109- $height : mdc-density .prop-value (
110- $density-config : mdc-textfield .$density-config ,
111- $density-scale : inspection .get-theme-density ($theme ),
112- $property-name : height ,
107+ $density-scale : theming .clamp-density (inspection .get-theme-density ($theme ), -5 );
108+ $size-scale : (
109+ 0 : 56px ,
110+ -1 : 52px ,
111+ -2 : 48px ,
112+ -3 : 44px ,
113+ -4 : 40px ,
114+ -5 : 36px ,
113115 );
116+ $height : map .get ($size-scale , $density-scale );
114117 $hide-label : $height < mdc-textfield .$minimum-height-for-filled-label ;
115118
116119 // We computed the desired height of the form-field using the density configuration. The
Original file line number Diff line number Diff line change 11@use ' sass:math' ;
22@use ' sass:map' ;
33@use ' @material/textfield' as mdc-textfield ;
4- @use ' @material/density' as mdc-density ;
54@use ' ../../token-utils' ;
65@use ' ../../../theming/theming' ;
76@use ' ../../../theming/inspection' ;
@@ -51,12 +50,17 @@ $prefix: (mat, paginator);
5150 -4 : 40px ,
5251 -5 : 40px ,
5352 );
54- $form-field-density-scale : if ($density-scale > -4 , -4 , $density-scale );
55- $form-field-height : mdc-density .prop-value (
56- $density-config : mdc-textfield .$density-config ,
57- $density-scale : $form-field-density-scale ,
58- $property-name : height ,
53+ $form-field-size-scale : (
54+ 0 : 56px ,
55+ -1 : 52px ,
56+ -2 : 48px ,
57+ -3 : 44px ,
58+ -4 : 40px ,
59+ -5 : 36px ,
5960 );
61+ $form-field-density-scale : if ($density-scale > -4 , -4 , $density-scale );
62+ $form-field-height : map .get ($form-field-size-scale , $form-field-density-scale );
63+
6064 // We computed the desired height of the form-field using the density configuration. The
6165 // spec only describes vertical spacing/alignment in non-dense mode. This means that we
6266 // cannot update the spacing to explicit numbers based on the density scale. Instead, we
Original file line number Diff line number Diff line change 11@use ' @material/feature-targeting/feature-targeting' ;
2- @use ' @material/density/functions' as density-functions ;
32@use ' @material/list/evolution-mixins' as mdc-list ;
4- @use ' @material/list/evolution-variables' as mdc-list-variables ;
53@use ' ../core/mdc-helpers/mdc-helpers' ;
64
75// For compatibility with the non-MDC selection list, we support avatars that are
5957 }
6058 }
6159}
62-
63- @mixin density-styles ($density-scale ) {
64- $one-line-tall-height : density-functions .prop-value (
65- $density-config : mdc-list-variables .$one-line-item-tall-density-config ,
66- $density-scale : $density-scale ,
67- $property-name : height ,
68- );
69-
70- $two-line-tall-height : density-functions .prop-value (
71- $density-config : mdc-list-variables .$two-line-item-tall-density-config ,
72- $density-scale : $density-scale ,
73- $property-name : height ,
74- );
75-
76- @include mdc-helpers .disable-mdc-fallback-declarations {
77- .mat-mdc-list-option-with-trailing-avatar {
78- @include mdc-list .one-line-item-height ($one-line-tall-height );
79- @include mdc-list .two-line-item-height ($two-line-tall-height );
80- }
81- }
82- }
You can’t perform that action at this time.
0 commit comments