From 779f3506a56fd7c531f3777dfcd3f2c208e787b8 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 23 Sep 2013 21:52:47 -0500 Subject: [PATCH] toggle/range improvements --- scss/_variables.scss | 98 ++++++++++++++++++++++------------------- scss/ionic/_form.scss | 12 ++--- scss/ionic/_toggle.scss | 42 ++++++++++-------- test/input-toggle.html | 4 +- 4 files changed, 84 insertions(+), 72 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 67adb0d154..5622ec9cd1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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 // ------------------------------- diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss index fa143b75d9..3f3ba9cc41 100644 --- a/scss/ionic/_form.scss +++ b/scss/ionic/_form.scss @@ -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; diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss index 3a5000e926..13f37ec956 100644 --- a/scss/ionic/_toggle.scss +++ b/scss/ionic/_toggle.scss @@ -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; } } diff --git a/test/input-toggle.html b/test/input-toggle.html index 5bf782845d..382c903a20 100644 --- a/test/input-toggle.html +++ b/test/input-toggle.html @@ -23,7 +23,7 @@ Airplane Mode