From 6d2b8c582e6248296ad2457cd7b836efa0db91de Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 23 Jul 2015 21:17:05 -0500 Subject: [PATCH] button icons --- ionic/components/button/button-fab.scss | 51 +++++++++++++++ ionic/components/button/button-icon.scss | 43 +++++++++++++ ionic/components/button/button.scss | 62 +------------------ ionic/components/button/button.ts | 14 +++-- ionic/components/button/extensions/ios.scss | 0 .../button/extensions/material.scss | 6 +- ionic/ionic.scss | 3 +- 7 files changed, 110 insertions(+), 69 deletions(-) create mode 100644 ionic/components/button/button-fab.scss create mode 100644 ionic/components/button/button-icon.scss delete mode 100644 ionic/components/button/extensions/ios.scss diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab.scss new file mode 100644 index 0000000000..fc61035738 --- /dev/null +++ b/ionic/components/button/button-fab.scss @@ -0,0 +1,51 @@ + +// FABulous Buttons (Floating Action Button from material) +// -------------------------------------------------- + +$button-fab-size: 56px; + + +button, +[button] { + + &[fab] { + position: absolute; + width: $button-fab-size; + height: $button-fab-size; + line-height: $button-fab-size; + min-width: 0; + vertical-align: middle; + + border-radius: 50%; + background-clip: padding-box; + + overflow: hidden; + + transition: .2s linear; + transition-property: background-color; + + font-size: 14px; + + &[fab-center] { + left: 50%; + margin-left: -$button-fab-size / 2; + } + &[fab-top] { + top: 16px; + } + &[fab-right] { + right: 16px; + } + &[fab-bottom] { + bottom: 16px; + } + &[fab-left] { + left: 16px; + } + + .icon { + flex: 1; + } + } + +} diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss new file mode 100644 index 0000000000..73e4e8512d --- /dev/null +++ b/ionic/components/button/button-icon.scss @@ -0,0 +1,43 @@ + +// Button Icons +// -------------------------------------------------- + + +button, +[button] { + + &.icon-left icon { + margin-left: -0.6rem; + padding-right: 0.6rem; + } + + &.icon-right icon { + margin-right: -0.6rem; + padding-left: 0.6rem; + } + + &.icon-only { + padding: 0; + + icon { + padding: 0 1.6rem; + } + } + + icon { + background: none; + border: none; + } + + &[large] icon { + margin-left: 0; + margin-right: 0; + } + + &[small] icon { + margin-left: 0; + margin-right: 0; + font-size: 1.4em; + } + +} diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 2ce3b1d45f..8b97c1ced7 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -8,19 +8,14 @@ $button-padding: 0 2rem !default; $button-height: 4.4rem !default; $button-border-width: 1px !default; $button-border-radius: 4px !default; -$button-icon-size: 2.5rem !default; $button-large-font-size: 2rem !default; $button-large-height: 5.4rem !default; $button-large-padding: 1.4rem !default; -$button-large-icon-size: 3.6rem !default; $button-small-font-size: 1.3rem !default; $button-small-height: 2.8rem !default; $button-small-padding: 1.1rem !default; -$button-small-icon-size: 2.1rem !default; - -$button-fab-size: 56px; $button-round-border-radius: 64px !default; $button-round-padding: 0 2.6rem !default; @@ -62,7 +57,7 @@ button, border: 1px solid #ccc; padding: $button-padding; min-height: $button-height; - // Default button has no background + background: transparent; text-align: center; @@ -70,21 +65,11 @@ button, border: transparent; border-radius: $button-border-radius; - &[icon] { - font-size: $button-icon-size; - background: none; - border: none; - } - &[large] { padding: 0 $button-large-padding; min-width: ($button-large-padding * 4); min-height: $button-large-height; font-size: $button-large-font-size; - - &[icon] { - font-size: $button-large-icon-size; - } } &[small] { @@ -92,10 +77,6 @@ button, min-width: ($button-small-padding * 3); min-height: $button-small-height; font-size: $button-small-font-size; - - &[icon] { - font-size: $button-small-icon-size; - } } @@ -154,47 +135,6 @@ button, padding: $button-round-padding; } - // FABulous buttons (Floating action button from material) - - &[fab] { - position: absolute; - width: $button-fab-size; - height: $button-fab-size; - line-height: $button-fab-size; - min-width: 0; - vertical-align: middle; - - border-radius: 50%; - background-clip: padding-box; - - overflow: hidden; - - transition: .2s linear; - transition-property: background-color; - - font-size: 14px; - - &[fab-center] { - left: 50%; - margin-left: -$button-fab-size/2; - } - &[fab-top] { - top: 16px; - } - &[fab-right] { - right: 16px; - } - &[fab-bottom] { - bottom: 16px; - } - &[fab-left] { - left: 16px; - } - - .icon { - flex: 1; - } - } } diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 7d351a169e..04320b30bf 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -9,14 +9,20 @@ import * as dom from '../../util/dom'; @Directive({ selector: 'button,[button]', host: { - '[class.icon-left]': 'icon.iconLeft', - '[class.icon-right]': 'icon.iconRight', - '[class.icon-only]': 'icon.iconOnly' + '[class.icon-left]': 'iconLeft', + '[class.icon-right]': 'iconRight', + '[class.icon-only]': 'iconOnly' } }) export class Button { + constructor() { + this.iconLeft = this.iconRight = this.iconOnly = false; + } + registerIcon(icon) { - this.icon = icon; + this.iconLeft = icon.iconLeft; + this.iconRight = icon.iconRight; + this.iconOnly = icon.iconOnly; } } diff --git a/ionic/components/button/extensions/ios.scss b/ionic/components/button/extensions/ios.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss index 96c9eef2b0..2a5c4eac44 100644 --- a/ionic/components/button/extensions/material.scss +++ b/ionic/components/button/extensions/material.scss @@ -33,15 +33,15 @@ $button-material-border-radius: 3px !default; } &[icon] { - font-size: $button-icon-size; + //font-size: $button-icon-size; } &[large][icon] { - font-size: $button-large-icon-size; + //font-size: $button-icon-large-size; } &[small][icon] { - font-size: $button-small-icon-size; + //font-size: $button-icon-small-size; } &[full] { diff --git a/ionic/ionic.scss b/ionic/ionic.scss index 1f1290afe0..4891314ae0 100755 --- a/ionic/ionic.scss +++ b/ionic/ionic.scss @@ -21,6 +21,8 @@ "components/aside/aside", "components/badge/badge", "components/button/button", + "components/button/button-icon", + "components/button/button-fab", "components/card/card", "components/checkbox/checkbox", "components/content/content", @@ -49,7 +51,6 @@ @import "components/toolbar/extensions/ios", "components/action-menu/extensions/ios", - "components/button/extensions/ios", "components/card/extensions/ios", "components/checkbox/extensions/ios", "components/content/extensions/ios",