Deprecation Warning: Passing percentage units to the global


Topic: Deprecation Warning: Passing percentage units to the global abs() function is deprecated.

waterandwind pro premium priority asked 10 months ago

Environment

  • name: mdb-vue-ui-kit
  • version: 4.1.1

Using in IntelliJ with Vite PWA.

Expected behavior

There should be no warnings.

Actual behavior

There are warnings for deprecation using abs().

styles.scss

$danger: #C5015A;
$success: #3cff88;

@import "mdb-vue-ui-kit/src/scss/index.pro.dark";
@import url('https://fonts.googleapis.com/css2?family=Exo 2:wght@100..900&display=swap');

$my-theme-primary: #aca1ff; // theme primary color, change this value to customize theme
$my-theme-secondary: #f6b4a2; // theme secondary color, change this value to customize theme

$my-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary);

@include mdb-theme($my-theme);

:root {
  --mdb-body-font-family: "Exo 2";
}

Resources (screenshots, code snippets etc.)

Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

   ╷
57 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\vendor\_rfs.scss 57:14         divide()
    node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\mixins\_grid.scss 72:12        row-cols()
    node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\mixins\_grid.scss 102:13       @content
    node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\mixins\_breakpoints.scss 72:5  media-breakpoint-up()
    node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\mixins\_grid.scss 89:5         make-grid-columns()
    node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\_grid.scss 31:3                @import
    node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.free.scss 21:9                               @import
    node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.pro.scss 2:9                                 @import
    node_modules\mdb-vue-ui-kit\src\scss\index.pro.scss 2:9                                        @import
    node_modules\mdb-vue-ui-kit\src\scss\index.pro.dark.scss 2:9                                   @import
    src\assets\scss\styles.scss 4:9                                                                root stylesheet

Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(40%)
To emit a CSS abs() now: abs(#{40%})
More info: https://sass-lang.com/d/abs-percent

   ╷
63 │     $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
   │                                                                  ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\_alert.scss 63:66  @import
    node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.free.scss 36:9                   @import
    node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.pro.scss 2:9                     @import
    node_modules\mdb-vue-ui-kit\src\scss\index.pro.scss 2:9                            @import
    node_modules\mdb-vue-ui-kit\src\scss\index.pro.dark.scss 2:9                       @import
    src\assets\scss\styles.scss 4:9                                                    root stylesheet

Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(40%)
To emit a CSS abs() now: abs(#{40%})
More info: https://sass-lang.com/d/abs-percent

    ╷
192 │       abs($list-group-item-color-scale)
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\_list-group.scss 192:7  @import
    node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.free.scss 40:9                        @import
    node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.pro.scss 2:9                          @import
    node_modules\mdb-vue-ui-kit\src\scss\index.pro.scss 2:9                                 @import
    node_modules\mdb-vue-ui-kit\src\scss\index.pro.dark.scss 2:9                            @import
    src\assets\scss\styles.scss 4:9                                                         root stylesheet

Bartosz Cylwik staff answered 10 months ago

Hi! Thanks for letting us know. I'm adding this to our list for the future releases.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: Desktop PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No