Stylesheet for <aside.small/>

src/stylesheets/Lungo.layout.aside.less

@@ -57,23 +57,26 @@ aside {
 
         & nav {
             width: @aside-width-small;
+            text-align: center;
             & a {
+                display: block;
                 padding: 0px;
                 width: @aside-width-small;
                 height: @aside-width-small;
-            }
-            & .icon {
-                font-size: 48px;
-                text-align: center;
-            }
-
-            & .bubble {
-                top: 4px;
-                left: -22px;
+                & .icon {
+                    position: absolute;
+                    width: inherit;
+                    font-size: 38px;
+                    line-height: @aside-width-small;
+                }
+                & .bubble {
+                    position: relative;
+                    top: -54px;
+                    right: 6px;
+                }
+                &:first-child {margin-top: 8px; }
             }
         }
-
-
     }
 }
 

src/stylesheets/Lungo.theme.default.less

@@ -91,8 +91,9 @@ aside {
     }
     & article { background: none; }
 
-    & nav {
-        & .icon {color:white;}
+    & nav a {
+        &.current .icon { color: white; }
+        &:not(.current) .icon {color:@theme-dark-nav;}
     }
 
     & .list li {

src/stylesheets/css/Lungo.layout.aside.css

@@ -9,32 +9,32 @@
 /* DIMENSIONS */
 /* COLORS */
 section.aside:not(.small) {
-  -webkit-transform: translateX(264px);
-  -moz-transform: translateX(264px);
-  -ms-transform: translateX(264px);
-  -o-transform: translateX(264px);
-  transform: translateX(264px);
+  -webkit-transform: translatex(264px);
+  -moz-transform: translatex(264px);
+  -ms-transform: translatex(264px);
+  -o-transform: translatex(264px);
+  transform: translatex(264px);
 }
 section.aside.small {
-  -webkit-transform: translateX(64px);
-  -moz-transform: translateX(64px);
-  -ms-transform: translateX(64px);
-  -o-transform: translateX(64px);
-  transform: translateX(64px);
+  -webkit-transform: translatex(64px);
+  -moz-transform: translatex(64px);
+  -ms-transform: translatex(64px);
+  -o-transform: translatex(64px);
+  transform: translatex(64px);
 }
 section.aside.right {
-  -webkit-transform: translateX(-264px);
-  -moz-transform: translateX(-264px);
-  -ms-transform: translateX(-264px);
-  -o-transform: translateX(-264px);
-  transform: translateX(-264px);
+  -webkit-transform: translatex(-264px);
+  -moz-transform: translatex(-264px);
+  -ms-transform: translatex(-264px);
+  -o-transform: translatex(-264px);
+  transform: translatex(-264px);
 }
 section.aside.right.small {
-  -webkit-transform: translateX(-64px);
-  -moz-transform: translateX(-64px);
-  -ms-transform: translateX(-64px);
-  -o-transform: translateX(-64px);
-  transform: translateX(-64px);
+  -webkit-transform: translatex(-64px);
+  -moz-transform: translatex(-64px);
+  -ms-transform: translatex(-64px);
+  -o-transform: translatex(-64px);
+  transform: translatex(-64px);
 }
 aside {
   position: absolute;
@@ -70,19 +70,27 @@ aside.small {
 }
 aside.small nav {
   width: 64px;
+  text-align: center;
 }
 aside.small nav a {
+  display: block;
   padding: 0px;
   width: 64px;
   height: 64px;
 }
-aside.small nav .icon {
-  font-size: 48px;
-  text-align: center;
+aside.small nav a .icon {
+  position: absolute;
+  width: inherit;
+  font-size: 38px;
+  line-height: 64px;
+}
+aside.small nav a .bubble {
+  position: relative;
+  top: -54px;
+  right: 6px;
 }
-aside.small nav .bubble {
-  top: 4px;
-  left: -22px;
+aside.small nav a:first-child {
+  margin-top: 8px;
 }
 /*
 @TODO: Tablets & TV on final release

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

@@ -41,12 +41,12 @@ section > footer {
   -moz-box-shadow: inset 0 3px 0 #333333;
   box-shadow: inset 0 3px 0 #333333;
 }
-section > footer > nav a {
+section > footer  > nav a {
   -webkit-box-shadow: 1px 0 0 #151515;
   -moz-box-shadow: 1px 0 0 #151515;
   box-shadow: 1px 0 0 #151515;
 }
-section > footer > nav a.current {
+section > footer  > nav a.current {
   color: #ffffff;
   background: #111111;
   -webkit-box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3;
@@ -78,9 +78,12 @@ aside header {
 aside article {
   background: none;
 }
-aside nav .icon {
+aside nav a.current .icon {
   color: white;
 }
+aside nav a:not(.current) .icon {
+  color: #888888;
+}
 aside .list li {
   background: none;
   border-bottom-color: #222222;
@@ -142,7 +145,7 @@ header nav.button a:active {
 section > nav.groupbar {
   background-color: #222222;
 }
-section > nav.groupbar > a.current {
+section > nav.groupbar  > a.current {
   -webkit-box-shadow: inset 0 -3px 0 #2a95d3;
   -moz-box-shadow: inset 0 -3px 0 #2a95d3;
   box-shadow: inset 0 -3px 0 #2a95d3;