From 28113c1e6fc11941644e61e19b8cb0ffe6b2d142 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 17 Oct 2013 09:18:24 -0500 Subject: [PATCH] toggle updates --- scss/ionic/_toggle.scss | 19 +++++++++++-------- test/input-toggle.html | 25 ++++++++++++------------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss index 0452731d98..7de4cffe32 100644 --- a/scss/ionic/_toggle.scss +++ b/scss/ionic/_toggle.scss @@ -1,11 +1,14 @@ +// Toggle +// ------------------------------- + /* the overall container of the toggle */ .toggle { display: inline-block; } -/* hide the actual checkbox */ -.toggle input { +/* hide the actual */ +.toggle input[type="checkbox"] { display: none; } @@ -21,9 +24,9 @@ background-color: $toggle-off-bg-color; cursor: pointer; - transition-property: background-color, border; - transition-duration: $toggle-transition-duration; transition-timing-function: ease-in-out; + transition-duration: $toggle-transition-duration; + transition-property: background-color, border; } /* the handle (circle) thats inside the toggle's track area */ @@ -40,11 +43,11 @@ /* used to create a larger hit area to slide the handle */ &:before { position: absolute; - content: " "; + top: -2px; + left: ( ($toggle-handle-width / 2) * -1) - 2; display: table; - left: ( ($toggle-handle-width / 2) * -1); - top: ( ($toggle-handle-height / 2) * -1) + 3; - padding: ($toggle-handle-height / 2) ($toggle-handle-width + 2); + padding: ($toggle-handle-height / 2) + 3 ($toggle-handle-width + 2); + content: " "; } } diff --git a/test/input-toggle.html b/test/input-toggle.html index 480db99dfa..b09e413bd8 100644 --- a/test/input-toggle.html +++ b/test/input-toggle.html @@ -5,37 +5,36 @@ - - + -
+
+

Input: Toggle

+
-
-

Input: Toggle

-
+
  • Airplane Mode -
    +
    +
  • Do Not Disturb -
    +
    +
@@ -54,11 +53,11 @@
-
+ - - + +