From 094fde755cebf3c50fef222e3027d1f18d7f33f5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 18 Jul 2018 12:53:33 -0400
Subject: [PATCH] style(css): fix most scss lint errors

---
 core/.sass-lint.yml                           |  1 +
 core/.scss-lint.yml                           |  1 +
 .../action-sheet/action-sheet.ios.scss        |  8 ++--
 .../action-sheet/action-sheet.md.scss         |  8 ++--
 .../components/action-sheet/action-sheet.scss | 11 ++----
 core/src/components/alert/alert.ios.scss      | 11 +++---
 core/src/components/alert/alert.md.scss       |  9 +++--
 core/src/components/alert/alert.scss          |  3 +-
 core/src/components/anchor/anchor.scss        | 14 +++----
 core/src/components/badge/badge.scss          |  3 +-
 .../components/button/button.ios.vars.scss    |  4 +-
 core/src/components/button/button.md.scss     |  2 +-
 .../src/components/button/button.md.vars.scss |  2 +-
 core/src/components/button/button.scss        | 37 ++++++++++++-------
 core/src/components/chip-icon/chip-icon.scss  | 22 ++++++-----
 core/src/components/chip/chip.scss            | 13 ++++---
 core/src/components/col/col.scss              |  5 ++-
 core/src/components/col/col.vars.scss         |  2 +-
 core/src/components/content/content.scss      | 24 ++++++------
 .../components/fab-button/fab-button.ios.scss |  3 +-
 .../src/components/fab-button/fab-button.scss |  6 ++-
 core/src/components/footer/footer.ios.scss    |  2 +-
 core/src/components/footer/footer.md.scss     |  2 +-
 core/src/components/header/header.ios.scss    |  2 +-
 .../infinite-scroll-content.scss              |  4 +-
 core/src/components/input/input.ios.vars.scss |  2 +-
 core/src/components/input/input.scss          | 30 ++++++++-------
 core/src/components/item/item.md.scss         | 14 +++----
 core/src/components/item/item.scss            | 20 +++++-----
 core/src/components/label/label.ios.vars.scss |  2 +-
 core/src/components/label/label.scss          |  8 ++--
 core/src/components/list/list.scss            |  4 +-
 .../menu-button/menu-button.md.scss           | 11 ++++--
 .../components/menu-button/menu-button.scss   | 14 ++++---
 core/src/components/menu/menu.ios.scss        |  2 +-
 core/src/components/modal/modal.scss          |  1 +
 core/src/components/picker/picker.ios.scss    |  8 ++--
 core/src/components/picker/picker.scss        | 11 +++---
 core/src/components/range/range.ios.scss      |  7 ++--
 core/src/components/range/range.md.scss       |  6 ++-
 core/src/components/refresher/refresher.scss  |  7 ++--
 core/src/components/reorder/reorder.scss      |  4 +-
 .../ripple-effect/ripple-effect.scss          |  9 +++--
 core/src/components/row/row.scss              |  1 +
 .../components/searchbar/searchbar.ios.scss   |  3 +-
 .../components/searchbar/searchbar.md.scss    |  4 +-
 .../segment-button/segment-button.scss        | 32 ++++++++--------
 core/src/components/segment/segment.md.scss   |  9 +++--
 core/src/components/slide/slide.scss          |  8 ++--
 core/src/components/slides/slides.scss        |  2 +-
 .../src/components/tab-button/tab-button.scss | 14 ++++---
 core/src/components/tabbar/tabbar.md.scss     |  2 +-
 core/src/components/tabbar/tabbar.scss        |  6 +--
 .../components/thumbnail/thumbnail.ios.scss   |  2 +-
 core/src/components/toggle/toggle.scss        |  3 +-
 core/src/components/toolbar/toolbar.ios.scss  |  6 ++-
 core/src/components/toolbar/toolbar.scss      |  5 +--
 core/src/themes/ionic.mixins.scss             |  2 +-
 58 files changed, 253 insertions(+), 205 deletions(-)

