fix(range): update the styling for all modes

references #5422
ionic-team · May 31, 2016 · 061af93 · 061af93
1 parent d24b080
commit 061af93
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 28 deletions.
diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss
@@ -3,7 +3,8 @@
 // iOS Range
 // --------------------------------------------------
 
-$range-ios-padding:                           8px 16px !default;
+$range-ios-padding-vertical:                  8px !default;
+$range-ios-padding-horizontal:                16px !default;
 
 $range-ios-slider-height:                     42px !default;
 
@@ -20,15 +21,16 @@ $range-ios-knob-box-shadow:                   0 3px 1px rgba(0, 0, 0, 0.1), 0 4p
 $range-ios-knob-border-radius:                50% !default;
 $range-ios-knob-background-color:             #fff !default;
 
-$range-ios-tick-width:                        6px !default;
-$range-ios-tick-height:                       $range-ios-tick-width !default;
+$range-ios-tick-width:                        $range-ios-bar-height !default;
+$range-ios-tick-height:                       8px !default;
+$range-ios-tick-border-radius:                0 !default;
 $range-ios-tick-background-color:             $range-ios-bar-background-color !default;
 $range-ios-tick-active-background-color:      $range-ios-bar-active-background-color !default;
 
 $range-ios-pin-background-color:              transparent !default;
 $range-ios-pin-color:                         $text-ios-color !default;
 $range-ios-pin-font-size:                     12px !default;
