Changes on scaffold stylesheet

examples/test/app/events.js

@@ -4,7 +4,6 @@ App.Events = (function(lng, undefined) {
         //lng.View.Aside.toggle('.onright');
 
         setTimeout(function() {
-
             lng.View.Element.progress('#progress-normal', 50, true, 'yeah');
             lng.View.Element.progress('#progress-big', 75, true, 'yeah');
 

examples/test/app/sections/aside-profiles.html

@@ -8,68 +8,69 @@
 
         <article class="list scroll current" >
             <ul >
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/1.jpg">
+                        <div class="bubble onright">prueba</div>
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-2" data-target="article" data-image="assets/images/avatars/2.jpg">
                         <span class="onright bubble">123</span>
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/3.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/4.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/5.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/6.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/7.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/8.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/9.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/10.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>
                     </a>
                 </li>
-                <li class="thumb">
+                <li class="">
                     <a href="#nav-1" data-target="article" data-image="assets/images/avatars/11.jpg">
                         <strong>Name of friend</strong>
                         <small>Extra info: mail / phone</small>

examples/test/app/sections/aside.html

@@ -1,7 +1,7 @@
-<aside id="kitchen-sink-scroll" class="small scroll onleft">
+<aside id="kitchen-sink-scroll" class="small -scroll onleft">
     <nav>
         <a href="#nav-1" data-target="article" class="current" data-icon="clock"></a>
-        <a href="#nav-2" data-target="article" data-icon="check" data-count="14"></a>
-        <a href="#test-2" data-target="section" data-icon="wifi"></a>
+        <a href="#nav-2" data-target="article" data-icon="user" data-count="14"></a>
+        <a href="#test-2" data-target="section" data-icon="pushpin"></a>
     </nav>
 </aside>

examples/test/index.html

@@ -52,7 +52,7 @@
                 <span class="subtitle">@soyjavi</span>
             </div>
             <nav class="onright">
-                <a href="#profiles" data-target="aside" class="autohide" data-icon="group"></a>
+                <a href="#profiles" data-target="aside" data-icon="users"></a>
             </nav>
         </header>
 
@@ -176,15 +176,19 @@
                 </li>
             </ul>
             <ul>
-                <li class="tip theme">Examples of tips</li>
-                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
-                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
+                <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="tip" 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="tip dark" 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" 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="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</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>
 

src/stylesheets/Lungo.layout.article.less

@@ -37,7 +37,7 @@ article {
     }
 
     & .box {
-		.box-shadow( 0 1px 0 #e0e0e0);
+        .box-shadow( 0 1px 0 #e0e0e0);
         &.grey {
             color: #636363 !important;
             text-shadow:  0 1px 0 #fff;

src/stylesheets/Lungo.layout.aside.less

@@ -21,22 +21,25 @@ section.aside {
 }
 
 aside {
-    position: fixed;
+    position: absolute;
     height: auto;
     top: 0;
     bottom: 0;
-    visibility: hidden;
+    display: none;
     z-index: 0;
 
     width: @aside-width;
 
     &.onright { right: 0px; }
-    &.current { visibility: visible;}
+    &.current {
+        display: block;
+    }
 
 
     & header, & footer {
         position: relative;
         left: none;
+        height: @header-height;
     }
 
     & footer {
@@ -48,19 +51,20 @@ aside {
         width: @aside-width-small;
 
         & nav {
-            margin-top: @header-height;
+            width: @aside-width-small;
             & a {
                 padding: 0px;
                 width: @aside-width-small;
                 height: @aside-width-small;
             }
             & .icon {
-                font-size: 64px;
+                font-size: 48px;
                 text-align: center;
             }
 
             & .bubble {
-                left: -24px;
+                top: -36px;
+                left: -16px;
             }
         }
 

src/stylesheets/Lungo.layout.list.less

@@ -40,7 +40,7 @@
             transform: rotate(45deg);
         }
 
-        & .icon, & img {
+        & .icon:not(.small), & img {
             float: left;
             width: 32px;
             height: 32px;
@@ -78,21 +78,14 @@
     //@todo: Refactor li.anchor stylesheet;
     & li.anchor {
         font-size: 0.85em;
-        padding: 4px 4px 3px;
+        font-weight: bold;
+        padding: 0px 4px;
+        line-height: 1.5em;
 
-        & .icon {
-            width: 14px !important;
-            height: 14px !important;
-            margin-right: 2px !important;
-            font-size:  1.6em !important;
-            line-height: 14px !important;
+        & .icon.small {
+            margin-right: 2px;
         }
 
         & .bubble { display: none; }
     }
-
-    & .tip {
-        font-size: 0.85em;
-        font-weight: bold;
-    }
 }

src/stylesheets/Lungo.layout.nav.less

@@ -48,18 +48,19 @@ nav {
 
     &.groupbar {
         position: absolute;
-        top: 43px;
-        height: 28px;
+        top: @header-height;
+        height: @header_groupbar_height;
         display: block;
         width: 100%;
-        padding: 4px 0 2px;
-        display: block;
-        line-height: 28px;
         z-index: 2;
 
+        line-height: @header_groupbar_height;
+
         & a {
             padding: 0px;
+            margin: 0px;
             font-weight: bold;
+            height: @header_groupbar_height;
             & .icon {
                 font-size: 1.0em;
             }

src/stylesheets/Lungo.theme.scaffold.less

@@ -96,7 +96,8 @@ header nav {
         color: @theme;
         &.current {
             color:  @white;
-            border-bottom: solid 3px @white;
+            .box-shadow(inset 0 -3px 0 @white);
+            //border-bottom: inset 3px @white;
         }
     }
 }
@@ -136,8 +137,13 @@ aside {
             }
         }
     }
-
-    & a.current { background: #2f2f2f; }
+    & a {
+        color: @theme;
+    }
+    & a.current {
+        background: #2f2f2f;
+        color: @white;
+    }
 }
 
 section.aside {
@@ -194,23 +200,13 @@ section.aside {
     }
 
     & .anchor {
-        color: @white;
-        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
-        border: none;
-    }
-
-    & .tip {
-        color: #7a7a7a;
-        &.theme {
-            color: #fff;
-            .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
-        }
-        &.dark {
-            .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
-            color: #fff;
-            text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
+        color: @theme-dark;
+        background: @theme-light;
+        border-bottom: none;
 
-            & a { color: #fff !important; }
+        &.contrast {
+            background: @theme-dark;
+            color: @theme-light;
         }
     }
 
@@ -241,17 +237,14 @@ section.aside {
 
 &.indented {
     & ul {
-        //.border-radius(3px);
         border: 1px solid @theme;
 
             .box-shadow(0 1px 1px rgba(0,0,0,0.05));
     }
     & li {
         &:first-child {
-            //.border-radius(3px 3px 0px 0px);
         }
         &:last-child {
-            //.border-radius(0px 0px 3px 3px);
         }
     }
 }
@@ -279,10 +272,11 @@ form, .form {
 input, textarea, select {
     border: 1px solid #ccc;
     color: @theme-dark;
+    border-radius: 0px;
     font-family: Helvetica, Arial, sans-serif;
 
     &:focus {
-        color: #000;
+        background: @theme-light;
         border-color: @theme-dark;
     }
 }
@@ -329,24 +323,17 @@ input[type="range"] {
 /* @group .progress */
 .progress {
     .labels {
-        font-size: 12px;
         font-weight: bold;
-        line-height: 18px;
         color: @theme;
     }
 
     & .bar {
         background: @theme-light;
-
         & .value {
             background: @theme-dark;
-
             & .label {
-                float: right;
-                margin-right: 3px;
                 font-weight: bold;
                 color: @white;
-                font-size: 12px;
             }
         }
     }

src/stylesheets/Lungo.widgets.form.less

@@ -219,13 +219,15 @@ input[type="range"] {
     margin-bottom: 8px;
 
     .labels {
+
+        font-size: 1.0em;
         display: block;
         & span:last-child { float: right; }
     }
 
     & .bar {
         height:  15px;
-        line-height: 16px;
+        line-height: 15px;
         display: block;
 
         & .value {
@@ -233,6 +235,12 @@ input[type="range"] {
             height: inherit;
             width: 0%;
             -webkit-transition: width 500ms @defaultTrasition;
+
+            & .label {
+                float: right;
+                margin-right: 4px;
+                font-size: 0.75em;
+            }
         }
     }
 }

src/stylesheets/Lungo.widgets.less

@@ -39,11 +39,11 @@
     padding: 8px 8px;
 }
 
-.icon.small {
-    font-size: 20px !important;
-    height: 16px !important;
-    width: 16px !important;
-    line-height: 16px !important;
+
+.icon {
+    &.small {
+        font-size: 1.3em;
+    }
 }
 
 .framed { border: 2px solid #fff;}

src/stylesheets/constants.less

@@ -2,14 +2,14 @@
 
 /* DIMENSIONS */
 @header-height: 42px;
-    @header_extended_height: 75px;
+    @header_groupbar_height: 30px;
 
 @header_footer_height: 40px;
 @footer_toolbar_height: 48px;
     @with-labels-height: 51px;
 @article-bottom: 41px;
     @article-bottom-with-labels: 52px;
-    @article_with_header_extended: 78px;
+    @article_with_header_extended: 72px;
 
 @border-radius: 3px;
 

src/stylesheets/css/constants.css

@@ -1 +0,0 @@
-