New kitchenSink for FORM

examples/test/app/resources/asides/features.html

@@ -48,31 +48,33 @@
                 </a>
             </li>
 
-            <!-- Asides -->
+             <!-- Forms -->
             <li>
-                <a href="#" data-target="section">
+                <a href="#form" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Asides</strong>
+                    <strong>Form Elements</strong>
                     <small>Indented, Scroll</small>
                 </a>
             </li>
-            <!-- Buttons -->
+
+            <!-- Asides -->
             <li>
                 <a href="#" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Icons</strong>
+                    <strong>Asides</strong>
                     <small>Indented, Scroll</small>
                 </a>
             </li>
-            <!-- Forms -->
+            <!-- Buttons -->
             <li>
                 <a href="#" data-target="section">
                     <div class="bubble right">8</div>
-                    <strong>Form Elements</strong>
+                    <strong>Icons</strong>
                     <small>Indented, Scroll</small>
                 </a>
             </li>
 
+
             <!-- Pulls -->
             <li>
                 <a href="#" data-target="section">

examples/test/app/resources/sections/form.html

@@ -0,0 +1,47 @@
+<section id="form" data-transition="slide">
+    <header data-title="Form Elements" data-back="home"></header>
+
+    <article class="list scroll">
+        <ul>
+            <li>
+                <label>Example of text</label>
+                <input type="text" placeholder="type your name" />
+            </li>
+            <li>
+                <label>Example of textarea</label>
+                <textarea placeholder="type your name"></textarea>
+            </li>
+            <li>
+                <label>Example of select</label>
+                <label class="select">
+                    <select class="custom">
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </label>
+            </li>
+            <li class="padding">
+                <label>Example of radio</label>
+                <br/>
+                <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
+                <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
+            </li>
+            <li  class="padding">
+                <label>Do you like Lungo forms?</label>
+                <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
+            </li>
+
+            <li class="padding">
+                <label>Example of progress</label>
+                <div id="progress-normal" data-progress="25%"></div>
+            </li>
+            <li>
+                <label>Example of range</label>
+                <input type="range" placeholder="type your name" />
+
+            </li>
+        </ul>
+
+    </article>
+</section>

examples/test/kitchensink.html

@@ -69,16 +69,21 @@
         </header>
 
         <footer>
-            <nav class="with-labelss">
-                <a href="#" class="current" data-label="Inicio" data-icon="info"></a>
-                <a href="#" data-icon="user" data-count="3"></a>
-                <a href="#" data-icon="user"></a>
-                <a href="#" data-icon="mail" data-label="Cuenta" data-count="3" ></a>
+            <nav class="with-label">
+                <a href="#art-1" data-target="article" class="current" data-label="Inicio" data-icon="info"></a>
+                <a href="#art-2" data-target="article"  data-icon="user" data-count="3"></a>
+                <a href="#art-3" data-target="article"  data-icon="user"></a>
+                <a href="#art-4" data-target="article"  data-icon="mail" data-label="Cuenta" data-count="3" ></a>
             </nav>
         </footer>
 
-        <article id="art-1" data-loading="black">
+        <article id="art-1" class="list scroll">
+
+
         </article>
+        <article id="art-2" data-loading="black"></article>
+        <article id="art-3" data-loading="black"></article>
+        <article id="art-4" data-loading="black"></article>
     </section>
 
     <!-- Lungo dependencies -->
@@ -124,7 +129,7 @@
             version: '2.0',
             sugars: ['map', 'pull'],
             resources: {
-                sections: [ 'notification.html', 'list.html', 'icon.html', 'grid.html'],
+                sections: [ 'notification.html', 'list.html', 'icon.html', 'grid.html', 'form.html'],
                 templates: [],
                 asides: ['features.html', 'profiles.html']
             }

src/stylesheets/Lungo.layout.list.less

