javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +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

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