Update changelog with the material theme details.

Add more example to the docs site homepage header.
ghinda · Nov 18, 2015 · 835bfaa · 835bfaa
1 parent c28863e
commit 835bfaa
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,10 @@
 ## [4.0.0] - 2015-XX-XX
 
-- BREAKING: New HTML markup for `switch-light`.
+- BREAKING: New HTML markup for `switch-light`, more semantic and with more control over the label and switch widths and placement.
 - BREAKING: Rename the `android` theme to `holo`.
 - BREAKING: Remove the `less` version because it was unmaintained.
 - `switch-toggle` no longer needs the `switch-X` number classes. Just add up to 6 items, no extra work needed.
+- New `material` theme, mimicking material design.
 - Fix issues with enlarged text on `switch-toggle`.
 - Various tweaks to the `ios` theme.
 - Change text color of the active option in the `switch-light` `candy` theme.

diff --git a/site/css/docs.scss b/site/css/docs.scss
@@ -222,7 +222,7 @@ label {
 }
 
 .row.toggle-demo {
-  margin: 0;
+  margin: emCalc(20) 0 0;
 }
 
 .row.toggle-demo > label,

diff --git a/site/index.hbs b/site/index.hbs
@@ -30,8 +30,8 @@ foundation: true
 
           <div class="row toggle-demo">
 
-            <label class="switch-light switch-material">
-              <input type="checkbox" name="">
+            <label class="switch-light switch-candy">
+              <input type="checkbox">
 
               <strong class="large-4 columns">
                 Wireless
@@ -46,6 +46,42 @@ foundation: true
 
           </div>
 
+          <div class="row toggle-demo">
+
+            <label class="switch-light switch-material">
+              <input type="checkbox">
+
+              <strong class="large-4 columns">
+                Geolocation
+              </strong>
+
+              <span class="large-4 columns left">
+                <span>Off</span>
+                <span>On</span>
+                <a></a>
+              </span>
+            </label>
+
+          </div>
+
+          <div class="row toggle-demo">
+
+            <label class="switch-light switch-holo">
+              <input type="checkbox">
+
+              <strong class="large-4 columns">
+                Airplane Mode
+              </strong>
+
+              <span class="large-3 columns left">
+                <span>Off</span>
+                <span>On</span>
+                <a></a>
+              </span>
+            </label>
+
+          </div>
+
         </div>
         <div class="large-6 columns">
 
@@ -54,15 +90,47 @@ foundation: true
 
           <div class="row toggle-demo">
             <label class="large-3 columns">View</label>
+            <div class="switch-toggle switch-candy large-9 columns">
+              <input id="d-c1" name="view-d-c" type="radio" checked>
+              <label for="d-c1" onclick="">Week</label>
+
+              <input id="d-c2" name="view-d-c" type="radio">
+              <label for="d-c2" onclick="">Month</label>
+
+              <input id="d-c3" name="view-d-c" type="radio">
+              <label for="d-c3" onclick="">Year</label>
+
+              <a></a>
+            </div>
+          </div>
+
+          <div class="row toggle-demo">
+            <label class="large-3 columns">Storage</label>
             <div class="switch-toggle switch-material large-9 columns">
-              <input id="week-d1" name="view-d" type="radio" checked>
-              <label for="week-d1" onclick="">Week</label>
+              <input id="d-h1" name="view-d-h" type="radio" checked>
+              <label for="d-h1" onclick="">MTP</label>
+
+              <input id="d-h2" name="view-d-h" type="radio">
+              <label for="d-h2" onclick="">UMS</label>
+
+              <input id="d-h3" name="view-d-h" type="radio">
+              <label for="d-h3" onclick="">PTP</label>
+
+              <a></a>
+            </div>
+          </div>
+
+          <div class="row toggle-demo">
+            <label class="large-3 columns">Debug</label>
+            <div class="switch-toggle switch-holo large-9 columns">
+              <input id="d-m1" name="view-d-m" type="radio" checked>
+              <label for="d-m1" onclick="">Disabled</label>
 
-              <input id="month-d2" name="view-d" type="radio">
-              <label for="month-d2" onclick="">Month</label>
+              <input id="d-m2" name="view-d-m" type="radio">
+              <label for="d-m2" onclick="">ADB</label>
 
-              <input id="month-d3" name="view-d" type="radio">
-              <label for="month-d3" onclick="">Year</label>
+              <input id="d-m3" name="view-d-m" type="radio">
+              <label for="d-m3" onclick="">DevTools</label>
 
               <a></a>
             </div>