material buttons

scripts/snapshot/ionic.snapshot.js

@@ -80,7 +80,7 @@ var IonicSnapshot = function(options) {
     });
 
     log(colors.green('Start Snapshot:'),
-        self.groupId, self.appId, self.testId, self.platformId, '(' + self.width + 'x' + self.height + ')');
+        self.groupId, self.appId, self.platformId, self.testId, '(' + self.width + 'x' + self.height + ')');
 
   };
 

src/components/app/ionic.scss

@@ -21,7 +21,7 @@
   "typography";
 
 
-// Default Components
+// Core Components
 @import
   "../action-menu/action-menu",
   "../alert/alert",
@@ -42,13 +42,6 @@
   "../toolbar/toolbar";
 
 
-// Android Components
-@import
-  "../list/extensions/android",
-  "../item/extensions/android",
-  "../toolbar/extensions/android";
-
-
 // iOS Components
 @import
   "../action-menu/extensions/ios",
@@ -65,6 +58,14 @@
   "../toolbar/extensions/ios";
 
 
+// Material Design Components
+@import
+  "../button/extensions/android",
+  "../list/extensions/android",
+  "../item/extensions/android",
+  "../toolbar/extensions/android";
+
+
 // Icons
 @import
   "../icon/icon";

src/components/button/button.scss

@@ -1,5 +1,27 @@
 
-// Button Defaults
+// Core Button Variables
+// --------------------------------------------------
+
+$button-font-size:                1.4rem !default;
+$button-margin:                   0.4rem 0 !default;
+$button-padding:                  0 1.4rem !default;
+$button-height:                   4.2rem !default;
+$button-border-width:             1px !default;
+$button-border-radius:            4px !default;
+$button-icon-size:                3rem !default;
+
+$button-large-font-size:          2rem !default;
+$button-large-height:             5.4rem !default;
+$button-large-padding:            1.4rem !default;
+$button-large-icon-size:          3.6rem !default;
+
+$button-small-font-size:          1.3rem !default;
+$button-small-height:             2.8rem !default;
+$button-small-padding:            1.1rem !default;
+$button-small-icon-size:          2.1rem !default;
+
+
+// Core Button
 // --------------------------------------------------
 
 .button {
@@ -11,20 +33,18 @@
   @include flex-align-items(center);
   @include flex-justify-content(center);
 
-  padding: 0 8px;
+  margin: $button-margin;
-  margin: 0;
-  border: 1px solid #ccc;
   line-height: 1;
-  min-height: 28px;
 
-  background: #fff;
   @include appearance(none);
 
-  text-align: center;
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
 
   font-family: inherit;
+  font-variant: inherit;
+  font-style: inherit;
+
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -41,12 +61,52 @@
     left: -6px;
     content: ' ';
   }
-
 }
 
 
+// Core Button Styling
+// --------------------------------------------------
 
