Inicio Explorar Ayuda
Iniciar sesión
pwa
/
Lungo2.0.js
espejo de https://github.com/xabstract/Lungo2.0.js.git
2
0
Fork 0
Archivos Incidencias 0 Wiki
Explorar el Código

Changes on form stylesheet

@soyjavi hace 14 años
padre
e586d33152
commit
88e67069fa
Se han modificado 10 ficheros con 887 adiciones y 73 borrados
Unificar vista Mostrar estadísticas de diff
  1. 417 0
      examples/test/boletus.html
  2. 10 11
      examples/test/index.html
  3. 7 2
      src/stylesheets/Lungo.theme.scaffold.less
  4. 28 4
      src/stylesheets/Lungo.widgets.form.less
  5. 3 3
      src/stylesheets/Lungo.widgets.less
  6. 32 20
      src/stylesheets/Lungo.widgets.splash.less
  7. 13 4
      src/stylesheets/css/Lungo.theme.scaffold.css
  8. 78 1
      src/stylesheets/css/Lungo.widgets.css
  9. 262 27
      src/stylesheets/css/Lungo.widgets.form.css
  10. 37 1
      src/stylesheets/css/Lungo.widgets.splash.css

+ 417 - 0
examples/test/boletus.html
Ver fichero 

@@ -0,0 +1,417 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>LungoJS 2.0 - Test</title>
 
+    <meta name="description" content="">
 
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
+    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
 
+    <meta name="HandheldFriendly" content="True">
 
+    <meta name="MobileOptimized" content="320">
 
+    <meta name="viewport" content="width=device-width, user-scalable=no">
 
+
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <meta name="format-detection" content="telephone=no">
 
+    <!-- For iPhone 4 with high-resolution Retina display: -->
 
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
 
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
 
+    <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
 
+    <link rel="apple-touch-startup-image" href="assets/images/default.png">
 
+
 
+    <meta http-equiv="cleartype" content="on">
 
+
 
+    <!-- Main Stylesheet -->
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.nav.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.button.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.form.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.scaffold.css">
 
+    <!-- App Stylesheet -->
 
+    <link rel="stylesheet" href="assets/stylesheets/app.css">
 
+</head>
 
+
 
+<body class="app">
 
+
 
+    <section id="login" data-transition="slide">
 
+        <article class="-indented splash ">
 
+
 
+            <!--
 
+            <h1>Boletus</h1>
 
+            <label>Login para acceder a ofertas increibles</label>
 
+            -->
 
+
 
+            <form>
 
+                <input type="text" class="rounded" placeholder="Your email" id="txt-signup-mail" value=""/>
 
+                <input type="password" class="rounded"  placeholder="Your username" id="txt-signup-name" value=""/>
 
+                <input type="password" class="rounded"  placeholder="Your username" id="txt-signup-name" value=""/>
 
+                <a href="#main" data-target="section" class="button big green" data-icon="user">Login</a>
 
+
 
+            </form>
 
+
 
+            <form>
 
+                <input type="text" class="" placeholder="Your email" id="txt-signup-mail" value=""/>
 
+                <input type="password" class=""  placeholder="Your username" id="txt-signup-name" value=""/>
 
+                <a href="#main" data-target="section" class="button big green" data-icon="user">Login</a>
 
+
 
+            </form>
 
+
 
+            <div class="copyright">This App is made by TAPQUO</div>
 
+        </article>
 
+    </section>
 
+
 
+    <section id="main" data-transition="slide">
 
+        <header data-title="main" data-back="home">
 
+
 
+            <nav class="left">
 
+                <a href="#" class="empty" data-icon="left" data-label="Volver"></a>
 
+            </nav>
 
+
 
+            <nav class="right">
 
+                <a href="#" data-icon="user"></a>
 
+                <a href="#" data-icon="user"></a>
 
+            </nav>
 
+        </header>
 
+
 
+        <article></article>
 
+    </section>
 
+
 
+    <section id="foundation">
 
+        <header data-title="test"></header>
 
+        <footer class="toolbar with-labels"></footer>
 
+
 
+        <article>
 
+            <div class="row one red">.row.one</div>
 
+
 
+            <div class="row six blue">
 
+                <div class="one column orange"></div>
 
+                <div class="one column"></div>
 
+                <div class="four column orange">.four.column.orange</div>
 
+                <div class="one column"></div>
 
+                <div class="one column orange tall"></div>
 
+                <div class="one column "></div>
 
+                <div class="one column orange "></div>
 
+            </div>
 
+
 
+            <div class="row two green">
 
+                <div class="two columns centered red"></div>
 
+            </div>
 
+
 
