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

refactor(button): button[clear] :hover

Browse Source 
Closes #145
This commit is contained in:
Adam Bradley
2015-09-21 22:09:43 -05:00
parent 938ac117a9
commit dd47e93b0b
1 changed files with 23 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,47 +2,43 @@
// Clear Button // Clear Button
// -------------------------------------------------- // --------------------------------------------------
button, button[clear],
[button] { [button][clear] {
border-color: transparent;
background: transparent;
color: darken-or-lighten($button-color);
&[clear] { &.activated {
border-color: transparent; opacity: 0.4;
background: transparent;
color: darken-or-lighten($button-color);
&.activated {
opacity: 0.4;
}
} }
} }
.enable-hover button[clear]:hover,
// Clear Button Color Mixin .enable-hover [button][clear]:hover {
// -------------------------------------------------- opacity: 0.6;
color: darken-or-lighten($button-color);
@mixin button-clear($fg-color) {
&[clear] {
border-color: transparent;
background: transparent;
color: $fg-color;
}
} }
// Generate Clear Button Colors // Generate Clear Button Colors
// -------------------------------------------------- // --------------------------------------------------
@each $color, $value in auxiliary-colors() { @each $color-name, $color-value in auxiliary-colors() {
button[#{$color}], $fg-color: darken-or-lighten($color-value);
[button][#{$color}] {
$fg-color: darken-or-lighten($value); button[clear][#{$color-name}],
@include button-clear($fg-color); [button][clear][#{$color-name}] {
border-color: transparent;
background: transparent;
color: $fg-color;
}
.enable-hover button[clear][#{$color-name}]:hover,
.enable-hover [button][clear][#{$color-name}]:hover {
color: darken-or-lighten($fg-color);
} }
} }