[Bug] Style Issues

[Eonasdan]

Version

1.0.4

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/badge/soft-ui-dashboard

Operating System

Win 11

Device

PC

Browser & Version

Chrome 94

Steps to reproduce

1. Build SCSS

What is expected?

SCSS compiling free from errors.

What is actually happening?

There are numerous errors compiling the scss with the latest (dart) sass.

SassError: Top-level selectors may not contain the parent selector "&".
   ╷
15 │   &.bg-gradient-faded-#{$prop}-vertical{
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\styles\theme\soft_ui\_gradients.scss 15:3         @import
  src\styles\theme\soft_ui\theme.scss 42:9              @import
  src\styles\theme\soft_ui\theme-pro.scss 20:9          @import
  src\styles\theme\soft_ui\soft-ui-dashboard.scss 27:9  @import
  src\styles\styles.scss 46:9                           root stylesheet


/ Generating browser application bundles (phase: building)...WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
272 │   1: $spacer / 4,
    │      ^^^^^^^^^^^
    ╵
    src\styles\theme\soft_ui\_variables.scss 272:6        @import
    src\styles\theme\soft_ui\soft-ui-dashboard.scss 21:9  @import
    src\styles\styles.scss 46:9                           root stylesheet

---

Solution

Additional comments

In additional to the compiling errors, there are lots of accessibility issues. Almost all of the buttons and badges do not meet a proper contrast ratio.

[rarestoma]

Hi @Eonasdan,

Thank you for working with our products and for pointing us this issue. I will add it to the 'to do' list for the next update.

Best regards,
Rares

[OmarAboulMakarem]

how can i solve this problem atm? without waiting your update

i bought the Argon Dashboard 2 pro and cant compile it, and cant work with it

[Eonasdan]

@885522 unfortunately, I had to go through and manually fix this stuff. math.div will take care of the division warnings.

I changed the gradients file to be

@each $prop, $value in $theme-colors {
  .bg-gradient-faded-#{$prop}-vertical{
    background-image: radial-gradient(200px circle at 50% 70%, rgba($value, .3) 0, $value 100%);
  }
}

The difference being .bg-gradient-faded instead of &.bg-gradient-faded. Hope that helps

[OmarAboulMakarem]

It did indeed work that way, thanks alot, i have another question since you have experience with creative-tim stuff,

I am trying to find the best way to minify/concact js and scss files with gulp, what is the best way, as i have compressed all the js files in one single file and uglified it.

But for example the charts aren't working and am getting error that they cant read from charts.js

Also i found out that the source code i got after buying the dashboard isnt the same as the online preview/demo, do you have an idea how can i get the source code of the exact online demo version?

Thanks alot

[Eonasdan]

The pro comes with more widgets compared to the free version. I don't know about the specifics.

I'm using this in an angular project so the bundling is done for me. If you're compressing it with gulp you'd have to point the minified version. You could try asking that question on an unrelated discord server

[pablobaldivieso]

Hello
purchase the PRO product but the css files are free when starting to use them they ask me for the files:
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load source map: Could not load content for https://websystem.com.ar/assets/css/dashboard-pro.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE