From 579bbdb527de6c33981d0ba46d210cc2e51b1b8a Mon Sep 17 00:00:00 2001
From: Ilya Radchenko <ilya@burstcreations.com>
Date: Tue, 14 Oct 2014 08:39:48 -0400
Subject: [PATCH] Optimize css, add sizes, defaultSize

---
 app/components/x-toggle.js                 | 21 +++----
 app/templates/components/x-toggle.hbs      |  8 ++-
 tests/dummy/app/templates/application.hbs  | 39 ++++++++++++-
 tests/dummy/config/environment.js          |  6 +-
 vendor/ember-cli-toggle/base.css           | 10 ++--
 vendor/ember-cli-toggle/themes/default.css | 23 +++++++-
 vendor/ember-cli-toggle/themes/flat.css    | 28 ++++++++--
 vendor/ember-cli-toggle/themes/flip.css    | 58 +++++++++++++++++---
 vendor/ember-cli-toggle/themes/ios.css     | 37 ++++++++++---
 vendor/ember-cli-toggle/themes/light.css   | 23 +++++++-
 vendor/ember-cli-toggle/themes/skewed.css  | 64 ++++++++++++++++++----
 11 files changed, 259 insertions(+), 58 deletions(-)

diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js
index 98739d9..a14673d 100644
--- a/app/components/x-toggle.js
+++ b/app/components/x-toggle.js
@@ -11,26 +11,23 @@ export default Ember.Component.extend({
   theme: config.defaultTheme || 'default',
   off: 'Off',
   on: 'On',
+  size: config.defaultSize || 'medium',
   toggled: false,
 
-  inputClasses: on('init', observer('themeClass', 'inputCheckbox', function () {
-    var themeClass = this.get('themeClass');
-    var input = this.get('inputCheckbox');
-
-    if (input) {
-      var inputClasses = input.get('classNames') || [];
-
-      input.set('classNames', inputClasses.concat(['x-toggle', themeClass]));
-    }
-  })),
-
   themeClass: computed('theme', function () {
     var theme = this.get('theme') || 'default';
 
     return 'x-toggle-' + theme;
   }),
 
-  generatedId: computed(function () {
+  sizeClass: computed('size', 'themeClass', function () {
+    var size = this.get('size') || 'medium';
+    var themeClass = this.get('themeClass');
+
+    return themeClass + '-' + size;
+  }),
+
+  forId: computed(function () {
     return this.get('elementId') + '-x-toggle';
   }),
 
diff --git a/app/templates/components/x-toggle.hbs b/app/templates/components/x-toggle.hbs
index 6b32aa9..6827f10 100644
--- a/app/templates/components/x-toggle.hbs
+++ b/app/templates/components/x-toggle.hbs
@@ -1,2 +1,6 @@
-{{input id=generatedId type='checkbox' checked=toggled viewName='inputCheckbox'}}
-<label class='x-toggle-btn' {{bind-attr for=generatedId data-tg-off=off data-tg-on=on}}></label>
+{{input id=forId type='checkbox' checked=toggled class='x-toggle'}}
+<label {{bind-attr class=':x-toggle-btn themeClass sizeClass'
+  for=forId
+  data-tg-off=off
+  data-tg-on=on}}>
+</label>
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 8764029..d78cf5c 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1,8 +1,9 @@
-<h2 id='title'>Welcome to Ember.js</h2>
+<h2 id='title'>ember-cli-toggle</h2>
 
 {{outlet}}
 
 {{x-toggle toggle='checkboxToggled'}}
+{{x-toggle theme='default'}}
 {{x-toggle theme='light'}}
 {{x-toggle theme='ios'}}
 {{x-toggle theme='flat'}}
@@ -12,3 +13,39 @@
 <p>
   Is toggled: {{toggled}}
 </p>
+
+<div class="default-sizes sizes">
+  {{x-toggle size='small'}}
+  {{x-toggle size='medium'}}
+  {{x-toggle size='large'}}
+</div>
+
+<div class="light-sizes sizes">
+  {{x-toggle size='small' theme='light'}}
+  {{x-toggle size='medium' theme='light'}}
+  {{x-toggle size='large' theme='light'}}
+</div>
+
+<div class="ios-sizes sizes">
+  {{x-toggle size='small' theme='ios'}}
+  {{x-toggle size='medium' theme='ios'}}
+  {{x-toggle size='large' theme='ios'}}
+</div>
+
+<div class="flat-sizes sizes">
+  {{x-toggle size='small' theme='flat'}}
+  {{x-toggle size='medium' theme='flat'}}
+  {{x-toggle size='large' theme='flat'}}
+</div>
+
+<div class="flip-sizes sizes">
+  {{x-toggle size='small' theme='flip'}}
+  {{x-toggle size='medium' theme='flip'}}
+  {{x-toggle size='large' theme='flip'}}
+</div>
+
+<div class="skewed-sizes sizes">
+  {{x-toggle size='small' theme='skewed'}}
+  {{x-toggle size='medium' theme='skewed'}}
+  {{x-toggle size='large' theme='skewed'}}
+</div>
diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js
index afa904f..1ab5432 100644
--- a/tests/dummy/config/environment.js
+++ b/tests/dummy/config/environment.js
@@ -20,9 +20,9 @@ module.exports = function(environment) {
 
     'ember-cli-toggle': {
       //includedThemes: ['light', 'ios', 'flip'],
-      excludedThemes: ['flip'],
-      defaultTheme: 'light',
-      defaultSize: 'm'
+      //excludedThemes: ['flip'],
+      //defaultTheme: 'light',
+      //defaultSize: 'small'
     }
   };
 
diff --git a/vendor/ember-cli-toggle/base.css b/vendor/ember-cli-toggle/base.css
index bfe4445..becc517 100644
--- a/vendor/ember-cli-toggle/base.css
+++ b/vendor/ember-cli-toggle/base.css
@@ -33,7 +33,7 @@
   background: none;
 }
 
-.x-toggle + .x-toggle-btn {
+.x-toggle-btn {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -46,8 +46,8 @@
   cursor: pointer;
 }
 
-.x-toggle + .x-toggle-btn:after,
-.x-toggle + .x-toggle-btn:before {
+.x-toggle-btn:after,
+.x-toggle-btn:before {
   position: relative;
   display: block;
   content: "";
@@ -55,11 +55,11 @@
   height: 100%;
 }
 
-.x-toggle + .x-toggle-btn:after {
+.x-toggle-btn:after {
   left: 0;
 }
 
-.x-toggle + .x-toggle-btn:before {
+.x-toggle-btn:before {
   display: none;
 }
 
diff --git a/vendor/ember-cli-toggle/themes/default.css b/vendor/ember-cli-toggle/themes/default.css
index ff6070a..7920c32 100644
--- a/vendor/ember-cli-toggle/themes/default.css
+++ b/vendor/ember-cli-toggle/themes/default.css
@@ -1,16 +1,33 @@
-.x-toggle-default + .x-toggle-btn {
+.x-toggle-default.x-toggle-btn {
   padding: 0.1em;
   background-color: #E7E7E7;
   border-radius: 0.2em;
   transition: background-color 0.2s;
 }
 
-.x-toggle-default:checked + .x-toggle-btn {
+.x-toggle:checked + .x-toggle-default.x-toggle-btn {
   background-color: #797979;
 }
 
-.x-toggle-default + .x-toggle-btn:after {
+.x-toggle-default.x-toggle-btn:after {
   background-color: #FFFFFF;
   transition: left 0.2s;
   border-radius: 0.2em;
 }
+
+.x-toggle-default-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-default.x-toggle-default-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-default.x-toggle-default-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
diff --git a/vendor/ember-cli-toggle/themes/flat.css b/vendor/ember-cli-toggle/themes/flat.css
index 1be4862..333a311 100644
--- a/vendor/ember-cli-toggle/themes/flat.css
+++ b/vendor/ember-cli-toggle/themes/flat.css
@@ -1,4 +1,4 @@
-.x-toggle-flat + .x-toggle-btn {
+.x-toggle-flat.x-toggle-btn {
   padding: 2px;
   -webkit-transition: all .2s ease;
           transition: all .2s ease;
@@ -6,17 +6,37 @@
   border: 4px solid #f2f2f2;
   border-radius: 2em;
 }
-.x-toggle-flat + .x-toggle-btn:after {
+
+.x-toggle-flat.x-toggle-btn:after {
   -webkit-transition: all .2s ease;
           transition: all .2s ease;
   background: #f2f2f2;
   content: "";
   border-radius: 1em;
 }
-.x-toggle-flat:checked + .x-toggle-btn {
+
+.x-toggle:checked + .x-toggle-flat.x-toggle-btn {
   border: 4px solid #7FC6A6;
 }
-.x-toggle-flat:checked + .x-toggle-btn:after {
+
+.x-toggle:checked + .x-toggle-flat.x-toggle-btn:after {
   left: 50%;
   background: #7FC6A6;
 }
+
+.x-toggle-flat-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-flat.x-toggle-flat-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-flat.x-toggle-flat-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
diff --git a/vendor/ember-cli-toggle/themes/flip.css b/vendor/ember-cli-toggle/themes/flip.css
index 47f4d68..64d427f 100644
--- a/vendor/ember-cli-toggle/themes/flip.css
+++ b/vendor/ember-cli-toggle/themes/flip.css
@@ -1,4 +1,4 @@
-.x-toggle-flip + .x-toggle-btn {
+.x-toggle-flip.x-toggle-btn {
   padding: 2px;
   -webkit-transition: all .2s ease;
           transition: all .2s ease;
@@ -6,7 +6,9 @@
   -webkit-perspective: 100px;
           perspective: 100px;
 }
-.x-toggle-flip + .x-toggle-btn:after, .x-toggle-flip + .x-toggle-btn:before {
+
+.x-toggle-flip.x-toggle-btn:after,
+.x-toggle-flip.x-toggle-btn:before {
   display: inline-block;
   -webkit-transition: all .4s ease;
           transition: all .4s ease;
@@ -23,31 +25,71 @@
           backface-visibility: hidden;
   border-radius: 4px;
 }
-.x-toggle-flip + .x-toggle-btn:after {
+
+.x-toggle-flip.x-toggle-btn:after {
   content: attr(data-tg-on);
   background: #02C66F;
   -webkit-transform: rotateY(-180deg);
           transform: rotateY(-180deg);
 }
-.x-toggle-flip + .x-toggle-btn:before {
+
+.x-toggle-flip.x-toggle-btn:before {
   background: #FF3A19;
   content: attr(data-tg-off);
 }
-.x-toggle-flip + .x-toggle-btn:active:before {
+
+.x-toggle-flip.x-toggle-btn:active:before {
   -webkit-transform: rotateY(-20deg);
           transform: rotateY(-20deg);
 }
-.x-toggle-flip:checked + .x-toggle-btn:before {
+
+.x-toggle:checked + .x-toggle-flip.x-toggle-btn:before {
   -webkit-transform: rotateY(180deg);
           transform: rotateY(180deg);
 }
-.x-toggle-flip:checked + .x-toggle-btn:after {
+
+.x-toggle:checked + .x-toggle-flip.x-toggle-btn:after {
   -webkit-transform: rotateY(0);
           transform: rotateY(0);
   left: 0;
   background: #7FC6A6;
 }
-.x-toggle-flip:checked + .x-toggle-btn:active:after {
+
+.x-toggle:checked + .x-toggle-flip.x-toggle-btn:active:after {
   -webkit-transform: rotateY(20deg);
           transform: rotateY(20deg);
 }
+
+.x-toggle-flip-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-flip.x-toggle-flip-small:before,
+.x-toggle-flip.x-toggle-flip-small:after {
+  line-height: 2.2em; 
+  font-size: 0.8em;
+}
+
+.x-toggle-flip.x-toggle-flip-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-flip.x-toggle-flip-medium:before,
+.x-toggle-flip.x-toggle-flip-medium:after {
+  line-height: 2.3em; 
+}
+
+.x-toggle-flip.x-toggle-flip-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
+
+.x-toggle-flip.x-toggle-flip-large:before,
+.x-toggle-flip.x-toggle-flip-large:after {
+  line-height: 2.4em;
+  font-size: 1.1em;
+}
diff --git a/vendor/ember-cli-toggle/themes/ios.css b/vendor/ember-cli-toggle/themes/ios.css
index acf9168..0eee759 100644
--- a/vendor/ember-cli-toggle/themes/ios.css
+++ b/vendor/ember-cli-toggle/themes/ios.css
@@ -1,4 +1,4 @@
-.x-toggle-ios + .x-toggle-btn {
+.x-toggle-ios.x-toggle-btn {
   background: #fbfbfb;
   border-radius: 2em;
   padding: 2px;
@@ -6,25 +6,48 @@
           transition: all .4s ease;
   border: 1px solid #e8eae9;
 }
-.x-toggle-ios + .x-toggle-btn:after {
+
+.x-toggle-ios.x-toggle-btn:after {
   border-radius: 2em;
   background: #fbfbfb;
   -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
           transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
 }
-.x-toggle-ios + .x-toggle-btn:active {
+
+.x-toggle-ios.x-toggle-btn:active {
   box-shadow: inset 0 0 0 2em #e8eae9;
 }
-.x-toggle-ios + .x-toggle-btn:active:after {
+
+.x-toggle-ios.x-toggle-btn:active:after {
   padding-right: .8em;
 }
-.x-toggle-ios:checked + .x-toggle-btn {
+
+.x-toggle:checked + .x-toggle-ios.x-toggle-btn {
   background: #86d993;
 }
-.x-toggle-ios:checked + .x-toggle-btn:active {
+
+.x-toggle:checked + .x-toggle-ios.x-toggle-btn:active {
   box-shadow: none;
 }
-.x-toggle-ios:checked + .x-toggle-btn:active:after {
+
+.x-toggle:checked + .x-toggle-ios.x-toggle-btn:active:after {
   margin-left: -.8em;
 }
+
+.x-toggle-ios-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-ios.x-toggle-ios-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-ios.x-toggle-ios-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
diff --git a/vendor/ember-cli-toggle/themes/light.css b/vendor/ember-cli-toggle/themes/light.css
index 03b4964..33c7cca 100644
--- a/vendor/ember-cli-toggle/themes/light.css
+++ b/vendor/ember-cli-toggle/themes/light.css
@@ -1,4 +1,4 @@
-.x-toggle-light + .x-toggle-btn {
+.x-toggle-light.x-toggle-btn {
   background: #f0f0f0;
   border-radius: 2em;
   padding: 2px;
@@ -6,13 +6,30 @@
           transition: all .4s ease;
 }
 
-.x-toggle-light + .x-toggle-btn:after {
+.x-toggle-light.x-toggle-btn:after {
   border-radius: 50%;
   background: #fff;
   -webkit-transition: all .2s ease;
           transition: all .2s ease;
 }
 
-.x-toggle-light:checked + .x-toggle-btn {
+.x-toggle:checked + .x-toggle-light.x-toggle-btn {
   background: #9FD6AE;
 }
+
+.x-toggle-light-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-light.x-toggle-light-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-light.x-toggle-light-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
diff --git a/vendor/ember-cli-toggle/themes/skewed.css b/vendor/ember-cli-toggle/themes/skewed.css
index c9545cc..2d7dc5f 100644
--- a/vendor/ember-cli-toggle/themes/skewed.css
+++ b/vendor/ember-cli-toggle/themes/skewed.css
@@ -1,4 +1,4 @@
-.x-toggle-skewed + .x-toggle-btn {
+.x-toggle-skewed.x-toggle-btn {
   overflow: hidden;
   -webkit-transform: skew(-10deg);
       -ms-transform: skew(-10deg);
@@ -10,7 +10,9 @@
   font-family: sans-serif;
   background: #888;
 }
-.x-toggle-skewed + .x-toggle-btn:after, .x-toggle-skewed + .x-toggle-btn:before {
+
+.x-toggle-skewed.x-toggle-btn:after,
+.x-toggle-skewed.x-toggle-btn:before {
   -webkit-transform: skew(10deg);
       -ms-transform: skew(10deg);
           transform: skew(10deg);
@@ -25,29 +27,71 @@
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
 }
-.x-toggle-skewed + .x-toggle-btn:after {
+
+.x-toggle-skewed.x-toggle-btn:after {
   left: 100%;
   content: attr(data-tg-on);
 }
-.x-toggle-skewed + .x-toggle-btn:before {
+
+.x-toggle-skewed.x-toggle-btn:before {
   left: 0;
   content: attr(data-tg-off);
 }
-.x-toggle-skewed + .x-toggle-btn:active {
+
+.x-toggle-skewed.x-toggle-btn:active {
   background: #888;
 }
-.x-toggle-skewed + .x-toggle-btn:active:before {
+
+.x-toggle-skewed.x-toggle-btn:active:before {
   left: -10%;
 }
-.x-toggle-skewed:checked + .x-toggle-btn {
+
+.x-toggle:checked + .x-toggle-skewed.x-toggle-btn {
   background: #86d993;
 }
-.x-toggle-skewed:checked + .x-toggle-btn:before {
+
+.x-toggle:checked + .x-toggle-skewed.x-toggle-btn:before {
   left: -100%;
 }
-.x-toggle-skewed:checked + .x-toggle-btn:after {
+
+.x-toggle:checked + .x-toggle-skewed.x-toggle-btn:after {
   left: 0;
 }
-.x-toggle-skewed:checked + .x-toggle-btn:active:after {
+
+.x-toggle:checked + .x-toggle-skewed.x-toggle-btn:active:after {
   left: 10%;
 }
+
+.x-toggle-skewed-small {
+  width: 3em;
+  height: 1.6em;
+}
+
+.x-toggle-skewed.x-toggle-skewed-small:before,
+.x-toggle-skewed.x-toggle-skewed-small:after {
+  line-height: 2.2em;
+  font-size: 0.8em;
+}
+
+.x-toggle-skewed.x-toggle-skewed-medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-skewed.x-toggle-skewed-medium:before,
+.x-toggle-skewed.x-toggle-skewed-medium:after {
+  line-height: 1.9em;
+}
+
+.x-toggle-skewed.x-toggle-skewed-large {
+  width: 4.7em;
+  height: 2.6em;
+  padding: 4px;
+}
+
+.x-toggle-skewed.x-toggle-skewed-large:before,
+.x-toggle-skewed.x-toggle-skewed-large:after {
+  line-height: 2em;
+  font-size: 1.1em;
+}