style(css): fix most scss lint errors

core/.sass-lint.yml

@@ -11,6 +11,7 @@
 files:
   include: 'src/**/*.s+(a|c)ss'
   ignore:
+    - 'src/css/colors.scss'
     - 'src/css/flex-utils.scss'
     - 'src/css/normalize.scss'
     - 'src/css/text-alignment.scss'

core/.scss-lint.yml

@@ -8,6 +8,7 @@ scss_files: 'src/**/*.scss'
 
 exclude:
   - '*.css'
+  - 'src/css/colors.scss'
   - 'src/css/flex-utils.scss'
   - 'src/css/normalize.scss'
   - 'src/css/text-alignment.scss'

core/src/components/action-sheet/action-sheet.ios.scss

@@ -5,9 +5,9 @@
 // --------------------------------------------------
 
 :host {
-  text-align: $action-sheet-ios-text-align;
-
   font-family: $action-sheet-ios-font-family;
+
+  text-align: $action-sheet-ios-text-align;
 }
 
 .action-sheet-wrapper {
@@ -59,13 +59,13 @@
 .action-sheet-title {
   @include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start);
 
-  text-align: $action-sheet-ios-text-align;
-
   border-bottom: $action-sheet-ios-title-border-width $action-sheet-ios-title-border-style $action-sheet-ios-title-border-color;
 
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
   color: $action-sheet-ios-title-color;
+
+  text-align: $action-sheet-ios-text-align;
 }
 
 .action-sheet-sub-title {

core/src/components/action-sheet/action-sheet.md.scss

@@ -14,10 +14,10 @@
 .action-sheet-title {
   @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
 
-  text-align: $action-sheet-md-text-align;
-
   font-size: $action-sheet-md-title-font-size;
   color: $action-sheet-md-title-color;
+
+  text-align: $action-sheet-md-text-align;
 }
 
 .action-sheet-sub-title {
@@ -49,8 +49,6 @@
 .action-sheet-button {
   @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
 
-  text-align: $action-sheet-md-text-align;
-
   position: relative;
   overflow: hidden;
 
@@ -60,6 +58,8 @@
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
 
+  text-align: $action-sheet-md-text-align;
+
   contain: strict;
 }
 

core/src/components/action-sheet/action-sheet.scss

@@ -33,10 +33,9 @@
   width: $action-sheet-width;
 
   border: 0;
+  outline: none;
 
   font-family: inherit;
-
-  outline: none;
 }
 
 .action-sheet-button-inner {
@@ -63,13 +62,11 @@
 }
 
 .action-sheet-group {
-  -webkit-overflow-scrolling: touch;
-
-  overflow-y: scroll;
+  flex-shrink: 2;
 
   overscroll-behavior-y: contain;
-
-  flex-shrink: 2;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 
   pointer-events: all;
 }

core/src/components/alert/alert.ios.scss

@@ -36,9 +36,9 @@
 // --------------------------------------------------
 
 .alert-head {
-  text-align: $alert-ios-head-text-align;
-
   @include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start);
+
+  text-align: $alert-ios-head-text-align;
 }
 
 .alert-title {
@@ -62,10 +62,10 @@
 .alert-input-group {
   @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start);
 
-  text-align: $alert-ios-message-text-align;
-
   font-size: $alert-ios-message-font-size;
   color: $alert-ios-message-text-color;
+
+  text-align: $alert-ios-message-text-align;
 }
 
 .alert-message {
@@ -98,14 +98,13 @@
 
 .alert-radio-group,
 .alert-checkbox-group {
-  overflow-y: scroll;
-
   overscroll-behavior: contain;
 
   max-height: $alert-ios-content-max-height;
 
   border-top: $alert-ios-list-border-top;
 
+  overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
 

core/src/components/alert/alert.md.scss

@@ -23,9 +23,9 @@
 // --------------------------------------------------
 
 .alert-head {
-  text-align: $alert-md-head-text-align;
-
   @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start);
+
+  text-align: $alert-md-head-text-align;
 }
 
 .alert-title {
@@ -255,8 +255,6 @@
 
   @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start);
 
-  text-align: $alert-md-button-text-align;
-
   // necessary for ripple to work properly
   position: relative;
   overflow: hidden;
@@ -264,7 +262,10 @@
   font-weight: $alert-md-button-font-weight;
   text-transform: $alert-md-button-text-transform;
   color: $alert-md-button-text-color;
+
   background-color: $alert-md-button-background-color;
+
+  text-align: $alert-md-button-text-align;
 }
 
 .alert-button.activated {

core/src/components/alert/alert.scss

@@ -118,7 +118,6 @@
 }
 
 .alert-tappable {
-  text-align: start;
   @include margin(0);
   @include padding(0);
 
@@ -130,6 +129,8 @@
   line-height: initial;
   background: transparent;
 
+  text-align: start;
+
   appearance: none;
 }
 

