javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +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;
}
}
}

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

@ -2,3 +2,181 @@
// Material Design Range
// --------------------------------------------------
$range-md-padding: 8px !default;
$range-md-slider-height: 42px !default;
$range-md-hit-width: 42px !default;
$range-md-hit-height: $range-md-slider-height !default;
$range-md-bar-height: 2px !default;
$range-md-bar-background-color: #bdbdbd !default;
$range-md-bar-active-background-color: color($colors-md, primary) !default;
$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-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-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;
.item-range .item-inner {
overflow: visible;
}
.item-range .input-wrapper {
overflow: visible;
flex-direction: column;
}
.item-range ion-range {
width: 100%;
}
ion-range {
position: relative;
display: block;
margin-top: -16px;
padding: $range-md-padding;
}
.range-slider {
position: relative;
height: $range-md-slider-height;
cursor: pointer;
}
.range-bar {
position: absolute;
top: ($range-md-slider-height / 2);
left: 0;
width: 100%;
height: $range-md-bar-height;
background: $range-md-bar-background-color;
pointer-events: none;
}
.range-pressed .range-bar-active {
will-change: left, right;
}
.range-pressed .range-knob-handle {
will-change: left;
}
.range-bar-active {
bottom: 0;
width: auto;
background: $range-md-bar-active-background-color;
}
.range-knob-handle {
position: absolute;
top: ($range-md-slider-height / 2);
left: 0%;
margin-top: -($range-md-hit-height / 2);
margin-left: -($range-md-hit-width / 2);
width: $range-md-hit-width;
height: $range-md-hit-height;
text-align: center;
}
.range-knob {
position: absolute;
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);
width: $range-md-knob-width;
height: $range-md-knob-height;
border-radius: 50%;
background: $range-md-knob-background-color;
pointer-events: none;
}
.range-tick {
position: absolute;
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%;
background: $range-md-tick-background-color;
pointer-events: none;
}
.range-tick-active {
background: $range-md-tick-active-background-color;
}
.range-pin {
position: relative;
top: -20px;
display: inline-block;
padding: 8px;
min-width: 28px;
border-radius: 50px;
font-size: $range-md-pin-font-size;
text-align: center;
color: $range-md-pin-color;
background: $range-md-pin-background-color;
transform: translate3d(0, 28px, 0) scale(.01);
transition: transform 120ms ease;
}
.range-knob-pressed .range-pin {
transform: translate3d(0, 0, 0) scale(1);
}
.range-knob-pressed .range-knob {
transform: scale(1.5);
}
// Generate iOS Range Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
ion-range[#{$color-name}] {
.range-bar-active,
.range-knob {
background: $color-base;
}
}
}

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

@ -2,3 +2,178 @@
// Windows Range
// --------------------------------------------------
$range-wp-padding: 8px !default;
$range-wp-slider-height: 42px !default;
$range-wp-hit-width: 42px !default;
$range-wp-hit-height: $range-wp-slider-height !default;
$range-wp-bar-height: 2px !default;
$range-wp-bar-background-color: #bdbdbd !default;
$range-wp-bar-active-background-color: color($colors-wp, primary) !default;
$range-wp-knob-width: 8px !default;
$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-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;
.item-range .item-inner {
overflow: visible;
}
.item-range .input-wrapper {
overflow: visible;
flex-direction: column;
}
.item-range ion-range {
width: 100%;
}
ion-range {
position: relative;
display: block;
margin-top: -16px;
padding: $range-wp-padding;
}
.range-slider {
position: relative;
height: $range-wp-slider-height;
cursor: pointer;
}
.range-bar {
position: absolute;
top: ($range-wp-slider-height / 2);
left: 0;
width: 100%;
height: $range-wp-bar-height;
background: $range-wp-bar-background-color;
pointer-events: none;
}
.range-pressed .range-bar-active {
will-change: left, right;
}
.range-pressed .range-knob-handle {
will-change: left;
}
.range-bar-active {
bottom: 0;
width: auto;
background: $range-wp-bar-active-background-color;
}
.range-knob-handle {
position: absolute;
top: ($range-wp-slider-height / 2);
left: 0%;
margin-top: -($range-wp-hit-height / 2);
margin-left: -($range-wp-hit-width / 2);
width: $range-wp-hit-width;
height: $range-wp-hit-height;
text-align: center;
}
.range-knob {
position: absolute;
top: ($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2);
left: ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2);
width: $range-wp-knob-width;
height: $range-wp-knob-height;
border-radius: $range-wp-knob-border-radius;
background: $range-wp-knob-background-color;
pointer-events: none;
}
.range-tick {
position: absolute;
top: ($range-wp-hit-height / 2) - ($range-wp-tick-height / 2) + ($range-wp-bar-height / 2);
margin-left: ($range-wp-tick-width / 2) * -1;
width: $range-wp-tick-width;
height: $range-wp-tick-height;
border-radius: 50%;
background: $range-wp-tick-background-color;
pointer-events: none;
}
.range-tick-active {
background: $range-wp-tick-active-background-color;
}
.range-pin {
position: relative;
top: -20px;
display: inline-block;
padding: 8px;
min-width: 28px;
border-radius: 50px;
font-size: $range-wp-pin-font-size;
text-align: center;
color: $range-wp-pin-color;
background: $range-wp-pin-background-color;
transform: translate3d(0, 28px, 0) scale(.01);
transition: transform 120ms ease;
}
.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-wp) {
ion-range[#{$color-name}] {
.range-bar-active,
.range-knob {
background: $color-base;
}
}
}

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

@ -27,7 +27,7 @@
<ion-item>
<div item-left>{{singleValue2}}</div>
<ion-label>init=150, min=-200, max=200</ion-label>
<ion-range min="-200" max="200" [(ngModel)]="singleValue2"></ion-range>
<ion-range min="-200" max="200" [(ngModel)]="singleValue2" secondary></ion-range>
<div item-right>{{singleValue2}}</div>
</ion-item>
@ -43,7 +43,7 @@
<ion-item>
<ion-label>dual, {{dualValue | json}}</ion-label>
<ion-range dualKnobs="true" [(ngModel)]="dualValue"></ion-range>
<ion-range dualKnobs="true" [(ngModel)]="dualValue" danger></ion-range>
</ion-item>
<ion-item>