List stylesheets

examples/kitchen-sink/app/sections/list.html

@@ -1,4 +1,4 @@
-    <section id="list" data-transition="slide">
+<section id="list" data-transition="slide">
     <header data-title="Lists" class="extended">
         <nav class="button">
             <a href="#back" data-router="section" data-label="back"></a>
@@ -7,13 +7,11 @@
 
     <nav class="groupbar">
         <a href="#list-normal" data-router="article" class="current" data-icon="checkmark" data-label="Normal"></a>
-        <a href="#list-indented" data-router="article" data-icon="close" data-label="Indented"></a>
+        <a href="#list-indented" data-router="article" data-label="Indented"></a>
     </nav>
 
     <article id="list-normal" class="list scroll">
         <ul>
-            <li class="anchor">With right elements</li>
-
             <li>
                 <strong>&lt;li&gt; + &lt;strong&gt; </strong>
             </li>
@@ -33,15 +31,27 @@
                 <small>&lt;small&gt;</small>
             </li>
 
-            <li class="anchor">.arrow class</li>
+            <li class="anchor">colors</li>
 
-            <li class="arrow">
-                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+            <li class="dark">
+                <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="theme">
+                <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="arrow light">
+                <strong>&lt;li .arrow.light&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
             </li>
 
+            <li class="anchor">.arrow class</li>
+
             <li class="arrow">
                 <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
             </li>
 
             <li class="arrow">
@@ -61,6 +71,14 @@
                 </a>
             </li>
 
+            <li>
+                <a href="#">
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                    <div class="right">.right</div>
+                </a>
+            </li>
+
             <li>
                 <a href="#">
                     <div class="right bubble blue">.right.bubble</div>
@@ -109,13 +127,10 @@
                 <small>&lt;small&gt;</small>
             </li>
         </ul>
-
     </article>
 
     <article id="list-indented" class="list scroll indented">
         <ul>
-            <li class="anchor">With right elements</li>
-
             <li>
                 <strong>&lt;li&gt; + &lt;strong&gt; </strong>
             </li>
@@ -135,15 +150,27 @@
                 <small>&lt;small&gt;</small>
             </li>
 
-            <li class="anchor">.arrow class</li>
+            <li class="anchor">colors</li>
 
-            <li class="arrow">
-                <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+            <li class="dark">
+                <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="theme">
+                <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+
+            <li class="arrow light">
+                <strong>&lt;li .arrow.light&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
             </li>
 
+            <li class="anchor">.arrow class</li>
+
             <li class="arrow">
                 <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
-                <small>&lt;small&gt;</small>
             </li>
 
             <li class="arrow">
@@ -163,6 +190,14 @@
                 </a>
             </li>
 
+            <li>
+                <a href="#">
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                    <div class="right">.right</div>
+                </a>
+            </li>
+
             <li>
                 <a href="#">
                     <div class="right bubble blue">.right.bubble</div>

examples/kitchen-sink/index.html

@@ -66,9 +66,6 @@
 
         <article id="main-article" class="list indented scroll">
             <ul>
-                <li class="contrast " data-loading="white">
-
-                </li>
 
                 <li class="contrast">
                     <strong>

examples/kitchen-sink/test.html

@@ -40,7 +40,7 @@
 
 <body class="app">
     <section id="layout" data-transition="slide">
-        <header data-title="Layout">
+        <header data-title="Layout"  class="extended">
             <nav class="box">
                 <a href="#features" data-router="aside" data-icon="grid"></a>
                 <a href="#features" data-router="aside" data-label="User"></a>
@@ -62,10 +62,14 @@
             </nav>
         </footer>
 
-         <article id="layout-art1" class="list scroll">
-            <ul>
-                <li class="anchor">With right elements</li>
+        <nav class="groupbar">
+            <a href="#layout-art1" data-router="article" data-label="Normal" class="current"></a>
+            <a href="#layout-art3" data-router="article" data-label="Indented"></a>
+
+        </nav>
 
+         <article id="layout-art1" class="list indented scroll">
+            <ul>
                 <li>
                     <strong>&lt;li&gt; + &lt;strong&gt; </strong>
                 </li>
@@ -85,17 +89,29 @@
                     <small>&lt;small&gt;</small>
                 </li>
 
-                <li class="anchor">.arrow class</li>
+                <li class="anchor">colors</li>
 
-                <li class="arrow">
-                    <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                <li class="dark">
+                    <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
                 </li>
 
