style(sass): fixing lint errors

references #5797

.scss-lint.yml

@@ -2,9 +2,15 @@
 
 # See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml
 
-exclude: 'ionic/components/slides/**'
+exclude:
+  - 'ionic/components/slides/**'
+  - 'ionic/components.*.scss'
+
 
 linters:
+  ColorVariable:
+    enabled: false
+
   DuplicateProperty:
     enabled: false
 

ionic/components/app/app.ios.scss

@@ -43,7 +43,7 @@ hr {
   sup,
   ion-icon {
     &[#{$color-name}] {
-      color: $color-value !important;
+      color: $color-value;
     }
   }
 }

ionic/components/app/app.md.scss

@@ -38,7 +38,7 @@ hr {
   sup,
   ion-icon {
     &[#{$color-name}] {
-      color: $color-value !important;
+      color: $color-value;
     }
   }
 }

ionic/components/app/app.wp.scss

@@ -38,7 +38,7 @@ hr {
   sup,
   ion-icon {
     &[#{$color-name}] {
-      color: $color-value !important;
+      color: $color-value;
     }
   }
 }

ionic/components/app/test/typography/main.html

@@ -7,11 +7,11 @@
 
   <h1>H1: The quick brown fox jumps over the lazy dog</h1>
 
-  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+  <h2 primary>H2: The quick brown fox jumps over the lazy dog</h2>
 
   <h3>H3: The quick brown fox jumps over the lazy dog</h3>
 
-  <h4>H4: The quick brown fox jumps over the lazy dog</h4>
+  <h4 danger>H4: The quick brown fox jumps over the lazy dog</h4>
 
   <h5>H5: The quick brown fox jumps over the lazy dog</h5>
 
@@ -19,9 +19,9 @@
 
   <p>
     I saw a werewolf with a Chinese menu in his hand.
-    Walking through the streets of Soho in the rain.
-    He was looking for a place called Lee Ho Fook's.
-    Gonna get a big dish of beef chow mein.
+    Walking through the <sub danger>streets</sub> of Soho in the rain.
+    He <i primary>was</i> looking for a place called Lee Ho Fook's.
+    Gonna get a <a secondary>big dish of beef chow mein.</a>
   </p>
 
   <p>
@@ -30,6 +30,7 @@
     Better stay away from him.
     He'll rip your lungs out, Jim.
     I'd like to meet his tailor.
-</p>
+    <ion-icon danger name="cut"></ion-icon>
+  </p>
 
 </ion-content>

ionic/components/spinner/spinner.scss

@@ -47,7 +47,7 @@ ion-spinner.spinner-paused svg {
 // --------------------------------------------------
 
 .spinner-bubbles circle {
-  fill: black;
+  fill: #000;
 }
 
 .spinner-bubbles svg {
@@ -72,7 +72,7 @@ ion-spinner.spinner-paused svg {
 
 .spinner-crescent circle {
   fill: transparent;
-  stroke: black;
+  stroke: #000;
   stroke-width: 4px;
   stroke-dasharray: 128px;
   stroke-dashoffset: 82px;

ionic/components/toolbar/toolbar.ios.scss

@@ -316,12 +316,6 @@ ion-buttons[right] {
 
     font-size: 2.8rem;
   }
-
-  // TODO remove the !important flag - temporary hack until we can remove the element style
-  // on transition
-  &.activated {
-    opacity: .4 !important;
-  }
 }
 
 .bar-button-menutoggle[end],

ionic/util/mixins.scss

@@ -50,8 +50,5 @@
 // --------------------------------------------------
 
 @mixin user-select-none() {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }

ionic/util/util.scss

@@ -1,13 +1,8 @@
 @import "../globals.core";
 
-.no-transition {
-  transition: none !important;
-}
-
 .hide,
 [hidden],
-template,
-root-anchor {
+template {
   display: none !important;
 }
 
@@ -37,13 +32,6 @@ $focus-outline-box-shadow:     0 0 8px 0 $focus-outline-border-color !default;
     box-shadow: $focus-outline-box-shadow;
   }
 
-  ion-input.input-has-focus,
-  button[ion-item]:focus,
-  a[ion-item]:focus {
-    border-color: $focus-outline-border-color;
-    box-shadow: inset $focus-outline-box-shadow !important;
-  }
-
   ion-input :focus {
     outline: none;
   }