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

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

@ -62,12 +62,7 @@ a.button {
// --------------------------------------------------
.button-full {
margin-right: 0;
margin-left: 0;
width: 100%;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
@ -79,27 +74,10 @@ a.button {
border-radius: $button-round-border-radius;
}
// Full Outline Button
// --------------------------------------------------
// TODO
// button should have classes:
// button, button-primary, button-secondary, etc.
// button holds all styling with default primary color(will this affect outline/clear?) and
// the other classes change the color
//
// button-clear should have classes:
// button-clear, button-clear-primary, button-clear-secondary, etc.
// button-clear holds all clear styling with default primary color and
// the other classes change the color
//
// button-outline should have classes:
// button-outline, button-outline-primary, button-outline-secondary, etc.
// button-outline holds all outline styling with default primary color and
// the other classes change the color
//
// button-block should stand alone
// button-full should stand alone
// button-round should stand alone
// button-disabled should stand alone(?)
// button-sizes should stand alone (button-small, button-large, etc)
// button-fab errrrr
.button-full.button-outline {
border-left-width: 0;
border-right-width: 0;
}

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

@ -20,6 +20,7 @@ $button-ios-large-padding: 1.0em !default;
$button-ios-small-font-size: 1.3rem !default;
$button-ios-small-height: 2.1em !default;
$button-ios-small-padding: 0.9em !default;
$button-ios-small-icon-font-size: 1.3em !default;
// iOS Default Button
@ -84,6 +85,9 @@ $button-ios-small-padding: 0.9em !default;
font-size: $button-ios-small-font-size;
}
.button-small.button-icon-only icon {
font-size: $button-ios-small-icon-font-size;
}
// iOS Block Button
// --------------------------------------------------
@ -91,6 +95,19 @@ $button-ios-small-padding: 0.9em !default;
.button-block {
// This fixes an issue with flexbox and button on iOS Safari. See #225
display: block;
line-height: 2.8em;
}
// iOS Full Button
// --------------------------------------------------
.button-full {
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-left: none;
border-right: none;
}
@ -138,6 +155,11 @@ $button-ios-small-padding: 0.9em !default;
color: color-shade($button-ios-color);
background-color: transparent;
&.activated {
opacity: 0.4;
background-color: transparent;
}
&:hover:not(.disable-hover) {
opacity: 0.6;
color: color-shade($button-ios-color);
@ -167,6 +189,14 @@ $button-ios-small-padding: 0.9em !default;
}
}
// iOS Round Button
// --------------------------------------------------
.button-round {
padding: $button-round-padding;
border-radius: $button-round-border-radius;
}
// Generate iOS Button Colors
// --------------------------------------------------

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) {