core/src/components/anchor/anchor.scss

@@ -4,16 +4,16 @@
 // --------------------------------------------------
 
 :host {
-  // default background / color
-  --background: transparent;
-  --color: #{ion-color(primary, base)};
-
   --text-decoration: none;
 
-  background: var(--background);
-  color: var(--color);
+  // default background / color
+  --color: #{ion-color(primary, base)};
+  --background: transparent;
 
   text-decoration: var(--text-decoration);
+
+  color: var(--color);
+  background: var(--background);
 }
 
 :host(.ion-color) {

core/src/components/badge/badge.scss

@@ -9,7 +9,6 @@
 
   @include font-smoothing();
   @include padding($badge-padding-top, $badge-padding-end, $badge-padding-bottom, $badge-padding-start);
-  text-align: center;
 
   display: inline-block;
 
@@ -25,6 +24,8 @@
   background-color: #{current-color(base)};
   vertical-align: baseline;
 
+  text-align: center;
+
   contain: content;
 }
 

core/src/components/button/button.ios.vars.scss

@@ -64,7 +64,7 @@ $button-ios-opacity-hover:                            .8 !default;
 $button-ios-background-color-focused:                 ion-color(primary, shade) !default;
 
 /// @prop - Opacity of the button when disabled
-$button-ios-opacity-disabled:                         0.5 !default;
+$button-ios-opacity-disabled:                         .5 !default;
 
 
 // iOS Large Button

core/src/components/button/button.md.vars.scss

@@ -66,7 +66,7 @@ $button-md-box-shadow-activated:                        0 3px 5px rgba(0, 0, 0,
 $button-md-ripple-background-color:                     $text-color-step-400 !default;
 
 /// @prop - Opacity of the button when disabled
-$button-md-opacity-disabled:                           0.5 !default;
+$button-md-opacity-disabled:                           .5 !default;
 
 // Material Design Large Button
 // --------------------------------------------------

core/src/components/button/button.scss

@@ -4,19 +4,23 @@
 // --------------------------------------------------
 
 :host {
-  display: inline-block;
-  vertical-align: top; // the better option for most scenarios
-  vertical-align: -webkit-baseline-middle; // the best for those that support it
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: center;
-
   --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-decoration: none;
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  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]) {
@@ -105,44 +109,51 @@
 
 
 .button-native {
-  @include font-smoothing();
   @include border-radius(var(--border-radius));
+  @include font-smoothing();
   @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;
-  box-sizing: border-box;
 
   height: var(--height);
 
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-color: var(--border-color);
+
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
+
   letter-spacing: inherit;
   line-height: 1;
   text-decoration: inherit;
   text-overflow: inherit;
   text-transform: inherit;
   white-space: inherit;
+
   color: inherit;
   background: var(--background);
+
   box-shadow: var(--box-shadow);
+
   cursor: pointer;
   opacity: var(--opacity);
+
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
+
   transition: var(--transition);
 
-  font-kerning: none;
-  user-select: none;
   text-align: inherit;
+  user-select: none;
+  font-kerning: none;
 
   contain: content;
 

core/src/components/chip-icon/chip-icon.scss

@@ -1,19 +1,23 @@
 @import "../../themes/ionic.globals";
 
 :host {
-  align-items: center;
-  background-color: var(--ion-color-base);
-  border-radius: 50%;
-  display: inline-flex;
-  height: var(--size, 32px);
-  justify-content: center;
-  width: var(--size, 32px);
-
   --ion-color-base: #{ion-color(primary, base)};
   --ion-color-contrast: #{ion-color(primary, contrast)};
+
+  @include border-radius(50%);
+
+  display: inline-flex;
+
+  align-items: center;
+  justify-content: center;
+
+  width: var(--size, 32px);
+  height: var(--size, 32px);
+
+  background-color: var(--ion-color-base);
 }
 
 ion-icon {
-  color: var(--ion-color-contrast);
   font-size: var(--icon-size, 18px);
+  color: var(--ion-color-contrast);
 }

core/src/components/chip/chip.scss

@@ -4,10 +4,10 @@
 // --------------------------------------------------
 
 :host {
-  @include font-smoothing();
+  --ion-color-base: #{ion-color(primary, base)};
+  --ion-color-contrast: #{ion-color(primary, contrast)};
 
-  background-color: var(--ion-color-base);
-  color: var(--ion-color-contrast);
+  @include font-smoothing();
 
   box-sizing: border-box;
   display: inline-flex;
@@ -16,8 +16,9 @@
   align-self: center;
 
   font-weight: normal;
-  vertical-align: middle;
 
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
+  color: var(--ion-color-contrast);
+  background-color: var(--ion-color-base);
+
+  vertical-align: middle;
 }

core/src/components/col/col.scss

@@ -7,12 +7,13 @@
   @include make-breakpoint-padding($grid-column-paddings);
   @include margin(0);
 
-  position: relative;
-
   box-sizing: border-box;
 
+  position: relative;
+
   flex-basis: 0;
   flex-grow: 1;
+
   width: 100%;
   max-width: 100%;
   min-height: 1px; // Prevent columns from collapsing when empty

core/src/components/content/content.scss

@@ -4,6 +4,16 @@
 // --------------------------------------------------
 
 :host {
+  --ion-color-base: #{$background-color};
+  --ion-color-contrast: #{$text-color};
+
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+
+  --keyboard-offset: 0;
+
   position: relative;
   display: block;
 
@@ -19,16 +29,6 @@
 
   margin: 0 !important; // scss-lint:disable all
   padding: 0 !important; // scss-lint:disable all
-
-  --ion-color-base: #{$background-color};
-  --ion-color-contrast: #{$text-color};
-
-  --padding-top: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --padding-end: 0;
-
-  --keyboard-offset: 0px;
 }
 
 :host(.ion-color-outer),
@@ -39,8 +39,10 @@
 .scroll-inner {
   @include padding(var(--padding-top), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset)), var(--padding-start));
 
+  box-sizing: border-box;
+
   height: 100%;
   min-height: 100%;
-  box-sizing: border-box;
+
   -webkit-margin-collapse: discard;
 }