-
+$range-ios-pin-padding:                       8px !default;
 
 .item-range .item-inner {
   overflow: visible;
@@ -48,7 +50,11 @@ ion-range {
   position: relative;
   display: block;
 
-  padding: $range-ios-padding;
+  padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
+}
+
+.range-has-pin {
+  padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
 }
 
 .range-slider {
@@ -128,7 +134,7 @@ ion-range {
   width: $range-ios-tick-width;
   height: $range-ios-tick-height;
 
-  border-radius: 50%;
+  border-radius: $range-ios-tick-border-radius;
 
   background: $range-ios-tick-background-color;
 
@@ -144,7 +150,7 @@ ion-range {
   top: -20px;
   display: inline-block;
 
-  padding: 8px;
+  padding: $range-ios-pin-padding;
 
   min-width: 28px;
 

diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
@@ -3,7 +3,8 @@
 // Material Design Range
 // --------------------------------------------------
 
-$range-md-padding:                           8px !default;
+$range-md-padding-vertical:                  8px !default;
+$range-md-padding-horizontal:                8px !default;
 
 $range-md-slider-height:                     42px !default;
 
@@ -18,14 +19,16 @@ $range-md-knob-width:                        12px !default;
 $range-md-knob-height:                       $range-md-knob-width !default;
 $range-md-knob-background-color:             $range-md-bar-active-background-color !default;
 
-$range-md-tick-width:                        0 !default;
+$range-md-tick-width:                        2px !default;
 $range-md-tick-height:                       $range-md-tick-width !default;
-$range-md-tick-background-color:             $range-md-bar-background-color !default;
-$range-md-tick-active-background-color:      $range-md-bar-active-background-color !default;
+$range-md-tick-border-radius:                50% !default;
+$range-md-tick-background-color:             #000 !default;
+$range-md-tick-active-background-color:      $range-md-tick-background-color !default;
 
 $range-md-pin-background-color:              $range-md-bar-active-background-color !default;
 $range-md-pin-color:                         color-contrast($colors-md, $range-md-bar-active-background-color) !default;
 $range-md-pin-font-size:                     12px !default;
+$range-md-pin-padding:                       8px !default;
 
 
 .item-range .item-inner {
@@ -46,7 +49,11 @@ ion-range {
   position: relative;
   display: block;
 
-  padding: $range-md-padding;
+  padding: $range-md-padding-vertical $range-md-padding-horizontal;
+}
+
+.range-has-pin {
+  padding-top: $range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding;
 }
 
 .range-slider {
@@ -102,6 +109,8 @@ ion-range {
 
 .range-knob {
   position: absolute;
+  z-index: 2;
+
   top: ($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2);
   left: ($range-md-hit-width / 2) - ($range-md-knob-width / 2);
 
@@ -117,14 +126,16 @@ ion-range {
 
 .range-tick {
   position: absolute;
+  z-index: 1;
+
   top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);
 
   margin-left: ($range-md-tick-width / 2) * -1;
 
   width: $range-md-tick-width;
   height: $range-md-tick-height;
 
-  border-radius: 50%;
+  border-radius: $range-md-tick-border-radius;
 
   background: $range-md-tick-background-color;
 
@@ -140,11 +151,11 @@ ion-range {
   top: -20px;
   display: inline-block;
 
-  padding: 8px;
+  padding: $range-md-pin-padding;
 
   min-width: 28px;
 
-  border-radius: 50px;
+  border-radius: 50%;
 
   font-size: $range-md-pin-font-size;
 
@@ -166,14 +177,15 @@ ion-range {
   transform: scale(1.5);
 }
 
-// Generate iOS Range Colors
+// Generate Material Design Range Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   ion-range[#{$color-name}] {
     .range-bar-active,
-    .range-knob {
+    .range-knob,
+    .range-pin {
       background: $color-base;
     }
   }

diff --git a/src/components/range/range.ts b/src/components/range/range.ts
@@ -127,6 +127,7 @@ export class RangeKnob {
   host: {
     '[class.range-disabled]': '_disabled',
     '[class.range-pressed]': '_pressed',
+    '[class.range-has-pin]': '_pin',
   },
   directives: [RangeKnob],
   providers: [RANGE_VALUE_ACCESSOR],

diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss
@@ -3,7 +3,8 @@
 // Windows Range
 // --------------------------------------------------
 
-$range-wp-padding:                           8px !default;
+$range-wp-padding-vertical:                  8px !default;
+$range-wp-padding-horizontal:                8px !default;
 
 $range-wp-slider-height:                     42px !default;
 
@@ -19,14 +20,16 @@ $range-wp-knob-height:                       $range-wp-knob-width * 3 !default;
 $range-wp-knob-background-color:             $range-wp-bar-active-background-color !default;
 $range-wp-knob-border-radius:                $range-wp-knob-width / 2 !default;
 
-$range-wp-tick-width:                        0 !default;
-$range-wp-tick-height:                       $range-wp-tick-width !default;
+$range-wp-tick-width:                        $range-wp-bar-height !default;
+$range-wp-tick-height:                       $range-wp-tick-width * 3 !default;
+$range-wp-tick-border-radius:                $range-wp-knob-width / 2 !default;
 $range-wp-tick-background-color:             $range-wp-bar-background-color !default;
 $range-wp-tick-active-background-color:      $range-wp-bar-active-background-color !default;
 
 $range-wp-pin-background-color:              $range-wp-bar-active-background-color !default;
 $range-wp-pin-color:                         color-contrast($colors-wp, $range-wp-bar-active-background-color) !default;
 $range-wp-pin-font-size:                     12px !default;
+$range-wp-pin-padding:                       8px !default;
 
 
 .item-range .item-inner {
@@ -47,7 +50,11 @@ ion-range {
   position: relative;
   display: block;
 
-  padding: $range-wp-padding;
+  padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
+}
+
+.range-has-pin {
+  padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding;
 }
 
 .range-slider {
@@ -125,7 +132,7 @@ ion-range {
   width: $range-wp-tick-width;
   height: $range-wp-tick-height;
 
-  border-radius: 50%;
+  border-radius: $range-wp-tick-border-radius;
 
   background: $range-wp-tick-background-color;
 
@@ -138,10 +145,10 @@ ion-range {
 
 .range-pin {
   position: relative;
-  top: -20px;
+  top: -24px;
   display: inline-block;
 
-  padding: 8px;
+  padding: $range-wp-pin-padding;
 
   min-width: 28px;
 
@@ -163,14 +170,16 @@ ion-range {
   transform: translate3d(0, 0, 0) scale(1);
 }
 
-// Generate iOS Range Colors
+// Generate Windows Range Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
   ion-range[#{$color-name}] {
     .range-bar-active,
-    .range-knob {
+    .range-tick-active,
+    .range-knob,
+    .range-pin {
       background: $color-base;
     }
   }

diff --git a/src/components/range/test/basic/page1.html b/src/components/range/test/basic/page1.html
@@ -18,6 +18,9 @@
 <ion-content>
 
   <ion-list>
+    <ion-item>
+      <ion-range [(ngModel)]="singleValue" danger pin="true"></ion-range>
+    </ion-item>
 
     <ion-item>
       <ion-label>no init value, default min/max, {{singleValue}}</ion-label>
@@ -38,7 +41,7 @@
 
     <ion-item>
       <ion-label>step=100, snaps, {{singleValue4}}</ion-label>
-      <ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="singleValue4"></ion-range>
+      <ion-range min="1000" max="2000" step="100" snaps="true" secondary [(ngModel)]="singleValue4"></ion-range>
     </ion-item>
 
     <ion-item>
@@ -53,7 +56,7 @@
 
     <ion-item>
       <ion-label>pin, {{singleValue}}</ion-label>
-      <ion-range [(ngModel)]="singleValue" pin="true"></ion-range>
+      <ion-range [(ngModel)]="singleValue" danger pin="true"></ion-range>
     </ion-item>
 
     <ion-item>