New .splash elements

examples/test/boletus.html

@@ -47,26 +47,16 @@
     <section id="login" data-transition="slide">
         <article class="-indented splash ">
 
-            <!--
             <h1>Boletus</h1>
-            <label>Login para acceder a ofertas increibles</label>
-            -->
-
-            <form>
-                <input type="text" class="rounded" placeholder="Your email" id="txt-signup-mail" value=""/>
-                <input type="password" class="rounded"  placeholder="Your username" id="txt-signup-name" value=""/>
-                <input type="password" class="rounded"  placeholder="Your username" id="txt-signup-name" value=""/>
-                <a href="#main" data-target="section" class="button big green" data-icon="user">Login</a>
-
-            </form>
-
             <form>
-                <input type="text" class="" placeholder="Your email" id="txt-signup-mail" value=""/>
-                <input type="password" class=""  placeholder="Your username" id="txt-signup-name" value=""/>
+                <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=""/>
                 <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>
             </form>
-
             <div class="copyright">This App is made by TAPQUO</div>
         </article>
     </section>

examples/test/index.html

@@ -219,7 +219,7 @@
         </article>
 
         <article id="nav-2" class="list indented scroll">
-            <ul class="form">
+            <ul class="form minimal">
                 <li data-loading="black big"></li>
                 <li id="loading-code" style="background-color: grey;"></li>
                 <li class="padding">

src/stylesheets/Lungo.widgets.form.less

@@ -12,17 +12,23 @@
 
 @input-height: 29px;
 
-form { }
+form {
+    & .minimal {
+        input:not([type=checkbox]), textarea, select {
+
+        }
+    }
+}
 
 label {
-    font-size: 0.9em;
+    font-size: 0.85em;
 }
 
 input:not([type=checkbox]), textarea, select {
     display: block;
-    width: 97%;
-    // margin: 0 0 2px;
-    padding: 1% 1.5% ;
+    width: 96%;
+    margin: 0 0 6px;
+    padding: 0.5% 2% ;
     height: @input-height;
     font-size: 14px;
     font-weight: bold;
@@ -33,12 +39,15 @@ input:not([type=checkbox]), textarea, select {
 
 
     & + input {
-        background: red !important;
+        //background: red !important;
     }
 
 
     &.rounded {
         margin: 0px;
+        width: 94%;
+        padding: 1.0% 3% ;
+
         &:first-of-type {
             .border-radius(8px 8px 0px 0px);
         }

src/stylesheets/Lungo.widgets.less

@@ -29,8 +29,8 @@
     }
 }
 
-.left { float: left; }
-.right { float: right;}
+.left, .onleft { float: left; }
+.right, .onright { float: right;}
 .hidden { display: none; }
 .indented > * {
     margin: 10px;

src/stylesheets/Lungo.widgets.splash.less

@@ -11,12 +11,8 @@
     text-align: center;
     font-size: 1.2em;
 
-    & > * {
-        // margin: 24px;
-    }
-
     & > form {
-        margin: 32px;
+        margin: 28px;
     }
 
     & img {
@@ -25,9 +21,7 @@
     }
 
     & h1 {
-        // margin: 92px auto 16px;
-        margin-top: 25%;
-        text-align: center;
+        margin-top: 20%;
         font-size: 2.2em;
         font-weight: bold;
     }

src/stylesheets/css/Lungo.widgets.css

@@ -23,10 +23,12 @@
 .scroll.horizontal  > *  > * {
   float: left;
 }
-.left {
+.left,
+.onleft {
   float: left;
 }
-.right {
+.right,
+.onright {
   float: right;
 }
 .hidden {

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

@@ -9,14 +9,15 @@
 /* DIMENSIONS */
 /* COLORS */
 label {
-  font-size: 0.9em;
+  font-size: 0.85em;
 }
 input:not([type=checkbox]),
 textarea,
 select {
   display: block;
-  width: 97%;
-  padding: 1% 1.5% ;
+  width: 96%;
+  margin: 0 0 6px;
+  padding: 0.5% 2% ;
   height: 29px;
   font-size: 14px;
   font-weight: bold;
@@ -24,15 +25,12 @@ select {
   -webkit-user-select: text;
   -webkit-font-smoothing: antialiased;
 }
-input:not([type=checkbox])  + input,
-textarea  + input,
-select  + input {
-  background: red !important;
-}
 input:not([type=checkbox]).rounded,
 textarea.rounded,
 select.rounded {
   margin: 0px;
+  width: 94%;
+  padding: 1.0% 3% ;
 }
 input:not([type=checkbox]).rounded:first-of-type,
 textarea.rounded:first-of-type,

src/stylesheets/css/Lungo.widgets.splash.css

@@ -11,15 +11,14 @@
   font-size: 1.2em;
 }
 .splash  > form {
-  margin: 32px;
+  margin: 28px;
 }
 .splash img {
   max-width: 206px;
   margin: 92px auto 32px;
 }
 .splash h1 {
-  margin-top: 25%;
-  text-align: center;
+  margin-top: 20%;
   font-size: 2.2em;
   font-weight: bold;
 }