css cleanup

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>' +

ionic/components/action-menu/modes/ios.scss

@@ -22,12 +22,13 @@ $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 {
+ion-action-menu button {
   min-height: $action-menu-ios-height;
   padding: $action-menu-ios-padding;
 
@@ -88,7 +89,6 @@ ion-action-menu {
   border-bottom-right-radius: $action-menu-ios-border-radius;
 }
 
-}
 
 &.hairlines .action-menu {
   .action-menu-title,

ionic/components/action-menu/modes/material.scss

@@ -20,6 +20,7 @@ $action-menu-md-icon-margin:              0 28px 0 0 !default;
 
 ion-action-menu {
   margin: 0;
+}
 
 .action-menu-container {
   margin: 0;
@@ -35,8 +36,9 @@ ion-action-menu {
   color: $action-menu-md-button-text-color;
   box-shadow: none;
   text-transform: none;
+}
 
-    .icon {
+ion-action-menu icon {
   display: inline-block;
   margin: $action-menu-md-icon-margin;
   min-width: 24px;
@@ -44,7 +46,6 @@ ion-action-menu {
   vertical-align: middle;
   font-size: $action-menu-md-icon-font-size;
 }
-  }
 
 .action-menu-title {
   padding: $action-menu-md-title-padding;
@@ -52,7 +53,7 @@ ion-action-menu {
   color: $action-menu-md-title-color;
 }
 
-  button {
+ion-action-menu button {
   font-weight: normal;
   min-height: $action-menu-md-height;
 
@@ -79,4 +80,3 @@ ion-action-menu {
   border: none;
 }
 
-}

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 {

ionic/components/button/modes/material.scss

@@ -85,34 +85,29 @@ button,
     padding: 0;
   }
 
-  // Generate iOS Checkbox Auxiliary Colors
+}
+
+
+// Material Design Button Color Mixin
 // --------------------------------------------------
 
-  @each $color, $value in auxiliary-colors() {
+@mixin button-theme-md($color-name, $color-value) {
 
-    &[#{$color}] {
+  button[#{$color-name}],
+  [button][#{$color-name}] {
 
     &.activated {
       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 {
+        @if lightness(get-color($color-name, base)) > 90 {
-            $fg-color: get-color($color, inverse);
+          $fg-color: get-color($color-name, inverse);
         } @else {
-            $fg-color: get-color($color, base);
+          $fg-color: get-color($color-name, base);
         }
 
         opacity: 1;
@@ -120,5 +115,15 @@ button,
     }
 
   }
+
 }
+
+
+// Generate Material Design Button Auxiliary Colors
+// --------------------------------------------------
+
+@each $color-name, $value in auxiliary-colors() {
+
+  @include button-theme-md($color-name, $value);
+
 }

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,23 +32,28 @@ $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}] {
+  .checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
-
-    &[aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
   }
 
 }
 
-}
-
 
 // Generate iOS Checkbox Auxiliary Colors
 // --------------------------------------------------

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,29 +34,34 @@ $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}] {
+  .checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
-
-    &[aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
   }
 
 }
 
-}
-
 
 // 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);
 
 }

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
 // -------------------------------

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;
   }

ionic/components/popup/modes/ios.scss

@@ -7,8 +7,6 @@ $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;
@@ -37,5 +35,3 @@ $popup-ios-button-text-color:     color(primary) !default;
   }
 
 }
-
-}

ionic/components/popup/modes/material.scss

@@ -6,8 +6,6 @@ $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;
@@ -36,5 +34,3 @@ $popup-md-bg-color:            #f8f8f8 !default;
   }
 
 }
-
-}

ionic/components/radio/modes/ios.scss

@@ -5,13 +5,7 @@
 $radio-ios-active-color:       color(primary) !default;
 
 
-.radio {
+ion-radio {
-
-  .radio-icon {
-    position: relative;
-    width: 16px;
-    height: 21px;
-  }
 
   &[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;

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;

ionic/components/radio/radio.scss

@@ -3,13 +3,14 @@
 // --------------------------------------------------
 
 
-.radio {
+ion-radio {
+  display: block;
   cursor: pointer;
   @include user-select-none();
 }
 
-.radio[aria-disabled=true] {
+ion-radio[aria-disabled=true] {
-  pointer-events: none;
   opacity: 0.5;
   color: $subdued-text-color;
+  pointer-events: none;
 }

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;
-
   }
 
 }

ionic/components/search-bar/modes/ios.scss

@@ -14,6 +14,7 @@ $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%;
@@ -53,7 +54,6 @@ $search-bar-ios-background-size:      13px 13px !default;
     padding-left: 28px;
   }
 }
-}
 
 &.hairlines .search-bar {
   border-bottom-width: 0.55px;

ionic/components/segment/modes/ios.scss

@@ -3,9 +3,10 @@
 // --------------------------------------------------
 
 
-.segment .ion-segment {
+.ion-segment {
-  > button,
+
-  > [button] {
+  button,
+  [button] {
     border-width: 1px;
 
     transition: 100ms all linear;
@@ -30,5 +31,7 @@
     &:last-of-type {
       border-left-width: 0px;
     }
+
   }
+
 }

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;
     }
+
   }
+
 }

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;

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%);

ionic/components/switch/switch.scss

@@ -3,16 +3,16 @@
 // --------------------------------------------------
 
 
-.switch {
+ion-switch {
   @include user-select-none();
 }
 
-.switch .media-switch {
+ion-switch .media-switch {
-  cursor: pointer;
   margin: 0;
+  cursor: pointer;
 }
 
-.switch[aria-disabled=true] {
+ion-switch[aria-disabled=true] {
   pointer-events: none;
   opacity: 0.5;
   color: $subdued-text-color;

ionic/components/tabs/modes/ios.scss

@@ -8,13 +8,11 @@ $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-placement="top"] .tab-bar {
+.tabs[tab-bar-placement="top"] .tab-bar {
   border-top: none;
   border-bottom: 1px solid $toolbar-ios-border-color;
 }
@@ -44,8 +42,6 @@ $tab-bar-ios-height:                   49px !default;
   }
 }
 
-}
-
 [tab-bar-icons=right] .tab-button,
 [tab-bar-icons=left] .tab-button {
 

ionic/components/tabs/modes/material.scss

@@ -9,8 +9,6 @@ $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;
@@ -37,12 +35,11 @@ $tab-bar-md-item-height:              4.8rem !default;
   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;