syntax error in _icons.scss

[Berger92]

calc() cannot take variable names with hypens:

width: calc(100% - $icon-size-xl - 1);

The generated css is therefore invalid, containing $icon-size-xl.

Solution: width: calc(100% - #{$icon-size-xl} - 1); Don't forget to put spaces among the hypens when it is subtraction.

[extrabright]

Hi,

Thanks for the heads up! :+1: I already fixed that. Soon, I will release the update with all the fixes and new features.

[alejandrom2]

Appears as though the issue has not been properly completed as the same hyphen is missing on line 25 etc.

[AarRidho]

Alternatively you can just replace the sass variables in the generated css with

$icon-size-xl to 5rem $icon-size-lg to 4rem $icon-size-sm to 2rem

https://github.com/creativetimofficial/argon-design-system/blob/62db8b2add15308ca83adaf864cc6b6a929d30b7/assets/scss/custom/_variables.scss#L400

[ziming]

This problem is present in all the other argon dashboard themes too (pro or normal). $icon-size-xl is used instead of it's rem value

[xXGoziXx]

This problem also persists on the angular argon dashboard template.

[rarestoma]

Hi,

Thank you for working with our products.

Please replace:

width: calc(100% - $icon-size-xl - 1); with width: calc(100% - #{$icon-size-xl} - 1);

width: calc(100% - $icon-size-lg - 1); with width: calc(100% - #{$icon-size-lg} - 1);

width: calc(100% - $icon-size-sm - 1); with width: calc(100% - #{$icon-size-sm} - 1);

width: calc(100% - $icon-size-xs - 1); with width: calc(100% - #{$icon-size-xs} - 1);

Please let me know if it works.

Thank you, Rares

[xXGoziXx]

Hi,Yeah that fixed. But I just meant that it should probably fixed in the repository.Thanks, xXGoziXx  -------- Original message --------From: rarestoma notifications@github.com Date: 06/05/2020 08:28 (GMT+00:00) To: creativetimofficial/argon-design-system argon-design-system@noreply.github.com Cc: Godstime Osarobo nosarobo@gmail.com, Comment comment@noreply.github.com Subject: Re: [creativetimofficial/argon-design-system] syntax error in _icons.scss (#8) Hi, Thank you for working with our products. Please replace: width: calc(100% - $icon-size-xl - 1); with width: calc(100% - #{$icon-size-xl} - 1); width: calc(100% - $icon-size-lg - 1); with width: calc(100% - #{$icon-size-lg} - 1); width: calc(100% - $icon-size-sm - 1); with width: calc(100% - #{$icon-size-sm} - 1); width: calc(100% - $icon-size-xs - 1); with width: calc(100% - #{$icon-size-xs} - 1); Please let me know if it works. Thank you, Rares

—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe. [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "https://github.com/creativetimofficial/argon-design-system/issues/8#issuecomment-624487062", "url": "https://github.com/creativetimofficial/argon-design-system/issues/8#issuecomment-624487062", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } } ]

[rarestoma]

Hi @xXGoziXx,

We already added it on the list for the next update and I hope we will do it as soon as possible.

Thank you, Rares

[bilalmalkoc]

Any fix without editing source file?