Form elements (more & more clean)

kitchen-sink/app/sections/form.html

@@ -3,13 +3,47 @@
         <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
+        <nav class="right">
+            <a href="#" data-router="article" class="button" data-icon="share" data-label="Share"></a>
+        </nav>
     </header>
 
-    <article class="active scroll">
-        <form class="margined">
-            <input type="search" placeholder="type your search" />
-            <a href="#" class="button theme" data-icon="search"></a>
+    <article id="form-normal" class="active">
+        <div class="form">
+            <fieldset data-icon="plus">
+                <label>To:</label>
+                <input type="text" />
+            </fieldset>
+            <fieldset>
+                <label>Cc/Cco:</label>
+                <input type="text" />
+            </fieldset>
+            <fieldset data-icon="pencil">
+                <label>Subject:</label>
+                <input type="text" />
+            </fieldset>
+            <fieldset>
+                <label>Summary:</label>
+                <br/>
+                <input type="text" />
+            </fieldset>
+            <fieldset>
+                <textarea></textarea>
+            </fieldset>
+
+
+            <a href="#form-extras" data-router="article" class="button anchor accept" data-label="View Extra Elements"></a>
 
+        </div>
+    </article>
+
+    <article id="form-extras" class=" scroll">
+        <form>
+            <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"/>
@@ -18,7 +52,6 @@
                 <label>Pin Code</label>
                 <input type="password" value="value" disabled/>
             </div>
-            <textarea></textarea>
 
             <label>Select your skill</label>
             <label class="select">
@@ -29,25 +62,17 @@
                 </select>
             </label>
 
-
-            <label>Progress of project</label>
+            <label>Progress</label>
             <div id="progress-normal" data-progress="25%"></div>
 
-            <label>Range 50%</label>
+            <label>Range</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 s">
-                    <a href="#" class="button anchosr accept" data-label="Accept" data-icon="check"></a>
-                </div>
-                <div class="four columns s">
-                    <a href="#" class="button anchsor cancel" data-label="Cancel" data-icon="close"></a>
-                </div>
-        </form>
-
+            <label>Checkbox</label>
+            <br/>
+            <input type="range" min="0" max="1" class="checkbox active" value="1">
 
+            <a href="#form-normal" data-router="article" class="button anchor accept" data-label="Return to normal Elements"></a>
+        </form>
     </article>
 </section>

kitchen-sink/index.html

@@ -82,30 +82,20 @@
             </nav>
         </header>
 
-        <article id="second-article" class=" list  scroll">
+        <article id="main-article" class="active list indented scroll">
             <ul>
-                <li class="feature">
-                    <div class="right  ">15:49</div>
-                    <strong class="text bold">Enrique Amodeo Rubio</strong>
-                    <div class="text small">[madridJS] [JOB] Front Developer Position</div>
-                    <small>
-                        <div class="right tag ">theme</div>
-                        Hola a todos, nos llega esta oportunida muy inteeresante
-                    </small>
+                <li class="dark">
+                    <strong>
+                    A framework for developers who want to design, build and share cross device apps.
+                </strong>
                 </li>
                 <li class="feature">
-                    <div class="right ">15:49</div>
-                    <strong class="text normal">Enrique Amodeo Rubio</strong>
-                    <small class="text small">[madridJS] [JOB] Front Developer Position</small>
-                    <small>
-                        <div class="right tag cancel">important</div>
-                        Hola a todos, nos llega esta oportunida muy inteeresante
-                    </small>
+                    <strong>HTML5 Optimized Apps</strong>
+                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
                 </li>
                 <li class="feature">
-                    <div class="right tag accept">sended</div>
-                    <strong class="text bold">Open Source Project</strong>
-                    <p class="text thin">Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.</p>
+                    <strong>Open Source Project</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
                 </li>
                 <li class="feature">
                     <strong>Powerfull JavaScript API</strong>
@@ -118,25 +108,35 @@
 
                 <li>
                     <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
-                    <button data-icon="brand twitter" class="anchor theme" data-label="Tweet me"></button>
+
                 </li>
             </ul>
         </article>
 
-        <article id="main-article" class="active list indented scroll">
+        <article id="second-article" class="list  scroll">
             <ul>
