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

switch updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-21 21:56:45 -05:00
parent bef1787796
commit 4e50ff87c2
9 changed files with 101 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/card/modes/ios.scss
View File

@ -43,8 +43,8 @@ $card-ios-header-padding: 16px !default;
border: none; border: none;
} }
.item::before, .item:before,
.item::after { .item:after {
left: 0; left: 0;
} }

2
ionic/components/checkbox/modes/ios.scss
View File

@ -26,7 +26,7 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
border-color: $checkbox-ios-border-color-on; border-color: $checkbox-ios-border-color-on;
} }
&[aria-checked=true] .checkbox-icon::after { &[aria-checked=true] .checkbox-icon:after {
position: absolute; position: absolute;
border: 1px solid $checkbox-ios-checkmark-color-on; border: 1px solid $checkbox-ios-checkmark-color-on;
top: 3px; top: 3px;

2
ionic/components/checkbox/modes/material.scss
View File

@ -28,7 +28,7 @@ $checkbox-md-checkmark-color-on: $background-color !default;
border-color: $checkbox-md-border-color-on; border-color: $checkbox-md-border-color-on;
} }
&[aria-checked=true] .checkbox-icon::after { &[aria-checked=true] .checkbox-icon:after {
position: absolute; position: absolute;
border: 2px solid $checkbox-md-checkmark-color-on; border: 2px solid $checkbox-md-checkmark-color-on;
top: 0; top: 0;

2
ionic/components/item/item.scss
View File

@ -176,7 +176,7 @@ button.item.item {
border: none; border: none;
} }
.item.item.item.no-border-bottom + .item::before { .item.item.item.no-border-bottom + .item:before {
border: none; border: none;
} }

4
ionic/components/radio/modes/ios.scss
View File

@ -13,7 +13,7 @@ $radio-ios-active-color: color(primary) !default;
height: 21px; height: 21px;
} }
&[aria-checked=true] .radio-icon::after { &[aria-checked=true] .radio-icon:after {
position: absolute; position: absolute;
border: 2px solid $radio-ios-active-color; border: 2px solid $radio-ios-active-color;
top: 3px; top: 3px;
@ -40,7 +40,7 @@ $radio-ios-active-color: color(primary) !default;
.radio[mode=ios][#{$color-name}] { .radio[mode=ios][#{$color-name}] {
&[aria-checked=true] .radio-icon::after { &[aria-checked=true] .radio-icon:after {
border-color: $color-value; border-color: $color-value;
} }

6
ionic/components/radio/modes/material.scss
View File

@ -29,7 +29,7 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
border-color: $radio-md-active-color; border-color: $radio-md-active-color;
} }
.radio-icon::after { .radio-icon:after {
position: absolute; position: absolute;
top: $radio-md-border-width; top: $radio-md-border-width;
left: $radio-md-border-width; left: $radio-md-border-width;
@ -42,7 +42,7 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
&[aria-checked=true] .radio-icon::after { &[aria-checked=true] .radio-icon:after {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
@ -64,7 +64,7 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
border-color: $color-value; border-color: $color-value;
} }
&[aria-checked=true] .radio-icon::after { &[aria-checked=true] .radio-icon:after {
background: $color-value; background: $color-value;
} }

111
ionic/components/switch/modes/ios.scss
View File

@ -5,24 +5,21 @@
$switch-ios-width: 51px !default; $switch-ios-width: 51px !default;
$switch-ios-height: 32px !default; $switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default; $switch-ios-border-width: 2px !default;
$switch-ios-border-radius: 30px !default; $switch-ios-border-radius: $switch-ios-height / 2 !default;
$switch-ios-off-bg-color: $list-background-color !default; $switch-ios-off-bg-color: $list-background-color !default;
$switch-ios-off-border-color: lighten($list-border-color, 10%) !default; $switch-ios-off-border-color: lighten($list-border-color, 10%) !default;
$switch-ios-on-bg-color: color(primary) !default; $switch-ios-on-bg-color: color(primary) !default;
$switch-ios-on-border-color: $switch-ios-on-bg-color !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default; $switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default; $switch-ios-handle-height: $switch-ios-handle-width !default;
$switch-ios-handle-radius: $switch-ios-handle-width !default; $switch-ios-handle-radius: $switch-ios-handle-height / 2 !default;
$switch-ios-handle-dragging-bg-color: darken($switch-ios-off-bg-color, 5%) !default; $switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.15) !default;
$switch-ios-handle-off-bg-color: $switch-ios-off-bg-color !default; $switch-ios-handle-bg-color: $switch-ios-off-bg-color !default;
$switch-ios-handle-on-bg-color: $switch-ios-off-bg-color !default;
$switch-ios-transition-duration: 200ms !default; $switch-ios-transition-duration: 300ms !default;
.switch[mode=ios] { .switch[mode=ios] {
@ -32,41 +29,62 @@ $switch-ios-transition-duration: 200ms !default;
padding: 6px $item-ios-padding-right 6px ($item-ios-padding-left + 20); padding: 6px $item-ios-padding-right 6px ($item-ios-padding-left + 20);
} }
// Switch Background Track
// -----------------------------------------
.switch-icon { .switch-icon {
// bg track, when not checked
position: relative; position: relative;
width: $switch-ios-width; width: $switch-ios-width;
height: $switch-ios-height; height: $switch-ios-height;
border-radius: $switch-ios-border-radius; border-radius: $switch-ios-border-radius;
pointer-events: none; pointer-events: none;
background-color: $switch-ios-off-bg-color;
background-color: $switch-ios-off-border-color;
will-change: background-color;
transition: background-color $switch-ios-transition-duration; transition: background-color $switch-ios-transition-duration;
} }
.switch-track { &[aria-checked=true] .switch-icon {
width: 100%; // bg track, when checked
height: 100%; background-color: $switch-ios-on-bg-color;
border: solid $switch-ios-border-width $switch-ios-off-border-color;
border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-bg-color;
will-change: border-width, opacity;
transition-property: border-width, opacity;
transition-duration: $switch-ios-transition-duration + 50ms;
} }
.switch-track::before {
// Switch Background Track, Inner Oval
// -----------------------------------------
.switch-icon:before {
// inner bg track's oval, when not checked
content: '';
position: absolute; position: absolute;
top: $switch-ios-border-width; top: $switch-ios-border-width;
right: $switch-ios-border-width;
left: $switch-ios-border-width; left: $switch-ios-border-width;
right: 50%;
bottom: $switch-ios-border-width; bottom: $switch-ios-border-width;
content: '';
border-radius: $switch-ios-border-radius; border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-border-color; background-color: $switch-ios-off-bg-color;
will-change: right;
transition: right $switch-ios-transition-duration; will-change: transform;
transform: scale3d(1, 1, 1);
transition: transform $switch-ios-transition-duration;
} }
.switch-handle { &[aria-checked=true] .switch-icon:before,
.activated .switch-icon:before {
// inner bg track's oval, when checked
transform: scale3d(0, 0, 0);
}
// Switch Knob
// -----------------------------------------
.switch-icon:after {
// knob, when not checked
content: '';
position: absolute; position: absolute;
top: $switch-ios-border-width; top: $switch-ios-border-width;
left: $switch-ios-border-width; left: $switch-ios-border-width;
@ -75,42 +93,27 @@ $switch-ios-transition-duration: 200ms !default;
height: $switch-ios-handle-height; height: $switch-ios-handle-height;
border-radius: $switch-ios-handle-radius; border-radius: $switch-ios-handle-radius;
background-color: $switch-ios-handle-off-bg-color; background-color: $switch-ios-handle-bg-color;
box-shadow: $switch-ios-handle-box-shadow; box-shadow: $switch-ios-handle-box-shadow;
will-change: width, left, transform; will-change: transform, width, left;
transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 120ms ease-in-out 80ms;
transition-property: width, left, transform;
transition-duration: $switch-ios-transition-duration;
} }
.activated .switch-handle { &[aria-checked=true] .switch-icon:after {
width: $switch-ios-handle-width + 6; // knob, when checked
}
&[aria-checked=true] .switch-icon {
background-color: $switch-ios-on-bg-color;
}
.activated .switch-track,
&[aria-checked=true] .switch-track {
border-width: $switch-ios-height / 2;
}
&[aria-checked=true] .switch-track {
opacity: 0;
&::before {
right: 15%;
}
}
&[aria-checked=true] .switch-handle {
background-color: $switch-ios-handle-on-bg-color;
transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0); transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
} }
&[aria-checked=true] .activated .switch-handle { .activated .switch-icon:after {
// when pressing down on the switch and NOT checked
// then make the knob wider
width: $switch-ios-handle-width + 6;
}
&[aria-checked=true] .activated .switch-icon:after {
// when pressing down on the switch and IS checked
// make the knob wider and move it left a bit
left: $switch-ios-border-width - 6; left: $switch-ios-border-width - 6;
} }

53
ionic/components/switch/modes/material.scss
View File

@ -15,7 +15,7 @@ $switch-md-handle-off-bg-color: $background-color !default;
$switch-md-handle-on-bg-color: $switch-md-active-color !default; $switch-md-handle-on-bg-color: $switch-md-active-color !default;
$switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default; $switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$switch-md-transition-duration: 280ms !default; $switch-md-transition-duration: 300ms !default;
.switch[mode=md] { .switch[mode=md] {
@ -25,41 +25,54 @@ $switch-md-transition-duration: 280ms !default;
padding: 6px $item-md-padding-right 6px ($item-md-padding-left + 20); padding: 6px $item-md-padding-right 6px ($item-md-padding-left + 20);
} }
.switch-icon {
position: relative;
pointer-events: none;
}
.switch-track { // Switch Background Track
// -----------------------------------------
.switch-icon {
// bg track, when not checked
position: relative;
width: $switch-md-track-width; width: $switch-md-track-width;
height: $switch-md-track-height; height: $switch-md-track-height;
pointer-events: none;
border-radius: $switch-md-track-height;
background-color: $switch-md-track-off-bg-color; background-color: $switch-md-track-off-bg-color;
border-radius: $switch-md-track-height; will-change: background-color;
transition: background-color $switch-md-transition-duration
} }
.switch-handle { &[aria-checked=true] .switch-icon {
// bg track, when not checked
background-color: $switch-md-track-on-bg-color;
}
// Switch Knob
// -----------------------------------------
.switch-icon:after {
// knob, when not checked
content: '';
position: absolute; position: absolute;
top: ($switch-md-handle-height - $switch-md-track-height) / -2; top: ($switch-md-handle-height - $switch-md-track-height) / -2;
left: 0;// ($switch-md-handle-height - $switch-md-track-height) / -2; left: 0;
width: $switch-md-handle-width; width: $switch-md-handle-width;
height: $switch-md-handle-height; height: $switch-md-handle-height;
border-radius: 50%; border-radius: 50%;
background-color: $switch-md-handle-off-bg-color;
box-shadow: $switch-md-handle-box-shadow; box-shadow: $switch-md-handle-box-shadow;
will-change: transform; background-color: $switch-md-handle-off-bg-color;
transition-property: transform;
will-change: transform, background-color;
transition-property: transform, background-color;
transition-duration: $switch-md-transition-duration; transition-duration: $switch-md-transition-duration;
} }
&[aria-checked=true] .switch-track { &[aria-checked=true] .switch-icon:after {
background-color: $switch-md-track-on-bg-color; // knob, when not checked
}
&[aria-checked=true] .switch-handle {
background-color: $switch-md-handle-on-bg-color; background-color: $switch-md-handle-on-bg-color;
transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0); transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
} }
@ -74,11 +87,11 @@ $switch-md-transition-duration: 280ms !default;
.switch[mode=md][#{$color-name}] { .switch[mode=md][#{$color-name}] {
&[aria-checked=true] .switch-track { &[aria-checked=true] .switch-icon {
background-color: lighten($bg-on, 20%); background-color: lighten($bg-on, 25%);
} }
&[aria-checked=true] .switch-handle { &[aria-checked=true] .switch-icon:after {
background-color: $bg-on; background-color: $bg-on;
} }

5
ionic/components/switch/switch.ts
View File

@ -128,10 +128,7 @@ class MediaSwitch {
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</div>' + '</div>' +
'<div class="item-media media-switch">' + '<div class="item-media media-switch">' +
'<div class="switch-icon">' + '<div class="switch-icon"></div>' +
'<div class="switch-track"></div>' +
'<div class="switch-handle"></div>' +
'</div>' +
'</div>', '</div>',
directives: [MediaSwitch] directives: [MediaSwitch]
}) })