@@ -65,8 +65,8 @@
     }
 
     & .bubble {
-        padding-left: 5px;
-        padding-right: 5px;
+        padding-left: 4px;
+        padding-right: 4px;
     }
 
     & .right {

src/stylesheets/Lungo.layout.nav.less

@@ -80,21 +80,21 @@ header nav {
 }
 
 footer nav {
-    margin: 1px;
     display: block;
 
     & a {
         padding: 0;
-        height:  42px; }
+        height:  44px;
+    }
 
     & .icon {
         display: block;
         top:  0px;
         font-size: 2.0em !important;
-        line-height: 40px; }
+        line-height: 44px; }
 
     & .bubble {
-        top:  -38px;
+        top:  -42px;
         left: 4px;
 
         & .loading {
@@ -111,8 +111,8 @@ footer nav {
         font-size: 2.3em; }
 
      &.with-labels {
-        & .icon { line-height: 32px; }
-        & .bubble { top: -32px; }
+        & .icon { line-height: 36px; }
+        & .bubble { top: -34px; }
 
         & abbr {
             display: block;

src/stylesheets/Lungo.theme.default.less

@@ -9,7 +9,6 @@
 
 @import "constants.less";
 @import "mixins.less";
-@import "lungo.theme.default.font.css";
 
 @theme:  #05b8e2;
     @theme-light: #05bde9;
@@ -45,25 +44,19 @@ section > header {
     z-index: 2;
     & .title {
         color: @white;
-        text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
-    }
+        text-shadow: 0px 1px 0px rgba(0,0,0,0.2); }
     & .subtitle {
         color: rgba(255,255,255,0.6);
-        text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
-    }
+        text-shadow: 0px -1px 0px rgba(0,0,0,0.3); }
 }
 
 section > footer {
     .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 60%);
     border-top: 1px inset #2A2A2A;
     color: #353b42;
-    .border-radius(0px 0px @border-radius-section @border-radius-section);
-}
+    .border-radius(0px 0px @border-radius-section @border-radius-section); }
 
-article {
-	background: #efefef;
-	//background: red;
-}
+article { background: #efefef; }
 /* @end */
 
 /* @group <nav> */

src/stylesheets/Lungo.theme.scaffold.less

@@ -39,20 +39,16 @@ section > header {
     background: @theme;
     .box-shadow(~"inset 0 1px 0 "@theme-light~", inset 0 -1px 0 "@theme-dark);
     z-index: 2;
-    & .title , .subtitle {
-        color: @white;
-    }
+    & .title , .subtitle { color: @white; }
 }
 
 section > footer {
     background: @theme-dark;
     border-top: 1px inset @black;
-    color: @white;
-}
+    color: @white; }
 
 article {
-    background: @theme-light;
-}
+    background: @theme-light; }
 /* @end */
 
 /* @group <nav> */
@@ -87,8 +83,7 @@ footer nav {
         &.current, &.active {
             color: @white;
             background: @black;
-            .box-shadow(~"inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)");
-        }
+            .box-shadow(~"-1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)"); }
     }
 }
 
@@ -99,8 +94,7 @@ footer nav {
         color: @theme;
         &.current {
             color:  @white;
-            .box-shadow(inset 0 -3px 0 @white);
-        }
+            .box-shadow(inset 0 -3px 0 @white); }
     }
 }
 /* @end */
@@ -112,17 +106,14 @@ aside {
 
     & header, footer {
         .box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1)");
-        background: #272727;
-    }
+        background: #272727; }
 
     & article {
-        background: none;
-    }
+        background: none; }
 
     & .list {
         & ul {
-            background: none;
-        }
+            background: none; }
 
         & li {
             color: #F0F0F0;
@@ -130,8 +121,7 @@ aside {
             &.current { background: @theme-light; }
             & strong {
                 text-shadow: 0 1px 1px black;
-                color: #fff;
-            }
+                color: @white; }
             & small { color:  rgba(255,255,255,0.3); }
         }
     }
@@ -139,8 +129,7 @@ aside {
 
     & a.current {
         background: @theme-light;
-        color: @white;
-    }
+        color: @white; }
 }
 
 section.aside {
@@ -189,16 +178,6 @@ section .list {
         }
     }
 
