javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-04-02 15:02:01 -05:00
parent 174337fe84
commit cdce613756
11 changed files with 121 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components.js
View File

@ -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'

1
src/components/app/ionic.scss
View File

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

15
src/components/button/button.js Normal file
View File

@ -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, {})

135
src/components/button/button.scss
View File

@ -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
// --------------------------------------------------

53
src/components/button/extensions/ios.scss Normal file
View File

@ -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;
}
}

15
src/components/button/test/basic/main.js
View File

@ -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)

15
src/components/button/test/block/main.js
View File

@ -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)

15
src/components/button/test/clear/main.js
View File

@ -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)

15
src/components/button/test/full/main.js
View File

@ -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)

15
src/components/button/test/outline/main.js
View File

@ -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)

15
src/components/button/test/sizes/main.js
View File

@ -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)