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

material buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-04-03 21:54:17 -05:00
parent 738436834c
commit f62577b8c0
12 changed files with 261 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: 0;
border: 1px solid #ccc;
margin: $button-margin;
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-right-width: 0;
border-left-width: 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));
}
}

38
src/components/button/extensions/android.scss Normal file
View File

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

115
src/components/button/extensions/ios.scss
View File

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

28
src/components/button/test/basic/main.html
View File

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

12
src/components/button/test/block/main.html
View File

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

28
src/components/button/test/clear/main.html
View File

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

12
src/components/button/test/full/main.html
View File

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

36
src/components/button/test/icons/main.html
View File

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

24
src/components/button/test/outline/main.html
View File

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

20
src/components/button/test/sizes/main.html
View File

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