Style for input=search

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

@@ -1,16 +1,12 @@
 <section id="form" data-transition="slide">
-    <header data-title="Form Elements" data-back="home"></header>
+    <header data-back="home button" data-title="Form Elements"></header>
 
-
-    <footer>
-        <nav class="with-labels">
-            <a href="#form-normal" data-target="article" class="current" data-icon="user" data-label="Normal" data-count="5"></a>
-            <a href="#form-extra" data-target="article" data-icon="users" data-label="Extra" data-count="2"></a>
-
-        </nav>
-    </footer>
-    <article id="form-normal" class="list  indented">
+    <article class="list scroll">
         <ul>
+            <li class="contrast">
+                    <input type="search" placeholder="type your search" />
+                    <a href="#" class="button theme" data-icon="search"></a>
+                </li>
             <li>
                 <label>Example of text</label>
                 <input type="text" placeholder="type your name" />
@@ -29,22 +25,10 @@
                     </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>
-        </ul>
-
-    </article>
-
-    <article id="form-extra" class="list  indented">
-        <ul>
             <li class="padding">
                 <label>Example of progress</label>
                 <div id="progress-normal" data-progress="25%"></div>

examples/test/kitchensink.html

@@ -68,12 +68,12 @@
     </section> -->
 
     <section id="main" data-transition="slide">
-        <header  class="extended">
+        <header  class="">
             <nav class="left button">
                 <a href="#features" data-target="aside" data-icon="menu"></a>
             </nav>
             <nav class="right button">
-                <a href="#" data-icon="share" data-label="Share"></a>
+                <a href="#" data-icon="share" data-label="Share" ></a>
             </nav>
             <div class="left">
                 <span class="title">LUNGO FRAMEWORK</span>
@@ -89,132 +89,18 @@
             </nav>
         </footer>
 
-        <nav class="groupbar">
+<!--         <nav class="groupbar">
             <a href="#art-1" data-target="article" class="current" data-label="Inicio"></a>
                 <a href="#art-2" data-target="article" data-label="user"></a>
                 <a href="#art-3" data-target="article" data-label="user"></a>
                 <a href="#art-4" data-target="article" data-label="Cuenta"></a>
-
-            </nav>
-
-
-    <article id="list-normal" class="list scroll indented">
-        <ul>
-
-            <li>
-                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li class="selectable">
-                <strong>&lt;li class="selectable"&gt; + &lt;strong&gt; </strong>
-            </li>
-
-            <li>
-                <a href="#">
-                    <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
-                </a>
-            </li>
-
-            <li>
-                <strong>&lt;li&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="highlight">
-                <strong>&lt;li class="highlight"&gt; + &lt;strong&gt; </strong>
-            </li>
-
-        </ul>
-
-        <ul>
+            </nav> -->
 
 
-            <li class="anchor">.arrow class</li>
+        <article id="art-1" class="list">
 
-            <li class="arrow">
-                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
-            </li>
 
-            <li class="arrow">
-                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="arrow">
-                <strong>&lt;li class="arrow"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-                <small>&lt;small&gt;</small>
-            </li>
-
-
-            <li class="anchor">.right element</li>
-
-            <li>
-                <a href="#">
-                    <div class="right">.right</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li class="selectable">
-                <a href="#">
-                    <div class="right">.right</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <div class="right bubble theme">.right.bubble</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li>
-                <a href="#">
-                    <div class="right bubble theme" data-icon="clock">.right data-icon</div>
-                    <strong>&lt;strong&gt; element</strong>
-                    <small>with &lt;small&gt; element</small>
-                </a>
-            </li>
-
-            <li class="anchor">With data-icon or data-image attribute</li>
-            <li data-image="http://placehold.it/32x32">
-                <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class=" thumb" data-image="http://placehold.it/46x46">
-                <strong>&lt;li class="thumb" data-image&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li data-icon="user">
-                <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="thumb" data-icon="user">
-                <strong>&lt;li class="thumb" data-icon&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-
-            <li class="anchor">With colours</li>
-            <li class="blue">
-                <strong>&lt;li class="blue"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="green">
-                <strong>&lt;li class="green"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-            <li class="yellow">
-                <strong>&lt;li class="yellow"&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
-            </li>
-        </ul>
-
-    </article>
+        </article>
 
 
         <article id="art-2" data-loading="black"></article>

