chore(stylelint): remove sass-lint/scss-lint in favor of stylelint

- remove scss-lint and sass-lint
- add stylelint and stylelint-order packages and configuration
- update all *.scss files to new syntax

fixes #14805

core/src/components/button/button.scss

@@ -7,11 +7,11 @@
   --ion-color-base: #{ion-color(primary, base)};
   --ion-color-contrast: #{ion-color(primary, contrast)};
   --ion-color-shade: #{ion-color(primary, shade)};
-
   --ripple-color: currentColor;
 
   display: inline-block;
 
+  text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;
 
@@ -19,8 +19,6 @@
 
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
-
-  text-align: center;
 }
 
 :host([disabled]) {
@@ -32,9 +30,9 @@
 // --------------------------------------------------
 
 :host(.button-solid) {
-  color: #{current-color(contrast)};
-
   --background: #{current-color(base)};
+
+  color: #{current-color(contrast)};
 }
 
 
@@ -42,10 +40,10 @@
 // --------------------------------------------------
 
 :host(.button-outline) {
-  color: #{current-color(base)};
-
   --border-color: #{current-color(base)};
   --background: transparent;
+
+  color: #{current-color(base)};
 }
 
 
@@ -53,10 +51,10 @@
 // --------------------------------------------------
 
 :host(.button-clear) {
-  color: #{current-color(base)};
-
   --border-width: 0;
   --background: transparent;
+
+  color: #{current-color(base)};
 }
 
 
@@ -71,10 +69,11 @@
   @include margin-horizontal(0);
 
   display: block;
-  clear: both;
 
   width: 100%;
 
+  clear: both;
+
   contain: strict;
 }
 
@@ -114,56 +113,51 @@
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
-  box-sizing: border-box;
-
-  position: relative;
-  z-index: 0;
   display: inline-block;
-  overflow: hidden;
+  position: relative;
 
   height: var(--height);
 
+  transition: var(--transition);
+
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-color: var(--border-color);
 
+  background: var(--background);
+  color: inherit;
+
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
 
   letter-spacing: inherit;
   line-height: 1;
+
+  text-align: inherit;
   text-decoration: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+
   white-space: inherit;
 
-  color: inherit;
-  background: var(--background);
-
   box-shadow: var(--box-shadow);
-
+  contain: content;
   cursor: pointer;
   opacity: var(--opacity);
-
+  overflow: hidden;
+  user-select: none;
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
-
-  transition: var(--transition);
-
-  text-align: inherit;
-  user-select: none;
+  z-index: 0;
+  box-sizing: border-box;
   font-kerning: none;
-
-  contain: content;
-
   appearance: none;
 }
 
 .button-native[disabled] {
   cursor: default;
   opacity: .5;
-
   pointer-events: none;
 }
 
@@ -194,7 +188,6 @@
 
 ::slotted(ion-icon) {
   font-size: 1.4em;
-
   pointer-events: none;
 }