+            <div class="row one yellow">.row.one.yellow</div>
 
+        </article>
 
+    </section>
 
+
 
+    <section id="a" data-transition="pop" >
 
+        <header data-title="a">
 
+            <nav class="onright">
 
+                <a href="#baaaa" data-target="section">B</a>
 
+            </nav>
 
+        </header>
 
+        <article class="">
 
+            <a href="#" class="button big" data-icon="home">Prueba</a>
 
+        </article>
 
+    </section>
 
+
 
+    <section id="baaaa" data-transition="pop" >
 
+        <header data-title="b" data-back="home"></header>
 
+             <article></article>
 
+    </section>
 
+
 
+
 
+    <section id="sec-1"  class="popa" data-transition="pop">
 
+        <header class="extended">
 
+            <nav class="onleft">
 
+                <a href="#kitchen-sink-scroll" data-target="aside" data-icon="home"></a>
 
+                <a href="#kitchen-sink-scroll" data-article="nav-2" data-target="aside" data-icon="heart" data-count="8"></a>
 
+            </nav>
 
+            <div class="onleft">
 
+                <span class="title with-subtitle">Javi Jiménez Villar</span>
 
+                <span class="subtitle">@soyjavi</span>
 
+            </div>
 
+            <nav class="onright ">
 
+                <!--
 
+                <a href="#profiles" data-target="aside" data-label="User"></a>
 
+                <a href="#profiles" data-target="aside" data-icon="users" data-label="User"></a>
 
+                 -->
 
+                 <a href="#" data-icon="cloud" id="btn-toggle-loading"></a>
 
+                <a href="#profiles" data-target="aside" data-icon="user" data-count="1"></a>
 
+            </nav>
 
+
 
+            <nav class="onright plain ">
 
+                <a href="#" data-loading="white disable"></a>
 
+                <a href="#" data-loading="white "></a>
 
+            </nav>
 
+        </header>
 
+
 
+        <nav class="groupbar">
 
+            <a href="#nav-1" data-target="article" class="current"  data-icon="html5">&nbsp;Lists</a>
 
+            <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Form</a>
 
+        </nav>
 
+
 
+        <footer class="toolbar with-labels">
 
+            <nav>
 
+                <a href="#nav-0" data-target="article" data-icon="refresh" class="current" data-label="loading">
 
+                    <span class="bubble count" data-loading="white"></span>
 
+                </a>
 
+                <a href="#nav-1" data-target="article" data-title="d" data-icon="settings" data-label="boxes" data-count="1"></a>
 
+                <a href="#nav-2" data-target="article" data-title="b" data-icon="close" data-count="12" data-label="Form"></a>
 
+                <a href="#nav-3" data-target="article" data-title="c"  data-icon="share" data-label="Emails" data-count="123"></a>
 
+                <a href="#nav-4" data-target="article" data-title="lists" data-label="lists" data-loading="white"></a>
 
+            </nav>
 
+        </footer>
 
+
 
+        <!--
 
+        <footer class="toolbar">
 
+            <nav>
 
+                <a href="#nav-1" data-target="article" class="current"  data-icon="clock"></a>
 
+                <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17"></a>
 
+                <a href="#a" data-target="article" data-icon="mail" data-count="124"></a>
 
+                <a href="#a" data-target="article" data-icon="phone" data-count="12"></a>
 
+            </nav>
 
+        </footer>
 
+        -->
 
+
 
+        <article id="nav-0" data-loading="black">
 
+        </article>
 
+
 
+        <article id="nav-1" class="lisst">
 
+            <div id = "prueba" class="five row list  " style="background: url(http://placehold.it/320x200);">
 
+            </div>
 
+
 
+            <div class="three row grey">
 
+                <div class="six row green">
 
+                    <div class="wrapper">
 
+                        <div class="onright" data-icon="calendar">June 9, 2012</div>
 
+                        <strong>LungoJS.2 Application</strong>
 
+                        <small>by Javi Jimenez <div class="bubble grey">PRO</div></small>
 
+                    </div>
 
+                </div>
 
+
 
+                <div class="four row red">
 
+                    <a href="#" class="four columns">
 
+                        <div class="wrapper" data-icon="heart">217 Likes</div>
 
+                    </a>
 
+                    <a href="#" class="three columns">
 
+                        <div class="wrapper" data-icon="pushpin">4 Buckets</div>
 
+                    </a>
 
+                    <a href="#" class="three columns">
 
+                        <div class="wrapper" data-icon="picture">389 Views</div>
 
+                    </a>
 
+                </div>
 
+            </div>
 
+
 
+            <div class="two row  white list scroll">
 
+                <ul>
 