core/src/components/fab-button/fab-button.ios.scss

@@ -50,7 +50,6 @@
   --background: #{$fab-ios-list-button-translucent-background-color};
 }
 
-
 // .fab-translucent-ios-#{$color-name} {
 //   background-color: ion-color($color-name, base, $fab-ios-translucent-background-color-alpha);
 //   opacity: .8;

core/src/components/fab-button/fab-button.scss

@@ -29,8 +29,6 @@
   @include border-radius(50%);
   @include margin(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
-  text-align: center;
-
   position: relative;
   z-index: 0;
   display: block;
@@ -49,10 +47,14 @@
   color: inherit;
   background: var(--background);
   box-shadow: var(--box-shadow);
+
   cursor: pointer;
+
   transform: var(--transform);
   transition: var(--transition);
 
+  text-align: center;
+
   background-clip: padding-box;
 
   font-kerning: none;

core/src/components/footer/footer.ios.scss

@@ -18,6 +18,6 @@
 
 .footer-translucent-ios ion-toolbar {
   --border-color: transparent;
-  --opacity: 0.8;
+  --opacity: .8;
   --backdrop-filter: #{$footer-ios-translucent-filter};
 }

core/src/components/footer/footer.md.scss

@@ -21,6 +21,6 @@
   content: "";
 }
 
