Enhaced forms

example/app/sections/form.html

@@ -1,50 +1,140 @@
 <section id="form" data-transition="slide">
-    <header data-title="Form Elements" data-back="home">
-        <nav class="right">
-            <button data-view-article="form-extras" data-label="Extras" data-article="form-normal"></button>
-        </nav>
-    </header>
+    <header data-title="Form Elements" data-back="home"></header>
 
-    <article id="form-normal" class="active">
+    <nav data-control="groupbar">
+        <a href="#" data-view-article="form-normal" data-label="Profile" class="active"></a>
+        <a href="#" data-view-article="form-indented" data-label="Inbox"></a>
+        <a href="#" data-view-article="form-special" data-label="Map"></a>
+    </nav>
+
+    <article id="form-normal" class="scroll">
         <div class="form">
+            <!-- LABEL + INPUT -->
+            <fieldset>
+                <label>label</label>
+                <input type="text" placeholder="value">
+
+                <label>label</label>
+                <input type="text" placeholder="value on right" class="text align_right error">
+
+                <label class="absolute">label</label>
+                <input type="text" placeholder="value on center" class="large text align_center">
+
+                <label>label</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>label</label>
+                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
+            </fieldset>
+
+            <!-- INPUT -->
+            <fieldset>
+                <input type="text" id="description" class="text align_center" placeholder="value"/>
+            </fieldset>
+            <fieldset>
+                <textarea placeholder="Write something..."></textarea>
+            </fieldset>
+            <fieldset>
+                <label class="select">
+                    <select class="custom">
+                        <option value="1">HTML5 Jedi</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </label>
+            </fieldset>
+
+            <fieldset>
+                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
+            </fieldset>
+
             <fieldset data-icon="plus">
-                <label>To:</label>
-                <input type="text" />
+                <label>label</label>
+                <input type="text" value="value" />
             </fieldset>
+        </div>
+    </article>
+
+    <article id="form-indented" class="indented scroll">
+        <div class="form">
+            <!-- LABEL + INPUT -->
+            <label>label +  input</label>
+            <fieldset>
+                <label>label</label>
+                <input type="text" placeholder="value">
+
+                <label>label</label>
+                <input type="text" placeholder="value on right" class="text align_right error">
+
+                <label class="absolute">label</label>
+                <input type="text" placeholder="value on center" class="large text align_center">
+
+                <label>label</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>label</label>
+                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
+            </fieldset>
+
+            <!-- INPUT -->
+            <label>input</label>
             <fieldset>
-                <label>Cc/Cco:</label>
-                <input type="text" />
+                <input type="text" id="description" class="text align_center" placeholder="value"/>
             </fieldset>
-            <fieldset data-icon="pencil">
-                <label>Subject:</label>
-                <input type="text" />
+            <fieldset>
+                <textarea placeholder="Write something..."></textarea>
             </fieldset>
             <fieldset>
-                <label>Summary:</label>
-                <br/>
-                <input type="text" />
+                <label class="select">
+                    <select class="custom">
+                        <option value="1">HTML5 Jedi</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </label>
             </fieldset>
+
             <fieldset>
-                <textarea></textarea>
+                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
             </fieldset>
 
+
+            <label>label + input +  icon</label>
+            <fieldset data-icon="plus">
+                <label>label</label>
+                <input type="text" value="value" />
+            </fieldset>
         </div>
     </article>
 
-    <article id="form-extras" class=" scroll">
-        <form>
+    <article id="form-special" class="indented scroll">
+        <div class="form" >
+            <label>Specials</label>
             <fieldset data-icon="search">
                 <input type="search" placeholder="Search..."/>
             </fieldset>
-        </form>
-        <form  class="margined">
-            <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 class="layout horizontal">
+                <div>
+                    <label>Address</label>
+                    <input type="text" placeholder="placeholder"/>
+                </div>
+                <div>
+                    <label>Pin Code</label>
+                    <input type="password" value="value" disabled/>
+                </div>
             </div>
 
             <label>Select your skill</label>
@@ -66,7 +156,7 @@
             <br/>
             <input type="range" min="0" max="1" class="checkbox active" value="1">
 
-            <button data-view-article="form-normal" class="anchor accept" data-label="Return to normal Elements"></button>
-        </form>
+            <button class="anchor accept" data-label="Return to normal Elements"></button>
+        </div>
     </article>
 </section>

example/app/sections/layout.html

@@ -1,5 +1,5 @@
 <section id="layout" data-transition="slide">
-    <header data-title="Layout" class="extended" data-back="home">
+    <header data-title="Layout" data-back="home">
         <nav class="right">
             <button data-view-section="splash" data-async="app/sections/splash.html" data-label="splash"></button>
         </nav>

example/index.html

@@ -57,7 +57,6 @@
 </head>
 
 <body class="app">
-
     <section id="main" data-transition="" data-aside="features" class="drag">
         <header>
             <nav>
