Skip to content

Commit

Permalink
fix(range): update the styling for all modes
Browse files Browse the repository at this point in the history 
references #5422
  • Loading branch information
@brandyscarney
brandyscarney committed May 31, 2016
1 parent d24b080 commit 061af93
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 28 deletions.
20 changes: 13 additions & 7 deletions src/components/range/range.ios.scss
View file
Expand Up @@ -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;

Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;

Expand All @@ -144,7 +150,7 @@ ion-range {
top: -20px;
display: inline-block;

padding: 8px;
padding: $range-ios-pin-padding;

min-width: 28px;

Expand Down
32 changes: 22 additions & 10 deletions src/components/range/range.md.scss
View file
Expand Up @@ -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;

Expand All @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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);

Expand All @@ -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;

Expand All @@ -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;

Expand All @@ -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;
}
}
Expand Down
1 change: 1 addition & 0 deletions src/components/range/range.ts
View file
Expand Up @@ -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],
Expand Down
27 changes: 18 additions & 9 deletions src/components/range/range.wp.scss
View file
Expand Up @@ -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;

Expand All @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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;

Expand All @@ -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;

Expand All @@ -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;
}
}
Expand Down
7 changes: 5 additions & 2 deletions src/components/range/test/basic/page1.html
View file
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 061af93

Please sign in to comment.