+                    <li class=" selectable" >
 
+                        <a href="#" data-image="http://placehold.it/32x32">
 
+
 
+                            <div class="onright" data-icon="calendar">2 days ago</div>
 
+                            <strong>List: .selectable</strong>
 
+                            <small>a: data-image</small>
 
+                        </a>
 
+                    </li>
 
+
 
+                    <li class=" selectable" >
 
+                        <a href="#" data-image="http://placehold.it/32x32">
 
+
 
+                            <div class="onright" data-icon="calendar">2 days ago</div>
 
+                            <strong>List: .selectable</strong>
 
+                            <small>a: data-image</small>
 
+                        </a>
 
+                    </li>
 
+
 
+                    <li class=" selectable" >
 
+                        <a href="#" data-image="http://placehold.it/32x32">
 
+
 
+                            <div class="onright" data-icon="calendar">2 days ago</div>
 
+                            <strong>List: .selectable</strong>
 
+                            <small>a: data-image</small>
 
+                        </a>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+
 
+        </article>
 
+
 
+        <article id="nav-2" class="list indented scroll">
 
+            <ul class="form">
 
+                <li data-loading="black big"></li>
 
+                <li id="loading-code" style="background-color: grey;"></li>
 
+                <li class="padding">
 
+                    <label>type="text"</label>
 
+                    <input type="text" placeholder="Input text"/>
 
+                    <textarea placeholder="Textarea sample"></textarea>
 
+                    <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 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>
 
+                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
 
+                </li>
 
+                <li  class="padding">
 
+                    <label class="-pop">Do you like LungoJS forms?</label>
 
+                    <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
 
+                </li>
 
+
 
+                <li class="padding">
 
+                    <div id="progress-normal" data-progress="25%"></div>
 
+                    <div id="progress-big" data-progress="50%" class="big"></div>
 
+                    <label>type="range"</label>
 
+                    <input type="range">
 
+                </li>
 
+            </ul>
 
+            <ul>
 
+                <li class="anchor " data-icon="small user">Examples of anchors</li>
 
+                <li class="padding">
 
+                    <strong>Lorem Ipsum</strong>
 
+                    <small>is simply dummy text of the printing and typesetting industry</small>
 
+                </li>
 
+                <li class="anchor" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
 
+                <li class="anchor contrast" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
 
+
 
+                <li class="anchor" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
 
+                <li class="anchor contrast" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
 
+
 
+
 
+                <li class="anchor contrast" data-icon="question small">It's a special form element you must set the label with class "select"</li>
 
+            </ul>
 
+        </article>
 
+
 
+
 
+
 
+        <article id="nav-4" class="list scroll">
 
+            <ul>
 
+                <li>
 
+                    <a href="#" >
 
+                        <strong>List: none</strong>
 
+                        <small>a: none</small>
 
+                    </a>
 
+                </li>
 
+
 
+                <li class=" selectable" >
 
+                    <a href="#" data-image="http://placehold.it/32x32">
 
+
 
+                        <div class="onright" data-icon="calendar">2 days ago</div>
 
+                        <strong>List: .selectable</strong>
 
+                        <small>a: data-image</small>
 
+                    </a>
 
+                </li>
 
+                 <li class="arrow thumb">
 
+                    <a href="#" data-image="http://placehold.it/48x48">
 
+                        <strong>List: .arrow .thumb </strong>
 
+                         <small>a: data-image</small>
 
+                    </a>
 
+                </li>
 
+                <li class="red">
 
+                    <a href="#"  data-icon="home">
 
+                        <div class="bubble red onright"><span class="icon map"></span>125m</div>
 
+                        <strong>List: .red</strong>
 
+                        <small data-icon="clock">a: data-icon & .bubble</small>
 
+                    </a>
 
+                </li>
 
+
 
+                <li class="padding" data-icon="user">
 
+                    <strong>List: .padding & data-icon</strong>
 
+                    <small><span class="icon home"></span>a: undefined</small>
 
+                </li>
 
+
 
+                <li class="padding">
 
+                    <input type="text" placeholder="Input text"/>
 
+                    <textarea placeholder="Textarea sample"></textarea>
 
+                    <label class="select">
 
+                        <select class="custom">
 
+                            <option value="1">One</option>
 
+                            <option value="2">Two</option>
 
+                            <option value="3">Three</option>
 
+                        </select>
 
+                    </label>
 
+                </li>
 
+            </ul>
 
+
 
+        </article>
 
+
 
+        <article id="nav-3" class="list indented">
 
+            <div>
 
+                <a href="#sec-2" data-target="section" class="button big" data-icon="check">Test 2</a>
 
