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

refactor(button): fixed UI issues with new classes

Browse Source 
Removed my long TODO comments. References #689
This commit is contained in:
Brandy Carney
2015-12-07 14:30:26 -05:00
parent 3fa93ac815
commit ae19f65229
3 changed files with 58 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,8 +4,8 @@
// Material Design Button
// --------------------------------------------------
$button-md-margin: 0.4rem 0.2rem !default;
$button-md-padding: 0 1.1em !default;
$button-md-margin: 0.4rem 0.2rem !default;
$button-md-padding: 0 1.1em !default;
$button-md-font-size: 1.4rem !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;
@ -32,6 +32,7 @@ $button-md-large-padding: 1.0em !default;
$button-md-small-font-size: 1.3rem !default;
$button-md-small-height: 2.1em !default;
$button-md-small-padding: 0.9em !default;
$button-md-small-icon-font-size: 1.4em !default;
// Material Design Default Button
@ -66,6 +67,7 @@ $button-md-small-padding: 0.9em !default;
&.activated {
box-shadow: $button-md-box-shadow-active;
background-color: $button-md-color-activated;
}
}
@ -84,6 +86,7 @@ $button-md-small-padding: 0.9em !default;
&.activated {
opacity: 1;
background-color: $bg-color-activated;
}
}
@ -105,12 +108,20 @@ $button-md-small-padding: 0.9em !default;
font-size: $button-md-small-font-size;
}
.button-small.button-icon-only icon {
font-size: $button-md-small-icon-font-size;
}
// Material Design Full Button
// --------------------------------------------------
.button-full {
border-radius: 0;
margin-right: 0;
margin-left: 0;
border-right-width: 0;
border-left-width: 0;
}
@ -127,6 +138,7 @@ $button-md-small-padding: 0.9em !default;
opacity: 1;
color: $background-md-color;
background-color: $button-md-color;
box-shadow: none;
}
md-ripple {
@ -166,8 +178,12 @@ $button-md-small-padding: 0.9em !default;
color: color-shade($button-md-color);
&.activated {
opacity: 0.4;
background-color: $button-md-clear-active-background-color;
box-shadow: none;
}
&:hover:not(.disable-hover) {
color: color-shade($button-md-color);
}
}
@ -183,9 +199,10 @@ $button-md-small-padding: 0.9em !default;
background-color: transparent;
color: $fg-color;
&.activated {
opacity: 0.4;
background-color: transparent;
background-color: $button-md-clear-active-background-color;
box-shadow: none;
}
&:hover:not(.disable-hover) {