Skip to content


Browse files Browse the repository at this point in the history
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
  • Loading branch information
mlaursen committed Dec 16, 2020
1 parent cf8f0cb commit 369c206
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions packages/list/src/_mixins.scss
Expand Up @@ -165,12 +165,12 @@
/// @param {String|Number} subtract - The amount that should be subracted
@mixin rmd-list-item-addon-spacing($subtract) {
$to-keyline: #{rmd-list-theme-var(text-keyline)} - #{rmd-list-theme-var(
$keyline: rmd-list-theme-var(text-keyline);
$padding: rmd-list-theme-var(item-horizontal-padding);

@include rmd-icon-theme-update-var(
calc(#{$to-keyline} - #{$subtract})
calc(#{$keyline} - #{$padding} - #{$subtract})

Expand Down

0 comments on commit 369c206

Please sign in to comment.