+                <a href="#sec-2"  class="button big red " data-icon="check">Test 2</a>
 
+                <a href="#sec-2" class="button big green" data-icon="check">Test 2</a>
 
+            </div>
 
+        </article>
 
+    </section>
 
+
 
+
 
+    <section id="sec-2" data-transition="pop">
 
+        <header data-title="Auto title centered">
 
+            <nav class="onleft">
 
+                <a href="#back" data-target="section" class="cancel" data-icon="close" data-label="CANCEL"></a>
 
+            </nav>
 
+
 
+            <nav class="onright ">
 
+                <a href="#" class="accept" data-icon="check" data-label="ACCEPT"></a>
 
+            </nav>
 
+        </header>
 
+        <article>
 
+            None
 
+        </article>
 
+    </section>
 
+
 
+    <!-- Third parties dependencies -->
 
+    <script src="../../src/lib/QuoJS.js"></script>
 
+    <!-- LungoJS Libraries (Development mode)-->
 
+    <script src="../../src/Lungo.js"></script>
 
+    <script src="../../src/Lungo.App.js" ></script>
 
+    <script src="../../src/Lungo.Core.js"></script>
 
+    <script src="../../src/Lungo.Dom.js"></script>
 
+    <script src="../../src/Lungo.Service.js"></script>
 
+    <script src="../../src/Lungo.Constants.js"></script>
 
+    <script src="../../src/Lungo.Element.js"></script>
 
+    <script src="../../src/Lungo.Events.js"></script>
 
+    <script src="../../src/Lungo.Notification.js"></script>
 
+    <script src="../../src/router/Lungo.Router.js"></script>
 
+    <script src="../../src/router/Lungo.Router.History.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Resize.js"></script>
 
+    <script src="../../src/view/Lungo.View.Article.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Aside.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Element.js"></script>
 
+    <script src="../../src/view/Lungo.View.Template.js"></script>
 
+    <script src="../../src/view/Lungo.View.Template.Binding.js"></script>
 
+    <script src="../../src/view/Lungo.View.Template.List.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Cache.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Sql.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Storage.js"></script>
 
+    <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
 
+    <script src="../../src/Lungo.Fallback.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
 
+    <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
 
+    <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Events.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Data.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Section.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Article.js"></script>
 
+
 
+    <!-- LungoJS - Sandbox App -->
 
+    <script src="app/app.js"></script>
 
+    <script src="app/view.js"></script>
 
+    <script src="app/data.js"></script>
 
+    <script src="app/services.js"></script>
 
+    <script src="app/events.js"></script>
 
+</body>
 
+</html>

+ 10 - 11
examples/test/index.html
Ver fichero 

@@ -60,7 +60,7 @@
 
             </form>
 
             </form>
 
         </article>
 
         </article>
 
     </section>
 
     </section>
 
--->
 
+
 
     <section id="foundation">
 
     <section id="foundation">
 
         <header data-title="test"></header>
 
         <header data-title="test"></header>
 
         <footer class="toolbar with-labels"></footer>
 
         <footer class="toolbar with-labels"></footer>
 
@@ -102,7 +102,7 @@
 
              <article></article>
 
              <article></article>
 
     </section>
 
     </section>
 
 
 
-
 
+-->
 
     <section id="sec-1"  class="popa" data-transition="pop">
 
     <section id="sec-1"  class="popa" data-transition="pop">
 
         <header class="extended">
 
         <header class="extended">
 
             <nav class="onleft">
 
             <nav class="onleft">
 
@@ -160,33 +160,32 @@
 
         </article>
 
         </article>
 
 
 
         <article id="nav-1" class="lisst">
 
         <article id="nav-1" class="lisst">
 
-            <div id = "prueba" class="box middle list  " style="background: url(http://placehold.it/320x200);">
 
+            <div id = "prueba" class="five row list  " style="background: url(http://placehold.it/320x200);">
 
             </div>
 
             </div>
 
 
 
-            <div class="box quarter grey">
 
-                <div class="lisst box two-thirds">
 
+            <div class="three row grey">
 
+                <div class="six row green">
 
                     <div class="wrapper">
 
                     <div class="wrapper">
 
                         <div class="onright" data-icon="calendar">June 9, 2012</div>
 
                         <div class="onright" data-icon="calendar">June 9, 2012</div>
 
                         <strong>LungoJS.2 Application</strong>
 
                         <strong>LungoJS.2 Application</strong>
 
                         <small>by Javi Jimenez <div class="bubble grey">PRO</div></small>
 
                         <small>by Javi Jimenez <div class="bubble grey">PRO</div></small>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
-                <div class="box third">
 
 
 
-                    <a href="#" class="col quarter">
 
