style(sass): fix lint errors

packages/core/src/components/app/app.scss

@@ -15,6 +15,7 @@
 
 * {
   box-sizing: border-box;
+
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
@@ -39,11 +40,11 @@ body {
   height: 100%;
   max-height: 100%;
 
+  text-rendering: optimizeLegibility;
+
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 
-  text-rendering: optimizeLegibility;
-
   -webkit-user-drag: none;
 
   -ms-content-zooming: none;
@@ -148,12 +149,9 @@ sub {
 }
 
 ion-app {
-  position: absolute;
+  @include position(0);
 
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  position: absolute;
 
   z-index: $z-index-page-container;
 

packages/core/src/components/app/fonts/ionicons.scss

@@ -23,8 +23,6 @@ ion-icon {
   display: inline-block;
 
   font-family: "Ionicons";
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
@@ -33,6 +31,9 @@ ion-icon {
   text-transform: none;
   speak: none;
 
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
   @include rtl() {
     &[aria-label^="arrow"]::before,
     &[flip-rtl]::before {

packages/core/src/components/datetime/datetime.vars.scss

@@ -13,4 +13,4 @@ $datetime-text-min-height:            1.2em !default;
 $datetime-text-line-height:           1.2 !default;
 
 /// @prop - Opacity of the disabled datetime
-$datetime-disabled-opacity:           .4 !default;
+$datetime-disabled-opacity:           .4 !default;

packages/core/src/components/nav/nav.scss

@@ -4,12 +4,9 @@
 
 
 ion-nav {
-  position: absolute;
+  @include position(0);
 
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  position: absolute;
 
   z-index: $z-index-page-container;
 
@@ -20,12 +17,9 @@ ion-nav {
 }
 
 .ion-page {
-  position: absolute;
+  @include position(0);
 
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  position: absolute;
 
   z-index: $z-index-page-container;
 

packages/core/src/components/page/page.scss

@@ -4,12 +4,9 @@
 
 
 ion-page {
-  position: absolute;
+  @include position(0);
 
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  position: absolute;
 
   z-index: $z-index-page-container;
 

packages/core/src/components/reorder/reorder.vars.scss

@@ -4,4 +4,4 @@
 // --------------------------------------------------
 
 /// @prop - Transform of the reorder when it isn't visible
-$reorder-initial-transform:         160% !default;
+$reorder-initial-transform:         160% !default;

packages/core/src/components/tabs/tabs.md.scss

@@ -38,12 +38,14 @@
 }
 
 .tabbar-md.scrollable ion-scroll {
+  @include margin(0, 8px);
+
   max-width: 650px;
-  margin: 0 8px;
 }
 
 .tabbar-md.scrollable ion-tab-button {
   overflow: hidden;
+
   flex: 1 0 auto;
 }
 

packages/core/src/components/tabs/tabs.scss

@@ -8,12 +8,9 @@
 // --------------------------------------------------
 
 ion-tabs {
-  position: absolute;
+  @include position(0);
 
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  position: absolute;
 
   z-index: $z-index-page-container;
 
@@ -79,11 +76,12 @@ ion-tabbar.placement-top {
 }
 
 ion-tab-button {
-  box-sizing: border-box;
   @include margin(0);
   @include text-align(center);
   @include border-radius(0);
 
+  box-sizing: border-box;
+
   position: relative;
   z-index: 0;
   display: flex;
@@ -228,6 +226,7 @@ ion-tabbar.scrollable ion-scroll {
 ion-tabbar.scrollable .scroll-inner {
   position: relative;
   display: flex;
+
   flex-direction: row;
 }
 

packages/core/src/components/toggle/toggle.md.scss

@@ -5,10 +5,10 @@
 // -----------------------------------------
 
 .toggle-md {
-  box-sizing: content-box;
-
   @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
 
+  box-sizing: content-box;
+
   position: relative;
 
   width: $toggle-md-track-width;