From 8f707547206d2f6101cc07f221c4d89d818247c8 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 26 Sep 2013 11:45:58 -0500 Subject: [PATCH] setup for ios7 css --- Gruntfile.js | 3 +- dist/ionic-ios7.css | 47 +++++++++++++++++++++++++ dist/ionic-simple.js | 2 +- dist/ionic.css | 34 +++++++----------- dist/ionicIcons.css | 34 +++++++----------- ext/simple/events.js | 2 +- package.json | 2 +- scss/_variables.scss | 12 ++++--- scss/ionic/_toggle.scss | 28 +++++---------- scss/ios7/_toggle.scss | 78 +++++++++++++++++++++++++++++++++++++++++ scss/ios7/ios7.scss | 8 +++++ test/input-toggle.html | 22 ++++++++++++ 12 files changed, 202 insertions(+), 70 deletions(-) create mode 100644 dist/ionic-ios7.css create mode 100644 scss/ios7/_toggle.scss create mode 100644 scss/ios7/ios7.scss diff --git a/Gruntfile.js b/Gruntfile.js index 24bbed8810..9ef3da548f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -60,7 +60,8 @@ module.exports = function(grunt) { sass: { dist: { files: { - 'dist/ionic.css': 'scss/ionic.scss' + 'dist/ionic.css': 'scss/ionic.scss', + 'dist/ionic-ios7.css': 'scss/ios7/ios7.scss' } } }, diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css new file mode 100644 index 0000000000..7b4f33a19c --- /dev/null +++ b/dist/ionic-ios7.css @@ -0,0 +1,47 @@ +@charset "UTF-8"; +.ios7 .toggle .track { + /* the background of the toggle's track area */ + /* also the track appearance when the toggle is "off" */ + position: relative; + display: inline-block; + box-sizing: border-box; + width: 54px; + height: 32px; + border: solid 2px #dddddd; + border-radius: 20px; + background-color: white; + cursor: pointer; + transition: 0.4s ease; } +.ios7 .toggle .switch { + /* the switch (circle) thats inside the toggle's track area */ + /* also the appearance when the switch is "off" */ + position: absolute; + display: block; + width: auto; + /* override defaults */ + height: auto; + /* override defaults */ + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25); + border-radius: 20px; + background-color: white; + left: 0; + top: 0; + bottom: 0; + right: 20px; + transition: 0.2s ease; + transition-property: left, right; + transition-delay: 0s, 0.05s; } +.ios7 .toggle :checked + .track { + /* When the toggle is "on" */ + /* the track when the toggle is "on" */ + border-color: #4bd863; + background-color: #ccc; + box-shadow: inset 0 0 0 20px #4bd863; + transition: 0.2s ease; + /* the switch when the toggle is "on" */ } + .ios7 .toggle :checked + .track .switch { + background-color: white; + right: 0; + left: 20px; + -webkit-transform: none; + transition-delay: 0.05s, 0s; } diff --git a/dist/ionic-simple.js b/dist/ionic-simple.js index 2b014a9c83..ba20d67fed 100644 --- a/dist/ionic-simple.js +++ b/dist/ionic-simple.js @@ -53,6 +53,6 @@ } // global tap event listener polyfill for HTML elements that were "tapped" by the user - ionic.on("tap", tapPolyfill, window); + //ionic.on("tap", tapPolyfill, window); })(this, document, ionic); diff --git a/dist/ionic.css b/dist/ionic.css index 178f22275c..1b091e7f05 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -1828,46 +1828,38 @@ input[type="checkbox"][readonly] { /* 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: 54px; height: 32px; - border: solid 2px #dddddd; + border: solid 2px #e5e5e5; border-radius: 20px; - background-color: white; + background-color: #e5e5e5; cursor: pointer; - transition: 0.4s ease; } + transition-property: background-color, border; + transition-duration: 0.1s; + transition-timing-function: ease-in-out; } -/* the switch (dot) thats inside the toggle's slide area */ +/* the switch (circle) thats inside the toggle's track area */ /* also the appearance when the switch is "off" */ .toggle .switch { position: absolute; display: block; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25); - border-radius: 20px; + width: 28px; + height: 28px; + border-radius: 50%; background-color: white; - left: 0; - top: 0; - bottom: 0; - right: 20px; - transition: 0.2s ease; - transition-property: left, right; - transition-delay: 0s, 0.05s; } + transition: -webkit-transform 0.1s ease-in-out; } /* When the toggle is "on" */ .toggle :checked + .track { /* the track when the toggle is "on" */ - border-color: #4bd863; - background-color: #ccc; - box-shadow: inset 0 0 0 20px #4bd863; - transition: 0.2s ease; + border-color: #5f85ef; + background-color: #5f85ef; /* the switch when the toggle is "on" */ } .toggle :checked + .track .switch { background-color: white; - right: 0; - left: 20px; - transition-delay: 0.05s, 0s; } + -webkit-transform: translate3d(22px, 0, 0); } /* hide a radio button's icon by default */ .radio-item [class^="icon-"], diff --git a/dist/ionicIcons.css b/dist/ionicIcons.css index bd7c940239..65ea3ce986 100644 --- a/dist/ionicIcons.css +++ b/dist/ionicIcons.css @@ -1898,46 +1898,38 @@ input[type="checkbox"][readonly] { /* 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: 54px; height: 32px; - border: solid 2px #dddddd; + border: solid 2px #e5e5e5; border-radius: 20px; - background-color: white; + background-color: #e5e5e5; cursor: pointer; - transition: 0.4s ease; } + transition-property: background-color, border; + transition-duration: 0.1s; + transition-timing-function: ease-in-out; } -/* the switch (dot) thats inside the toggle's slide area */ +/* the switch (circle) thats inside the toggle's track area */ /* also the appearance when the switch is "off" */ .toggle .switch { position: absolute; display: block; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25); - border-radius: 20px; + width: 28px; + height: 28px; + border-radius: 50%; background-color: white; - left: 0; - top: 0; - bottom: 0; - right: 20px; - transition: 0.2s ease; - transition-property: left, right; - transition-delay: 0s, 0.05s; } + transition: -webkit-transform 0.1s ease-in-out; } /* When the toggle is "on" */ .toggle :checked + .track { /* the track when the toggle is "on" */ - border-color: #4bd863; - background-color: #ccc; - box-shadow: inset 0 0 0 20px #4bd863; - transition: 0.2s ease; + border-color: #5f85ef; + background-color: #5f85ef; /* the switch when the toggle is "on" */ } .toggle :checked + .track .switch { background-color: white; - right: 0; - left: 20px; - transition-delay: 0.05s, 0s; } + -webkit-transform: translate3d(22px, 0, 0); } /* hide a radio button's icon by default */ .radio-item [class^="icon-"], diff --git a/ext/simple/events.js b/ext/simple/events.js index 2b014a9c83..ba20d67fed 100644 --- a/ext/simple/events.js +++ b/ext/simple/events.js @@ -53,6 +53,6 @@ } // global tap event listener polyfill for HTML elements that were "tapped" by the user - ionic.on("tap", tapPolyfill, window); + //ionic.on("tap", tapPolyfill, window); })(this, document, ionic); diff --git a/package.json b/package.json index d135ca2d64..060a12fdd9 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "grunt": "~0.4.1", "grunt-cli": "~0.1.9", "grunt-contrib-watch": "~0.5.3", - "grunt-contrib-copy": "~0.0.01", + "grunt-contrib-copy": "~0.4.1", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.4", "grunt-contrib-jshint": "~0.6.4", diff --git a/scss/_variables.scss b/scss/_variables.scss index bd0e8ff30b..e5da337bd9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -145,18 +145,20 @@ $toggle-height: 32px; $toggle-border-width: 2px; $toggle-border-radius: 20px; -$toggle-switch-radius: 20px; +$toggle-switch-width: $toggle-height - ($toggle-border-width * 2); +$toggle-switch-height: $toggle-switch-width; +$toggle-switch-radius: 50%; -$toggle-off-bg-color: $white; -$toggle-off-border-color: #ddd; +$toggle-off-bg-color: #E5E5E5; +$toggle-off-border-color: #E5E5E5; -$toggle-on-bg-color: #4bd863; +$toggle-on-bg-color: #5f85ef; $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: .2s; +$toggle-transition-duration: .1s; // Range diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss index a99c86d1c2..b000d29b2f 100644 --- a/scss/ionic/_toggle.scss +++ b/scss/ionic/_toggle.scss @@ -12,7 +12,6 @@ /* 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; @@ -22,25 +21,21 @@ background-color: $toggle-off-bg-color; cursor: pointer; - transition: $toggle-transition-duration + .2s ease; + transition-property: background-color, border; + transition-duration: $toggle-transition-duration; + transition-timing-function: ease-in-out; } -/* the switch (dot) thats inside the toggle's slide area */ +/* the switch (circle) thats inside the toggle's track area */ /* also the appearance when the switch is "off" */ .toggle .switch { position: absolute; display: block; - box-shadow: 0 0 2px rgba(0,0,0,.5), 0 4px 5px rgba(0,0,0,0.25); + width: $toggle-switch-width; + height: $toggle-switch-height; border-radius: $toggle-switch-radius; background-color: $toggle-switch-off-bg-color; - left: 0; - top: 0; - bottom: 0; - right: $toggle-border-radius; - - transition: $toggle-transition-duration ease; - transition-property: left, right; - transition-delay: 0s, .05s; + transition: -webkit-transform $toggle-transition-duration ease-in-out; } @@ -49,16 +44,11 @@ /* the track when the toggle is "on" */ border-color: $toggle-on-border-color; - background-color: #ccc; - box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color; - transition: $toggle-transition-duration ease; + background-color: $toggle-on-bg-color; /* the switch when the toggle is "on" */ .switch { background-color: $toggle-switch-on-bg-color; - right: 0; - left: $toggle-border-radius; - - transition-delay: .05s, 0s; + -webkit-transform: translate3d( $toggle-width - $toggle-switch-width - ($toggle-border-width * 2) ,0,0); } } diff --git a/scss/ios7/_toggle.scss b/scss/ios7/_toggle.scss new file mode 100644 index 0000000000..1ff4b5ed34 --- /dev/null +++ b/scss/ios7/_toggle.scss @@ -0,0 +1,78 @@ +$toggle-width: 54px; +$toggle-height: 32px; +$toggle-border-width: 2px; +$toggle-border-radius: 20px; + +$toggle-switch-radius: 20px; + +$toggle-off-bg-color: #fff; +$toggle-off-border-color: #ddd; + +$toggle-on-bg-color: #4bd863; +$toggle-on-border-color: $toggle-on-bg-color; + +$toggle-switch-off-bg-color: #fff; +$toggle-switch-on-bg-color: $toggle-switch-off-bg-color; + +$toggle-transition-duration: .2s; + + +.ios7 { + + .toggle .track { + /* the background of the toggle's track area */ + /* also the track appearance when the toggle is "off" */ + position: relative; + display: inline-block; + box-sizing: border-box; + width: $toggle-width; + height: $toggle-height; + border: solid $toggle-border-width $toggle-off-border-color; + border-radius: $toggle-border-radius; + background-color: $toggle-off-bg-color; + cursor: pointer; + + transition: $toggle-transition-duration + .2s ease; + } + + .toggle .switch { + /* the switch (circle) thats inside the toggle's track area */ + /* also the appearance when the switch is "off" */ + position: absolute; + display: block; + width: auto; /* override defaults */ + height: auto; /* override defaults */ + 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; + left: 0; + top: 0; + bottom: 0; + right: $toggle-border-radius; + + transition: $toggle-transition-duration ease; + transition-property: left, right; + transition-delay: 0s, .05s; + } + + + .toggle :checked + .track { + /* When the toggle is "on" */ + + /* the track when the toggle is "on" */ + border-color: $toggle-on-border-color; + background-color: #ccc; + box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color; + transition: $toggle-transition-duration ease; + + /* the switch when the toggle is "on" */ + .switch { + background-color: $toggle-switch-on-bg-color; + right: 0; + left: $toggle-border-radius; + -webkit-transform: none; + transition-delay: .05s, 0s; + } + } + +} \ No newline at end of file diff --git a/scss/ios7/ios7.scss b/scss/ios7/ios7.scss new file mode 100644 index 0000000000..7b04f375e5 --- /dev/null +++ b/scss/ios7/ios7.scss @@ -0,0 +1,8 @@ +@charset "UTF-8"; + +@import + // Variables + "../mixins", + "../variables", + + "toggle"; diff --git a/test/input-toggle.html b/test/input-toggle.html index a9362fc327..8c07f95625 100644 --- a/test/input-toggle.html +++ b/test/input-toggle.html @@ -7,6 +7,7 @@ + @@ -51,6 +52,27 @@

Homepage

+ +