From c41801c55f2fa5969090913f9d28863e78ce5c8e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Sep 2015 21:02:44 -0500
Subject: [PATCH] css cleanup

---
 ionic/components/action-menu/action-menu.ts   |   6 +-
 ionic/components/action-menu/modes/ios.scss   | 132 +++++++++---------
 .../action-menu/modes/material.scss           | 118 ++++++++--------
 ionic/components/app/normalize.scss           |   9 ++
 ionic/components/button/modes/material.scss   |  61 ++++----
 ionic/components/checkbox/modes/ios.scss      |  28 ++--
 ionic/components/checkbox/modes/material.scss |  32 ++---
 ionic/components/form/form.scss               |  40 ++----
 ionic/components/grid/grid.scss               |   2 +
 ionic/components/popup/modes/ios.scss         |  42 +++---
 ionic/components/popup/modes/material.scss    |  42 +++---
 ionic/components/radio/modes/ios.scss         |  16 +--
 ionic/components/radio/modes/material.scss    |   4 +-
 ionic/components/radio/radio.scss             |   7 +-
 ionic/components/scroll/scroll.scss           |   3 +-
 ionic/components/search-bar/modes/ios.scss    |  68 ++++-----
 ionic/components/segment/modes/ios.scss       |   9 +-
 ionic/components/segment/segment.scss         |  22 +--
 ionic/components/switch/modes/ios.scss        |   6 +-
 ionic/components/switch/modes/material.scss   |   6 +-
 ionic/components/switch/switch.scss           |   8 +-
 ionic/components/tabs/modes/ios.scss          |  64 ++++-----
 ionic/components/tabs/modes/material.scss     |  45 +++---
 23 files changed, 381 insertions(+), 389 deletions(-)

diff --git a/ionic/components/action-menu/action-menu.ts b/ionic/components/action-menu/action-menu.ts
index 1f5db7279e..b6a6eefe9a 100644
--- a/ionic/components/action-menu/action-menu.ts
+++ b/ionic/components/action-menu/action-menu.ts
@@ -23,16 +23,16 @@ import * as util from 'ionic/util';
         '<div class="action-menu-group action-menu-options">' +
           '<div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>' +
           '<button (^click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-menu-option">' +
-            '<icon class="icon" [name]="b.icon" *ng-if="b.icon"></icon> ' +
+            '<icon [name]="b.icon" *ng-if="b.icon"></icon> ' +
             '{{b.text}}' +
           '</button>' +
           '<button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-menu-destructive">' +
-            '<icon class="icon" [name]="destructiveIcon" *ng-if="destructiveIcon"></icon> ' +
+            '<icon [name]="destructiveIcon" *ng-if="destructiveIcon"></icon> ' +
             '{{destructiveText}}</button>' +
         '</div>' +
         '<div class="action-menu-group action-menu-cancel" *ng-if="cancelText">' +
           '<button (click)="_cancel()">' +
-            '<icon class="icon" [name]="cancelIcon"></icon> ' +
+            '<icon [name]="cancelIcon"></icon> ' +
             '{{cancelText}}</button>' +
         '</div>' +
       '</div>' +