-    &.indented li {
-        /*
-        border-left: solid 1px #e1e1e1;
-        border-right: solid 1px #e1e1e1;
-
-        &:first-child { border-top: solid 1px #e1e1e1; }
-        &:last-child { border-bottom: solid 1px  #e1e1e1; }
-        */
-    }
-
     & .anchor {
         color: @theme-dark;
         background: @theme-light;
@@ -333,23 +312,14 @@ input[type="range"] {
 .bubble {
     color: #fff;
 
-    &.count {
-        background: @theme;
-    }
+    &.count { background: @theme; }
 }
-    header .bubble.count {
-        background: @theme-dark;
-    }
+    header .bubble.count { background: @theme-dark; }
 
     article .list .bubble {
         .box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
     }
 
-
-    aside .list .bubble {
-        background: rgba(0,0,0,0.25);
-                .box-shadow(~'inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56');
-        .box-shadow(~'inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2)');
-    }
+    aside .list .bubble { background: rgba(0,0,0,0.25); }
 
 /* @end */

src/stylesheets/Lungo.widgets.less

@@ -59,6 +59,7 @@
     font-size: 0.75em;
     font-weight: bold;
     line-height: 13px;
+    text-align: center;
 }
 
 & strong {

src/stylesheets/constants.less

@@ -5,7 +5,6 @@
     @header_nav_height: 41px;
     @header_groupbar_height: 30px;
 @footer-height: 44px;
-    @with-labels-height: 51px;
 
 @article-bottom: 45px;
     @article_with_header_extended: 72px;

src/stylesheets/css/Lungo.layout.list.css

@@ -69,8 +69,8 @@
   display: none;
 }
 .list .bubble {
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 .list .right {
   font-size: 0.75em;

src/stylesheets/css/Lungo.layout.nav.css

@@ -70,21 +70,20 @@ header nav .loading  + .icon {
   display: none;
 }
 footer nav {
-  margin: 1px;
   display: block;
 }
 footer nav a {
   padding: 0;
-  height: 42px;
+  height: 44px;
 }
 footer nav .icon {
   display: block;
   top: 0px;
   font-size: 2.0em !important;
-  line-height: 40px;
+  line-height: 44px;
 }
 footer nav .bubble {
-  top: -38px;
+  top: -42px;
   left: 4px;
 }
 footer nav .bubble .loading {
@@ -99,10 +98,10 @@ footer nav .loading {
   font-size: 2.3em;
 }
 footer nav.with-labels .icon {
-  line-height: 32px;
+  line-height: 36px;
 }
 footer nav.with-labels .bubble {
-  top: -32px;
+  top: -34px;
 }
 footer nav.with-labels abbr {
   display: block;

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

@@ -1,4 +1,3 @@
-@import "lungo.theme.default.font.css";
 /**
  * Stylesheet
  *

src/stylesheets/css/Lungo.theme.scaffold.css

@@ -81,12 +81,12 @@ footer nav a.current,
 footer nav a.active {
   color: #ffffff;
   background: #000000;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+  box-shadow: -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
 }
 .groupbar {
   background: #333333;
@@ -134,7 +134,7 @@ aside .list li.current {
 }
 aside .list li strong {
   text-shadow: 0 1px 1px black;
-  color: #fff;
+  color: #ffffff;
 }
 aside .list li small {
   color: rgba(255, 255, 255, 0.3);
@@ -215,16 +215,6 @@ section .list li {
 .list li strong {
   color: #333333;
 }
-.list.indented li {
-  /*
-        border-left: solid 1px #e1e1e1;
-        border-right: solid 1px #e1e1e1;
-
-        &:first-child { border-top: solid 1px #e1e1e1; }
-        &:last-child { border-bottom: solid 1px  #e1e1e1; }
-        */
-
-}
 .list .anchor {
   color: #333333;
   background: #cccccc;
@@ -360,17 +350,5 @@ article .list .bubble {
 }
 aside .list .bubble {
   background: rgba(0, 0, 0, 0.25);
-  -webkit-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
-  -moz-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
-  box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
-  -webkit-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
-  -moz-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
-  box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
-  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
-  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
-  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
 }
 /* @end */

src/stylesheets/css/Lungo.widgets.css

@@ -68,6 +68,7 @@
   font-size: 0.75em;
   font-weight: bold;
   line-height: 13px;
+  text-align: center;
 }
 strong {
   font-size: 1.15em;