-// Button Types
+.button {
+  border: 1px solid #ccc;
+  padding: $button-padding;
+  min-height: $button-height;
+  background: #fff;
+
+  text-align: center;
+  font-size: $button-font-size;
+  border: transparent;
+  border-radius: $button-border-radius;
+
+  &.button-icon {
+    font-size: $button-icon-size;
+  }
+
+  &.button-large {
+    padding: 0 $button-large-padding;
+    min-width: ($button-large-padding * 4);
+    min-height: $button-large-height;
+    font-size: $button-large-font-size;
+
+    &.button-icon {
+      font-size: $button-large-icon-size;
+    }
+  }
+
+  &.button-small {
+    padding: 0 $button-small-padding;
+    min-width: ($button-small-padding * 3);
+    min-height: $button-small-height;
+    font-size: $button-small-font-size;
+
+    &.button-icon {
+      font-size: $button-small-icon-size;
+    }
+  }
+}
+
+
+// Core Button Types
 // --------------------------------------------------
 
 .button-clear {
@@ -65,6 +125,8 @@
 .button-block {
   @include flex-display();
   clear: both;
+  margin-right: 0;
+  margin-left: 0;
 
   &:after {
     clear: both;
@@ -76,8 +138,12 @@
   @include flex-display();
   margin-right: 0;
   margin-left: 0;
+  border-radius: 0;
+
+  &.button-outline.button-outline {
     border-right-width: 0;
     border-left-width: 0;
+  }
 }
 
 button.button-block,
@@ -105,7 +171,6 @@ input.button.button-block  {
 }
 
 
-
 // Button Misc
 // --------------------------------------------------
 
@@ -120,3 +185,59 @@ a.button {
   pointer-events: none;
 }
 
+
+// Core Button Mixins
+// --------------------------------------------------
+
+@mixin button-default($bg-color, $fg-color) {
+  background-color: $bg-color;
+  color: $fg-color;
+
+  &:hover,
+  &.hover {
+    opacity: 0.88;
+    color: $fg-color;
+    text-decoration: none;
+  }
+
+  &.activated {
+    opacity: 1;
+    background-color: darken($bg-color, 12%);
+  }
+}
+
+@mixin button-clear($fg-color) {
+  &.button-clear {
+    background: none;
+    color: $fg-color;
+  }
+}
+
+@mixin button-outline($fg-color) {
+  &.button-outline {
+    border: 1px solid $fg-color;
+    background: transparent;
+    color: $fg-color;
+
+    &.activated {
+      background-color: rgba(red($fg-color), green($fg-color), blue($fg-color), 0.15);
+    }
+  }
+}
+
+
+// Core Button Color Generation
+// --------------------------------------------------
+
+@each $color, $value in $colors {
+
+  .button-#{$color} {
+    @include button-default(get-color($color, base),
+                            get-color($color, inverse));
+
+    @include button-clear(get-color($color, base));
+
+    @include button-outline(get-color($color, base));
+  }
+
+}

src/components/button/extensions/android.scss

@@ -0,0 +1,38 @@
+
+// Material Design Button Variables
+// --------------------------------------------------
+
+$button-material-font-size:                1.4rem !default;
+$button-material-padding:                  0 0.6rem !default;
+$button-material-box-shadow:               0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
+$button-material-border-radius:            3px !default;
+
+
+// Material Design Button
+// --------------------------------------------------
+
+
+.button.button-android {
+  border: 0;
+  border-radius: $button-material-border-radius;
+
+  padding: $button-material-padding;
+  text-transform: uppercase;
+
+  font-weight: 500;
+  font-size: $button-material-font-size;
+  box-shadow: $button-material-box-shadow;
+
+
+  &.button-icon {
+    font-size: $button-icon-size;
+  }
+
+  &.button-large.button-icon {
+    font-size: $button-large-icon-size;
+  }
+
+  &.button-small.button-icon {
+    font-size: $button-small-icon-size;
+  }
+}

src/components/button/extensions/ios.scss

@@ -1,115 +0,0 @@
-
-// iOS Button Variables
-// --------------------------------------------------
-
-$button-ios-font-size:                1.4rem !default;
-$button-ios-padding:                  0 1.4rem !default;
-$button-ios-height:                   4.2rem !default;
-$button-ios-border-width:             1px !default;
-$button-ios-border-radius:            4px !default;
-
-$button-ios-large-font-size:          2rem !default;
-$button-ios-large-height:             5.4rem !default;
-$button-ios-large-padding:            1.4rem !default;
-$button-ios-large-icon-size:          3.2rem !default;
-
-$button-ios-small-font-size:          1.3rem !default;
-$button-ios-small-height:             2.8rem !default;
-$button-ios-small-padding:            1.1rem !default;
-$button-ios-small-icon-size:          1.6rem !default;
-
-
-// iOS Button Mixins
-// --------------------------------------------------
-
-@mixin button-default($bg-color, $fg-color) {
-  background-color: $bg-color;
-  color: $fg-color;
-
-  &:hover,
-  &.hover {
-    opacity: 0.88;
-    color: $fg-color;
-    text-decoration: none;
-  }
-
-  &.activated {
-    opacity: 1;
-    background-color: darken($bg-color, 12%);
-  }
-}
-
-@mixin button-clear($fg-color) {
-  &.button-clear {
-    background: none;
-    color: $fg-color;
-  }
-}
-
-@mixin button-outline($fg-color) {
-  &.button-outline {
-    border: 1px solid $fg-color;
-    background: transparent;
-    color: $fg-color;
-
-    &.activated {
-      background-color: rgba(red($fg-color), green($fg-color), blue($fg-color), 0.15);
-    }
-  }
-}
-
-
-// iOS Button
-// --------------------------------------------------
-
-.button-ios {
-  padding: $button-ios-padding;
-  min-height: $button-ios-height;
-  border-radius: $button-ios-border-radius;
-  font-size: $button-ios-font-size;
-  border: transparent;
-
-  &.button-icon {
-    font-size: $button-ios-font-size + 1.5;
-  }
-
-  &.button-large {
-    padding: 0 $button-ios-large-padding;
-    min-width: ($button-ios-large-padding * 4);
-    min-height: $button-ios-large-height;
-    font-size: $button-ios-large-font-size;
-
-    &.button-icon {
-      font-size: $button-ios-large-font-size + 1.7;
-    }
-  }
-
-  &.button-small {
-    padding: 0 $button-ios-small-padding;
-    min-width: ($button-ios-small-padding * 4);
-    min-height: $button-ios-small-height;
-    font-size: $button-ios-small-font-size;
-
-    &.button-icon {
-      font-size: $button-ios-small-font-size + 1.2;
-    }
-  }
-
-}
-
-
-// iOS Button Color Generation
-// --------------------------------------------------
-
-@each $color, $value in $colors {
-
-  .button-ios.button-#{$color} {
-    @include button-default(get-color($color, base),
-                            get-color($color, inverse));
-
-    @include button-clear(get-color($color, base));
-
-    @include button-outline(get-color($color, base));
-  }
-
-}

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