@@ -66,13 +65,14 @@
             <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
             <nav class="right">
                 <a href="#" data-action="twitter" class="button" data-icon="brand twitter" data-article="main-article"></a>
+                <!--
                 <a href="#" data-action="twitter" class="button" data-icon="brand twitter" data-article="main-article" data-label="twitter"></a>
                 <a href="#" data-action="twitter" class="button" data-article="main-article" data-label="twitter"></a>
-                <!--
+
                 <button data-action="twitter" data-icon="brand twitter" data-article="main-article"></button>
                 <button data-action="twitter" data-icon="brand twitter" data-article="main-article" data-label="twitter"></button>
                 <button data-action="twitter" data-article="main-article" data-label="twitter"></button>
-            -->
+                -->
             </nav>
         </header>
 
@@ -120,7 +120,6 @@
     <!-- Lungo dependencies -->
     <script src="components/quojs/quo.js"></script>
     <script src="components/lungo.brownie/lungo.js"></script>
-
     <!-- LungoJS - Sandbox App -->
     <script>
         Lungo.init({

src/stylesheets/constants.styl

@@ -16,3 +16,8 @@ FONT_SIZE_BIG          = 1.2em
 
 LIST_PADDING           = 14px
 LIST_PADDING_HORIZONTAL= (LIST_PADDING / 1.25)
+
+INDENT                 = 3%
+
+FORM_HEIGHT = 30px
+FORM_PROGRESS_HEIGHT = (FORM_HEIGHT / 2)

src/stylesheets/lungo.widgets.form.styl

@@ -9,27 +9,31 @@
 
 @import "constants.styl"
 
-FORM_INPUT_HEIGHT = 30px
-PROGRESS_HEIGHT = 15px
-
 form, .form
-  & label
-    font-size: 1.1em
 
-  & input, textarea, select, .progress
+  & label:not(.select)
+    display: inline-block
+    line-height: FORM_HEIGHT
+    text-indent: 8px
+
+  & input, textarea, select, .progress, label.select
     margin-bottom: 8px
     font-size: FONT_SIZE_BIG
+    &.large
+      font-size: (FONT_SIZE_BIG * 1.2)
 
-  & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea
+  & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea, label.select
     display: block
     width: 100%
     padding: 0px 6px
-    height: FORM_INPUT_HEIGHT
+    height: FORM_HEIGHT
     transition all 0.15s linear
     font-family: inherit
     -webkit-appearance: none
     -webkit-user-select: text
     -webkit-font-smoothing: antialiased
+    border: none
+    border-radius 0px
     &:focus
       outline: none !important
 
@@ -38,72 +42,84 @@ form, .form
 
   & fieldset
     padding: 8px 8px 0 8px
-    & label
-      display: inline-block
+
+    & label:not(.select)
       float: left
       width: 20%
-      line-height: FORM_INPUT_HEIGHT
-    & label + input
+      text-indent: 0px
+      &.absolute
+        position: absolute
+
+    & label:not(.absolute) + input, label:not(.absolute) + label.select
       width: 80% !important
+
     & .icon
       position: absolute
       font-size: FONT_SIZE_BIG
-      line-height: FORM_INPUT_HEIGHT
-      right: 8px
+      line-height: FORM_HEIGHT
+      right: INDENT
     & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea
       box-shadow none
       border: none
-      padding: 0
+      padding: 0px
       &, &:focus
         background: none
 
+  .indented & fieldset
+    & label:not(.select)
+      width: 25% !important
+    & label:not(.absolute) + input, label:not(.absolute) + label.select
+      width: 75% !important
+    & .icon
+      right: (INDENT * 2)
+
   & label.select
     position: relative
     display: inline-block
-    width: 100%
     font-size: inherit
     line-height: inherit
+    padding-left: 0px
 
   & .select:after
     position: absolute
     top: 0
     right: 0
-    height: FORM_INPUT_HEIGHT
-    width: FORM_INPUT_HEIGHT
+    height: FORM_HEIGHT
+    width: FORM_HEIGHT
+    font-size: FONT_SIZE_BIG
     content: "▼"
     pointer-events: none
     text-align: center
-    line-height: 32px
+    line-height: FORM_HEIGHT
 
   & input[type=range]
     -webkit-appearance: none
     outline: none
 
     &:not(.checkbox)
-      height: PROGRESS_HEIGHT
+      height: FORM_PROGRESS_HEIGHT
       width: 100%
       padding: 0px
-      margin-top: 2px
       border: 0
       &::-webkit-slider-thumb
         top: -1px
 
     &.checkbox
       width: 64px
-      height: FORM_INPUT_HEIGHT
-      line-height: FORM_INPUT_HEIGHT
+      height: FORM_HEIGHT
+      line-height: FORM_HEIGHT
       padding: 0px 1px
       border-radius 2px
 
       &:after
-        top: -(FORM_INPUT_HEIGHT - 2)
+        top: -(FORM_HEIGHT - 2)
         position: relative
         content: "OFF"
         float: right
         padding: 0 8px
         font-weight: 700
         font-size: 12px
-        line-height: (FORM_INPUT_HEIGHT - 2)
+        line-height: (FORM_HEIGHT - 2)
 
       &.active:after
         float: left
@@ -131,8 +147,8 @@ form, .form
   & .progress
     width: 100%
     & .bar
-      height: PROGRESS_HEIGHT
-      line-height: PROGRESS_HEIGHT
+      height: FORM_PROGRESS_HEIGHT
+      line-height: FORM_PROGRESS_HEIGHT
       display: block
       & .value
         display: block

src/stylesheets/lungo.widgets.styl

@@ -46,27 +46,28 @@
 
 .hidden
   display: none
+.block
+  display: block
 
 .indented > *
-  padding: 10px
-
-.margined
-  margin: 3%
+  padding: INDENT
 
+/*
 .wrapper
   padding: 8px 8px
 
 .icon.small
   font-size: 1.3em
 
+
 .framed
   border: 2px solid #fff
 
 .round
   border-radius( 4px )
+*/
+
 
-.block
-  display: block
 
 /* ================================  TAG  ================================ */
 .tag
@@ -83,7 +84,7 @@ size = 5px
     margin-bottom: size
 
 
-/* ================================  .layout  ================================ */
+/* ================================  .LAYOUT  ================================ */
 .layout
   display-box()
   height:  inherit !important
@@ -115,37 +116,3 @@ size = 5px
   margin: 0
   // article
   //   display: block !important
-
-/* ================================  TEXT  ================================ */
-.text
-  &.thin
-    font-weight: 300
-  &.normal
-    font-weight: 400
-  &.bold
-    font-weight: 600
-  &.extra-bold
-    font-weight: 700
-  &.italic
-    font-style: italic
-  &.underline
-    text-decoration: underline
-  &.line-through
-    text-decoration: line-through
-  &.align_left
-    text-align: left
-  &.align_right
-    text-align: right
-  &.align_center
-    text-align: center
-  &.align_justify
-    text-align: justify
-
-  &.tiny
-    font-size: 0.8em
-  &.small
-    font-size: FONT_SIZE_SMALL
-  &.big
-    font-size: FONT_SIZE_BIG
-  &.opacity
-    opacity: 0.5

src/stylesheets/lungo.widgets.text.styl

@@ -0,0 +1,43 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Widgets
+ * @class text
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.styl"
+
+.text
+  &.thin
+    font-weight: 300
+  &.normal
+    font-weight: 400
+  &.bold
+    font-weight: 600
+  &.extra-bold
+    font-weight: 700
+  &.italic
+    font-style: italic
+  &.underline
+    text-decoration: underline
+  &.line-through
+    text-decoration: line-through
+  &.align_left
+    text-align: left
+  &.align_right
+    text-align: right
+  &.align_center
+    text-align: center
+  &.align_justify
+    text-align: justify
+
+  &.tiny
+    font-size: 0.8em
+  &.small
+    font-size: FONT_SIZE_SMALL
+  &.big
+    font-size: FONT_SIZE_BIG
+  &.opacity
+    opacity: 0.5

src/stylesheets/theme.lungo.styl

@@ -282,9 +282,7 @@ article
 
 
 /* -------------------------- FORMS -------------------------- */
-FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
-FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
-FORM_border_color = #D0D4C6
+FORM_border_color = #e5e5e5
 
 form, .form
   & label
@@ -300,31 +298,26 @@ form, .form
   & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea
     background-color: white
     color: rgba(0, 0, 0, 0.75)
-    border: 1px solid #ddd
-    box-shadow inset 0 1px 2px rgba(0, 0, 0, 0.1)
-    border-radius (0px)
     &.error, &:required
-      border-color: color_alert
-      color: color_alert
-      background-color: rgba(198, 15, 19, 0.1)
-    &:focus
-      background: #FAFAFA;
-      border-color: THEME;
+      color: COLOR_cancel
+      background-color: lighten(COLOR_cancel, 75%)
+      font-weight: 700
+    &:focus, &:active, &:hover
+      background: lighten(THEME, 95%)
       color: rgba(0, 0, 0, 0.75)
     &[disabled]
-        background: #eee
-        border-color: #aaa
-        color: #999
+      background: darken(FORM_border_color, 10%)
+      color: #999
+    &.large
+      font-weight: 700
+
 
   & .select:after
-    background: FORM_border_color
-    color: white
-    border-top-right-radius: FORM_radius
-    border-bottom-right-radius: FORM_radius
+    background: darken(FORM_border_color, 10%)
+    color: #fff
 
   & input[type=range]
-    box-shadow  FORM_shadow_form
-
+    border-radius: 0px
     &:not(.checkbox)
       background-color: #ddd
       &:active