From 04c79fab5cc26cb22b663e5bb3bd5ef69bba1010 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 3 Dec 2015 16:14:35 -0600 Subject: [PATCH] reset buttons --- ...utton-clear.scss => button-clear_OLD.scss} | 0 .../{button-fab.scss => button-fab_OLD.scss} | 0 ...{button-icon.scss => button-icon_OLD.scss} | 0 ...n-outline.scss => button-outline_OLD.scss} | 0 ...{button-size.scss => button-size_OLD.scss} | 0 ionic/components/button/button.scss | 107 ------------ ionic/components/button/button_OLD.scss | 158 ++++++++++++++++++ ionic/ionic.core.scss | 12 +- scripts/e2e/e2e.template.html | 2 +- 9 files changed, 165 insertions(+), 114 deletions(-) rename ionic/components/button/{button-clear.scss => button-clear_OLD.scss} (100%) rename ionic/components/button/{button-fab.scss => button-fab_OLD.scss} (100%) rename ionic/components/button/{button-icon.scss => button-icon_OLD.scss} (100%) rename ionic/components/button/{button-outline.scss => button-outline_OLD.scss} (100%) rename ionic/components/button/{button-size.scss => button-size_OLD.scss} (100%) create mode 100644 ionic/components/button/button_OLD.scss diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear_OLD.scss similarity index 100% rename from ionic/components/button/button-clear.scss rename to ionic/components/button/button-clear_OLD.scss diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab_OLD.scss similarity index 100% rename from ionic/components/button/button-fab.scss rename to ionic/components/button/button-fab_OLD.scss diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon_OLD.scss similarity index 100% rename from ionic/components/button/button-icon.scss rename to ionic/components/button/button-icon_OLD.scss diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline_OLD.scss similarity index 100% rename from ionic/components/button/button-outline.scss rename to ionic/components/button/button-outline_OLD.scss diff --git a/ionic/components/button/button-size.scss b/ionic/components/button/button-size_OLD.scss similarity index 100% rename from ionic/components/button/button-size.scss rename to ionic/components/button/button-size_OLD.scss diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index e40c489e60..24f490093e 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -1,8 +1,5 @@ @import "../../ionic.globals"; -// Button Variables -// -------------------------------------------------- - $button-font-size: 1.6rem !default; $button-margin: 0.4rem 0.2rem !default; $button-padding: 0 1em !default; @@ -18,9 +15,6 @@ $button-text-color: inverse($button-color) !default; $button-hover-opacity: 0.8 !default; -// Default Button -// -------------------------------------------------- - button, [button] { position: relative; @@ -29,17 +23,8 @@ button, flex-flow: row nowrap; align-items: center; justify-content: center; - - transition: background-color, opacity 100ms linear; - - margin: $button-margin; - padding: $button-padding; - min-height: $button-height; line-height: 1; - border: 1px solid #ccc; - border: transparent; - border-radius: $button-border-radius; font-size: $button-font-size; font-family: inherit; @@ -59,100 +44,8 @@ button, cursor: pointer; @include user-select-none(); @include appearance(none); - - background: $button-color; - color: $button-text-color; - - &:hover:not(.disable-hover) { - opacity: $button-hover-opacity; - text-decoration: none; - } - - &.activated { - opacity: 1; - background-color: $button-color-activated; - } - - - // Button Types - // -------------------------------------------------- - - &[block] { - display: flex; - clear: both; - margin-right: 0; - margin-left: 0; - width: 100%; - - &:after { - clear: both; - } - } - - &[full] { - width: 100%; - margin-right: 0; - margin-left: 0; - border-radius: 0; - border-right-width: 0; - border-left-width: 0; - - &[outline] { - border-radius: 0; - border-right-width: 0; - border-left-width: 0; - } - } - - &[round] { - border-radius: $button-round-border-radius; - padding: $button-round-padding; - } - - &[disabled] { - opacity: 0.4; - cursor: default !important; - pointer-events: none; - } - } a[button] { text-decoration: none; } - -[padding] > button[block]:first-child, -[padding] > [button][block]:first-child { - margin-top: 0; -} - - -// Default Button Color Mixin -// -------------------------------------------------- - -@mixin button-default($bg-color, $bg-color-activated, $text-color) { - background-color: $bg-color; - color: $text-color; - - &.activated { - background-color: $bg-color-activated; - } -} - - -// Generate Default Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors { - - button[#{$color-name}], - [button][#{$color-name}] { - - $bg-color: $color-value; - $bg-color-activated: color-shade($bg-color); - $text-color: inverse($bg-color); - @include button-default($bg-color, $bg-color-activated, $text-color); - - } - -} diff --git a/ionic/components/button/button_OLD.scss b/ionic/components/button/button_OLD.scss new file mode 100644 index 0000000000..e40c489e60 --- /dev/null +++ b/ionic/components/button/button_OLD.scss @@ -0,0 +1,158 @@ +@import "../../ionic.globals"; + +// Button Variables +// -------------------------------------------------- + +$button-font-size: 1.6rem !default; +$button-margin: 0.4rem 0.2rem !default; +$button-padding: 0 1em !default; +$button-height: 2.8em !default; +$button-border-radius: 4px !default; + +$button-round-padding: 0 2.6rem !default; +$button-round-border-radius: 64px !default; + +$button-color: color(primary) !default; +$button-color-activated: color-shade($button-color) !default; +$button-text-color: inverse($button-color) !default; +$button-hover-opacity: 0.8 !default; + + +// Default Button +// -------------------------------------------------- + +button, +[button] { + position: relative; + display: inline-flex; + flex-shrink: 0; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + + transition: background-color, opacity 100ms linear; + + margin: $button-margin; + padding: $button-padding; + min-height: $button-height; + line-height: 1; + + border: 1px solid #ccc; + border: transparent; + border-radius: $button-border-radius; + + font-size: $button-font-size; + font-family: inherit; + font-variant: inherit; + font-style: inherit; + + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + text-align: center; + text-transform: none; + + vertical-align: top; // the better option for most scenarios + vertical-align: -webkit-baseline-middle; // the best for those that support it + + cursor: pointer; + @include user-select-none(); + @include appearance(none); + + background: $button-color; + color: $button-text-color; + + &:hover:not(.disable-hover) { + opacity: $button-hover-opacity; + text-decoration: none; + } + + &.activated { + opacity: 1; + background-color: $button-color-activated; + } + + + // Button Types + // -------------------------------------------------- + + &[block] { + display: flex; + clear: both; + margin-right: 0; + margin-left: 0; + width: 100%; + + &:after { + clear: both; + } + } + + &[full] { + width: 100%; + margin-right: 0; + margin-left: 0; + border-radius: 0; + border-right-width: 0; + border-left-width: 0; + + &[outline] { + border-radius: 0; + border-right-width: 0; + border-left-width: 0; + } + } + + &[round] { + border-radius: $button-round-border-radius; + padding: $button-round-padding; + } + + &[disabled] { + opacity: 0.4; + cursor: default !important; + pointer-events: none; + } + +} + +a[button] { + text-decoration: none; +} + +[padding] > button[block]:first-child, +[padding] > [button][block]:first-child { + margin-top: 0; +} + + +// Default Button Color Mixin +// -------------------------------------------------- + +@mixin button-default($bg-color, $bg-color-activated, $text-color) { + background-color: $bg-color; + color: $text-color; + + &.activated { + background-color: $bg-color-activated; + } +} + + +// Generate Default Button Colors +// -------------------------------------------------- + +@each $color-name, $color-value in $colors { + + button[#{$color-name}], + [button][#{$color-name}] { + + $bg-color: $color-value; + $bg-color-activated: color-shade($bg-color); + $text-color: inverse($bg-color); + @include button-default($bg-color, $bg-color-activated, $text-color); + + } + +} diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss index 7907347d6a..440938a695 100644 --- a/ionic/ionic.core.scss +++ b/ionic/ionic.core.scss @@ -12,12 +12,12 @@ "components/toolbar/toolbar", "components/action-sheet/action-sheet", "components/badge/badge", - "components/button/button", - "components/button/button-clear", - "components/button/button-outline", - "components/button/button-size", - "components/button/button-icon", - "components/button/button-fab", + "components/button/button_OLD", + "components/button/button-clear_OLD", + "components/button/button-outline_OLD", + "components/button/button-size_OLD", + "components/button/button-icon_OLD", + "components/button/button-fab_OLD", "components/checkbox/checkbox", "components/icon/icon", "components/item/item", diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html index 01cd01b8ab..dedac953f5 100644 --- a/scripts/e2e/e2e.template.html +++ b/scripts/e2e/e2e.template.html @@ -4,7 +4,7 @@ Ionic E2E - +