-                <li class="dark">
-                    <strong>
-                    A framework for developers who want to design, build and share cross device apps.
-                </strong>
+                <li class="feature">
+                    <div class="right  ">15:49</div>
+                    <strong class="text bold">Enrique Amodeo Rubio</strong>
+                    <div class="text small">[madridJS] [JOB] Front Developer Position</div>
+                    <small>
+                        <div class="right tag ">theme</div>
+                        Hola a todos, nos llega esta oportunida muy inteeresante
+                    </small>
                 </li>
                 <li class="feature">
-                    <strong>HTML5 Optimized Apps</strong>
-                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
+                    <div class="right ">15:49</div>
+                    <strong class="text normal">Enrique Amodeo Rubio</strong>
+                    <small class="text small">[madridJS] [JOB] Front Developer Position</small>
+                    <small>
+                        <div class="right tag cancel">important</div>
+                        Hola a todos, nos llega esta oportunida muy inteeresante
+                    </small>
                 </li>
                 <li class="feature">
-                    <strong>Open Source Project</strong>
-                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                    <div class="right tag accept">sended</div>
+                    <strong class="text bold">Open Source Project</strong>
+                    <p class="text thin">Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.</p>
                 </li>
                 <li class="feature">
                     <strong>Powerfull JavaScript API</strong>
@@ -149,7 +149,7 @@
 
                 <li>
                     <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
-
+                    <button data-icon="brand twitter" class="anchor theme" data-label="Tweet me"></button>
                 </li>
             </ul>
         </article>

src/attributes/Lungo.Attributes.Data.js