+                <div class="four row red">
 
+                    <a href="#" class="four columns">
 
                         <div class="wrapper" data-icon="heart">217 Likes</div>
 
                         <div class="wrapper" data-icon="heart">217 Likes</div>
 
                     </a>
 
                     </a>
 
-
 
-                    <a href="#" class="col quarter">
 
+                    <a href="#" class="three columns">
 
                         <div class="wrapper" data-icon="pushpin">4 Buckets</div>
 
                         <div class="wrapper" data-icon="pushpin">4 Buckets</div>
 
                     </a>
 
                     </a>
 
-                    <a href="#" class="col middle">
 
+                    <a href="#" class="three columns">
 
                         <div class="wrapper" data-icon="picture">389 Views</div>
 
                         <div class="wrapper" data-icon="picture">389 Views</div>
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
 
 
-            <div class="box quarter  white list scroll">
 
+            <div class="two row  white list scroll">
 
                 <ul>
 
                 <ul>
 
                     <li class=" selectable" >
 
                     <li class=" selectable" >
 
                         <a href="#" data-image="http://placehold.it/32x32">
 
                         <a href="#" data-image="http://placehold.it/32x32">

+ 7 - 2
src/stylesheets/Lungo.theme.scaffold.less
Ver fichero 

@@ -263,12 +263,12 @@ section.aside {
 
 /* @end */
 
 /* @end */
 
 
 
 /* @group <form> */
 
 /* @group <form> */
 
-form, .form {
 
+form {
 
     & label {
 
     & label {
 
         color: #999;
 
         color: #999;
 
     }
 
     }
 
 }
 
 }
 
-input, textarea, select {
 
+input:not([type=checkbox]), textarea, select {
 
     border: 1px solid #ccc;
 
     border: 1px solid #ccc;
 
     color: @theme-dark;
 
     color: @theme-dark;
 
     border-radius: 0px;
 
     border-radius: 0px;
 
@@ -278,6 +278,11 @@ input, textarea, select {
 
         background: @theme-light;
 
         background: @theme-light;
 
         border-color: @theme-dark;
 
         border-color: @theme-dark;
 
     }
 
     }
 
+
 
+    &.rounded {
 
+        border-top: none;
 
+        &:last-of-type { border-bottom: none; }
 
+    }
 
 }
 
 }
 
 
 
 .select:after {
 
 .select:after {

+ 28 - 4
src/stylesheets/Lungo.widgets.form.less
Ver fichero 

@@ -12,7 +12,7 @@
 
 
 
 @input-height: 29px;
 
 @input-height: 29px;
 
 
 
-form, .form { }
 
+form { }
 
 
 
 label {
 
 label {
 
     font-size: 0.9em;
 
     font-size: 0.9em;
 
@@ -21,8 +21,8 @@ label {
 
 input:not([type=checkbox]), textarea, select {
 
 input:not([type=checkbox]), textarea, select {
 
     display: block;
 
     display: block;
 
     width: 97%;
 
     width: 97%;
 
-    margin: 0 0 2px;
 
-    padding: 0% 1.5% ;
 
+    // margin: 0 0 2px;
 
+    padding: 1% 1.5% ;
 
     height: @input-height;
 
     height: @input-height;
 
     font-size: 14px;
 
     font-size: 14px;
 
     font-weight: bold;
 
     font-weight: bold;
 
@@ -30,6 +30,30 @@ input:not([type=checkbox]), textarea, select {
 
     -webkit-appearance: none;
 
     -webkit-appearance: none;
 
     -webkit-user-select: text;
 
     -webkit-user-select: text;
 
     -webkit-font-smoothing: antialiased;
 
     -webkit-font-smoothing: antialiased;
 
+
 
+
 
+    & + input {
 
+        background: red !important;
 
+    }
 
+
 
+
 
+    &.rounded {
 
+        margin: 0px;
 
+        &:first-of-type {
 
+            .border-radius(8px 8px 0px 0px);
 
+        }
 
+        &:last-of-type {
 
+            .border-radius(0px 0px 8px 8px);
 
+        }
 
+    }
 
+
 
+    &:last-of-type {
 
+        // margin-bottom: 10px !important;
 
+    }
 
+}
 
+
 
+textarea {
 
+    min-height: 48px;
 
 }
 
 }
 
 
 
 
 
@@ -255,4 +279,4 @@ input[type="range"] {
 
 
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 
     .custom-select select {padding-right:30px;}
 
     .custom-select select {padding-right:30px;}
 
-}
 
+}

+ 3 - 3
src/stylesheets/Lungo.widgets.less
Ver fichero 

@@ -29,8 +29,8 @@
 
     }
 
     }
 
 }
 
 }
 
 
 
-.onleft { float: left; }
 
-.onright { float: right;}
 
+.left { float: left; }
 
+.right { float: right;}
 
 .hidden { display: none; }
 
 .hidden { display: none; }
 
 .indented > * {
 
 .indented > * {
 
     margin: 10px;
 
     margin: 10px;
 
@@ -69,4 +69,4 @@
 
     white-space: nowrap;
 
     white-space: nowrap;
 
     text-overflow: ellipsis;
 
     text-overflow: ellipsis;
 
     font-size: 0.8em;
 
     font-size: 0.8em;
 
-}
 
+}

+ 32 - 20
src/stylesheets/Lungo.widgets.splash.less
Ver fichero 

@@ -10,29 +10,41 @@
 
 .splash{
 
 .splash{
 
     text-align: center;
 
     text-align: center;
 
     font-size: 1.2em;
 
     font-size: 1.2em;
 
-}
 
 
 
-.splash img {
 
-    max-width: 206px;
 
-    margin: 92px auto 32px;
 
-}
 
+    & > * {
 
+        // margin: 24px;
 
+    }
 
 
 
-.splash h1 {
 
-    margin: 92px auto 16px;
 
+    & > form {
 
+        margin: 32px;
 
+    }
 
 
 
-    font-size: 2.2em;
 
-    font-weight: bold;
 
-}
 
+    & img {
 
+        max-width: 206px;
 
+        margin: 92px auto 32px;
 
+    }
 
 
 
-.splash .button.big {
 
-    margin-top: 16px;
 
+    & h1 {
 
+        // margin: 92px auto 16px;
 
+        margin-top: 25%;
 
+        text-align: center;
 
+        font-size: 2.2em;
 
+        font-weight: bold;
 
+    }
 
+
 
+    & .button {
 
+        margin-top: 10px;
 
+    }
 
+
 
+    & .copyright {
 
+        position: absolute;
 
+        width: 100%;
 
+        bottom: 8px;
 
+        left: 0px;
 
+        font-size: 0.8em;
 
+        font-style: normal;
 
+        padding: 0px;
 
+    }
 
 }
 
 }
 
 
 
-.splash .copyright {
 
-    position: fixed;
 
-    width: 100%;
 
-    bottom: 8px;
 
-    left: 0px;
 
-    font-size: 0.8em;
 
-    font-style: normal;
 
-}
 
+

+ 13 - 4
src/stylesheets/css/Lungo.theme.scaffold.css
Ver fichero 

@@ -284,11 +284,10 @@ section.aside.onright {
 
 }
 
 }
 
 /* @end */
 
 /* @end */
 
 /* @group <form> */
 
 /* @group <form> */
 