-.footer-md[no-border]::before{
+.footer-md[no-border]::before {
   display: none;
 }

core/src/components/header/header.ios.scss

@@ -18,6 +18,6 @@
 
 .header-translucent-ios ion-toolbar {
   --border-color: transparent;
-  --opacity: 0.8;
+  --opacity: .8;
   --backdrop-filter: #{$header-ios-translucent-filter};
 }

core/src/components/infinite-scroll-content/infinite-scroll-content.scss

@@ -4,14 +4,14 @@
 // --------------------------------------------------
 
 ion-infinite-scroll-content {
-  text-align: center;
-
   display: flex;
 
   flex-direction: column;
   justify-content: center;
 
   min-height: $infinite-scroll-content-min-height;
+
+  text-align: center;
 }
 
 .infinite-loading {

core/src/components/input/input.ios.vars.scss

@@ -21,7 +21,7 @@ $input-ios-padding-end:                    ($item-ios-padding-end / 2) !default;
 $input-ios-padding-bottom:                 $item-ios-padding-bottom !default;
 
 /// @prop - Margin start of the input
-$input-ios-padding-start:                  0px !default;
+$input-ios-padding-start:                  0 !default;
 
 /// @prop - Margin start of the input when it is after a label
 $input-ios-by-label-margin-start:         $item-ios-padding-start !default;

core/src/components/input/input.scss

@@ -4,21 +4,23 @@
 // --------------------------------------------------
 
 :host {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 1;
-
-  width: 100%;
-
   --placeholder-weight: inherit;
 
-  --padding-top: 0px;
-  --padding-end: 0px;
-  --padding-bottom: 0px;
-  --padding-start: 0px;
+  --padding-top: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
 
-  --border-radius: 0px;
+  --border-radius: 0;
+
+  position: relative;
+  display: flex;
+
+  flex: 1;
+
+  align-items: center;
+
+  width: 100%;
 }
 
 
@@ -43,9 +45,11 @@
   font-size: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  font-kerning: inherit;
+
   background: transparent;
 
+  font-kerning: inherit;
+
   appearance: none;
 
   &::placeholder {

core/src/components/item/item.md.scss

@@ -5,11 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  font-family: $item-md-font-family;
-  font-size: $item-md-font-size;
-  font-weight: normal;
-  text-transform: none;
-
   --ion-color-base: var(--ion-item-background, transparent);
   --ion-color-contrast: #{$item-md-text-color};
   --ion-color-tint: #{$item-md-background-color-active};
@@ -21,6 +16,11 @@
   --inner-padding-end: #{$item-md-padding-end / 2};
 
   --padding-start: #{$item-md-padding-start};
+
+  font-family: $item-md-font-family;
+  font-size: $item-md-font-size;
+  font-weight: normal;
+  text-transform: none;
 }
 
 // Material Design Item Lines
@@ -50,7 +50,7 @@
 }
 
 :host(.item-lines-full),
-:host(.item-lines-none){
+:host(.item-lines-none) {
   --inner-border-width: 0;
 }
 

core/src/components/item/item.scss

@@ -4,16 +4,6 @@
 // --------------------------------------------------
 
 :host {
-  @include font-smoothing();
-
-  display: block;
-
-  text-decoration: none;
-
-  color: #{current-color(contrast)};
-
-  box-sizing: border-box;
-
   --min-height: #{$item-min-height};
   --background: #{current-color(base)};
   --background-active: #{current-color(tint)};
@@ -45,6 +35,16 @@
   --highlight-color-invalid: #{ion-color(danger, base)};
 
   --highlight-height: 2px;
+
+  @include font-smoothing();
+
+  box-sizing: border-box;
+
+  display: block;
+
+  text-decoration: none;
+
+  color: #{current-color(contrast)};
 }
 
 :host(.activated) {

core/src/components/label/label.scss

@@ -5,8 +5,12 @@
 // --------------------------------------------------
 
 :host {
+  --ion-color-base: currentColor;
+
   @include margin(0);
 
+  box-sizing: border-box;
+
   display: block;
   overflow: hidden;
 
@@ -16,11 +20,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  box-sizing: border-box;
-
   color: #{current-color(base)};
-
-  --ion-color-base: currentColor;
 }
 
 :host([text-wrap]) {

core/src/components/list/list.scss

@@ -11,11 +11,11 @@ ion-list {
 
   display: block;
 
+  background: $item-background-color;
+
   contain: content;
 
   list-style-type: none;
-
-  background: $item-background-color;
 }
 
 ion-list.list-inset {

core/src/components/menu-button/menu-button.md.scss

@@ -10,6 +10,7 @@
 
   min-width: 44px;
   height: 32px;
+
   border: 0;
   font-size: 14px;
   font-weight: 500;
@@ -21,18 +22,20 @@
   box-shadow: none;
 
   &.activated {
-    opacity: 0.4;
+    opacity: .4;
   }
 }
 
 ion-icon {
-  @include padding-horizontal(null, 0.3em);
+  @include padding-horizontal(null, .3em);
   @include margin(0);
   @include padding(0, 6px);
-  text-align: start;
 
   font-size: 24px;
   font-weight: normal;
-  line-height: 0.67;
+  line-height: .67;
+
+  text-align: start;
+
   pointer-events: none;
 }

core/src/components/menu-button/menu-button.scss

@@ -8,21 +8,19 @@
 }
 
 button {
+  @include margin(0);
+  @include padding(0);
   @include font-smoothing();
-  text-align: center;
-
-  margin: 0;
-  padding: 0;
 
   position: relative;
   z-index: 0;
   display: flex;
-  color: inherit;
 
   flex-flow: row nowrap;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+
   border: 0;
   outline: none;
 
@@ -32,11 +30,15 @@ button {
   text-overflow: ellipsis;
   text-transform: none;
 
+  white-space: nowrap;
+
+  color: inherit;
   background: transparent;
 
-  white-space: nowrap;
   cursor: pointer;
 
+  text-align: center;
+
   font-kerning: none;
   user-select: none;
 

core/src/components/modal/modal.scss

@@ -9,6 +9,7 @@ ion-modal {
   position: absolute;
 
   display: flex;
+
   align-items: center;
   justify-content: center;
 

core/src/components/picker/picker.ios.scss

@@ -27,9 +27,9 @@
 }
 
 .picker-ios .picker-toolbar-button {
-  text-align: end;
-
   flex: 1;
+
+  text-align: end;
 }
 
 .picker-ios .picker-toolbar-button:last-child .picker-button {
@@ -37,9 +37,9 @@
 }
 
 .picker-ios .picker-toolbar-button:first-child {
-  text-align: start;
-
   font-weight: normal;
+
+  text-align: start;
 }
 
 .picker-ios .picker-button,

core/src/components/picker/picker.scss

@@ -85,8 +85,6 @@ ion-picker {
 }
 
 .picker-prefix {
-  text-align: end;
-
   position: relative;
 
   flex: 2;
@@ -95,11 +93,11 @@ ion-picker {
   max-width: 50%;
 
   white-space: nowrap;
+
+  text-align: end;
 }
 
 .picker-suffix {
-  text-align: start;
-
   position: relative;
 
   flex: 2;
@@ -108,12 +106,13 @@ ion-picker {
   max-width: 50%;
 
   white-space: nowrap;
+
+  text-align: start;
 }
 
 // contain property is supported by Chrome
 .picker-opt {
   @include position(0, null, null, 0);
-  text-align: center;
 
   position: absolute;
 
@@ -127,6 +126,8 @@ ion-picker {
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  text-align: center;
+
   will-change: transform;
   contain: strict;
 }

core/src/components/range/range.ios.scss

@@ -59,12 +59,13 @@
 .range-knob-handle {
   @include position(($range-ios-slider-height / 2), null, null, 0);
   @include margin(-($range-ios-hit-height / 2), null, null, -($range-ios-hit-width / 2));
-  text-align: center;
 
   position: absolute;
 
   width: $range-ios-hit-width;
   height: $range-ios-hit-height;
+
+  text-align: center;
 }
 
 .range-knob {
@@ -104,7 +105,6 @@
 }
 
 .range-pin {
-  text-align: center;
   @include border-radius(50px);
   @include transform(translate3d(0, 28px, 0), scale(.01));
   @include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start);
@@ -118,10 +118,11 @@
   font-size: $range-ios-pin-font-size;
 
   color: $range-ios-pin-color;
-
   background: $range-ios-pin-background-color;
 
   transition: transform 120ms ease;
+
+  text-align: center;
 }
 
 .range-knob-pressed .range-pin {

core/src/components/range/range.md.scss

@@ -59,12 +59,13 @@
 .range-knob-handle {
   @include position(($range-md-slider-height / 2), null, null, 0);
   @include margin(-($range-md-hit-height / 2), null, null, -($range-md-hit-width / 2));
-  text-align: center;
 
   position: absolute;
 
   width: $range-md-hit-width;
   height: $range-md-hit-height;
+
+  text-align: center;
 }
 
 .range-knob {
@@ -113,7 +114,6 @@
 
 .range-pin {
   @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal);
-  text-align: center;
   @include border-radius(50%);
   @include transform(translate3d(0, 28px, 0), scale(.01));
 
@@ -132,6 +132,8 @@
 
   transition: transform 120ms ease, background-color 120ms ease;
 
+  text-align: center;
+
   &::before {
     @include position(3px, null, null, 50%);
     @include border-radius(50%, 50%, 50%, 0);

core/src/components/refresher/refresher.scss

@@ -39,18 +39,19 @@ ion-refresher-content {
 
 .refresher-pulling-icon,
 .refresher-refreshing-icon {
-  text-align: center;
   @include transform-origin(center);
 
   font-size: $refresher-icon-font-size;
   transition: 200ms;
+
+  text-align: center;
 }
 
 .refresher-pulling-text,
 .refresher-refreshing-text {
-  text-align: center;
-
   font-size: $refresher-text-font-size;
+
+  text-align: center;
 }
 
 // Refresher Content States

core/src/components/reorder/reorder.scss

@@ -4,11 +4,11 @@
 // --------------------------------------------------
 
 :host([slot]) {
+  z-index: 100;
+
   display: none;
 
   line-height: 0;
-
-  z-index: 100;
 }
 
 

core/src/components/ripple-effect/ripple-effect.scss

@@ -14,20 +14,23 @@
 
 .ripple-effect {
   @include border-radius(50%);
+
   position: absolute;
 
+  color: inherit;
   background-color: currentColor;
+
   opacity: 0;
 
-  will-change: transform, opacity;
-  pointer-events: none;
   animation-name: rippleAnimation;
   animation-duration: 200ms;
   animation-timing-function: ease-out;
 
-  color: inherit;
+  will-change: transform, opacity;
 
   contain: strict;
+
+  pointer-events: none;
 }
 
 @keyframes rippleAnimation {

core/src/components/row/row.scss

@@ -5,5 +5,6 @@
 
 :host {
   display: flex;
+
   flex-wrap: wrap;
 }

core/src/components/searchbar/searchbar.ios.scss

@@ -71,9 +71,8 @@
   width: 30px;
   height: 100%;
 
-  color: $searchbar-ios-input-clear-icon-color;
-
   border: 0;
+  color: $searchbar-ios-input-clear-icon-color;
   background-color: transparent;
 }
 

core/src/components/searchbar/searchbar.md.scss

@@ -19,10 +19,10 @@
 .searchbar-search-icon {
   @include position(11px, null, null, 16px);
 
-  color: $searchbar-md-input-search-icon-color;
-
   width: $searchbar-md-input-search-icon-size + 1;
   height: $searchbar-md-input-search-icon-size + 1;
+
+  color: $searchbar-md-input-search-icon-color;
 }
 
 

core/src/components/segment-button/segment-button.scss

@@ -25,7 +25,7 @@
 }
 
 :host(:last-of-type) .segment-button-native {
-  @include border-radius(0, var(--border-radius),var(--border-radius), 0);
+  @include border-radius(0, var(--border-radius), var(--border-radius), 0);
 
   --padding-start: 0;
 }
@@ -34,37 +34,39 @@
   @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));
 
-  text-align: center;
-
   position: relative;
   display: block;
 
   overflow: hidden;
 
-  text-transform: inherit;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-
-  font-kerning: none;
-  user-select: none;
-  contain: content;
-
   width: 100%;
   height: 100%;
 
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-color: var(--border-color);
-  transition: var(--transition);
 
-  color: inherit;
   font-size: inherit;
   font-weight: inherit;
 
+  text-decoration: none;
+  text-overflow: ellipsis;
+  text-transform: inherit;
+  white-space: nowrap;
+
+  color: inherit;
   background: var(--background);
 
+  cursor: pointer;
+
+  transition: var(--transition);
+
+  contain: content;
+  user-select: none;
+  font-kerning: none;
+
+  text-align: center;
+
   &:active,
   &:focus {
     outline: none;

core/src/components/segment/segment.md.scss

@@ -42,15 +42,16 @@
 
   --icon-size: #{$segment-button-md-icon-size};
 
+  height: $segment-button-md-height;
+
   font-size: $segment-button-md-font-size;
   font-weight: $segment-button-md-font-weight;
   line-height: $segment-button-md-line-height;
+  text-transform: uppercase;
+
   color: inherit;
-  height: $segment-button-md-height;
 
   opacity: $segment-button-md-opacity;
-
-  text-transform: uppercase;
 }
 
 // Checked Segment Button

core/src/components/slide/slide.scss

@@ -12,16 +12,14 @@ ion-slide {
 }
 
 .slide-zoom {
-  text-align: center;
-
   display: block;
 
   width: 100%;
+
+  text-align: center;
 }
 
 .swiper-slide {
-  text-align: center;
-
   box-sizing: border-box;
   position: relative;
 
@@ -37,6 +35,8 @@ ion-slide {
   height: 100%;
 
   font-size: 18px;
+
+  text-align: center;
 }
 
 .swiper-slide img {

core/src/components/tab-button/tab-button.scss

@@ -4,8 +4,6 @@
   @include border-radius(0);
   @include margin(0);
 
-  text-align: center;
-
   box-sizing: border-box;
 
   position: relative;
@@ -21,8 +19,10 @@
 
   text-decoration: none;
 
+  color: var(--color);
   background: var(--background);
-  color: var( --color);
+
+  text-align: center;
 
   user-select: none;
 
@@ -50,6 +50,8 @@ a {
   @include margin(0);
   @include padding(0);
 
+  box-sizing: border-box;
+
   display: flex;
 
   flex-direction: column;
@@ -60,10 +62,11 @@ a {
   height: 100%;
 
   border: 0;
+
   color: inherit;
   background: transparent;
+
   cursor: pointer;
-  box-sizing: border-box;
 
   &:active,
   &:focus {
@@ -118,13 +121,14 @@ a {
   @include position(null, calc(50% - 50px), null, null);
   @include padding(1px, 6px);
 
+  box-sizing: border-box;
+
   position: absolute;
 
   height: auto;
 
   font-size: 12px;
   line-height: 16px;
-  box-sizing: border-box;
 }
 
 :host(.has-icon) .tab-badge {

core/src/components/tabbar/tabbar.scss

@@ -13,8 +13,8 @@
 
   width: 100%;
 
-  background: var(--background);
   color: var(--color);
+  background: var(--background);
 }
 
 :host(.ion-color),
@@ -47,10 +47,10 @@
   width: 1px;
   height: 2px;
 
-  transform: translateZ(0);
-
   background: currentColor;
 
+  transform: translateZ(0);
+
   &.animated {
     transition-duration: 300ms;
     transition-property: transform;

core/src/components/toggle/toggle.scss

@@ -7,13 +7,14 @@
   --ion-color-base: #{ion-color(primary, base)};
   --ion-color-base-rgb: #{ion-color(primary, base, null, true)};
 
+  box-sizing: content-box !important;
+
   display: inline-block;
 
   contain: content;
 
   touch-action: none;
   user-select: none;
-  box-sizing: content-box !important;
 }
 
 :host(.toggle-key) input {

core/src/components/toolbar/toolbar.ios.scss

@@ -31,10 +31,10 @@
 
 ::slotted(ion-title) {
   @include position(0, null, null, 0);
-  @include padding(0, 90px, 0px);
-  text-align: $toolbar-ios-title-text-align;
+  @include padding(0, 90px, 0);
 
   box-sizing: border-box;
+
   position: absolute;
 
   width: 100%;
@@ -45,5 +45,7 @@
   letter-spacing: -.03em;
   transform: translateZ(0);
 
+  text-align: $toolbar-ios-title-text-align;
+
   pointer-events: none;
 }

core/src/components/toolbar/toolbar.scss

@@ -37,7 +37,7 @@
 :host(.toolbar-translucent) {
   --border-color: transparent;
   --backdrop-filter: var(--translucent-filter);
-  --opacity: 0.8;
+  --opacity: .8;
 }
 
 .toolbar-background {
@@ -50,9 +50,8 @@
   border-style: var(--border-style);
   border-color: var(--border-color);
   background: var(--background);
-  transform: translateZ(0);
-
   opacity: var(--opacity);
+  transform: translateZ(0);
 
   pointer-events: none;
 

core/src/themes/ionic.mixins.scss

@@ -665,7 +665,7 @@
 // Add generic safe area sizing
 // @param {string} $prop - css property you want to set
 // @param {string} $safe-area-position - short safe-area-inset value you want to modify
-// @param {string} $value - additional value you want to modify, if none, pass 0px
+// @param {string} $value - additional value you want to modify, if none, pass 0
 // ----------------------------------------------------------
 @mixin safe-area-sizing($prop, $safe-area-position, $value){
   #{$prop}: unquote("calc(#{$value} + constant(#{$safe-area-position}))");