diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 2df50c1d4d..129f26b846 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -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; +} diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss index c49dd925f8..55c2ab35ce 100644 --- a/ionic/components/button/modes/ios.scss +++ b/ionic/components/button/modes/ios.scss @@ -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 // -------------------------------------------------- diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss index 5c3e9c5839..98b84155ec 100644 --- a/ionic/components/button/modes/md.scss +++ b/ionic/components/button/modes/md.scss @@ -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) {