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 1
1
@use ' sass:math' ;
2
2
@use ' sass:map' ;
3
3
@use ' @material/textfield' as mdc-textfield ;
4
- @use ' @material/density' as mdc-density ;
5
4
@use ' ../../token-utils' ;
6
5
@use ' ../../../style/sass-utils' ;
7
6
@use ' ../../../theming/theming' ;
@@ -105,12 +104,16 @@ $prefix: (mat, form-field);
105
104
106
105
// Tokens that can be configured through Angular Material's density theming API.
107
106
@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 ,
113
115
);
116
+ $height : map .get ($size-scale , $density-scale );
114
117
$hide-label : $height < mdc-textfield .$minimum-height-for-filled-label ;
115
118
116
119
// We computed the desired height of the form-field using the density configuration. The
Original file line number Diff line number Diff line change 1
1
@use ' sass:math' ;
2
2
@use ' sass:map' ;
3
3
@use ' @material/textfield' as mdc-textfield ;
4
- @use ' @material/density' as mdc-density ;
5
4
@use ' ../../token-utils' ;
6
5
@use ' ../../../theming/theming' ;
7
6
@use ' ../../../theming/inspection' ;
@@ -51,12 +50,17 @@ $prefix: (mat, paginator);
51
50
-4 : 40px ,
52
51
-5 : 40px ,
53
52
);
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 ,
59
60
);
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
+
60
64
// We computed the desired height of the form-field using the density configuration. The
61
65
// spec only describes vertical spacing/alignment in non-dense mode. This means that we
62
66
// cannot update the spacing to explicit numbers based on the density scale. Instead, we
Original file line number Diff line number Diff line change 1
1
@use ' @material/feature-targeting/feature-targeting' ;
2
- @use ' @material/density/functions' as density-functions ;
3
2
@use ' @material/list/evolution-mixins' as mdc-list ;
4
- @use ' @material/list/evolution-variables' as mdc-list-variables ;
5
3
@use ' ../core/mdc-helpers/mdc-helpers' ;
6
4
7
5
// For compatibility with the non-MDC selection list, we support avatars that are
59
57
}
60
58
}
61
59
}
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