buttons

src/components.js

@@ -1,6 +1,7 @@
 export * from 'ionic2/components/action-menu/action-menu'
 export * from 'ionic2/components/alert/alert'
 export * from 'ionic2/components/aside/aside'
+export * from 'ionic2/components/button/button'
 export * from 'ionic2/components/checkbox/checkbox'
 export * from 'ionic2/components/content/content'
 export * from 'ionic2/components/icon/icon'

src/components/app/ionic.scss

@@ -52,6 +52,7 @@
 @import
   "../action-menu/extensions/ios",
   "../alert/extensions/ios",
+  "../button/extensions/ios",
   "../card/extensions/ios",
   "../checkbox/extensions/ios",
   "../content/extensions/ios",

src/components/button/button.js

@@ -0,0 +1,15 @@
+import {NgElement, Decorator} from 'angular2/angular2'
+import {IonicComponent} from 'ionic2/config/component'
+
+@Decorator({
+  selector: '.button',
+})
+export class Button {
+  constructor(
+    @NgElement() ngElement:NgElement
+  ) {
+    this.domElement = ngElement.domElement
+    this.config = Button.config.invoke(this)
+  }
+}
+new IonicComponent(Button, {})

src/components/button/button.scss

@@ -1,76 +1,4 @@
 
-// Button Variables
-// -------------------------------
-
-$button-block-margin:             10px !default;
-$button-clear-padding:            6px !default;
-$button-border-radius:            2px !default;
-$button-border-width:             1px !default;
-
-$button-font-size:                1.6rem !default;
-$button-height:                   42px !default;
-$button-padding:                  12px !default;
-$button-icon-size:                24px !default;
-
-$button-large-font-size:          2rem !default;
-$button-large-height:             54px !default;
-$button-large-padding:            16px !default;
-$button-large-icon-size:          32px !default;
-
-$button-small-font-size:          1.2rem !default;
-$button-small-height:             28px !default;
-$button-small-padding:            4px !default;
-$button-small-icon-size:          16px !default;
-
-
-
-// Button Mixins
-// --------------------------------------------------
-
-@mixin button-default($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
-  background-color: $bg-color;
-  border-color: $border-color;
-  color: $color;
-
-  &:hover,
-  &.hover {
-    opacity: 0.8;
-    color: $color;
-    text-decoration: none;
-  }
-
-  &.activated {
-    border-color: darken($border-color, 10%);
-    background-color: $active-bg-color;
-    box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
-  }
-}
-
-@mixin button-clear($color) {
-  &.button-clear {
-    border-color: transparent;
-    background: none;
-    box-shadow: none;
-    color: $color;
-  }
-}
-
-@mixin button-outline($color) {
-  &.button-outline {
-    border-color: $color;
-    background: transparent;
-    color: $color;
-
-    &.activated {
-      background-color: $color;
-      box-shadow: none;
-      color: #fff;
-    }
-  }
-}
-
-
-
 // Button Defaults
 // --------------------------------------------------
 
@@ -83,23 +11,23 @@ $button-small-icon-size:          16px !default;
   @include flex-align-items(center);
   @include flex-justify-content(center);
 
+  padding: 0 8px;
   margin: 0;
-  padding: 0 $button-padding;
+  border: 1px solid #ccc;
+  line-height: 1;
+  min-height: 28px;
 
-  min-width: ($button-padding * 4);
+  background: #fff;
-  min-height: $button-height + 5px;
+  @include appearance(none);
-
-  line-height: normal;
 
+  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;
   white-space: nowrap;
   text-overflow: ellipsis;
-
+  overflow: hidden;
-  border-width: $button-border-width;
-  border-style: solid;
-  border-radius: $button-border-radius;
 
   outline: none;
   cursor: pointer;
@@ -118,35 +46,12 @@ $button-small-icon-size:          16px !default;
 
 
 
