javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

re-org buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-12-05 15:23:21 -06:00
parent ba87b3af8e
commit 3b78a6894c
3 changed files with 232 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ionic/components/button/button.scss
View File

@@ -3,12 +3,6 @@
// Buttons
// --------------------------------------------------
$button-font-size: 1.6rem !default;
$button-margin: 0.4rem 0.2rem !default;
$button-padding: 0 1em !default;
$button-height: 2.8em !default;
$button-border-radius: 4px !default;
$button-round-padding: 0 2.6rem !default;
$button-round-border-radius: 64px !default;
@@ -21,16 +15,6 @@ $button-round-border-radius: 64px !default;
align-items: center;
justify-content: center;
transition: background-color, opacity 100ms linear;
margin: $button-margin;
padding: $button-padding;
min-height: $button-height;
line-height: $button-height;
border: 1px solid #ccc;
border: transparent;
border-radius: $button-border-radius;
font-size: $button-font-size;
white-space: nowrap;
text-overflow: ellipsis;
@@ -96,21 +80,6 @@ a.button {
}
// Clear Button
// --------------------------------------------------
.button-clear {
border-color: transparent;
background: transparent;
&.activated {
opacity: 0.4;
background: transparent;
}
}
// TODO
// button should have classes:

161
ionic/components/button/modes/ios.scss
View File

@@ -7,53 +7,80 @@
// iOS Button
// --------------------------------------------------
$button-ios-margin: 0.4rem 0.2rem !default;
$button-ios-padding: 0 1em !default;
$button-ios-font-size: 1.6rem !default;
$button-ios-height: 2.8em !default;
$button-ios-color: map-get($colors-ios, primary) !default;
$button-ios-color-activated: color-shade($button-ios-color) !default;
$button-ios-text-color: inverse($button-ios-color) !default;
$button-ios-hover-opacity: 0.8 !default;
$button-ios-border-radius: 4px !default;
// iOS Default Button
// --------------------------------------------------
.button {
background: $button-ios-color;
margin: $button-ios-margin;
padding: $button-ios-padding;
min-height: $button-ios-height;
line-height: $button-ios-height;
font-size: $button-ios-font-size;
border-radius: $button-ios-border-radius;
color: $button-ios-text-color;
background-color: $button-ios-color;
&:hover:not(.disable-hover) {
opacity: $button-ios-hover-opacity;
text-decoration: none;
}
opacity: $button-ios-hover-opacity;
text-decoration: none;
}
&.activated {
opacity: 1;
background-color: $button-ios-color-activated;
}
&.activated {
opacity: 1;
background-color: $button-ios-color-activated;
}
}
// iOS Default Button Color Mixin
// --------------------------------------------------
@mixin ios-button-default($color-name, $color-value) {
.button-#{$color-name} {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$fg-color: inverse($bg-color);
color: $fg-color;
background-color: $bg-color;
&.activated {
background-color: $bg-color-activated;
}
}
}
// iOS Block Button
// --------------------------------------------------
.button-block {
// This fixes an issue with flexbox and button on iOS Safari. See #225
display: block;
}
// Clear Button
// --------------------------------------------------
.button-clear {
color: color-shade($button-ios-color);
&:hover:not(.disable-hover) {
opacity: 0.6;
color: color-shade($button-ios-color);
}
}
// Outline Button
// iOS Outline Button
// --------------------------------------------------
.button-outline {
border: 1px solid $button-ios-color;
background: transparent;
background-color: transparent;
color: $button-ios-color;
&.activated {
@@ -64,89 +91,69 @@ $button-ios-hover-opacity: 0.8 !default;
}
// Default Button Color Mixin
// iOS Outline Button Color Mixin
// --------------------------------------------------
@mixin button-default($bg-color, $bg-color-activated, $fg-color) {
background-color: $bg-color;
color: $fg-color;
@mixin ios-button-outline($color-name, $color-value) {
&.activated {
background-color: $bg-color-activated;
}
}
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
border-color: $fg-color;
background-color: transparent;
color: $fg-color;
// Generate Default Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
.button-#{$color-name} {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$fg-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $fg-color);
&.activated {
color: $background-ios-color;
background-color: $fg-color;
}
}
}
// Generate Clear Button Colors
// iOS Clear Button
// --------------------------------------------------
// TODO primary activated is wrong
@each $color-name, $color-value in $colors-ios {
.button-clear {
border-color: transparent;
color: color-shade($button-ios-color);
background-color: transparent;
$fg-color: color-shade($color-value);
&:hover:not(.disable-hover) {
opacity: 0.6;
color: color-shade($button-ios-color);
}
}
// iOS Clear Button Color Mixin
// --------------------------------------------------
@mixin ios-button-clear($color-name, $color-value) {
.button-clear-#{$color-name} {
$fg-color: color-shade($color-value);
border-color: transparent;
background: transparent;
background-color: transparent;
color: $fg-color;
&.activated {
opacity: 0.4;
background: transparent;
background-color: transparent;
}
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
}
}
// Outline Button Color Mixin
// --------------------------------------------------
@mixin button-outline($fg-color) {
border-color: $fg-color;
background: transparent;
color: $fg-color;
&.activated {
color: $background-ios-color;
background-color: $fg-color;
}
}
// Outline Clear Button Colors
// Generate iOS Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
@include button-outline($fg-color);
}
@include ios-button-default($color-name, $color-value);
@include ios-button-outline($color-name, $color-value);
@include ios-button-clear($color-name, $color-value);
}

