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 {
+.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;
 
@@ -39,57 +40,56 @@ ion-action-menu {
   &.activated {
     background: $action-menu-ios-background-active;
   }
-  }
+}
 
-  .action-menu-group {
+.action-menu-group {
   margin-bottom: $action-menu-ios-group-margin - 2;
   border-radius: $action-menu-ios-border-radius;
-  }
+}
 
-  .action-menu-group:last-child {
+.action-menu-group:last-child {
   margin-bottom: $action-menu-ios-group-margin;
-  }
+}
 
-  .action-menu-title,
+.action-menu-title,
-  .action-menu-option {
+.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 {
+.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 {
+.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-title:first-child,
-  .action-menu-button:first-child,
+.action-menu-button:first-child,
-  .action-menu-group 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-title:last-child,
-  .action-menu-button:last-child,
+.action-menu-button:last-child,
-  .action-menu-group 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 {

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

@@ -20,39 +20,40 @@ $action-menu-md-icon-margin:              0 28px 0 0 !default;
 
 ion-action-menu {
   margin: 0;
+}
 
-  .action-menu-container {
+.action-menu-container {
   margin: 0;
-  }
+}
 
-  .action-menu-title,
+.action-menu-title,
-  .action-menu-option,
+.action-menu-option,
-  .action-menu-destructive,
+.action-menu-destructive,
-  .action-menu-cancel button {
+.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 {
+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 {
+.action-menu-title {
   padding: $action-menu-md-title-padding;
   font-size: $action-menu-md-title-font-size;
   color: $action-menu-md-title-color;
-  }
+}
 
-  button {
+ion-action-menu button {
   font-weight: normal;
   min-height: $action-menu-md-height;
 
@@ -61,9 +62,9 @@ ion-action-menu {
     border-radius: 0;
     box-shadow: none;
   }
-  }
+}
 
-  .action-menu-group {
+.action-menu-group {
   margin: 0;
   border-radius: 0;
   background-color: $action-menu-md-background-color;
@@ -71,12 +72,11 @@ ion-action-menu {
   &:last-child button {
     margin-bottom: 8px;
   }
-  }
+}
 
-  .action-menu-cancel {
+.action-menu-cancel {
   background-color: $action-menu-md-background-color;
   width: auto;
   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
+}
-  // --------------------------------------------------
 
-  @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] {
-        @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,21 +32,26 @@ $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;
   }
 
-  }
-
 }
 
 

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,22 +7,20 @@ $popup-ios-bg-color:              #f8f8f8 !default;
 $popup-ios-button-text-color:     color(primary) !default;
 
 
-.popup {
+popup-wrapper {
-
-  popup-wrapper {
   border-radius: $popup-ios-border-radius;
   background-color: $popup-ios-bg-color;
-  }
+}
 
-  .popup-head {
+.popup-head {
   padding-top: 24px;
-  }
+}
 
-  .popup-body:empty {
+.popup-body:empty {
   padding: 0;
-  }
+}
 
-  .popup-buttons {
+.popup-buttons {
   padding: 0;
   min-height: 0;
 
@@ -36,6 +34,4 @@ $popup-ios-button-text-color:     color(primary) !default;
     }
   }
 
-  }
-
 }

ionic/components/popup/modes/material.scss

@@ -6,22 +6,20 @@ $popup-md-border-radius:       13px !default;
 $popup-md-bg-color:            #f8f8f8 !default;
 
 
-.popup {
+popup-wrapper {
-
-  popup-wrapper {
   border-radius: $popup-md-border-radius;
   background-color: $popup-md-bg-color;
-  }
+}
 
-  .popup-head {
+.popup-head {
   padding-top: 24px;
-  }
+}
 
-  .popup-body:empty {
+.popup-body:empty {
   padding: 0;
-  }
+}
 
-  .popup-buttons {
+.popup-buttons {
   padding: 0;
   min-height: 0;
 
@@ -35,6 +33,4 @@ $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,8 +14,9 @@ $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 {
+.search-bar-icon {
   width: 100%;
   height: 13px;
 
@@ -27,9 +28,9 @@ $search-bar-ios-background-size:      13px 13px !default;
   position: absolute;
   left: 10px;
   top: 8px;
-  }
+}
 
-  .search-bar-input {
+.search-bar-input {
   height: $search-bar-ios-input-height;
   padding: 0 28px;
 
@@ -43,16 +44,15 @@ $search-bar-ios-background-size:      13px 13px !default;
   background-position: 8px center;
 
   @include calc(padding-left, "50% - 28px");
-  }
+}
 
-  .search-bar-input-container.left-align {
+.search-bar-input-container.left-align {
   .search-bar-icon {
     transform: translateX(0);
   }
   .search-bar-input {
     padding-left: 28px;
   }
-  }
 }
 
 &.hairlines .search-bar {

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,33 +8,31 @@ $tab-bar-ios-item-icon-size:           32px !default;
 $tab-bar-ios-height:                   49px !default;
 
 
-.tabs {
+.tab-bar {
-
-  .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;
-  }
+}
 
-  .tab-button {
+.tab-button {
   padding: $tab-bar-ios-item-padding;
   min-height: $tab-bar-ios-height;
-  }
+}
 
-  .tab-button-text {
+.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 {
+.has-title-only .tab-button-text {
   font-size: $tab-bar-ios-item-font-size + 2;
-  }
+}
 
-  .tab-button-icon {
+.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;
@@ -42,8 +40,6 @@ $tab-bar-ios-height:                   49px !default;
   &:before {
     vertical-align: top;
   }
-  }
-
 }
 
 [tab-bar-icons=right] .tab-button,

ionic/components/tabs/modes/material.scss

@@ -9,9 +9,7 @@ $tab-bar-md-item-icon-size:           2.4rem !default;
 $tab-bar-md-item-height:              4.8rem !default;
 
 
-.tabs {
+.tab-button {
-
-  .tab-button {
   padding: $tab-bar-md-item-padding;
   min-height: $tab-bar-md-item-height;
   font-size: $tab-bar-md-item-font-size;
@@ -20,29 +18,28 @@ $tab-bar-md-item-height:              4.8rem !default;
   box-shadow: none;
   border-radius: 0;
   border-bottom: 2px solid transparent;
-  }
+}
 
-  .tab-button[aria-selected="true"] {
+.tab-button[aria-selected="true"] {
   border-bottom-color: $tab-button-text-active;
-  }
+}
 
-  .tab-button-text {
+.tab-button-text {
   margin-top: 5px;
   margin-bottom: 5px;
   text-transform: uppercase;
-  }
+}
 
-  .tab-button-icon {
+.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;