diff --git a/core/.sass-lint.yml b/core/.sass-lint.yml
index 349af87614..b112f910e1 100644
--- a/core/.sass-lint.yml
+++ b/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'
diff --git a/core/.scss-lint.yml b/core/.scss-lint.yml
index ec00d9971a..a55df8e357 100644
--- a/core/.scss-lint.yml
+++ b/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'
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 7094591446..f9e83e9d18 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/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 {
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index 580b4f2bd6..e34ee3e6a4 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/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;
 }
 
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index b051e26029..4149de2e07 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/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;
 }
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index 1f2dbd957e..4f2048bd38 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/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;
 }
 
diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss
index 052582a972..4ed79e200a 100644
--- a/core/src/components/alert/alert.md.scss
+++ b/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 {
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index 8996844392..1a1b9721aa 100644
--- a/core/src/components/alert/alert.scss
+++ b/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;
 }
 
diff --git a/core/src/components/anchor/anchor.scss b/core/src/components/anchor/anchor.scss
index 39a7aca3ca..8ed93a6bfb 100644
--- a/core/src/components/anchor/anchor.scss
+++ b/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) {
@@ -22,4 +22,4 @@
 
 a {
   @include text-inherit();
-}
\ No newline at end of file
+}
diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.scss
index e499ed8c20..756b1efd02 100644
--- a/core/src/components/badge/badge.scss
+++ b/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;
 }
 
diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss
index cfc2c746b6..d1c17b8b33 100644
--- a/core/src/components/button/button.ios.vars.scss
+++ b/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
@@ -203,4 +203,4 @@ $button-ios-round-border-radius:                      $button-round-border-radiu
 // --------------------------------------------------
 
 /// @prop - Font weight of the strong button
-$button-ios-strong-font-weight:                       600 !default;
\ No newline at end of file
+$button-ios-strong-font-weight:                       600 !default;
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
index f5034a4faf..e24e79c657 100644
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -117,4 +117,4 @@
 
 ::slotted(ion-icon[slot="icon-only"]) {
   @include padding(0);
-}
\ No newline at end of file
+}
diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss
index 34d6c81cd0..27a6c04f86 100644
--- a/core/src/components/button/button.md.vars.scss
+++ b/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
 // --------------------------------------------------
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index 96745adfcb..38b6d1b89c 100644
--- a/core/src/components/button/button.scss
+++ b/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;
 
diff --git a/core/src/components/chip-icon/chip-icon.scss b/core/src/components/chip-icon/chip-icon.scss
index 5b9a08ffc3..2058dfcdfb 100644
--- a/core/src/components/chip-icon/chip-icon.scss
+++ b/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);
 }
diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss
index fded1614fb..d9cf938d40 100644
--- a/core/src/components/chip/chip.scss
+++ b/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;
 }
diff --git a/core/src/components/col/col.scss b/core/src/components/col/col.scss
index f8850d9b43..37922e642f 100644
--- a/core/src/components/col/col.scss
+++ b/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
diff --git a/core/src/components/col/col.vars.scss b/core/src/components/col/col.vars.scss
index c91c8a30f1..ca89b021cc 100644
--- a/core/src/components/col/col.vars.scss
+++ b/core/src/components/col/col.vars.scss
@@ -14,4 +14,4 @@ $grid-column-paddings: (
   md: var(--ion-grid-column-padding-md, $grid-column-padding),
   lg: var(--ion-grid-column-padding-lg, $grid-column-padding),
   xl: var(--ion-grid-column-padding-xl, $grid-column-padding)
-) !default;
\ No newline at end of file
+) !default;
diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index 7c93768acf..f2b0f4cabf 100644
--- a/core/src/components/content/content.scss
+++ b/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;
 }
diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss
index d701bd7555..e0f46e6cbf 100755
--- a/core/src/components/fab-button/fab-button.ios.scss
+++ b/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;
@@ -58,4 +57,4 @@
 
 // .fab-translucent-ios-#{$color-name}.activated {
 //   opacity: 1;
-// }
\ No newline at end of file
+// }
diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index 8087205b64..bfabaeca07 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/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;
diff --git a/core/src/components/footer/footer.ios.scss b/core/src/components/footer/footer.ios.scss
index 31dca9bc86..d20a1128c1 100644
--- a/core/src/components/footer/footer.ios.scss
+++ b/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};
 }
diff --git a/core/src/components/footer/footer.md.scss b/core/src/components/footer/footer.md.scss
index 4d29fb96c8..e06799d745 100644
--- a/core/src/components/footer/footer.md.scss
+++ b/core/src/components/footer/footer.md.scss
@@ -21,6 +21,6 @@
   content: "";
 }
 
-.footer-md[no-border]::before{
+.footer-md[no-border]::before {
   display: none;
 }
diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss
index 7cb764c12e..dae2e2306c 100644
--- a/core/src/components/header/header.ios.scss
+++ b/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};
 }
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.scss
index 16950c7a7a..dccc101fc6 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.scss
+++ b/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 {
diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss
index 00fd72f296..c810a23493 100644
--- a/core/src/components/input/input.ios.vars.scss
+++ b/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;
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 7f0291ab54..262ed72f9f 100644
--- a/core/src/components/input/input.scss
+++ b/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 {
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 74c248ae66..310667b6a1 100644
--- a/core/src/components/item/item.md.scss
+++ b/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;
 }
 
@@ -167,4 +167,4 @@
 :host(:not(.item-label)) ::slotted(ion-input),
 :host(:not(.item-label)) ::slotted(ion-textarea) {
   --padding-start: 0;
-}
\ No newline at end of file
+}
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 6524d4360d..92764eb79c 100644
--- a/core/src/components/item/item.scss
+++ b/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) {
diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss
index 602207a32e..7fe2942ad3 100644
--- a/core/src/components/label/label.ios.vars.scss
+++ b/core/src/components/label/label.ios.vars.scss
@@ -33,4 +33,4 @@ $label-ios-text-wrap-font-size:        14px !default;
 $label-ios-text-wrap-line-height:      1.5 !default;
 
 /// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color:        $text-color-step-600 !default;
\ No newline at end of file
+$item-ios-paragraph-text-color:        $text-color-step-600 !default;
diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
index 362b727cd2..f2fb8d3c30 100644
--- a/core/src/components/label/label.scss
+++ b/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]) {
diff --git a/core/src/components/list/list.scss b/core/src/components/list/list.scss
index 4a47ab4895..a944690829 100644
--- a/core/src/components/list/list.scss
+++ b/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 {
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index 6fa188d7de..a170116385 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/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;
 }
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
index 42d0643abc..0d2af7b243 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/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;
 
diff --git a/core/src/components/menu/menu.ios.scss b/core/src/components/menu/menu.ios.scss
index dae8225761..bdc17bc99d 100644
--- a/core/src/components/menu/menu.ios.scss
+++ b/core/src/components/menu/menu.ios.scss
@@ -34,4 +34,4 @@
 
 .menu-content-push {
   box-shadow: $menu-ios-box-shadow-push;
-}
\ No newline at end of file
+}
diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 73e7fac2a8..c435a498b3 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -9,6 +9,7 @@ ion-modal {
   position: absolute;
 
   display: flex;
+
   align-items: center;
   justify-content: center;
 
diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss
index 44893b2d5b..936aad0101 100644
--- a/core/src/components/picker/picker.ios.scss
+++ b/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,
diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss
index ab561e6f71..b3fb118fb4 100644
--- a/core/src/components/picker/picker.scss
+++ b/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;
 }
diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index db9bda6048..64d33cafe4 100644
--- a/core/src/components/range/range.ios.scss
+++ b/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 {
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 3faa68fdc4..83c7333622 100644
--- a/core/src/components/range/range.md.scss
+++ b/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);
diff --git a/core/src/components/refresher/refresher.scss b/core/src/components/refresher/refresher.scss
index ef9e47d8b8..5a8f872de4 100644
--- a/core/src/components/refresher/refresher.scss
+++ b/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
diff --git a/core/src/components/reorder/reorder.scss b/core/src/components/reorder/reorder.scss
index 450a33b34d..c25e004449 100644
--- a/core/src/components/reorder/reorder.scss
+++ b/core/src/components/reorder/reorder.scss
@@ -4,11 +4,11 @@
 // --------------------------------------------------
 
 :host([slot]) {
+  z-index: 100;
+
   display: none;
 
   line-height: 0;
-
-  z-index: 100;
 }
 
 
diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss
index ed7db0f93b..6432192291 100644
--- a/core/src/components/ripple-effect/ripple-effect.scss
+++ b/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 {
diff --git a/core/src/components/row/row.scss b/core/src/components/row/row.scss
index 21e901367d..c797c9d604 100644
--- a/core/src/components/row/row.scss
+++ b/core/src/components/row/row.scss
@@ -5,5 +5,6 @@
 
 :host {
   display: flex;
+
   flex-wrap: wrap;
 }
diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss
index 105a3bc7ab..dbad9c0ac2 100644
--- a/core/src/components/searchbar/searchbar.ios.scss
+++ b/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;
 }
 
diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
index aa81c011cc..65a2deee23 100644
--- a/core/src/components/searchbar/searchbar.md.scss
+++ b/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;
 }
 
 
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index d1b3e746e3..ce9969e827 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/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;
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index 5f2476607d..c634ea83e5 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/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
@@ -70,4 +71,4 @@
   opacity: $segment-button-md-opacity-disabled;
 
   pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/core/src/components/slide/slide.scss b/core/src/components/slide/slide.scss
index a4330194a3..1e73d90884 100644
--- a/core/src/components/slide/slide.scss
+++ b/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 {
diff --git a/core/src/components/slides/slides.scss b/core/src/components/slides/slides.scss
index e190ae8b8b..25d36f3a7b 100644
--- a/core/src/components/slides/slides.scss
+++ b/core/src/components/slides/slides.scss
@@ -45,4 +45,4 @@
 
 .swiper-scrollbar-drag {
   background: var(--scroll-bar-background-active);
-}
\ No newline at end of file
+}
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss
index 412bd34525..fcbe404750 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/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 {
diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss
index 5d090aab7c..59c0aa8623 100644
--- a/core/src/components/tabbar/tabbar.md.scss
+++ b/core/src/components/tabbar/tabbar.md.scss
@@ -29,4 +29,4 @@ ion-scroll {
   overflow: hidden;
 
   flex: 1 0 auto;
-}
\ No newline at end of file
+}
diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss
index 8dff883720..f24e4db174 100644
--- a/core/src/components/tabbar/tabbar.scss
+++ b/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;
diff --git a/core/src/components/thumbnail/thumbnail.ios.scss b/core/src/components/thumbnail/thumbnail.ios.scss
index 71a85711f3..72ba830dbd 100644
--- a/core/src/components/thumbnail/thumbnail.ios.scss
+++ b/core/src/components/thumbnail/thumbnail.ios.scss
@@ -17,4 +17,4 @@
   @include border-radius($thumbnail-ios-border-radius);
 
   overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index 0614927d60..7ddec97a71 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/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 {
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
index b19322a1af..34f00a68bd 100644
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/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;
 }
diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss
index cb0532d7da..7a31b300ba 100644
--- a/core/src/components/toolbar/toolbar.scss
+++ b/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;
 
diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
index dd843d2b8f..e6d919ca4c 100644
--- a/core/src/themes/ionic.mixins.scss
+++ b/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}))");