-form label,
 
-.form label {
 
+form label {
 
   color: #999;
 
   color: #999;
 
 }
 
 }
 
-input,
 
+input:not([type=checkbox]),
 
 textarea,
 
 textarea,
 
 select {
 
 select {
 
   border: 1px solid #ccc;
 
   border: 1px solid #ccc;
 
@@ -296,12 +295,22 @@ select {
 
   border-radius: 0px;
 
   border-radius: 0px;
 
   font-family: Helvetica, Arial, sans-serif;
 
   font-family: Helvetica, Arial, sans-serif;
 
 }
 
 }
 
-input:focus,
 
+input:not([type=checkbox]):focus,
 
 textarea:focus,
 
 textarea:focus,
 
 select:focus {
 
 select:focus {
 
   background: #cccccc;
 
   background: #cccccc;
 
   border-color: #333333;
 
   border-color: #333333;
 
 }
 
 }
 
+input:not([type=checkbox]).rounded,
 
+textarea.rounded,
 
+select.rounded {
 
+  border-top: none;
 
+}
 
+input:not([type=checkbox]).rounded:last-of-type,
 
+textarea.rounded:last-of-type,
 
+select.rounded:last-of-type {
 
+  border-bottom: none;
 
+}
 
 .select:after {
 
 .select:after {
 
   background: #ccc;
 
   background: #ccc;
 
   color: white;
 
   color: white;

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 78 - 1
src/stylesheets/css/Lungo.widgets.css


+ 262 - 27
src/stylesheets/css/Lungo.widgets.form.css
Ver fichero 

@@ -1,27 +1,262 @@
 
-
 
-label{font-size:0.9em;}
 
-input:not([type=checkbox]),textarea,select{display:block;width:97%;margin:0 0 2px;padding:0% 1.5% ;height:29px;font-size:14px;font-weight:bold;-webkit-appearance:none;-webkit-user-select:text;-webkit-font-smoothing:antialiased;}
 
-input[type=search]{width:86%;}input[type=search] +.button{float:right;padding:0px;width:32px;height:30px;}input[type=search] +.button .icon{font-size:22px !important;line-height:30px;}
 
-select{width:100%;height:29px;}
 
-label.select{position:relative;display:inline-block;width:100%;}
 
-.select:after{text-align:center;position:absolute;top:0;right:0;bottom:0;height:29px;width:29px;content:"▼";pointer-events:none;line-height:31px;}
 
-.no-pointer-events .select:after{content:none;}
 
-input[type="checkbox"],input[type="radio"]{width:82px;height:29px;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;}
 
-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"]{-webkit-opacity:0;opacity:0;}
 
-input[type="checkbox"]+span,input[type="radio"]+span{width:82px;height:27px;position:relative;font-size:11px;line-height:29px;font-weight:bold;text-transform:uppercase;text-indent:-9999px;}
 
-input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";width:41px;height:27px;}
 
-input[type="checkbox"]+span::after,input[type="radio"]+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;}
 
-input[type="range"]{-webkit-appearance:none;height:15px;width:100%;outline:none;position:relative;padding:0px;margin:0px;border:0;cursor:ew-resize;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;z-index:1;top:-1px;width:24px;height:24px;}
 
-.progress{width:100%;margin-bottom:8px;}.progress .labels{font-size:1.0em;display:block;}.progress .labels span:last-child{float:right;}
 
-.progress .bar{height:15px;line-height:15px;display:block;}.progress .bar .value{display:block;height:inherit;width:0%;-webkit-transition:width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);}.progress .bar .value .label{float:right;margin-right:4px;font-size:0.75em;}
 
-.big .progress .bar{height:29px;line-height:30px;}
 
-@media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}
 
