From 922e1f17b8e4c34499c55b601acf6874e6ac406e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 23 Feb 2016 16:39:46 -0500
Subject: [PATCH] feat(windows): add segment component

references #5565
---
 ionic/components.wp.scss                  |  1 +
 ionic/components/segment/segment.ios.scss |  3 +
 ionic/components/segment/segment.md.scss  |  3 +
 ionic/components/segment/segment.scss     |  3 -
 ionic/components/segment/segment.wp.scss  | 86 +++++++++++++++++++++++
 5 files changed, 93 insertions(+), 3 deletions(-)
 create mode 100644 ionic/components/segment/segment.wp.scss

diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss
index 73a2f67dbe..c702695ae2 100644
--- a/ionic/components.wp.scss
+++ b/ionic/components.wp.scss
@@ -13,4 +13,5 @@
   "components/checkbox/checkbox.wp",
   "components/chip/chip.wp",
   "components/radio/radio.wp",
+  "components/segment/segment.wp",
   "components/toolbar/toolbar.wp";
diff --git a/ionic/components/segment/segment.ios.scss b/ionic/components/segment/segment.ios.scss
index f24239b536..62d552dcef 100644
--- a/ionic/components/segment/segment.ios.scss
+++ b/ionic/components/segment/segment.ios.scss
@@ -42,6 +42,9 @@ $segment-button-ios-toolbar-icon-line-height:   2.4rem !default;
   color: $segment-button-ios-bg-color-activated;
   background-color: $segment-button-ios-bg-color;
 
+  flex: 1;
+  width: 0;  
+
   ion-icon {
     font-size: $segment-button-ios-icon-size;
     line-height: $segment-button-ios-icon-line-height;
diff --git a/ionic/components/segment/segment.md.scss b/ionic/components/segment/segment.md.scss
index 6a22ff0915..d0c73892b9 100644
--- a/ionic/components/segment/segment.md.scss
+++ b/ionic/components/segment/segment.md.scss
@@ -31,6 +31,9 @@ $segment-button-md-icon-line-height:           $segment-button-md-line-height !d
   text-transform: uppercase;
   font-weight: 500;
 
+  flex: 1;
+  width: 0;  
+
   opacity: 0.7;
   color: $segment-button-md-text-color-activated;
   background-color: transparent;
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 0db5914adf..746506129f 100644
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -19,9 +19,6 @@ ion-segment {
   margin-left: 0;
   margin-right: 0;
 
-  flex: 1;
-  width: 0;
-
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
diff --git a/ionic/components/segment/segment.wp.scss b/ionic/components/segment/segment.wp.scss
new file mode 100644
index 0000000000..e55b9d504a
--- /dev/null
+++ b/ionic/components/segment/segment.wp.scss
@@ -0,0 +1,86 @@
+@import "../../globals.wp";
+@import "./segment";
+
+// Windows Segment
+// --------------------------------------------------
+
+$segment-button-wp-text-color-activated:       $toolbar-wp-text-color !default;
+
+$segment-button-wp-padding:                    0 6px !default;
+$segment-button-wp-height:                     4.0rem !default;
+$segment-button-wp-line-height:                4.0rem !default;
+$segment-button-wp-font-size:                  1.3rem !default;
+$segment-button-wp-text-transform:             uppercase !default;
+$segment-button-wp-font-weight:                bold !default;
+$segment-button-wp-icon-size:                  2.6rem !default;
+$segment-button-wp-icon-line-height:           $segment-button-wp-line-height !default;
+$segment-button-wp-background-color:           transparent !default;
+
+$segment-button-wp-opacity:                    0.7 !default;
+$segment-button-wp-opacity-activated:          1.0 !default;
+
+$segment-button-wp-buttons-justify-content:    flex-start !default;
+
+ion-segment {
+  justify-content: $segment-button-wp-buttons-justify-content;
+}
+
+.segment-button {
+  padding: $segment-button-wp-padding;
+
+  height: $segment-button-wp-height;
+  line-height: $segment-button-wp-line-height;
+
+  font-size: $segment-button-wp-font-size;
+  text-transform: $segment-button-wp-text-transform;
+  font-weight: $segment-button-wp-font-weight;
+
+  opacity: $segment-button-wp-opacity;
+  color: $segment-button-wp-text-color-activated;
+  background-color: $segment-button-wp-background-color;
+
+  ion-icon {
+    font-size: $segment-button-wp-icon-size;
+    line-height: $segment-button-wp-icon-line-height;
+  }
+}
+
+.toolbar {
+
+  ion-segment {
+    margin: 0 auto;
+  }
+
+  .segment-button.activated,
+  .segment-button.segment-activated {
+    opacity: $segment-button-wp-opacity-activated;
+  }
+
+}
+
+
+// Windows Segment Button Mixin
+// --------------------------------------------------
+
+@mixin wp-segment-button($color-name, $color-value) {
+
+  ion-segment[#{$color-name}] .segment-button {
+    color: $color-value;
+
+    &.activated,
+    &.segment-activated {
+      opacity: $segment-button-wp-opacity-activated;
+      border-color: $color-value;
+      color: $color-value;
+    }
+  }
+
+}
+
+
+// Windows Segment Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-wp {
+  @include wp-segment-button($color-name, $color-value);
+}