-                <li class="arrow disabled">
-                    <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                <li class="theme">
+                    <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+
+                <li class="arrow light">
+                    <strong>&lt;li .arrow.light&gt; + &lt;strong&gt; </strong>
                     <small>&lt;small&gt;</small>
                 </li>
 
+                <li class="anchor">.arrow class</li>
+
+                <li class="arrow">
+                    <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                </li>
+
                 <li class="arrow">
                     <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
                     <small>&lt;small&gt;</small>
@@ -113,6 +129,14 @@
                     </a>
                 </li>
 
+                <li>
+                    <a href="#">
+                        <strong>&lt;strong&gt; element</strong>
+                        <small>with &lt;small&gt; element</small>
+                        <div class="right">.right</div>
+                    </a>
+                </li>
+
                 <li>
                     <a href="#">
                         <div class="right bubble blue">.right.bubble</div>
@@ -188,7 +212,30 @@
             </form>
         </article>
 
-        <article id="layout-art3"></article>
+        <article id="layout-art3" class="list indented">
+            <ul>
+                <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
+                    <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+                <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon@2x.png">
+                    <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                    <small>&lt;small&gt;</small>
+
+                </li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+            </ul>
+
+
+        </article>
         <article id="layout-art4"></article>
     </section>
 

src/stylesheets/Lungo.layout.list.less

@@ -12,8 +12,8 @@
 .list {
     & li {
         list-style-type: none;
-        padding: 8px;
-        // position: relative;
+        padding: 9px;
+        position: relative;
 
         &.arrow::after{
             position: absolute;
@@ -39,11 +39,15 @@
             text-align: center;
         }
 
-        &.thumb img, &.thumb .icon {
-           margin: -8px 8px -8px -8px;
-           height: 46px !important;
-           width:46px !important;
-           font-size: 3.6em;
+        &.thumb {
+            & img, & .icon {
+                margin: -8px 8px -8px -8px;
+                // height: 46px !important;
+                // width:46px !important;
+                height: 48px !important;
+                width:48px !important;
+                font-size: 3.6em;
+            }
         }
 
         &.anchor {
@@ -59,6 +63,7 @@
         }
 
         & strong {
+            position: relative;
             font-size: 1.15em; }
 
         & small {
@@ -67,6 +72,10 @@
             white-space: nowrap;
             text-overflow: ellipsis;
             font-size: 0.8em;
+
+            & + .right {
+                margin-top: -12px;
+            }
         }
 
     }
@@ -77,8 +86,9 @@
     }
 
     & .right {
-        font-size: 0.75em;
-        font-weight: bold; }
+        font-size: 0.8em;
+        font-weight: bold;
+    }
 
     & .loading .right { font-size: 1.0em; }
 
@@ -87,7 +97,10 @@
         width: 13px !important;
         margin-right: 1px !important;
         font-size: 1.2em !important;
-        line-height: 0.8em;
+        line-height: 1.1em;
     }
 
+    &.indented li {
+        margin-bottom: 10px;
+    }
 }

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

@@ -10,7 +10,8 @@
 /* COLORS */
 .list li {
   list-style-type: none;
-  padding: 8px;
+  padding: 9px;
+  position: relative;
 }
 .list li.arrow::after {
   position: absolute;
@@ -43,8 +44,8 @@
 .list li.thumb img,
 .list li.thumb .icon {
   margin: -8px 8px -8px -8px;
-  height: 46px !important;
-  width: 46px !important;
+  height: 48px !important;
+  width: 48px !important;
   font-size: 3.6em;
 }
 .list li.anchor {
@@ -59,6 +60,7 @@
   display: none;
 }
 .list li strong {
+  position: relative;
   font-size: 1.15em;
 }
 .list li small {
@@ -68,12 +70,15 @@
   text-overflow: ellipsis;
   font-size: 0.8em;
 }
+.list li small + .right {
+  margin-top: -12px;
+}
 .list .bubble {
   padding-left: 4px;
   padding-right: 4px;
 }
 .list .right {
-  font-size: 0.75em;
+  font-size: 0.8em;
   font-weight: bold;
 }
 .list .loading .right {
@@ -85,5 +90,8 @@
   width: 13px !important;
   margin-right: 1px !important;
   font-size: 1.2em !important;
-  line-height: 0.8em;
+  line-height: 1.1em;
+}
+.list.indented li {
+  margin-bottom: 10px;
 }