@@ -9,10 +9,6 @@
  */
 
 Lungo.Attributes.Data = {
-    search: {
-        selector: '*',
-        html: '<input type="search" placeholder="{{value}}"/><a href="#" class="button" data-icon="search"></a>'
-    },
     count: {
         selector: '*',
         html: '<span class="tag theme count">{{value}}</span>'

src/stylesheets/Lungo.theme.default.styl

@@ -250,7 +250,14 @@ FORM_border_color = #D0D4C6
 
 form, .form
   & label
-    color: #999
+    color: #aaa
+    font-weight: 300
+
+  & fieldset
+    background: #fff
+    border-bottom: solid 1px #eee
+    & .icon
+      color: #ccc
 
   & 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
@@ -282,11 +289,10 @@ form, .form
     border-radius FORM_radius
 
     &:not(.checkbox)
-      background-color: #c7c7c7
+      background-color: #ddd
       &:active
         background-color: THEME_light
 
-
     &.checkbox
       background-color: #aaaaaa
       color: rgba(255,255,255,0.6)
@@ -295,25 +301,14 @@ form, .form
 
     &::-webkit-slider-thumb
       border-radius: FORM-border-radius
-      background: #fff
+      background: #eee
+      box-shadow(inset 0 0 1px #bbb)
 
     &::-webkit-slider-thumb::after
-      background: #ddd
-
+      background: #fff
 
   & .progress
-    .labels
-      font-size: 12px
-      line-height: 18px
-      color: #858585
-
     & .bar
-      background: #c7c7c7
+      background-color: #ddd
       & .value
-        background-color: THEME-light
-        & .label
-          float: right
-          margin-right: 3px
-          color: rgba(0,0,0,0.6)
-          text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important
-          font-size: 12px
+        background-color: THEME_light

src/stylesheets/Lungo.widgets.form.styl

@@ -10,17 +10,16 @@
 @import "import/constants.styl"
 @import "import/vendor.styl"
 
-
 FORM_INPUT_HEIGHT = 30px
-ROUNDED_RADIUS = 2px
-PROGRESS_HEIGHT = 12px
+PROGRESS_HEIGHT = 15px
 
 form, .form
-  & label:not(.select)
-    font-size: 0.9em
+  & label
+    font-size: 1.1em
 
   & input, textarea, select, .progress
     margin-bottom: 8px
+    font-size: FONT_SIZE_BIG
 
   & 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
     display: block
@@ -29,52 +28,53 @@ form, .form
     height: FORM_INPUT_HEIGHT
     transition all 0.15s linear
     font-family: inherit
-    font-size: inherit
     -webkit-appearance: none
     -webkit-user-select: text
     -webkit-font-smoothing: antialiased
     &:focus
-      outline: none !important;
+      outline: none !important
 
   & textarea
-    min-height: 48px
-
-  input[type=search]
-    width: 89%
-    display: inline-block
-
-    & + .button
-      float: right
-      padding: 0px
-      width: 10%
-      height: FORM_INPUT_HEIGHT
-      line-height: FORM_INPUT_HEIGHT
-
-  & select
-    width: 100%
-    height: FORM_INPUT_HEIGHT
+    min-height: 64px
 
-    label.select
-      position: relative
+  & fieldset
+    padding: 8px 8px 0 8px
+    & label
       display: inline-block
-      width: 100%
-
-    .select:after
-      text-align: center
+      float: left
+      width: 20%
+      line-height: FORM_INPUT_HEIGHT
+    & label + input
+      width: 80% !important
+    & .icon
       position: absolute
-      top: 3px
-      right: 0
-      bottom: 0
-      height: FORM_INPUT_HEIGHT
-      width: FORM_INPUT_HEIGHT
-
-      content: "▼"
-      pointer-events:none
-      line-height: 33px
-
-    .no-pointer-events .select:after
-      content: none
+      font-size: FONT_SIZE_BIG
+      line-height: FORM_INPUT_HEIGHT
+      right: 8px
+    & 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
+      &, &:focus
+        background: none
+
+  & label.select
+    position: relative
+    display: inline-block
+    width: 100%
+    font-size: inherit
+    line-height: inherit
 
+  & .select:after
+    position: absolute
+    top: 0
+    right: 0
+    height: FORM_INPUT_HEIGHT
+    width: FORM_INPUT_HEIGHT
+    content: "▼"
+    pointer-events: none
+    text-align: center
+    line-height: 32px
 
   & input[type=range]
     -webkit-appearance: none
@@ -86,34 +86,30 @@ form, .form
       padding: 0px
       margin-top: 2px
       border: 0
-      cursor: ew-resize
-
       &::-webkit-slider-thumb
         top: -1px
 
     &.checkbox
-      width:70px
-      height: 30px
+      width: 70px
+      height: FORM_INPUT_HEIGHT
+      line-height: FORM_INPUT_HEIGHT
       padding: 1px 2px
       font-family:'lungojsicon'
 
       &:after
-        content: "\0055"
+        top: -(FORM_INPUT_HEIGHT - 1)
         position: relative
+        content: "\0055"
         float: right
-        top: -23px
         padding: 0 8px
-        font-size: 1.5em
 
       &.active:after
         float: left
         content: "\0051"
-        font-size: 1.6em
-
 
     &::-webkit-slider-thumb
         -webkit-appearance: none
-        width: 30px
+        width: FORM_INPUT_HEIGHT
         height: 24px
         position:relative
         margin:2px 2px 2px 2px
@@ -123,44 +119,26 @@ form, .form
       width:12px
       height:12px
       display:block
-      content:""
-      position:relative
+      content: ""
+      position: relative
       border-radius: 8px
-      z-index:9
-      top:6px
-      left:9px
-
+      z-index: 9
+      top: 6px
+      left: 9px
 
   & .progress
     width: 100%
-    margin-bottom: 8px
-
-    .labels
-      font-size: 1.0em
-      display: block
-      & span:last-child
-        float: right
-
-
     & .bar
       height: PROGRESS_HEIGHT
       line-height: PROGRESS_HEIGHT
       display: block
-
       & .value
-        display:block
+        display: block
         height: inherit
         width: 0%
-        transition( width 500ms DEFAULT_TRANSITION )
-
-        & .label
-          float: right
-          margin-right: 4px
-          font-size: 0.75em
-
+        transition(width TRANSITION_TIME DEFAULT_TRANSITION)
 
 @media screen and (-webkit-min-device-pixel-ratio:0)
   .custom-select
     select
       padding-right:30px
-

src/stylesheets/css/Lungo.theme.default.css

@@ -356,7 +356,17 @@ button.cancel,
 /* -------------------------- BUTTONS -------------------------- */
 form label,
 .form label {
-  color: #999;
+  color: #aaa;
+  font-weight: 300;
+}
+form fieldset,
+.form fieldset {
+  background: #fff;
+  border-bottom: solid 1px #eee;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  color: #ccc;
 }
 form input[type="text"],
 .form input[type="text"],
@@ -518,7 +528,7 @@ form input[type=range],
 }
 form input[type=range]:not(.checkbox),
 .form input[type=range]:not(.checkbox) {
-  background-color: #c7c7c7;
+  background-color: #ddd;
 }
 form input[type=range]:not(.checkbox):active,
 .form input[type=range]:not(.checkbox):active {
@@ -538,33 +548,20 @@ form input[type=range]::-webkit-slider-thumb,
   -webkit-border-radius: FORM-border-radius;
   -moz-border-radius: FORM-border-radius;
   border-radius: FORM-border-radius;
-  background: #fff;
+  background: #eee;
+  -webkit-box-shadow: inset 0 0 1px #bbb;
+  -moz-box-shadow: inset 0 0 1px #bbb;
+  box-shadow: inset 0 0 1px #bbb;
 }
 form input[type=range]::-webkit-slider-thumb::after,
 .form input[type=range]::-webkit-slider-thumb::after {
-  background: #ddd;
-}
-form .progress .labels,
-.form .progress .labels {
-  font-size: 12px;
-  line-height: 18px;
-  color: #858585;
+  background: #fff;
 }
 form .progress .bar,
 .form .progress .bar {
-  background: #c7c7c7;
+  background-color: #ddd;
 }
 form .progress .bar .value,
 .form .progress .bar .value {
-  background-color: THEME-light;
-}
-form .progress .bar .value .label,
-.form .progress .bar .value .label {
-  float: right;
-  margin-right: 3px;
-  color: rgba(0,0,0,0.6);
-  -webkit-text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
-  -moz-text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
-  text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
-  font-size: 12px;
+  background-color: #03b1ff;
 }

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

@@ -6,9 +6,9 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-form label:not(.select),
-.form label:not(.select) {
-  font-size: 0.9em;
+form label,
+.form label {
+  font-size: 1.1em;
 }
 form input,
 .form input,
@@ -19,6 +19,7 @@ form select,
 form .progress,
 .form .progress {
   margin-bottom: 8px;
+  font-size: 1.2em;
 }
 form input[type="text"],
 .form input[type="text"],
@@ -52,7 +53,6 @@ form textarea,
   -moz-transition: all 0.15s linear;
   transition: all 0.15s linear;
   font-family: inherit;
-  font-size: inherit;
   -webkit-appearance: none;
   -webkit-user-select: text;
   -webkit-font-smoothing: antialiased;
@@ -85,48 +85,123 @@ form textarea:focus,
 }
 form textarea,
 .form textarea {
-  min-height: 48px;
+  min-height: 64px;
+}
+form fieldset,
+.form fieldset {
+  padding: 8px 8px 0 8px;
 }
-form input[type=search],
-.form input[type=search] {
-  width: 89%;
+form fieldset label,
+.form fieldset label {
   display: inline-block;
+  float: left;
+  width: 20%;
+  line-height: 30px;
 }
-form input[type=search] + .button,
-.form input[type=search] + .button {
-  float: right;
-  padding: 0px;
-  width: 10%;
-  height: 30px;
+form fieldset label + input,
+.form fieldset label + input {
+  width: 80% !important;
+}
+form fieldset .icon,
+.form fieldset .icon {
+  position: absolute;
+  font-size: 1.2em;
   line-height: 30px;
+  right: 8px;
 }
-form select,
-.form select {
-  width: 100%;
-  height: 30px;
+form fieldset input[type="text"],
+.form fieldset input[type="text"],
+form fieldset input[type="password"],
+.form fieldset input[type="password"],
+form fieldset input[type="date"],
+.form fieldset input[type="date"],
+form fieldset input[type="datetime"],
+.form fieldset input[type="datetime"],
+form fieldset input[type="email"],
+.form fieldset input[type="email"],
+form fieldset input[type="number"],
+.form fieldset input[type="number"],
+form fieldset input[type="search"],
+.form fieldset input[type="search"],
+form fieldset input[type="tel"],
+.form fieldset input[type="tel"],
+form fieldset input[type="time"],
+.form fieldset input[type="time"],
+form fieldset input[type="url"],
+.form fieldset input[type="url"],
+form fieldset textarea,
+.form fieldset textarea {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border: none;
+  padding: 0;
+}
+form fieldset input[type="text"],
+.form fieldset input[type="text"],
+form fieldset input[type="password"],
+.form fieldset input[type="password"],
+form fieldset input[type="date"],
+.form fieldset input[type="date"],
+form fieldset input[type="datetime"],
+.form fieldset input[type="datetime"],
+form fieldset input[type="email"],
+.form fieldset input[type="email"],
+form fieldset input[type="number"],
+.form fieldset input[type="number"],
+form fieldset input[type="search"],
+.form fieldset input[type="search"],
+form fieldset input[type="tel"],
+.form fieldset input[type="tel"],
+form fieldset input[type="time"],
+.form fieldset input[type="time"],
+form fieldset input[type="url"],
+.form fieldset input[type="url"],
+form fieldset textarea,
+.form fieldset textarea,
+form fieldset input[type="text"]:focus,
+.form fieldset input[type="text"]:focus,
+form fieldset input[type="password"]:focus,
+.form fieldset input[type="password"]:focus,
+form fieldset input[type="date"]:focus,
+.form fieldset input[type="date"]:focus,
+form fieldset input[type="datetime"]:focus,
+.form fieldset input[type="datetime"]:focus,
+form fieldset input[type="email"]:focus,
+.form fieldset input[type="email"]:focus,
+form fieldset input[type="number"]:focus,
+.form fieldset input[type="number"]:focus,
+form fieldset input[type="search"]:focus,
+.form fieldset input[type="search"]:focus,
+form fieldset input[type="tel"]:focus,
+.form fieldset input[type="tel"]:focus,
+form fieldset input[type="time"]:focus,
+.form fieldset input[type="time"]:focus,
+form fieldset input[type="url"]:focus,
+.form fieldset input[type="url"]:focus,
+form fieldset textarea:focus,
+.form fieldset textarea:focus {
+  background: none;
 }
-form select label.select,
-.form select label.select {
+form label.select,
+.form label.select {
   position: relative;
   display: inline-block;
   width: 100%;
+  font-size: inherit;
+  line-height: inherit;
 }
-form select .select:after,
-.form select .select:after {
-  text-align: center;
+form .select:after,
+.form .select:after {
   position: absolute;
-  top: 3px;
+  top: 0;
   right: 0;
-  bottom: 0;
   height: 30px;
   width: 30px;
   content: "▼";
   pointer-events: none;
-  line-height: 33px;
-}
-form select .no-pointer-events .select:after,
-.form select .no-pointer-events .select:after {
-  content: none;
+  text-align: center;
+  line-height: 32px;
 }
 form input[type=range],
 .form input[type=range] {
@@ -135,12 +210,11 @@ form input[type=range],
 }
 form input[type=range]:not(.checkbox),
 .form input[type=range]:not(.checkbox) {
-  height: 12px;
+  height: 15px;
   width: 100%;
   padding: 0px;
   margin-top: 2px;
   border: 0;
-  cursor: ew-resize;
 }
 form input[type=range]:not(.checkbox)::-webkit-slider-thumb,
 .form input[type=range]:not(.checkbox)::-webkit-slider-thumb {
@@ -150,23 +224,22 @@ form input[type=range].checkbox,
 .form input[type=range].checkbox {
   width: 70px;
   height: 30px;
+  line-height: 30px;
   padding: 1px 2px;
   font-family: 'lungojsicon';
 }
 form input[type=range].checkbox:after,
 .form input[type=range].checkbox:after {
-  content: "\0055";
+  top: -29px;
   position: relative;
+  content: "\0055";
   float: right;
-  top: -23px;
   padding: 0 8px;
-  font-size: 1.5em;
 }
 form input[type=range].checkbox.active:after,
 .form input[type=range].checkbox.active:after {
   float: left;
   content: "\0051";
-  font-size: 1.6em;
 }
 form input[type=range]::-webkit-slider-thumb,
 .form input[type=range]::-webkit-slider-thumb {
@@ -194,21 +267,11 @@ form input[type=range]::-webkit-slider-thumb::after,
 form .progress,
 .form .progress {
   width: 100%;
-  margin-bottom: 8px;
-}
-form .progress .labels,
-.form .progress .labels {
-  font-size: 1em;
-  display: block;
-}
-form .progress .labels span:last-child,
-.form .progress .labels span:last-child {
-  float: right;
 }
 form .progress .bar,
 .form .progress .bar {
-  height: 12px;
-  line-height: 12px;
+  height: 15px;
+  line-height: 15px;
   display: block;
 }
 form .progress .bar .value,
@@ -216,15 +279,9 @@ form .progress .bar .value,
   display: block;
   height: inherit;
   width: 0%;
-  -webkit-transition: width 500ms easeOutSine;
-  -moz-transition: width 500ms easeOutSine;
-  transition: width 500ms easeOutSine;
-}
-form .progress .bar .value .label,
-.form .progress .bar .value .label {
-  float: right;
-  margin-right: 4px;
-  font-size: 0.75em;
+  -webkit-transition: width 350ms easeOutSine;
+  -moz-transition: width 350ms easeOutSine;
+  transition: width 350ms easeOutSine;
 }
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   .custom-select select {