From bf8d3073dce5246cb1522f33ea3acc8dd9a4356b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 27 Oct 2015 13:25:25 -0400 Subject: [PATCH] refactor(segment): cleaned up both iOS and md mode styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Converted values to some sass variables, moved transition to after button tap, added border bottom for md mode, reorganized the sass variables by the order they’re used, removed the use of !important, added iOS hover background-color. Closes #283 --- ionic/components/search-bar/search-bar.ts | 1 - ionic/components/segment/modes/ios.scss | 32 +++++++++++++------ ionic/components/segment/modes/md.scss | 15 +++++---- ionic/components/segment/segment.scss | 4 ++- ionic/components/segment/test/basic/index.ts | 3 +- ionic/components/segment/test/basic/main.html | 18 +++++++++++ 6 files changed, 55 insertions(+), 18 deletions(-) diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index 60bfb3b0ce..fb0c581460 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/search-bar/search-bar.ts @@ -92,7 +92,6 @@ export class SearchBar extends Ion { } inputChanged(event) { - console.log('input changed'); this.writeValue(event.target.value); this.onChange(event.target.value); } diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss index b8ed2d29ff..120fd7b3b0 100644 --- a/ionic/components/segment/modes/ios.scss +++ b/ionic/components/segment/modes/ios.scss @@ -2,26 +2,31 @@ // iOS Segment // -------------------------------------------------- +$segment-button-ios-border-width: 1px !default; +$segment-button-ios-min-height: 3.0rem !default; +$segment-button-ios-line-height: 3.0rem !default; $segment-button-ios-bg-color: transparent !default; -$segment-button-ios-bg-color-activated: color(primary) !default; $segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default; -$segment-button-ios-hover-opacity: 0.8 !default; +$segment-button-ios-font-size: 1.3rem !default; + +$segment-button-ios-bg-color-activated: color(primary) !default; +$segment-button-ios-activated-transition: 100ms all linear !default; +$segment-button-ios-hover-opacity: 0.16 !default; .ion-segment { button, [button] { - border-width: 1px; + border-width: $segment-button-ios-border-width; border-style: solid; - transition: 100ms all linear; - - min-height: 3.3rem; - line-height: 3.3rem; + min-height: $segment-button-ios-min-height; + line-height: $segment-button-ios-line-height; background-color: $segment-button-ios-bg-color; color: $segment-button-ios-text-color; + font-size: $segment-button-ios-font-size; &[outline] { border: 1px solid $segment-button-ios-bg-color-activated; @@ -32,6 +37,11 @@ $segment-button-ios-hover-opacity: 0.8 !default; opacity: 1; color: $segment-button-ios-text-color; background-color: $segment-button-ios-bg-color-activated; + transition: $segment-button-ios-activated-transition; + } + + &:hover:not(.activated) { + background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity); } } @@ -71,8 +81,12 @@ $segment-button-ios-hover-opacity: 0.8 !default; &.activated { opacity: 1; - color: $text-color !important; - background-color: $bg-color !important; + color: $text-color; + background-color: $bg-color; + } + + &:hover:not(.activated) { + background-color: rgba($bg-color, $segment-button-ios-hover-opacity); } } } diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss index 9eaf9895aa..e3398d5446 100644 --- a/ionic/components/segment/modes/md.scss +++ b/ionic/components/segment/modes/md.scss @@ -2,11 +2,13 @@ // iOS Segment // -------------------------------------------------- +$segment-button-md-font-size: 1.2rem !default; +$segment-button-md-min-height: 4.0rem !default; +$segment-button-md-line-height: 4.0rem !default; + $segment-button-md-text-color-activated: color(primary) !default; $segment-button-md-border-color-activated: color(primary) !default; - -$segment-button-md-min-height: 5.0rem; -$segment-button-md-line-height: 5.0rem; +$segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default; .ion-segment { @@ -15,6 +17,7 @@ $segment-button-md-line-height: 5.0rem; [button] { border-width: 0; transition: 100ms all linear; + font-size: $segment-button-md-font-size; min-height: $segment-button-md-min-height; line-height: $segment-button-md-line-height; @@ -26,7 +29,7 @@ $segment-button-md-line-height: 5.0rem; } border-radius: 0; - border-bottom: 2px solid transparent; + border-bottom: $segment-button-md-border-bottom; } } @@ -49,8 +52,8 @@ $segment-button-md-line-height: 5.0rem; &.activated { opacity: 1; - color: $bg-color !important; - border-color: $bg-color !important; + color: $bg-color; + border-color: $bg-color; } } } diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss index a4a7cd74a9..454970a783 100644 --- a/ionic/components/segment/segment.scss +++ b/ionic/components/segment/segment.scss @@ -2,6 +2,8 @@ // Segment // -------------------------------------------------- +$segment-button-padding: 0 16px !default; + ion-segment { display: block; @@ -22,7 +24,7 @@ ion-segment { display: block; overflow: hidden; - padding: 0 16px; + padding: $segment-button-padding; width: 0; border-width: 1px 0px 1px 1px; diff --git a/ionic/components/segment/test/basic/index.ts b/ionic/components/segment/test/basic/index.ts index 1f2cdfc02d..7d08725657 100644 --- a/ionic/components/segment/test/basic/index.ts +++ b/ionic/components/segment/test/basic/index.ts @@ -13,7 +13,8 @@ class MyApp { this.myForm = fb.group({ mapStyle: ['hybrid', Validators.required] }); - console.log(this.myForm); + + this.modelStyle = 'B'; } doSubmit(event) { diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html index d8d1894608..f4e78deb60 100644 --- a/ionic/components/segment/test/basic/main.html +++ b/ionic/components/segment/test/basic/main.html @@ -40,4 +40,22 @@

Satellite!!

+ +
+ +

NgModel

+ + + + Model A + + + Model B + + + Model C + + + + Model Style: Model {{ modelStyle }}