chore(sass): update sass to match linter config

references #5797

ionic/util/functions.scss

@@ -3,11 +3,11 @@
 // --------------------------------------------------
 
 @function color-brightness($color-value) {
-  @return (red($color-value) * 0.299 + green($color-value) * 0.587 + blue($color-value) * 0.114) / 255 * 100%;
+  @return (red($color-value) * .299 + green($color-value) * .587 + blue($color-value) * .114) / 255 * 100%;
 }
 
 
-@function color-inverse($color-value, $dark: black, $light: white) {
+@function color-inverse($color-value, $dark: #000, $light: #fff) {
   $brightness: color-brightness($color-value);
   $red: red($color-value);
   $green: green($color-value);
@@ -29,17 +29,17 @@
 
 
 @function toolbar-button-inverse($color-value) {
-  @return color-inverse($color-value, $dark: $toolbar-md-button-color, $light: white);
+  @return color-inverse($color-value, $dark: $toolbar-md-button-color, $light: #fff);
 }
 
 
 @function color-shade($color-value, $amount:8%) {
   $lightness: lightness($color-value);
 
-  $shade: white;
+  $shade: #fff;
 
   @if ($lightness > 50) {
-    $shade: black;
+    $shade: #000;
   }
 
   @return mix($shade, $color-value, $amount);
@@ -57,7 +57,7 @@
 // String Replace Function
 // --------------------------------------------------
 
-@function str-replace($string, $search, $replace: '') {
+@function str-replace($string, $search, $replace: "") {
   $index: str-index($string, $search);
 
   @if $index {
@@ -72,5 +72,5 @@
 // --------------------------------------------------
 
 @function url-encode($val) {
-  @return str-replace($val, ' ', '%20');
+  @return str-replace($val, " ", "%20");
 }

ionic/util/mixins.scss

@@ -24,13 +24,15 @@
   &::-moz-placeholder { // Firefox 19+
     color: $color;
   }
+
   &:-ms-input-placeholder {
     color: $color;
   }
+
   &::-webkit-input-placeholder {
-    color: $color;
     // Safari placeholder margin issue
     text-indent: $text-indent;
+    color: $color;
   }
 }
 

ionic/util/util.scss

@@ -15,7 +15,7 @@ root-anchor {
 // --------------------------------------------------
 
 $focus-outline-border-color:   #51a7e8 !default;
-$focus-outline-box-shadow:     0px 0px 8px 0px $focus-outline-border-color !default;
+$focus-outline-box-shadow:     0 0 8px 0 $focus-outline-border-color !default;
 
 
 :focus,
@@ -26,15 +26,15 @@ $focus-outline-box-shadow:     0px 0px 8px 0px $focus-outline-border-color !defa
 .focus-outline {
 
   :focus {
-    outline-offset: -1px;
     outline: thin dotted;
+    outline-offset: -1px;
   }
 
   button:focus,
   [button]:focus {
     border-color: $focus-outline-border-color;
-    box-shadow: $focus-outline-box-shadow;
     outline: thin solid $focus-outline-border-color;
+    box-shadow: $focus-outline-box-shadow;
   }
 
   ion-input.input-has-focus,
@@ -61,9 +61,9 @@ focus-ctrl {
   button {
     position: fixed;
     top: 1px;
-    width: 9px;
     left: -9999px;
     z-index: 9999;
+    width: 9px;
     pointer-events: none;
   }
 }
@@ -76,14 +76,14 @@ $backdrop-color:      #000 !default;
 
 .backdrop {
   position: absolute;
-  z-index: $z-index-backdrop;
   top: 0;
   left: 0;
+  z-index: $z-index-backdrop;
+  display: block;
   width: 100%;
   height: 100%;
   background-color: $backdrop-color;
-  opacity: 0.01;
-  display: block;
+  opacity: .01;
   transform: translateZ(0);
 }
 
@@ -94,23 +94,23 @@ $backdrop-color:      #000 !default;
 // to avoid full-page reflows and paints which can cause flickers
 
 click-block {
-  display: block;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  opacity: 0;
   z-index: $z-index-click-block;
-  transform: translate3d(0px, -100%, 0px);
-  transform: translate3d(0px, calc(-100% + 1px), 0px);
+  display: block;
+  opacity: 0;
+  transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, calc(-100% + 1px), 0);
 
   // background: red;
   // opacity: .3;
 }
 
 .click-block-active {
-  transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0, 0, 0);
 }
 
 
@@ -121,21 +121,25 @@ click-block {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(359deg);
   }
 }
+
 ion-loading-icon {
   display: flex;
   align-self: center;
   margin: auto;
 
-  font-family: 'Ionicons';
-  &:before {
-    content: "\f44e";
-  }
+  font-family: "Ionicons";
+
   font-size: 128px;
-  color: #666666;
+  color: #666;
 
   animation: rotation 45s infinite linear;
+
+  &::before {
+    content: "\f44e";
+  }
 }