javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(range): update the styling for all modes

Browse Source 
references #5422
This commit is contained in:
Brandy Carney
2016-05-31 16:11:47 -04:00
parent d24b080cb7
commit 061af93b3c
5 changed files with 59 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/range/range.ios.scss
View File

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

32
src/components/range/range.md.scss
View File

@ -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,6 +126,8 @@ 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;
@ -124,7 +135,7 @@ ion-range {
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;
}
}

1
src/components/range/range.ts
View File

@ -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],

27
src/components/range/range.wp.scss
View File

@ -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;
}
}

7
src/components/range/test/basic/page1.html
View File

@ -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>