diff --git a/ionic/components/segment/segment.ios.scss b/ionic/components/segment/segment.ios.scss index 3cf7a22996..ba66f9d215 100644 --- a/ionic/components/segment/segment.ios.scss +++ b/ionic/components/segment/segment.ios.scss @@ -4,27 +4,34 @@ // iOS Segment // -------------------------------------------------- -$segment-button-ios-bg-color: transparent !default; -$segment-button-ios-bg-color-activated: $toolbar-ios-active-color !default; +$segment-button-ios-bg-color: transparent !default; +$segment-button-ios-bg-color-activated: $toolbar-ios-active-color !default; -$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default; -$segment-button-ios-activated-transition: 100ms all linear !default; -$segment-button-ios-hover-transition: 100ms all linear !default; -$segment-button-ios-active-transition: 100ms all linear !default; -$segment-button-ios-hover-opacity: 0.1 !default; -$segment-button-ios-active-opacity: 0.16 !default; +$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default; +$segment-button-ios-activated-transition: 100ms all linear !default; +$segment-button-ios-hover-transition: 100ms all linear !default; +$segment-button-ios-active-transition: 100ms all linear !default; +$segment-button-ios-hover-opacity: 0.1 !default; +$segment-button-ios-active-opacity: 0.16 !default; -$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-font-size: 1.3rem !default; -$segment-button-ios-border-radius: 4px !default; +$segment-button-ios-border-width: 1px !default; +$segment-button-ios-height: 3.2rem !default; +$segment-button-ios-line-height: 3.0rem !default; +$segment-button-ios-font-size: 1.3rem !default; +$segment-button-ios-border-radius: 4px !default; +$segment-button-ios-icon-size: 2.6rem !default; +$segment-button-ios-icon-line-height: 2.8rem !default; -$segment-button-ios-toolbar-button-max-width: 100px !default; +$segment-button-ios-toolbar-button-max-width: 100px !default; +$segment-button-ios-toolbar-button-height: 2.6rem !default; +$segment-button-ios-toolbar-line-height: 2.5rem !default; +$segment-button-ios-toolbar-font-size: 1.2rem !default; +$segment-button-ios-toolbar-icon-size: 2.2rem !default; +$segment-button-ios-toolbar-icon-line-height: 2.4rem !default; .segment-button { - min-height: $segment-button-ios-min-height; + height: $segment-button-ios-height; line-height: $segment-button-ios-line-height; font-size: $segment-button-ios-font-size; @@ -35,6 +42,11 @@ $segment-button-ios-toolbar-button-max-width: 100px !default; color: $segment-button-ios-bg-color-activated; background-color: $segment-button-ios-bg-color; + ion-icon { + font-size: $segment-button-ios-icon-size; + line-height: $segment-button-ios-icon-line-height; + } + &.segment-activated { opacity: 1; color: $segment-button-ios-text-color; @@ -80,9 +92,14 @@ $segment-button-ios-toolbar-button-max-width: 100px !default; .segment-button { max-width: $segment-button-ios-toolbar-button-max-width; - min-height: 2.4rem; - line-height: 2.4rem; - font-size: 1.2rem; + height: $segment-button-ios-toolbar-button-height; + line-height: $segment-button-ios-toolbar-line-height; + font-size: $segment-button-ios-toolbar-font-size; + + ion-icon { + font-size: $segment-button-ios-toolbar-icon-size; + line-height: $segment-button-ios-toolbar-icon-line-height; + } } } diff --git a/ionic/components/segment/segment.md.scss b/ionic/components/segment/segment.md.scss index fd66826a99..6a22ff0915 100644 --- a/ionic/components/segment/segment.md.scss +++ b/ionic/components/segment/segment.md.scss @@ -11,9 +11,11 @@ $segment-button-md-border-bottom-width: 2px !default; $segment-button-md-border-bottom-color: rgba(#000000, 0.10) !default; $segment-button-md-padding: 0 6px !default; -$segment-button-md-min-height: 4.0rem !default; +$segment-button-md-height: 4.2rem !default; $segment-button-md-line-height: 4.0rem !default; $segment-button-md-font-size: 1.2rem !default; +$segment-button-md-icon-size: 2.6rem !default; +$segment-button-md-icon-line-height: $segment-button-md-line-height !default; .segment-button { @@ -22,7 +24,7 @@ $segment-button-md-font-size: 1.2rem !default; border-bottom-style: solid; border-bottom-color: $segment-button-md-border-bottom-color; - min-height: $segment-button-md-min-height; + height: $segment-button-md-height; line-height: $segment-button-md-line-height; font-size: $segment-button-md-font-size; @@ -34,6 +36,11 @@ $segment-button-md-font-size: 1.2rem !default; background-color: transparent; transition: 100ms all linear; + ion-icon { + font-size: $segment-button-md-icon-size; + line-height: $segment-button-md-icon-line-height; + } + &.activated, &.segment-activated { border-color: $segment-button-md-border-color-activated; diff --git a/ionic/components/segment/test/basic/index.ts b/ionic/components/segment/test/basic/index.ts index a431191455..7898550f4e 100644 --- a/ionic/components/segment/test/basic/index.ts +++ b/ionic/components/segment/test/basic/index.ts @@ -9,15 +9,17 @@ import {App, IonicApp} from '../../../../../ionic/ionic'; directives: [FORM_DIRECTIVES] }) class MyApp { - constructor(fb: FormBuilder, app: IonicApp) { - this.app = app; + relationship: string = 'enemies'; + modelStyle: string = 'B'; + appType: string = 'free'; + icons: string = 'camera'; + + myForm; + + constructor(fb: FormBuilder) { this.myForm = fb.group({ mapStyle: ['hybrid', Validators.required] }); - - this.relationship = 'enemies'; - this.modelStyle = 'B'; - this.appType = 'free'; } onSegmentChanged(segmentButton) { diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html index aee8242f50..bd439bb22e 100644 --- a/ionic/components/segment/test/basic/main.html +++ b/ionic/components/segment/test/basic/main.html @@ -15,12 +15,12 @@ - - - Something + + + - - Else + + @@ -80,6 +80,15 @@

Model Style: Model {{ modelStyle }}

+ + + + + + + + +