diff --git a/ionic/components/action-menu/modes/ios.scss b/ionic/components/action-menu/modes/ios.scss
index 6abbf0feff..fff73b0dfb 100644
--- a/ionic/components/action-menu/modes/ios.scss
+++ b/ionic/components/action-menu/modes/ios.scss
@@ -22,74 +22,74 @@ $action-menu-ios-icon-font-size:           1.4em !default;
 
 ion-action-menu {
   text-align: center;
-
-  .action-menu-container {
-    padding: 0 $action-menu-ios-group-margin;
-  }
-
-  button {
-    min-height: $action-menu-ios-height;
-    padding: $action-menu-ios-padding;
-
-    margin: 0;
-    border: 0;
-
-    background: transparent;
-
-    &.activated {
-      background: $action-menu-ios-background-active;
-    }
-  }
-
-  .action-menu-group {
-    margin-bottom: $action-menu-ios-group-margin - 2;
-    border-radius: $action-menu-ios-border-radius;
-  }
-
-  .action-menu-group:last-child {
-    margin-bottom: $action-menu-ios-group-margin;
-  }
-
-  .action-menu-title,
-  .action-menu-option {
-    min-height: $action-menu-ios-height;
-
-    background: $action-menu-ios-background-color;
-    font-weight: 400;
-
-    border-bottom: 1px solid $action-menu-ios-border-color;
-  }
-
-  .action-menu-title {
-    padding: 2rem;
-    font-size: $action-menu-ios-title-font-size;
-    font-weight: 500;
-    color: $action-menu-ios-title-color;
-    border-radius: 0;
-  }
-
-  .action-menu-option {
-    font-size: $action-menu-ios-button-font-size;
-    color: $action-menu-ios-button-text-color;
-    border-radius: 0;
-  }
-
-  .action-menu-title:first-child,
-  .action-menu-button:first-child,
-  .action-menu-group button:first-child {
-    border-top-left-radius: $action-menu-ios-border-radius;
-    border-top-right-radius: $action-menu-ios-border-radius;
-  }
-
-  .action-menu-title:last-child,
-  .action-menu-button:last-child,
-  .action-menu-group button:last-child {
-    border-bottom-left-radius: $action-menu-ios-border-radius;
-    border-bottom-right-radius: $action-menu-ios-border-radius;
-  }
-
 }
 