src/boot/Lungo.Boot.Article.js

@@ -14,7 +14,7 @@ Lungo.Boot.Article = (function(lng, undefined) {
     var ELEMENT = lng.Constants.ELEMENT;
     var SELECTORS = {
         LIST_IN_ARTICLE: 'article.list, aside.list',
-        CHECKBOX_IN_ARTICLE: '.checkbox, .radio'
+        CHECKBOX_IN_ARTICLE: '.checkbox'
     };
 
     /**

src/stylesheets/Lungo.theme.default.less

@@ -76,7 +76,7 @@ header nav {
             &:not(.accept):not(.cancel) { background: rgba(0,0,0,0.1); }
         }
 
-        &.right a:not(.ios) {
+        &.right a {
             .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)");
         }
     }
@@ -146,6 +146,8 @@ section.aside {
 
         &, & a { color: @list-color; }
 
+        &.contrast { background: @footer; }
+
         &.highlight { background: @list-border; }
         &.anchor {
             background: @footer;
@@ -220,16 +222,12 @@ a.button {
 /* @end */
 
 /* @group <form> */
-@box-shadow-form: ~'inset 0 2px 1px rgba(0,0,0,0.1)';
+@box-shadow-form: ~'inset 0 1px 2px rgba(0,0,0,0.1)';
 @box-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';
 
 @border-radius-form: 2px;
+label { color: #999; }
 
-form, .form {
-    & label {
-        color: #999;
-    }
-}
 input, textarea, select {
     border: 1px solid #ccc;
     .border-radius(@border-radius-form);
@@ -238,7 +236,7 @@ input, textarea, select {
     .box-shadow(@box-shadow-form);
 
     &:focus {
-        color: #000;
+        color: #484a49;
         border-color: @theme;
         .box-shadow(0 0 6px @theme-light);
     }

src/stylesheets/Lungo.widgets.form.less

@@ -13,10 +13,8 @@
 @input-height: 29px;
 
 form {
-    &.wrapper {
-        & input:not([type=checkbox]), textarea, select {
-            margin: 3px 0px 3px 0px;
-        }
+    &.wrapper input:not([type=checkbox]), textarea, select {
+        margin: 3px 0px 3px 0px;
     }
 
     @rounded-radius: 2px;
@@ -32,15 +30,14 @@ form {
 }
 
 label:not(.select) {
-    font-size: 0.85em;
-    line-height: 1.8em;
+    font-size: 0.9em;
+    line-height: 1.5em;
 }
 
 input:not([type=checkbox]), textarea, select {
     display: block;
     width: 96%;
-    // margin: 0 0 6px;
-    padding: 0.5% 2% ;
+    padding: 0.5% 2%;
     height: @input-height;
     font-size: 14px;
     font-weight: bold;
@@ -51,23 +48,23 @@ input:not([type=checkbox]), textarea, select {
 }
 
 textarea {
-    min-height: 48px;
-}
+    padding-top: 1.5%;
+    min-height: 48px; }
 
 
 /* @group search */
 input[type=search] {
-    width: 86%;
+    width: 85%;
+    display: inline-block;
 
     & + .button {
         float: right;
         padding: 0px;
-        width: 32px;
-        height: 30px;
-
-        & .icon {
-            font-size: 22px !important;
-            line-height: 30px;
+        width: 13%;
+        height: @input-height;
+        & .icon{
+            top: -3px;
+            float: none;
         }
     }
 }
@@ -103,79 +100,28 @@ label.select {
 .no-pointer-events .select:after {
     content: none;
 }
-
 /* @end */
 
-
 /* @group switch */
-
-input[type="checkbox"], input[type="radio"]{
+input[type="checkbox"]{
     width: 82px;
     height: @input-height;
-    z-index: 2;
-}
-
-input[type="checkbox"] + span::after,
-   input[type="radio"] + span::after {
-    content: "OFF";
-}
-
-input[type="checkbox"]:checked + span::after,
-   input[type="radio"]:checked + span::after {
-    content: "ON";
-}
-
-input[type="checkbox"] + span,
-   input[type="radio"] + span,
-   input[type="checkbox"] + span::before,
-   input[type="radio"] + span::before,
-   input[type="checkbox"] + span::after,
-   input[type="radio"] + span::after {
-    display: inline-block;
-}
-
+    z-index: 2; }
+input[type="checkbox"] + span::after { content: "OFF"; }
+input[type="checkbox"]:checked + span::after { content: "ON"; }
+input[type="checkbox"] + span, input[type="checkbox"] + span::before, input[type="checkbox"] + span::after { display: inline-block; }
 input[type="checkbox"] + span::before,
-   input[type="radio"] + span::before,
    input[type="checkbox"] + span::after,
-   input[type="radio"] + span::after,
-   input[type="checkbox"]:checked + span::before,
-   input[type="radio"]:checked + span::before,
-   input[type="checkbox"]:checked + span::after,
-   input[type="radio"]:checked + span::after {
-    top: 0;
-}
-
-input[type="checkbox"] + span::after,
-   input[type="radio"] + span::after,
    input[type="checkbox"]:checked + span::before,
-   input[type="radio"]:checked + span::before {
-    right: 0;
-}
-
-input[type="checkbox"] + span::before,
-   input[type="radio"] + span::before,
-   input[type="checkbox"]:checked + span::after,
-   input[type="radio"]:checked + span::after {
-    left: 0;
-}
-
-input[type="checkbox"],
-   input[type="radio"],
-   input[type="checkbox"] + span::before,
-   input[type="radio"] + span::before,
-   input[type="checkbox"] + span::after,
-   input[type="radio"] + span::after {
-    position: absolute;
-}
-
-input[type="checkbox"],
-   input[type="radio"] {
+   input[type="checkbox"]:checked + span::after {
+    top: 0; }
+input[type="checkbox"] + span::after, input[type="checkbox"]:checked + span::before { right: 0; }
+input[type="checkbox"] + span::before, input[type="checkbox"]:checked + span::after { left: 0; }
+input[type="checkbox"], input[type="checkbox"] + span::before, input[type="checkbox"] + span::after { position: absolute; }
+input[type="checkbox"] {
     -webkit-opacity: 0;
-    opacity: 0;
-}
-
-input[type="checkbox"] + span,
-   input[type="radio"] + span {
+    opacity: 0; }
+input[type="checkbox"] + span {
     width: 82px;
     height: 27px;
     position: relative;
@@ -183,33 +129,18 @@ input[type="checkbox"] + span,
     line-height: @input-height;
     font-weight: bold;
     text-transform: uppercase;
-    text-indent: -9999px;
-}
-
-input[type="checkbox"] + span::before,
-   input[type="radio"] + span::before {
+    text-indent: -9999px; }
+input[type="checkbox"] + span::before{
     content: "";
     width: 41px;
-    height: 27px;
-}
-
-input[type="checkbox"] + span::after,
-   input[type="radio"] + span::after {
+    height: 27px; }
+input[type="checkbox"] + span::after {
     text-indent: 0;
     width: 41px;
     height: 27px;
-    text-align: center;
-}
-
-input[type="checkbox"]:checked + span::before,
-   input[type="radio"]:checked + span::before {
-    left: auto;
-}
-
-input[type="checkbox"]:checked + span::after,
-   input[type="radio"]:checked + span::after {
-    height: 27px;
-}
+    text-align: center;}
+input[type="checkbox"]:checked + span::before { left: auto; }
+input[type="checkbox"]:checked + span::after { height: 27px; }
 /* @end */
 
 /* @group range */
@@ -242,7 +173,6 @@ input[type="range"] {
     margin-bottom: 8px;
 
     .labels {
-
         font-size: 1.0em;
         display: block;
         & span:last-child { float: right; }
@@ -262,14 +192,12 @@ input[type="range"] {
             & .label {
                 float: right;
                 margin-right: 4px;
-                font-size: 0.75em;
-            }
+                font-size: 0.75em; }
         }
     }
 }
 /* @end */
 
-
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     .custom-select select {padding-right:30px;}
 }

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

@@ -145,7 +145,7 @@ header nav.box:active.cancel {
 header nav.box:active:not(.accept):not(.cancel) {
   background: rgba(0, 0, 0, 0.1);
 }
-header nav.box.right a:not(.ios) {
+header nav.box.right a {
   -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
   -moz-box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
   box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2);
@@ -254,6 +254,9 @@ section.aside.right {
 .list li a {
   color: #2a2a2a;
 }
+.list li.contrast {
+  background: #292f34;
+}
 .list li.highlight {
   background: #dddddd;
 }
@@ -381,8 +384,7 @@ a.button:active {
 }
 /* @end */
 /* @group <form> */
-form label,
-.form label {
+label {
   color: #999;
 }
 input,
@@ -403,17 +405,17 @@ select {
   background-clip: padding-box;
   color: #858585;
   font-family: Helvetica, Arial, sans-serif;
-  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 }
 input:focus,
 textarea:focus,
 select:focus {
-  color: #000;
+  color: #484a49;
   border-color: #2c8bca;
   -webkit-box-shadow: 0 0 6px #2c8bca;
   -moz-box-shadow: 0 0 6px #2c8bca;
@@ -503,12 +505,12 @@ input[type="range"] {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
-  box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 }
 input[type="range"]:active {
   -webkit-box-shadow: none;

src/stylesheets/css/Lungo.widgets.button.css

@@ -8,7 +8,7 @@
  */
 /* DIMENSIONS */
 /* COLORS */
-a.button {
+article a.button {
   display: inline-block;
   height: 40px;
   padding: 0 8px;
@@ -32,16 +32,16 @@ a.button {
   -o-user-select: none;
   user-select: none;
 }
-a.button:active,
-a.button.active {
+article a.button:active,
+article a.button.active {
   background: #4b4b4b;
 }
-a.button:disabled,
-a.button.disabled {
+article a.button:disabled,
+article a.button.disabled {
   background: rgba(255, 255, 255, 0.2);
   color: #999 !important;
 }
-a.button .icon {
+article a.button .icon {
   position: relative;
   top: 3px;
   height: 18px;
@@ -50,15 +50,15 @@ a.button .icon {
   line-height: 18px;
   margin-right: 4px;
 }
-a.button img {
+article a.button img {
   top: 0px !important;
 }
-a.button.big {
+article a.button.big {
   width: 100%;
   padding: 0px;
   margin-bottom: 4px;
 }
-a.button.big .icon {
+article a.button.big .icon {
   margin: 8px -18px 0 12px;
   float: left;
 }

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

@@ -9,8 +9,8 @@
 /* DIMENSIONS */
 /* COLORS */
 form.wrapper input:not([type=checkbox]),
-form.wrapper textarea,
-form.wrapper select {
+form textarea,
+form select {
   margin: 3px 0px 3px 0px;
 }
 form.rounded input:not([type=checkbox]),
@@ -52,15 +52,15 @@ form.rounded select:last-of-type {
   background-clip: padding-box;
 }
 label:not(.select) {
-  font-size: 0.85em;
-  line-height: 1.8em;
+  font-size: 0.9em;
+  line-height: 1.5em;
 }
 input:not([type=checkbox]),
 textarea,
 select {
   display: block;
   width: 96%;
-  padding: 0.5% 2% ;
+  padding: 0.5% 2%;
   height: 29px;
   font-size: 14px;
   font-weight: bold;
@@ -69,21 +69,23 @@ select {
   -webkit-font-smoothing: antialiased;
 }
 textarea {
+  padding-top: 1.5%;
   min-height: 48px;
 }
 /* @group search */
 input[type=search] {
-  width: 86%;
+  width: 85%;
+  display: inline-block;
 }
 input[type=search]  + .button {
   float: right;
   padding: 0px;
-  width: 32px;
-  height: 30px;
+  width: 13%;
+  height: 29px;
 }
 input[type=search]  + .button .icon {
-  font-size: 22px !important;
-  line-height: 30px;
+  top: -3px;
+  float: none;
 }
 /* @end */
 /* @group select */
@@ -113,65 +115,46 @@ label.select {
 }
 /* @end */
 /* @group switch */
-input[type="checkbox"],
-input[type="radio"] {
+input[type="checkbox"] {
   width: 82px;
   height: 29px;
   z-index: 2;
 }
-input[type="checkbox"] + span::after,
-input[type="radio"] + span::after {
+input[type="checkbox"] + span::after {
   content: "OFF";
 }
-input[type="checkbox"]:checked + span::after,
-input[type="radio"]:checked + span::after {
+input[type="checkbox"]:checked + span::after {
   content: "ON";
 }
 input[type="checkbox"] + span,
-input[type="radio"] + span,
 input[type="checkbox"] + span::before,
-input[type="radio"] + span::before,
-input[type="checkbox"] + span::after,
-input[type="radio"] + span::after {
+input[type="checkbox"] + span::after {
   display: inline-block;
 }
 input[type="checkbox"] + span::before,
-input[type="radio"] + span::before,
 input[type="checkbox"] + span::after,
-input[type="radio"] + span::after,
 input[type="checkbox"]:checked + span::before,
-input[type="radio"]:checked + span::before,
-input[type="checkbox"]:checked + span::after,
-input[type="radio"]:checked + span::after {
+input[type="checkbox"]:checked + span::after {
   top: 0;
 }
 input[type="checkbox"] + span::after,
-input[type="radio"] + span::after,
-input[type="checkbox"]:checked + span::before,
-input[type="radio"]:checked + span::before {
+input[type="checkbox"]:checked + span::before {
   right: 0;
 }
 input[type="checkbox"] + span::before,
-input[type="radio"] + span::before,
-input[type="checkbox"]:checked + span::after,
-input[type="radio"]:checked + span::after {
+input[type="checkbox"]:checked + span::after {
   left: 0;
 }
 input[type="checkbox"],
-input[type="radio"],
 input[type="checkbox"] + span::before,
-input[type="radio"] + span::before,
-input[type="checkbox"] + span::after,
-input[type="radio"] + span::after {
+input[type="checkbox"] + span::after {
   position: absolute;
 }
-input[type="checkbox"],
-input[type="radio"] {
+input[type="checkbox"] {
   -webkit-opacity: 0;
   opacity: 0;
 }
-input[type="checkbox"] + span,
-input[type="radio"] + span {
+input[type="checkbox"] + span {
   width: 82px;
   height: 27px;
   position: relative;
@@ -181,25 +164,21 @@ input[type="radio"] + span {
   text-transform: uppercase;
   text-indent: -9999px;
 }
-input[type="checkbox"] + span::before,
-input[type="radio"] + span::before {
+input[type="checkbox"] + span::before {
   content: "";
   width: 41px;
   height: 27px;
 }
-input[type="checkbox"] + span::after,
-input[type="radio"] + span::after {
+input[type="checkbox"] + span::after {
   text-indent: 0;
   width: 41px;
   height: 27px;
   text-align: center;
 }
-input[type="checkbox"]:checked + span::before,
-input[type="radio"]:checked + span::before {
+input[type="checkbox"]:checked + span::before {
   left: auto;
 }
-input[type="checkbox"]:checked + span::after,
-input[type="radio"]:checked + span::after {
+input[type="checkbox"]:checked + span::after {
   height: 27px;
 }
 /* @end */