New classes for form: .rounded & .wrapper

examples/test/boletus.html

@@ -48,11 +48,11 @@
         <article class="-indented splash ">
 
             <h1>Boletus</h1>
-            <form>
+            <form class="wwrapper arounded">
                 <label>hello humanoid!! type your credentials</label>
-                <input type="text" class="rounded" placeholder="Username" id="txt-signup-mail" value=""/>
-                <input type="text" class="rounded"  placeholder="Email" id="txt-signup-name" value=""/>
-                <input type="password" class="rounded"  placeholder="Password" id="txt-signup-name" value=""/>
+                <input type="text" placeholder="Username" id="txt-signup-mail" value=""/>
+                <input type="text" placeholder="Email" id="txt-signup-name" value=""/>
+                <input type="password" placeholder="Password" id="txt-signup-name" value=""/>
                 <a href="#main" data-target="section" class="button big green" data-icon="user">Login</a>
                 <label>or</label>
                 <a href="#main" data-target="section" class="button big facebook" data-icon="plus">Signup with Facebook</a>

src/stylesheets/Lungo.widgets.form.less

@@ -13,21 +13,37 @@
 @input-height: 29px;
 
 form {
-    & .minimal {
-        input:not([type=checkbox]), textarea, select {
+    &.wrapper {
+        & input:not([type=checkbox]), textarea, select {
+            margin: 3px 0px 3px 0px;
+        }
+    }
 
+    @rounded-radius: 8px;
+    &.rounded {
+        & input:not([type=checkbox]), textarea, select {
+            width: 94%;
+            padding: 1.0% 3% ;
+
+            &:first-of-type { .border-radius(@rounded-radius @rounded-radius 0px 0px); }
+            &:last-of-type  { .border-radius(0px 0px @rounded-radius @rounded-radius); }
+        }
+
+        & .button {
+            .border-radius(@rounded-radius);
         }
     }
 }
 
-label {
+label:not(.select) {
     font-size: 0.85em;
+    line-height: 1.8em;
 }
 
 input:not([type=checkbox]), textarea, select {
     display: block;
     width: 96%;
-    margin: 0 0 6px;
+    // margin: 0 0 6px;
     padding: 0.5% 2% ;
     height: @input-height;
     font-size: 14px;
@@ -36,29 +52,6 @@ input:not([type=checkbox]), textarea, select {
     -webkit-appearance: none;
     -webkit-user-select: text;
     -webkit-font-smoothing: antialiased;
-
-
-    & + input {
-        //background: red !important;
-    }
-
-
-    &.rounded {
-        margin: 0px;
-        width: 94%;
-        padding: 1.0% 3% ;
-
-        &:first-of-type {
-            .border-radius(8px 8px 0px 0px);
-        }
-        &:last-of-type {
-            .border-radius(0px 0px 8px 8px);
-        }
-    }
-
-    &:last-of-type {
-        // margin-bottom: 10px !important;
-    }
 }
 
 textarea {

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

@@ -8,33 +8,20 @@
  */
 /* DIMENSIONS */
 /* COLORS */
-label {
-  font-size: 0.85em;
-}
-input:not([type=checkbox]),
-textarea,
-select {
-  display: block;
-  width: 96%;
-  margin: 0 0 6px;
-  padding: 0.5% 2% ;
-  height: 29px;
-  font-size: 14px;
-  font-weight: bold;
-  -webkit-appearance: none;
-  -webkit-user-select: text;
-  -webkit-font-smoothing: antialiased;
-}
-input:not([type=checkbox]).rounded,
-textarea.rounded,
-select.rounded {
-  margin: 0px;
+form.wrapper input:not([type=checkbox]),
+form.wrapper textarea,
+form.wrapper select {
+  margin: 3px 0px 3px 0px;
+}
+form.rounded input:not([type=checkbox]),
+form.rounded textarea,
+form.rounded select {
   width: 94%;
   padding: 1.0% 3% ;
 }
-input:not([type=checkbox]).rounded:first-of-type,
-textarea.rounded:first-of-type,
-select.rounded:first-of-type {
+form.rounded input:not([type=checkbox]):first-of-type,
+form.rounded textarea:first-of-type,
+form.rounded select:first-of-type {
   -webkit-border-radius: 8px 8px 0px 0px;
   -moz-border-radius: 8px 8px 0px 0px;
   border-radius: 8px 8px 0px 0px;
@@ -48,9 +35,9 @@ select.rounded:first-of-type {
   -moz-background-clip: padding;
   background-clip: padding-box;
 }
-input:not([type=checkbox]).rounded:last-of-type,
-textarea.rounded:last-of-type,
-select.rounded:last-of-type {
+form.rounded input:not([type=checkbox]):last-of-type,
+form.rounded textarea:last-of-type,
+form.rounded select:last-of-type {
   -webkit-border-radius: 0px 0px 8px 8px;
   -moz-border-radius: 0px 0px 8px 8px;
   border-radius: 0px 0px 8px 8px;
@@ -64,6 +51,37 @@ select.rounded:last-of-type {
   -moz-background-clip: padding;
   background-clip: padding-box;
 }
+form.rounded .button {
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+label:not(.select) {
+  font-size: 0.85em;
+  line-height: 1.8em;
+}
+input:not([type=checkbox]),
+textarea,
+select {
+  display: block;
+  width: 96%;
+  padding: 0.5% 2% ;
+  height: 29px;
+  font-size: 14px;
+  font-weight: bold;
+  -webkit-appearance: none;
+  -webkit-user-select: text;
+  -webkit-font-smoothing: antialiased;
+}
 textarea {
   min-height: 48px;
 }