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 @@