Form default margin: 0

kitchen-sink/app/sections/form.html

@@ -6,48 +6,47 @@
     </header>
 
     <article class="scroll">
-            <form>
-                <input type="search" placeholder="type your search" />
-                <a href="#" class="button theme" data-icon="search"></a>
-
-                <div class="six columns">
-                    <label>Address</label>
-                    <input type="text" placeholder="placeholder"/>
-                </div>
-                <div class="three columns right">
-                    <label>Pin Code</label>
-                    <input type="password" value="value" disabled/>
+        <form class="margined">
+            <input type="search" placeholder="type your search" />
+            <a href="#" class="button theme" data-icon="search"></a>
+
+            <div class="six columns">
+                <label>Address</label>
+                <input type="text" placeholder="placeholder"/>
+            </div>
+            <div class="three columns right">
+                <label>Pin Code</label>
+                <input type="password" value="value" disabled/>
+            </div>
+            <textarea></textarea>
+
+            <label>Select your skill</label>
+            <label class="select">
+                <select class="custom">
+                    <option value="1">HTML5 Jedi</option>
+                    <option value="2">Two</option>
+                    <option value="3">Three</option>
+                </select>
+            </label>
+
+
+            <label>Progress of project</label>
+            <div id="progress-normal" data-progress="25%"></div>
+
+            <label>Range 50%</label>
+            <input type="range" placeholder="type your name" />
+
+            <div class="one row">
+                <input type="range" min="0" max="1" class="checkbox left" value="0">
+                <input type="range" min="0" max="1" class="checkbox right active" value="1">
+            </div>
+                <div class="four columns left">
+                    <a href="#" class="button big theme" data-label="Accept" data-icon="check"></a>
                 </div>
-                <textarea></textarea>
-
-                <label>Select your skill</label>
-                <label class="select">
-                    <select class="custom">
-                        <option value="1">HTML5 Jedi</option>
-                        <option value="2">Two</option>
-                        <option value="3">Three</option>
-                    </select>
-                </label>
-
-
-                <label>Progress of project</label>
-                <div id="progress-normal" data-progress="25%"></div>
-
-                <label>Range 50%</label>
-                <input type="range" placeholder="type your name" />
-
-                <div class="one row">
-                    <input type="range" min="0" max="1" class="checkbox left" value="0">
-                    <input type="range" min="0" max="1" class="checkbox right active" value="1">
+                <div class="four columns right">
+                    <a href="#" class="button big red" data-label="Cancel" data-icon="close"></a>
                 </div>
-                    <div class="four columns left">
-                        <a href="#" class="button big theme" data-label="Accept" data-icon="check"></a>
-                    </div>
-                    <div class="four columns right">
-                        <a href="#" class="button big red" data-label="Cancel" data-icon="close"></a>
-                    </div>
-            </form>
-        </ul>
+        </form>
 
 
     </article>

kitchen-sink/index.html

@@ -55,8 +55,8 @@
             </nav>
             <div class="left">
                 <div class="centered title with-subtitle">
-                    Lungo Framework
-                    <small class="subtitle">BETA 2.d</small>
+                    Lungo
+                    <small class="subtitle">HTML5 Cross-Device Framework</small>
                 </div>
                 </div>
         </header>

src/stylesheets/Lungo.widgets.form.less

@@ -15,7 +15,6 @@
 
 
 form {
-    margin: 3%;
 
     &.wrapper input:not([type=checkbox]), textarea, select {
         margin: 3px 0px 3px 0px;

src/stylesheets/Lungo.widgets.less

@@ -36,9 +36,10 @@
     &.right { float: right;}
 }
 
-
 .hidden { display: none; }
 .indented > * { margin: 10px; }
+.margined { margin: 3%; }
+
 .wrapper { padding: 8px 8px; }
 
 .icon.small { font-size: 1.3em; }

src/stylesheets/css/Lungo.widgets.css

@@ -41,6 +41,9 @@
 .indented > * {
   margin: 10px;
 }
+.margined {
+  margin: 3%;
+}
 .wrapper {
   padding: 8px 8px;
 }

src/stylesheets/css/Lungo.widgets.form.css

@@ -9,7 +9,6 @@
 /* DIMENSIONS */
 /* COLORS */
 form {
-  margin: 3%;
   /* @group search */
 
 }
@@ -77,13 +76,13 @@ form input[type=search] {
   width: 86%;
   display: inline-block;
 }
-form input[type=search]  + .button {
+form input[type=search] + .button {
   float: right;
   padding: 0px;
   width: 11%;
   height: 30px;
 }
-form input[type=search]  + .button .icon {
+form input[type=search] + .button .icon {
   top: -3px;
   float: none;
 }