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

feat(range): add md and wp styling, tweak ios styling

Browse Source 
references #5422
This commit is contained in:
Brandy Carney
2016-05-27 18:37:32 -04:00
parent 2c6e11b10d
commit af6d5e4be4
4 changed files with 383 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,26 +3,30 @@
// iOS Range
// --------------------------------------------------
$range-ios-padding: 8px 16px !default;
$range-ios-slider-height: 42px !default;
$range-ios-hit-width: 42px !default;
$range-ios-hit-height: $range-ios-slider-height !default;
$range-ios-bar-height: 2px !default;
$range-ios-bar-height: 1px !default;
$range-ios-bar-background-color: #bdbdbd !default;
$range-ios-bar-active-background-color: color($colors-ios, primary) !default;
$range-ios-knob-width: 12px !default;
$range-ios-knob-width: 28px !default;
$range-ios-knob-height: $range-ios-knob-width !default;
$range-ios-knob-background-color: $range-ios-bar-active-background-color !default;
$range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.02) !default;
$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-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: $range-ios-bar-active-background-color !default;
$range-ios-pin-color: color-contrast($colors-ios, $range-ios-pin-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;
@ -44,8 +48,8 @@ ion-range {
position: relative;
display: block;
margin-top: -16px;
padding: 8px;
margin-top: -8px;
padding: $range-ios-padding;
}
.range-slider {
@ -101,16 +105,18 @@ ion-range {
.range-knob {
position: absolute;
top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2);
top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px;
left: ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2);
width: $range-ios-knob-width;
height: $range-ios-knob-height;
border-radius: 50%;
border-radius: $range-ios-knob-border-radius;
background: $range-ios-knob-background-color;
box-shadow: $range-ios-knob-box-shadow;
pointer-events: none;
}
@ -160,3 +166,16 @@ ion-range {
.range-knob-pressed .range-pin {
transform: translate3d(0, 0, 0) scale(1);
}
// Generate iOS Range Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
ion-range[#{$color-name}] {
.range-bar-active {
background: $color-base;
}
}
}