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

refactor(color): create color-shade mixin

Browse Source 
Closes #173
This commit is contained in:
Adam Bradley
2015-11-23 15:45:50 -06:00
parent bc8ff4070f
commit 339e5ea52e
4 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ button[clear],
[button][clear] { [button][clear] {
border-color: transparent; border-color: transparent;
background: transparent; background: transparent;
color: darken-or-lighten($button-color); color: color-shade($button-color);
&.activated { &.activated {
opacity: 0.4; opacity: 0.4;
@ -16,7 +16,7 @@ button[clear],
&:hover:not(.disable-hover) { &:hover:not(.disable-hover) {
opacity: 0.6; opacity: 0.6;
color: darken-or-lighten($button-color); color: color-shade($button-color);
} }
} }
@ -27,7 +27,7 @@ button[clear],
@each $color-name, $color-value in auxiliary-colors() { @each $color-name, $color-value in auxiliary-colors() {
$fg-color: darken-or-lighten($color-value); $fg-color: color-shade($color-value);
button[clear][#{$color-name}], button[clear][#{$color-name}],
[button][clear][#{$color-name}] { [button][clear][#{$color-name}] {
@ -36,7 +36,7 @@ button[clear],
color: $fg-color; color: $fg-color;
&:hover:not(.disable-hover) { &:hover:not(.disable-hover) {
color: darken-or-lighten($fg-color); color: color-shade($fg-color);
} }
} }

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

@ -48,7 +48,7 @@ button,
button[#{$color-name}], button[#{$color-name}],
[button][#{$color-name}] { [button][#{$color-name}] {
$fg-color: darken-or-lighten($color-value, 5%); $fg-color: color-shade($color-value, 5%);
@include button-outline($fg-color); @include button-outline($fg-color);
} }

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

@ -13,7 +13,7 @@ $button-round-padding: 0 2.6rem !default;
$button-round-border-radius: 64px !default; $button-round-border-radius: 64px !default;
$button-color: color(primary) !default; $button-color: color(primary) !default;
$button-color-activated: darken-or-lighten($button-color) !default; $button-color-activated: color-shade($button-color) !default;
$button-text-color: inverse($button-color) !default; $button-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.8 !default; $button-hover-opacity: 0.8 !default;
@ -149,7 +149,7 @@ a[button] {
[button][#{$color-name}] { [button][#{$color-name}] {
$bg-color: $color-value; $bg-color: $color-value;
$bg-color-activated: darken-or-lighten($bg-color); $bg-color-activated: color-shade($bg-color);
$text-color: inverse($bg-color); $text-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $text-color); @include button-default($bg-color, $bg-color-activated, $text-color);

35
ionic/util/functions.scss
View File

@ -3,37 +3,36 @@
// -------------------------------------------------- // --------------------------------------------------
@function inverse($color-value) { @function inverse($color-value) {
@if (lightness($color-value) > 70) { $lightness: lightness($color-value);
@return #000; $red: red($color-value);
} $green: green($color-value);
@else {
@return #fff; @if ($lightness > 65 or $green > 220 or ($red > 240 and $green > 180)) {
@return black;
} }
@return white;
} }
@function darken-or-lighten($color-value, $amount:8%) {
// lightness is a percent value, 0% darkest, 100% lightest
$lightness-percent: lightness($color-value);
@function color-shade($color-value, $amount:8%) {
$lightness: lightness($color-value);
@if ($lightness-percent > 80) { $shade: white;
// really light foreground color, so really darken it up
@return darken($color-value, ($amount * 2)); @if ($lightness > 50) {
$shade: black;
} }
@if ($lightness-percent < 35) { @return mix($shade, $color-value, $amount);
// dark foreground color, so light it up
@return lighten($color-value, $amount * 2);
}
// default to darken
@return darken($color-value, $amount);
} }
@function color($color-name) { @function color($color-name) {
@return map-get($colors, $color-name); @return map-get($colors, $color-name);
} }
@function auxiliary-colors() { @function auxiliary-colors() {
// get a map of all the colors, except "primary" // get a map of all the colors, except "primary"
@return map-remove($colors, primary); @return map-remove($colors, primary);