Changes on ".bubble" class

src/stylesheets/Lungo.layout.aside.less

@@ -11,12 +11,12 @@
 @import "mixins.less";
 
 section.aside {
-    &:not(.mini) { .transform(translate(@aside-width, 0)); }
-    &.mini { .transform(translate(@aside-width-mini, 0)); }
+    &:not(.small) { .transform(translate(@aside-width, 0)); }
+    &.small { .transform(translate(@aside-width-small, 0)); }
 
     &.onright {
         .transform(translate(-@aside-width, 0));
-        &.mini { .transform(translate(-@aside-width-mini, 0)); }
+        &.small { .transform(translate(-@aside-width-small, 0)); }
     }
 }
 
@@ -48,9 +48,7 @@ aside {
     & a {
         display: block;
         height: 40px;
-
         font-size: 14px;
-        //font-weight: bold;
         line-height: 40px;
         overflow: hidden;
         white-space: nowrap;
@@ -59,7 +57,7 @@ aside {
 
     & .bubble {
         float: right;
-        font-size: 11px;
+        padding-bottom: 0px;
     }
     & *.not(.anchor) .bubble { margin-top: 13px; }
     & *.anchor .bubble { margin-top: 2px; }
@@ -79,12 +77,12 @@ aside {
         line-height: 19px;
     }
 
-    &.mini {
-        width: @aside-width-mini;
+    &.small {
+        width: @aside-width-small;
 
         & a {
             padding: 0 8px;
-            height: @aside-width-mini;
+            height: @aside-width-small;
         }
         & .icon {
             height: 48px;
@@ -110,6 +108,6 @@ aside {
         .transform(translate3d(0px, 0, 0));
         -webkit-transition: none;
 
-        &.mini{ left: @aside-width-mini; }
+        &.small{ left: @aside-width-small; }
     }
 }

src/stylesheets/Lungo.layout.less

@@ -10,9 +10,10 @@
 @import "constants.less";
 @import "mixins.less";
 
-body {  overflow: hidden; }
+body {
+    overflow: hidden;
+}
 
-/* @group <section> */
 section {
     position: absolute; /* position: fixed on iOS5 & Android 4 */
     left:  0px;
@@ -61,9 +62,7 @@ section {
         }
     }
 }
-/* @end */
 
-/* @group <header> & <footer> */
 header, footer  {
     position: absolute;
     left: 0px;
@@ -108,5 +107,6 @@ header {
     }
 }
 
-footer  { bottom: 0px; }
-/* @end */
+footer  {
+    bottom: 0px;
+}

src/stylesheets/Lungo.layout.nav.less

@@ -42,8 +42,8 @@ nav {
 
     & .bubble {
         position: relative;
-        top:  -8px;
-        left: -8px;
+        top:  -5px;
+        left: -5px;
         margin-right: -20px;
     }
 }
@@ -80,7 +80,7 @@ header, footer {
     }
 
     & .bubble {
-        top:  -44px;
+        top:  -56px;
         left: 4px;
     }
 

src/stylesheets/Lungo.theme.default.less

@@ -9,7 +9,6 @@
 
 @import "constants.less";
 @import "mixins.less";
-
 @import "lungo.theme.default.font.css";
 
 @theme:  #05b8e2;
@@ -21,6 +20,7 @@
     @theme-secondary: #2c2c2d;
         @theme-secondary-dark: #1c1c1c;
 
+@border-radius-section: 5px;
 
 @color-border: #2566a4;
 @color-border-light: #64b9e2;
@@ -36,22 +36,17 @@
 
 /* @group <header> & <footer> & <article> */
 header {
-    /*border-top-left-radius: 5px;
-    border-top-right-radius: 5px;*/
-    border-bottom: 1px solid #1a2838;
+    .border-radius(@border-radius-section @border-radius-section 0px 0px);
 
+    border-bottom: 1px solid #1a2838;
     background: @background-main;
-
-    box-shadow: inset 0 1px 0 @color-border-light, inset 0 -1px 0 @color-border;
-
+    .box-shadow(~"inset 0 1px 0 #64b9e2, inset 0 -1px 0 #2566a4");
     position: absolute;
     z-index: 2;
-
     & .title {
         color: @white;
         text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
     }
-
     & .subtitle {
         color: rgba(255,255,255,0.6);
         text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
@@ -60,12 +55,9 @@ header {
 
 footer {
     background: @background-secondary-footer;
-
     border-top: 1px inset #2A2A2A;
     color: #353b42;
-
-    //border-bottom-left-radius: 5px;
-    //border-bottom-right-radius: 5px;
+    .border-radius(0px 0px @border-radius-section @border-radius-section);
 }
 
 article {
@@ -79,7 +71,6 @@ article {
 
 /* @group <nav> */
 header nav {
-
     & a {
         color: @white;
         text-shadow: 0 1px 0 rgba(0,0,0,0.3);
@@ -87,14 +78,13 @@ header nav {
 
     &:not(.plain) {
         & a {
-            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)");
             &.accept { background: rgba(0, 255, 0, 0.4); }
             &.cancel { background: rgba(255, 0, 0, 0.4); }
         }
-        &.onright a { box-shadow: -1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2); }
+        &.onright a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }
 
-        & a:active { box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5); }
+        & a:active { .box-shadow(~"inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5)"); }
     }
 
     &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
@@ -103,19 +93,17 @@ header nav {
 .toolbar a {
     color: #cdd9e3;
     .border-radius(4px);
-    font-weight: bold;
 
     &.current, &.active {
         background: #111;
-        box-shadow: inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05);
+        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)");
     }
 }
 
-
 .groupbar {
     background: #272a2d;
     border-bottom: solid 1px rgba(0,0,0,1);
-    box-shadow: inset 0 1px 8px rgba(0,0,0,0.3);
+    .box-shadow(~"inset 0 1px 8px rgba(0,0,0,0.3)");
 
     & a {
         color: #6e6e6e;
@@ -140,7 +128,7 @@ aside {
         &.current, &.current .icon { color: @white !important; }
     }
 
-    &:not(.mini) a {
+    &:not(.small) a {
         border-bottom: 1px inset #222;
         border-top: 1px inset rgba(255,255,255,0.1);
     }
@@ -152,14 +140,14 @@ aside {
 }
 
 section.aside {
-    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
-    &.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
+    .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
+    &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
 }
 
 @media handheld, only screen and (min-width: 768px) {
     section.current, section.show {
-        box-shadow: -4px 0 8px rgba(0,0,0,0.5);
-        &.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
+        .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
+        &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
     }
 }
 /* @end */
@@ -224,9 +212,9 @@ section.aside {
         border-bottom-color: rgba(0,0,0,0.2);
 
         & .toolbar a {
-            box-shadow: 1px 0px 0px #d9d9d9;
+            .box-shadow(~"1px 0px 0px #d9d9d9");
 
-            &:last-child { box-shadow: none; }
+            &:last-child { .box-shadow(none); }
             &.current {
                 background: transparent;
                 color: #333;
@@ -251,7 +239,7 @@ section.aside {
             &:first-child { .border-radius(5px 5px 0px 0px); }
             &:last-child {
                 .border-radius(0px 0px 5px 5px);
-                box-shadow: 0 1px 0 rgba(0,0,0,0.05);
+                .box-shadow(~"0 1px 0 rgba(0,0,0,0.05)");
             }
         }
     }
@@ -260,14 +248,12 @@ section.aside {
 /* @group .button */
 .button {
     .border-radius(@border-radius);
-    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3);
+    .box-shadow(~"inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3)");
 
     font-weight: bold;
     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
 
-    &:active {
-        -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3);
-    }
+    &:active { .box-shadow(~"inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3)"); }
 
     &.default {
         background: #2c4579;
@@ -291,11 +277,11 @@ input, textarea, select {
     .border-radius(@border-radius);
     color: #858585;
     font-family: 'Roboto', Helvetica, Arial, sans-serif;
-    box-shadow: @box-shadow-form;
+    .box-shadow(@box-shadow-form);
 
     &.underline {
         border:  none;
-        box-shadow: none;
+        .box-shadow(none);
         border-bottom: 2px solid #e1e1e1;
     }
 }
@@ -337,20 +323,20 @@ input[type="checkbox"] + span, input[type="radio"] + span {
 input[type="range"] {
     background-color: #c7c7c7;
     .border-radius(@border-radius);
-    box-shadow: @box-shadow-form-big;
+    .box-shadow(@box-shadow-form-big);
 
 
     &:active {
-        box-shadow: none;
+        .box-shadow(none);
         background: @background-main;
     }
     &::-webkit-slider-thumb {
         //border: solid 7px rgba(255,255,255, 0.5);
-        box-shadow: 0 0 4px #333;
+        .box-shadow(0 0 4px #333);
         background: #fff;
     }
     &:active::-webkit-slider-thumb {
-        box-shadow: 0px 0px 4px #34b7dc;
+        .box-shadow(0px 0px 4px #34b7dc);
     }
 }
 /* @end */
@@ -366,7 +352,7 @@ input[type="range"] {
 
     & .bar {
         background: #c7c7c7;
-        box-shadow: @box-shadow-form-big;
+        .box-shadow(@box-shadow-form-big);
         .border-radius(@border-radius);
 
         & .value {
@@ -392,10 +378,8 @@ input[type="range"] {
 .bubble {
     color: #fff;
     .border-radius(7px);
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
-    font-weight: bold !important;
-
-    box-shadow: 0 0 6px #000;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
+    border: solid 1px white;
 
     &.count { background: @background-main; }
 }

src/stylesheets/Lungo.widgets.less

@@ -10,61 +10,38 @@
 @import "constants.less";
 @import "mixins.less";
 
-/* @group scroll */
-
 .scrollable {
-  position: absolute;
-  display: block;
+    position: absolute;
+    display: block;
 }
 
 .scroll {
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
 }
-/* @end */
 
-/* @group .position */
 .onleft { float: left; }
-
 .onright { float: right;}
-
-.indented > * { padding: 10px; }
-
-.margin-top-4{ margin-top: 4px; }
-/* @end */
-
-/* @group .visibility */
 .hidden { display: none; }
-.semi-opacity{ opacity: 0.5; }
-/* @end */
+.indented > * { padding: 10px; }
 
-/* @group .sizing */
-.size32 {
-  font-size: 32px;
-    height: 32px;
-    width: 32px;
-    line-height: 32px;
-}
 
-.icon.mini {
-  font-size: 20px !important;
+.icon.small {
+    font-size: 20px !important;
     height: 16px !important;
     width: 16px !important;
     line-height: 16px !important;
 }
-/* @end */
+
 
 .framed { border: 2px solid #fff;}
 
 .round { .border-radius(4px); }
 
-/* @end */
-
 .bubble {
-  padding: 2px 3px 1px;
-  .border-radius(1px);
-  font-size: 0.8em;
-  font-weight: bold;
-  line-height: 1.0em;
-}
-
+    padding: 1px 3px 1px 3px;
+    height: 14px;
+    font-size: 10px;
+    font-weight: bold;
+    line-height: 14px;
+}

src/stylesheets/constants.less

@@ -1,69 +1,48 @@
 @import "mixins.less";
 
-/* @group DIMENSIONS */
-
+/* DIMENSIONS */
 @header-height: 42px;
-@with-labels-height: 51px;
+    @header_extended_height: 74px;
+@header_footer_height: 40px;
+@footer_toolbar_height: 48px;
+    @with-labels-height: 51px;
 @article-bottom: 41px;
     @article-bottom-with-labels: 52px;
 
 @border-radius: 3px;
 
 @aside-width: 256px;
-    @aside-width-mini: 64px;
-
-/* @end */
+    @aside-width-small: 64px;
 
 @defaultTrasition : @easeOutSine;
 
-@header_footer_height: 40px;
-    @header_extended_height: 74px;
-@footer_toolbar_height: 48px;
-
-
-/* @group COLORS */
-
+/* COLORS */
 @white:             #fff;
 @black:             #000;
-@black-active:      #000;
-
+    @black-active:      #000;
 @grey:              #ccc;
-@grey-active:       #b5b5b5;
-
+    @grey-active:       #b5b5b5;
 @red:               #e33100;
-@red-active:        #c5280f;
-
+    @red-active:        #c5280f;
 @lightgreen:        #91bd09;
-@lightgreen-active: #7ea41a;
-
+    @lightgreen-active: #7ea41a;
 @green:             #009600;
-@green-active:      #00770e;
-
+    @green-active:      #00770e;
 @blue:              #237fd7;
-@blue-active:       #1a69b6;
-
+    @blue-active:       #1a69b6;
 @arcticblue:        #2daebf;
-@arcticblue-active: #238e9e;
-
+    @arcticblue-active: #238e9e;
 @orange:            #ff5c00;
-@orange-active:     #da4e15;
-
+    @orange-active:     #da4e15;
 @purple:            #7b658d;
-@purple-active:     #574765;
-
+    @purple-active:     #574765;
 @magenta:           #a9014b;
-@magenta-active:    #831239;
-
+    @magenta-active:    #831239;
 @pink:              #ff007f;
-@pink-active:       #de2870;
-
+    @pink-active:       #de2870;
 @yellow:            #ffb515;
-@yellow-active:     #dfa020;
-
+    @yellow-active:     #dfa020;
 @twitter:           #35cdff;
-@twitter-active:    #2bafda;
-
+    @twitter-active:    #2bafda;
 @facebook:          #3b5998;
-@facebook-active:   #2c4579;
-
-/* @end */
+    @facebook-active:   #2c4579;

src/stylesheets/css/Lungo.layout.nav.css

@@ -1,13 +1,13 @@
 nav{height:auto;text-align:center;}nav a{padding:0 6px;min-width:28px;z-index:1000;float:left;}nav a .icon{position:relative;top:3px;font-size:24px;display:inline-block;}
 nav a img{width:16px;height:16px;top:-1px !important;}
 nav a abbr{position:relative;display:inline;font-weight:bold;}
-nav .bubble{position:relative;top:-8px;left:-8px;margin-right:-20px;}
+nav .bubble{position:relative;top:-5px;left:-5px;margin-right:-20px;}
 header:not(.toolbar) nav .icon~abbr,footer:not(.toolbar) nav .icon~abbr{margin-left:6px;}
 .toolbar{height:40px;}.toolbar nav{margin:2px;display:block;}
 .toolbar a{padding:0;height:36px;}
 .toolbar.with-labels{height:51px;}.toolbar.with-labels a{height:47px;}
 .toolbar.with-labels .icon{padding-bottom:12px;}
 .toolbar .icon{display:block;top:0px;font-size:34px;line-height:34px;}
-.toolbar .bubble{top:-44px;left:4px;}
+.toolbar .bubble{top:-56px;left:4px;}
 .toolbar abbr{position:absolute;top:32px;width:inherit;height:14px;margin-left:0px;display:block !important;font-size:11px;line-height:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 .groupbar{position:absolute;top:43px;height:28px;display:block;width:100%;padding:4px 0 2px;display:block;line-height:28px;z-index:2;}.groupbar a{padding:0px;font-weight:bold;}

src/stylesheets/css/Lungo.widgets.css

@@ -2,12 +2,9 @@
 .scroll{overflow:scroll;-webkit-overflow-scrolling:touch;}
 .onleft{float:left;}
 .onright{float:right;}
-.indented>*{padding:10px;}
-.margin-top-4{margin-top:4px;}
 .hidden{display:none;}
-.semi-opacity{opacity:0.5;}
-.size32{font-size:32px;height:32px;width:32px;line-height:32px;}
-.icon.mini{font-size:20px !important;height:16px !important;width:16px !important;line-height:16px !important;}
+.indented>*{padding:10px;}
+.icon.small{font-size:20px !important;height:16px !important;width:16px !important;line-height:16px !important;}
 .framed{border:2px solid #fff;}
 .round{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
-.bubble{padding:2px 3px 1px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;font-size:0.8em;font-weight:bold;line-height:1.0em;}
+.bubble{padding:1px 3px 1px 3px;height:14px;font-size:10px;font-weight:bold;line-height:14px;}

src/stylesheets/css/constants.css

@@ -1,4 +1 @@
-/* @group DIMENSIONS */
-/* @end */
-/* @group COLORS */
-/* @end */
+

src/view/Lungo.View.Aside.js

@@ -58,7 +58,7 @@ LUNGO.View.Aside = (function(lng, undefined) {
         //@todo: Refactor
         if (aside_class) {
             classes += (aside_class.indexOf(CLASS.RIGHT) > -1) ? CLASS.RIGHT : '';
-            classes += (aside_class.indexOf(CLASS.MINI) > -1) ? CLASS.MINI : '';
+            classes += (aside_class.indexOf(CLASS.SMALL) > -1) ? CLASS.SMALL : '';
         }
 
         return classes;