javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

toggle/range improvements

Browse Source
This commit is contained in:
Adam Bradley
2013-09-23 21:52:47 -05:00
parent a7efdd9234
commit 779f3506a5
4 changed files with 84 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
scss/_variables.scss
View File

@ -137,6 +137,58 @@ $input-group-addon-bg: $gray-lighter !default;
$input-group-addon-border-color: $input-border-color !default;
// Toggle
// -------------------------------
$toggle-width: 54px;
$toggle-height: 32px;
$toggle-border-width: 2px;
$toggle-border-radius: 20px;
$toggle-switch-radius: 20px;
$toggle-off-bg-color: $white;
$toggle-off-border-color: #ddd;
$toggle-on-bg-color: #4bd863;
$toggle-on-border-color: $toggle-on-bg-color;
$toggle-switch-off-bg-color: $white;
$toggle-switch-on-bg-color: $toggle-switch-off-bg-color;
$toggle-transition-duration: .3s;
// Range
// -------------------------------
$range-track-height: 4px;
$range-track-color: #ccc;
$range-slider-width: 20px;
$range-slider-height: 20px;
$range-slider-border-radius: 10px;
// Form States and Alerts
// -------------------------------
$warning-text: #c09853;
$warning-bg: #fcf8e3;
$warning-border: darken(adjust-hue($warning-bg, -10), 3%);
$error-text: #b94a48;
$error-bg: #f2dede;
$error-border: darken(adjust-hue($error-bg, -10), 3%);
$success-text: #468847;
$success-bg: #dff0d8;
$success-border: darken(adjust-hue($success-bg, -10), 5%);
$info-text: #3a87ad;
$info-bg: #d9edf7;
$info-border: darken(adjust-hue($info-bg, -10), 7%);
// Buttons
// -------------------------------
@ -222,6 +274,7 @@ $bar-danger-border-color: #bc4435;
$bar-dark-bg: #444;
$bar-dark-border-color: #111;
// Tabs
// -------------------------------
$tabs-height: 49px !default;
@ -283,51 +336,6 @@ $list-dark-background: $brand-dark;
$list-dark-border: $brand-dark;
// Form States and Alerts
// -------------------------------
$warning-text: #c09853;
$warning-bg: #fcf8e3;
$warning-border: darken(adjust-hue($warning-bg, -10), 3%);
$error-text: #b94a48;
$error-bg: #f2dede;
$error-border: darken(adjust-hue($error-bg, -10), 3%);
$success-text: #468847;
$success-bg: #dff0d8;
$success-border: darken(adjust-hue($success-bg, -10), 5%);
$info-text: #3a87ad;
$info-bg: #d9edf7;
$info-border: darken(adjust-hue($info-bg, -10), 7%);
// Toggle
// -------------------------------
$toggle-width: 54px;
$toggle-height: 32px;
$toggle-border-width: 2px;
$toggle-border-radius: 20px;
$toggle-switch-width: $toggle-height - 4px;
$toggle-switch-height: $toggle-switch-width;
$toggle-switch-radius: 50%;
$toggle-switch-on-position: $toggle-width - $toggle-switch-width - ($toggle-border-width * 2);
$toggle-off-bg-color: $gray-light;
$toggle-off-border-color: $toggle-off-bg-color;
$toggle-on-bg-color: $blue-dark;
$toggle-on-border-color: $toggle-on-bg-color;
$toggle-switch-off-bg-color: $white;
$toggle-switch-on-bg-color: $toggle-switch-off-bg-color;
$toggle-transition-duration: .1s;
// Menus
// -------------------------------

12
scss/ionic/_form.scss
View File

@ -243,16 +243,16 @@ input[type="range"] {
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
height: $range-track-height;
outline: none;
border-radius: 4px;
background-color: #b3b3b4;
border-radius: $range-track-height;
background-color: $range-track-color;
-webkit-appearance: none !important;
&::-webkit-slider-thumb {
width: $toggle-switch-width;
height: $toggle-switch-height;
border-radius: $toggle-switch-radius;
width: $range-slider-width;
height: $range-slider-height;
border-radius: $range-slider-border-radius;
background-color: $toggle-switch-off-bg-color;
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
-webkit-appearance: none !important;

42
scss/ionic/_toggle.scss
View File

@ -9,9 +9,10 @@
display: none;
}
/* the background of the toggle's slide area */
/* also the appearance when the slide is "off" */
.toggle .slide {
/* the background of the toggle's track area */
/* also the track appearance when the toggle is "off" */
.toggle .track {
position: relative;
display: inline-block;
box-sizing: border-box;
width: $toggle-width;
@ -21,13 +22,7 @@
background-color: $toggle-off-bg-color;
cursor: pointer;
-webkit-transition-property: background-color, border;
-webkit-transition-duration: $toggle-transition-duration;
-webkit-transition-timing-function: ease-in-out;
transition-property: background-color, border;
transition-duration: $toggle-transition-duration;
transition-timing-function: ease-in-out;
transition: $toggle-transition-duration + .1s ease;
}
/* the switch (dot) thats inside the toggle's slide area */
@ -35,26 +30,35 @@
.toggle .switch {
position: absolute;
display: block;
width: $toggle-switch-width;
height: $toggle-switch-height;
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 4px 5px rgba(0,0,0,0.25);
border-radius: $toggle-switch-radius;
background-color: $toggle-switch-off-bg-color;
-webkit-transition: -webkit-transform $toggle-transition-duration ease-in-out;
transition: -webkit-transform $toggle-transition-duration ease-in-out;
left: 0;
top: 0;
bottom: 0;
right: $toggle-border-radius;
transition: .2s ease;
transition-property: left, right;
transition-delay: 0s, .05s;
}
/* When the toggle is "on" */
.toggle :checked + .slide {
.toggle :checked + .track {
/* the slide when the toggle is "on" */
/* the track when the toggle is "on" */
border-color: $toggle-on-border-color;
background-color: $toggle-on-bg-color;
background-color: #ccc;
box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color;
transition: $toggle-transition-duration - .2s ease;
/* the switch when the toggle is "on" */
.switch {
background-color: $toggle-switch-on-bg-color;
-webkit-transform: translate3d($toggle-switch-on-position,0,0);
right: 0;
left: $toggle-border-radius;
transition-delay: .05s, 0s;
}
}

4
test/input-toggle.html
View File

@ -23,7 +23,7 @@
Airplane Mode
<label class="toggle">
<input type="checkbox" name="airplaneMode">
<div class="slide">
<div class="track">
<div class="switch"></div>
</div>
</label>
@ -32,7 +32,7 @@
Do Not Disturb
<label class="toggle">
<input type="checkbox" name="doNotDisturb" checked="checked">
<div class="slide">
<div class="track">
<div class="switch"></div>
</div>
</label>