From cdce613756007507f58d7743293d50d64fcc9459 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 2 Apr 2015 15:02:01 -0500 Subject: [PATCH] buttons --- src/components.js | 1 + src/components/app/ionic.scss | 1 + src/components/button/button.js | 15 +++ src/components/button/button.scss | 135 ++------------------- src/components/button/extensions/ios.scss | 53 ++++++++ src/components/button/test/basic/main.js | 15 ++- src/components/button/test/block/main.js | 15 ++- src/components/button/test/clear/main.js | 15 ++- src/components/button/test/full/main.js | 15 ++- src/components/button/test/outline/main.js | 15 ++- src/components/button/test/sizes/main.js | 15 ++- 11 files changed, 121 insertions(+), 174 deletions(-) create mode 100644 src/components/button/button.js create mode 100644 src/components/button/extensions/ios.scss diff --git a/src/components.js b/src/components.js index 34044bd9f1..69912a0541 100644 --- a/src/components.js +++ b/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' diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss index bce4c31c2f..86f68bd0a3 100644 --- a/src/components/app/ionic.scss +++ b/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", diff --git a/src/components/button/button.js b/src/components/button/button.js new file mode 100644 index 0000000000..a83071ee35 --- /dev/null +++ b/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, {}) diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 04c5015f15..0ae64d8380 100644 --- a/src/components/button/button.scss +++ b/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); - min-height: $button-height + 5px; - - line-height: normal; + 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; white-space: nowrap; text-overflow: ellipsis; - - border-width: $button-border-width; - border-style: solid; - border-radius: $button-border-radius; + overflow: hidden; 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 // -------------------------------------------------- diff --git a/src/components/button/extensions/ios.scss b/src/components/button/extensions/ios.scss new file mode 100644 index 0000000000..8a3df169a1 --- /dev/null +++ b/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; + } + +} diff --git a/src/components/button/test/basic/main.js b/src/components/button/test/basic/main.js index a70ef9ab9a..e86fdc4de7 100644 --- a/src/components/button/test/basic/main.js +++ b/src/components/button/test/basic/main.js @@ -1,14 +1,13 @@ -import {bootstrap} from 'angular2/core'; -import {Component, Template} from 'angular2/angular2'; +import {bootstrap} from 'angular2/core' +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 { - constructor() { - console.log('IonicApp Start') - } -} +class IonicApp {} bootstrap(IonicApp) diff --git a/src/components/button/test/block/main.js b/src/components/button/test/block/main.js index a70ef9ab9a..e86fdc4de7 100644 --- a/src/components/button/test/block/main.js +++ b/src/components/button/test/block/main.js @@ -1,14 +1,13 @@ -import {bootstrap} from 'angular2/core'; -import {Component, Template} from 'angular2/angular2'; +import {bootstrap} from 'angular2/core' +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 { - constructor() { - console.log('IonicApp Start') - } -} +class IonicApp {} bootstrap(IonicApp) diff --git a/src/components/button/test/clear/main.js b/src/components/button/test/clear/main.js index a70ef9ab9a..e86fdc4de7 100644 --- a/src/components/button/test/clear/main.js +++ b/src/components/button/test/clear/main.js @@ -1,14 +1,13 @@ -import {bootstrap} from 'angular2/core'; -import {Component, Template} from 'angular2/angular2'; +import {bootstrap} from 'angular2/core' +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 { - constructor() { - console.log('IonicApp Start') - } -} +class IonicApp {} bootstrap(IonicApp) diff --git a/src/components/button/test/full/main.js b/src/components/button/test/full/main.js index a70ef9ab9a..e86fdc4de7 100644 --- a/src/components/button/test/full/main.js +++ b/src/components/button/test/full/main.js @@ -1,14 +1,13 @@ -import {bootstrap} from 'angular2/core'; -import {Component, Template} from 'angular2/angular2'; +import {bootstrap} from 'angular2/core' +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 { - constructor() { - console.log('IonicApp Start') - } -} +class IonicApp {} bootstrap(IonicApp) diff --git a/src/components/button/test/outline/main.js b/src/components/button/test/outline/main.js index a70ef9ab9a..e86fdc4de7 100644 --- a/src/components/button/test/outline/main.js +++ b/src/components/button/test/outline/main.js @@ -1,14 +1,13 @@ -import {bootstrap} from 'angular2/core'; -import {Component, Template} from 'angular2/angular2'; +import {bootstrap} from 'angular2/core' +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 { - constructor() { - console.log('IonicApp Start') - } -} +class IonicApp {} bootstrap(IonicApp) diff --git a/src/components/button/test/sizes/main.js b/src/components/button/test/sizes/main.js index a70ef9ab9a..e86fdc4de7 100644 --- a/src/components/button/test/sizes/main.js +++ b/src/components/button/test/sizes/main.js @@ -1,14 +1,13 @@ -import {bootstrap} from 'angular2/core'; -import {Component, Template} from 'angular2/angular2'; +import {bootstrap} from 'angular2/core' +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 { - constructor() { - console.log('IonicApp Start') - } -} +class IonicApp {} bootstrap(IonicApp)