@@ -1,49 +1,49 @@
 
-<p>
+<div>
   <a class="button" href="#">a (default)</a>
   <button class="button">button (default)</button>
   <button class="button hover">hover</button>
   <button class="button activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-primary" href="#">a.primary</a>
   <button class="button button-primary">button.primary</button>
   <button class="button button-primary hover">hover</button>
   <button class="button button-primary activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-secondary" href="#">a.secondary</a>
   <button class="button button-secondary">button.secondary</button>
   <button class="button button-secondary hover">hover</button>
   <button class="button button-secondary activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-danger" href="#">a.danger</a>
   <button class="button button-danger">button.danger</button>
   <button class="button button-danger hover">hover</button>
   <button class="button button-danger activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-light" href="#">a.light</a>
   <button class="button button-light">button.light</button>
   <button class="button button-light hover">hover</button>
   <button class="button button-light activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-stable" href="#">a.stable</a>
   <button class="button button-stable">button.stable</button>
   <button class="button button-stable hover">hover</button>
   <button class="button button-stable activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-dark" href="#">a.dark</a>
   <button class="button button-dark">button.dark</button>
   <button class="button button-dark hover">hover</button>
   <button class="button button-dark activated">activated</button>
-</p>
+</div>

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

@@ -1,19 +1,19 @@
 
 <div class="padding">
 
-  <p>
+  <div>
     <a class="button button-block button-primary" href="#">a.button-block</a>
     <button class="button button-block button-primary">button.button-block</button>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <a class="button button-block button-outline button-primary" href="#">a.button-block</a>
     <button class="button button-block button-outline button-primary">button.button-block</button>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <a class="button button-block button-clear button-primary" href="#">a.button-block</a>
     <button class="button button-block button-clear button-primary">button.button-block</button>
-  </p>
+  </div>
 
 </div>

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

@@ -1,49 +1,49 @@
 
-<p>
+<div>
   <a class="button button-clear" href="#">a (default)</a>
   <button class="button button-clear">button (default)</button>
   <button class="button button-clear hover">hover</button>
   <button class="button button-clear activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-clear button-primary" href="#">a.primary</a>
   <button class="button button-clear button-primary">button.primary</button>
   <button class="button button-clear button-primary hover">hover</button>
   <button class="button button-clear button-primary activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-clear button-secondary" href="#">a.secondary</a>
   <button class="button button-clear button-secondary">button.secondary</button>
   <button class="button button-clear button-secondary hover">hover</button>
   <button class="button button-clear button-secondary activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-clear button-danger" href="#">a.danger</a>
   <button class="button button-clear button-danger">button.danger</button>
   <button class="button button-clear button-danger hover">hover</button>
   <button class="button button-clear button-danger activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-clear button-light" href="#">a.light</a>
   <button class="button button-clear button-light">button.light</button>
   <button class="button button-clear button-light hover">hover</button>
   <button class="button button-clear button-light activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-clear button-stable" href="#">a.stable</a>
   <button class="button button-clear button-stable">button.stable</button>
   <button class="button button-clear button-stable hover">hover</button>
   <button class="button button-clear button-stable activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-clear button-dark" href="#">a.dark</a>
   <button class="button button-clear button-dark">button.dark</button>
   <button class="button button-clear button-dark hover">hover</button>
   <button class="button button-clear button-dark activated">activated</button>
-</p>
+</div>

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

@@ -1,15 +1,15 @@
 
