refactor(segment): increase icon size inside of segment buttons

closes #5330
ionic-team · Feb 13, 2016 · 7249cb3 · 7249cb3
1 parent 7aabd0f
commit 7249cb3
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 34 deletions.
diff --git 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-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-toolbar-button-max-width: 100px !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-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-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
@@ -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
@@ -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
@@ -15,12 +15,12 @@
       <ion-icon name="search"></ion-icon>
     </button>
   </ion-buttons>
-  <ion-segment secondary>
-    <ion-segment-button value="something">
-      Something
+  <ion-segment [(ngModel)]="icons" secondary>
+    <ion-segment-button value="camera">
+      <ion-icon name="camera"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button value="else">
-      Else
+    <ion-segment-button value="bookmark">
+      <ion-icon name="bookmark"></ion-icon>
     </ion-segment-button>
   </ion-segment>
 </ion-toolbar>
@@ -80,6 +80,15 @@ <h4>Model style: NgModel</h4>
   </ion-segment>
 
   <p>Model Style: <b>Model {{ modelStyle }}</b></p>
+
+  <ion-segment [(ngModel)]="icons">
+    <ion-segment-button value="camera">
+      <ion-icon name="camera"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="bookmark">
+      <ion-icon name="bookmark"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
 </ion-content>
 
 <ion-toolbar position="bottom" primary>