207
ionic/components/button/modes/md.scss
View File

@@ -7,9 +7,10 @@
// Material Design Button
// --------------------------------------------------
$button-md-margin: 0.4rem 0.2rem !default;
$button-md-padding: 0 1.1em !default;
$button-md-font-size: 1.4rem !default;
$button-md-min-height: 3.6rem !default;
$button-md-padding: 0 1.1em !default;
$button-md-height: 3.6rem !default;
$button-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$button-md-box-shadow-active: 0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !default;
@@ -29,18 +30,29 @@ $button-md-text-color: inverse($button-md-color) !default;
$button-md-hover-opacity: 0.8 !default;
// Material Design Default Button
// --------------------------------------------------
.button {
border-radius: $button-md-border-radius;
min-height: $button-md-min-height;
margin: $button-md-margin;
padding: $button-md-padding;
text-transform: uppercase;
min-height: $button-md-height;
line-height: $button-md-height;
font-size: $button-md-font-size;
border: 0;
border-radius: $button-md-border-radius;
font-weight: 500;
font-size: $button-md-font-size;
color: $button-md-text-color;
background-color: $button-md-color;
box-shadow: $button-md-box-shadow;
text-transform: uppercase;
transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
background-color $button-md-transition-duration $button-md-animation-curve,
color $button-md-transition-duration $button-md-animation-curve;
@@ -48,16 +60,35 @@ $button-md-hover-opacity: 0.8 !default;
&:hover:not(.disable-hover) {
background-color: $button-md-clear-hover-background-color;
}
&.activated {
box-shadow: $button-md-box-shadow-active;
}
}
.button-full {
border-radius: 0;
// Material Design Default Button Color Mixin
// --------------------------------------------------
@mixin md-button-default($color-name, $color-value) {
.button-#{$color-name} {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$fg-color: inverse($bg-color);
color: $fg-color;
background-color: $bg-color;
&.activated {
opacity: 1;
}
}
}
.button-round {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
// Material Design Button Sizes
// --------------------------------------------------
.button-large {
padding: 0 $button-large-padding;
@@ -71,10 +102,107 @@ $button-md-hover-opacity: 0.8 !default;
font-size: $button-small-font-size;
}
&.activated {
box-shadow: $button-md-box-shadow-active;
// Material Design Full Button
// --------------------------------------------------
.button-full {
border-radius: 0;
}
// Material Design Outline Button
// --------------------------------------------------
.button-outline {
border: 1px solid $button-md-color;
background-color: transparent;
color: $button-md-color;
box-shadow: none;
&.activated {
opacity: 1;
color: $background-md-color;
background-color: $button-md-color;
}
md-ripple {
background-color: ripple-background-color($button-md-color);
}
}
// Material Design Outline Button Color Mixin
// --------------------------------------------------
@mixin md-button-outline($color-name, $color-value) {
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
border-color: $fg-color;
background-color: transparent;
color: $fg-color;
&.activated {
color: $background-md-color;
background-color: $fg-color;
}
}
}
// Material Design Clear Button
// --------------------------------------------------
.button-clear {
border-color: transparent;
opacity: 1;
box-shadow: none;
background-color: transparent;
&.activated {
opacity: 0.4;
background-color: $button-md-clear-active-background-color;
}
}
// Material Design Clear Button Color Mixin
// --------------------------------------------------
@mixin md-button-clear($color-name, $color-value) {
.button-clear-#{$color-name} {
$fg-color: color-shade($color-value);
border-color: transparent;
background-color: transparent;
color: $fg-color;
&.activated {
opacity: 0.4;
background-color: transparent;
}
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
}
}
// Material Design Round Button
// --------------------------------------------------
.button-round {
padding: $button-round-padding;
border-radius: $button-round-border-radius;
}
// Material Design FAB Button
// --------------------------------------------------
.button-fab {
border-radius: 50%;
box-shadow: $button-md-fab-box-shadow;
@@ -88,45 +216,6 @@ $button-md-hover-opacity: 0.8 !default;
padding: 0;
}
.button-outline {
box-shadow: none;
&.activated {
opacity: 1;
}
md-ripple {
background-color: ripple-background-color($button-md-color);
}
}
.button-clear {
opacity: 1;
box-shadow: none;
background: transparent;
&.activated {
opacity: 0.4;
background-color: $button-md-clear-active-background-color;
}
}
// Outline Button
// --------------------------------------------------
.button-outline {
border: 1px solid $button-md-color;
background: transparent;
color: $button-md-color;
&.activated {
opacity: 1;
color: $background-md-color;
background-color: $button-md-color;
}
}
// Material Design Button Color Mixin
// --------------------------------------------------
@@ -139,7 +228,7 @@ $button-md-hover-opacity: 0.8 !default;
.button-outline {
md-ripple {
background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
background-color: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
}
&.activated {
@@ -154,11 +243,11 @@ $button-md-hover-opacity: 0.8 !default;
}
// Generate Material Design Button Auxiliary Colors
// Generate Material Design Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include button-theme-md($color-name, $color-value);
@include md-button-default($color-name, $color-value);
@include md-button-outline($color-name, $color-value);
@include md-button-clear($color-name, $color-value);
}