-<p>
+<div>
   <a class="button button-full button-primary" href="#">a.button-full</a>
   <button class="button button-full button-primary">button.button-full</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-full button-outline button-primary" href="#">a.button-full</a>
   <button class="button button-full button-outline button-primary">button.button-full</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-full button-clear button-primary" href="#">a.button-full</a>
   <button class="button button-full button-clear button-primary">button.button-full</button>
-</p>
+</div>

src/components/button/test/icons/main.html

@@ -1,79 +1,79 @@
 
 <div class="padding">
 
-  <p>
+  <div>
     <button class="button button-primary ion-home icon-left">
       Left Icon
     </button>
     <a class="button button-primary ion-home icon-left">
       Left Icon
     </a>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <button class="button button-primary ion-star icon-right">
       Right Icon
     </button>
     <a class="button button-primary ion-star icon-right">
       Right Icon
     </a>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <button class="button button-primary ion-ionic button-icon">
     </button>
     <a class="button button-primary ion-ionic button-icon">
     </a>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <button class="button button-primary button-large ion-home icon-left">
       Left, Large
     </button>
     <a class="button button-primary button-large ion-home icon-left">
       Left, Large
     </a>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <button class="button button-primary button-large ion-star icon-right">
       Right, Large
     </button>
     <a class="button button-primary button-large ion-star icon-right">
       Right, Large
     </a>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <button class="button button-primary ion-ionic button-icon button-large">
     </button>
     <a class="button button-primary ion-ionic button-icon button-large">
     </a>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <button class="button button-primary button-small ion-home icon-left">
       Left Icon, Small
     </button>
     <a class="button button-primary button-small ion-home icon-left">
       Left Icon, Small
     </a>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <button class="button button-primary button-small ion-star icon-right">
       Right Icon, Small
     </button>
     <a class="button button-primary button-small ion-star icon-right">
       Right Icon, Small
     </a>
-  </p>
+  </div>
 
-  <p>
+  <div>
     <button class="button button-primary ion-ionic button-icon button-small">
     </button>
     <a class="button button-primary ion-ionic button-icon button-small">
     </a>
-  </p>
+  </div>
 
 </div>

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

@@ -1,42 +1,42 @@
 
-<p>
+<div>
   <a class="button button-outline button-primary" href="#">a.primary</a>
   <button class="button button-outline button-primary">button.primary</button>
   <button class="button button-outline button-primary hover">hover</button>
   <button class="button button-outline button-primary activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-outline button-secondary" href="#">a.secondary</a>
   <button class="button button-outline button-secondary">button.secondary</button>
   <button class="button button-outline button-secondary hover">hover</button>
   <button class="button button-outline button-secondary activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-outline button-danger" href="#">a.danger</a>
   <button class="button button-outline button-danger">button.danger</button>
   <button class="button button-outline button-danger hover">hover</button>
   <button class="button button-outline button-danger activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-outline button-light" href="#">a.light</a>
   <button class="button button-outline button-light">button.light</button>
   <button class="button button-outline button-light hover">hover</button>
   <button class="button button-outline button-light activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-outline button-stable" href="#">a.stable</a>
   <button class="button button-outline button-stable">button.stable</button>
   <button class="button button-outline button-stable hover">hover</button>
   <button class="button button-outline button-stable activated">activated</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-outline button-dark" href="#">a.dark</a>
   <button class="button button-outline button-dark">button.dark</button>
   <button class="button button-outline button-dark hover">hover</button>
   <button class="button button-outline button-dark activated">activated</button>
-</p>
+</div>

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

@@ -1,23 +1,23 @@
 
-<p>
+<div>
   <a class="button button-primary" href="#">a (default)</a>
   <button class="button button-primary">button (default)</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-small button-primary" href="#">a.small</a>
   <button class="button button-small button-primary">button.small</button>
 
   <a class="button button-outline button-small button-primary" href="#">a.outline.small</a>
   <button class="button button-outline button-small button-primary">button.outline.small</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-clear button-small button-primary" href="#">a.clear.small</a>
   <button class="button button-clear button-small button-primary">button.clear.small</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-large button-primary" href="#">
     <span style="font-size:48px">H</span>
     <span style="font-size:38px">E</span>
@@ -25,12 +25,12 @@
     <span style="font-size:24px">L</span>
     O</a>
   <button class="button button-large button-primary">button</button>
-</p>
+</div>
 
-<p>
+<div>
   <a class="button button-outline button-large button-primary" href="#">a</a>
   <button class="button button-outline button-large button-primary">button</button>
 
   <a class="button button-clear button-large button-primary" href="#">a</a>
   <button class="button button-clear button-large button-primary">button</button>
-</p>
+</div>