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

move button colors to ios button

Browse Source
This commit is contained in:
Adam Bradley
2015-12-04 21:53:48 -06:00
parent 3d5944c5c6
commit 78a3ce12b1
14 changed files with 71 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ionic/components/button/button-clear.scss
View File

@@ -18,30 +18,3 @@
color: color-shade($button-color);
}
}
// Generate Clear Button Colors
// --------------------------------------------------
// TODO primary activated is wrong
@each $color-name, $color-value in auxiliary-colors() {
$fg-color: color-shade($color-value);
.button-clear-#{$color-name} {
border-color: transparent;
background: transparent;
color: $fg-color;
&.activated {
opacity: 0.4;
background: transparent;
}
&:hover:not(.disable-hover) {
color: color-shade($fg-color);
}
}
}

32
ionic/components/button/button-outline.scss
View File

@@ -14,35 +14,3 @@
background-color: $button-color;
}
}
// Outline Button Color Mixin
// --------------------------------------------------
@mixin button-outline($fg-color) {
border-color: $fg-color;
background: transparent;
color: $fg-color;
&.activated {
color: $background-color;
background-color: $fg-color;
}
}
// Outline Clear Button Colors
// --------------------------------------------------
@each $color-name, $color-value in auxiliary-colors() {
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
@include button-outline($fg-color);
}
}

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

@@ -9,7 +9,7 @@ $button-border-radius: 4px !default;
$button-round-padding: 0 2.6rem !default;
$button-round-border-radius: 64px !default;
$button-color: color(primary) !default;
$button-color: map-get($colors, primary) !default;
$button-color-activated: color-shade($button-color) !default;
$button-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.8 !default;

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

@@ -13,3 +13,62 @@
// This fixes an issue with flexbox and button on iOS Safari. See #225
display: block;
}
// Generate Clear Button Colors
// --------------------------------------------------
// TODO primary activated is wrong
@each $color-name, $color-value in $colors {
$fg-color: color-shade($color-value);
.button-clear-#{$color-name} {
border-color: transparent;
background: transparent;
color: $fg-color;
&.activated {
opacity: 0.4;
background: 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-color;
background-color: $fg-color;
}
}
// Outline Clear Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors {
.button-outline-#{$color-name} {
$fg-color: color-shade($color-value, 5%);
@include button-outline($fg-color);
}
}

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

@@ -138,7 +138,7 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
// Generate Material Design Button Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-value in auxiliary-colors() {
@each $color-name, $color-value in $colors {
@include button-theme-md($color-name, $color-value);