+/**
 
+ * Stylesheet
 
+ *
 
+ * @namespace LUNGO.Widgets
 
+ * @class Form
 
+ *
 
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
+ */
 
+/* DIMENSIONS */
 
+/* COLORS */
 
+label {
 
+  font-size: 0.9em;
 
+}
 
+input:not([type=checkbox]),
 
+textarea,
 
+select {
 
+  display: block;
 
+  width: 97%;
 
+  padding: 1% 1.5% ;
 
+  height: 29px;
 
+  font-size: 14px;
 
+  font-weight: bold;
 
+  -webkit-appearance: none;
 
+  -webkit-user-select: text;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+input:not([type=checkbox])  + input,
 
+textarea  + input,
 
+select  + input {
 
+  background: red !important;
 
+}
 
+input:not([type=checkbox]).rounded,
 
+textarea.rounded,
 
+select.rounded {
 
+  margin: 0px;
 
+}
 
+input:not([type=checkbox]).rounded:first-of-type,
 
+textarea.rounded:first-of-type,
 
+select.rounded:first-of-type {
 
+  -webkit-border-radius: 8px 8px 0px 0px;
 
+  -moz-border-radius: 8px 8px 0px 0px;
 
+  border-radius: 8px 8px 0px 0px;
 
+  -webkit-background-clip: padding-box;
 
+  -moz-background-clip: padding;
 
+  background-clip: padding-box;
 
+  -webkit-border-radius: 8px 8px 0px 0px;
 
+  -moz-border-radius: 8px 8px 0px 0px;
 
+  border-radius: 8px 8px 0px 0px;
 
+  -webkit-background-clip: padding-box;
 
+  -moz-background-clip: padding;
 
+  background-clip: padding-box;
 
+}
 
+input:not([type=checkbox]).rounded:last-of-type,
 
+textarea.rounded:last-of-type,
 
+select.rounded:last-of-type {
 
+  -webkit-border-radius: 0px 0px 8px 8px;
 
+  -moz-border-radius: 0px 0px 8px 8px;
 
+  border-radius: 0px 0px 8px 8px;
 
+  -webkit-background-clip: padding-box;
 
+  -moz-background-clip: padding;
 
+  background-clip: padding-box;
 
+  -webkit-border-radius: 0px 0px 8px 8px;
 
+  -moz-border-radius: 0px 0px 8px 8px;
 
+  border-radius: 0px 0px 8px 8px;
 
+  -webkit-background-clip: padding-box;
 
+  -moz-background-clip: padding;
 
+  background-clip: padding-box;
 
+}
 
+textarea {
 
+  min-height: 48px;
 
+}
 
+/* @group search */
 
+input[type=search] {
 
+  width: 86%;
 
+}
 
+input[type=search]  + .button {
 
+  float: right;
 
+  padding: 0px;
 
+  width: 32px;
 
+  height: 30px;
 
+}
 
+input[type=search]  + .button .icon {
 
+  font-size: 22px !important;
 
+  line-height: 30px;
 
+}
 
+/* @end */
 
+/* @group select */
 
+select {
 
+  width: 100%;
 
+  height: 29px;
 
+}
 
+label.select {
 
+  position: relative;
 
+  display: inline-block;
 
+  width: 100%;
 
+}
 
+.select:after {
 
+  text-align: center;
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  height: 29px;
 
+  width: 29px;
 
+  content: "▼";
 
+  pointer-events: none;
 
+  line-height: 31px;
 
+}
 
+.no-pointer-events .select:after {
 
+  content: none;
 
+}
 
+/* @end */
 
+/* @group switch */
 
+input[type="checkbox"],
 
+input[type="radio"] {
 
+  width: 82px;
 
+  height: 29px;
 
+  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;
 
+}
 
+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"] {
 
+  -webkit-opacity: 0;
 
+  opacity: 0;
 
+}
 
