javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(toggle): material design toggle

Browse Source
This commit is contained in:
Adam Bradley
2015-01-16 16:56:10 -06:00
parent fdf06be0e5
commit 6a2be56b4b
2 changed files with 69 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
scss/_mixins.scss
View File

@@ -150,6 +150,15 @@
background-color: $on-bg-color;
}
}
@mixin toggle-android-style($on-bg-color) {
// the track when the toggle is "on"
& input:checked + .track {
background-color: rgba($on-bg-color, .5);
}
& input:checked + .track .handle {
background-color: $on-bg-color;
}
}
// Clearfix

60
scss/_toggle.scss
View File

@@ -24,6 +24,9 @@
}
}
}
.toggle {
&.toggle-light {
@include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
}
@@ -53,6 +56,36 @@
}
}
.platform-android .toggle {
&.toggle-light {
@include toggle-android-style($toggle-on-light-bg);
}
&.toggle-stable {
@include toggle-android-style($toggle-on-stable-bg);
}
&.toggle-positive {
@include toggle-android-style($toggle-on-positive-bg);
}
&.toggle-calm {
@include toggle-android-style($toggle-on-calm-bg);
}
&.toggle-assertive {
@include toggle-android-style($toggle-on-assertive-bg);
}
&.toggle-balanced {
@include toggle-android-style($toggle-on-balanced-bg);
}
&.toggle-energized {
@include toggle-android-style($toggle-on-energized-bg);
}
&.toggle-royal {
@include toggle-android-style($toggle-on-royal-bg);
}
&.toggle-dark {
@include toggle-android-style($toggle-on-dark-bg);
}
}
.toggle input {
// hide the actual input checkbox
display: none;
@@ -86,6 +119,7 @@
/* also the handle's appearance when it is "off" */
.toggle .handle {
@include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1));
@include transition-property((background-color, transform));
position: absolute;
display: block;
width: $toggle-handle-width;
@@ -137,3 +171,29 @@
.toggle input:disabled + .track {
opacity: .6;
}
.platform-android {
.toggle .track {
border: 0;
width: 34px;
height: 15px;
background: #9e9e9e;
}
.toggle input:checked + .track {
background: rgba(0,150,137,.5);
}
.toggle .handle {
top: 2px;
left: 4px;
width: 21px;
height: 21px;
box-shadow: 0 2px 5px rgba(0,0,0,.25);
}
.toggle input:checked + .track .handle {
@include translate3d(16px, 0, 0);
background: rgb(0,150,137);
}
.item-toggle .toggle {
top: 19px;
}
}