javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 21:15:24 +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 // 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; $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-border-radius: 50% !default;
$range-ios-knob-background-color: #fff !default; $range-ios-knob-background-color: #fff !default;
$range-ios-tick-width: 6px !default; $range-ios-tick-width: $range-ios-bar-height !default;
$range-ios-tick-height: $range-ios-tick-width !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-background-color: $range-ios-bar-background-color !default;
$range-ios-tick-active-background-color: $range-ios-bar-active-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-background-color: transparent !default;
$range-ios-pin-color: $text-ios-color !default; $range-ios-pin-color: $text-ios-color !default;
$range-ios-pin-font-size: 12px !default; $range-ios-pin-font-size: 12px !default;
$range-ios-pin-padding: 8px !default;
.item-range .item-inner { .item-range .item-inner {
overflow: visible; overflow: visible;
@ -48,7 +50,11 @@ ion-range {
position: relative; position: relative;
display: block; 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 { .range-slider {
@ -128,7 +134,7 @@ ion-range {
width: $range-ios-tick-width; width: $range-ios-tick-width;
height: $range-ios-tick-height; height: $range-ios-tick-height;
border-radius: 50%; border-radius: $range-ios-tick-border-radius;
background: $range-ios-tick-background-color; background: $range-ios-tick-background-color;
@ -144,7 +150,7 @@ ion-range {
top: -20px; top: -20px;
display: inline-block; display: inline-block;
padding: 8px; padding: $range-ios-pin-padding;
min-width: 28px; min-width: 28px;

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

@ -3,7 +3,8 @@
// Material Design Range // 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; $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-height: $range-md-knob-width !default;
$range-md-knob-background-color: $range-md-bar-active-background-color !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-height: $range-md-tick-width !default;
$range-md-tick-background-color: $range-md-bar-background-color !default; $range-md-tick-border-radius: 50% !default;
$range-md-tick-active-background-color: $range-md-bar-active-background-color !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-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-color: color-contrast($colors-md, $range-md-bar-active-background-color) !default;
$range-md-pin-font-size: 12px !default; $range-md-pin-font-size: 12px !default;
$range-md-pin-padding: 8px !default;
.item-range .item-inner { .item-range .item-inner {
@ -46,7 +49,11 @@ ion-range {
position: relative; position: relative;
display: block; 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 { .range-slider {
@ -102,6 +109,8 @@ ion-range {
.range-knob { .range-knob {
position: absolute; position: absolute;
z-index: 2;
top: ($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 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); left: ($range-md-hit-width / 2) - ($range-md-knob-width / 2);
@ -117,6 +126,8 @@ ion-range {
.range-tick { .range-tick {
position: absolute; position: absolute;
z-index: 1;
top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2); top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);
margin-left: ($range-md-tick-width / 2) * -1; margin-left: ($range-md-tick-width / 2) * -1;
@ -124,7 +135,7 @@ ion-range {
width: $range-md-tick-width; width: $range-md-tick-width;
height: $range-md-tick-height; height: $range-md-tick-height;
border-radius: 50%; border-radius: $range-md-tick-border-radius;
background: $range-md-tick-background-color; background: $range-md-tick-background-color;
@ -140,11 +151,11 @@ ion-range {
top: -20px; top: -20px;
display: inline-block; display: inline-block;
padding: 8px; padding: $range-md-pin-padding;
min-width: 28px; min-width: 28px;
border-radius: 50px; border-radius: 50%;
font-size: $range-md-pin-font-size; font-size: $range-md-pin-font-size;
@ -166,14 +177,15 @@ ion-range {
transform: scale(1.5); 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) { @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
ion-range[#{$color-name}] { ion-range[#{$color-name}] {
.range-bar-active, .range-bar-active,
.range-knob { .range-knob,
.range-pin {
background: $color-base; background: $color-base;
} }
} }

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

@ -127,6 +127,7 @@ export class RangeKnob {
host: { host: {
'[class.range-disabled]': '_disabled', '[class.range-disabled]': '_disabled',
'[class.range-pressed]': '_pressed', '[class.range-pressed]': '_pressed',
'[class.range-has-pin]': '_pin',
}, },
directives: [RangeKnob], directives: [RangeKnob],
providers: [RANGE_VALUE_ACCESSOR], providers: [RANGE_VALUE_ACCESSOR],

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

@ -3,7 +3,8 @@
// Windows Range // 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; $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-background-color: $range-wp-bar-active-background-color !default;
$range-wp-knob-border-radius: $range-wp-knob-width / 2 !default; $range-wp-knob-border-radius: $range-wp-knob-width / 2 !default;
$range-wp-tick-width: 0 !default; $range-wp-tick-width: $range-wp-bar-height !default;
$range-wp-tick-height: $range-wp-tick-width !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-background-color: $range-wp-bar-background-color !default;
$range-wp-tick-active-background-color: $range-wp-bar-active-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-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-color: color-contrast($colors-wp, $range-wp-bar-active-background-color) !default;
$range-wp-pin-font-size: 12px !default; $range-wp-pin-font-size: 12px !default;
$range-wp-pin-padding: 8px !default;
.item-range .item-inner { .item-range .item-inner {
@ -47,7 +50,11 @@ ion-range {
position: relative; position: relative;
display: block; 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 { .range-slider {
@ -125,7 +132,7 @@ ion-range {
width: $range-wp-tick-width; width: $range-wp-tick-width;
height: $range-wp-tick-height; height: $range-wp-tick-height;
border-radius: 50%; border-radius: $range-wp-tick-border-radius;
background: $range-wp-tick-background-color; background: $range-wp-tick-background-color;
@ -138,10 +145,10 @@ ion-range {
.range-pin { .range-pin {
position: relative; position: relative;
top: -20px; top: -24px;
display: inline-block; display: inline-block;
padding: 8px; padding: $range-wp-pin-padding;
min-width: 28px; min-width: 28px;
@ -163,14 +170,16 @@ ion-range {
transform: translate3d(0, 0, 0) scale(1); 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) { @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
ion-range[#{$color-name}] { ion-range[#{$color-name}] {
.range-bar-active, .range-bar-active,
.range-knob { .range-tick-active,
.range-knob,
.range-pin {
background: $color-base; background: $color-base;
} }
} }

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

@ -18,6 +18,9 @@
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item>
<ion-range [(ngModel)]="singleValue" danger pin="true"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-label>no init value, default min/max, {{singleValue}}</ion-label> <ion-label>no init value, default min/max, {{singleValue}}</ion-label>
@ -38,7 +41,7 @@
<ion-item> <ion-item>
<ion-label>step=100, snaps, {{singleValue4}}</ion-label> <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>
<ion-item> <ion-item>
@ -53,7 +56,7 @@
<ion-item> <ion-item>
<ion-label>pin, {{singleValue}}</ion-label> <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>
<ion-item> <ion-item>