New style of aside

examples/test/app/events.js

@@ -2,8 +2,11 @@ App.Events = (function(lng, undefined) {
 
     lng.ready(function() {
 
+        lng.View.Aside.toggle('.onright');
+
         console.error('LUNGO', LUNGO);
 
+
         setTimeout(function() {
 
             lng.View.Element.progress('#progress-normal', 50, true, 'yeah');

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

@@ -1,15 +1,36 @@
 <aside id="profiles" class="scroll onright">
     <div>
-        <div class="anchor">Author of LungoJS</div>
-        <a href="http://twitter.com/soyjavi" target="_blank" data-image="assets/images/avatars/soyjavi.jpg">Javi Jim&eacute;nez Villar</a>
-        <div class="anchor">CoreTeam</div>
-        <a href="http://twitter.com/pasku1" target="_blank" data-image="assets/images/avatars/pasku.jpg">Guillermo Pascual</a>
-        <div class="anchor">Contributors</div>
-        <a href="http://twitter.com/ikalbeniz" target="_blank" data-image="assets/images/avatars/ikalbeniz.jpg">Iker Perez de Albeniz</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/b374f3bd05b1db4a974585ba57661815?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Jorge Casar</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/3d4bf44cff9779242dd82d20a0b7d0c8?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Dave Winders</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/884b5d1e91b826afc8c6b4fc3429dbd0?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">GermanDZ</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/b41d652ca9b88e636516d907599dcc87?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Juan Gallego Galisteo</a>
-        <a href="#" data-image="https://secure.gravatar.com/avatar/a3257b495a2bc4ae15405c7880300848?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">John McLear</a>
+        <header data-title="Opciones">
+            <nav class="onright">
+                <a href="#" data-icon="refresh"></a>
+            </nav>
+        </header>
+
+        <div class="list">
+            <li data-image="assets/images/avatars/soyjavi.jpg">
+                <a href="#nav-1" data-target="article">
+                    <strong>Javi Jimenez Villar</strong>
+                    <small>Author of @lungojs</small>
+                </a>
+            </li>
+            <li class="red" data-icon="home">
+                    <div class="bubble black onright">23.23</div>
+                    <strong>Lorem Ipsum</strong>
+                    <small>...is a traditional text</small>
+                </li>
+            <li>
+                <div class="bubble red onright">128</div>
+                <strong>Javi Jimenez Villar</strong>
+            </li>
+            <li>
+                <strong>Javi Jimenez Villar</strong>
+            </li>
+            <li>
+                <strong>Javi Jimenez Villar</strong>
+            </li>
+        </div>
+        <!--
+        <footer>prueba</footer>
+    -->
     </div>
 </aside>

examples/test/index.html

@@ -57,17 +57,17 @@
         </header>
 
         <nav class="groupbar">
-            <a href="#nav-1" data-target="article" class="current"  data-icon="clock">&nbsp;Alarm</a>
-            <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Calendar</a>
+            <a href="#nav-1" data-target="article" class="current"  data-icon="clock">&nbsp;Lists</a>
+            <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Form</a>
         </nav>
 
 
         <footer class="toolbar with-labels">
             <nav>
-                <a href="#nav-1" data-target="article" data-title="a" class="current" data-icon="clock" data-label="Alarm"></a>
-                <a href="#nav-2" data-target="article" data-title="b" data-icon="calendar" data-count="17" data-label="Calendar"></a>
+                <a href="#nav-1" data-target="article" data-title="d" data-icon="phone" data-label="Lists" data-count="12"></a>
+                <a href="#nav-2" data-target="article" data-title="b" data-icon="calendar" data-count="17" data-label="Form"></a>
                 <a href="#nav-3" data-target="article" data-title="c"  data-icon="mail" data-label="Emails" data-count="1"></a>
-                <a href="#nav-4" data-target="article" data-title="d" data-icon="phone" data-label="Calls" data-count="12"></a>
+                <a href="#nav-4" data-target="article" data-title="a" class="current" data-icon="clock" data-label="box"></a>
             </nav>
         </footer>
 
@@ -82,7 +82,41 @@
         </footer>
         -->
 
-        <article id="nav-1">
+
+
+        <article id="nav-1" class="list">
+            <ul>
+                <li class="red" data-icon="home">
+                    <div class="bubble red onright">23.23</div>
+                    <strong>Lorem Ipsum</strong>
+                    <small>...is a traditional text</small>
+                </li>
+                <li class="red" data-icon="home">
+                    <div class="bubble green onright">23.23<span class="icon home"></span></div>
+                    <strong>Lorem Ipsum</strong>
+                    <small><span class="icon home"></span>...is a traditional text</small>
+                </li>
+                <li>
+                    <input type="text" placeholder="Input text"/>
+                    <textarea placeholder="Textarea sample"></textarea>
+                    <label class="select">
+                        <select class="custom">
+                            <option value="1">One</option>
+                            <option value="2">Two</option>
+                            <option value="3">Three</option>
+                        </select>
+                    </label>
+                </li>
+                <li class="red selectable" data-icon="pushpin">
+                    <div class="bubble arcticblue onright">23.23<span class="icon pushpin"></span></div>
+                    <strong>Lorem Ipsum</strong>
+                    <small><span class="icon pushpin"></span>...is a traditional text</small>
+                </li>
+            </ul>
+
+        </article>
+
+        <article id="nav-4">
 
             <div class="box quarter">
                 hola
@@ -166,15 +200,6 @@
                 <a href="#test-2" class="button big green" data-icon="check">Test 2</a>
             </div>
         </article>
-
-        <article id="nav-4" class="list">
-            <ul>
-                <li class="red">hola</li>
-                <li class="green">hola</li>
-                <li class="blue">hola</li>
-            </ul>
-
-        </article>
     </section>
 
 

src/stylesheets/Lungo.layout.aside.less

@@ -29,22 +29,15 @@ aside {
     z-index: 0;
 
     width: @aside-width;
-    max-width: @aside-width;
 
     &.onright { right: 0px; }
     &.current { visibility: visible;}
 
-    & .title {
-        line-height: 42px;
-        height: 41px;
-        font-size: 15px;
-        font-weight: bold;
-    }
-
-    & .title, & .anchor, & a {
-        padding: 0 6px;
+    & header, & footer {
+        position: relative;
+        left: none;
     }
-
+    /*
     & a {
         display: block;
         height: 40px;
@@ -55,6 +48,7 @@ aside {
         text-overflow: ellipsis;
     }
 
+
     & .bubble {
         float: right;
         padding-bottom: 0px;
@@ -96,6 +90,7 @@ aside {
             margin-top: -48px;
         }
     }
+    */
 }
 
 @media handheld, only screen and (min-width: 768px) {

src/stylesheets/Lungo.theme.default.less

@@ -37,8 +37,7 @@
 }
 
 /* @group <header> & <footer> & <article> */
-header {
-    position: absolute;
+section > header {
     .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
     .box-shadow(~"inset 0 1px 0 "@color-border-light~", inset 0 -1px 0 "@color-border);
     .border-radius(@border-radius-section @border-radius-section 0px 0px);
@@ -54,7 +53,7 @@ header {
     }
 }
 
-footer {
+section > footer {
     .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 60%);
     border-top: 1px inset #2A2A2A;
     color: #353b42;
@@ -117,27 +116,27 @@ header nav {
 /* @end */
 
 /* @group <aside> */
+a {
+}
 aside {
-    color: #9faab1;
-    background-color: #2f353a;
-
-    & .title { background: #252525; }
-
-    & a {
-        color: #9faab1;
-        text-shadow: 0px 1px 0px #000;
-        &.current, &.current .icon { color: @white !important; }
-    }
-
-    &:not(.small) a {
-        border-bottom: 1px inset #222;
-        border-top: 1px inset rgba(255,255,255,0.1);
-    }
-
-    & .anchor {
-        background: #101010;
-        color:  #7a7a7a;
-    }
+    color:  #FFF;
+    background: #323d4c;
+		
+    & header, footer {
+		.box-shadow(~"inset 0 1px 0 #434b55, inset 0 -1px 0 #384352");
+    	.linear-gradient(top, ~',#2c3440 0%', ~',#1b232c 100%');
+	}
+	
+	& .list li {
+        color: #F0F0F0;
+		background: none;
+        border-bottom: 1px solid #434b55;
+        
+        & a {
+	
+	background: red;
+}
+	}
 }
 
 section.aside {
@@ -156,11 +155,15 @@ section.aside {
 /* @group .list */
 .list, .list li:not(.toolbar) a { color: #2a2a2a; }
 
+
 .list {
     & li {
+        //background: #f8f8f8;
         background: #fff;
 
-        border-bottom: 1px inset #e1e1e1;
+        //border-bottom: 1px inset #e1e1e1;
+        border-bottom: 1px inset #f8f8f8;
+        //text-shadow: 0 1px 0 #fff;
 
 
         &:last-child { border-bottom: none; }
@@ -263,7 +266,7 @@ section.aside {
 /* @end */
 
 /* @group <form> */
-@box-shadow-form: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+@box-shadow-form: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
 @box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 
 form, .form {
@@ -273,22 +276,19 @@ form, .form {
 }
 
 input, textarea, select {
-    border: 1px solid #e1e1e1;
+    border: 1px solid #b2b2b2;
     .border-radius(@border-radius);
     color: #858585;
+
+
     font-family: 'Roboto', Helvetica, Arial, sans-serif;
     .box-shadow(@box-shadow-form);
-
-    &.underline {
-        border:  none;
-        .box-shadow(none);
-        border-bottom: 2px solid #e1e1e1;
-    }
 }
 
 input:focus, textarea:focus, select:focus {
     color:  @color-border-light;
     border-color: @color-border-light;
+    .box-shadow(@box-shadow-form);
 }
 
 .select:after {
@@ -375,16 +375,23 @@ input[type="range"] {
 
 
 /* @end */
-
 .bubble {
     color: #fff;
     .border-radius(7px);
     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-    border: solid 1px rgba(255,255,255,0.8);
+    //border: solid 1px rgba(255,255,255,0.8);
 
     &.count { .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%); }
 }
     header .bubble.count {
         .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
     }
+
+    .list .bubble{
+		.box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4)');
+    	border: solid 1px rgba(255,255,255,0.1);
+        padding: 2px 5px;
+
+    	.border-radius(~'30px !important');
+	}
 /* @end */