refactor(button): changed button attributes to classes

references #689

ionic/components/button/button-clear.scss

@@ -3,8 +3,7 @@
 // Clear Button
 // --------------------------------------------------
 
-button[clear],
-[button][clear] {
+.button-clear {
   border-color: transparent;
   background: transparent;
   color: color-shade($button-color);
@@ -29,8 +28,7 @@ button[clear],
 
   $fg-color: color-shade($color-value);
 
-  button[clear][#{$color-name}],
-  [button][clear][#{$color-name}] {
+  .button-clear-#{$color-name} {
     border-color: transparent;
     background: transparent;
     color: $fg-color;

ionic/components/button/button-outline.scss

@@ -3,21 +3,16 @@
 // Outline Button
 // --------------------------------------------------
 
-button,
-[button] {
+.button-outline {
+  border: 1px solid $button-color;
+  background: transparent;
+  color: $button-color;
 
-  &[outline] {
-    border: 1px solid $button-color;
-    background: transparent;
-    color: $button-color;
-
-    &.activated {
-      opacity: 1;
-      color: $background-color;
-      background-color: $button-color;
-    }
+  &.activated {
+    opacity: 1;
+    color: $background-color;
+    background-color: $button-color;
   }
-
 }
 
 
@@ -26,15 +21,13 @@ button,
 
 @mixin button-outline($fg-color) {
 
-  &[outline] {
-    border-color: $fg-color;
-    background: transparent;
-    color: $fg-color;
+  border-color: $fg-color;
+  background: transparent;
+  color: $fg-color;
 
-    &.activated {
-      color: $background-color;
-      background-color: $fg-color;
-    }
+  &.activated {
+    color: $background-color;
+    background-color: $fg-color;
   }
 
 }
@@ -45,8 +38,7 @@ button,
 
 @each $color-name, $color-value in auxiliary-colors() {
 
-  button[#{$color-name}],
-  [button][#{$color-name}] {
+  .button-outline-#{$color-name} {
 
     $fg-color: color-shade($color-value, 5%);
     @include button-outline($fg-color);

ionic/components/button/button-size.scss

@@ -12,19 +12,14 @@ $button-small-height:             2.1em !default;
 $button-small-padding:            0.9em !default;
 
 
-button,
-[button] {
-
-  &[large] {
-    padding: 0 $button-large-padding;
-    min-height: $button-large-height;
-    font-size: $button-large-font-size;
-  }
-
-  &[small] {
-    padding: 0 $button-small-padding;
-    min-height: $button-small-height;
-    font-size: $button-small-font-size;
-  }
-
+.button-large {
+  padding: 0 $button-large-padding;
+  min-height: $button-large-height;
+  font-size: $button-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-small-padding;
+  min-height: $button-small-height;
+  font-size: $button-small-font-size;
 }

ionic/components/button/button.scss

@@ -14,9 +14,7 @@ $button-color-activated:          color-shade($button-color) !default;
 $button-text-color:               inverse($button-color) !default;
 $button-hover-opacity:            0.8 !default;
 
-
-button,
-[button] {
+.button {
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
@@ -44,8 +42,95 @@ button,
   cursor: pointer;
   @include user-select-none();
   @include appearance(none);
+
+  // Button Types
+  // --------------------------------------------------
+
+  .button-block {
+    display: flex;
+    clear: both;
+    margin-right: 0;
+    margin-left: 0;
+    width: 100%;
+
+    &:after {
+      clear: both;
+    }
+  }
+
+  .button-full {
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+    border-radius: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+
+  .button-round {
+    border-radius: $button-round-border-radius;
+    padding: $button-round-padding;
+  }
+
+  .button-disabled {
+    opacity: 0.4;
+    cursor: default !important;
+    pointer-events: none;
+  }
 }
 
 a[button] {
   text-decoration: none;
 }
+
+
+// TODO
+// button should have classes:
+// button, button-primary, button-secondary, etc.
+// button holds all styling with default primary color(will this affect outline/clear?) and
+// the other classes change the color
+//
+// button-clear should have classes:
+// button-clear, button-clear-primary, button-clear-secondary, etc.
+// button-clear holds all clear styling with default primary color and
+// the other classes change the color
+//
+// button-outline should have classes:
+// button-outline, button-outline-primary, button-outline-secondary, etc.
+// button-outline holds all outline styling with default primary color and
+// the other classes change the color
+//
+// button-block should stand alone
+// button-full should stand alone
+// button-round should stand alone
+// button-disabled should stand alone(?)
+// button-sizes should stand alone (button-small, button-large, etc)
+// button-fab errrrr
+
+
+// Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-default($bg-color, $bg-color-activated, $text-color) {
+  background-color: $bg-color;
+  color: $text-color;
+
+  &.activated {
+    background-color: $bg-color-activated;
+  }
+}
+
+
+// Generate Default Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $text-color: inverse($bg-color);
+    @include button-default($bg-color, $bg-color-activated, $text-color);
+  }
+
+}

ionic/components/button/test/basic/main.html

@@ -11,28 +11,28 @@
   </p>
 
   <p>
-    <button primary>Primary</button>
-    <button primary class="activated">Primary.activated</button>
+    <button class="button-primary">Primary</button>
+    <button class="button-primary activated">Primary.activated</button>
   </p>
 
   <p>
-    <button secondary>Secondary</button>
-    <button secondary class="activated">Secondary.activated</button>
+    <button class="button-secondary">Secondary</button>
+    <button class="button-secondary activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button danger>Danger</button>
-    <button danger class="activated">Danger.activated</button>
+    <button class="button-danger">Danger</button>
+    <button class="button-danger activated">Danger.activated</button>
   </p>
 
   <p>
-    <button light>Light</button>
-    <button light class="activated">Light.activated</button>
+    <button class="button-light">Light</button>
+    <button class="button-light activated">Light.activated</button>
   </p>
 
   <p>
-    <button dark>Dark</button>
-    <button dark class="activated">Dark.activated</button>
+    <button class="button-dark">Dark</button>
+    <button class="button-dark activated">Dark.activated</button>
   </p>
 
 </ion-content>

ionic/components/button/test/block/main.html

@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <a button block href="#">a[button][block]</a>
-    <button block>button[block]</button>
+    <a button class="button-block" href="#">a[button].button-block</a>
+    <button block>button.button-block</button>
   </p>
 
   <p>
-    <a button block href="#"><icon help-circle></icon> a[button][block] icon</a>
-    <button block><icon help-circle></icon> button[block] icon</button>
+    <a button class="button-block" href="#"><icon help-circle></icon> a[button].button-block icon</a>
+    <button block><icon help-circle></icon> button.button-block icon</button>
   </p>
 
   <p>
-    <a button block outline secondary href="#">a[button][block][outline][secondary]</a>
-    <button block outline secondary>button[block][outline][secondary]</button>
+    <a button class="button-block button-outline-secondary" href="#">a[button].button-block.button-outline-secondary</a>
+    <button class="button-block button-outline-secondary">button.button-block.button-outline-secondary</button>
   </p>
 
   <p>
-    <a button block clear dark href="#">a[button][block][clear][dark]</a>
-    <button block clear dark>button[clear][block][dark]</button>
+    <a button class="button-block button-clear-dark" href="#">a[button].button-block.button-clear-dark</a>
+    <button class="button-block button-clear-dark">button.button-block.button-clear-dark</button>
   </p>
 
   <p>
-    <a button block round href="#">a[button][block][round]</a>
-    <button block round>button[block][round]</button>
+    <a button class="button-block button-round" href="#">a[button].button-block.button-round</a>
+    <button class="button-block button-round">button.button-block.button-round</button>
   </p>
 
   <p>
-    <a button block round outline href="#">a[button][block][round][outline]</a>
-    <button block round outline>button[block][round][outline]</button>
+    <a button class="button-block button-round button-outline" href="#">a[button].button-block.button-round.button-outline</a>
+    <button class="button-block button-round button-outline">button.button-block.button-round.button-outline</button>
   </p>
 
 </ion-content>

ionic/components/button/test/clear/main.html

@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <button clear>Default</button>
-    <button clear class="activated">Default.activated</button>
+    <button class="button-clear">Default</button>
+    <button class="button-clear activated">Default.activated</button>
   </p>
 
   <p>
-    <button clear primary>Primary</button>
-    <button clear primary class="activated">Primary.activated</button>
+    <button class="button-clear-primary">Primary</button>
+    <button class="button-clear-primary activated">Primary.activated</button>
   </p>
 
   <p>
-    <button clear secondary>Secondary</button>
-    <button clear secondary class="activated">Secondary.activated</button>
+    <button class="button-clear-secondary">Secondary</button>
+    <button class="button-clear-secondary activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button clear danger>Danger</button>
-    <button clear danger class="activated">Danger.activated</button>
+    <button class="button-clear-danger">Danger</button>
+    <button class="button-clear-danger activated">Danger.activated</button>
   </p>
 
   <p>
-    <button clear light>Light</button>
-    <button clear light class="activated">Light.activated</button>
+    <button class="button-clear-light">Light</button>
+    <button class="button-clear-light activated">Light.activated</button>
   </p>
 
   <p>
-    <button clear dark>Dark</button>
-    <button clear dark class="activated">Dark.activated</button>
+    <button class="button-clear-dark">Dark</button>
+    <button class="button-clear-dark activated">Dark.activated</button>
   </p>
 
 </ion-content>

ionic/components/button/test/full/main.html

@@ -6,23 +6,23 @@
 <ion-content>
 
   <div>
-    <a button full href="#">a[button][full]</a>
-    <button full>button[full]</button>
+    <a button class="button-full" href="#">a[button].button-full</a>
+    <button class="button-full">button.button-full</button>
   </div>
 
   <div>
-    <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
-    <button full outline secondary>button[full][outline][secondary]</button>
+    <a button class="button-full button-outline-secondary" href="#">a[button].button-full.button-outline-secondary</a>
+    <button class="button-full button-outline-secondary">button.button-full.button-outline-secondary</button>
   </div>
 
   <div>
-    <a button full clear light href="#">a[button][full][clear][light]</a>
-    <button full clear light>button[full][clear][light]</button>
+    <a button class="button-full button-clear-light" href="#">a[button].button-full.button-clear-light</a>
+    <button class="button-full button-clear-light">button.button-full.button-clear-light</button>
   </div>
 
   <div>
-    <a button full clear dark href="#">a[button][full][clear][dark]</a>
-    <button full clear dark>button[full][clear][dark]</button>
+    <a button class="button-full button-clear-dark" href="#">a[button].button-full.button-clear-dark</a>
+    <button class="button-full button-clear-dark">button.button-full.button-clear-dark</button>
   </div>
 
 </ion-content>

ionic/components/button/test/outline/main.html

@@ -6,49 +6,49 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <button outline>Default</button>
-    <button outline class="activated">Default.activated</button>
+    <button class="button-outline">Default</button>
+    <button class="button-outline activated">Default.activated</button>
   </p>
 
   <p>
-    <button outline primary>Primary</button>
-    <button outline primary class="activated">Primary.activated</button>
+    <button class="button-outline-primary">Primary</button>
+    <button class="button-outline-primary activated">Primary.activated</button>
   </p>
 
   <p>
-    <button outline secondary>Secondary</button>
-    <button outline secondary class="activated">Secondary.activated</button>
+    <button class="button-outline-secondary">Secondary</button>
+    <button class="button-outline-secondary activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button outline danger>Danger</button>
-    <button outline danger class="activated">Danger.activated</button>
+    <button class="button-outline-danger">Danger</button>
+    <button class="button-outline-danger activated">Danger.activated</button>
   </p>
 
   <p>
-    <button outline light>Light</button>
-    <button outline light class="activated">Light.activated</button>
+    <button class="button-outline-light">Light</button>
+    <button class="button-outline-light activated">Light.activated</button>
   </p>
 
   <p>
-    <button outline dark>Dark</button>
-    <button outline dark class="activated">Dark.activated</button>
+    <button class="button-outline-dark">Dark</button>
+    <button class="button-outline-dark activated">Dark.activated</button>
   </p>
 
   <p>
-    <button outline block>button[outline][block]</button>
+    <button class="button-outline button-block">.button-outline.button-block</button>
   </p>
 
   <p>
-    <button outline block class="activated">[outline][block].activated</button>
+    <button class="button-outline button-block activated">.button-outline.button-block.activated</button>
   </p>
 
   <p>
-    <button outline block secondary>button[outline][block][secondary]</button>
+    <button class="button-outline-secondary button-block" >.button-outline-secondary.button-block</button>
   </p>
 
   <p>
-    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
+    <button class="button-outline-secondary button-block activated">.button-outline-secondary.button-block.activated</button>
   </p>
 
 </ion-content>

ionic/components/button/test/round/main.html

@@ -4,17 +4,17 @@
 </ion-toolbar>
 
 <ion-content padding>
-  <button round>button</button>
-  <button round light>button light</button>
-  <button round secondary>button secondary</button>
-  <button round danger>button danger</button>
-  <button round dark>button dark</button>
+  <button class="button-round">button</button>
+  <button class="button-round button-light">button light</button>
+  <button class="button-round button-secondary">button secondary</button>
+  <button class="button-round button-danger">button danger</button>
+  <button class="button-round button-dark">button dark</button>
 
-  <button round outline>button</button>
-  <button round light outline>button light</button>
-  <button round secondary outline>button secondary</button>
-  <button round danger outline>button danger</button>
-  <button round dark outline>button dark</button>
+  <button class="button-round button-outline">button</button>
+  <button class="button-round button-outline-light">button outline light</button>
+  <button class="button-round button-outline-secondary">button outline secondary</button>
+  <button class="button-round button-outline-danger">button outline danger</button>
+  <button class="button-round button-outline-dark">button outline dark</button>
 
 </ion-content>
 

ionic/components/button/test/sizes/main.html

@@ -11,23 +11,23 @@
   </p>
 
   <p>
-    <a button small href="#">a[button][small]</a>
-    <button small>button[small]</button>
+    <a button class="button-small" href="#">a[button].button-small</a>
+    <button class="button-small">button.button-small</button>
   </p>
 
   <p>
-    <a button outline small href="#">a[button][outline][small]</a>
-    <button outline small>button[outline][small]</button>
+    <a button class="button-outline button-small" href="#">a[button].button-outline.button-small</a>
+    <button class="button-outline button-small">button.button-outline.button-small</button>
   </p>
 
   <p>
-    <a button clear small href="#">a[button][clear][small]</a>
-    <button clear small>button[clear][small]</button>
+    <a button class="button-clear button-small" href="#">a[button].button-clear.button-small</a>
+    <button class="button-clear button-small">button.button-clear.button-small</button>
   </p>
 
   <p>
-    <button large>[large]</button>
-    <a button large href="#">
+    <button class="button-large">button.button-large</button>
+    <a button class="button-large" href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
       <span style="font-size:32px">L</span>
@@ -36,13 +36,13 @@
   </p>
 
   <p>
-    <a button outline large href="#">a[button][outline][large]</a>
-    <button outline large>button[outline][large]</button>
+    <a button class="button-outline button-large" href="#">a[button].button-outline.button-large</a>
+    <button class="button-outline button-large">button.button-outline.button-large</button>
   </p>
 
   <p>
-    <a button clear large href="#">a[clear][large]</a>
-    <button clear large>button[clear][large]</button>
+    <a button class="button-clear button-large" href="#">a.button-clear.button-large</a>
+    <button class="button-clear button-large">button.button-clear.button-large</button>
   </p>
 
 </ion-content>