+.action-menu-container {
+  padding: 0 $action-menu-ios-group-margin;
+}
+
+ion-action-menu button {
+  min-height: $action-menu-ios-height;
+  padding: $action-menu-ios-padding;
+
+  margin: 0;
+  border: 0;
+
+  background: transparent;
+
+  &.activated {
+    background: $action-menu-ios-background-active;
+  }
+}
+
+.action-menu-group {
+  margin-bottom: $action-menu-ios-group-margin - 2;
+  border-radius: $action-menu-ios-border-radius;
+}
+
+.action-menu-group:last-child {
+  margin-bottom: $action-menu-ios-group-margin;
+}
+
+.action-menu-title,
+.action-menu-option {
+  min-height: $action-menu-ios-height;
+
+  background: $action-menu-ios-background-color;
+  font-weight: 400;
+
+  border-bottom: 1px solid $action-menu-ios-border-color;
+}
+
+.action-menu-title {
+  padding: 2rem;
+  font-size: $action-menu-ios-title-font-size;
+  font-weight: 500;
+  color: $action-menu-ios-title-color;
+  border-radius: 0;
+}
+
+.action-menu-option {
+  font-size: $action-menu-ios-button-font-size;
+  color: $action-menu-ios-button-text-color;
+  border-radius: 0;
+}
+
+.action-menu-title:first-child,
+.action-menu-button:first-child,
+.action-menu-group button:first-child {
+  border-top-left-radius: $action-menu-ios-border-radius;
+  border-top-right-radius: $action-menu-ios-border-radius;
+}
+
+.action-menu-title:last-child,
+.action-menu-button:last-child,
+.action-menu-group button:last-child {
+  border-bottom-left-radius: $action-menu-ios-border-radius;
+  border-bottom-right-radius: $action-menu-ios-border-radius;
+}
+
+
 &.hairlines .action-menu {
   .action-menu-title,
   .action-menu-option {
diff --git a/ionic/components/action-menu/modes/material.scss b/ionic/components/action-menu/modes/material.scss
index 612c40d81b..4eb055f7e9 100644
--- a/ionic/components/action-menu/modes/material.scss
+++ b/ionic/components/action-menu/modes/material.scss
@@ -20,63 +20,63 @@ $action-menu-md-icon-margin:              0 28px 0 0 !default;
 
 ion-action-menu {
   margin: 0;
-
-  .action-menu-container {
-    margin: 0;
-  }
-
-  .action-menu-title,
-  .action-menu-option,
-  .action-menu-destructive,
-  .action-menu-cancel button {
-    text-align: left;
-    border-color: transparent;
-    font-size: $action-menu-md-button-font-size;
-    color: $action-menu-md-button-text-color;
-    box-shadow: none;
-    text-transform: none;
-
-    .icon {
-      display: inline-block;
-      margin: $action-menu-md-icon-margin;
-      min-width: 24px;
-      text-align: center;
-      vertical-align: middle;
-      font-size: $action-menu-md-icon-font-size;
-    }
-  }
-
-  .action-menu-title {
-    padding: $action-menu-md-title-padding;
-    font-size: $action-menu-md-title-font-size;
-    color: $action-menu-md-title-color;
-  }
-
-  button {
-    font-weight: normal;
-    min-height: $action-menu-md-height;
-
-    &.activated {
-      background: $action-menu-md-background-active;
-      border-radius: 0;
-      box-shadow: none;
-    }
-  }
-
-  .action-menu-group {
-    margin: 0;
-    border-radius: 0;
-    background-color: $action-menu-md-background-color;
-
-    &:last-child button {
-      margin-bottom: 8px;
-    }
-  }
-
-  .action-menu-cancel {
-    background-color: $action-menu-md-background-color;
-    width: auto;
-    border: none;
-  }
-
 }
+
+.action-menu-container {
+  margin: 0;
+}
+
+.action-menu-title,
+.action-menu-option,
+.action-menu-destructive,
+.action-menu-cancel button {
+  text-align: left;
+  border-color: transparent;
+  font-size: $action-menu-md-button-font-size;
+  color: $action-menu-md-button-text-color;
+  box-shadow: none;
+  text-transform: none;
+}
+
+ion-action-menu icon {
+  display: inline-block;
+  margin: $action-menu-md-icon-margin;
+  min-width: 24px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: $action-menu-md-icon-font-size;
+}
+
+.action-menu-title {
+  padding: $action-menu-md-title-padding;
+  font-size: $action-menu-md-title-font-size;
+  color: $action-menu-md-title-color;
+}
+
+ion-action-menu button {
+  font-weight: normal;
+  min-height: $action-menu-md-height;
+
+  &.activated {
+    background: $action-menu-md-background-active;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+
+.action-menu-group {
+  margin: 0;
+  border-radius: 0;
+  background-color: $action-menu-md-background-color;
+
+  &:last-child button {
+    margin-bottom: 8px;
+  }
+}
+
+.action-menu-cancel {
+  background-color: $action-menu-md-background-color;
+  width: auto;
+  border: none;
+}
+
diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index 6a1c112faa..a5864f7fbb 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -86,6 +86,15 @@ samp {
 // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 //
 
+label,
+input,
+select,
+textarea {
+  line-height: normal;
+  font-family: inherit;
+}
+
+form,
 input,
 optgroup,
 select {
diff --git a/ionic/components/button/modes/material.scss b/ionic/components/button/modes/material.scss
index c8af86b546..16b254d25b 100644
--- a/ionic/components/button/modes/material.scss
+++ b/ionic/components/button/modes/material.scss
@@ -85,40 +85,45 @@ button,
     padding: 0;
   }
 
-  // Generate iOS Checkbox Auxiliary Colors
-  // --------------------------------------------------
+}
 
-  @each $color, $value in auxiliary-colors() {
 
-    &[#{$color}] {
+// Material Design Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-theme-md($color-name, $color-value) {
+
+  button[#{$color-name}],
+  [button][#{$color-name}] {
+
+    &.activated {
+      opacity: 1;
+    }
+
+    &[outline] {
 
       &.activated {
+
+        @if lightness(get-color($color-name, base)) > 90 {
+          $fg-color: get-color($color-name, inverse);
+        } @else {
+          $fg-color: get-color($color-name, base);
+        }
+
         opacity: 1;
       }
-
-      &[outline] {
-        @if lightness(get-color($color, base)) >= 80 {
-          .md-ripple {
-            //background-color: black;
-          }
-        } @else {
-          .md-ripple {
-            //background-color: get-color($color, base);
-          }
-        }
-
-        &.activated {
-
-          @if lightness(get-color($color, base)) > 90 {
-            $fg-color: get-color($color, inverse);
-          } @else {
-            $fg-color: get-color($color, base);
-          }
-
-          opacity: 1;
-        }
-      }
-
     }
+
   }
+
+}
+
+
+// Generate Material Design Button Auxiliary Colors
+// --------------------------------------------------
+
+@each $color-name, $value in auxiliary-colors() {
+
+  @include button-theme-md($color-name, $value);
+
 }
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index c46304550b..cf341cf7fa 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -12,15 +12,6 @@ $checkbox-ios-checkmark-color-on:    $background-color !default;
 
 .checkbox {
 
-  .checkbox-icon {
-    position: relative;
-    width: $checkbox-ios-icon-size;
-    height: $checkbox-ios-icon-size;
-    border-radius: 50%;
-    border: 1px solid $checkbox-ios-border-color-off;
-    background-color: $checkbox-ios-bg-color-off;
-  }
-
   &[aria-checked=true] .checkbox-icon {
     background-color: $checkbox-ios-bg-color-on;
     border-color: $checkbox-ios-border-color-on;
@@ -41,19 +32,24 @@ $checkbox-ios-checkmark-color-on:    $background-color !default;
 
 }
 
+.checkbox-icon {
+  position: relative;
+  width: $checkbox-ios-icon-size;
+  height: $checkbox-ios-icon-size;
+  border-radius: 50%;
+  border: 1px solid $checkbox-ios-border-color-off;
+  background-color: $checkbox-ios-bg-color-off;
+}
+
 
 // iOS Checkbox Color Mixin
 // --------------------------------------------------
 
 @mixin checkbox-theme-ios($color-name, $bg-on) {
 
-  .checkbox[#{$color-name}] {
-
-    &[aria-checked=true] .checkbox-icon {
-      background-color: $bg-on;
-      border-color: $bg-on;
-    }
-
+  .checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
+    background-color: $bg-on;
+    border-color: $bg-on;
   }
 
 }
diff --git a/ionic/components/checkbox/modes/material.scss b/ionic/components/checkbox/modes/material.scss
index 121517aa40..f4b78dd0d4 100644
--- a/ionic/components/checkbox/modes/material.scss
+++ b/ionic/components/checkbox/modes/material.scss
@@ -14,15 +14,6 @@ $checkbox-md-checkmark-color-on:    $background-color !default;
 
 .checkbox {
 
-  .checkbox-icon {
-    position: relative;
-    width: $checkbox-md-icon-size;
-    height: $checkbox-md-icon-size;
-    border-radius: $checkbox-md-border-radius;
-    border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
-    background-color: $checkbox-md-bg-color-off;
-  }
-
   &[aria-checked=true] .checkbox-icon {
     background-color: $checkbox-md-bg-color-on;
     border-color: $checkbox-md-border-color-on;
@@ -43,19 +34,24 @@ $checkbox-md-checkmark-color-on:    $background-color !default;
 
 }
 
+.checkbox-icon {
+  position: relative;
+  width: $checkbox-md-icon-size;
+  height: $checkbox-md-icon-size;
+  border-radius: $checkbox-md-border-radius;
+  border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
+  background-color: $checkbox-md-bg-color-off;
+}
+
 
 // Material Design Checkbox Color Mixin
 // --------------------------------------------------
 
 @mixin checkbox-theme-md($color-name, $bg-on) {
 
-  .checkbox[#{$color-name}] {
-
-    &[aria-checked=true] .checkbox-icon {
-      background-color: $bg-on;
-      border-color: $bg-on;
-    }
-
+  .checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
+    background-color: $bg-on;
+    border-color: $bg-on;
   }
 
 }
@@ -64,8 +60,8 @@ $checkbox-md-checkmark-color-on:    $background-color !default;
 // Generate Material Design Checkbox Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in auxiliary-colors() {
+@each $color-name, $color-value in auxiliary-colors() {
 
-  @include checkbox-theme-md($color-name, $value);
+  @include checkbox-theme-md($color-name, $color-value);
 
 }
diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss
index 5b1eaeb388..6d63dae9a6 100644
--- a/ionic/components/form/form.scss
+++ b/ionic/components/form/form.scss
@@ -2,32 +2,6 @@
 // Forms
 // --------------------------------------------------
 
-
-form {
-  margin: 0;
-}
-
-label,
-input,
-select,
-textarea {
-  line-height: normal;
-  font-family: inherit;
-}
-
-textarea {
-  margin: 0;
-  padding: 0;
-  height: auto;
-  overflow: auto;
-  color: inherit;
-  font: inherit;
-}
-
-.platform-mobile textarea {
-  resize: none;
-}
-
 ion-input {
 
   // text inputs
@@ -54,6 +28,20 @@ ion-input {
 
 }
 
+textarea {
+  margin: 0;
+  padding: 0;
+  height: auto;
+  overflow: auto;
+  font: inherit;
+  color: inherit;
+}
+
+.platform-mobile textarea {
+  resize: none;
+}
+
+
 
 // Placeholder
 // -------------------------------
diff --git a/ionic/components/grid/grid.scss b/ionic/components/grid/grid.scss
index 6fcc2d398c..b29d49ed8f 100644
--- a/ionic/components/grid/grid.scss
+++ b/ionic/components/grid/grid.scss
@@ -34,9 +34,11 @@ ion-row {
   display: flex;
   padding: ($grid-padding-width / 2);
   width: 100%;
+
   &[wrap] {
     flex-wrap: wrap;
   }
+
   &[flush] {
     padding: 0;
   }
diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss
index 05a8fbd55f..abbed2fbfc 100644
--- a/ionic/components/popup/modes/ios.scss
+++ b/ionic/components/popup/modes/ios.scss
@@ -7,35 +7,31 @@ $popup-ios-bg-color:              #f8f8f8 !default;
 $popup-ios-button-text-color:     color(primary) !default;
 
 
-.popup {
+popup-wrapper {
+  border-radius: $popup-ios-border-radius;
+  background-color: $popup-ios-bg-color;
+}
 
-  popup-wrapper {
-    border-radius: $popup-ios-border-radius;
-    background-color: $popup-ios-bg-color;
-  }
+.popup-head {
+  padding-top: 24px;
+}
 
-  .popup-head {
-    padding-top: 24px;
-  }
+.popup-body:empty {
+  padding: 0;
+}
 
-  .popup-body:empty {
-    padding: 0;
-  }
+.popup-buttons {
+  padding: 0;
+  min-height: 0;
 
-  .popup-buttons {
-    padding: 0;
-    min-height: 0;
+  button {
+    background-color: transparent;
+    color: $popup-ios-button-text-color;
+    font-size: 14px;
 
-    button {
-      background-color: transparent;
-      color: $popup-ios-button-text-color;
-      font-size: 14px;
-
-      &:last-child {
-        font-weight: bold;
-      }
+    &:last-child {
+      font-weight: bold;
     }
-
   }
 
 }
diff --git a/ionic/components/popup/modes/material.scss b/ionic/components/popup/modes/material.scss
index 2f57979c29..9385a5f3bf 100644
--- a/ionic/components/popup/modes/material.scss
+++ b/ionic/components/popup/modes/material.scss
@@ -6,35 +6,31 @@ $popup-md-border-radius:       13px !default;
 $popup-md-bg-color:            #f8f8f8 !default;
 
 
-.popup {
+popup-wrapper {
+  border-radius: $popup-md-border-radius;
+  background-color: $popup-md-bg-color;
+}
 
-  popup-wrapper {
-    border-radius: $popup-md-border-radius;
-    background-color: $popup-md-bg-color;
-  }
+.popup-head {
+  padding-top: 24px;
+}
 
-  .popup-head {
-    padding-top: 24px;
-  }
+.popup-body:empty {
+  padding: 0;
+}
 
-  .popup-body:empty {
-    padding: 0;
-  }
+.popup-buttons {
+  padding: 0;
+  min-height: 0;
 
-  .popup-buttons {
-    padding: 0;
-    min-height: 0;
+  .button {
+    min-height: 42px;
+    color: get-color('primary', base);
+    font-size: 14px;
 
-    .button {
-      min-height: 42px;
-      color: get-color('primary', base);
-      font-size: 14px;
-
-      &:last-child {
-        font-weight: bold;
-      }
+    &:last-child {
+      font-weight: bold;
     }
-
   }
 
 }
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index d268fe683a..747edc429c 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -5,13 +5,7 @@
 $radio-ios-active-color:       color(primary) !default;
 
 
-.radio {
-
-  .radio-icon {
-    position: relative;
-    width: 16px;
-    height: 21px;
-  }
+ion-radio {
 
   &[aria-checked=true] .radio-icon:after {
     position: absolute;
@@ -32,13 +26,19 @@ $radio-ios-active-color:       color(primary) !default;
 
 }
 
+.radio-icon {
+  position: relative;
+  width: 16px;
+  height: 21px;
+}
+
 
 // iOS Radio Color Mixin
 // --------------------------------------------------
 
 @mixin radio-theme-ios($color-name, $color-value) {
 
-  .radio[#{$color-name}] {
+  ion-radio[#{$color-name}] {
 
     &[aria-checked=true] .radio-icon:after {
       border-color: $color-value;
diff --git a/ionic/components/radio/modes/material.scss b/ionic/components/radio/modes/material.scss
index 108e87600c..5f4aa9a337 100644
--- a/ionic/components/radio/modes/material.scss
+++ b/ionic/components/radio/modes/material.scss
@@ -12,7 +12,7 @@ $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
 
-.radio {
+ion-radio {
 
   .radio-icon {
     position: relative;
@@ -58,7 +58,7 @@ $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
 @mixin radio-theme-md($color-name, $color-value) {
 
-  .radio[#{$color-name}] {
+  ion-radio[#{$color-name}] {
 
     &[aria-checked=true] .radio-icon {
       border-color: $color-value;
diff --git a/ionic/components/radio/radio.scss b/ionic/components/radio/radio.scss
index f319a42b3a..40b29361f8 100644
--- a/ionic/components/radio/radio.scss
+++ b/ionic/components/radio/radio.scss
@@ -3,13 +3,14 @@
 // --------------------------------------------------
 
 
-.radio {
+ion-radio {
+  display: block;
   cursor: pointer;
   @include user-select-none();
 }
 
-.radio[aria-disabled=true] {
-  pointer-events: none;
+ion-radio[aria-disabled=true] {
   opacity: 0.5;
   color: $subdued-text-color;
+  pointer-events: none;
 }
diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss
index ae0229e95b..99714fa03e 100644
--- a/ionic/components/scroll/scroll.scss
+++ b/ionic/components/scroll/scroll.scss
@@ -1,6 +1,8 @@
+
 ion-scroll {
   position: relative;
   display: block;
+
   &.scroll-x scroll-content {
     overflow-x: auto;
   }
@@ -26,7 +28,6 @@ ion-scroll {
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
     will-change: scroll-position;
-
   }
 
 }
diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index a541ed0280..bf0fe24b8b 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -14,44 +14,44 @@ $search-bar-ios-background-size:      13px 13px !default;
   padding: $search-bar-ios-padding;
   background: $search-bar-ios-background-color;
   border-bottom: 1px solid $search-bar-ios-border-color;
+}
 
+.search-bar-icon {
+  width: 100%;
+  height: 13px;
+
+  transform: translateX(calc(50% - 60px));
+
+  @include svg-background-image($search-bar-ios-background-svg);
+  background-size: $search-bar-ios-background-size;
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 10px;
+  top: 8px;
+}
+
+.search-bar-input {
+  height: $search-bar-ios-input-height;
+  padding: 0 28px;
+
+  font-size: 1.4rem;
+  font-weight: 400;
+
+  border-radius: 5px;
+  color: #000;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: 8px center;
+
+  @include calc(padding-left, "50% - 28px");
+}
+
+.search-bar-input-container.left-align {
   .search-bar-icon {
-    width: 100%;
-    height: 13px;
-
-    transform: translateX(calc(50% - 60px));
-
-    @include svg-background-image($search-bar-ios-background-svg);
-    background-size: $search-bar-ios-background-size;
-    background-repeat: no-repeat;
-    position: absolute;
-    left: 10px;
-    top: 8px;
+    transform: translateX(0);
   }
-
   .search-bar-input {
-    height: $search-bar-ios-input-height;
-    padding: 0 28px;
-
-    font-size: 1.4rem;
-    font-weight: 400;
-
-    border-radius: 5px;
-    color: #000;
-    background-color: #fff;
-    background-repeat: no-repeat;
-    background-position: 8px center;
-
-    @include calc(padding-left, "50% - 28px");
-  }
-
-  .search-bar-input-container.left-align {
-    .search-bar-icon {
-      transform: translateX(0);
-    }
-    .search-bar-input {
-      padding-left: 28px;
-    }
+    padding-left: 28px;
   }
 }
 
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index 4dbc9d3df3..e28aaef046 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -3,9 +3,10 @@
 // --------------------------------------------------
 
 
-.segment .ion-segment {
-  > button,
-  > [button] {
+.ion-segment {
+
+  button,
+  [button] {
     border-width: 1px;
 
     transition: 100ms all linear;
@@ -30,5 +31,7 @@
     &:last-of-type {
       border-left-width: 0px;
     }
+
   }
+
 }
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 7b9b2089d9..68d04cd818 100644
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -1,39 +1,45 @@
-ion-segment { display: block; }
+
+// Segment
+// --------------------------------------------------
+
+
+ion-segment {
+  display: block;
+}
 
 .ion-segment {
   display: flex;
   flex: 1;
   width: 100%;
 
-  > button,
-  > [button] {
+  button,
+  [button] {
 
     flex: 1;
     display: block;
-
     overflow: hidden;
 
     padding: 0 16px;
-
     width: 0;
 
     border-width: 1px 0px 1px 1px;
     border-radius: 0;
+
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
 
     background: none;
 
-    &.active {
-    }
-
     &:first-of-type {
       border-radius: $button-border-radius 0px 0px $button-border-radius;
     }
+
     &:last-of-type {
       border-right-width: 1px;
       border-radius: 0px $button-border-radius $button-border-radius 0px;
     }
+
   }
+
 }
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index c81573b718..a3f511623a 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -22,9 +22,9 @@ $switch-ios-handle-bg-color:           $switch-ios-off-bg-color !default;
 $switch-ios-transition-duration:       300ms !default;
 
 
-.switch {
+ion-switch {
 
-  .item-media {
+  .item-media.media-switch {
     margin: 0;
     padding: 6px ($item-ios-padding-right / 2) 6px ($item-ios-padding-left);
   }
@@ -125,7 +125,7 @@ $switch-ios-transition-duration:       300ms !default;
 
 @mixin switch-theme-ios($color-name, $bg-on) {
 
-  .switch[#{$color-name}] {
+  ion-switch[#{$color-name}] {
 
     &[aria-checked=true] .switch-icon {
       background-color: $bg-on;
diff --git a/ionic/components/switch/modes/material.scss b/ionic/components/switch/modes/material.scss
index 2f3321f8cd..01e330d540 100644
--- a/ionic/components/switch/modes/material.scss
+++ b/ionic/components/switch/modes/material.scss
@@ -18,9 +18,9 @@ $switch-md-handle-box-shadow:         0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2p
 $switch-md-transition-duration:       300ms !default;
 
 
-.switch {
+ion-switch {
 
-  .item-media {
+  .item-media.media-switch {
     margin: 0;
     padding: 6px ($item-md-padding-right / 2) 6px $item-md-padding-left;
   }
@@ -85,7 +85,7 @@ $switch-md-transition-duration:       300ms !default;
 
 @mixin switch-theme-md($color-name, $bg-on) {
 
-  .switch[#{$color-name}] {
+  ion-switch[#{$color-name}] {
 
     &[aria-checked=true] .switch-icon {
       background-color: lighten($bg-on, 25%);
diff --git a/ionic/components/switch/switch.scss b/ionic/components/switch/switch.scss
index b966d02923..bab315e583 100644
--- a/ionic/components/switch/switch.scss
+++ b/ionic/components/switch/switch.scss
@@ -3,16 +3,16 @@
 // --------------------------------------------------
 
 
-.switch {
+ion-switch {
   @include user-select-none();
 }
 
-.switch .media-switch {
-  cursor: pointer;
+ion-switch .media-switch {
   margin: 0;
+  cursor: pointer;
 }
 
-.switch[aria-disabled=true] {
+ion-switch[aria-disabled=true] {
   pointer-events: none;
   opacity: 0.5;
   color: $subdued-text-color;
diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index ad0d8e0641..4769e5d7ec 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -8,42 +8,38 @@ $tab-bar-ios-item-icon-size:           32px !default;
 $tab-bar-ios-height:                   49px !default;
 
 
-.tabs {
+.tab-bar {
+  border-top: 1px solid $toolbar-ios-border-color;
+}
 
-  .tab-bar {
-    border-top: 1px solid $toolbar-ios-border-color;
+.tabs[tab-bar-placement="top"] .tab-bar {
+  border-top: none;
+  border-bottom: 1px solid $toolbar-ios-border-color;
+}
+
+.tab-button {
+  padding: $tab-bar-ios-item-padding;
+  min-height: $tab-bar-ios-height;
+}
+
+.tab-button-text {
+  margin-bottom: 0;
+  min-height: $tab-bar-ios-item-font-size + 1;
+  font-size: $tab-bar-ios-item-font-size;
+}
+
+.has-title-only .tab-button-text {
+  font-size: $tab-bar-ios-item-font-size + 2;
+}
+
+.tab-button-icon {
+  font-size: $tab-bar-ios-item-icon-size;
+  height: $tab-bar-ios-item-icon-size;
+  min-width: $tab-bar-ios-item-icon-size + 5;
+
+  &:before {
+    vertical-align: top;
   }
-
-  &[tab-bar-placement="top"] .tab-bar {
-    border-top: none;
-    border-bottom: 1px solid $toolbar-ios-border-color;
-  }
-
-  .tab-button {
-    padding: $tab-bar-ios-item-padding;
-    min-height: $tab-bar-ios-height;
-  }
-
-  .tab-button-text {
-    margin-bottom: 0;
-    min-height: $tab-bar-ios-item-font-size + 1;
-    font-size: $tab-bar-ios-item-font-size;
-  }
-
-  .has-title-only .tab-button-text {
-    font-size: $tab-bar-ios-item-font-size + 2;
-  }
-
-  .tab-button-icon {
-    font-size: $tab-bar-ios-item-icon-size;
-    height: $tab-bar-ios-item-icon-size;
-    min-width: $tab-bar-ios-item-icon-size + 5;
-
-    &:before {
-      vertical-align: top;
-    }
-  }
-
 }
 
 [tab-bar-icons=right] .tab-button,
diff --git a/ionic/components/tabs/modes/material.scss b/ionic/components/tabs/modes/material.scss
index 66eaa463ad..10ab99d5cf 100644
--- a/ionic/components/tabs/modes/material.scss
+++ b/ionic/components/tabs/modes/material.scss
@@ -9,40 +9,37 @@ $tab-bar-md-item-icon-size:           2.4rem !default;
 $tab-bar-md-item-height:              4.8rem !default;
 
 
-.tabs {
+.tab-button {
+  padding: $tab-bar-md-item-padding;
+  min-height: $tab-bar-md-item-height;
+  font-size: $tab-bar-md-item-font-size;
+  font-weight: $tab-bar-md-item-font-weight;
 
-  .tab-button {
-    padding: $tab-bar-md-item-padding;
-    min-height: $tab-bar-md-item-height;
-    font-size: $tab-bar-md-item-font-size;
-    font-weight: $tab-bar-md-item-font-weight;
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+}
 
-    box-shadow: none;
-    border-radius: 0;
-    border-bottom: 2px solid transparent;
-  }
+.tab-button[aria-selected="true"] {
+  border-bottom-color: $tab-button-text-active;
+}
 
-  .tab-button[aria-selected="true"] {
-    border-bottom-color: $tab-button-text-active;
-  }
-
-  .tab-button-text {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    text-transform: uppercase;
-  }
-
-  .tab-button-icon {
-    font-size: $tab-bar-md-item-icon-size;
-    min-width: $tab-bar-md-item-icon-size + 5;
-  }
+.tab-button-text {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+}
 
+.tab-button-icon {
+  font-size: $tab-bar-md-item-icon-size;
+  min-width: $tab-bar-md-item-icon-size + 5;
 }
 
 [tab-bar-icons=bottom] .tab-button {
   padding-top: 8px;
   padding-bottom: 8px;
 }
+
 [tab-bar-icons=right] .tab-button,
 [tab-bar-icons=left] .tab-button {
   padding-bottom: 10px;