-// Button Sizes
-// --------------------------------------------------
-
-.button-small {
-  padding: 0 $button-small-padding;
-  min-width: $button-small-height;
-  min-height: $button-small-height + 2;
-  font-size: $button-small-font-size;
-}
-
-.button-large {
-  padding: 0 $button-large-padding;
-  min-width: ($button-large-padding * 4);
-  min-height: $button-large-height + 5;
-  font-size: $button-large-font-size;
-}
-
-
-
 // Button Types
 // --------------------------------------------------
 
 .button-clear {
-  @include transition(opacity .1s);
-  padding: 0 $button-clear-padding;
-  max-height: $button-height;
   border-color: transparent;
   background: none;
-  box-shadow: none;
 
   &.activated {
     opacity: 0.3;
@@ -154,9 +59,7 @@ $button-small-icon-size:          16px !default;
 }
 
 .button-outline {
-  @include transition(opacity .1s);
   background: none;
-  box-shadow: none;
 }
 
 .button-block {
@@ -175,7 +78,6 @@ $button-small-icon-size:          16px !default;
   margin-left: 0;
   border-right-width: 0;
   border-left-width: 0;
-  border-radius: 0;
 }
 
 button.button-block,
@@ -191,25 +93,6 @@ input.button.button-block  {
 
 
 
-// Button Color Generation
-// --------------------------------------------------
-
-@each $color, $value in $colors {
-  .button-#{$color} {
-    @include button-default(get-color($color, base),
-                            get-color($color, dark),
-                            inverse-tone($color),
-                            get-color($color, dark),
-                            get-color($color, inverse));
-
-    @include button-clear(get-color($color, dark));
-
-    @include button-outline(get-color($color, dark));
-  }
-}
-
-
-
 // Button Misc
 // --------------------------------------------------
 

src/components/button/extensions/ios.scss

@@ -0,0 +1,53 @@
+
+// iOS Buttons
+// --------------------------------------------------
+
+$button-ios-font-size:              1.4rem !default;
+$button-ios-padding:                0 10px !default;
+$button-ios-height:                 29px !default;
+$button-ios-text-color:             #007aff !default;
+$button-ios-border-width:           1px !default;
+$button-ios-border-color:           #007aff !default;
+$button-ios-border-radius:          5px !default;
+
+$button-ios-large-font-size:          2rem !default;
+$button-ios-large-height:             54px !default;
+$button-ios-large-padding:            16px !default;
+$button-ios-large-icon-size:          32px !default;
+
+$button-ios-small-font-size:          1.2rem !default;
+$button-ios-small-height:             28px !default;
+$button-ios-small-padding:            4px !default;
+$button-ios-small-icon-size:          16px !default;
+
+
+.button-ios {
+  padding: $button-ios-padding;
+
+  height: $button-ios-height;
+  font-size: $button-ios-font-size;
+
+  border: $button-ios-border-width solid $button-ios-border-color;
+  border-radius: $button-ios-border-radius;
+  color: $button-ios-text-color;
+
+
+
+
+
+  &.button-large {
+    padding: 0 $button-ios-large-padding;
+    min-width: ($button-ios-large-padding * 4);
+    min-height: $button-ios-large-height + 5;
+    font-size: $button-ios-large-font-size;
+  }
+
+
+  &.button-small {
+    padding: 0 $button-ios-small-padding;
+    min-width: $button-ios-small-height;
+    min-height: $button-ios-small-height + 2;
+    font-size: $button-ios-small-font-size;
+  }
+
+}

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

@@ -1,14 +1,13 @@
-import {bootstrap} from 'angular2/core';
+import {bootstrap} from 'angular2/core'
-import {Component, Template} from 'angular2/angular2';
+import {Component, Template} from 'angular2/angular2'
+import {Button} from 'ionic2/components/button/button'
+
 
 @Component({ selector: '[ion-app]' })
 @Template({
-  url: 'main.html'
+  url: 'main.html',
+  directives: [Button]
 })
-class IonicApp {
+class IonicApp {}
-  constructor() {
-    console.log('IonicApp Start')
-  }
-}
 
 bootstrap(IonicApp)

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

@@ -1,14 +1,13 @@
-import {bootstrap} from 'angular2/core';
+import {bootstrap} from 'angular2/core'
-import {Component, Template} from 'angular2/angular2';
+import {Component, Template} from 'angular2/angular2'
+import {Button} from 'ionic2/components/button/button'
+
 
 @Component({ selector: '[ion-app]' })
 @Template({
-  url: 'main.html'
+  url: 'main.html',
+  directives: [Button]
 })
-class IonicApp {
+class IonicApp {}
-  constructor() {
-    console.log('IonicApp Start')
-  }
-}
 
 bootstrap(IonicApp)

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

@@ -1,14 +1,13 @@
-import {bootstrap} from 'angular2/core';
+import {bootstrap} from 'angular2/core'
-import {Component, Template} from 'angular2/angular2';
+import {Component, Template} from 'angular2/angular2'
+import {Button} from 'ionic2/components/button/button'
+
 
 @Component({ selector: '[ion-app]' })
 @Template({
-  url: 'main.html'
+  url: 'main.html',
+  directives: [Button]
 })
-class IonicApp {
+class IonicApp {}
-  constructor() {
-    console.log('IonicApp Start')
-  }
-}
 
 bootstrap(IonicApp)

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

@@ -1,14 +1,13 @@
-import {bootstrap} from 'angular2/core';
+import {bootstrap} from 'angular2/core'
-import {Component, Template} from 'angular2/angular2';
+import {Component, Template} from 'angular2/angular2'
+import {Button} from 'ionic2/components/button/button'
+
 
 @Component({ selector: '[ion-app]' })
 @Template({
-  url: 'main.html'
+  url: 'main.html',
+  directives: [Button]
 })
-class IonicApp {
+class IonicApp {}
-  constructor() {
-    console.log('IonicApp Start')
-  }
-}
 
 bootstrap(IonicApp)

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

@@ -1,14 +1,13 @@
-import {bootstrap} from 'angular2/core';
+import {bootstrap} from 'angular2/core'
-import {Component, Template} from 'angular2/angular2';
+import {Component, Template} from 'angular2/angular2'
+import {Button} from 'ionic2/components/button/button'
+
 
 @Component({ selector: '[ion-app]' })
 @Template({
-  url: 'main.html'
+  url: 'main.html',
+  directives: [Button]
 })
-class IonicApp {
+class IonicApp {}
-  constructor() {
-    console.log('IonicApp Start')
-  }
-}
 
 bootstrap(IonicApp)

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

@@ -1,14 +1,13 @@
-import {bootstrap} from 'angular2/core';
+import {bootstrap} from 'angular2/core'
-import {Component, Template} from 'angular2/angular2';
+import {Component, Template} from 'angular2/angular2'
+import {Button} from 'ionic2/components/button/button'
+
 
 @Component({ selector: '[ion-app]' })
 @Template({
-  url: 'main.html'
+  url: 'main.html',
+  directives: [Button]
 })
-class IonicApp {
+class IonicApp {}
-  constructor() {
-    console.log('IonicApp Start')
-  }
-}
 
 bootstrap(IonicApp)