Sass >= 1.77.7 warnings

[tagliala]

⚠️ ArcticAdmin is a simple gem, if you found a bug, you can easily fix it and make a pull-request. 🙏 Thanks !

Describe the bug

There are warnings when compiling against Sass >= 1.77.7

To Reproduce
Steps to reproduce the behavior:

1. Clone the repo
2. Install Sass npm install -g [email protected] (# Or .8)
3. npx sass src/scss/_main.scss
4. See error

Expected behavior
No warnings

Actual behavior

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/scss/_buttons.scss
3  │     padding: 5px 8px;
   │     ^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/scss/mixins/_buttons_mixins.scss
34 │ ┌   &:disabled {
35 │ │     background-color: $background-color;
36 │ │   }
   │ └─── nested rule
   ╵
    src/scss/_buttons.scss 3:3  @import
    src/scss/_main.scss 8:9     root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/scss/_buttons.scss
4  │     font-size: 16px;
   │     ^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/scss/mixins/_buttons_mixins.scss
34 │ ┌   &:disabled {
35 │ │     background-color: $background-color;
36 │ │   }
   │ └─── nested rule
   ╵
    src/scss/_buttons.scss 4:3  @import
    src/scss/_main.scss 8:9     root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/scss/components/_comments.scss
35 │           padding: 2px 9px;
   │           ^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/scss/mixins/_buttons_mixins.scss
34 │ ┌   &:disabled {
35 │ │     background-color: $background-color;
36 │ │   }
   │ └─── nested rule
   ╵
    src/scss/components/_comments.scss 35:9  @import
    src/scss/_main.scss 12:9                 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/scss/components/_comments.scss
36 │           font-size: 12px;
   │           ^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/scss/mixins/_buttons_mixins.scss
34 │ ┌   &:disabled {
35 │ │     background-color: $background-color;
36 │ │   }
   │ └─── nested rule
   ╵
    src/scss/components/_comments.scss 36:9  @import
    src/scss/_main.scss 12:9                 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> src/scss/components/_comments.scss
37 │           float: right;
   │           ^^^^^^^^^^^^ declaration
   ╵
   ┌──> src/scss/mixins/_buttons_mixins.scss
34 │ ┌   &:disabled {
35 │ │     background-color: $background-color;
36 │ │   }
   │ └─── nested rule
   ╵
    src/scss/components/_comments.scss 37:9  @import
    src/scss/_main.scss 12:9                 root stylesheet

Warning: 31 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.

Screenshots
n/a

Desktop (please complete the following information):
n/a

Smartphone (please complete the following information):
n/a

Gemfile
n/a

Additional context
Ref: twbs/bootstrap#40621

[tagliala]

Approach:

1. Compile with sass
2. Run stylelint on both css files to sort properties
3. Check differences

$ git diff --no-index main.css fix.css
diff --git a/main.css b/fix.css
index 99f4afcc6..d40084709 100644
--- a/main.css
+++ b/fix.css
@@ -302,8 +302,8 @@ hr {
   color: #fff;
   cursor: pointer;
   background-color: #4bacfe;
-  border: none;
   border: 0;
+  border: none;
   border-radius: 3px;
   transition: border .15s linear, color .15s linear, width .15s linear, background-color .15s linear;
 }
@@ -1807,8 +1807,8 @@ body.index .table_tools .batch_actions_selector {
 body.index .table_tools .dropdown_menu_button {
   position: relative;
   display: inline-block;
-  padding: 4px 8px;
   padding: 6px 25px 6px 10px;
+  padding: 4px 8px;
   color: #4bacfe;
   cursor: pointer;
   background-color: #fff;

1. Use border: none; for uniformity
2. There is a breaking change is in body.index .table_tools .dropdown_menu_button.