New style for .border inputs

example/app/sections/form.html

@@ -1,3 +1,4 @@
+
 <section id="form" data-transition="slide">
     <header data-title="Form Elements" data-back="home"></header>
 
@@ -119,27 +120,33 @@
         </div>
     </article>
 
-    <article id="form-special" class="indented scroll">
+    <article id="form-special" class=" indented scroll">
         <div class="form" >
             <label>Specials</label>
             <fieldset data-icon="search">
                 <input type="search" placeholder="Search..."/>
             </fieldset>
 
+
+            <label>Address</label>
+            <input type="text" placeholder="placeholder" class="border" />
+            <input type="text" placeholder="placeholder" class="border error" value="error" />
+            <input type="text" placeholder="placeholder" class="border success" value="success" />
+
             <div class="layout horizontal">
                 <div data-layout="third">
                     <label>Address</label>
-                    <input type="text" placeholder="placeholder"/>
+                    <input type="text" placeholder="placeholder" class="border" />
                 </div>
                 <div data-layout="primary">
                     <label>Pin Code</label>
-                    <input type="password" value="value" disabled/>
+                    <input type="password" value="value" class="border" disabled/>
                 </div>
             </div>
 
             <label>Select your skill</label>
-            <label class="select">
-                <select class="custom">
+            <label class="select border">
+                <select>
                     <option value="1">HTML5 Jedi</option>
                     <option value="2">Two</option>
                     <option value="3">Three</option>
@@ -150,13 +157,28 @@
             <div id="progress-normal" data-progress="25%"></div>
 
             <label>Range</label>
-            <input type="range" placeholder="type your name" />
+            <input type="range" placeholder="type your name" min="0" max="8" />
+
 
             <label>Checkbox</label>
+            <div class="layout horizontal">
+                <div>
+                    <div data-control-checkbox="normal"></div>
+                </div>
+                <div>
+                    <div data-control-checkbox="twit-example" class="twitter"></div>
+                </div>
+                <div>
+                    <div data-control-checkbox="ok-example" class="ok"></div>
+                </div>
+            </div>
             <br/>
-            <input type="range" min="0" max="1" class="checkbox active" value="1">
 
-            <button class="anchor accept" data-label="Return to normal Elements"></button>
+            <button class="anchor margin-bottom" data-label="Return to normal Elements"></button>
+            <button class="anchor accept margin-bottom" data-label="Return to normal Elements"></button>
+            <button class="anchor cancel margin-bottom" data-label="Return to normal Elements"></button>
+            <button class="anchor secondary margin-bottom" data-label="Return to normal Elements"></button>
+            <button class="anchor disabled" data-label="Return to normal Elements"></button>
         </div>
     </article>
 </section>

example/test.html

@@ -146,7 +146,7 @@
         </div>
     </article>
 
-    <article id="form-special" class="active indented scroll">
+    <article id="form-special" class=" indented scroll">
         <div class="form" >
             <label>Specials</label>
             <fieldset data-icon="search">
@@ -172,7 +172,7 @@
 
             <label>Select your skill</label>
             <label class="select border">
-                <select class="custom">
+                <select>
                     <option value="1">HTML5 Jedi</option>
                     <option value="2">Two</option>
                     <option value="3">Three</option>

src/stylesheets/constants.styl

@@ -21,5 +21,8 @@ LIST_PADDING_HORIZONTAL= (LIST_PADDING / 1.25)
 
 INDENT                 = 3%
 
+
 FORM_HEIGHT = 30px
-FORM_PROGRESS_HEIGHT = (FORM_HEIGHT / 2)
+FORM_border          = 2px
+FORM_border_height   = FORM_HEIGHT + (FORM_border * 4)
+FORM_PROGRESS_HEIGHT = 12px

src/stylesheets/lungo.widgets.form.styl

@@ -36,7 +36,7 @@ form, .form
     &:focus
       outline: none !important
     &.border
-      height: (FORM_HEIGHT * 1.3)
+      height: FORM_border_height
 
   & textarea
     min-height: (FORM_HEIGHT * 2)
@@ -79,17 +79,26 @@ form, .form
     line-height: inherit
     padding-left: 0px
 
-  & .select:after
-    position: absolute
-    top: 0
-    right: 0
-    height: FORM_HEIGHT
-    width: FORM_HEIGHT
-    font-size: FONT_SIZE_BIG
-    content: "▼"
-    pointer-events: none
-    text-align: center
-    line-height: FORM_HEIGHT
+    &.border
+      H = FORM_border_height - (FORM_border * 2)
+      & > select
+        height: H
+      &:after
+        height: H
+        width: H
+        line-height: H
+
+    &:after
+      position: absolute
+      top: 0
+      right: 0
+      height: FORM_HEIGHT
+      width: FORM_HEIGHT
+      font-size: FONT_SIZE_BIG
+      content: "▼"
+      pointer-events: none
+      text-align: center
+      line-height: FORM_HEIGHT
 
   & input[type=range]
     -webkit-appearance: none