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

perf(toggle): css containment

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-04-07 20:36:20 +02:00
parent bda624f870
commit 93d1d02613
3 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/toggle/toggle.ios.scss
View File

@ -60,6 +60,13 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
.toggle-ios {
position: relative;
width: $toggle-ios-width;
height: $toggle-ios-height;
box-sizing: content-box;
contain: strict;
}
@ -70,8 +77,8 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
position: relative;
display: block;
width: $toggle-ios-width;
height: $toggle-ios-height;
width: 100%;
height: 100%;
border-radius: $toggle-ios-border-radius;
@ -117,6 +124,9 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
box-shadow: $toggle-ios-handle-box-shadow;
transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
will-change: transform;
contain: strict;
}

4
src/components/toggle/toggle.md.scss
View File

@ -67,6 +67,8 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
height: $toggle-md-track-height;
box-sizing: content-box;
contain: strict;
}
@ -117,7 +119,7 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
// Material Design Toggle Background Track: Checked
// -----------------------------------------
.toggle-md .toggle-checked {
.toggle-md.toggle-checked .toggle-icon {
background-color: $toggle-md-track-background-color-on;
}

16
src/components/toggle/toggle.wp.scss
View File

@ -72,6 +72,13 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
.toggle-wp {
position: relative;
width: $toggle-wp-track-width;
height: $toggle-wp-track-height;
box-sizing: content-box;
contain: strict;
}
@ -82,14 +89,16 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
position: relative;
display: block;
width: $toggle-wp-track-width;
height: $toggle-wp-track-height;
width: 100%;
height: 100%;
border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
border-radius: $toggle-wp-track-height;
background-color: $toggle-wp-track-background-color-off;
pointer-events: none;
contain: strict;
}
@ -109,6 +118,8 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
transition-duration: $toggle-wp-transition-duration;
transition-property: transform, background-color;
will-change: transform, background-color;
}
@ -126,7 +137,6 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
.toggle-wp.toggle-checked .toggle-inner {
background-color: $toggle-wp-handle-background-color-on;
// transform: translate3d(23px, 0, 0);
transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0);
}