change Button, Command-Button, move radio and checkbox to buttons.less

dineshkummarc · Apr 14, 2012 · fd06379 · fd06379
1 parent 6da6298
commit fd06379
Show file tree

Hide file tree

Showing 8 changed files with 505 additions and 453 deletions.
diff --git a/demo/buttons.html b/demo/buttons.html
@@ -36,7 +36,8 @@
 
     <style type="text/css">
         body {
-            background: #004050;
+           background: #004050;
+           /* background: #fff;*/
         }
 
         .metro {
@@ -126,7 +127,6 @@
 
     <div class="container metro">
         <div class="row">
-
             <div class="span6">
                 <h1 class="start">Кнопки</h1>
                 <h3>Button (.metro-button)</h3>
@@ -137,32 +137,8 @@ <h3>Button (.metro-button)</h3>
                         <td>class='metro-button'</td>
                     </tr>
                     <tr>
-                        <td><a class="metro-button action" href="#">Button</a></td>
-                        <td>class='metro-button action'</td>
-                    </tr>
-                    <tr>
-                        <td><a class="metro-button cancel" href="#">Button</a></td>
-                        <td>class='metro-button cancel'</td>
-                    </tr>
-                    <tr>
-                        <td><a class="metro-button action alert" href="#">Button</a></td>
-                        <td>class='metro-button action alert'</td>
-                    </tr>
-                    <tr>
-                        <td><a class="metro-button action info" href="#">Button</a></td>
-                        <td>class='metro-button action info'</td>
-                    </tr>
-                    <tr>
-                        <td><a class="metro-button action warning" href="#">Button</a></td>
-                        <td>class='metro-button action warning'</td>
-                    </tr>
-                    <tr>
-                        <td><a class="metro-button action success" href="#">Button</a></td>
-                        <td>class='metro-button action success'</td>
-                    </tr>
-                    <tr>
-                        <td><input type="button" class="metro-button" value="Button"/></td>
-                        <td>tag='input' class='metro-button'</td>
+                        <td><a class="metro-button default" href="#">Button</a></td>
+                        <td>class='metro-button default'</td>
                     </tr>
                     <tr>
                         <td><a class="metro-button disabled" href="#">Button</a></td>
@@ -183,7 +159,7 @@ <h3>Command Button (.metro-command-button)</h3>
                     <span class="subtitle">Use this option for home or work</span>
                 </a>
 
-                <button class="metro-command-button action">
+                <button class="metro-command-button default">
                     <span class="title">Yes, share and connect</span>
                     <span class="subtitle">Use this option for home or work</span>
                 </button>
@@ -193,13 +169,81 @@ <h3>Command Button (.metro-command-button)</h3>
                     <span class="subtitle">Use this option for home or work</span>
                 </button>
 
-                <button class="metro-command-button action" disabled>
+                <button class="metro-command-button default" disabled>
                     <span class="title">Yes, share and connect</span>
                     <span class="subtitle">Use this option for home or work</span>
                 </button>
             </div>
 
         </div>
+        <br />
+        <br />
+        <div class="row">
+            <div class="span4">
+                <h2>Radio Button</h2><br />
+                <form class="metro-form">
+                    <label class="metro-radio">
+                        <input type="radio" name="rb" checked>
+                        <span>Checked</span>
+                    </label>
+                    <label class="metro-radio">
+                        <input type="radio" name="rb">
+                        <span>Unchecked</span>
+                    </label>
+                    <label class="metro-radio">
+                        <input type="radio" name="rb" disabled>
+                        <span>Disabled</span>
+                    </label>
+                    <label class="metro-radio">
+                        <input type="radio" name="rb2" checked disabled>
+                        <span>Disabled Checked</span>
+                    </label>
+                </form>
+            </div>
+            <div class="span4">
+                <h2>Checkbox Button</h2><br />
+                <form class="metro-form">
+                    <label class="metro-check">
+                        <input type="checkbox" name="cb1" checked>
+                        <span>Checked</span>
+                    </label>
+                    <label class="metro-check">
+                        <input type="checkbox" name="cb2">
+                        <span>Unchecked</span>
+                    </label>
+                    <label class="metro-check">
+                        <input type="checkbox" name="cb3" disabled>
+                        <span>Disabled</span>
+                    </label>
+                    <label class="metro-check">
+                        <input type="checkbox" name="cb4" checked disabled>
+                        <span>Disabled Checked</span>
+                    </label>
+                </form>
+            </div>
+            <div class="span4">
+                <h2>Toggle Switch</h2><br />
+                <form class="metro-form">
+                    <label class="metro-switch">
+                        <input type="checkbox" name="sw1" checked>
+                        <span>On</span>
+                    </label>
+                    <label class="metro-switch">
+                        <input type="checkbox" name="sw2">
+                        <span>Off</span>
+                    </label>
+                    <label class="metro-switch">
+                        <input type="checkbox" name="sw3" disabled>
+                        <span>Disabled Off</span>
+                    </label>
+                    <label class="metro-switch">
+                        <input type="checkbox" name="sw4" checked disabled>
+                        <span>Disabled On</span>
+                    </label>
+                </form>
+                <br />
+            </div>
+        </div>
 
         <footer class="footer">
             <p class="pull-right"><a href="#">Наверх</a></p>