Skip to content

Commit 369c206

Browse files
committed
fix(list): fixed list icon spacing to work with sass
I'm not sure why, but `sass` renders this as: ``` --rmd-icon-text-spacing: calc( var(--rmd-list-text-keyline, 4.5rem)-var(--rmd-list-item-horizontal-padding, 1rem) - var(--rmd-icon-size, 1.5rem) ); ``` Since there is no space between the two `var` calls in the calc, it treats the value as `0`. This update makes it so `sass` renders this correctly as: ``` --rmd-icon-text-spacing: calc( var(--rmd-list-text-keyline, 4.5rem) - var(--rmd-list-item-horizontal-padding, 1rem) - var(--rmd-icon-size, 1.5rem) ); ``` Note: Added newlines for readability. I also checked the other usage of `calc` + css variables throughout react-md, and all of the others seem to work correctly. Super weird. Closes #1015
1 parent cf8f0cb commit 369c206

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

packages/list/src/_mixins.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -165,12 +165,12 @@
165165
///
166166
/// @param {String|Number} subtract - The amount that should be subracted
167167
@mixin rmd-list-item-addon-spacing($subtract) {
168-
$to-keyline: #{rmd-list-theme-var(text-keyline)} - #{rmd-list-theme-var(
169-
item-horizontal-padding
170-
)};
168+
$keyline: rmd-list-theme-var(text-keyline);
169+
$padding: rmd-list-theme-var(item-horizontal-padding);
170+
171171
@include rmd-icon-theme-update-var(
172172
text-spacing,
173-
calc(#{$to-keyline} - #{$subtract})
173+
calc(#{$keyline} - #{$padding} - #{$subtract})
174174
);
175175
}
176176

0 commit comments

Comments
 (0)