diff --git a/.scss-lint.yml b/.scss-lint.yml
index 8c8e46fe17..3d89107c33 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -1,8 +1,13 @@
 # Default application configuration that all configurations inherit from.
 
-# See https://github.com/brigade/scss-lint/blob/master/config/default.yml for config
+# See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml
+
+exclude: 'ionic/components/slides/**'
 
 linters:
+  MergeableSelector:
+    enabled: true
+    force_nesting: false
 
   PropertySortOrder:
     enabled: true
@@ -20,6 +25,7 @@ linters:
       - left
       - z-index
       - display
+      - overflow
       - float
       - clear
       -
@@ -146,7 +152,6 @@ linters:
       - cursor
       - empty-cells
       - opacity
-      - overflow
       - quotes
       - speak
       - table-layout
@@ -166,6 +171,18 @@ linters:
       - transition-property
       - transition-timing-function
 
+  # This doesn't allow chaining between elements and attributes, ids or classes
+  # if we turn this on it breaks a lot of components
+  QualifyingElement:
+    enabled: false
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorFormat:
+    enabled: false
+    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+
   StringQuotes:
     enabled: true
     style: double_quotes
diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss
index 06a70e926a..975bda7126 100644
--- a/ionic/components/action-sheet/action-sheet.ios.scss
+++ b/ionic/components/action-sheet/action-sheet.ios.scss
@@ -54,12 +54,12 @@ ion-action-sheet {
 
 .action-sheet-title {
   padding: $action-sheet-ios-title-padding;
-  font-size: $action-sheet-ios-title-font-size;
-  color: $action-sheet-ios-title-color;
-  font-weight: $action-sheet-ios-title-font-weight;
-  border-radius: $action-sheet-ios-title-border-radius;
-  text-align: $action-sheet-ios-text-align;
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
+  border-radius: $action-sheet-ios-title-border-radius;
+  font-size: $action-sheet-ios-title-font-size;
+  font-weight: $action-sheet-ios-title-font-weight;
+  text-align: $action-sheet-ios-text-align;
+  color: $action-sheet-ios-title-color;
 }
 
 .action-sheet-button {
@@ -76,9 +76,9 @@ ion-action-sheet {
 
   &.activated {
     margin-top: -$action-sheet-ios-button-border-width;
-    background: $action-sheet-ios-button-background-activated;
-    border-bottom-color: $action-sheet-ios-button-background-activated;
     border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
+    border-bottom-color: $action-sheet-ios-button-background-activated;
+    background: $action-sheet-ios-button-background-activated;
   }
 }
 
diff --git a/ionic/components/action-sheet/action-sheet.md.scss b/ionic/components/action-sheet/action-sheet.md.scss
index c319695746..e7fe08f57b 100644
--- a/ionic/components/action-sheet/action-sheet.md.scss
+++ b/ionic/components/action-sheet/action-sheet.md.scss
@@ -29,19 +29,19 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
 .action-sheet-title {
   padding: $action-sheet-md-title-padding;
   font-size: $action-sheet-md-title-font-size;
-  color: $action-sheet-md-title-color;
   text-align: $action-sheet-md-text-align;
+  color: $action-sheet-md-title-color;
 }
 
 .action-sheet-button {
   position: relative;
+  overflow: hidden;
   padding: $action-sheet-md-button-padding;
   min-height: $action-sheet-md-button-min-height;
   font-size: $action-sheet-md-button-font-size;
+  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
-  text-align: $action-sheet-md-text-align;
-  overflow: hidden;
 
   &.activated {
     background: $action-sheet-md-button-background-activated;
@@ -51,9 +51,9 @@ $action-sheet-md-icon-margin:                           0 28px 0 0 !default;
 .action-sheet-icon {
   margin: $action-sheet-md-icon-margin;
   min-width: $action-sheet-md-icon-min-width;
+  font-size: $action-sheet-md-icon-font-size;
   text-align: $action-sheet-md-icon-text-align;
   vertical-align: $action-sheet-md-icon-vertical-align;
-  font-size: $action-sheet-md-icon-font-size;
 }
 
 .action-sheet-group {
diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss
index a66fd66ad8..6e9eced96d 100644
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -9,25 +9,24 @@ $action-sheet-max-width:                         500px !default;
 
 ion-action-sheet {
   position: absolute;
-  width: $action-sheet-width;
-  height: $action-sheet-width;
-  z-index: $z-index-overlay;
   top: 0;
   left: 0;
+  z-index: $z-index-overlay;
   display: block;
+  width: $action-sheet-width;
+  height: $action-sheet-width;
 }
 
 .action-sheet-wrapper {
   position: absolute;
-  width: $action-sheet-width;
-  max-width: $action-sheet-max-width;
-  z-index: $z-index-overlay-wrapper;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
+  z-index: $z-index-overlay-wrapper;
   display: block;
   margin: auto;
-
+  width: $action-sheet-width;
+  max-width: $action-sheet-max-width;
   transform: translate3d(0, 100%, 0);
 }
 
diff --git a/ionic/components/action-sheet/action-sheet.wp.scss b/ionic/components/action-sheet/action-sheet.wp.scss
index a87bed9545..11bfc5f20f 100644
--- a/ionic/components/action-sheet/action-sheet.wp.scss
+++ b/ionic/components/action-sheet/action-sheet.wp.scss
@@ -5,17 +5,18 @@
 // --------------------------------------------------
 
 $action-sheet-wp-text-align:                      left !default;
-$action-sheet-wp-background:                      #ffffff !default;
-$action-sheet-wp-box-shadow:                      0px -1px 0px rgba(0,0,0,0.2) !default;
+$action-sheet-wp-background:                      #fff !default;
+$action-sheet-wp-box-shadow-color:                rgba(0, 0, 0, .2) !default;
+$action-sheet-wp-box-shadow:                      0 -1px 0 $action-sheet-wp-box-shadow-color !default;
 $action-sheet-wp-group-margin-bottom:             8px !default;
 
 $action-sheet-wp-title-padding:                   19px 16px 17px !default;
-$action-sheet-wp-title-font-size:                 2.0rem !default;
-$action-sheet-wp-title-color:                     #4D4D4D !default;
+$action-sheet-wp-title-font-size:                 2rem !default;
+$action-sheet-wp-title-color:                     #4d4d4d !default;
 $action-sheet-wp-title-text-align:                $action-sheet-wp-text-align !default;
 
 $action-sheet-wp-button-height:                   4.8rem !default;
-$action-sheet-wp-button-text-color:               #4D4D4D !default;
+$action-sheet-wp-button-text-color:               #4d4d4d !default;
 $action-sheet-wp-button-font-size:                1.5rem !default;
 $action-sheet-wp-button-padding:                  0 16px !default;
 $action-sheet-wp-button-text-align:               $action-sheet-wp-text-align !default;
@@ -36,17 +37,17 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
 .action-sheet-title {
   padding: $action-sheet-wp-title-padding;
   font-size: $action-sheet-wp-title-font-size;
-  color: $action-sheet-wp-title-color;
   text-align: $action-sheet-wp-title-text-align;
+  color: $action-sheet-wp-title-color;
 }
 
 .action-sheet-button {
   padding: $action-sheet-wp-button-padding;
   min-height: $action-sheet-wp-button-height;
   font-size: $action-sheet-wp-button-font-size;
+  text-align: $action-sheet-wp-button-text-align;
   color: $action-sheet-wp-button-text-color;
   background: $action-sheet-wp-button-background;
-  text-align: $action-sheet-wp-button-text-align;
 
   &.activated {
     background: $action-sheet-wp-button-background-activated;
@@ -56,9 +57,9 @@ $action-sheet-wp-icon-margin:                     0 16px 0 0 !default;
 .action-sheet-icon {
   margin: $action-sheet-wp-icon-margin;
   min-width: $action-sheet-wp-icon-min-width;
+  font-size: $action-sheet-wp-icon-font-size;
   text-align: $action-sheet-wp-icon-text-align;
   vertical-align: $action-sheet-wp-icon-vertical-align;
-  font-size: $action-sheet-wp-icon-font-size;
 }
 
 .action-sheet-group {
diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss
index d2fd8f6ca5..a6edb48987 100644
--- a/ionic/components/alert/alert.ios.scss
+++ b/ionic/components/alert/alert.ios.scss
@@ -18,7 +18,7 @@ $alert-ios-title-font-size:                     17px !default;
 $alert-ios-sub-title-font-size:                 14px !default;
 $alert-ios-sub-title-text-color:                #666 !default;
 
-$alert-ios-message-padding:                     0px 16px 21px !default;
+$alert-ios-message-padding:                     0 16px 21px !default;
 $alert-ios-message-text-color:                  inherit !default;
 $alert-ios-message-text-align:                  center !default;
 $alert-ios-message-font-size:                   13px !default;
@@ -29,7 +29,8 @@ $alert-ios-content-max-height:                  240px !default;
 $alert-ios-input-padding:                       6px !default;
 $alert-ios-input-margin-top:                    10px !default;
 $alert-ios-input-background-color:              #fff !default;
-$alert-ios-input-border:                        1px solid #ccc !default;
+$alert-ios-input-border-color:                  #ccc !default;
+$alert-ios-input-border:                        1px solid $alert-ios-input-border-color !default;
 $alert-ios-input-border-radius:                 4px !default;
 
 $alert-ios-button-group-flex-wrap:              wrap !default;
@@ -67,12 +68,12 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 
 
 .alert-wrapper {
+  overflow: hidden;
   max-width: $alert-ios-max-width;
   border-radius: $alert-ios-border-radius;
   background-color: $alert-ios-background;
 
   box-shadow: $alert-ios-box-shadow;
-  overflow: hidden;
 }
 
 
@@ -80,14 +81,14 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 // --------------------------------------------------
 
 .alert-head {
-  text-align: $alert-ios-head-text-align;
   padding: $alert-ios-head-padding;
+  text-align: $alert-ios-head-text-align;
 }
 
 .alert-title {
   margin-top: $alert-ios-title-margin-top;
-  font-weight: $alert-ios-title-font-weight;
   font-size: $alert-ios-title-font-size;
+  font-weight: $alert-ios-title-font-weight;
 }
 
 .alert-sub-title {
@@ -103,8 +104,8 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 .alert-input-group {
   padding: $alert-ios-message-padding;
   font-size: $alert-ios-message-font-size;
-  color: $alert-ios-message-text-color;
   text-align: $alert-ios-message-text-align;
+  color: $alert-ios-message-text-color;
 }
 
 .alert-message {
@@ -134,9 +135,9 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 
 .alert-radio-group,
 .alert-checkbox-group {
+  overflow: scroll;
   max-height: $alert-ios-content-max-height;
   border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
-  overflow: scroll;
 }
 
 .alert-tappable {
@@ -149,11 +150,11 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 // --------------------------------------------------
 
 .alert-radio-label {
+  overflow: hidden;
   flex: 1;
   order: 0;
   padding: $alert-ios-radio-label-padding;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
 }
 
@@ -166,18 +167,18 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 .alert-radio[aria-checked=true] {
   color: $alert-ios-button-text-color;
 
-  .alert-radio-icon:after {
+  .alert-radio-icon::after {
     position: absolute;
-    border-width: 2px;
-    border-style: solid;
-    border-color: $alert-ios-button-text-color;
     top: 13px;
     left: 7px;
     width: 4px;
     height: 10px;
-    border-left: none;
-    border-top: none;
-    content: '';
+    border-width: 2px;
+    border-top-width: 0;
+    border-left-width: 0;
+    border-style: solid;
+    border-color: $alert-ios-button-text-color;
+    content: "";
     transform: rotate(45deg);
   }
 }
@@ -187,42 +188,42 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 // --------------------------------------------------
 
 .alert-checkbox-label {
+  overflow: hidden;
   flex: 1;
   order: 0;
   padding: 13px;
   text-align: auto;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
 }
 
 .alert-checkbox-icon {
-  margin: 10px 6px 10px 16px;
   position: relative;
+  margin: 10px 6px 10px 16px;
   width: $alert-ios-checkbox-icon-size;
   height: $alert-ios-checkbox-icon-size;
-  border-radius: $alert-ios-checkbox-icon-border-radius;
   border-width: $alert-ios-checkbox-icon-border-width;
   border-style: $alert-ios-checkbox-icon-border-style;
+  border-radius: $alert-ios-checkbox-icon-border-radius;
   border-color: $alert-ios-checkbox-icon-border-color-off;
   background-color: $alert-ios-checkbox-background-color-off;
 }
 
 .alert-checkbox[aria-checked=true] .alert-checkbox-icon {
-  background-color: $alert-ios-checkbox-background-color-on;
   border-color: $alert-ios-checkbox-icon-border-color-on;
+  background-color: $alert-ios-checkbox-background-color-on;
 
   .alert-checkbox-inner {
     position: absolute;
-    border-width: $alert-ios-checkbox-icon-checkmark-width;
-    border-style: $alert-ios-checkbox-icon-checkmark-style;
-    border-color: $alert-ios-checkbox-icon-checkmark-color;
     top: 4px;
     left: 7px;
     width: 4px;
     height: 9px;
-    border-left: none;
-    border-top: none;
+    border-width: $alert-ios-checkbox-icon-checkmark-width;
+    border-top-width: 0;
+    border-left-width: 0;
+    border-style: $alert-ios-checkbox-icon-checkmark-style;
+    border-color: $alert-ios-checkbox-icon-checkmark-color;
     transform: rotate(45deg);
   }
 }
@@ -237,21 +238,21 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 }
 
 .alert-button {
-  margin: $alert-ios-button-margin;
+  overflow: hidden;
   flex: $alert-ios-button-flex;
+  margin: $alert-ios-button-margin;
   min-width: $alert-ios-button-min-width;
-  font-size: $alert-ios-button-font-size;
   height: $alert-ios-button-min-height;
-  border-radius: $alert-ios-button-border-radius;
   border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
   border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
+  border-radius: $alert-ios-button-border-radius;
+  font-size: $alert-ios-button-font-size;
   color: $alert-ios-button-text-color;
   background-color: $alert-ios-button-background-color;
-  overflow: hidden;
 
   &:last-child {
-    font-weight: $alert-ios-button-main-font-weight;
     border-right: 0;
+    font-weight: $alert-ios-button-main-font-weight;
   }
 
   &.activated {
diff --git a/ionic/components/alert/alert.md.scss b/ionic/components/alert/alert.md.scss
index ea3f5d4c39..ce154a5e60 100644
--- a/ionic/components/alert/alert.md.scss
+++ b/ionic/components/alert/alert.md.scss
@@ -7,7 +7,8 @@
 $alert-md-max-width:                          280px !default;
 $alert-md-border-radius:                      2px !default;
 $alert-md-background-color:                   #fafafa !default;
-$alert-md-box-shadow:                         0px 16px 20px rgba(0, 0, 0, 0.4) !default;
+$alert-md-box-shadow-color:                   rgba(0, 0, 0, .4) !default;
+$alert-md-box-shadow:                         0 16px 20px $alert-md-box-shadow-color !default;
 
 $alert-md-head-text-align:                    left !default;
 $alert-md-head-padding:                       24px 24px 20px 24px !default;
@@ -17,7 +18,7 @@ $alert-md-sub-title-font-size:                16px !default;
 
 $alert-md-message-font-size:                  15px !default;
 $alert-md-message-padding:                    0 24px 24px 24px !default;
-$alert-md-message-text-color:                 rgba(0,0,0,.5) !default;
+$alert-md-message-text-color:                 rgba(0, 0, 0, .5) !default;
 $alert-md-message-padding-empty:              0 !default;
 
 $alert-md-content-max-height:                 240px !default;
@@ -25,7 +26,7 @@ $alert-md-content-max-height:                 240px !default;
 $alert-md-input-border-width:                 1px !default;
 $alert-md-input-border-style:                 solid !default;
 $alert-md-input-border-color:                 #dedede !default;
-$alert-md-input-text-color:                   #000000 !default;
+$alert-md-input-text-color:                   #000 !default;
 
 $alert-md-input-border-width-focused:         2px !default;
 $alert-md-input-border-style-focused:         $alert-md-input-border-style !default;
@@ -45,7 +46,7 @@ $alert-md-button-margin:                      0 8px 0 0 !default;
 $alert-md-button-font-weight:                 500 !default;
 $alert-md-button-text-color:                  map-get($colors-md, primary) !default;
 $alert-md-button-background-color:            transparent !default;
-$alert-md-button-background-color-activated:  rgba(158, 158, 158, 0.2) !default;
+$alert-md-button-background-color-activated:  rgba(158, 158, 158, .2) !default;
 $alert-md-button-border-radius:               2px !default;
 $alert-md-button-text-transform:              uppercase !default;
 $alert-md-button-text-align:                  right !default;
@@ -63,8 +64,8 @@ $alert-md-button-text-align:                  right !default;
 // --------------------------------------------------
 
 .alert-head {
-  text-align: $alert-md-head-text-align;
   padding: $alert-md-head-padding;
+  text-align: $alert-md-head-text-align;
 }
 
 .alert-title {
@@ -86,8 +87,8 @@ $alert-md-button-text-align:                  right !default;
 }
 
 .alert-message {
-  font-size: $alert-md-message-font-size;
   max-height: $alert-md-content-max-height;
+  font-size: $alert-md-message-font-size;
 
   &:empty {
     padding: $alert-md-message-padding-empty;
@@ -99,13 +100,13 @@ $alert-md-button-text-align:                  right !default;
 // --------------------------------------------------
 
 .alert-input {
+  margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
   border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
   color: $alert-md-input-text-color;
-  margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
 
   &:focus {
-    border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
     margin-bottom: $alert-md-input-margin-bottom - 1;
+    border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
   }
 }
 
@@ -116,16 +117,16 @@ $alert-md-button-text-align:                  right !default;
 .alert-radio-group,
 .alert-checkbox-group {
   position: relative;
+  overflow: auto;
+  max-height: $alert-md-content-max-height;
   border-top: 1px solid $alert-md-input-border-color;
   border-bottom: 1px solid $alert-md-input-border-color;
-  max-height: $alert-md-content-max-height;
-  overflow: auto;
 }
 
 .alert-tappable {
   position: relative;
-  overflow: hidden;
   display: flex;
+  overflow: hidden;
   min-height: 44px;
 }
 
@@ -134,11 +135,11 @@ $alert-md-button-text-align:                  right !default;
 // --------------------------------------------------
 
 .alert-radio-label {
-  flex: 1;
-  text-align: auto;
-  padding: 13px 26px;
-  text-overflow: ellipsis;
   overflow: hidden;
+  flex: 1;
+  padding: 13px 26px;
+  text-align: auto;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -147,25 +148,25 @@ $alert-md-button-text-align:                  right !default;
   top: 13px;
   left: 13px;
   display: block;
+  margin: 0;
   width: 16px;
   height: 16px;
-  margin: 0;
   border-width: 2px;
   border-style: solid;
-  border-color: darken($list-md-border-color, 40%);
   border-radius: 50%;
+  border-color: darken($list-md-border-color, 40%);
 
-  &:after {
+  &::after {
     position: absolute;
     top: 2px;
     left: 2px;
     width: 8px;
     height: 8px;
-    background-color: $alert-md-button-text-color;
     border-radius: 50%;
-    content: '';
-    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
+    background-color: $alert-md-button-text-color;
+    content: "";
     transform: scale3d(0, 0, 0);
+    transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
   }
 }
 
@@ -176,7 +177,7 @@ $alert-md-button-text-align:                  right !default;
     border-color: $alert-md-button-text-color;
   }
 
-  .alert-radio-icon:after {
+  .alert-radio-icon::after {
     transform: scale3d(1, 1, 1);
   }
 }
@@ -186,11 +187,11 @@ $alert-md-button-text-align:                  right !default;
 // --------------------------------------------------
 
 .alert-checkbox-label {
-  flex: 1;
-  text-align: auto;
-  padding: 13px 26px;
-  text-overflow: ellipsis;
   overflow: hidden;
+  flex: 1;
+  padding: 13px 26px;
+  text-align: auto;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -200,29 +201,29 @@ $alert-md-button-text-align:                  right !default;
   left: 13px;
   width: 16px;
   height: 16px;
-  border-radius: 2px;
   border-width: 2px;
   border-style: solid;
+  border-radius: 2px;
   border-color: darken($list-md-border-color, 40%);
   background-color: transparent;
 }
 
 .alert-checkbox[aria-checked=true] .alert-checkbox-icon {
-  background-color: $alert-md-button-text-color;
   border-color: $alert-md-button-text-color;
+  background-color: $alert-md-button-text-color;
 
-  &:after {
+  &::after {
     position: absolute;
-    border-width: 2px;
-    border-style: solid;
-    border-color: $alert-md-background-color;
     top: 0;
     left: 3px;
     width: 4px;
     height: 8px;
-    border-left: none;
-    border-top: none;
-    content: '';
+    border-width: 2px;
+    border-top-width: 0;
+    border-left-width: 0;
+    border-style: solid;
+    border-color: $alert-md-background-color;
+    content: "";
     transform: rotate(45deg);
   }
 }
@@ -232,25 +233,25 @@ $alert-md-button-text-align:                  right !default;
 // --------------------------------------------------
 
 .alert-button-group {
-  padding: $alert-md-button-group-padding;
-  justify-content: $alert-md-button-group-justify-content;
   flex-wrap: $alert-md-button-group-flex-wrap;
+  justify-content: $alert-md-button-group-justify-content;
+  padding: $alert-md-button-group-padding;
 }
 
 .alert-button {
-  padding: $alert-md-button-padding;
-  margin: $alert-md-button-margin;
-  font-weight: $alert-md-button-font-weight;
-  color: $alert-md-button-text-color;
-  background-color: $alert-md-button-background-color;
-  border-radius: $alert-md-button-border-radius;
-  text-transform: $alert-md-button-text-transform;
-  text-align: $alert-md-button-text-align;
-
   // necessary for ripple to work properly
   position: relative;
   overflow: hidden;
 
+  margin: $alert-md-button-margin;
+  padding: $alert-md-button-padding;
+  border-radius: $alert-md-button-border-radius;
+  font-weight: $alert-md-button-font-weight;
+  text-align: $alert-md-button-text-align;
+  text-transform: $alert-md-button-text-transform;
+  color: $alert-md-button-text-color;
+  background-color: $alert-md-button-background-color;
+
   &.activated {
     background-color: $alert-md-button-background-color-activated;
   }
diff --git a/ionic/components/alert/alert.scss b/ionic/components/alert/alert.scss
index 2f1a766bd9..e761bbee78 100644
--- a/ionic/components/alert/alert.scss
+++ b/ionic/components/alert/alert.scss
@@ -12,15 +12,15 @@ $alert-button-font-size:          14px !default;
 
 ion-alert {
   position: absolute;
-  z-index: $z-index-overlay;
   top: 0;
-  left: 0;
-  bottom: 0;
   right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-overlay;
 
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 
   input {
     width: 100%;
@@ -29,12 +29,10 @@ ion-alert {
 
 .alert-wrapper {
   z-index: $z-index-overlay-wrapper;
-  min-width: $alert-min-width;
-  max-height: $alert-max-height;
-
   display: flex;
   flex-direction: column;
-
+  min-width: $alert-min-width;
+  max-height: $alert-max-height;
   opacity: 0;
 }
 
@@ -44,7 +42,7 @@ ion-alert {
 }
 
 .alert-sub-title {
-  margin: 5px 0 0 0;
+  margin: 5px 0 0;
   padding: 0;
   font-weight: normal;
 }
@@ -56,9 +54,9 @@ ion-alert {
 .alert-input {
   @include placeholder();
 
+  padding: 10px 0;
   border: 0;
   background: inherit;
-  padding: 10px 0;
 }
 
 .alert-button-group {
@@ -72,11 +70,11 @@ ion-alert {
 }
 
 .alert-button {
+  z-index: 0;
   display: block;
   margin: 0;
-  z-index: 0;
-  line-height: $alert-button-line-height;
   font-size: $alert-button-font-size;
+  line-height: $alert-button-line-height;
 }
 
 .alert-tappable {
diff --git a/ionic/components/alert/alert.wp.scss b/ionic/components/alert/alert.wp.scss
index e1586ff4a6..c10b5a42db 100644
--- a/ionic/components/alert/alert.wp.scss
+++ b/ionic/components/alert/alert.wp.scss
@@ -4,7 +4,7 @@
 // Windows Alerts
 // --------------------------------------------------
 
-$alert-wp-backdrop-background:                 white !default;
+$alert-wp-backdrop-background:                 #fff !default;
 
 $alert-wp-width:                               100% !default;
 $alert-wp-max-width:                           520px !default;
@@ -12,7 +12,7 @@ $alert-wp-border-radius:                       0 !default;
 $alert-wp-border-width:                        1px !default;
 $alert-wp-border-style:                        solid !default;
 $alert-wp-border-color:                        map-get($colors-wp, primary) !default;
-$alert-wp-background:                          #E6E6E6 !default;
+$alert-wp-background:                          #e6e6e6 !default;
 
 $alert-wp-head-text-align:                     left !default;
 $alert-wp-head-padding:                        20px 22px 5px 22px !default;
@@ -31,7 +31,7 @@ $alert-wp-content-max-height:                  240px !default;
 $alert-wp-input-border-width:                  2px !default;
 $alert-wp-input-border-style:                  $alert-wp-border-style !default;
 $alert-wp-input-border-color:                  $input-wp-border-color !default;
-$alert-wp-input-text-color:                    #000000 !default;
+$alert-wp-input-text-color:                    #000 !default;
 $alert-wp-input-margin:                        5px 0 5px 0 !default;
 $alert-wp-input-padding:                       0 8px !default;
 $alert-wp-input-line-height:                   3rem !default;
@@ -40,7 +40,7 @@ $alert-wp-input-border-color-focused:          map-get($colors-wp, primary) !def
 
 $alert-wp-button-padding:                      5px !default;
 $alert-wp-button-text-color:                   #000 !default;
-$alert-wp-button-background:                   #B8B8B8 !default;
+$alert-wp-button-background:                   #b8b8b8 !default;
 $alert-wp-button-border-radius:                0 !default;
 $alert-wp-button-width:                        49.5% !default;
 $alert-wp-button-margin-right:                 1% !default;
@@ -68,17 +68,17 @@ ion-alert {
 .alert-wrapper {
   width: $alert-wp-width;
   max-width: $alert-wp-max-width;
+  border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color;
   border-radius: $alert-wp-border-radius;
   background: $alert-wp-background;
-  border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color;
 }
 
 // Windows Alert Header
 // --------------------------------------------------
 
 .alert-head {
-  text-align: $alert-wp-head-text-align;
   padding: $alert-wp-head-padding;
+  text-align: $alert-wp-head-text-align;
 }
 
 .alert-title {
@@ -101,8 +101,8 @@ ion-alert {
 }
 
 .alert-message {
-  font-size: $alert-wp-message-font-size;
   max-height: $alert-wp-content-max-height;
+  font-size: $alert-wp-message-font-size;
 
   &:empty {
     padding: $alert-wp-message-padding-empty;
@@ -114,11 +114,11 @@ ion-alert {
 // --------------------------------------------------
 
 .alert-input {
-  border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
-  color: $alert-wp-input-text-color;
   margin: $alert-wp-input-margin;
   padding: $alert-wp-input-padding;
+  border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
   line-height: $alert-wp-input-line-height;
+  color: $alert-wp-input-text-color;
 
   &:focus {
     border-color: $alert-wp-input-border-color-focused;
@@ -132,16 +132,16 @@ ion-alert {
 .alert-radio-group,
 .alert-checkbox-group {
   position: relative;
+  overflow: auto;
+  max-height: $alert-wp-content-max-height;
   border-top: 0 solid $alert-wp-input-border-color;
   border-bottom: 0 solid $alert-wp-input-border-color;
-  max-height: $alert-wp-content-max-height;
-  overflow: auto;
 }
 
 .alert-tappable {
   position: relative;
-  overflow: hidden;
   display: flex;
+  overflow: hidden;
   min-height: 44px;
 }
 
@@ -150,11 +150,11 @@ ion-alert {
 // --------------------------------------------------
 
 .alert-radio-label {
-  flex: 1;
-  text-align: auto;
-  padding: 13px 26px;
-  text-overflow: ellipsis;
   overflow: hidden;
+  flex: 1;
+  padding: 13px 26px;
+  text-align: auto;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -163,24 +163,24 @@ ion-alert {
   top: 13px;
   left: 13px;
   display: block;
+  margin: 0;
   width: 16px;
   height: 16px;
-  margin: 0;
   border-width: 2px;
   border-style: solid;
-  border-color: $alert-wp-radio-border-color;
   border-radius: 50%;
+  border-color: $alert-wp-radio-border-color;
 
-  &:after {
+  &::after {
     position: absolute;
     top: 2px;
     left: 2px;
+    display: none;
     width: 8px;
     height: 8px;
-    background: $alert-wp-radio-background;
     border-radius: 50%;
-    content: '';
-    display: none;
+    background: $alert-wp-radio-background;
+    content: "";
   }
 }
 
@@ -191,7 +191,7 @@ ion-alert {
     border-color: $alert-wp-radio-border-color;
   }
 
-  .alert-radio-icon:after {
+  .alert-radio-icon::after {
     display: block;
   }
 }
@@ -201,11 +201,11 @@ ion-alert {
 // --------------------------------------------------
 
 .alert-checkbox-label {
-  flex: 1;
-  text-align: auto;
-  padding: 13px 26px;
-  text-overflow: ellipsis;
   overflow: hidden;
+  flex: 1;
+  padding: 13px 26px;
+  text-align: auto;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -218,9 +218,9 @@ ion-alert {
   left: 13px;
   width: 16px;
   height: 16px;
-  border-radius: $alert-wp-checkbox-border-radius;
   border-width: 2px;
   border-style: solid;
+  border-radius: $alert-wp-checkbox-border-radius;
   border-color: $alert-wp-checkbox-border-color;
   background: transparent;
 }
@@ -229,22 +229,22 @@ ion-alert {
 // --------------------------------------------------
 
 .alert-checkbox[aria-checked=true] .alert-checkbox-icon {
-  background: $alert-wp-checkbox-background;
   border-color: $alert-wp-checkbox-background;
+  background: $alert-wp-checkbox-background;
 }
 
 .alert-checkbox[aria-checked=true] .alert-checkbox-inner {
   position: absolute;
-  border-width: 1px;
-  border-style: solid;
-  border-color: $alert-wp-background;
   top: -2px;
   left: 3px;
   width: 6px;
   height: 12px;
-  border-left: none;
-  border-top: none;
-  content: '';
+  border-width: 1px;
+  border-top-width: 0;
+  border-left-width: 0;
+  border-style: solid;
+  border-color: $alert-wp-background;
+  content: "";
   transform: rotate(45deg);
 }
 
@@ -253,13 +253,13 @@ ion-alert {
 // --------------------------------------------------
 
 .alert-button-group {
-  padding: $alert-wp-button-group-padding;
-  justify-content: $alert-wp-button-group-justify-content;
   flex-wrap: $alert-wp-button-group-flex-wrap;
+  justify-content: $alert-wp-button-group-justify-content;
+  padding: $alert-wp-button-group-padding;
 
   &.vertical .alert-button {
-    width: $alert-wp-button-group-vertical-width;
     margin-top: $alert-wp-button-group-vertical-margin-top;
+    width: $alert-wp-button-group-vertical-width;
 
     &:first-child:not(:only-child) {
       margin-top: 0;
@@ -269,11 +269,11 @@ ion-alert {
 
 .alert-button {
   padding: $alert-wp-button-padding;
+  width: $alert-wp-button-width;
+  border-radius: $alert-wp-button-border-radius;
+  font-weight: $alert-wp-button-font-weight;
   color: $alert-wp-button-text-color;
   background: $alert-wp-button-background;
-  border-radius: $alert-wp-button-border-radius;
-  width: $alert-wp-button-width;
-  font-weight: $alert-wp-button-font-weight;
 
   &:first-child:not(:only-child) {
     margin-right: $alert-wp-button-margin-right;
diff --git a/ionic/components/app/app.ios.scss b/ionic/components/app/app.ios.scss
index a559aa3109..13e3200e87 100644
--- a/ionic/components/app/app.ios.scss
+++ b/ionic/components/app/app.ios.scss
@@ -17,7 +17,7 @@ a {
 }
 
 hr {
-  background-color: rgba(0, 0, 0, 0.12);
+  background-color: rgba(0, 0, 0, .12);
 }
 
 &.hairlines hr {
@@ -25,7 +25,12 @@ hr {
 }
 
 @each $color-name, $color-value in $colors-ios {
-  h1, h2, h3, h4, h5, h6,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
   p,
   span,
   a:not([button]),
diff --git a/ionic/components/app/app.md.scss b/ionic/components/app/app.md.scss
index f81d16910f..bb9f37a846 100644
--- a/ionic/components/app/app.md.scss
+++ b/ionic/components/app/app.md.scss
@@ -16,11 +16,16 @@ a {
 }
 
 hr {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: rgba(0, 0, 0, .08);
 }
 
 @each $color-name, $color-value in $colors-md {
-  h1, h2, h3, h4, h5, h6,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
   p,
   span,
   a:not([button]),
diff --git a/ionic/components/app/app.wp.scss b/ionic/components/app/app.wp.scss
index 46b58beed1..383f1ebd32 100644
--- a/ionic/components/app/app.wp.scss
+++ b/ionic/components/app/app.wp.scss
@@ -16,11 +16,16 @@ a {
 }
 
 hr {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: rgba(0, 0, 0, .08);
 }
 
 @each $color-name, $color-value in $colors-wp {
-  h1, h2, h3, h4, h5, h6,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
   p,
   span,
   a:not([button]),
diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index 32e0a9ce94..a3cf7dafe5 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -1,4 +1,4 @@
-/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
+// ! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css
 
 
 // HTML5 display definitions
@@ -35,8 +35,8 @@ strong {
 
 // Remove border when inside `a` element in IE 8/9/10.
 img {
-  border: 0;
   max-width: 100%;
+  border: 0;
 }
 
 // Correct overflow not hidden in IE 9/10/11.
@@ -54,9 +54,9 @@ figure {
 }
 
 hr {
-  box-sizing: content-box;
   height: 1px;
   border-width: 0;
+  box-sizing: content-box;
 }
 
 // Contain overflow in all browsers.
@@ -90,13 +90,13 @@ label,
 input,
 select,
 textarea {
-  line-height: normal;
   font-family: inherit;
+  line-height: normal;
 }
 
 textarea {
-  height: auto;
   overflow: auto;
+  height: auto;
   font: inherit;
   color: inherit;
 }
@@ -105,9 +105,9 @@ form,
 input,
 optgroup,
 select {
-  color: inherit; // 1
-  font: inherit; // 2
   margin: 0; // 3
+  font: inherit; // 2
+  color: inherit; // 1
 }
 
 // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
@@ -118,8 +118,8 @@ select {
 html input[type="button"], // 1
 input[type="reset"],
 input[type="submit"] {
-  -webkit-appearance: button; // 2
   cursor: pointer; // 3
+  -webkit-appearance: button; // 2
 }
 
 // remove 300ms delay
@@ -145,18 +145,18 @@ textarea {
 
 button {
   border: 0;
-  line-height: 1;
   font-family: inherit;
-  font-variant: inherit;
   font-style: inherit;
+  font-variant: inherit;
+  line-height: 1;
   text-transform: none;
-  -webkit-appearance: button;
   cursor: pointer;
+  -webkit-appearance: button;
 }
 
 // Re-set default cursor for disabled elements.
 a[disabled],
-button[disabled]
+button[disabled],
 html input[disabled] {
   cursor: default;
 }
@@ -164,8 +164,8 @@ html input[disabled] {
 // Remove inner padding and border in Firefox 4+.
 button::-moz-focus-inner,
 input::-moz-focus-inner {
-  border: 0;
   padding: 0;
+  border: 0;
 }
 
 // Firefox's implementation doesn't respect box-sizing, padding, or width.
@@ -173,8 +173,8 @@ input::-moz-focus-inner {
 // 2. Remove excess padding in IE 8/9/10.
 input[type="checkbox"],
 input[type="radio"] {
-  box-sizing: border-box; // 1
   padding: 0; // 2
+  box-sizing: border-box; // 1
 }
 
 // Fix the cursor style for Chrome's increment/decrement buttons. For certain
diff --git a/ionic/components/app/scrollbars.scss b/ionic/components/app/scrollbars.scss
index b9647aed77..6132f86549 100644
--- a/ionic/components/app/scrollbars.scss
+++ b/ionic/components/app/scrollbars.scss
@@ -11,19 +11,19 @@
   }
 
   ::-webkit-scrollbar-thumb:vertical {
-    background: rgba(0, 0, 0, 0.4);
+    min-height: 10px;
     border: 2px solid transparent;
     border-radius: 20px;
+    background: rgba(0, 0, 0, .4);
     background-clip: padding-box;
-    min-height: 10px;
   }
 
   ::-webkit-scrollbar-thumb:vertical:active {
-    background: rgba(0, 0, 0, 0.6);
+    min-height: 10px;
     border: 2px solid transparent;
     border-radius: 20px;
+    background: rgba(0, 0, 0, .6);
     background-clip: padding-box;
-    min-height: 10px;
   }
 
-}
\ No newline at end of file
+}
diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index a793f5f51b..cfd63954d4 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -56,43 +56,45 @@ html {
 }
 
 body {
+  @include user-select-none();
+
   position: fixed;
   overflow: hidden;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
   margin: 0;
   padding: 0;
-  word-wrap: break-word;
 
-  touch-action: manipulation;
-
-  -webkit-user-drag: none;
-  -ms-content-zooming: none;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
 
   -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
+
   text-rendering: optimizeLegibility;
+  -webkit-user-drag: none;
+
+  -ms-content-zooming: none;
+  touch-action: manipulation;
+
+  word-wrap: break-word;
 
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   text-size-adjust: none;
-
-  @include user-select-none();
 }
 
 ion-app,
 ion-nav,
 ion-tabs {
-  display: flex;
-  flex-direction: column;
   position: absolute;
   top: 0;
   left: 0;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
 ion-navbar-section {
@@ -102,19 +104,19 @@ ion-navbar-section {
 }
 
 ion-content-section {
+  position: relative;
   display: block;
   flex: 1;
-  position: relative;
   width: 100%;
   height: 100%;
 }
 
 ion-page {
-  display: none;
-  flex-direction: column;
   position: absolute;
   top: 0;
   left: 0;
+  display: none;
+  flex-direction: column;
   width: 100%;
   height: 100%;
 
@@ -126,42 +128,42 @@ ion-page {
 ion-content {
   position: relative;
   display: block;
+  flex: 1;
   width: 100%;
   height: 100%;
-  flex: 1;
 }
 
 scroll-content {
   position: absolute;
-  z-index: $z-index-scroll-content;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
+  z-index: $z-index-scroll-content;
   display: block;
-  overflow-y: scroll;
   overflow-x: hidden;
+  overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
 }
 
 ion-tabbar {
-  display: block;
   position: absolute;
   top: 0;
   left: 0;
+  display: block;
   width: 100%;
   min-height: 50px;
 }
 
 ion-tab-section {
-  display: block;
   position: relative;
   top: 0;
   left: 0;
+  display: block;
+  overflow: hidden;
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
 ion-page.tab-subpage {
@@ -170,13 +172,13 @@ ion-page.tab-subpage {
 }
 
 ion-navbar {
-  display: block;
   position: absolute;
   top: 0;
   left: 0;
+  z-index: $z-index-navbar-section;
+  display: block;
   width: 100%;
   min-height: 50px;
-  z-index: $z-index-navbar-section;
 }
 
 ion-navbar-section ion-navbar.toolbar {
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index 4f5ffe3ed3..e012fd62b8 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -14,7 +14,7 @@ $headings-line-height:         1.2 !default;
 $h1-font-size:                 2.6rem !default;
 $h2-font-size:                 2.4rem !default;
 $h3-font-size:                 2.2rem !default;
-$h4-font-size:                 2.0rem !default;
+$h4-font-size:                 2rem !default;
 $h5-font-size:                 1.8rem !default;
 $h6-font-size:                 1.6rem !default;
 
@@ -28,20 +28,30 @@ a {
 }
 
 .enable-hover a:hover {
-  opacity: 0.7;
+  opacity: .7;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin-top: 1.6rem;
   margin-bottom: 1rem;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
 }
 
 [padding] {
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     &:first-child {
-      margin-top: -0.3rem;
+      margin-top: -.3rem;
     }
   }
 }
@@ -49,17 +59,17 @@ h1, h2, h3, h4, h5, h6 {
 h1 + h2,
 h1 + h3,
 h2 + h3 {
-  margin-top: -0.3rem;
+  margin-top: -.3rem;
 }
 
 h1 {
-  font-size: $h1-font-size;
   margin-top: 2rem;
+  font-size: $h1-font-size;
 }
 
 h2 {
-  font-size: $h2-font-size;
   margin-top: 1.8rem;
+  font-size: $h2-font-size;
 }
 
 h3 {
@@ -84,18 +94,18 @@ small {
 
 sub,
 sup {
+  position: relative;
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 
 sup {
-  top: -0.5em;
+  top: -.5em;
 }
 
 sub {
-  bottom: -0.25em;
+  bottom: -.25em;
 }
 
 // Text Alignment
diff --git a/ionic/components/badge/badge.ios.scss b/ionic/components/badge/badge.ios.scss
index ec7fba50aa..ed77a9d640 100644
--- a/ionic/components/badge/badge.ios.scss
+++ b/ionic/components/badge/badge.ios.scss
@@ -9,8 +9,8 @@ $badge-ios-background-color:          map-get($colors-ios, primary) !default;
 
 ion-badge {
   border-radius: $badge-ios-border-radius;
-  background-color: $badge-ios-background-color;
   color: color-inverse($badge-ios-background-color);
+  background-color: $badge-ios-background-color;
 }
 
 
@@ -20,8 +20,8 @@ ion-badge {
 @each $color-name, $color-value in $colors-ios {
 
   .badge-#{$color-name} {
-    background-color: $color-value;
     color: color-inverse($color-value);
+    background-color: $color-value;
   }
 
 }
diff --git a/ionic/components/badge/badge.md.scss b/ionic/components/badge/badge.md.scss
index a4ecd6b738..ca1eb2f056 100644
--- a/ionic/components/badge/badge.md.scss
+++ b/ionic/components/badge/badge.md.scss
@@ -9,8 +9,8 @@ $badge-md-background-color:         map-get($colors-md, primary) !default;
 
 ion-badge {
   border-radius: $badge-md-border-radius;
-  background-color: $badge-md-background-color;
   color: color-inverse($badge-md-background-color);
+  background-color: $badge-md-background-color;
 }
 
 
@@ -20,8 +20,8 @@ ion-badge {
 @each $color-name, $color-value in $colors-md {
 
   .badge-#{$color-name} {
-    background-color: $color-value;
     color: color-inverse($color-value);
+    background-color: $color-value;
   }
 
 }
diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss
index 53e5a7aa96..8892304734 100644
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -13,14 +13,14 @@ ion-badge {
   padding: 3px 8px;
   min-width: 10px;
 
-  vertical-align: baseline;
-  text-align: center;
-  white-space: nowrap;
-
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
   line-height: 1;
 
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+
   &:empty {
     display: none;
   }
diff --git a/ionic/components/badge/badge.wp.scss b/ionic/components/badge/badge.wp.scss
index ccd0ea18a6..a3adcd5c18 100644
--- a/ionic/components/badge/badge.wp.scss
+++ b/ionic/components/badge/badge.wp.scss
@@ -9,8 +9,8 @@ $badge-wp-background-color:         map-get($colors-wp, primary) !default;
 
 ion-badge {
   border-radius: $badge-wp-border-radius;
-  background-color: $badge-wp-background-color;
   color: color-inverse($badge-wp-background-color);
+  background-color: $badge-wp-background-color;
 }
 
 
@@ -20,8 +20,8 @@ ion-badge {
 @each $color-name, $color-value in $colors-wp {
 
   .badge-#{$color-name} {
-    background-color: $color-value;
     color: color-inverse($color-value);
+    background-color: $color-value;
   }
 
 }
diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab.scss
index 1762615177..80c09aff0f 100644
--- a/ionic/components/button/button-fab.scss
+++ b/ionic/components/button/button-fab.scss
@@ -8,18 +8,15 @@ $button-fab-size:           56px !default;
 
 .button-fab {
   position: absolute;
-  width: $button-fab-size;
-  height: $button-fab-size;
-  line-height: $button-fab-size;
-  min-width: 0;
-  vertical-align: middle;
-
-  border-radius: 50%;
-  background-clip: padding-box;
-
   overflow: hidden;
-
+  width: $button-fab-size;
+  min-width: 0;
+  height: $button-fab-size;
+  border-radius: 50%;
   font-size: 14px;
+  line-height: $button-fab-size;
+  vertical-align: middle;
+  background-clip: padding-box;
 
   ion-icon {
     flex: 1;
diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss
index 878e1d33a3..178e64db7b 100644
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -5,27 +5,27 @@
 
 
 .button-icon-left ion-icon {
-  padding-right: 0.3em;
+  padding-right: .3em;
   font-size: 1.4em;
-  line-height: 0.67;
+  line-height: .67;
   pointer-events: none;
 }
 
 .button-icon-right ion-icon {
-  padding-left: 0.4em;
+  padding-left: .4em;
   font-size: 1.4em;
-  line-height: 0.67;
+  line-height: .67;
   pointer-events: none;
 }
 
 .button-icon-only {
   padding: 0;
-  min-width: 0.9em;
+  min-width: .9em;
 
   ion-icon {
-    padding: 0 0.5em;
+    padding: 0 .5em;
     font-size: 1.8em;
-    line-height: 0.67;
+    line-height: .67;
     pointer-events: none;
   }
 }
diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss
index 5daae74cdc..7a6735ca07 100644
--- a/ionic/components/button/button.ios.scss
+++ b/ionic/components/button/button.ios.scss
@@ -4,22 +4,22 @@
 // iOS Button
 // --------------------------------------------------
 
-$button-ios-margin:                   0.4rem 0.2rem !default;
+$button-ios-margin:                   .4rem .2rem !default;
 $button-ios-padding:                  0 1em !default;
 $button-ios-font-size:                1.6rem !default;
 $button-ios-height:                   2.8em !default;
 $button-ios-color:                    map-get($colors-ios, primary) !default;
 $button-ios-color-activated:          color-shade($button-ios-color) !default;
 $button-ios-text-color:               color-inverse($button-ios-color) !default;
-$button-ios-hover-opacity:            0.8 !default;
+$button-ios-hover-opacity:            .8 !default;
 $button-ios-border-radius:            4px !default;
 
 $button-ios-large-font-size:          2rem !default;
 $button-ios-large-height:             2.8em !default;
-$button-ios-large-padding:            1.0em !default;
+$button-ios-large-padding:            1em !default;
 $button-ios-small-font-size:          1.3rem !default;
 $button-ios-small-height:             2.1em !default;
-$button-ios-small-padding:            0.9em !default;
+$button-ios-small-padding:            .9em !default;
 $button-ios-small-icon-font-size:     1.3em !default;
 
 
@@ -31,20 +31,20 @@ $button-ios-small-icon-font-size:     1.3em !default;
   padding: $button-ios-padding;
 
   height: $button-ios-height;
+  border-radius: $button-ios-border-radius;
   font-size: $button-ios-font-size;
 
-  border-radius: $button-ios-border-radius;
   color: $button-ios-text-color;
   background-color: $button-ios-color;
 
   &:hover:not(.disable-hover) {
-    opacity: $button-ios-hover-opacity;
     text-decoration: none;
+    opacity: $button-ios-hover-opacity;
   }
 
   &.activated {
-    opacity: 1;
     background-color: $button-ios-color-activated;
+    opacity: 1;
   }
 }
 
@@ -83,18 +83,18 @@ $button-ios-small-icon-font-size:     1.3em !default;
   padding: 0 $button-ios-small-padding;
   height: $button-ios-small-height;
   font-size: $button-ios-small-font-size;
-}
 
-.button-small.button-icon-only ion-icon {
-  font-size: $button-ios-small-icon-font-size;
+  &.button-icon-only ion-icon {
+    font-size: $button-ios-small-icon-font-size;
+  }
 }
 
 // iOS Block Button
 // --------------------------------------------------
 
 .button-block {
-  margin-left: 0;
   margin-right: 0;
+  margin-left: 0;
 }
 
 // iOS Full Button
@@ -103,9 +103,9 @@ $button-ios-small-icon-font-size:     1.3em !default;
 .button-full {
   margin-right: 0;
   margin-left: 0;
-  border-radius: 0;
   border-right-width: 0;
   border-left-width: 0;
+  border-radius: 0;
 }
 
 // iOS Outline Button
@@ -114,15 +114,15 @@ $button-ios-small-icon-font-size:     1.3em !default;
 .button-outline {
   border-width: 1px;
   border-style: solid;
+  border-radius: 4px;
   border-color: $button-ios-color;
   color: $button-ios-color;
   background-color: transparent;
-  border-radius: 4px;
 
   &.activated {
-    opacity: 1;
     color: $background-ios-color;
     background-color: $button-ios-color;
+    opacity: 1;
   }
 }
 
@@ -159,13 +159,13 @@ $button-ios-small-icon-font-size:     1.3em !default;
   background-color: transparent;
 
   &.activated {
-    opacity: 0.4;
     background-color: transparent;
+    opacity: .4;
   }
 
   &:hover:not(.disable-hover) {
-    opacity: 0.6;
     color: $button-ios-color;
+    opacity: .6;
   }
 }
 
@@ -178,11 +178,11 @@ $button-ios-small-icon-font-size:     1.3em !default;
   .button-clear-#{$color-name} {
     $fg-color: $color-value;
     border-color: transparent;
-    background-color: transparent;
     color: $fg-color;
+    background-color: transparent;
 
     &.activated {
-      opacity: 0.4;
+      opacity: .4;
     }
 
     &:hover:not(.disable-hover) {
diff --git a/ionic/components/button/button.md.scss b/ionic/components/button/button.md.scss
index f6dc060d81..8e17b4b58d 100644
--- a/ionic/components/button/button.md.scss
+++ b/ionic/components/button/button.md.scss
@@ -4,34 +4,35 @@
 // Material Design Button
 // --------------------------------------------------
 
-$button-md-margin:                         0.4rem 0.2rem !default;
+$button-md-margin:                         .4rem .2rem !default;
 $button-md-padding:                        0 1.1em !default;
 $button-md-font-size:                      1.4rem !default;
 $button-md-height:                         3.6rem !default;
-$button-md-box-shadow:                     0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
-$button-md-box-shadow-active:              0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !default;
+$button-md-box-shadow:                     0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
+$button-md-box-shadow-active:              0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default;
 
 $button-md-border-radius:                  2px !default;
-$button-md-animation-curve:                cubic-bezier(0.4, 0, 0.2, 1) !default;
+$button-md-animation-curve:                cubic-bezier(.4, 0, .2, 1) !default;
 $button-md-transition-duration:            300ms !default;
 
-$button-md-clear-hover-background-color:   rgba(158, 158, 158, 0.1) !default;
-$button-md-clear-active-background-color:  rgba(158, 158, 158, 0.2) !default;
+$button-md-clear-hover-background-color:   rgba(158, 158, 158, .1) !default;
+$button-md-clear-active-background-color:  rgba(158, 158, 158, .2) !default;
+$button-md-clear-ripple-background-color:  #999 !default;
 
-$button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
-$button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
+$button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
+$button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
 
 $button-md-color:                          map-get($colors-md, primary) !default;
 $button-md-color-activated:                color-shade($button-md-color) !default;
 $button-md-text-color:                     color-inverse($button-md-color) !default;
-$button-md-hover-opacity:                  0.8 !default;
+$button-md-hover-opacity:                  .8 !default;
 
 $button-md-large-font-size:                2rem !default;
 $button-md-large-height:                   2.8em !default;
-$button-md-large-padding:                  1.0em !default;
+$button-md-large-padding:                  1em !default;
 $button-md-small-font-size:                1.3rem !default;
 $button-md-small-height:                   2.1em !default;
-$button-md-small-padding:                  0.9em !default;
+$button-md-small-padding:                  .9em !default;
 $button-md-small-icon-font-size:           1.4em !default;
 
 
@@ -44,15 +45,14 @@ $button-md-small-icon-font-size:           1.4em !default;
   height: $button-md-height;
   border-radius: $button-md-border-radius;
 
-  font-weight: 500;
   font-size: $button-md-font-size;
+  font-weight: 500;
 
+  text-transform: uppercase;
   color: $button-md-text-color;
   background-color: $button-md-color;
   box-shadow: $button-md-box-shadow;
 
-  text-transform: uppercase;
-
   transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
               background-color $button-md-transition-duration $button-md-animation-curve,
               color $button-md-transition-duration $button-md-animation-curve;
@@ -62,8 +62,8 @@ $button-md-small-icon-font-size:           1.4em !default;
   }
 
   &.activated {
-    box-shadow: $button-md-box-shadow-active;
     background-color: $button-md-color-activated;
+    box-shadow: $button-md-box-shadow-active;
   }
 
   ion-button-effect {
@@ -90,8 +90,8 @@ $button-md-small-icon-font-size:           1.4em !default;
     }
 
     &.activated {
-      opacity: 1;
       background-color: $background-color-activated;
+      opacity: 1;
     }
 
     ion-button-effect {
@@ -115,18 +115,18 @@ $button-md-small-icon-font-size:           1.4em !default;
   padding: 0 $button-md-small-padding;
   height: $button-md-small-height;
   font-size: $button-md-small-font-size;
-}
 
-.button-small.button-icon-only ion-icon {
-  font-size: $button-md-small-icon-font-size;
+  &.button-icon-only ion-icon {
+    font-size: $button-md-small-icon-font-size;
+  }
 }
 
 // Material Design Block Button
 // --------------------------------------------------
 
 .button-block {
-  margin-left: 0;
   margin-right: 0;
+  margin-left: 0;
 }
 
 // Material Design Full Button
@@ -135,9 +135,9 @@ $button-md-small-icon-font-size:           1.4em !default;
 .button-full {
   margin-right: 0;
   margin-left: 0;
-  border-radius: 0;
   border-right-width: 0;
   border-left-width: 0;
+  border-radius: 0;
 }
 
 // Material Design Outline Button
@@ -147,8 +147,8 @@ $button-md-small-icon-font-size:           1.4em !default;
   border-width: 1px;
   border-style: solid;
   border-color: $button-md-color;
-  background-color: transparent;
   color: $button-md-color;
+  background-color: transparent;
   box-shadow: none;
 
   &:hover:not(.disable-hover) {
@@ -156,9 +156,9 @@ $button-md-small-icon-font-size:           1.4em !default;
   }
 
   &.activated {
-    opacity: 1;
-    box-shadow: none;
     background-color: transparent;
+    box-shadow: none;
+    opacity: 1;
   }
 
   ion-button-effect {
@@ -175,8 +175,8 @@ $button-md-small-icon-font-size:           1.4em !default;
   .button-outline-#{$color-name} {
     $fg-color: color-shade($color-value, 5%);
     border-color: $fg-color;
-    background-color: transparent;
     color: $fg-color;
+    background-color: transparent;
 
     &:hover:not(.disable-hover) {
       background-color: $button-md-clear-hover-background-color;
@@ -199,10 +199,10 @@ $button-md-small-icon-font-size:           1.4em !default;
 
 .button-clear {
   border-color: transparent;
-  opacity: 1;
-  box-shadow: none;
-  background-color: transparent;
   color: $button-md-color;
+  background-color: transparent;
+  box-shadow: none;
+  opacity: 1;
 
   &.activated {
     background-color: $button-md-clear-active-background-color;
@@ -214,7 +214,7 @@ $button-md-small-icon-font-size:           1.4em !default;
   }
 
   ion-button-effect {
-    background-color: #999;
+    background-color: $button-md-clear-ripple-background-color;
   }
 }
 
@@ -227,8 +227,8 @@ $button-md-small-icon-font-size:           1.4em !default;
   .button-clear-#{$color-name} {
     $fg-color: $color-value;
     border-color: transparent;
-    background-color: transparent;
     color: $fg-color;
+    background-color: transparent;
 
     &.activated {
       background-color: $button-md-clear-active-background-color;
@@ -284,10 +284,10 @@ ion-button-effect {
   border-radius: 50%;
 
   background-color: $ripple-background-color;
-  opacity: 0.2;
+  opacity: .2;
 
-  pointer-events: none;
   transition-timing-function: ease-in-out;
+  pointer-events: none;
 }
 
 
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index ac4eeaf672..4e3fdcea3d 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -8,44 +8,45 @@ $button-round-border-radius:      64px !default;
 
 
 .button {
-  position: relative;
-  display: inline-block;
-  transition: background-color, opacity 100ms linear;
-  z-index: 0;
+  @include user-select-none();
+  @include appearance(none);
 
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  position: relative;
+  z-index: 0;
+  display: inline-block;
   overflow: hidden;
 
   text-align: center;
+  text-overflow: ellipsis;
   text-transform: none;
-  font-kerning: none;
 
+  white-space: nowrap;
+  cursor: pointer;
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
 
-  cursor: pointer;
-  @include user-select-none();
-  @include appearance(none);
+  transition: background-color, opacity 100ms linear;
+  font-kerning: none;
 }
 
 .button-inner {
   display: flex;
-  flex-shrink: 0;
   flex-flow: row nowrap;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
 
-a.button, a[button] {
+a.button,
+a[button] {
   text-decoration: none;
 }
 
 .button[disabled] {
-  opacity: 0.4;
-  cursor: default !important;
+  cursor: default;
+  opacity: .4;
   pointer-events: none;
 }
 
@@ -58,7 +59,7 @@ a.button, a[button] {
   clear: both;
   width: 100%;
 
-  &:after {
+  &::after {
     clear: both;
   }
 }
@@ -70,6 +71,14 @@ a.button, a[button] {
 .button-full {
   display: block;
   width: 100%;
+
+  // Full Outline Button
+  // --------------------------------------------------
+  &.button-outline {
+    border-right-width: 0;
+    border-left-width: 0;
+    border-radius: 0;
+  }
 }
 
 
@@ -80,12 +89,3 @@ a.button, a[button] {
   padding: $button-round-padding;
   border-radius: $button-round-border-radius;
 }
-
-// Full Outline Button
-// --------------------------------------------------
-
-.button-full.button-outline {
-  border-left-width: 0;
-  border-right-width: 0;
-  border-radius: 0;
-}
diff --git a/ionic/components/button/button.wp.scss b/ionic/components/button/button.wp.scss
index df12a50bd6..17b3e4c100 100644
--- a/ionic/components/button/button.wp.scss
+++ b/ionic/components/button/button.wp.scss
@@ -4,7 +4,7 @@
 // Windows Button
 // --------------------------------------------------
 
-$button-wp-margin:                                    0.4rem 0.2rem !default;
+$button-wp-margin:                                    .4rem .2rem !default;
 $button-wp-padding:                                   0 1.1em !default;
 $button-wp-font-size:                                 1.4rem !default;
 $button-wp-height:                                    3.6rem !default;
@@ -18,15 +18,15 @@ $button-wp-background-color-activated:                color-shade($button-wp-bac
 $button-wp-text-color:                                color-inverse($button-wp-background-color) !default;
 
 // Clear button
-$button-wp-clear-background-color-hover:              rgba(158, 158, 158, 0.1) !default;
-$button-wp-clear-background-color-activated:          rgba(158, 158, 158, 0.2) !default;
+$button-wp-clear-background-color-hover:              rgba(158, 158, 158, .1) !default;
+$button-wp-clear-background-color-activated:          rgba(158, 158, 158, .2) !default;
 $button-wp-clear-background-color:                    transparent !default;
 $button-wp-clear-text-color:                          $button-wp-background-color !default;
 
 // Outline button
 $button-wp-outline-background-color:                  transparent !default;
 $button-wp-outline-background-color-activated:        $button-wp-background-color !default;
-$button-wp-outline-background-color-opacity:          0.16 !default;
+$button-wp-outline-background-color-opacity:          .16 !default;
 $button-wp-outline-border-width:                      1px !default;
 $button-wp-outline-border-color:                      $button-wp-background-color !default;
 $button-wp-outline-text-color:                        $button-wp-background-color !default;
@@ -34,12 +34,12 @@ $button-wp-outline-text-color:                        $button-wp-background-colo
 // Large button
 $button-wp-large-font-size:                           2rem !default;
 $button-wp-large-height:                              2.8em !default;
-$button-wp-large-padding:                             0 1.0em !default;
+$button-wp-large-padding:                             0 1em !default;
 
 // Small button
 $button-wp-small-font-size:                           1.3rem !default;
 $button-wp-small-height:                              2.1em !default;
-$button-wp-small-padding:                             0 0.9em !default;
+$button-wp-small-padding:                             0 .9em !default;
 $button-wp-small-icon-font-size:                      1.4em !default;
 
 // FAB button
@@ -52,8 +52,8 @@ $button-wp-fab-border-radius:                         50% !default;
   margin: $button-wp-margin;
   padding: $button-wp-padding;
   height: $button-wp-height;
-  border-radius: $button-wp-border-radius;
   border: $button-wp-border-width solid $button-wp-border-color;
+  border-radius: $button-wp-border-radius;
 
   font-size: $button-wp-font-size;
 
@@ -110,18 +110,18 @@ $button-wp-fab-border-radius:                         50% !default;
   padding: $button-wp-small-padding;
   height: $button-wp-small-height;
   font-size: $button-wp-small-font-size;
-}
 
-.button-small.button-icon-only ion-icon {
-  font-size: $button-wp-small-icon-font-size;
+  &.button-icon-only ion-icon {
+    font-size: $button-wp-small-icon-font-size;
+  }
 }
 
 // Windows Block Button
 // --------------------------------------------------
 
 .button-block {
-  margin-left: 0;
   margin-right: 0;
+  margin-left: 0;
 }
 
 // Windows Full Button
@@ -130,9 +130,9 @@ $button-wp-fab-border-radius:                         50% !default;
 .button-full {
   margin-right: 0;
   margin-left: 0;
-  border-radius: 0;
   border-right-width: 0;
   border-left-width: 0;
+  border-radius: 0;
 }
 
 // Windows Outline Button
@@ -142,8 +142,8 @@ $button-wp-fab-border-radius:                         50% !default;
   border-width: $button-wp-outline-border-width;
   border-style: solid;
   border-color: $button-wp-outline-border-color;
-  background-color: $button-wp-outline-background-color;
   color: $button-wp-outline-text-color;
+  background-color: $button-wp-outline-background-color;
 
   &:hover:not(.disable-hover) {
     background-color: $button-wp-clear-background-color-hover;
@@ -182,8 +182,8 @@ $button-wp-fab-border-radius:                         50% !default;
 // --------------------------------------------------
 
 .button-clear {
-  background-color: $button-wp-clear-background-color;
   color: $button-wp-clear-text-color;
+  background-color: $button-wp-clear-background-color;
 
   &.activated {
     background-color: $button-wp-clear-background-color-activated;
diff --git a/ionic/components/card/card.ios.scss b/ionic/components/card/card.ios.scss
index 965e76618b..5677d442ef 100644
--- a/ionic/components/card/card.ios.scss
+++ b/ionic/components/card/card.ios.scss
@@ -18,7 +18,8 @@ $card-ios-padding-media-top:           10px !default;
 $card-ios-padding-media-bottom:        9px !default;
 
 $card-ios-background-color:            $list-ios-background-color !default;
-$card-ios-box-shadow:                  0 1px 2px rgba(0,0,0,.3) !default;
+$card-ios-box-shadow-color:            rgba(0, 0, 0, .3) !default;
+$card-ios-box-shadow:                  0 1px 2px $card-ios-box-shadow-color !default;
 $card-ios-border-radius:               2px !default;
 $card-ios-font-size:                   1.4rem !default;
 
@@ -36,11 +37,11 @@ $card-ios-header-color:                #333 !default;
 
 ion-card {
   margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
+  border-radius: $card-ios-border-radius;
   font-size: $card-ios-font-size;
 
   background: $card-ios-background-color;
   box-shadow: $card-ios-box-shadow;
-  border-radius: $card-ios-border-radius;
 
   ion-list {
     margin-bottom: 0;
@@ -55,12 +56,12 @@ ion-card {
 
     > .item:last-child,
     > ion-item-sliding:last-child .item {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 
   .item-inner {
-    border: none;
+    border: 0;
   }
 
   ion-card-content {
@@ -88,10 +89,10 @@ ion-card {
 
   ion-card-title {
     display: block;
-    line-height: 1.2;
-    padding: $card-ios-title-padding;
     margin: $card-ios-title-margin;
+    padding: $card-ios-title-padding;
     font-size: $card-ios-title-font-size;
+    line-height: 1.2;
     color: $card-ios-title-text-color;
   }
 
@@ -102,7 +103,7 @@ ion-card {
   }
 
   h2 {
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.6rem;
     font-weight: normal;
   }
@@ -111,14 +112,14 @@ ion-card {
   h4,
   h5,
   h6 {
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.4rem;
     font-weight: normal;
   }
 
   p {
-    font-size: 1.4rem;
     margin: 0 0 2px;
+    font-size: 1.4rem;
     color: $card-ios-text-color;
   }
 
diff --git a/ionic/components/card/card.md.scss b/ionic/components/card/card.md.scss
index 195a9d8632..14a9320382 100644
--- a/ionic/components/card/card.md.scss
+++ b/ionic/components/card/card.md.scss
@@ -21,7 +21,7 @@ $card-md-avatar-size:                 4rem !default;
 $card-md-thumbnail-size:              8rem !default;
 
 $card-md-background-color:            $list-md-background-color !default;
-$card-md-box-shadow:                  0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$card-md-box-shadow:                  0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 $card-md-border-radius:               2px !default;
 $card-md-font-size:                   1.4rem !default;
 $card-md-line-height:                 1.5 !default;
@@ -39,11 +39,11 @@ $card-md-header-color:                #222 !default;
 
 ion-card {
   margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
+  border-radius: $card-md-border-radius;
   font-size: $card-md-font-size;
 
   background: $card-md-background-color;
   box-shadow: $card-md-box-shadow;
-  border-radius: $card-md-border-radius;
 
   ion-list {
     margin-bottom: 0;
@@ -58,12 +58,12 @@ ion-card {
 
     > .item:last-child,
     > ion-item-sliding:last-child .item {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 
   .item-inner {
-    border: none;
+    border: 0;
   }
 
   ion-card-content {
@@ -90,10 +90,10 @@ ion-card {
 
   ion-card-title {
     display: block;
-    line-height: 1.2;    
-    padding: $card-md-title-padding;
     margin: $card-md-title-margin;
+    padding: $card-md-title-padding;
     font-size: $card-md-title-font-size;
+    line-height: 1.2;
     color: $card-md-title-text-color;
   }
 
@@ -105,7 +105,7 @@ ion-card {
   }
 
   h2 {
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.6rem;
     font-weight: normal;
     color: $card-md-text-color;
@@ -115,17 +115,17 @@ ion-card {
   h4,
   h5,
   h6 {
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.4rem;
     font-weight: normal;
     color: $card-md-text-color;
   }
 
   p {
-    font-size: 1.4rem;
     margin: 0 0 2px;
-    line-height: 1.5;
+    font-size: 1.4rem;
     font-weight: normal;
+    line-height: 1.5;
     color: $card-md-text-color;
   }
 
diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss
index 8d6024b3eb..0a3655a5ae 100644
--- a/ionic/components/card/card.scss
+++ b/ionic/components/card/card.scss
@@ -17,8 +17,8 @@ ion-card img {
 ion-card-header {
   display: block;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 ion-card-content {
diff --git a/ionic/components/card/card.wp.scss b/ionic/components/card/card.wp.scss
index 471abc4702..24ebcf1faf 100644
--- a/ionic/components/card/card.wp.scss
+++ b/ionic/components/card/card.wp.scss
@@ -21,7 +21,8 @@ $card-wp-avatar-size:                 4rem !default;
 $card-wp-thumbnail-size:              8rem !default;
 
 $card-wp-background-color:            $list-wp-background-color !default;
-$card-wp-box-shadow:                  0px 1px 1px 1px rgba(0, 0, 0, 0.2) !default;
+$card-wp-box-shadow-color:            rgba(0, 0, 0, .2) !default;
+$card-wp-box-shadow:                  0 1px 1px 1px $card-wp-box-shadow-color !default;
 $card-wp-border-radius:               1px !default;
 $card-wp-font-size:                   1.4rem !default;
 $card-wp-line-height:                 1.5 !default;
@@ -29,7 +30,7 @@ $card-wp-line-height:                 1.5 !default;
 $card-wp-text-color:                  #222 !default;
 $card-wp-title-font-size:             2.4rem !default;
 $card-wp-title-padding:               8px 0 8px 0 !default;
-$card-wp-title-margin:                2px 0 2px !default;
+$card-wp-title-margin:                2px 0 !default;
 $card-wp-title-text-color:            #222 !default;
 
 $card-wp-header-font-size:            1.6rem !default;
@@ -39,10 +40,10 @@ $card-wp-header-color:                #222 !default;
 
 ion-card {
   margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left;
+  border-radius: $card-wp-border-radius;
   font-size: $card-wp-font-size;
 
   background: $card-wp-background-color;
-  border-radius: $card-wp-border-radius;
   box-shadow: $card-wp-box-shadow;
 
   ion-list {
@@ -58,12 +59,12 @@ ion-card {
 
     > .item:last-child,
     > ion-item-sliding:last-child .item {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 
   .item-inner {
-    border: none;
+    border: 0;
   }
 
   ion-card-content {
@@ -90,10 +91,10 @@ ion-card {
 
   ion-card-title {
     display: block;
-    line-height: 1.2;
-    padding: $card-wp-title-padding;
     margin: $card-wp-title-margin;
+    padding: $card-wp-title-padding;
     font-size: $card-wp-title-font-size;
+    line-height: 1.2;
     color: $card-wp-title-text-color;
   }
 
@@ -105,7 +106,7 @@ ion-card {
   }
 
   h2 {
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.6rem;
     font-weight: normal;
     color: $card-wp-text-color;
@@ -115,17 +116,17 @@ ion-card {
   h4,
   h5,
   h6 {
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.4rem;
     font-weight: normal;
     color: $card-wp-text-color;
   }
 
   p {
-    font-size: 1.4rem;
     margin: 0 0 2px;
-    line-height: 1.5;
+    font-size: 1.4rem;
     font-weight: normal;
+    line-height: 1.5;
     color: $card-wp-text-color;
   }
 
diff --git a/ionic/components/checkbox/checkbox.ios.scss b/ionic/components/checkbox/checkbox.ios.scss
index 10e0974e4f..a7832aa508 100644
--- a/ionic/components/checkbox/checkbox.ios.scss
+++ b/ionic/components/checkbox/checkbox.ios.scss
@@ -19,7 +19,7 @@ $checkbox-ios-icon-checkmark-color:       $background-ios-color !default;
 
 $checkbox-ios-media-margin:               $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
 
-$checkbox-ios-disabled-opacity:           0.3 !default;
+$checkbox-ios-disabled-opacity:           .3 !default;
 
 
 ion-checkbox {
@@ -35,9 +35,9 @@ ion-checkbox {
   position: relative;
   width: $checkbox-ios-icon-size;
   height: $checkbox-ios-icon-size;
-  border-radius: $checkbox-ios-icon-border-radius;
   border-width: $checkbox-ios-icon-border-width;
   border-style: $checkbox-ios-icon-border-style;
+  border-radius: $checkbox-ios-icon-border-radius;
   border-color: $checkbox-ios-icon-border-color-off;
   background-color: $checkbox-ios-background-color-off;
 }
@@ -47,8 +47,8 @@ ion-checkbox {
 // -----------------------------------------
 
 .checkbox-checked {
-  background-color: $checkbox-ios-background-color-on;
   border-color: $checkbox-ios-icon-border-color-on;
+  background-color: $checkbox-ios-background-color-on;
 }
 
 
@@ -57,15 +57,15 @@ ion-checkbox {
 
 .checkbox-checked .checkbox-inner {
   position: absolute;
-  border-width: $checkbox-ios-icon-checkmark-width;
-  border-style: $checkbox-ios-icon-checkmark-style;
-  border-color: $checkbox-ios-icon-checkmark-color;
   top: 4px;
   left: 7px;
   width: 4px;
   height: 9px;
-  border-left: none;
-  border-top: none;
+  border-width: $checkbox-ios-icon-checkmark-width;
+  border-top-width: 0;
+  border-left-width: 0;
+  border-style: $checkbox-ios-icon-checkmark-style;
+  border-color: $checkbox-ios-icon-checkmark-color;
   transform: rotate(45deg);
 }
 
@@ -96,8 +96,8 @@ ion-checkbox {
 @mixin checkbox-theme-ios($color-name, $bg-on) {
 
   ion-checkbox[#{$color-name}] .checkbox-checked {
-    background-color: $bg-on;
     border-color: $bg-on;
+    background-color: $bg-on;
 
     .checkbox-inner {
       border-color: color-inverse($bg-on);
diff --git a/ionic/components/checkbox/checkbox.md.scss b/ionic/components/checkbox/checkbox.md.scss
index 8c50b78c0a..d8ed7fab11 100644
--- a/ionic/components/checkbox/checkbox.md.scss
+++ b/ionic/components/checkbox/checkbox.md.scss
@@ -9,7 +9,7 @@ $checkbox-md-border-bottom-color:        $list-md-border-color !default;
 $checkbox-md-padding:                    $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
 $checkbox-md-margin:                     0 !default;
 $checkbox-md-media-margin:               $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
-$checkbox-md-disabled-opacity:           0.3 !default;
+$checkbox-md-disabled-opacity:           .3 !default;
 
 $checkbox-md-icon-background-color-off:  $list-md-background-color !default;
 $checkbox-md-icon-background-color-on:   map-get($colors-md, primary) !default;
@@ -26,7 +26,7 @@ $checkbox-md-icon-border-color-off:      darken($list-md-border-color, 40%) !def
 $checkbox-md-icon-border-color-on:       map-get($colors-md, primary) !default;
 
 $checkbox-md-transition-duration:        280ms !default;
-$checkbox-md-transition-easing:          cubic-bezier(.4,0,.2,1) !default;
+$checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;
 
 
 ion-checkbox {
@@ -42,14 +42,14 @@ ion-checkbox {
   position: relative;
   width: $checkbox-md-icon-size;
   height: $checkbox-md-icon-size;
-  border-radius: $checkbox-md-icon-border-radius;
   border-width: $checkbox-md-icon-border-width;
   border-style: $checkbox-md-icon-border-style;
+  border-radius: $checkbox-md-icon-border-radius;
   border-color: $checkbox-md-icon-border-color-off;
   background-color: $checkbox-md-icon-background-color-off;
 
-  transition-property: background;
   transition-duration: $checkbox-md-transition-duration;
+  transition-property: background;
   transition-timing-function: $checkbox-md-transition-easing;
 }
 
@@ -58,8 +58,8 @@ ion-checkbox {
 // -----------------------------------------
 
 .checkbox-checked {
-  background-color: $checkbox-md-icon-background-color-on;
   border-color: $checkbox-md-icon-border-color-on;
+  background-color: $checkbox-md-icon-background-color-on;
 }
 
 
@@ -68,15 +68,15 @@ ion-checkbox {
 
 .checkbox-checked .checkbox-inner {
   position: absolute;
-  border-width: $checkbox-md-icon-checkmark-width;
-  border-style: $checkbox-md-icon-checkmark-style;
-  border-color: $checkbox-md-icon-checkmark-color;
   top: 0;
   left: 4px;
   width: 5px;
   height: 10px;
-  border-left: none;
-  border-top: none;
+  border-width: $checkbox-md-icon-checkmark-width;
+  border-top-width: 0;
+  border-left-width: 0;
+  border-style: $checkbox-md-icon-checkmark-style;
+  border-color: $checkbox-md-icon-checkmark-color;
   transform: rotate(45deg);
 }
 
@@ -111,8 +111,8 @@ ion-checkbox + .item-inner ion-label {
 @mixin checkbox-theme-md($color-name, $bg-on) {
 
   ion-checkbox[#{$color-name}] .checkbox-checked {
-    background-color: $bg-on;
     border-color: $bg-on;
+    background-color: $bg-on;
 
     .checkbox-inner {
       border-color: color-inverse($bg-on);
diff --git a/ionic/components/checkbox/checkbox.wp.scss b/ionic/components/checkbox/checkbox.wp.scss
index d18c2aedfa..1a1c26d086 100644
--- a/ionic/components/checkbox/checkbox.wp.scss
+++ b/ionic/components/checkbox/checkbox.wp.scss
@@ -9,7 +9,7 @@ $checkbox-wp-border-bottom-color:        $list-wp-border-color !default;
 $checkbox-wp-padding:                    $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default;
 $checkbox-wp-margin:                     0 !default;
 $checkbox-wp-media-margin:               $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default;
-$checkbox-wp-disabled-opacity:           0.3 !default;
+$checkbox-wp-disabled-opacity:           .3 !default;
 
 $checkbox-wp-icon-background-color-off:  $list-wp-background-color !default;
 $checkbox-wp-icon-background-color-on:   map-get($colors-wp, primary) !default;
@@ -22,7 +22,7 @@ $checkbox-wp-icon-checkmark-color:       $background-wp-color !default;
 $checkbox-wp-icon-border-width:          2px !default;
 $checkbox-wp-icon-border-style:          solid !default;
 $checkbox-wp-icon-border-radius:         0 !default;
-$checkbox-wp-icon-border-color-off:      #333333 !default;
+$checkbox-wp-icon-border-color-off:      #333 !default;
 $checkbox-wp-icon-border-color-on:       map-get($colors-wp, primary) !default;
 
 
@@ -39,9 +39,9 @@ ion-checkbox {
   position: relative;
   width: $checkbox-wp-icon-size;
   height: $checkbox-wp-icon-size;
-  border-radius: $checkbox-wp-icon-border-radius;
   border-width: $checkbox-wp-icon-border-width;
   border-style: $checkbox-wp-icon-border-style;
+  border-radius: $checkbox-wp-icon-border-radius;
   border-color: $checkbox-wp-icon-border-color-off;
   background-color: $checkbox-wp-icon-background-color-off;
 }
@@ -51,8 +51,8 @@ ion-checkbox {
 // -----------------------------------------
 
 .checkbox-checked {
-  background-color: $checkbox-wp-icon-background-color-on;
   border-color: $checkbox-wp-icon-border-color-on;
+  background-color: $checkbox-wp-icon-background-color-on;
 }
 
 
@@ -61,15 +61,15 @@ ion-checkbox {
 
 .checkbox-checked .checkbox-inner {
   position: absolute;
-  border-width: $checkbox-wp-icon-checkmark-width;
-  border-style: $checkbox-wp-icon-checkmark-style;
-  border-color: $checkbox-wp-icon-checkmark-color;
   top: -2px;
   left: 3px;
   width: 6px;
   height: 12px;
-  border-left: none;
-  border-top: none;
+  border-width: $checkbox-wp-icon-checkmark-width;
+  border-top-width: 0;
+  border-left-width: 0;
+  border-style: $checkbox-wp-icon-checkmark-style;
+  border-color: $checkbox-wp-icon-checkmark-color;
   transform: rotate(45deg);
 }
 
@@ -104,8 +104,8 @@ ion-checkbox + .item-inner ion-label {
 @mixin checkbox-theme-wp($color-name, $bg-on) {
 
   ion-checkbox[#{$color-name}] .checkbox-checked {
-    background-color: $bg-on;
     border-color: $bg-on;
+    background-color: $bg-on;
 
     .checkbox-inner {
       border-color: color-inverse($bg-on);
diff --git a/ionic/components/chip/chip.ios.scss b/ionic/components/chip/chip.ios.scss
index f8c7a27042..041977af13 100644
--- a/ionic/components/chip/chip.ios.scss
+++ b/ionic/components/chip/chip.ios.scss
@@ -3,10 +3,6 @@
 // Material Design Chip
 // --------------------------------------------------
 
-ion-chip {
-
-}
-
 
 // Generate Material Design Chip Colors
 // --------------------------------------------------
@@ -15,8 +11,8 @@ ion-chip {
 
   ion-chip {
     ion-icon[#{$color-name}] {
+      color: color-inverse($color-value);
       background-color: $color-value;
-      color: color-inverse($color-value) !important;
     }
   }
 
diff --git a/ionic/components/chip/chip.md.scss b/ionic/components/chip/chip.md.scss
index e2f1292f4a..06ac4fa8c7 100644
--- a/ionic/components/chip/chip.md.scss
+++ b/ionic/components/chip/chip.md.scss
@@ -3,10 +3,6 @@
 // Material Design Chip
 // --------------------------------------------------
 
-ion-chip {
-
-}
-
 
 // Generate Material Design Chip Colors
 // --------------------------------------------------
@@ -15,8 +11,8 @@ ion-chip {
 
   ion-chip {
     ion-icon[#{$color-name}] {
+      color: color-inverse($color-value);
       background-color: $color-value;
-      color: color-inverse($color-value) !important;
     }
   }
 
diff --git a/ionic/components/chip/chip.scss b/ionic/components/chip/chip.scss
index 7660d9b5bc..8046cf1941 100644
--- a/ionic/components/chip/chip.scss
+++ b/ionic/components/chip/chip.scss
@@ -3,33 +3,30 @@
 // Chip
 // --------------------------------------------------
 
-$chip-background-color:      rgba(0,0,0,0.12) !default;
+$chip-background-color:      rgba(0, 0, 0, .12) !default;
 $chip-font-size:             13px !default;
 $chip-height:                32px !default;
 $chip-border-radius:         16px !default;
 $chip-padding:               0 12px !default;
 $chip-margin:                2px 0 !default;
 
-$chip-label-color:           rgba(0,0,0,0.87) !default;
-
-$chip-icon-color:            rgba(0,0,0,0.87) !default;
+$chip-label-color:           rgba(0, 0, 0, .87) !default;
+$chip-icon-color:            rgba(0, 0, 0, .87) !default;
 
 ion-chip {
-  background: $chip-background-color;
-  display: inline-block;
-  height: $chip-height;
-  line-height: $chip-height;
-  border-radius: $chip-border-radius;
-  padding: $chip-padding;
-  margin: $chip-margin;
-
-  box-sizing: border-box;
-  vertical-align: middle;
   display: inline-flex;
   align-self: center;
-
+  margin: $chip-margin;
+  padding: $chip-padding;
+  height: $chip-height;
+  border-radius: $chip-border-radius;
   font-size: $chip-font-size;
   font-weight: normal;
+  line-height: $chip-height;
+  background: $chip-background-color;
+
+  vertical-align: middle;
+  box-sizing: border-box;
 
   ion-label {
     margin: 0;
@@ -38,23 +35,23 @@ ion-chip {
 
   > ion-icon,
   > ion-avatar {
+    margin-left: -12px;
     width: 32px;
     height: 32px;
-    margin-left: -12px;
-    vertical-align: top;
     border-radius: 50%;
-    text-align: center;
-    line-height: 32px;
-    color: $chip-icon-color;
     font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    color: $chip-icon-color;
+    vertical-align: top;
 
     img {
-      max-width: 100%;
-      max-height: 100%;
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
       display: block;
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
+      border-radius: 50%;
     }
 
     + ion-label {
@@ -68,9 +65,9 @@ ion-chip {
   }
 
   .button {
-    height: inherit;
     margin: 0;
     margin-right: -4px;
+    height: inherit;
   }
 
   ion-icon[name="close-circle"] {
diff --git a/ionic/components/chip/chip.wp.scss b/ionic/components/chip/chip.wp.scss
index 32abad90e3..8e0a342833 100644
--- a/ionic/components/chip/chip.wp.scss
+++ b/ionic/components/chip/chip.wp.scss
@@ -3,10 +3,6 @@
 // Windows Chip
 // --------------------------------------------------
 
-ion-chip {
-
-}
-
 
 // Generate Windows Chip Colors
 // --------------------------------------------------
@@ -15,8 +11,8 @@ ion-chip {
 
   ion-chip {
     ion-icon[#{$color-name}] {
+      color: color-inverse($color-value);
       background-color: $color-value;
-      color: color-inverse($color-value) !important;
     }
   }
 
diff --git a/ionic/components/content/content.ios.scss b/ionic/components/content/content.ios.scss
index d7eea21493..226b078936 100644
--- a/ionic/components/content/content.ios.scss
+++ b/ionic/components/content/content.ios.scss
@@ -4,22 +4,22 @@
 // iOS Content
 // --------------------------------------------------
 
-$content-ios-outer-background-color:    #efeff4 !default;
+$content-ios-outer-background:          #efeff4 !default;
 $content-ios-padding:                   $content-padding !default;
 $content-ios-margin:                    $content-margin !default;
-
+$content-ios-has-views-background:      #000 !default;
 
 ion-content {
   background-color: $background-ios-color;
 }
 
 .outer-content {
-  background: $content-ios-outer-background-color;
+  background: $content-ios-outer-background;
 }
 
 ion-nav.has-views,
 ion-tab.has-views {
-  background: #000;
+  background: $content-ios-has-views-background;
 }
 
 
diff --git a/ionic/components/grid/grid.scss b/ionic/components/grid/grid.scss
index 7b85adff0d..10abcd3f23 100644
--- a/ionic/components/grid/grid.scss
+++ b/ionic/components/grid/grid.scss
@@ -20,12 +20,22 @@ $grid-responsive-lg-break:        1023px !default; // smaller than landscape tab
       flex-direction: column;
 
       ion-col {
-        &[width-10], &[width-20], &[width-25], &[width-33], &[width-34], &[width-50], &[width-66], &[width-67], &[width-75], &[width-80], &[width-90] {
+        &[width-10],
+        &[width-20],
+        &[width-25],
+        &[width-33],
+        &[width-34],
+        &[width-50],
+        &[width-66],
+        &[width-67],
+        &[width-75],
+        &[width-80],
+        &[width-90] {
           flex: 1;
           margin-bottom: ($grid-padding-width * 3) / 2;
           margin-left: 0;
-          max-width: 100%;
           width: 100%;
+          max-width: 100%;
         }
       }
 
@@ -50,6 +60,7 @@ ion-row {
   &[top] {
     align-items: flex-start;
   }
+
   &[bottom] {
     align-items: flex-end;
   }
@@ -57,9 +68,11 @@ ion-row {
   &[center] {
     align-items: center;
   }
+
   &[stretch] {
     align-items: stretch;
   }
+
   &[baseline] {
     align-items: baseline;
   }
@@ -71,14 +84,17 @@ ion-row + ion-row {
 }
 
 ion-col {
-  flex: 1;
   display: block;
+  flex: 1;
   padding: ($grid-padding-width / 2);
   width: 100%;
 
+  // Column Alignment
+
   &[top] {
     align-self: flex-start;
   }
+
   &[bottom] {
     align-self: flex-end;
   }
@@ -86,84 +102,102 @@ ion-col {
   &[center] {
     align-self: center;
   }
+
   &[stretch] {
     align-self: stretch;
   }
+
   &[baseline] {
     align-self: baseline;
   }
-}
 
+  // Column Offsets
 
-/* Column Offsets */
-ion-col {
   &[offset-10] {
     margin-left: 10%;
   }
+
   &[offset-20] {
     margin-left: 20%;
   }
+
   &[offset-25] {
     margin-left: 25%;
   }
-  &[offset-33], &[offset-34] {
+
+  &[offset-33],
+  &[offset-34] {
     margin-left: 33.3333%;
   }
+
   &[offset-50] {
     margin-left: 50%;
   }
-  &[offset-66], &[offset-67] {
+
+  &[offset-66],
+  &[offset-67] {
     margin-left: 66.6666%;
   }
+
   &[offset-75] {
     margin-left: 75%;
   }
+
   &[offset-80] {
     margin-left: 80%;
   }
+
   &[offset-90] {
     margin-left: 90%;
   }
-}
 
+  // Explicit Column Percent Sizes
+  // By default each grid column will evenly distribute
+  // across the grid. However, you can specify individual
+  // columns to take up a certain size of the available area
 
-/* Explicit Column Percent Sizes */
-/* By default each grid column will evenly distribute */
-/* across the grid. However, you can specify individual */
-/* columns to take up a certain size of the available area */
-ion-col {
   &[width-10] {
     flex: 0 0 10%;
     max-width: 10%;
   }
+
   &[width-20] {
     flex: 0 0 20%;
     max-width: 20%;
   }
+
   &[width-25] {
     flex: 0 0 25%;
     max-width: 25%;
   }
-  &[width-33], &[width-34] {
+
+  &[width-33],
+  &[width-34] {
     flex: 0 0 33.3333%;
     max-width: 33.3333%;
   }
+
   &[width-50] {
     flex: 0 0 50%;
     max-width: 50%;
   }
-  &[width-66], &[width-67] {
+
+  &[width-66],
+  &[width-67] {
     flex: 0 0 66.6666%;
     max-width: 66.6666%;
   }
+
   &[width-75] {
     flex: 0 0 75%;
     max-width: 75%;
   }
+
   &[width-80] {
     flex: 0 0 80%;
     max-width: 80%;
   }
+
   &[width-90] {
     flex: 0 0 90%;
     max-width: 90%;
@@ -171,11 +205,11 @@ ion-col {
 }
 
 
-/* Responsive Grid Classes */
-/* Adding a class of responsive-X to a row */
-/* will trigger the width-direction to */
-/* change to column and add some margin */
-/* to any columns in the row for clearity */
+// Responsive Grid Classes
+// Adding a class of responsive-X to a row
+// will trigger the width-direction to
+// change to column and add some margin
+// to any columns in the row for clearity
 
 @include responsive-grid-break('[responsive-sm]', $grid-responsive-sm-break);
 @include responsive-grid-break('[responsive-md]', $grid-responsive-md-break);
diff --git a/ionic/components/infinite-scroll/infinite-scroll.scss b/ionic/components/infinite-scroll/infinite-scroll.scss
index 75b4c634c5..74d9780170 100644
--- a/ionic/components/infinite-scroll/infinite-scroll.scss
+++ b/ionic/components/infinite-scroll/infinite-scroll.scss
@@ -3,7 +3,7 @@
 // Infinite Scroll
 // --------------------------------------------------
 
-$infinite-scroll-loading-margin:         0px 0px 32px 0px !default;
+$infinite-scroll-loading-margin:         0 0 32px 0 !default;
 $infinite-scroll-loading-color:          #666 !default;
 $infinite-scroll-loading-text-margin:    4px 32px 0 32px !default;
 
@@ -26,9 +26,9 @@ ion-infinite-scroll-content {
 }
 
 .infinite-loading {
-  opacity: 0;
-  width: 100%;
   margin: $infinite-scroll-loading-margin;
+  width: 100%;
+  opacity: 0;
 }
 
 .infinite-loading-text {
diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss
index 6f1ebe744f..7f8bfe18d0 100644
--- a/ionic/components/input/input.ios.scss
+++ b/ionic/components/input/input.ios.scss
@@ -7,7 +7,7 @@
 $text-input-ios-background-color:          $list-ios-background-color !default;
 
 $text-input-ios-input-clear-icon-width:    30px !default;
-$text-input-ios-input-clear-icon-color:    rgba(0, 0, 0, 0.5) !default;
+$text-input-ios-input-clear-icon-color:    rgba(0, 0, 0, .5) !default;
 $text-input-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $text-input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
 $text-input-ios-input-clear-icon-size:     18px !default;
 
@@ -35,16 +35,16 @@ $text-input-ios-input-clear-icon-size:     18px !default;
 
 .item-label-stacked .text-input,
 .item-label-floating .text-input {
-  margin-left: 0;
   margin-top: 8px;
   margin-bottom: 8px;
+  margin-left: 0;
 }
 
 .item-label-stacked ion-select,
 .item-label-floating ion-select {
-  padding-left: 0;
   padding-top: 8px;
   padding-bottom: 8px;
+  padding-left: 0;
 }
 
 .item-label-floating .text-input.cloned-input,
@@ -65,10 +65,10 @@ ion-input[clearInput] {
 }
 
 .text-input-clear-icon {
-  width: $text-input-ios-input-clear-icon-width;
-
   @include svg-background-image($text-input-ios-input-clear-icon-svg);
-  background-size: $text-input-ios-input-clear-icon-size;
+
   right: ($item-ios-padding-right / 2);
   bottom: 0;
+  width: $text-input-ios-input-clear-icon-width;
+  background-size: $text-input-ios-input-clear-icon-size;
 }
diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss
index 692f6951d0..fc14d77ce9 100644
--- a/ionic/components/input/input.md.scss
+++ b/ionic/components/input/input.md.scss
@@ -10,7 +10,7 @@ $text-input-md-hightlight-color-valid:      map-get($colors-md, secondary) !defa
 $text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default;
 
 $text-input-md-input-clear-icon-width:      30px !default;
-$text-input-md-input-clear-icon-color:      #5B5B5B !default;
+$text-input-md-input-clear-icon-color:      #5b5b5b !default;
 $text-input-md-input-clear-icon-svg:        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
 $text-input-md-input-clear-icon-size:       22px !default;
 
@@ -37,26 +37,26 @@ $text-input-md-input-clear-icon-size:       22px !default;
 // Material Design Highlighted Input
 // --------------------------------------------------
 
-ion-input:after {
+ion-input::after {
   position: absolute;
-  bottom: 0;
   right: 0;
+  bottom: 0;
   left: $item-md-padding-left;
   border-bottom-width: 2px;
   border-bottom-style: solid;
   border-bottom-color: transparent;
-  content: '';
+  content: "";
 }
 
-.input-has-focus:after {
+.input-has-focus::after {
   border-bottom-color: $text-input-md-highlight-color;
 }
 
-ion-input.ng-valid.input-has-value:after {
+ion-input.ng-valid.input-has-value::after {
   border-bottom-color: $text-input-md-hightlight-color-valid;
 }
 
-ion-input.ng-invalid.ng-touched:after {
+ion-input.ng-invalid.ng-touched::after {
   border-bottom-color: $text-input-md-hightlight-color-invalid;
 }
 
@@ -66,16 +66,16 @@ ion-input.ng-invalid.ng-touched:after {
 
 .item-label-stacked .text-input,
 .item-label-floating .text-input {
-  margin-left: 0;
   margin-top: 8px;
   margin-bottom: 8px;
+  margin-left: 0;
 }
 
 .item-label-stacked ion-select,
 .item-label-floating ion-select {
-  padding-left: 0;
   padding-top: 8px;
   padding-bottom: 8px;
+  padding-left: 0;
 }
 
 .item-label-floating .text-input.cloned-input {
@@ -99,10 +99,10 @@ ion-input[clearInput] {
 }
 
 .text-input-clear-icon {
-  width: $text-input-md-input-clear-icon-width;
-
   @include svg-background-image($text-input-md-input-clear-icon-svg);
-  background-size: $text-input-md-input-clear-icon-size;
+
   right: ($item-md-padding-right / 2);
   bottom: 2px;
+  width: $text-input-md-input-clear-icon-width;
+  background-size: $text-input-md-input-clear-icon-size;
 }
diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss
index e589b2f17a..27eb065b25 100644
--- a/ionic/components/input/input.scss
+++ b/ionic/components/input/input.scss
@@ -29,15 +29,16 @@ ion-textarea {
 // --------------------------------------------------
 
 .text-input {
+  @include placeholder();
+
   display: inline-block;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
   flex: 1;
   width: 92%;
   width: calc(100% - 10px);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   -webkit-appearance: none;
-  @include placeholder();
 }
 
 textarea.text-input {
@@ -45,7 +46,7 @@ textarea.text-input {
 }
 
 .text-input[disabled] {
-  opacity: 0.4;
+  opacity: .4;
 }
 
 
@@ -92,9 +93,9 @@ input.text-input:-webkit-autofill {
 [next-input] {
   position: absolute;
   bottom: 1px;
+  padding: 0;
   width: 1px;
   height: 1px;
-  padding: 0;
   border: 0;
   background: transparent;
   pointer-events: none;
diff --git a/ionic/components/input/input.wp.scss b/ionic/components/input/input.wp.scss
index 32abc6f26d..aa2fc00929 100644
--- a/ionic/components/input/input.wp.scss
+++ b/ionic/components/input/input.wp.scss
@@ -64,17 +64,17 @@ ion-input.ng-invalid.ng-touched .text-input {
 
 .item-label-stacked .text-input,
 .item-label-floating .text-input {
-  margin-left: 0;
   margin-top: 8px;
   margin-bottom: 8px;
+  margin-left: 0;
 }
 
 .item-label-stacked ion-select,
 .item-label-floating ion-select {
-  padding-top: 0;
-  padding-bottom: 0;
   margin-top: 8px;
   margin-bottom: 8px;
+  padding-top: 0;
+  padding-bottom: 0;
 
   .select-icon {
     margin-top: 5px;
@@ -106,10 +106,10 @@ ion-input[clearInput] {
 }
 
 .text-input-clear-icon {
-  width: $text-input-wp-input-clear-icon-width;
-
   @include svg-background-image($text-input-wp-input-clear-icon-svg);
-  background-size: $text-input-wp-input-clear-icon-size;
+
   right: ($item-wp-padding-right / 2);
   bottom: 2px;
+  width: $text-input-wp-input-clear-icon-width;
+  background-size: $text-input-wp-input-clear-icon-size;
 }
diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss
index 0fd7391c19..9c6782fb7b 100644
--- a/ionic/components/item/item-media.scss
+++ b/ionic/components/item/item-media.scss
@@ -17,18 +17,18 @@
 
 .item > ion-icon,
 .item-inner > ion-icon {
-  line-height: 1;
-  font-size: 2.4rem;
   min-height: 2.4rem;
+  font-size: 2.4rem;
+  line-height: 1;
 
   &[large] {
-    font-size: 3.2rem;
     min-height: 3.2rem;
+    font-size: 3.2rem;
   }
 
   &[small] {
-    font-size: 1.8rem;
     min-height: 1.8rem;
+    font-size: 1.8rem;
   }
 }
 
@@ -43,11 +43,11 @@ ion-thumbnail {
 }
 
 .item-cover {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: transparent;
-}
\ No newline at end of file
+  cursor: pointer;
+}
diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss
index db8698663b..0222099bee 100644
--- a/ionic/components/item/item-sliding.scss
+++ b/ionic/components/item/item-sliding.scss
@@ -6,8 +6,8 @@
 
 
 ion-item-sliding {
-  display: block;
   position: relative;
+  display: block;
   overflow: hidden;
 
   .item {
@@ -16,20 +16,20 @@ ion-item-sliding {
 }
 
 ion-item-options {
-  display: none;
   position: absolute;
   top: 0;
   right: 0;
   z-index: $z-index-item-options;
+  display: none;
   height: 100%;
   visibility: hidden;
 }
 
 ion-item-options .button {
   margin: 0;
+  height: 100%;
   border-radius: 0;
   box-shadow: none;
-  height: 100%;
 }
 
 ion-item-options:not([icon-left]) .button-icon-left {
@@ -38,10 +38,11 @@ ion-item-options:not([icon-left]) .button-icon-left {
   .button-inner {
     flex-direction: column;
   }
+
   ion-icon {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    padding-bottom: 0.3em;
+    padding-right: 0;
+    padding-bottom: .3em;
+    padding-left: 0;
   }
 }
 
@@ -52,7 +53,7 @@ ion-item-sliding.active-slide {
     position: relative;
     z-index: $z-index-item-options + 1;
     opacity: 1;
-    transition: all 300ms cubic-bezier(0.36,0.66,0.04,1);
+    transition: all 300ms cubic-bezier(.36, .66, .04, 1);
     pointer-events: none;
 
   }
diff --git a/ionic/components/item/item.ios.scss b/ionic/components/item/item.ios.scss
index d2819e5675..feff115035 100644
--- a/ionic/components/item/item.ios.scss
+++ b/ionic/components/item/item.ios.scss
@@ -26,8 +26,8 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
   position: relative;
 
   padding-left: $item-ios-padding-left;
-  font-size: $item-ios-body-text-font-size;
   border-radius: 0;
+  font-size: $item-ios-body-text-font-size;
   color: $list-ios-text-color;
   background-color: $list-ios-background-color;
   transition-duration: 200ms;
@@ -48,17 +48,17 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
   h4,
   h5,
   h6 {
-    line-height: normal;
-    margin: 0 0 3px 0;
+    margin: 0 0 3px;
     font-size: 1.4rem;
     font-weight: normal;
+    line-height: normal;
   }
 
   p {
+    margin: 0 0 2px;
+    font-size: 1.2rem;
     line-height: normal;
     color: $item-ios-paragraph-text-color;
-    font-size: 1.2rem;
-    margin: 0 0 2px;
   }
 
   h2:last-child,
@@ -119,15 +119,15 @@ ion-thumbnail[item-right] {
 }
 
 .item-button {
-  padding: 0 0.5em;
-  font-size: 1.3rem;
+  padding: 0 .5em;
   height: 24px;
+  font-size: 1.3rem;
 }
 
 .item-button.button-icon-only ion-icon,
 .item-button.button-icon-only {
-   padding: 0 1px;
- }
+  padding: 0 1px;
+}
 
 ion-avatar {
   min-width: $item-ios-avatar-size;
@@ -158,10 +158,11 @@ button.item:not([detail-none]) .item-inner,
 a.item:not([detail-none]) .item-inner,
 .item[detail-push] .item-inner {
   @include ios-detail-push-icon($item-ios-detail-push-color);
+
+  padding-right: 32px;
   background-repeat: no-repeat;
   background-position: right ($item-ios-padding-right - 2) center;
   background-size: 14px 14px;
-  padding-right: 32px;
 }
 
 
@@ -176,8 +177,8 @@ ion-item-group {
   }
 
   .item:last-child .item-inner,
-  ion-item-sliding:last-child .item .item-inner {
-    border: none;
+  ion-item-sliding:last-child .item-inner {
+    border: 0;
   }
 }
 
@@ -197,8 +198,8 @@ ion-item-divider {
 
 @each $color-name, $color-value in $colors-ios {
   ion-item-divider[#{$color-name}] {
-    background-color: $color-value;
     color: color-inverse($color-value);
+    background-color: $color-value;
   }
 }
 
diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss
index 5b1708a204..adca25ca54 100644
--- a/ionic/components/item/item.md.scss
+++ b/ionic/components/item/item.md.scss
@@ -25,13 +25,13 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   padding-right: 0;
   padding-left: ($item-md-padding-left);
   font-size: $item-md-font-size;
-  text-transform: none;
   font-weight: normal;
+  text-transform: none;
 
   color: $list-md-text-color;
   background-color: $list-md-background-color;
   box-shadow: none;
-  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
+  transition: background-color 300ms cubic-bezier(.4, 0, .2, 1), transform 300ms;
 
   h1 {
     margin: 0 0 2px;
@@ -40,7 +40,7 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   }
 
   h2 {
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.6rem;
     font-weight: normal;
   }
@@ -49,17 +49,17 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   h4,
   h5,
   h6 {
-    line-height: normal;
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.4rem;
     font-weight: normal;
+    line-height: normal;
   }
 
   p {
+    margin: 0 0 2px;
+    font-size: 1.4rem;
     line-height: normal;
     color: $item-md-paragraph-text-color;
-    font-size: 1.4rem;
-    margin: 0 0 2px;
   }
 }
 
@@ -93,15 +93,15 @@ ion-icon[item-right] {
 }
 
 .item-button {
-  padding: 0 0.6em;
+  padding: 0 .6em;
   height: 25px;
   font-size: 1.2rem;
 }
 
 .item-button.button-icon-only ion-icon,
 .item-button.button-icon-only {
-   padding: 0 1px;
- }
+  padding: 0 1px;
+}
 
 ion-icon[item-left] + .item-inner,
 ion-icon[item-left] + .item-input {
@@ -149,8 +149,8 @@ ion-note {
 
 ion-item-divider {
   padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
-  background-color: $item-md-divider-background;
   color: $item-md-divider-color;
+  background-color: $item-md-divider-background;
 }
 
 
@@ -159,8 +159,8 @@ ion-item-divider {
 
 @each $color-name, $color-value in $colors-md {
   ion-item-divider[#{$color-name}] {
-    background-color: $color-value;
     color: color-inverse($color-value);
+    background-color: $color-value;
   }
 }
 
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 6c1ba77bc2..9598bf74d5 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -7,50 +7,49 @@
 
 .item {
   display: flex;
-  justify-content: space-between;
+  overflow: hidden;
   align-items: center;
+  justify-content: space-between;
 
   margin: 0;
   padding: 0;
-  border: 0;
   width: 100%;
   min-height: 4.4rem;
-  overflow: hidden;
+  border: 0;
 
-  text-align: initial;
   font-weight: normal;
   line-height: normal;
+  text-align: initial;
   text-decoration: none;
   color: inherit;
 }
 
 .item-inner {
   display: flex;
-  margin: 0;
-  padding: 0;
-  border: 0;
   overflow: hidden;
-  min-height: inherit;
-
   flex: 1;
   flex-direction: inherit;
   align-items: inherit;
   align-self: stretch;
+  margin: 0;
+  padding: 0;
+  min-height: inherit;
+  border: 0;
 }
 
 .input-wrapper {
   display: flex;
+  overflow: hidden;
   flex: 1;
   flex-direction: inherit;
   align-items: inherit;
   align-self: stretch;
   text-overflow: ellipsis;
-  overflow: hidden;
 }
 
 .item[no-lines],
 .item[no-lines] .item-inner {
-  border: none;
+  border: 0;
 }
 
 ion-item-group {
@@ -58,15 +57,15 @@ ion-item-group {
 }
 
 ion-item-divider {
-  display: block;
-  min-height: 30px;
-  width: 100%;
   z-index: 1000;
+  display: block;
+  width: 100%;
+  min-height: 30px;
 
   &[sticky] {
     position: -webkit-sticky;
     position: sticky;
-  	top: 0px;
+    top: 0;
   }
 }
 
diff --git a/ionic/components/item/item.wp.scss b/ionic/components/item/item.wp.scss
index db2a353c2c..9012b9357d 100644
--- a/ionic/components/item/item.wp.scss
+++ b/ionic/components/item/item.wp.scss
@@ -27,8 +27,8 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   padding-right: 0;
   padding-left: ($item-wp-padding-left);
   font-size: $item-wp-font-size;
-  text-transform: none;
   font-weight: normal;
+  text-transform: none;
 
   color: $item-wp-body-text-color;
   background-color: $item-wp-body-background-color;
@@ -41,7 +41,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   }
 
   h2 {
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.6rem;
     font-weight: normal;
   }
@@ -50,17 +50,17 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   h4,
   h5,
   h6 {
-    line-height: normal;
-    margin: 2px 0 2px;
+    margin: 2px 0;
     font-size: 1.4rem;
     font-weight: normal;
+    line-height: normal;
   }
 
   p {
+    margin: 0 0 2px;
+    font-size: 1.4rem;
     line-height: normal;
     color: $item-wp-paragraph-text-color;
-    font-size: 1.4rem;
-    margin: 0 0 2px;
   }
 }
 
@@ -94,15 +94,15 @@ ion-icon[item-right] {
 }
 
 .item-button {
-  padding: 0 0.6em;
+  padding: 0 .6em;
   height: 25px;
   font-size: 1.2rem;
 }
 
 .item-button.button-icon-only ion-icon,
 .item-button.button-icon-only {
-   padding: 0 1px;
- }
+  padding: 0 1px;
+}
 
 [text-wrap] ion-label {
   font-size: $item-wp-body-text-font-size;
@@ -155,8 +155,8 @@ ion-note {
 
 ion-item-divider {
   padding: $item-wp-padding-top $item-wp-padding-right $item-wp-padding-bottom $item-wp-padding-left;
-  background-color: $item-wp-divider-background;
   color: $item-wp-divider-color;
+  background-color: $item-wp-divider-background;
 }
 
 
@@ -165,8 +165,8 @@ ion-item-divider {
 
 @each $color-name, $color-value in $colors-wp {
   ion-item-divider[#{$color-name}] {
-    background-color: $color-value;
     color: color-inverse($color-value);
+    background-color: $color-value;
   }
 }
 
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index d98eb5b2ad..ab760d6a63 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -30,9 +30,13 @@
         </p>
       </ion-item>
       <ion-item-options>
-        <button primary (click)="archive(item)">Archive</button>
+        <button primary (click)="archive(item)">
+          <ion-icon name="mail"></ion-icon>
+          Archive
+        </button>
         <button danger (click)="del(item)">
           <ion-icon name="trash"></ion-icon>
+          Delete
         </button>
       </ion-item-options>
     </ion-item-sliding>
@@ -117,4 +121,4 @@
   img {
     height: 100px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/ionic/components/label/label.ios.scss b/ionic/components/label/label.ios.scss
index 1655e162ac..6ccc42a328 100644
--- a/ionic/components/label/label.ios.scss
+++ b/ionic/components/label/label.ios.scss
@@ -34,20 +34,20 @@ ion-label + ion-textarea .text-input {
 // --------------------------------------------------
 
 ion-label[stacked] {
-  font-size: 1.2rem;
   margin-bottom: 4px;
+  font-size: 1.2rem;
 }
 
 ion-label[floating] {
   margin-bottom: 0;
-  transform-origin: left top;
   transform: translate3d(0, 27px, 0);
+  transform-origin: left top;
   transition: transform 150ms ease-in-out;
 }
 
 .input-has-focus ion-label[floating],
 .input-has-value ion-label[floating] {
-  transform: translate3d(0, 0, 0) scale(0.8);
+  transform: translate3d(0, 0, 0) scale(.8);
 }
 
 .item-label-stacked [item-right],
@@ -63,7 +63,7 @@ ion-label[floating] {
 @each $color-name, $color-value in $colors-ios {
 
   ion-label[#{$color-name}] {
-    color: $color-value !important;
+    color: $color-value;
   }
 
 }
diff --git a/ionic/components/label/label.md.scss b/ionic/components/label/label.md.scss
index 305062df7d..5214f34c53 100644
--- a/ionic/components/label/label.md.scss
+++ b/ionic/components/label/label.md.scss
@@ -37,15 +37,15 @@ ion-label[stacked] {
 }
 
 ion-label[floating] {
-  transform-origin: left top;
   transform: translate3d(0, 27px, 0);
+  transform-origin: left top;
   transition: transform 150ms ease-in-out;
 }
 
 ion-label[stacked],
 ion-label[floating] {
-  margin-left: 0;
   margin-bottom: 0;
+  margin-left: 0;
 }
 
 .input-has-focus ion-label[stacked],
@@ -54,8 +54,8 @@ ion-label[floating] {
 }
 
 .input-has-focus ion-label[floating],
-.input-has-value ion-label[floating]  {
-  transform: translate3d(0, 0, 0) scale(0.8);
+.input-has-value ion-label[floating] {
+  transform: translate3d(0, 0, 0) scale(.8);
 }
 
 .item-label-stacked [item-right],
@@ -71,7 +71,7 @@ ion-label[floating] {
 @each $color-name, $color-value in $colors-md {
 
   ion-label[#{$color-name}] {
-    color: $color-value !important;
+    color: $color-value;
   }
 
 }
diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss
index 98d1dc918d..f9a7d230d1 100644
--- a/ionic/components/label/label.scss
+++ b/ionic/components/label/label.scss
@@ -5,17 +5,17 @@
 
 ion-label {
   display: block;
-  font-size: inherit;
-  white-space: nowrap;
-  margin: 0;
-  flex: 1;
-  text-overflow: ellipsis;
   overflow: hidden;
+  flex: 1;
+  margin: 0;
+  font-size: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .item-input ion-label {
-  max-width: 200px;
   flex: initial;
+  max-width: 200px;
   pointer-events: none;
 }
 
@@ -36,11 +36,11 @@ ion-label[fixed] {
 
 ion-label[stacked],
 ion-label[floating] {
+  flex-basis: 100%;
   align-self: stretch;
   margin-bottom: 0;
-  max-width: 100%;
-  flex-basis: 100%;
   width: auto;
+  max-width: 100%;
 }
 
 .item-label-stacked .input-wrapper,
@@ -56,5 +56,5 @@ ion-label[floating] {
 }
 
 .item-select ion-label[floating] {
-  transform: translate3d(0, 0, 0) scale(0.8);
+  transform: translate3d(0, 0, 0) scale(.8);
 }
diff --git a/ionic/components/label/label.wp.scss b/ionic/components/label/label.wp.scss
index 81c39f9279..0f8e0e6f77 100644
--- a/ionic/components/label/label.wp.scss
+++ b/ionic/components/label/label.wp.scss
@@ -32,14 +32,14 @@ ion-label[stacked] {
 }
 
 ion-label[floating] {
-  transform-origin: left top;
   transform: translate3d(8px, 34px, 0);
+  transform-origin: left top;
 }
 
 ion-label[stacked],
 ion-label[floating] {
-  margin-left: 0;
   margin-bottom: 0;
+  margin-left: 0;
 }
 
 .input-has-focus ion-label[stacked],
@@ -48,8 +48,8 @@ ion-label[floating] {
 }
 
 .input-has-focus ion-label[floating],
-.input-has-value ion-label[floating]  {
-  transform: translate3d(0, 0, 0) scale(0.8);
+.input-has-value ion-label[floating] {
+  transform: translate3d(0, 0, 0) scale(.8);
 }
 
 .item-label-stacked [item-right],
@@ -65,7 +65,7 @@ ion-label[floating] {
 @each $color-name, $color-value in $colors-wp {
 
   ion-label[#{$color-name}] {
-    color: $color-value !important;
+    color: $color-value;
   }
 
 }
diff --git a/ionic/components/list/list.ios.scss b/ionic/components/list/list.ios.scss
index aa3302382a..e012526e17 100644
--- a/ionic/components/list/list.ios.scss
+++ b/ionic/components/list/list.ios.scss
@@ -18,23 +18,23 @@ $list-inset-ios-border-radius:        4px !default;
 $list-ios-header-padding:             10px $item-ios-padding-right 10px $item-ios-padding-left !default;
 $list-ios-header-font-size:           1.2rem !default;
 $list-ios-header-font-weight:         500 !default;
-$list-ios-header-letter-spacing:      0.1rem !default;
+$list-ios-header-letter-spacing:      .1rem !default;
 $list-ios-header-color:               #333 !default;
 
 
-/****************/
-/* DEFAULT LIST */
-/****************/
+//
+// DEFAULT LIST
+//
 
 ion-list-header {
   position: relative;
   padding: $list-ios-header-padding;
+  border-bottom: 1px solid $list-ios-border-color;
   font-size: $list-ios-header-font-size;
   font-weight: $list-ios-header-font-weight;
   letter-spacing: $list-ios-header-letter-spacing;
   text-transform: uppercase;
   color: $list-ios-header-color;
-  border-bottom: 1px solid $list-ios-border-color;
 }
 
 ion-list {
@@ -49,7 +49,7 @@ ion-list {
     border-bottom: 1px solid $list-ios-border-color;
 
     .item-inner {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 
@@ -67,21 +67,22 @@ ion-list {
 
   ion-item-options {
     border-bottom: 1px solid $list-ios-border-color;
+  }
 
-    button, [button] {
-      min-height: 100%;
-      height: 100%;
-      margin: 0;
+  ion-item-options button,
+  ion-item-options [button] {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    height: 100%;
+    min-height: 100%;
 
-      border: none;
-      border-radius: 0;
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
+    border: 0;
+    border-radius: 0;
+    box-sizing: border-box;
 
-      &:before{
-        margin: 0 auto;
-      }
+    &::before {
+      margin: 0 auto;
     }
   }
 }
@@ -107,10 +108,8 @@ ion-list + ion-list {
       border-width: $hairlines-width;
     }
 
-    .item {
-      .item-inner {
-        border-width: $hairlines-width;
-      }
+    .item .item-inner {
+      border-width: $hairlines-width;
     }
 
     > .item:first-child {
@@ -126,9 +125,9 @@ ion-list + ion-list {
 }
 
 
-/**************/
-/* INSET LIST */
-/**************/
+//
+// INSET LIST
+//
 
 ion-list[inset] {
   margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
@@ -142,18 +141,18 @@ ion-list[inset] {
     border-bottom: 1px solid $list-ios-border-color;
 
     .item-inner {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 
   > .item:first-child,
   > ion-item-sliding:first-child .item {
-    border-top: none;
+    border-top: 0;
   }
 
   > .item:last-child,
   > ion-item-sliding:last-child .item {
-    border-bottom: none;
+    border-bottom: 0;
   }
 }
 
@@ -168,9 +167,9 @@ ion-list[inset] + ion-list[inset] {
 }
 
 
-/*****************/
-/* NO LINES LIST */
-/*****************/
+//
+// NO LINES LIST
+//
 
 ion-list[no-lines],
 &.hairlines ion-list[no-lines] {
diff --git a/ionic/components/list/list.md.scss b/ionic/components/list/list.md.scss
index 68ed986f4b..402807aabb 100644
--- a/ionic/components/list/list.md.scss
+++ b/ionic/components/list/list.md.scss
@@ -20,15 +20,15 @@ $list-md-header-font-size:       1.4rem !default;
 $list-md-header-color:           #858585 !default;
 
 
-/****************/
-/* DEFAULT LIST */
-/****************/
+//
+// DEFAULT LIST
+//
 
 ion-list-header,
 ion-item-divider {
-  border-bottom: 1px solid $list-md-border-color;
   margin-left: 0;
   padding: $list-md-header-padding;
+  border-bottom: 1px solid $list-md-border-color;
   font-size: $list-md-header-font-size;
   color: $list-md-header-color;
 }
@@ -51,29 +51,27 @@ ion-list {
 
     .item-inner,
     ion-label {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 
-  > ion-input:last-child:after {
+  > ion-input:last-child::after {
     left: 0;
   }
 
-  ion-item-options {
-    button, [button] {
-      height: calc(100% - 2px);
-      margin: 1px 0 1px 0;
-      box-shadow: none;
+  ion-item-options button,
+  ion-item-options [button] {
+    display: inline-flex;
+    align-items: center;
+    margin: 1px 0;
+    height: calc(100% - 2px);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    box-sizing: border-box;
 
-      border: none;
-      border-radius: 0;
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-
-      &:before{
-        margin: 0 auto;
-      }
+    &::before {
+      margin: 0 auto;
     }
   }
 
@@ -96,9 +94,9 @@ ion-list {
 }
 
 
-/**************/
-/* INSET LIST */
-/**************/
+//
+// INSET LIST
+//
 
 ion-list[inset] {
   margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
@@ -106,14 +104,14 @@ ion-list[inset] {
 
   .item:first-child {
     border-top-width: 0;
-    border-top-right-radius: $list-inset-md-border-radius;
     border-top-left-radius: $list-inset-md-border-radius;
+    border-top-right-radius: $list-inset-md-border-radius;
   }
 
   .item:last-child {
     border-bottom-width: 0;
-    border-bottom-right-radius: $list-inset-md-border-radius;
     border-bottom-left-radius: $list-inset-md-border-radius;
+    border-bottom-right-radius: $list-inset-md-border-radius;
   }
 
   .item-input {
@@ -131,9 +129,9 @@ ion-list[inset] {
 }
 
 
-/*****************/
-/* NO LINES LIST */
-/*****************/
+//
+// NO LINES LIST
+//
 
 ion-list[no-lines] {
   .item,
diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss
index 147dd359b0..997c9c480a 100644
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -6,8 +6,8 @@
 ion-list-header {
   display: block;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 ion-list {
diff --git a/ionic/components/list/list.wp.scss b/ionic/components/list/list.wp.scss
index aacc81b9c1..3d88b3d3da 100644
--- a/ionic/components/list/list.wp.scss
+++ b/ionic/components/list/list.wp.scss
@@ -16,19 +16,19 @@ $list-inset-wp-margin-left:      16px !default;
 $list-inset-wp-border-radius:    2px !default;
 
 $list-wp-header-padding:         16px $item-wp-padding-right 16px $item-wp-padding-left !default;
-$list-wp-header-font-size:       2.0rem !default;
+$list-wp-header-font-size:       2rem !default;
 $list-wp-header-color:           $list-wp-text-color !default;
 
 
-/****************/
-/* DEFAULT LIST */
-/****************/
+//
+// DEFAULT LIST
+//
 
 ion-list-header,
 ion-item-divider {
-  border-bottom: 1px solid $list-wp-border-color;
   margin-left: 0;
   padding: $list-wp-header-padding;
+  border-bottom: 1px solid $list-wp-border-color;
   font-size: $list-wp-header-font-size;
   color: $list-wp-header-color;
 }
@@ -51,29 +51,27 @@ ion-list {
 
     .item-inner,
     ion-label {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 
-  > ion-input:last-child:after {
+  > ion-input:last-child::after {
     left: 0;
   }
 
-  ion-item-options {
-    button, [button] {
-      height: calc(100% - 2px);
-      margin: 1px 0 1px 0;
-      box-shadow: none;
+  ion-item-options button,
+  ion-item-options [button] {
+    display: inline-flex;
+    align-items: center;
+    margin: 1px 0;
+    height: calc(100% - 2px);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    box-sizing: border-box;
 
-      border: none;
-      border-radius: 0;
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-
-      &:before{
-        margin: 0 auto;
-      }
+    &::before {
+      margin: 0 auto;
     }
   }
 
@@ -96,9 +94,9 @@ ion-list {
 }
 
 
-/**************/
-/* INSET LIST */
-/**************/
+//
+// INSET LIST
+//
 
 ion-list[inset] {
   margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left;
@@ -106,14 +104,14 @@ ion-list[inset] {
 
   .item:first-child {
     border-top-width: 0;
-    border-top-right-radius: $list-inset-wp-border-radius;
     border-top-left-radius: $list-inset-wp-border-radius;
+    border-top-right-radius: $list-inset-wp-border-radius;
   }
 
   .item:last-child {
     border-bottom-width: 0;
-    border-bottom-right-radius: $list-inset-wp-border-radius;
     border-bottom-left-radius: $list-inset-wp-border-radius;
+    border-bottom-right-radius: $list-inset-wp-border-radius;
   }
 
   .item-input {
@@ -131,9 +129,9 @@ ion-list[inset] {
 }
 
 
-/*****************/
-/* NO LINES LIST */
-/*****************/
+//
+// NO LINES LIST
+//
 
 ion-list[no-lines] {
   .item,
diff --git a/ionic/components/menu/menu.ios.scss b/ionic/components/menu/menu.ios.scss
index f0c80e0554..e2dd7e7714 100644
--- a/ionic/components/menu/menu.ios.scss
+++ b/ionic/components/menu/menu.ios.scss
@@ -4,7 +4,8 @@
 // --------------------------------------------------
 
 $menu-ios-background:            $background-ios-color !default;
-$menu-ios-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
+$menu-ios-box-shadow-color:      rgba(0, 0, 0, .25) !default;
+$menu-ios-box-shadow:            0 0 10px $menu-ios-box-shadow-color !default;
 
 
 ion-menu {
@@ -12,13 +13,13 @@ ion-menu {
 }
 
 .menu-content-reveal {
-  box-shadow: $menu-ios-shadow;
+  box-shadow: $menu-ios-box-shadow;
 }
 
 .menu-content-push {
-  box-shadow: $menu-ios-shadow;
+  box-shadow: $menu-ios-box-shadow;
 }
 
 ion-menu[type=overlay] {
-  box-shadow: $menu-ios-shadow;
+  box-shadow: $menu-ios-box-shadow;
 }
diff --git a/ionic/components/menu/menu.md.scss b/ionic/components/menu/menu.md.scss
index 681a5e2ca2..4d9a25a93f 100644
--- a/ionic/components/menu/menu.md.scss
+++ b/ionic/components/menu/menu.md.scss
@@ -4,7 +4,8 @@
 // --------------------------------------------------
 
 $menu-md-background:            $background-md-color !default;
-$menu-md-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
+$menu-md-box-shadow-color:      rgba(0, 0, 0, .25) !default;
+$menu-md-box-shadow:            0 0 10px $menu-md-box-shadow-color !default;
 
 
 ion-menu {
@@ -12,13 +13,13 @@ ion-menu {
 }
 
 .menu-content-reveal {
-  box-shadow: $menu-md-shadow;
+  box-shadow: $menu-md-box-shadow;
 }
 
 .menu-content-push {
-  box-shadow: $menu-md-shadow;
+  box-shadow: $menu-md-box-shadow;
 }
 
 ion-menu[type=overlay] {
-  box-shadow: $menu-md-shadow;
+  box-shadow: $menu-md-box-shadow;
 }
diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss
index 234d22916e..3589c5873f 100644
--- a/ionic/components/menu/menu.scss
+++ b/ionic/components/menu/menu.scss
@@ -14,12 +14,12 @@ ion-menu {
   bottom: 0;
   left: 0;
 
-  width: $menu-width;
-
   display: flex;
   flex-direction: column;
 
-  transform: translate3d(-9999px, 0px, 0px);
+  width: $menu-width;
+
+  transform: translate3d(-9999px, 0, 0);
 }
 
 ion-menu[side=right] {
@@ -33,7 +33,7 @@ ion-menu .backdrop {
 }
 
 .menu-content {
-  transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0, 0, 0);
 }
 
 .menu-content-open ion-pane,
@@ -60,7 +60,7 @@ ion-menu .backdrop {
 // The menu itself, which is under the content, does not move.
 
 ion-menu[type=reveal].show-menu {
-  transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0, 0, 0);
 }
 
 
@@ -70,18 +70,18 @@ ion-menu[type=reveal].show-menu {
 // itself, which is under the menu, does not move.
 
 ion-menu[type=overlay] {
-  z-index: $z-index-menu-overlay;
   left: -8px; // make up for the box-shadow hanging over on the left
+  z-index: $z-index-menu-overlay;
 
   .backdrop {
-    display: block;
-    transform: translate3d(-9999px, 0px, 0px);
-    opacity: 0.01;
     left: -3000px;
+    display: block;
     width: 6000px;
+    opacity: .01;
+    transform: translate3d(-9999px, 0, 0);
 
     &.show-backdrop {
-      transform: translate3d(0px, 0px, 0px);
+      transform: translate3d(0, 0, 0);
     }
   }
 }
@@ -91,5 +91,5 @@ ion-menu[type=overlay][side=right] {
 }
 
 ion-menu[type=push][side=right] {
-  left: 0px;
+  left: 0;
 }
diff --git a/ionic/components/menu/menu.wp.scss b/ionic/components/menu/menu.wp.scss
index 63fd324b3d..ed1839cc58 100644
--- a/ionic/components/menu/menu.wp.scss
+++ b/ionic/components/menu/menu.wp.scss
@@ -3,7 +3,7 @@
 // Windows Menu
 // --------------------------------------------------
 
-$menu-wp-background:            #F2F2F2 !default;
+$menu-wp-background:            #f2f2f2 !default;
 
 
 ion-menu {
diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss
index cdf777bce8..94d2602903 100644
--- a/ionic/components/modal/modal.scss
+++ b/ionic/components/modal/modal.scss
@@ -7,5 +7,5 @@ ion-page.modal {
   z-index: $z-index-overlay;
 
   // hidden by default to prevent flickers, the animation will show it
-  transform: translate3d(0px, 100%, 0px);
+  transform: translate3d(0, 100%, 0);
 }
diff --git a/ionic/components/radio/radio.ios.scss b/ionic/components/radio/radio.ios.scss
index 6d0e987d17..15db0eaad5 100644
--- a/ionic/components/radio/radio.ios.scss
+++ b/ionic/components/radio/radio.ios.scss
@@ -10,7 +10,7 @@ $radio-ios-icon-height:            21px !default;
 $radio-ios-icon-border-width:      2px !default;
 $radio-ios-icon-border-style:      solid !default;
 
-$radio-ios-disabled-opacity:       0.3 !default;
+$radio-ios-disabled-opacity:       .3 !default;
 
 
 ion-radio {
@@ -35,15 +35,15 @@ ion-radio {
 
 .radio-checked .radio-inner {
   position: absolute;
-  border-width: $radio-ios-icon-border-width;
-  border-style: $radio-ios-icon-border-style;
-  border-color: $radio-ios-color-on;
   top: 4px;
   left: 7px;
   width: 5px;
   height: 12px;
-  border-left: none;
-  border-top: none;
+  border-width: $radio-ios-icon-border-width;
+  border-style: $radio-ios-icon-border-style;
+  border-color: $radio-ios-color-on;
+  border-top-width: 0;
+  border-left-width: 0;
   transform: rotate(45deg);
 }
 
diff --git a/ionic/components/radio/radio.md.scss b/ionic/components/radio/radio.md.scss
index 4e6927a4c5..cec46b6821 100644
--- a/ionic/components/radio/radio.md.scss
+++ b/ionic/components/radio/radio.md.scss
@@ -15,7 +15,7 @@ $radio-md-icon-border-radius:     50% !default;
 $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
-$radio-md-disabled-opacity:       0.3 !default;
+$radio-md-disabled-opacity:       .3 !default;
 
 
 ion-radio {
@@ -32,29 +32,29 @@ ion-radio {
   top: 0;
   left: 0;
   display: block;
+  margin: 0;
   width: $radio-md-icon-width;
   height: $radio-md-icon-height;
-  margin: 0;
   border-width: $radio-md-icon-border-width;
   border-style: $radio-md-icon-border-style;
-  border-color: $radio-md-color-off;
   border-radius: $radio-md-icon-border-radius;
+  border-color: $radio-md-color-off;
 }
 
 
 // Material Design Radio Inner Circle: Unchecked
 // -----------------------------------------
 
-.radio-inner  {
+.radio-inner {
   position: absolute;
   top: $radio-md-icon-border-width;
   left: $radio-md-icon-border-width;
   width: $radio-md-icon-width / 2;
   height: $radio-md-icon-height / 2;
-  background-color: $radio-md-color-on;
   border-radius: 50%;
-  transition: transform $radio-md-transition-duration $radio-md-transition-easing;
+  background-color: $radio-md-color-on;
   transform: scale3d(0, 0, 0);
+  transition: transform $radio-md-transition-duration $radio-md-transition-easing;
 }
 
 
diff --git a/ionic/components/radio/radio.wp.scss b/ionic/components/radio/radio.wp.scss
index 980aa03ff8..9e3af3a657 100644
--- a/ionic/components/radio/radio.wp.scss
+++ b/ionic/components/radio/radio.wp.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 $radio-wp-color-on:               map-get($colors-wp, primary) !default;
-$radio-wp-color-off:              #333333 !default;
+$radio-wp-color-off:              #333 !default;
 
 // Places radio icon on the left of the item
 $radio-wp-order:                  -1 !default;
@@ -15,7 +15,7 @@ $radio-wp-icon-border-width:      2px !default;
 $radio-wp-icon-border-style:      solid !default;
 $radio-wp-icon-border-radius:     50% !default;
 
-$radio-wp-disabled-opacity:       0.3 !default;
+$radio-wp-disabled-opacity:       .3 !default;
 
 
 ion-radio {
@@ -32,28 +32,28 @@ ion-radio {
   top: 0;
   left: 0;
   display: block;
+  margin: 0;
   width: $radio-wp-icon-width;
   height: $radio-wp-icon-height;
-  margin: 0;
   border-width: $radio-wp-icon-border-width;
   border-style: $radio-wp-icon-border-style;
-  border-color: $radio-wp-color-off;
   border-radius: $radio-wp-icon-border-radius;
+  border-color: $radio-wp-color-off;
 }
 
 
 // Windows Radio Inner Circle: Unchecked
 // -----------------------------------------
 
-.radio-inner  {
+.radio-inner {
   position: absolute;
   top: $radio-wp-icon-border-width;
   left: $radio-wp-icon-border-width;
+  display: none;
   width: $radio-wp-icon-width / 2;
   height: $radio-wp-icon-height / 2;
-  background-color: $radio-wp-color-off;
   border-radius: 50%;
-  display: none;
+  background-color: $radio-wp-color-off;
 }
 
 
@@ -90,8 +90,8 @@ ion-radio {
 .item ion-radio {
   position: static;
   display: block;
-  margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 0;
   order: $radio-wp-order;
+  margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 0;
 }
 
 .item-radio ion-label {
diff --git a/ionic/components/refresher/refresher.scss b/ionic/components/refresher/refresher.scss
index e9434e7cb5..3d35910dcf 100644
--- a/ionic/components/refresher/refresher.scss
+++ b/ionic/components/refresher/refresher.scss
@@ -11,15 +11,17 @@ $refresher-icon-font-size:     30px !default;
 $refresher-text-color:         #000 !default;
 $refresher-text-font-size:     16px !default;
 
+$refresher-border-color:       #ddd !default;
+
 
 ion-refresher {
   position: absolute;
   top: 0;
   left: 0;
   z-index: $z-index-refresher;
+  display: none;
   width: 100%;
   height: $refresher-height;
-  display: none;
 
   &.refresher-active {
     display: block;
@@ -30,9 +32,9 @@ ion-refresher {
   // when the refresher is let go or has completed
   // this transition is what is used to put the
   // scroll content back into it's original location
-  transition: all 320ms cubic-bezier(0.36,0.66,0.04,1);
-  border-top: 1px solid #ddd;
   margin-top: -1px;
+  border-top: 1px solid $refresher-border-color;
+  transition: all 320ms cubic-bezier(.36, .66, .04, 1);
 }
 
 
@@ -54,18 +56,18 @@ ion-refresher-content {
 
 .refresher-pulling-icon,
 .refresher-refreshing-icon {
+  font-size: $refresher-icon-font-size;
   text-align: center;
   color: $refresher-icon-color;
-  font-size: $refresher-icon-font-size;
-  transition: 200ms;
   transform-origin: center;
+  transition: 200ms;
 }
 
 .refresher-pulling-text,
 .refresher-refreshing-text {
+  font-size: $refresher-text-font-size;
   text-align: center;
   color: $refresher-text-color;
-  font-size: $refresher-text-font-size;
 }
 
 
@@ -82,6 +84,7 @@ ion-refresher-content[state=ready] {
   .refresher-pulling {
     display: block;
   }
+
   .refresher-pulling-icon {
     transform: rotate(180deg);
   }
@@ -97,6 +100,7 @@ ion-refresher-content[state=cancelling] {
   .refresher-pulling {
     display: block;
   }
+
   .refresher-pulling-icon {
     transform: scale(0);
   }
@@ -106,6 +110,7 @@ ion-refresher-content[state=completing] {
   .refresher-refreshing {
     display: block;
   }
+
   .refresher-refreshing-icon {
     transform: scale(0);
   }
diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss
index 8b4557c491..646ac884dd 100644
--- a/ionic/components/scroll/scroll.scss
+++ b/ionic/components/scroll/scroll.scss
@@ -7,6 +7,7 @@ ion-scroll {
   &.scroll-x scroll-content {
     overflow-x: auto;
   }
+
   &.scroll-y scroll-content {
     overflow-y: auto;
   }
diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss
index d8fd747744..071af1fc1b 100644
--- a/ionic/components/searchbar/searchbar.ios.scss
+++ b/ionic/components/searchbar/searchbar.ios.scss
@@ -6,36 +6,37 @@
 
 $searchbar-ios-padding-top-bottom:        0 !default;
 $searchbar-ios-padding-left-right:        8px !default;
-$searchbar-ios-background-color:          rgba(0, 0, 0, 0.2) !default;
-$searchbar-ios-border-color:              rgba(0, 0, 0, 0.05) !default;
+$searchbar-ios-background-color:          rgba(0, 0, 0, .2) !default;
+$searchbar-ios-border-color:              rgba(0, 0, 0, .05) !default;
 $searchbar-ios-min-height:                44px !default;
 
-$searchbar-ios-input-search-icon-color:   rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-search-icon-color:   rgba(0, 0, 0, .5) !default;
 $searchbar-ios-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $searchbar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $searchbar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
 $searchbar-ios-input-search-icon-size:    13px !default;
 
 $searchbar-ios-input-height:              3rem !default;
 $searchbar-ios-input-line-height:         $searchbar-ios-input-height !default;
-$searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, .5) !default;
 $searchbar-ios-input-text-color:          #000 !default;
-$searchbar-ios-input-background-color:    #FFFFFF !default;
+$searchbar-ios-input-background-color:    #fff !default;
 $searchbar-ios-input-transition:          all 400ms cubic-bezier(.25, .45, .05, 1) !default;
 $searchbar-ios-cancel-transition:         all 400ms cubic-bezier(.25, .45, .05, 1) !default;
 
-$searchbar-ios-input-clear-icon-color:    rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-clear-icon-color:    rgba(0, 0, 0, .5) !default;
 $searchbar-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
 $searchbar-ios-input-clear-icon-size:     18px !default;
 
+$searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;
 
 // Searchbar
 // -----------------------------------------
 
 ion-searchbar {
   padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
-  background: $searchbar-ios-background-color;
+  min-height: $searchbar-ios-min-height;
   border-top: 1px solid transparent;
   border-bottom: 1px solid $searchbar-ios-border-color;
-  min-height: $searchbar-ios-min-height;
+  background: $searchbar-ios-background-color;
 }
 
 
@@ -43,17 +44,19 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-search-icon {
+  @include svg-background-image($searchbar-ios-input-search-icon-svg);
+  @include calc(margin-left, "50% - 60px");
+
+  position: absolute;
+  top: 9px;
+  left: 9px;
+
   width: $searchbar-ios-input-search-icon-size + 1;
   height: $searchbar-ios-input-search-icon-size + 1;
 
-  @include svg-background-image($searchbar-ios-input-search-icon-svg);
-  background-size: $searchbar-ios-input-search-icon-size;
   background-repeat: no-repeat;
-  position: absolute;
-  left: 9px;
-  top: 9px;
+  background-size: $searchbar-ios-input-search-icon-size;
 
-  @include calc(margin-left, "50% - 60px");
   transition: $searchbar-ios-input-transition;
 }
 
@@ -62,20 +65,19 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-input {
-  height: $searchbar-ios-input-height;
-  line-height: $searchbar-ios-input-line-height;
-  padding: 0 28px;
+  @include placeholder($searchbar-ios-input-placeholder-color);
+  @include calc(padding-left, "50% - 28px");
 
+  padding: 0 28px;
+  height: $searchbar-ios-input-height;
+  border-radius: 5px;
   font-size: 1.4rem;
   font-weight: 400;
+  line-height: $searchbar-ios-input-line-height;
 
-  border-radius: 5px;
   color: $searchbar-ios-input-text-color;
   background-color: $searchbar-ios-input-background-color;
 
-  @include placeholder($searchbar-ios-input-placeholder-color);
-
-  @include calc(padding-left, "50% - 28px");
   transition: $searchbar-ios-input-transition;
 }
 
@@ -84,16 +86,18 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-clear-icon {
+  @include svg-background-image($searchbar-ios-input-clear-icon-svg);
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
   width: 30px;
   height: 100%;
 
-  @include svg-background-image($searchbar-ios-input-clear-icon-svg);
-  background-size: $searchbar-ios-input-clear-icon-size;
   background-repeat: no-repeat;
   background-position: center;
-  position: absolute;
-  right: 0;
-  top: 0;
+  background-size: $searchbar-ios-input-clear-icon-size;
 }
 
 
@@ -101,16 +105,15 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-ios-cancel {
-  transition: $searchbar-ios-cancel-transition;
-  height: 30px;
-
-  margin-left: 0;
+  flex: 0 0 0%;
   margin-right: 0;
+  margin-left: 0;
   padding: 0;
 
+  height: 30px;
   visibility: hidden;
   transform: translateX(calc(100% + #{$searchbar-ios-padding-left-right}));
-  flex: 0 0 0%;
+  transition: $searchbar-ios-cancel-transition;
 }
 
 
@@ -121,6 +124,7 @@ ion-searchbar {
   .searchbar-search-icon {
     margin-left: 0;
   }
+
   .searchbar-input {
     padding-left: 30px;
   }
@@ -131,10 +135,10 @@ ion-searchbar {
 
 .searchbar-focused {
   .searchbar-ios-cancel {
-    transform: translateX(0);
     flex: 0 0 auto;
     padding-left: 8px;
     visibility: visible;
+    transform: translateX(0);
   }
 }
 
@@ -144,11 +148,11 @@ ion-searchbar {
 .toolbar {
 
   ion-searchbar {
-    background: transparent;
     border-bottom-width: 0;
+    background: transparent;
 
     .searchbar-input {
-      background-color: rgba(0, 0, 0, 0.08);
+      background: $searchbar-ios-toolbar-input-background;
     }
 
     .searchbar-ios-cancel {
diff --git a/ionic/components/searchbar/searchbar.md.scss b/ionic/components/searchbar/searchbar.md.scss
index 4133ddb09f..be9fae39e1 100644
--- a/ionic/components/searchbar/searchbar.md.scss
+++ b/ionic/components/searchbar/searchbar.md.scss
@@ -7,19 +7,19 @@
 $searchbar-md-padding:                   8px !default;
 $searchbar-md-background-color:          inherit !default;
 
-$searchbar-md-input-search-icon-color:   #5B5B5B !default;
+$searchbar-md-input-search-icon-color:   #5b5b5b !default;
 $searchbar-md-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
 $searchbar-md-input-search-icon-size:    20px !default;
 
 $searchbar-md-input-height:              auto !default;
 $searchbar-md-input-line-height:         3rem !default;
-$searchbar-md-input-box-shadow:          0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
-$searchbar-md-input-placeholder-color:   #AEAEAE !default;
+$searchbar-md-input-box-shadow:          0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
+$searchbar-md-input-placeholder-color:   #aeaeae !default;
 $searchbar-md-input-text-color:          #141414 !default;
-$searchbar-md-input-background-color:    #FFFFFF !default;
+$searchbar-md-input-background-color:    #fff !default;
 $searchbar-md-input-border-radius:       2px !default;
 
-$searchbar-md-input-clear-icon-color:    #5B5B5B !default;
+$searchbar-md-input-clear-icon-color:    #5b5b5b !default;
 $searchbar-md-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
 $searchbar-md-input-clear-icon-size:     22px !default;
 
@@ -37,11 +37,12 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-search-icon {
-  width: $searchbar-md-input-search-icon-size + 1;
-  height: $searchbar-md-input-search-icon-size + 1;
+  @include svg-background-image($searchbar-md-input-search-icon-svg);
+
   top: 11px;
   left: 16px;
-  @include svg-background-image($searchbar-md-input-search-icon-svg);
+  width: $searchbar-md-input-search-icon-size + 1;
+  height: $searchbar-md-input-search-icon-size + 1;
 }
 
 
@@ -49,12 +50,12 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-md-cancel {
-  display: none;
-  width: $searchbar-md-input-search-icon-size + 1;
-  height: 100%;
-  margin: 0;
   top: 0;
   left: 10px;
+  display: none;
+  margin: 0;
+  width: $searchbar-md-input-search-icon-size + 1;
+  height: 100%;
 }
 
 // Searchbar Search & Cancel Icon
@@ -62,9 +63,9 @@ ion-searchbar {
 
 .searchbar-search-icon,
 .searchbar-md-cancel {
-  background-size: $searchbar-md-input-search-icon-size;
-  background-repeat: no-repeat;
   position: absolute;
+  background-repeat: no-repeat;
+  background-size: $searchbar-md-input-search-icon-size;
 
   &.activated {
     background-color: transparent;
@@ -76,21 +77,21 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-input {
-  padding: 6px 55px;
+  @include placeholder($searchbar-md-input-placeholder-color);
 
+  padding: 6px 55px;
   height: $searchbar-md-input-height;
-  line-height: $searchbar-md-input-line-height;
-  box-shadow: $searchbar-md-input-box-shadow;
+  border-radius: $searchbar-md-input-border-radius;
 
   font-size: 1.6rem;
   font-weight: 400;
 
-  border-radius: $searchbar-md-input-border-radius;
+  line-height: $searchbar-md-input-line-height;
   color: $searchbar-md-input-text-color;
+
   background-color: $searchbar-md-input-background-color;
   background-position: 8px center;
-
-  @include placeholder($searchbar-md-input-placeholder-color);
+  box-shadow: $searchbar-md-input-box-shadow;
 }
 
 
@@ -98,17 +99,19 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-clear-icon {
-  width: $searchbar-md-input-clear-icon-size;
-  height: 100%;
+  @include svg-background-image($searchbar-md-input-clear-icon-svg);
+
+  position: absolute;
+  top: 0;
+  right: 13px;
   padding: 0;
 
-  @include svg-background-image($searchbar-md-input-clear-icon-svg);
-  background-size: $searchbar-md-input-clear-icon-size;
+  width: $searchbar-md-input-clear-icon-size;
+  height: 100%;
+
   background-repeat: no-repeat;
   background-position: center;
-  position: absolute;
-  right: 13px;
-  top: 0;
+  background-size: $searchbar-md-input-clear-icon-size;
 
   &.activated {
     background-color: transparent;
diff --git a/ionic/components/searchbar/searchbar.scss b/ionic/components/searchbar/searchbar.scss
index df5c1dba68..cfda40cc9e 100644
--- a/ionic/components/searchbar/searchbar.scss
+++ b/ionic/components/searchbar/searchbar.scss
@@ -24,15 +24,15 @@ ion-searchbar {
 }
 
 .searchbar-input {
+  @include appearance(none);
   display: block;
   width: 100%;
-  border: none;
+  border: 0;
   font-family: inherit;
-  @include appearance(none);
 }
 
 .searchbar-clear-icon {
-  min-height: 0;
-  padding: 0;
   margin: 0;
+  padding: 0;
+  min-height: 0;
 }
diff --git a/ionic/components/searchbar/searchbar.wp.scss b/ionic/components/searchbar/searchbar.wp.scss
index 955e87550b..cf00c1427c 100644
--- a/ionic/components/searchbar/searchbar.wp.scss
+++ b/ionic/components/searchbar/searchbar.wp.scss
@@ -20,7 +20,7 @@ $searchbar-wp-input-height:              auto !default;
 $searchbar-wp-input-line-height:         3rem !default;
 $searchbar-wp-input-placeholder-color:   #858585 !default;
 $searchbar-wp-input-text-color:          #141414 !default;
-$searchbar-wp-input-background-color:    #FFFFFF !default;
+$searchbar-wp-input-background-color:    #fff !default;
 $searchbar-wp-input-border-radius:       0 !default;
 $searchbar-wp-input-font-size:           1.4rem !default;
 $searchbar-wp-input-font-weight:         400 !default;
@@ -35,8 +35,8 @@ $searchbar-wp-input-clear-icon-size:     22px !default;
 
 ion-searchbar {
   padding: $searchbar-wp-padding;
-  background: $searchbar-wp-background-color;
   border: $searchbar-wp-border-width solid $searchbar-wp-border-color;
+  background: $searchbar-wp-background-color;
 }
 
 
@@ -44,15 +44,17 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-search-icon {
-  width: $searchbar-wp-input-search-icon-size + 1;
-  height: $searchbar-wp-input-search-icon-size + 1;
+  @include svg-background-image($searchbar-wp-input-search-icon-svg);
+
+  position: absolute;
   top: 5px;
   right: $searchbar-wp-input-padding-horizontal;
-  background-size: $searchbar-wp-input-search-icon-size;
-  background-repeat: no-repeat;
-  position: absolute;
 
-  @include svg-background-image($searchbar-wp-input-search-icon-svg);
+  width: $searchbar-wp-input-search-icon-size + 1;
+  height: $searchbar-wp-input-search-icon-size + 1;
+
+  background-repeat: no-repeat;
+  background-size: $searchbar-wp-input-search-icon-size;
 
   &.activated {
     background-color: transparent;
@@ -64,20 +66,19 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-input {
+  @include placeholder($searchbar-wp-input-placeholder-color);
+
   padding: $searchbar-wp-input-padding-vertical $searchbar-wp-input-padding-horizontal;
-
   height: $searchbar-wp-input-height;
-  line-height: $searchbar-wp-input-line-height;
-
+  border-radius: $searchbar-wp-input-border-radius;
   font-size: $searchbar-wp-input-font-size;
   font-weight: $searchbar-wp-input-font-weight;
 
-  border-radius: $searchbar-wp-input-border-radius;
+  line-height: $searchbar-wp-input-line-height;
   color: $searchbar-wp-input-text-color;
+
   background-color: $searchbar-wp-input-background-color;
   background-position: $searchbar-wp-input-padding-horizontal center;
-
-  @include placeholder($searchbar-wp-input-placeholder-color);
 }
 
 
@@ -85,17 +86,19 @@ ion-searchbar {
 // -----------------------------------------
 
 .searchbar-clear-icon {
+  @include svg-background-image($searchbar-wp-input-clear-icon-svg);
+
+  position: absolute;
+  top: 0;
+  right: $searchbar-wp-input-padding-horizontal;
+
+  padding: 0;
   width: $searchbar-wp-input-clear-icon-size;
   height: 100%;
-  padding: 0;
 
-  @include svg-background-image($searchbar-wp-input-clear-icon-svg);
-  background-size: $searchbar-wp-input-clear-icon-size;
   background-repeat: no-repeat;
   background-position: center;
-  position: absolute;
-  right: $searchbar-wp-input-padding-horizontal;
-  top: 0;
+  background-size: $searchbar-wp-input-clear-icon-size;
 
   &.activated {
     background-color: transparent;
@@ -119,16 +122,6 @@ ion-searchbar {
 }
 
 
-// Searchbar in Toolbar
-// -----------------------------------------
-
-.toolbar {
-  ion-searchbar {
-
-  }
-}
-
-
 // Searchbar Cancel Icon (iOS only)
 // -----------------------------------------
 
diff --git a/ionic/components/segment/segment.ios.scss b/ionic/components/segment/segment.ios.scss
index cb7fd807f2..138afbdfca 100644
--- a/ionic/components/segment/segment.ios.scss
+++ b/ionic/components/segment/segment.ios.scss
@@ -4,19 +4,19 @@
 // iOS Segment
 // --------------------------------------------------
 
-$segment-button-ios-background-color:                   transparent !default;
-$segment-button-ios-background-color-activated:         $toolbar-ios-active-color !default;
+$segment-button-ios-background-color:           transparent !default;
+$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;
 
 $segment-button-ios-text-color:                 color-inverse($segment-button-ios-background-color-activated) !default;
 $segment-button-ios-activated-transition:       100ms all linear !default;
 $segment-button-ios-hover-transition:           100ms all linear !default;
 $segment-button-ios-active-transition:          100ms all linear !default;
-$segment-button-ios-hover-opacity:              0.1 !default;
-$segment-button-ios-active-opacity:             0.16 !default;
+$segment-button-ios-hover-opacity:              .1 !default;
+$segment-button-ios-active-opacity:             .16 !default;
 
 $segment-button-ios-border-width:               1px !default;
 $segment-button-ios-height:                     3.2rem !default;
-$segment-button-ios-line-height:                3.0rem !default;
+$segment-button-ios-line-height:                3rem !default;
 $segment-button-ios-font-size:                  1.3rem !default;
 $segment-button-ios-border-radius:              4px !default;
 $segment-button-ios-icon-size:                  2.6rem !default;
@@ -31,29 +31,29 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
 
 .segment-button {
-  height: $segment-button-ios-height;
-  line-height: $segment-button-ios-line-height;
-  font-size: $segment-button-ios-font-size;
+  flex: 1;
+  width: 0;
 
+  height: $segment-button-ios-height;
   border-width: $segment-button-ios-border-width;
   border-style: solid;
   border-color: $segment-button-ios-background-color-activated;
 
+  font-size: $segment-button-ios-font-size;
+  line-height: $segment-button-ios-line-height;
+
   color: $segment-button-ios-background-color-activated;
   background-color: $segment-button-ios-background-color;
 
-  flex: 1;
-  width: 0;  
-
   ion-icon {
     font-size: $segment-button-ios-icon-size;
     line-height: $segment-button-ios-icon-line-height;
   }
 
   &.segment-activated {
-    opacity: 1;
     color: $segment-button-ios-text-color;
     background-color: $segment-button-ios-background-color-activated;
+    opacity: 1;
     transition: $segment-button-ios-activated-transition;
   }
 
@@ -68,8 +68,8 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
   }
 
   &:first-of-type {
-    border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
     margin-right: 0;
+    border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
   }
 
   &:not(:first-of-type) {
@@ -77,9 +77,9 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
   }
 
   &:last-of-type {
+    margin-left: 0;
     border-left-width: 0;
     border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
-    margin-left: 0;
   }
 }
 
@@ -87,17 +87,17 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
 
   ion-segment {
     position: absolute;
-    left: 0;
-    right: 0;
     top: 0;
+    right: 0;
     bottom: 0;
+    left: 0;
   }
 
   .segment-button {
     max-width: $segment-button-ios-toolbar-button-max-width;
     height: $segment-button-ios-toolbar-button-height;
-    line-height: $segment-button-ios-toolbar-line-height;
     font-size: $segment-button-ios-toolbar-font-size;
+    line-height: $segment-button-ios-toolbar-line-height;
 
     ion-icon {
       font-size: $segment-button-ios-toolbar-icon-size;
diff --git a/ionic/components/segment/segment.md.scss b/ionic/components/segment/segment.md.scss
index d0c73892b9..b206fe3c6c 100644
--- a/ionic/components/segment/segment.md.scss
+++ b/ionic/components/segment/segment.md.scss
@@ -8,35 +8,34 @@ $segment-button-md-text-color-activated:       $toolbar-md-active-color !default
 $segment-button-md-border-color-activated:     $toolbar-md-active-color !default;
 
 $segment-button-md-border-bottom-width:        2px !default;
-$segment-button-md-border-bottom-color:        rgba(#000000, 0.10) !default;
+$segment-button-md-border-bottom-color:        rgba(#000, .10) !default;
 
 $segment-button-md-padding:                    0 6px !default;
 $segment-button-md-height:                     4.2rem !default;
-$segment-button-md-line-height:                4.0rem !default;
+$segment-button-md-line-height:                4rem !default;
 $segment-button-md-font-size:                  1.2rem !default;
 $segment-button-md-icon-size:                  2.6rem !default;
 $segment-button-md-icon-line-height:           $segment-button-md-line-height !default;
 
 
 .segment-button {
+  flex: 1;
   padding: $segment-button-md-padding;
+  width: 0;
+  height: $segment-button-md-height;
+
   border-bottom-width: $segment-button-md-border-bottom-width;
   border-bottom-style: solid;
   border-bottom-color: $segment-button-md-border-bottom-color;
 
-  height: $segment-button-md-height;
-  line-height: $segment-button-md-line-height;
-
   font-size: $segment-button-md-font-size;
-  text-transform: uppercase;
   font-weight: 500;
+  line-height: $segment-button-md-line-height;
+  text-transform: uppercase;
 
-  flex: 1;
-  width: 0;  
-
-  opacity: 0.7;
   color: $segment-button-md-text-color-activated;
   background-color: transparent;
+  opacity: .7;
   transition: 100ms all linear;
 
   ion-icon {
@@ -74,9 +73,9 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
 
     &.activated,
     &.segment-activated {
-      opacity: 1;
       border-color: $color-value;
       color: $color-value;
+      opacity: 1;
     }
   }
 
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 746506129f..6037250c4b 100644
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -6,20 +6,20 @@
 
 ion-segment {
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
-  flex: 1;
   width: 100%;
 }
 
 .segment-button {
   position: relative;
   display: block;
-
-  margin-left: 0;
-  margin-right: 0;
-
   overflow: hidden;
+
+  margin-right: 0;
+  margin-left: 0;
+
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/ionic/components/segment/segment.wp.scss b/ionic/components/segment/segment.wp.scss
index b3f46bbfc6..0482f94972 100644
--- a/ionic/components/segment/segment.wp.scss
+++ b/ionic/components/segment/segment.wp.scss
@@ -7,8 +7,8 @@
 $segment-button-wp-text-color-activated:       $toolbar-wp-text-color !default;
 
 $segment-button-wp-padding:                    0 6px !default;
-$segment-button-wp-height:                     4.0rem !default;
-$segment-button-wp-line-height:                4.0rem !default;
+$segment-button-wp-height:                     4rem !default;
+$segment-button-wp-line-height:                4rem !default;
 $segment-button-wp-font-size:                  1.3rem !default;
 $segment-button-wp-text-transform:             uppercase !default;
 $segment-button-wp-font-weight:                bold !default;
@@ -16,8 +16,8 @@ $segment-button-wp-icon-size:                  2.6rem !default;
 $segment-button-wp-icon-line-height:           $segment-button-wp-line-height !default;
 $segment-button-wp-background-color:           transparent !default;
 
-$segment-button-wp-opacity:                    0.5 !default;
-$segment-button-wp-opacity-activated:          1.0 !default;
+$segment-button-wp-opacity:                    .5 !default;
+$segment-button-wp-opacity-activated:          1 !default;
 
 $segment-button-wp-buttons-justify-content:    flex-start !default;
 
@@ -29,15 +29,15 @@ ion-segment {
   padding: $segment-button-wp-padding;
 
   height: $segment-button-wp-height;
+  font-size: $segment-button-wp-font-size;
+  font-weight: $segment-button-wp-font-weight;
   line-height: $segment-button-wp-line-height;
 
-  font-size: $segment-button-wp-font-size;
   text-transform: $segment-button-wp-text-transform;
-  font-weight: $segment-button-wp-font-weight;
 
-  opacity: $segment-button-wp-opacity;
   color: $segment-button-wp-text-color-activated;
   background-color: $segment-button-wp-background-color;
+  opacity: $segment-button-wp-opacity;
 
   ion-icon {
     font-size: $segment-button-wp-icon-size;
@@ -69,9 +69,9 @@ ion-segment {
 
     &.activated,
     &.segment-activated {
-      opacity: $segment-button-wp-opacity-activated;
       border-color: $color-value;
       color: $color-value;
+      opacity: $segment-button-wp-opacity-activated;
     }
   }
 
diff --git a/ionic/components/select/select.ios.scss b/ionic/components/select/select.ios.scss
index b8ed48cf1b..7d8d1d9c91 100644
--- a/ionic/components/select/select.ios.scss
+++ b/ionic/components/select/select.ios.scss
@@ -9,6 +9,8 @@ $select-ios-padding-right:       ($item-ios-padding-right / 2) !default;
 $select-ios-padding-bottom:      $item-ios-padding-bottom !default;
 $select-ios-padding-left:        $item-ios-padding-left !default;
 
+$select-ios-icon-color:          #999 !default;
+
 
 ion-select {
   padding: $select-ios-padding-top $select-ios-padding-right  $select-ios-padding-bottom $select-ios-padding-left;
@@ -30,6 +32,6 @@ ion-select {
   border-top: 5px solid;
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
-  color: #999;
+  color: $select-ios-icon-color;
   pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/ionic/components/select/select.md.scss b/ionic/components/select/select.md.scss
index 72b32f71a6..a264e1ba44 100644
--- a/ionic/components/select/select.md.scss
+++ b/ionic/components/select/select.md.scss
@@ -9,6 +9,8 @@ $select-md-padding-right:       ($item-md-padding-right / 2) !default;
 $select-md-padding-bottom:      $item-md-padding-bottom !default;
 $select-md-padding-left:        $item-md-padding-left !default;
 
+$select-md-icon-color:          #999 !default;
+
 
 ion-select {
   padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
@@ -34,6 +36,6 @@ ion-select {
   border-top: 5px solid;
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
-  color: #999;
+  color: $select-md-icon-color;
   pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/ionic/components/select/select.scss b/ionic/components/select/select.scss
index 6bcd50f912..7447abc470 100644
--- a/ionic/components/select/select.scss
+++ b/ionic/components/select/select.scss
@@ -10,12 +10,12 @@ ion-select {
 }
 
 .select-text {
+  overflow: hidden;
   flex: 1;
   min-width: 16px;
   font-size: inherit;
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .item-multiple-inputs ion-select {
@@ -24,6 +24,6 @@ ion-select {
 
 .select-disabled,
 .item-select-disabled ion-label {
-  opacity: 0.4;
+  opacity: .4;
   pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/ionic/components/select/select.wp.scss b/ionic/components/select/select.wp.scss
index 3f1da04767..2de9103b94 100644
--- a/ionic/components/select/select.wp.scss
+++ b/ionic/components/select/select.wp.scss
@@ -35,14 +35,13 @@ ion-select {
 
 .select-icon .select-icon-inner {
   position: absolute;
+  top: 3px;
+  left: 5px;
   display: block;
 
   width: ($select-wp-icon-width / 2);
   height: ($select-wp-icon-width / 2);
 
-  left: 5px;
-  top: 3px;
-
   border-top: $select-wp-icon-arrow-width solid $select-wp-icon-color;
   border-right: $select-wp-icon-arrow-width solid $select-wp-icon-color;
 
diff --git a/ionic/components/slides/slides.scss b/ionic/components/slides/slides.scss
index 06bb305471..5bae405f95 100644
--- a/ionic/components/slides/slides.scss
+++ b/ionic/components/slides/slides.scss
@@ -123,7 +123,7 @@ ion-swipe-slides {
 }
 .swiper-button-prev.swiper-button-disabled,
 .swiper-button-next.swiper-button-disabled {
-  opacity: 0.35;
+  opacity: .35;
   cursor: auto;
   pointer-events: none;
 }
@@ -178,10 +178,10 @@ ion-swipe-slides {
   display: inline-block;
   border-radius: 100%;
   background: #000;
-  opacity: 0.2;
+  opacity: .2;
 }
 button.swiper-pagination-bullet {
-  border: none;
+  border: 0;
   margin: 0;
   padding: 0;
   box-shadow: none;
@@ -258,51 +258,51 @@ button.swiper-pagination-bullet {
   z-index: 10;
 }
 .swiper-container-3d .swiper-slide-shadow-left {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
   /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Firefox 3.6-15 */
-  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Opera 11.10-12.00 */
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Firefox 16+, IE10, Opera 12.50+ */
 }
 .swiper-container-3d .swiper-slide-shadow-right {
-  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
   /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Firefox 3.6-15 */
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Opera 11.10-12.00 */
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Firefox 16+, IE10, Opera 12.50+ */
 }
 .swiper-container-3d .swiper-slide-shadow-top {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
   /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Firefox 3.6-15 */
-  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Opera 11.10-12.00 */
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Firefox 16+, IE10, Opera 12.50+ */
 }
 .swiper-container-3d .swiper-slide-shadow-bottom {
-  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
   /* Safari 4+, Chrome */
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Chrome 10+, Safari 5.1+, iOS 5+ */
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Firefox 3.6-15 */
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Opera 11.10-12.00 */
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
   /* Firefox 16+, IE10, Opera 12.50+ */
 }
 /* Coverflow */
@@ -377,7 +377,7 @@ button.swiper-pagination-bullet {
   width: 100%;
   height: 100%;
   background: #000;
-  opacity: 0.6;
+  opacity: .6;
   -webkit-filter: blur(50px);
   filter: blur(50px);
   z-index: 0;
@@ -387,7 +387,7 @@ button.swiper-pagination-bullet {
   border-radius: 10px;
   position: relative;
   -ms-touch-action: none;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, .1);
 }
 .swiper-container-horizontal > .swiper-scrollbar {
   position: absolute;
@@ -409,7 +409,7 @@ button.swiper-pagination-bullet {
   height: 100%;
   width: 100%;
   position: relative;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, .5);
   border-radius: 10px;
   left: 0;
   top: 0;
diff --git a/ionic/components/spinner/spinner.scss b/ionic/components/spinner/spinner.scss
index cce517e8b4..c3c5f05c6f 100644
--- a/ionic/components/spinner/spinner.scss
+++ b/ionic/components/spinner/spinner.scss
@@ -4,8 +4,8 @@
 // --------------------------------------------------
 
 ion-spinner {
-  display: inline-block;
   position: relative;
+  display: inline-block;
   width: 28px;
   height: 28px;
 }
@@ -29,7 +29,7 @@ ion-spinner.spinner-paused svg {
 
 .spinner-ios line,
 .spinner-ios-small line {
-  stroke: #69717d;;
+  stroke: #69717d;
   stroke-width: 4px;
   stroke-linecap: round;
 }
@@ -89,8 +89,8 @@ ion-spinner.spinner-paused svg {
 }
 
 .spinner-dots svg {
-  animation: spinner-dots 1s linear infinite;
   transform-origin: center;
+  animation: spinner-dots 1s linear infinite;
 }
 
 
@@ -113,7 +113,7 @@ ion-spinner.spinner-paused svg {
 }
 
 @keyframes spinner-dots {
-  0% { opacity: 0.9; transform: scale(1, 1); }
-  50% { opacity: 0.3; transform: scale(0.4, 0.4); }
-  100% { opacity: 0.9; transform: scale(1, 1); }
+  0% { opacity: .9; transform: scale(1, 1); }
+  50% { opacity: .3; transform: scale(.4, .4); }
+  100% { opacity: .9; transform: scale(1, 1); }
 }
diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss
index 4b70190eea..6fd126847c 100644
--- a/ionic/components/tabs/tabs.ios.scss
+++ b/ionic/components/tabs/tabs.ios.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 $tabbar-ios-background:               $toolbar-ios-background !default;
-$tabbar-ios-item-padding:             0px 10px !default;
+$tabbar-ios-item-padding:             0 10px !default;
 $tabbar-ios-item-font-size:           10px !default;
 $tabbar-ios-item-icon-size:           30px !default;
 $tabbar-ios-height:                   49px !default;
@@ -22,7 +22,7 @@ tabbar {
 }
 
 ion-tabs[tabbarPlacement=top] tabbar {
-  border-top: none;
+  border-top: 0;
   border-bottom: 1px solid $toolbar-ios-border-color;
 }
 
@@ -41,10 +41,10 @@ ion-tabs[tabbarPlacement=top] tabbar {
 }
 
 .tab-button-text {
-  min-height: $tabbar-ios-item-font-size + 1;
-  font-size: $tabbar-ios-item-font-size;
   margin-top: 0;
   margin-bottom: 0;
+  min-height: $tabbar-ios-item-font-size + 1;
+  font-size: $tabbar-ios-item-font-size;
 }
 
 .has-title-only .tab-button-text {
@@ -52,11 +52,11 @@ ion-tabs[tabbarPlacement=top] tabbar {
 }
 
 .tab-button-icon {
-  font-size: $tabbar-ios-item-icon-size;
-  height: $tabbar-ios-item-icon-size;
   min-width: $tabbar-ios-item-icon-size + 5;
+  height: $tabbar-ios-item-icon-size;
+  font-size: $tabbar-ios-item-icon-size;
 
-  &:before {
+  &::before {
     vertical-align: top;
   }
 }
@@ -81,10 +81,9 @@ ion-tabs[tabbarPlacement=top] tabbar {
   min-height: $tabbar-ios-height - 8;
 
   .tab-button-text {
+    margin: 2px 0;
     font-size: 1.4rem;
     line-height: 1.1;
-
-    margin: 2px 0px;
   }
 }
 
diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss
index ff7430c2ac..dd30bf5958 100644
--- a/ionic/components/tabs/tabs.md.scss
+++ b/ionic/components/tabs/tabs.md.scss
@@ -23,18 +23,17 @@ tabbar {
 .tab-button {
   padding: $tabbar-md-item-padding;
   min-height: $tabbar-md-item-height;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
   font-size: $tabbar-md-item-font-size;
   font-weight: $tabbar-md-item-font-weight;
-  opacity: 0.7;
-
-  box-shadow: none;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
   color: $tab-button-md-inactive-color;
+  box-shadow: none;
+  opacity: .7;
 
   &[aria-selected=true] {
-    opacity: 1.0;
     color: $tab-button-md-active-color;
+    opacity: 1;
   }
 }
 
@@ -45,8 +44,8 @@ tabbar {
 }
 
 .tab-button-icon {
-  font-size: $tabbar-md-item-icon-size;
   min-width: $tabbar-md-item-icon-size + 5;
+  font-size: $tabbar-md-item-icon-size;
 }
 
 [tabbarLayout=icon-bottom] .tab-button {
@@ -67,19 +66,19 @@ tabbar {
 [tabbarLayout=title-hide] .tab-button,
 .tab-button.icon-only,
 .tab-button.has-title-only {
-  padding: 6px 10px 6px 10px;
+  padding: 6px 10px;
 }
 
 tab-highlight {
   position: absolute;
-  display: block;
-  height: 2px;
-  width: 1px;
   bottom: 0;
   left: 0;
+  display: block;
+  width: 1px;
+  height: 2px;
   background: $tab-button-md-active-color;
-  transform-origin: 0 0;
   transform: translateZ(0);
+  transform-origin: 0 0;
 
   &.animate {
     transition-duration: 300ms;
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index c9fcb2d429..a44ea8e719 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -6,15 +6,15 @@
 
 ion-tabs {
   display: flex;
+  overflow: hidden;
   flex-direction: column;
 
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
   margin: 0;
   padding: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
 }
 
 ion-tab {
@@ -23,12 +23,12 @@ ion-tab {
   right: 0;
   bottom: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  display: none;
   overflow: hidden;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
 
-  display: none;
   &.show-tab {
     display: flex;
   }
@@ -50,30 +50,30 @@ ion-tabbar-section {
 tabbar {
   position: relative;
   display: flex;
-  justify-content: center;
   overflow: hidden;
+  justify-content: center;
 }
 
 .tab-button {
-  position: relative;
-  z-index: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  align-self: center;
-  align-items: center;
-
-  margin: 0;
-
-  text-align: center;
-  cursor: pointer;
   @include user-select-none();
 
+  position: relative;
+  z-index: 0;
+  display: flex;
+  overflow: hidden;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+
+  margin: 0;
   border: 0;
   border-radius: 0;
+
+  text-align: center;
   background: none;
+  cursor: pointer;
 }
 
 .tab-button-text {
@@ -83,16 +83,16 @@ tabbar {
 
 .tab-button-text,
 .tab-button-icon {
+  display: none;
+  overflow: hidden;
+
   align-self: center;
 
   min-width: 26px;
   max-width: 100%;
 
-  overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-
-  display: none;
+  white-space: nowrap;
 }
 
 .has-icon .tab-button-icon,
@@ -118,8 +118,8 @@ tab-highlight {
   flex-direction: row;
 
   .tab-button-icon {
-    text-align: right;
     padding-right: 8px;
+    text-align: right;
   }
 }
 
@@ -128,8 +128,8 @@ tab-highlight {
 
   .tab-button-icon {
     order: 10;
-    text-align: left;
     padding-left: 8px;
+    text-align: left;
   }
 }
 
diff --git a/ionic/components/tabs/tabs.wp.scss b/ionic/components/tabs/tabs.wp.scss
index 9d65dee5ef..bc15c409d0 100644
--- a/ionic/components/tabs/tabs.wp.scss
+++ b/ionic/components/tabs/tabs.wp.scss
@@ -14,6 +14,7 @@ $tabbar-wp-item-height:              4.8rem !default;
 $tab-button-wp-active-color:         $toolbar-wp-active-color !default;
 $tab-button-wp-inactive-color:       $toolbar-wp-inactive-color !default;
 
+$tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;
 
 tabbar {
   background: $tabbar-wp-background;
@@ -23,23 +24,22 @@ tabbar {
 .tab-button {
   padding: $tabbar-wp-item-padding;
   min-height: $tabbar-wp-item-height;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
   font-size: $tabbar-wp-item-font-size;
   font-weight: $tabbar-wp-item-font-weight;
-  opacity: 0.7;
-
-  box-shadow: none;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
   color: $tab-button-wp-inactive-color;
+  box-shadow: none;
+  opacity: .7;
 
   &[aria-selected=true] {
-    opacity: 1.0;
-    color: $tab-button-wp-active-color;
     border-bottom: 2px solid $tab-button-wp-active-color;
+    color: $tab-button-wp-active-color;
+    opacity: 1;
   }
 
   &.activated {
-    background: rgba(0,0,0,0.1);
+    background: $tab-button-wp-background-activated;
   }
 }
 
@@ -49,8 +49,8 @@ tabbar {
 }
 
 .tab-button-icon {
-  font-size: $tabbar-wp-item-icon-size;
   min-width: $tabbar-wp-item-icon-size;
+  font-size: $tabbar-wp-item-icon-size;
 }
 
 [tabbarIcons=bottom] .tab-button {
@@ -69,7 +69,7 @@ tabbar {
 
 .tab-button.icon-only,
 .tab-button.has-title-only {
-  padding: 6px 10px 6px 10px;
+  padding: 6px 10px;
 }
 
 
@@ -87,8 +87,8 @@ tabbar {
 
     .tab-button:hover:not(.disable-hover),
     .tab-button[aria-selected=true] {
-      color: color-inverse($color-value);
       border-color: color-inverse($color-value);
+      color: color-inverse($color-value);
     }
   }
 
diff --git a/ionic/components/toggle/toggle.ios.scss b/ionic/components/toggle/toggle.ios.scss
index 1b4a33f93f..c9fcc9153f 100644
--- a/ionic/components/toggle/toggle.ios.scss
+++ b/ionic/components/toggle/toggle.ios.scss
@@ -16,7 +16,7 @@ $toggle-ios-background-color-on:       map-get($colors-ios, primary) !default;
 $toggle-ios-handle-width:              $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
 $toggle-ios-handle-height:             $toggle-ios-handle-width !default;
 $toggle-ios-handle-border-radius:      $toggle-ios-handle-height / 2 !default;
-$toggle-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
+$toggle-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
 
 $toggle-ios-handle-background-color:   $toggle-ios-background-color-off !default;
 
@@ -25,7 +25,7 @@ $toggle-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($i
 
 $toggle-ios-transition-duration:       300ms !default;
 
-$toggle-ios-disabled-opacity:          0.3 !default;
+$toggle-ios-disabled-opacity:          .3 !default;
 
 
 // iOS Toggle
@@ -45,27 +45,27 @@ ion-toggle {
   width: $toggle-ios-width;
   height: $toggle-ios-height;
   border-radius: $toggle-ios-border-radius;
-  pointer-events: none;
 
   background-color: $toggle-ios-border-color-off;
   transition: background-color $toggle-ios-transition-duration;
+  pointer-events: none;
 }
 
 
 // iOS Toggle Background Oval: Unchecked
 // -----------------------------------------
 
-.toggle-icon:before {
-  content: '';
+.toggle-icon::before {
   position: absolute;
   top: $toggle-ios-border-width;
   right: $toggle-ios-border-width;
-  left: $toggle-ios-border-width;
   bottom: $toggle-ios-border-width;
+  left: $toggle-ios-border-width;
 
   border-radius: $toggle-ios-border-radius;
   background-color: $toggle-ios-background-color-off;
 
+  content: "";
   transform: scale3d(1, 1, 1);
   transition: transform $toggle-ios-transition-duration;
 }
@@ -101,8 +101,8 @@ ion-toggle {
 // iOS Toggle Background Oval: Activated or Checked
 // -----------------------------------------
 
-.toggle-activated:before,
-.toggle-checked:before {
+.toggle-activated::before,
+.toggle-checked::before {
   transform: scale3d(0, 0, 0);
 }
 
@@ -118,7 +118,7 @@ ion-toggle {
 // iOS Toggle Background Oval: Activated and Checked
 // -----------------------------------------
 
-.toggle-activated.toggle-checked:before {
+.toggle-activated.toggle-checked::before {
   transform: scale3d(0, 0, 0);
 }
 
@@ -155,15 +155,6 @@ ion-toggle {
 }
 
 
-// iOS Toggle within an item
-// -----------------------------------------
-
-.item ion-toggle {
-  margin: $toggle-ios-media-margin;
-  padding: $toggle-ios-media-padding;
-}
-
-
 // iOS Toggle Within An Item
 // -----------------------------------------
 
diff --git a/ionic/components/toggle/toggle.md.scss b/ionic/components/toggle/toggle.md.scss
index a95789b9a2..b0f337f742 100644
--- a/ionic/components/toggle/toggle.md.scss
+++ b/ionic/components/toggle/toggle.md.scss
@@ -14,7 +14,7 @@ $toggle-md-handle-width:                 20px !default;
 $toggle-md-handle-height:                20px !default;
 $toggle-md-handle-background-color-off:  $background-md-color !default;
 $toggle-md-handle-background-color-on:   $toggle-md-active-color !default;
-$toggle-md-handle-box-shadow:            0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$toggle-md-handle-box-shadow:            0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 $toggle-md-handle-border-radius:         50% !default;
 
 $toggle-md-media-margin:                 0 !default;
@@ -22,7 +22,7 @@ $toggle-md-media-padding:                12px ($item-md-padding-right / 2) 12px
 
 $toggle-md-transition-duration:          300ms !default;
 
-$toggle-md-disabled-opacity:             0.3 !default;
+$toggle-md-disabled-opacity:             .3 !default;
 
 
 // Material Design Toggle
@@ -41,11 +41,11 @@ ion-toggle {
   display: block;
   width: $toggle-md-track-width;
   height: $toggle-md-track-height;
-  pointer-events: none;
   border-radius: $toggle-md-track-height;
-
   background-color: $toggle-md-track-background-color-off;
-  transition: background-color $toggle-md-transition-duration
+
+  transition: background-color $toggle-md-transition-duration;
+  pointer-events: none;
 }
 
 
@@ -61,12 +61,12 @@ ion-toggle {
   height: $toggle-md-handle-height;
 
   border-radius: $toggle-md-handle-border-radius;
-  box-shadow: $toggle-md-handle-box-shadow;
-
   background-color: $toggle-md-handle-background-color-off;
 
-  transition-property: transform, background-color;
+  box-shadow: $toggle-md-handle-box-shadow;
+
   transition-duration: $toggle-md-transition-duration;
+  transition-property: transform, background-color;
 }
 
 
diff --git a/ionic/components/toggle/toggle.wp.scss b/ionic/components/toggle/toggle.wp.scss
index b1d82c2185..f16d94887c 100644
--- a/ionic/components/toggle/toggle.wp.scss
+++ b/ionic/components/toggle/toggle.wp.scss
@@ -26,7 +26,7 @@ $toggle-wp-handle-border-radius:         50% !default;
 $toggle-wp-media-margin:                 0 !default;
 $toggle-wp-media-padding:                12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
 
-$toggle-wp-disabled-opacity:             0.3 !default;
+$toggle-wp-disabled-opacity:             .3 !default;
 
 
 // Windows Toggle
@@ -45,11 +45,10 @@ ion-toggle {
   display: block;
   width: $toggle-wp-track-width;
   height: $toggle-wp-track-height;
-  pointer-events: none;
-  border-radius: $toggle-wp-track-height;
-
-  background-color: $toggle-wp-track-background-color-off;
   border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
+  border-radius: $toggle-wp-track-height;
+  background-color: $toggle-wp-track-background-color-off;
+  pointer-events: none;
 }
 
 
@@ -73,8 +72,8 @@ ion-toggle {
 // -----------------------------------------
 
 .toggle-checked {
-  background-color: $toggle-wp-track-background-color-on;
   border-color: $toggle-wp-track-background-color-on;
+  background-color: $toggle-wp-track-background-color-on;
 }
 
 
@@ -84,7 +83,7 @@ ion-toggle {
 .toggle-checked .toggle-inner {
   background-color: $toggle-wp-handle-background-color-on;
   // transform: translate3d(23px, 0, 0);
-  transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ( $toggle-wp-track-border-width * 2 ) - ( $toggle-wp-handle-left * 2 ), 0, 0);
+  transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0);
 }
 
 
@@ -124,8 +123,8 @@ ion-toggle {
   ion-toggle[#{$color-name}] {
 
     .toggle-checked {
-      background-color: $color-value;
       border-color: $color-value;
+      background-color: $color-value;
     }
 
     .toggle-checked .toggle-inner {
diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss
index 6532b06070..7fc1e82d05 100644
--- a/ionic/components/toolbar/toolbar-button.scss
+++ b/ionic/components/toolbar/toolbar-button.scss
@@ -4,35 +4,35 @@
 // --------------------------------------------------
 
 .bar-button {
+  @include user-select-none();
+  @include appearance(none);
+
   position: relative;
   display: inline-block;
 
   margin: 0;
   padding: 0;
 
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  text-align: center;
-  text-transform: none;
   line-height: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+
+  cursor: pointer;
 
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
-
-  cursor: pointer;
-  @include user-select-none();
-  @include appearance(none);
 }
 
-.bar-button:after {
+.bar-button::after {
   // used to make the button's hit area larger
   position: absolute;
-  content: '';
   top: -7px;
   right: -2px;
   bottom: -6px;
   left: -2px;
+  content: "";
 }
 
 
@@ -50,6 +50,7 @@
 
 .back-button {
   display: none;
+
   &.show-back-button {
     display: inline-block;
   }
diff --git a/ionic/components/toolbar/toolbar.ios.scss b/ionic/components/toolbar/toolbar.ios.scss
index 75f6721faa..22092a4d83 100644
--- a/ionic/components/toolbar/toolbar.ios.scss
+++ b/ionic/components/toolbar/toolbar.ios.scss
@@ -64,27 +64,27 @@ ion-navbar-section {
   font-size: $toolbar-ios-title-font-size;
   font-weight: 600;
   text-align: center;
-  pointer-events: auto;
   color: $toolbar-ios-text-color;
+  pointer-events: auto;
 }
 
 ion-title {
   position: absolute;
   top: 0;
   left: 0;
+  padding: 0 90px 1px;
   width: 100%;
   height: 100%;
-  padding: 0px 90px 1px 90px;
+  transform: translateZ(0);
   pointer-events: none;
-  transform: translateZ(0px);
 }
 
 @mixin ios-toolbar-theme($color-name, $color-value) {
   .toolbar[#{$color-name}] {
 
     .toolbar-background {
-      background: $color-value;
       border-color: darken($color-value, 10%);
+      background: $color-value;
     }
 
     .toolbar-title,
@@ -101,7 +101,7 @@ ion-title {
 ion-buttons {
   flex: 1;
   order: map-get($toolbar-order-ios, buttons-start);
-  transform: translateZ(0px);
+  transform: translateZ(0);
 }
 
 ion-buttons[left] {
@@ -109,13 +109,13 @@ ion-buttons[left] {
 }
 
 ion-buttons[end] {
-  text-align: right;
   order: map-get($toolbar-order-ios, buttons-end);
+  text-align: right;
 }
 
 ion-buttons[right] {
-  text-align: right;
   order: map-get($toolbar-order-ios, buttons-right);
+  text-align: right;
 }
 
 
@@ -126,8 +126,8 @@ ion-buttons[right] {
   padding: 0 5px;
   height: 32px;
   border: 0;
-  font-size: $toolbar-ios-button-font-size;
   border-radius: $bar-button-ios-border-radius;
+  font-size: $toolbar-ios-button-font-size;
 }
 
 @mixin ios-bar-button-default($color-name, $color-value) {
@@ -142,7 +142,7 @@ ion-buttons[right] {
     }
 
     &.activated {
-      opacity: 0.4;
+      opacity: .4;
     }
   }
 
@@ -160,7 +160,7 @@ ion-buttons[right] {
   background-color: transparent;
 
   &:hover:not(.disable-hover) {
-    opacity: 0.4;
+    opacity: .4;
   }
 
   &.activated {
@@ -194,14 +194,14 @@ ion-buttons[right] {
   background-color: $bar-button-ios-color;
 
   &:hover:not(.disable-hover) {
-    opacity: 0.4;
     color: color-inverse($bar-button-ios-color);
+    opacity: .4;
   }
 
   &.activated {
-    opacity: 0.4;
     color: color-inverse($bar-button-ios-color);
     background-color: color-shade($bar-button-ios-color);
+    opacity: .4;
   }
 }
 
@@ -223,27 +223,27 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-icon-left ion-icon {
-  padding-right: 0.3em;
+  padding-right: .3em;
   font-size: 1.4em;
-  line-height: 0.67;
+  line-height: .67;
   pointer-events: none;
 }
 
 .bar-button-icon-right ion-icon {
-  padding-left: 0.4em;
+  padding-left: .4em;
   font-size: 1.4em;
-  line-height: 0.67;
+  line-height: .67;
   pointer-events: none;
 }
 
 .bar-button-icon-only {
   padding: 0;
-  min-width: 0.9em;
+  min-width: .9em;
 
   ion-icon {
-    padding: 0 0.1em;
+    padding: 0 .1em;
     font-size: 1.8em;
-    line-height: 0.67;
+    line-height: .67;
     pointer-events: none;
   }
 }
@@ -253,12 +253,12 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .back-button {
+  overflow: visible;
+  order: map-get($toolbar-order-ios, back-button);
   margin: 0;
   min-height: 3.2rem;
   line-height: 1;
-  order: map-get($toolbar-order-ios, back-button);
-  overflow: visible;
-  transform: translateZ(0px);
+  transform: translateZ(0);
 }
 
 .back-button-icon {
@@ -270,7 +270,7 @@ ion-buttons[right] {
 }
 
 .back-button-text {
-  letter-spacing: -0.01em;
+  letter-spacing: -.01em;
 }
 
 
@@ -278,10 +278,10 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-menutoggle {
+  order: map-get($toolbar-order-ios, menu-toggle-start);
   margin: 0 6px;
   padding: 0;
   min-width: 36px;
-  order: map-get($toolbar-order-ios, menu-toggle-start);
 
   ion-icon {
     padding: 0 6px;
@@ -291,7 +291,7 @@ ion-buttons[right] {
   // TODO remove the !important flag - temporary hack until we can remove the element style
   // on transition
   &.activated {
-    opacity: 0.4 !important;
+    opacity: .4 !important;
   }
 }
 
diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
index f227617116..3b7b24f3f4 100644
--- a/ionic/components/toolbar/toolbar.md.scss
+++ b/ionic/components/toolbar/toolbar.md.scss
@@ -51,15 +51,15 @@ ion-navbar-section {
 .toolbar-content {
   flex: 1;
   order: map-get($toolbar-order-md, content);
-  max-width: 100%;
   min-width: 0;
+  max-width: 100%;
 }
 
 .toolbar-title {
-  color: $toolbar-md-text-color;
   padding: 0 12px;
   font-size: $toolbar-md-title-font-size;
   font-weight: 500;
+  color: $toolbar-md-text-color;
 }
 
 @mixin md-toolbar-theme($color-name, $color-value) {
@@ -101,7 +101,7 @@ ion-navbar-section {
 
 ion-buttons {
   order: map-get($toolbar-order-md, buttons-start);
-  transform: translateZ(0px);
+  transform: translateZ(0);
 }
 
 ion-buttons[left] {
@@ -113,13 +113,13 @@ ion-buttons[left] .bar-button:first-child {
 }
 
 ion-buttons[end] {
-  text-align: right;
   order: map-get($toolbar-order-md, buttons-end);
+  text-align: right;
 }
 
 ion-buttons[right] {
-  text-align: right;
   order: map-get($toolbar-order-md, buttons-right);
+  text-align: right;
 }
 
 
@@ -128,16 +128,16 @@ ion-buttons[right] {
 
 .bar-button {
   margin-top: 0;
+  margin-right: .2rem;
   margin-bottom: 0;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
+  margin-left: .2rem;
   padding: 0 5px;
   height: 32px;
   border: 0;
-  font-size: $toolbar-md-button-font-size;
   border-radius: $bar-button-md-border-radius;
-  text-transform: uppercase;
+  font-size: $toolbar-md-button-font-size;
   font-weight: 500;
+  text-transform: uppercase;
 }
 
 .bar-button-solid,
@@ -171,7 +171,7 @@ ion-buttons[right] {
   background-color: transparent;
 
   &:hover:not(.disable-hover) {
-    opacity: 0.4;
+    opacity: .4;
   }
 
   &.activated {
@@ -232,16 +232,16 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-icon-left ion-icon {
-  padding-right: 0.3em;
+  padding-right: .3em;
   font-size: 1.4em;
-  line-height: 0.67;
+  line-height: .67;
   pointer-events: none;
 }
 
 .bar-button-icon-right ion-icon {
-  padding-left: 0.4em;
+  padding-left: .4em;
   font-size: 1.4em;
-  line-height: 0.67;
+  line-height: .67;
   pointer-events: none;
 }
 
@@ -249,10 +249,10 @@ ion-buttons[right] {
   padding: 0;
 
   ion-icon {
-    padding: 0 0.1em;
-    font-size: 1.8em;
-    line-height: 0.67;
+    padding: 0 .1em;
     min-width: 28px;
+    font-size: 1.8em;
+    line-height: .67;
     pointer-events: none;
   }
 }
@@ -279,10 +279,10 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-menutoggle {
+  order: map-get($toolbar-order-md, menu-toggle-start);
   margin: 0 6px;
   padding: 0 2px;
   min-width: 44px;
-  order: map-get($toolbar-order-md, menu-toggle-start);
 
   ion-icon {
     padding: 0 6px;
@@ -292,9 +292,9 @@ ion-buttons[right] {
 
 .bar-button-menutoggle[end],
 .bar-button-menutoggle[right] {
+  order: map-get($toolbar-order-md, menu-toggle-end);
   margin: 0 2px;
   min-width: 28px;
-  order: map-get($toolbar-order-md, menu-toggle-end);
 }
 
 
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 8da387532d..a2cf801c03 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -9,27 +9,26 @@
   z-index: $z-index-toolbar;
 
   display: flex;
+  overflow: hidden;
+  flex: 0;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   order: $flex-order-toolbar-top;
-  flex: 0;
-
   width: 100%;
-  overflow: hidden;
 }
 
 .toolbar-background {
   position: absolute;
-  left: 0;
   top: 0;
+  left: 0;
+  z-index: $z-index-toolbar-background;
   width: 100%;
   height: 100%;
-  z-index: $z-index-toolbar-background;
 
   border: 0;
+  transform: translateZ(0);
   pointer-events: none;
-  transform: translateZ(0px);
 }
 
 .toolbar[position=bottom] {
@@ -37,25 +36,25 @@
 }
 
 ion-title {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
-  transform: translateZ(0px);
+  transform: translateZ(0);
 }
 
 .toolbar-title {
   display: block;
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 ion-buttons {
   display: block;
-  margin: 0 0.2rem;
+  margin: 0 .2rem;
+  transform: translateZ(0);
   pointer-events: none;
-  transform: translateZ(0px);
 }
 
 ion-buttons button,
@@ -70,26 +69,26 @@ ion-buttons div {
 // --------------------------------------------------
 
 .toolbar[transparent] .toolbar-background {
-  background: transparent;
   border-color: transparent;
+  background: transparent;
 }
 
 
 // TODO this is a temp hack to fix segment overlapping ion-nav-item
 ion-buttons,
 .bar-button-menutoggle {
-  transform: translateZ(0px);
   z-index: 99;
+  transform: translateZ(0);
 }
 
 // Navbar
 // --------------------------------------------------
 
 ion-navbar.toolbar {
-  transform: translateZ(0px);
   display: flex;
-
   opacity: 0;
+  transform: translateZ(0);
+
   &.show-navbar {
     opacity: 1;
   }
diff --git a/ionic/components/toolbar/toolbar.wp.scss b/ionic/components/toolbar/toolbar.wp.scss
index da6cc16378..d56fdcc527 100644
--- a/ionic/components/toolbar/toolbar.wp.scss
+++ b/ionic/components/toolbar/toolbar.wp.scss
@@ -54,16 +54,16 @@ ion-navbar-section {
 .toolbar-content {
   flex: 1;
   order: map-get($toolbar-order-wp, content);
-  max-width: 100%;
   min-width: 0;
+  max-width: 100%;
 }
 
 .toolbar-title {
-  color: $toolbar-wp-text-color;
   padding: $toolbar-wp-title-padding;
   font-size: $toolbar-wp-title-font-size;
   font-weight: $toolbar-wp-title-font-weight;
   text-transform: $toolbar-wp-title-text-transform;
+  color: $toolbar-wp-text-color;
 }
 
 @mixin wp-toolbar-theme($color-name, $color-value) {
@@ -105,7 +105,7 @@ ion-navbar-section {
 
 ion-buttons {
   order: map-get($toolbar-order-wp, buttons-start);
-  transform: translateZ(0px);
+  transform: translateZ(0);
 }
 
 ion-buttons[left] {
@@ -117,13 +117,13 @@ ion-buttons[left] .bar-button:first-child {
 }
 
 ion-buttons[end] {
-  text-align: right;
   order: map-get($toolbar-order-wp, buttons-end);
+  text-align: right;
 }
 
 ion-buttons[right] {
-  text-align: right;
   order: map-get($toolbar-order-wp, buttons-right);
+  text-align: right;
 }
 
 
@@ -132,16 +132,16 @@ ion-buttons[right] {
 
 .bar-button {
   margin-top: 0;
+  margin-right: .2rem;
   margin-bottom: 0;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
+  margin-left: .2rem;
   padding: 0 5px;
   height: 32px;
   border: 0;
-  font-size: $toolbar-wp-button-font-size;
   border-radius: $bar-button-wp-border-radius;
-  text-transform: uppercase;
+  font-size: $toolbar-wp-button-font-size;
   font-weight: 500;
+  text-transform: uppercase;
 }
 
 .bar-button-solid,
@@ -175,7 +175,7 @@ ion-buttons[right] {
   background-color: transparent;
 
   &:hover:not(.disable-hover) {
-    opacity: 0.4;
+    opacity: .4;
   }
 
   &.activated {
@@ -236,16 +236,16 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-icon-left ion-icon {
-  padding-right: 0.3em;
+  padding-right: .3em;
   font-size: 1.4em;
-  line-height: 0.67;
+  line-height: .67;
   pointer-events: none;
 }
 
 .bar-button-icon-right ion-icon {
-  padding-left: 0.4em;
+  padding-left: .4em;
   font-size: 1.4em;
-  line-height: 0.67;
+  line-height: .67;
   pointer-events: none;
 }
 
@@ -253,10 +253,10 @@ ion-buttons[right] {
   padding: 0;
 
   ion-icon {
-    padding: 0 0.1em;
-    font-size: 1.8em;
-    line-height: 0.67;
+    padding: 0 .1em;
     min-width: 28px;
+    font-size: 1.8em;
+    line-height: .67;
     pointer-events: none;
   }
 }
@@ -283,10 +283,10 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-menutoggle {
+  order: map-get($toolbar-order-wp, menu-toggle-start);
   margin: 0 6px;
   padding: 0 2px;
   min-width: 44px;
-  order: map-get($toolbar-order-wp, menu-toggle-start);
 
   ion-icon {
     padding: 0 6px;
@@ -296,9 +296,9 @@ ion-buttons[right] {
 
 .bar-button-menutoggle[end],
 .bar-button-menutoggle[right] {
+  order: map-get($toolbar-order-wp, menu-toggle-end);
   margin: 0 2px;
   min-width: 28px;
-  order: map-get($toolbar-order-wp, menu-toggle-end);
 }
 
 
diff --git a/ionic/fonts/ionicons.scss b/ionic/fonts/ionicons.scss
index f55a710628..eae2163c76 100644
--- a/ionic/fonts/ionicons.scss
+++ b/ionic/fonts/ionicons.scss
@@ -11,24 +11,24 @@ $ionicons-font-path: $font-path !default;
 
 
 @font-face {
- font-family: "Ionicons";
- 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;
+  font-family: "Ionicons";
+  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 {
   display: inline-block;
   font-family: "Ionicons";
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  text-rendering: auto;
-  line-height: 1;
-  speak: none;
-  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-rendering: auto;
+  text-transform: none;
+  speak: none;
 }
diff --git a/ionic/fonts/noto-sans.scss b/ionic/fonts/noto-sans.scss
index d205044ac9..bd60e94487 100644
--- a/ionic/fonts/noto-sans.scss
+++ b/ionic/fonts/noto-sans.scss
@@ -1,36 +1,34 @@
-/**
-  Noto Sans Font
-  Google
-  Apache License, version 2.0
-  http://www.apache.org/licenses/LICENSE-2.0.html
- */
+// Noto Sans Font
+// Google
+// Apache License, version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0.html
 
 $noto-sans-font-path: $font-path !default;
 
 @font-face {
-  font-family: 'Noto Sans';
+  font-family: "Noto Sans";
   font-style: normal;
   font-weight: 300;
-  src: local('Noto Sans'), local('Noto-Sans-Regular'), url('#{$noto-sans-font-path}/noto-sans-regular.ttf') format('truetype');
+  src: local("Noto Sans"), local("Noto-Sans-Regular"), url("#{$noto-sans-font-path}/noto-sans-regular.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'Noto Sans';
+  font-family: "Noto Sans";
   font-style: normal;
   font-weight: 400;
-  src: local('Noto Sans'), local('Noto-Sans-Regular'), url('#{$noto-sans-font-path}/noto-sans-regular.ttf') format('truetype');
+  src: local("Noto Sans"), local("Noto-Sans-Regular"), url("#{$noto-sans-font-path}/noto-sans-regular.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'Noto Sans';
+  font-family: "Noto Sans";
   font-style: normal;
   font-weight: 500;
-  src: local('Noto Sans Bold'), local('Noto-Sans-Bold'), url('#{$noto-sans-font-path}/noto-sans-bold.ttf') format('truetype');
+  src: local("Noto Sans Bold"), local("Noto-Sans-Bold"), url("#{$noto-sans-font-path}/noto-sans-bold.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'Noto Sans';
+  font-family: "Noto Sans";
   font-style: normal;
   font-weight: 700;
-  src: local('Noto Sans Bold'), local('Noto-Sans-Bold'), url('#{$noto-sans-font-path}/noto-sans-bold.ttf') format('truetype');
+  src: local("Noto Sans Bold"), local("Noto-Sans-Bold"), url("#{$noto-sans-font-path}/noto-sans-bold.ttf") format("truetype");
 }
diff --git a/ionic/fonts/roboto.scss b/ionic/fonts/roboto.scss
index 638cdb834a..b0baa1a034 100644
--- a/ionic/fonts/roboto.scss
+++ b/ionic/fonts/roboto.scss
@@ -1,36 +1,34 @@
-/**
-  Roboto Font
-  Google
-  Apache License, version 2.0
-  http://www.apache.org/licenses/LICENSE-2.0.html
- */
+// Roboto Font
+// Google
+// Apache License, version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0.html
 
 $roboto-font-path: $font-path !default;
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('#{$roboto-font-path}/roboto-light.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-light.woff') format('woff');
+  src: local("Roboto Light"), local("Roboto-Light"), url("#{$roboto-font-path}/roboto-light.ttf") format("truetype"), url("#{$roboto-font-path}/roboto-light.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('#{$roboto-font-path}/roboto-regular.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-regular.woff') format('woff');
+  src: local("Roboto"), local("Roboto-Regular"), url("#{$roboto-font-path}/roboto-regular.ttf") format("truetype"), url("#{$roboto-font-path}/roboto-regular.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('#{$roboto-font-path}/roboto-medium.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-medium.woff') format('woff');
+  src: local("Roboto Medium"), local("Roboto-Medium"), url("#{$roboto-font-path}/roboto-medium.ttf") format("truetype"), url("#{$roboto-font-path}/roboto-medium.woff") format("woff");
 }
 
 @font-face {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('#{$roboto-font-path}/roboto-bold.ttf') format('truetype'), url('#{$roboto-font-path}/roboto-bold.woff') format('woff');
+  src: local("Roboto Bold"), local("Roboto-Bold"), url("#{$roboto-font-path}/roboto-bold.ttf") format("truetype"), url("#{$roboto-font-path}/roboto-bold.woff") format("woff");
 }
diff --git a/ionic/globals.core.scss b/ionic/globals.core.scss
index 4a61b5b45f..1357a56e7c 100644
--- a/ionic/globals.core.scss
+++ b/ionic/globals.core.scss
@@ -16,4 +16,4 @@ $font-path: "../fonts" !default;
 
 
 // Hairline width
-$hairlines-width: 0.55px !default;
+$hairlines-width: .55px !default;
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index 97f519b63f..da18dbf0f4 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -1,4 +1,4 @@
-/*! Ionic: iOS */
+// Ionic: iOS
 @charset "UTF-8";
 
 // Core Components
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index 40fdd3ca83..ee6fa076dd 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -1,4 +1,4 @@
-/*! Ionic: Material Design */
+// Ionic: Material Design
 @charset "UTF-8";
 
 // Core Components
diff --git a/ionic/ionic.wp.scss b/ionic/ionic.wp.scss
index b501c1c5e3..788122d696 100644
--- a/ionic/ionic.wp.scss
+++ b/ionic/ionic.wp.scss
@@ -1,4 +1,4 @@
-/*! Ionic: Windows */
+// Ionic: Windows
 @charset "UTF-8";
 
 // Core Components
diff --git a/ionic/platform/cordova.ios.scss b/ionic/platform/cordova.ios.scss
index 71587b9a8b..57a6a1aa2f 100644
--- a/ionic/platform/cordova.ios.scss
+++ b/ionic/platform/cordova.ios.scss
@@ -9,8 +9,8 @@ $cordova-ios-toolbar-padding:    20px   !default;
 &.platform-cordova.platform-ios {
 
   ion-navbar-section {
-    min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
     height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
+    min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
   }
 
   ion-navbar ion-title,
@@ -28,9 +28,9 @@ $cordova-ios-toolbar-padding:    20px   !default;
   ion-page.modal > ion-toolbar:first-child,
   ion-page.modal > ion-toolbar:first-child ion-title,
   ion-page.modal > ion-toolbar:first-child ion-segment, {
-    min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
-    height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
     padding-top: $toolbar-ios-padding + $cordova-ios-toolbar-padding;
+    height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
+    min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
   }
 
 }
diff --git a/ionic/themes/dark.ios.scss b/ionic/themes/dark.ios.scss
index c5beed09fa..d22bef362e 100644
--- a/ionic/themes/dark.ios.scss
+++ b/ionic/themes/dark.ios.scss
@@ -49,11 +49,11 @@ $list-ios-activated-background-color:  #d9d9d9 !default;
 // iOS List header
 // --------------------------------------------------
 $list-ios-header-color:                $text-color !default;
-$item-ios-divider-background:                  #151515 !default;
+$item-ios-divider-background:          #151515 !default;
 $item-ios-divider-color:               $text-color !default;
 
 ion-list-header {
-  background-color: #151515;
+  background-color: $item-ios-divider-background;
 }
 
 // iOS Item
@@ -79,7 +79,7 @@ $toggle-ios-handle-background-color:  map-get($colors-ios, light) !default;
 $icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
 
 @mixin ios-detail-push-icon($fg-color) {
-  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
+  $svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
   @include svg-background-image($svg);
 }
 
diff --git a/ionic/themes/dark.md.scss b/ionic/themes/dark.md.scss
index ffa628dd8c..8ead798c23 100644
--- a/ionic/themes/dark.md.scss
+++ b/ionic/themes/dark.md.scss
@@ -69,7 +69,7 @@ $toggle-md-handle-background-color-off: map-get($colors-md, light) !default;
 // --------------------------------------------------
 
 @function ripple-background-color($button-color) {
-  @return rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+  @return rgba(red($button-color), green($button-color), blue($button-color), .1);
 }
 
 
diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss
index 83cc6b2106..eda582ef9f 100644
--- a/ionic/themes/dark.scss
+++ b/ionic/themes/dark.scss
@@ -1,4 +1,4 @@
-@import '../globals.core';
+@import "../globals.core";
 
 
 // Dark Theme
@@ -6,9 +6,9 @@
 
 $colors: (
 
-  primary:    #007AFF,
+  primary:    #007aff,
   secondary:  #32db64,
-  danger:     #D91E18,
+  danger:     #d91e18,
   light:      #f4f4f4,
   dark:       #222,
 
diff --git a/ionic/themes/dark.wp.scss b/ionic/themes/dark.wp.scss
index 8e19d1d6e4..cca0233e0f 100644
--- a/ionic/themes/dark.wp.scss
+++ b/ionic/themes/dark.wp.scss
@@ -57,7 +57,7 @@ $item-wp-padding-media-top:           9px !default;
 $item-wp-padding-media-bottom:        9px !default;
 $item-wp-padding-icon-top:            11px !default;
 $item-wp-padding-icon-bottom:         10px !default;
-$item-wp-divider-background:                  #151515 !default;
+$item-wp-divider-background:          #151515 !default;
 $item-wp-divider-color:               map-get($colors-wp, light) !default;
 
 
@@ -69,7 +69,7 @@ $toggle-wp-handle-background-color-off: map-get($colors-wp, light) !default;
 // Windows Input
 // --------------------------------------------------
 
-$input-wp-border-color:                 rgba(0,0,0,0.5) !default;
+$input-wp-border-color:                 rgba(0, 0, 0, .5) !default;
 
 
 // Windows Body
diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss
index 968d5dcea0..92937a7142 100644
--- a/ionic/themes/default.ios.scss
+++ b/ionic/themes/default.ios.scss
@@ -54,7 +54,7 @@ $item-ios-padding-icon-bottom:        9px !default;
 $icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
 
 @mixin ios-detail-push-icon($fg-color) {
-  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
+  $svg: str-replace($icon-detail-push-background-svg, "fg-color", $fg-color);
   @include svg-background-image($svg);
 }
 
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index e0c230fdd3..9b095e49e7 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -1,4 +1,4 @@
-@import '../globals.core';
+@import "../globals.core";
 
 
 // Default Theme
diff --git a/ionic/themes/default.wp.scss b/ionic/themes/default.wp.scss
index e47dc7debe..09f94f97c3 100644
--- a/ionic/themes/default.wp.scss
+++ b/ionic/themes/default.wp.scss
@@ -33,7 +33,7 @@ $toolbar-wp-button-color:             $toolbar-text-color !default;
 $list-wp-text-color:                  $list-text-color !default;
 $list-wp-border-color:                transparent !default;
 $list-wp-background-color:            $list-background-color !default;
-$list-wp-activated-background-color:  #AAAAAA !default;
+$list-wp-activated-background-color:  #aaa !default;
 
 
 // Windows Item
@@ -52,7 +52,7 @@ $item-wp-padding-icon-bottom:         10px !default;
 // Windows Input
 // --------------------------------------------------
 
-$input-wp-border-color:               rgba(0,0,0,0.5) !default;
+$input-wp-border-color:               rgba(0, 0, 0, .5) !default;
 
 
 // Windows Body
diff --git a/ionic/util/functions.scss b/ionic/util/functions.scss
index 1bf5a3dbb1..c6cd0cc4a3 100644
--- a/ionic/util/functions.scss
+++ b/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");
 }
diff --git a/ionic/util/mixins.scss b/ionic/util/mixins.scss
index cdd61104ac..7ef32788c2 100644
--- a/ionic/util/mixins.scss
+++ b/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;
   }
 }
 
diff --git a/ionic/util/util.scss b/ionic/util/util.scss
index a4626ee43a..47636ced2c 100755
--- a/ionic/util/util.scss
+++ b/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";
+  }
 }