+input[type="checkbox"] + span,
 
+input[type="radio"] + span {
 
+  width: 82px;
 
+  height: 27px;
 
+  position: relative;
 
+  font-size: 11px;
 
+  line-height: 29px;
 
+  font-weight: bold;
 
+  text-transform: uppercase;
 
+  text-indent: -9999px;
 
+}
 
+input[type="checkbox"] + span::before,
 
+input[type="radio"] + span::before {
 
+  content: "";
 
+  width: 41px;
 
+  height: 27px;
 
+}
 
+input[type="checkbox"] + span::after,
 
+input[type="radio"] + 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;
 
+}
 
+/* @end */
 
+/* @group range */
 
+input[type="range"] {
 
+  -webkit-appearance: none;
 
+  height: 15px;
 
+  width: 100%;
 
+  outline: none;
 
+  position: relative;
 
+  padding: 0px;
 
+  margin: 0px;
 
+  border: 0;
 
+  cursor: ew-resize;
 
+}
 
+input[type="range"]::-webkit-slider-thumb {
 
+  -webkit-appearance: none;
 
+  position: relative;
 
+  z-index: 1;
 
+  top: -1px;
 
+  width: 24px;
 
+  height: 24px;
 
+}
 
+/* @end */
 
+/* @group progress */
 
+.progress {
 
+  width: 100%;
 
+  margin-bottom: 8px;
 
+}
 
+.progress .labels {
 
+  font-size: 1.0em;
 
+  display: block;
 
+}
 
+.progress .labels span:last-child {
 
+  float: right;
 
+}
 
+.progress .bar {
 
+  height: 15px;
 
+  line-height: 15px;
 
+  display: block;
 
+}
 
+.progress .bar .value {
 
+  display: block;
 
+  height: inherit;
 
+  width: 0%;
 
+  -webkit-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
 
+}
 
+.progress .bar .value .label {
 
+  float: right;
 
+  margin-right: 4px;
 
+  font-size: 0.75em;
 
+}
 
+.big .progress .bar {
 
+  height: 29px;
 
+  line-height: 30px;
 
+}
 
+/* @end */
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
 
+  .custom-select select {
 
+    padding-right: 30px;
 
+  }
 
+}

+ 37 - 1
src/stylesheets/css/Lungo.widgets.splash.css
Ver fichero 

@@ -1 +1,37 @@
 
-.splash{text-align:center;font-size:1.2em}.splash img{max-width:206px;margin:92px auto 32px}.splash h1{margin:92px auto 16px;font-size:2.2em;font-weight:bold}.splash .button.big{margin-top:16px}.splash .copyright{position:fixed;width:100%;bottom:8px;left:0;font-size:.8em;font-style:normal}
 
+/**
 
+ * Stylesheet
 
+ *
 
+ * @namespace LUNGO.Widgets
 
+ * @class Splash
 
+ *
 
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
+ */
 
+.splash {
 
+  text-align: center;
 
+  font-size: 1.2em;
 
+}
 
+.splash  > form {
 
+  margin: 32px;
 
+}
 
+.splash img {
 
+  max-width: 206px;
 
+  margin: 92px auto 32px;
 
+}
 
+.splash h1 {
 
+  margin-top: 25%;
 
+  text-align: center;
 
+  font-size: 2.2em;
 
+  font-weight: bold;
 
+}
 
+.splash .button {
 
+  margin-top: 10px;
 
+}
 
+.splash .copyright {
 
+  position: absolute;
 
+  width: 100%;
 
+  bottom: 8px;
 
+  left: 0px;
 
+  font-size: 0.8em;
 
+  font-style: normal;
 
+  padding: 0px;
 
+}