style(sass): fix sass lint warnings

packages/core/.sass-lint.yml

@@ -62,9 +62,12 @@ rules:
 
       # Box
 
+      - box-sizing
       - position
       - top
+      - right
       - bottom
+      - left
       - z-index
       - display
       - overflow
@@ -134,10 +137,13 @@ rules:
       - font
       - font-family
       - font-size
-      - font-smoothing
+      - -moz-osx-font-smoothing
+      - -webkit-font-smoothing
+      - font-smooth
       - font-style
       - font-variant
       - font-weight
+      - src
 
       - letter-spacing
       - line-height

packages/core/.scss-lint.yml

@@ -39,9 +39,12 @@ linters:
 
       # Box
 
+      - box-sizing
       - position
       - top
+      - right
       - bottom
+      - left
       - z-index
       - display
       - overflow
@@ -111,10 +114,13 @@ linters:
       - font
       - font-family
       - font-size
-      - font-smoothing
+      - -moz-osx-font-smoothing
+      - -webkit-font-smoothing
+      - font-smooth
       - font-style
       - font-variant
       - font-weight
+      - src
 
       - letter-spacing
       - line-height

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

@@ -39,8 +39,8 @@ body {
   height: 100%;
   max-height: 100%;
 
+  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
 
   text-rendering: optimizeLegibility;
 

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

@@ -12,11 +12,11 @@ $ionicons-font-path: $font-path !default;
 
 @font-face {
   font-family: "Ionicons";
+  font-style: normal;
+  font-weight: normal;
   src: url("#{$ionicons-font-path}/ionicons.woff2?v=#{$ionicons-version}") format("woff2"),
     url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
     url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype");
-  font-weight: normal;
-  font-style: normal;
 }
 
 ion-icon {

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

@@ -123,8 +123,8 @@
 }
 
 .button-outline-ios.activated.focused {
-  background-color: color-shade($button-ios-background-color, 12%);
   border-color: color-shade($button-ios-background-color, 12%);
+  background-color: color-shade($button-ios-background-color, 12%);
 }
 
 // iOS Outline Button Color Mixin
@@ -149,8 +149,8 @@
   }
 
   .button-outline-ios-#{$color-name}.activated.focused {
-    background-color: color-shade($color-base, 12%);
     border-color: color-shade($color-base, 12%);
+    background-color: color-shade($color-base, 12%);
   }
 }
 

packages/core/src/components/chip/chip.scss

@@ -4,14 +4,13 @@
 // --------------------------------------------------
 
 ion-chip {
+  box-sizing: border-box;
   display: inline-flex;
 
   align-self: center;
 
   font-weight: normal;
   vertical-align: middle;
-
-  box-sizing: border-box;
 }
 
 ion-chip ion-icon {

packages/core/src/components/item-sliding/item-sliding.scss

@@ -37,11 +37,11 @@ ion-item-options {
     justify-content: flex-start;
 
     &:not([side=right]) {
-      justify-content: flex-end;
-
       // scss-lint:disable PropertySpelling
       right: auto;
       left: 0;
+
+      justify-content: flex-end;
     }
   }
 }

packages/core/src/components/picker/picker.scss

@@ -63,6 +63,7 @@ ion-picker {
 }
 
 .picker-col {
+  box-sizing: content-box;
   position: relative;
   display: flex;
 
@@ -71,8 +72,6 @@ ion-picker {
 
   height: 100%;
 
-  box-sizing: content-box;
-
   contain: content;
 }
 

packages/core/src/components/slide/slide.scss

@@ -22,6 +22,7 @@ ion-slide {
 .swiper-slide {
   @include text-align(center);
 
+  box-sizing: border-box;
   position: relative;
 
   // Center slide text vertically
@@ -36,8 +37,6 @@ ion-slide {
   height: 100%;
 
   font-size: 18px;
-
-  box-sizing: border-box;
 }
 
 .swiper-slide img {

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

@@ -5,13 +5,12 @@
 // -----------------------------------------
 
 .toggle-ios {
+  box-sizing: content-box;
   position: relative;
 
   width: $toggle-ios-width;
   height: $toggle-ios-height;
 
-  box-sizing: content-box;
-
   contain: strict;
 }
 

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

@@ -5,6 +5,8 @@
 // -----------------------------------------
 
 .toggle-md {
+  box-sizing: content-box;
+
   @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
 
   position: relative;
@@ -12,8 +14,6 @@
   width: $toggle-md-track-width;
   height: $toggle-md-track-height;
 
-  box-sizing: content-box;
-
   contain: strict;
 }