Enhaced list manager

src/stylesheets/Lungo.layout.list.less

@@ -12,9 +12,13 @@
 
 .list {
     & li {
-        position: relative;
         list-style-type: none;
         padding: 8px;
+        position: relative;
+
+        /*
+        position: relative;
+        */
 
         &.arrow::after{
             position: absolute;
@@ -30,7 +34,7 @@
 
         & a { display: block; }
 
-        & .icon:not(.small), & img {
+        & .icon, & img {
             float: left;
             width: 32px;
             height: 32px;
@@ -40,10 +44,11 @@
             text-align: center;
         }
 
-        &.thumb img {
+        &.thumb img, &.thumb .icon {
            margin: -8px 8px -8px -8px;
            height: 46px !important;
            width:46px !important;
+           font-size: 3.6em;
         }
 
         &.anchor {

src/stylesheets/Lungo.theme.scaffold.less

@@ -167,12 +167,15 @@ section.aside {
 /* @group .list */
 .list, .list li:not(.toolbar) a { color: #2a2a2a; }
 
-.list {
-    & ul {
-        background: #fff;
-    }
+section .list {
+    & ul, & li { background: #fff; }
     & li {
         border-bottom: 1px inset @theme-light;
+    }
+}
+
+.list {
+    & li {
         &:last-child { border-bottom: none; }
 
         &.selectable:active {

src/stylesheets/Lungo.widgets.colour.less

@@ -39,17 +39,17 @@ a.twitter:active, a.twitter.active{background-color: @twitter-active;}
 a.facebook, .facebook:not(span){background-color: @facebook;}
 a.facebook:active, a.facebook.active{background-color: @facebook-active;}
 
-li.grey{ box-shadow: inset 3px 0px 0px @grey;}
-li.dark-grey{ box-shadow: inset 3px 0px 0px @black;}
-li.red{ box-shadow: inset 3px 0px 0px @red;}
-li.lightgreen{ box-shadow: inset 3px 0px 0px @lightgreen;}
-li.green{ box-shadow: inset 3px 0px 0px @green;}
-li.blue{ box-shadow: inset 3px 0px 0px @blue;}
-li.arcticblue{ box-shadow: inset 3px 0px 0px @arcticblue;}
-li.orange{ box-shadow: inset 3px 0px 0px @orange;}
-li.purple{ box-shadow: inset 3px 0px 0px @purple;}
-li.magenta{ box-shadow: inset 3px 0px 0px @magenta;}
-li.pink{ box-shadow: inset 3px 0px 0px @pink;}
-li.yellow{ box-shadow: inset 3px 0px 0px @yellow;}
-li.twitter{ box-shadow: inset 3px 0px 0px @twitter;}
-li.facebook{ box-shadow: inset 3px 0px 0px @facebook;}
+li.grey{ box-shadow: inset 4px 0px 0px @grey;}
+li.dark-grey{ box-shadow: inset 4px 0px 0px @black;}
+li.red{ box-shadow: inset 4px 0px 0px @red;}
+li.lightgreen{ box-shadow: inset 4px 0px 0px @lightgreen;}
+li.green{ box-shadow: inset 4px 0px 0px @green;}
+li.blue{ box-shadow: inset 4px 0px 0px @blue;}
+li.arcticblue{ box-shadow: inset 4px 0px 0px @arcticblue;}
+li.orange{ box-shadow: inset 4px 0px 0px @orange;}
+li.purple{ box-shadow: inset 4px 0px 0px @purple;}
+li.magenta{ box-shadow: inset 4px 0px 0px @magenta;}
+li.pink{ box-shadow: inset 4px 0px 0px @pink;}
+li.yellow{ box-shadow: inset 4px 0px 0px @yellow;}
+li.twitter{ box-shadow: inset 4px 0px 0px @twitter;}
+li.facebook{ box-shadow: inset 4px 0px 0px @facebook;}

src/stylesheets/Lungo.widgets.less

@@ -27,6 +27,9 @@
             & > * { float: left; }
         }
     }
+
+    // FIXES: position: relative childrens
+    & > * { -webkit-transform: translate3d(0, 0, 0); }
 }
 
 .left { float: left; }

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

@@ -9,9 +9,13 @@
 /* DIMENSIONS */
 /* COLORS */
 .list li {
-  position: relative;
   list-style-type: none;
   padding: 8px;
+  position: relative;
+  /*
+        position: relative;
+        */
+
 }
 .list li.arrow::after {
   position: absolute;
@@ -36,7 +40,7 @@
 .list li a {
   display: block;
 }
-.list li .icon:not(.small),
+.list li .icon,
 .list li img {
   float: left;
   width: 32px;
@@ -46,10 +50,12 @@
   line-height: 1.0em;
   text-align: center;
 }
-.list li.thumb img {
+.list li.thumb img,
+.list li.thumb .icon {
   margin: -8px 8px -8px -8px;
   height: 46px !important;
   width: 46px !important;
+  font-size: 3.6em;
 }
 .list li.anchor {
   font-size: 0.85em;

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

@@ -186,10 +186,11 @@ section.aside.right {
 .list li:not(.toolbar) a {
   color: #2a2a2a;
 }
-.list ul {
+section .list ul,
+section .list li {
   background: #fff;
 }
-.list li {
+section .list li {
   border-bottom: 1px inset #cccccc;
 }
 .list li:last-child {

src/stylesheets/css/Lungo.widgets.colour.css

@@ -121,44 +121,44 @@ a.facebook.active {
   background-color: #2c4579;
 }
 li.grey {
-  box-shadow: inset 3px 0px 0px #cccccc;
+  box-shadow: inset 4px 0px 0px #cccccc;
 }
 li.dark-grey {
-  box-shadow: inset 3px 0px 0px #000000;
+  box-shadow: inset 4px 0px 0px #000000;
 }
 li.red {
-  box-shadow: inset 3px 0px 0px #e33100;
+  box-shadow: inset 4px 0px 0px #e33100;
 }
 li.lightgreen {
-  box-shadow: inset 3px 0px 0px #91bd09;
+  box-shadow: inset 4px 0px 0px #91bd09;
 }
 li.green {
-  box-shadow: inset 3px 0px 0px #009600;
+  box-shadow: inset 4px 0px 0px #009600;
 }
 li.blue {
-  box-shadow: inset 3px 0px 0px #237fd7;
+  box-shadow: inset 4px 0px 0px #237fd7;
 }
 li.arcticblue {
-  box-shadow: inset 3px 0px 0px #2daebf;
+  box-shadow: inset 4px 0px 0px #2daebf;
 }
 li.orange {
-  box-shadow: inset 3px 0px 0px #ff5c00;
+  box-shadow: inset 4px 0px 0px #ff5c00;
 }
 li.purple {
-  box-shadow: inset 3px 0px 0px #7b658d;
+  box-shadow: inset 4px 0px 0px #7b658d;
 }
 li.magenta {
-  box-shadow: inset 3px 0px 0px #a9014b;
+  box-shadow: inset 4px 0px 0px #a9014b;
 }
 li.pink {
-  box-shadow: inset 3px 0px 0px #ff007f;
+  box-shadow: inset 4px 0px 0px #ff007f;
 }
 li.yellow {
-  box-shadow: inset 3px 0px 0px #ffb515;
+  box-shadow: inset 4px 0px 0px #ffb515;
 }
 li.twitter {
-  box-shadow: inset 3px 0px 0px #35cdff;
+  box-shadow: inset 4px 0px 0px #35cdff;
 }
 li.facebook {
-  box-shadow: inset 3px 0px 0px #3b5998;
+  box-shadow: inset 4px 0px 0px #3b5998;
 }

src/stylesheets/css/Lungo.widgets.css

@@ -23,6 +23,9 @@
 .scroll.horizontal  > *  > * {
   float: left;
 }
+.scroll  > * {
+  -webkit-transform: translate3d(0, 0, 0);
+}
 .left {
   float: left;
 }