Etusivu Tutki Apua
Kirjaudu sisään
pwa
/
Lungo.js
peilaus alkaen https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Tiedostot Ongelmat 0 Wiki
Selaa lähdekoodia

New stylesheet for <aside> element

soyjavi 13 vuotta sitten
vanhempi
e3b8c77d75
commit
f28a49dfab
5 muutettua tiedostoa jossa 196 lisäystä ja 136 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 62 7
      examples/kitchen-sink/test.html
  2. 61 53
      src/stylesheets/Lungo.theme.default.less
  3. 1 1
      src/stylesheets/constants.less
  4. 11 11
      src/stylesheets/css/Lungo.layout.aside.css
  5. 61 64
      src/stylesheets/css/Lungo.theme.default.css

+ 62 - 7
examples/kitchen-sink/test.html
Näytä tiedosto 

@@ -41,8 +41,8 @@
 
 <body class="app">
 
     <section id="layout" data-transition="slide">
 
         <header data-title="Layout">
 
-            <nav class="button">
 
-                <a href="#back" data-router="section" data-label="back"></a>
 
+            <nav>
 
+                <a href="#features" data-router="aside" data-icon="grid"></a>
 
             </nav>
 
             <nav class="right ">
 
                 <a href="#splash" data-router="section" data-icon="user" data-count="3" ></a>
 
@@ -51,8 +51,8 @@
 
 
         <footer>
 
             <nav class="with-labelss">
 
-                <a href="#layout-art1" data-router="article" data-label="Home" data-icon="home" class="current"></a>
 
-                <a href="#layout-art2" data-router="article" data-label="Inbox" data-icon="inbox"  data-count="2"></a>
 
+                <a href="#layout-art1" data-router="article" data-label="Home" data-icon="home" ></a>
 
+                <a href="#layout-art2" data-router="article" data-label="Inbox" data-icon="inbox"  data-count="2" class="current" ></a>
 
                 <a href="#layout-art3" data-router="article" data-label="Profile" data-icon="user"></a>
 
                 <a href="#layout-art4" id="bb"  data-router="article" data-label="Settings" data-icon="settings"></a>
 
             </nav>
 
@@ -76,6 +76,59 @@
 
         <article id="layout-art4"></article>
 
     </section>
 
 
+    <aside id="features" class="left">
 
+    <header data-title="BETA Features"></header>
 
+    <article class="list scroll">
 
+        <ul>
 
+            <!-- Basic Layout -->
 
+
 
+            <li>
 
+                <strong>Suggestions</strong>
 
+            </li>
 
+
 
+            <li class="current">
 
+                <a href="#">
 
+                    <strong>Jobs</strong>
 
+                    <small>lorem</small>
 
+                </a>
 
+            </li>
 
+
 
+            <li class="arrow">
 
+                <strong>Network</strong>
 
+                <small>lorem</small>
 
+            </li>
 
+
 
+
 
+            <li>
 
+                <a href="#">
 
+                    <div class="right bubble blue">128</div>
 
+                    <strong>Favorites</strong>
 
+                    <small>with lorem element</small>
 
+                </a>
 
+            </li>
 
+
 
+            <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
 
+                <strong>Javi Jimenez</strong>
 
+                <small>small</small>
 
+            </li>
 
+            <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon@2x.png">
 
+                <strong>Javi Jimenez</strong>
 
+                <small>small</small>
 
+            </li>
 
+            <li data-icon="user">
 
+                <strong>Javi Jimenez</strong>
 
+                <small>small</small>
 
+            </li>
 
+            <li class="thumb" data-icon="user">
 
+                <strong>Javi Jimenez</strong>
 
+                <small>small</small>
 
+            </li>
 
+
 
+        </ul>
 
+    </article>
 
+</aside>
 
+
 
+
 
     <!-- Lungo dependencies -->
 
     <script src="../../src/lib/quo.debug.js"></script>
 
     <!--
 
@@ -122,19 +175,21 @@
 
     <script>
 
         Lungo.init();
 
 
+        Lungo.ready(function() {
 
+            Lungo.View.Aside.show('features');
 
+        });
 
+
 
         Lungo.Element.count('#bb', 29);
 
         setTimeout(function(){
 
             Lungo.Element.count('#bb', 0);
 
         }, 1000);
 
 
-
 
-
 
         setTimeout(function(){
 
             Lungo.Element.progress('#kaka', 70);
 
         }, 300);
 
 
         setTimeout(function(){
 
-            Lungo.Element.loading('#cargador', "white");
 
+            Lungo.Element.loading('#cargador', "black");
 
         }, 300);

+ 61 - 53
src/stylesheets/Lungo.theme.default.less
Näytä tiedosto 

@@ -10,15 +10,18 @@
 
 @import "constants.less";
 
 // @import "lungo.theme.default.font.less";
 
 
+@theme: #0093D5;
 
+    @theme-light:  #39ABE1;
 
+
 
 @theme: #2A95D3;
 
-@theme-light:  #39ABE1;
 
-@theme-dark: #1984C2;
 
+    @theme-light:  #25AEEB;
 
+
 
+@theme-dark: #222;
 
+    @theme-dark-current: #111;
 
+    @theme-dark-nav: #888;
 
+    @theme-dark-nav-active: #fff;
 
 
-@second: #222;
 
-    @second-dark: #111;
 
-    @second-current: #111;
 
-    @second-nav: #888;
 
-    @second-nav-active: #fff;
 
+@aside: #191919;
 
 
 @color: #484a49;
 
 
@@ -30,14 +33,14 @@
 
 }
 
 
 .theme, li.theme, a.theme {
 
-    background: @theme;
 
-    &:active { background: @theme-dark;}
 
+    background: @theme-light;
 
+    &:active { background: @theme;}
 
 }
 
 
 /* @group <header> & <footer> & <article> */
 
 section > header {
 
-    background-color: @theme-dark;
 
-    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)");
 
+    background-color: @theme;
 
+    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)");
 
 
     & .title {
 
         color: #fff;
 
@@ -51,13 +54,13 @@ section > header {
 
 }
 
 
 section > footer {
 
-    background-color: @second;
 
+    background-color: @theme-dark;
 
     .box-shadow(inset 0 3px 0 #333);
 
     & > nav a {
 
         .box-shadow(1px 0 0 #151515);
 
         &.current {
 
-            color:  @second-nav-active;
 
-            background: @second-current;
 
+            color:  @theme-dark-nav-active;
 
+            background: @theme-dark-current;
 
             .box-shadow(~"-1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3");
 
         }
 
     }
 
@@ -65,6 +68,43 @@ section > footer {
 
 }
 
 
 section > article { background: #f4f5f5; }
 
+
 
+aside {
 
+    color: #fff;
 
+    background: @aside;
 
+
 
+    & header, footer {
 
+        background: @theme-dark-current;
 
+        text-shadow: none;
 
+    }
 
+    & header {
 
+        .box-shadow(inset 0 -1px 0 rgba(0,0,0,0.2));
 
+    }
 
+    & article { background: none; }
 
+
 
+    & nav {
 
+        & .icon {color:white;}
 
+    }
 
+
 
+    & .list li {
 
+        background: none;
 
+        border-bottom-color: @theme-dark;
 
+
 
+        &.current {
 
+            background: @theme;
 
+            border-bottom-color: @theme;
 
+
 
+            & strong, & small, & .icon { color: #fff; }
 
+        }
 
+        & strong, & small, & .icon { color: @theme-dark-nav; }
 
+    }
 
+}
 
+
 
+section.aside {
 
+    .box-shadow(~"-1px 0 0 rgba(0,0,0,0.2)");
 
+    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
 
+}
 
+
 
 /* @end */
 
 
 /* @group <nav> */
 
@@ -86,37 +126,19 @@ header nav {
 
 }
 
 
 section > nav.groupbar {
 
-    background-color: @second;
 
+    background-color: @theme-dark;
 
     & > a.current { .box-shadow(inset 0 -3px 0 @theme); }
 
 }
 
 
 footer > nav > a, nav.groupbar > a{
 
-    color: @second-nav;
 
-    &.current { color:  @second-nav-active; }
 
+    color: @theme-dark-nav;
 
+    &.current { color:  @theme-dark-nav-active; }
 
 }
 
 
 /* @end */
 
 
 /* @group <aside> */
 
-aside {
 
-    color: #fff;
 
-    background: @second;
 
-
 
-    & header, footer {
 
-        .box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1)");
 
-        background: @second-dark; }
 
-
 
-    & article { background: none; }
 
-
 
-    & nav {
 
-        & .icon {color:white;}
 
-    }
 
-}
 
 
-section.aside {
 
-    .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
 
-    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
 
-}
 
 
 /* @group .list */
 
 @list-border: #ddd;
 
@@ -127,18 +149,16 @@ section.aside {
 
         background: #fff;
 
         border-bottom: 1px inset @list-border;
 
 
-        &:last-child { border-bottom: none; }
 
-
 
         &, & a { color: @list-color; }
 
 
         &.contrast {
 
-            background: @second;
 
+            background: @theme-dark;
 
             color: #fff;
 
         }
 
 
         &.highlight { background: @list-border; }
 
         &.anchor {
 
-            background: @second;
 
+            background: @theme-dark;
 
             border-bottom: none;
 
             &, & a { color: #fff !important; }
 
         }
 
@@ -155,25 +175,13 @@ section.aside {
 
     }
 
 }
 
 
-aside .list {
 
-    & li {
 
-            background: none;
 
-            border-top: 1px solid rgba(255,255,255,0.05);
 
-            border-bottom: 1px solid ;
 
 
-            &.current {
 
-                border-top-color: @theme;
 
-                .linear-gradient(top, ~','@theme-light 25%, ~','@theme-dark 100%);}
 
-            & strong, & small, & .icon { color: #fff; }
 
-            & strong { text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
 
-        }
 
-    }
 
 
 /* @end */
 
 
 /* @group widgets */
 
 .splash {
 
-    background: @second;
 
+    background: @theme-dark;
 
     color: #fff;
 
     text-shadow: 0 1px 0px rgba(0,0,0,0.2);
 
 }
 
@@ -306,7 +314,7 @@ input[type=range] {
 
     &.count { background: @theme; }
 
 }
 
     header .count {
 
-        background: @second !important;
 
+        background: @theme-dark !important;
 
     }
 
 
     footer .bubble {

+ 1 - 1
src/stylesheets/constants.less
Näytä tiedosto 

@@ -9,7 +9,7 @@
 
 
 @border-radius: 2px;
 
 
-@aside-width: 256px;
 
+@aside-width: 264px;
 
     @aside-width-small: 64px;
 
 
 @defaultTrasition : @easeOutSine;

+ 11 - 11
src/stylesheets/css/Lungo.layout.aside.css
Näytä tiedosto 

@@ -9,11 +9,11 @@
 
 /* DIMENSIONS */
 
 /* COLORS */
 
 section.aside:not(.small) {
 
-  -webkit-transform: translate(256px, 0);
 
-  -moz-transform: translate(256px, 0);
 
-  -ms-transform: translate(256px, 0);
 
-  -o-transform: translate(256px, 0);
 
-  transform: translate(256px, 0);
 
+  -webkit-transform: translate(264px, 0);
 
+  -moz-transform: translate(264px, 0);
 
+  -ms-transform: translate(264px, 0);
 
+  -o-transform: translate(264px, 0);
 
+  transform: translate(264px, 0);
 
 }
 
 section.aside.small {
 
   -webkit-transform: translate(64px, 0);
 
@@ -23,11 +23,11 @@ section.aside.small {
 
   transform: translate(64px, 0);
 
 }
 
 section.aside.right {
 
-  -webkit-transform: translate(-256px, 0);
 
-  -moz-transform: translate(-256px, 0);
 
-  -ms-transform: translate(-256px, 0);
 
-  -o-transform: translate(-256px, 0);
 
-  transform: translate(-256px, 0);
 
+  -webkit-transform: translate(-264px, 0);
 
+  -moz-transform: translate(-264px, 0);
 
+  -ms-transform: translate(-264px, 0);
 
+  -o-transform: translate(-264px, 0);
 
+  transform: translate(-264px, 0);
 
 }
 
 section.aside.right.small {
 
   -webkit-transform: translate(-64px, 0);
 
@@ -43,7 +43,7 @@ aside {
 
   bottom: 0;
 
   display: none;
 
   z-index: -1;
 
-  width: 256px;
 
+  width: 264px;
 
 }
 
 aside.right {
 
   right: 0px;

+ 61 - 64
src/stylesheets/css/Lungo.theme.default.css
Näytä tiedosto 

@@ -15,19 +15,19 @@
 
 .theme,
 
 li.theme,
 
 a.theme {
 
-  background: #2a95d3;
 
+  background: #25aeeb;
 
 }
 
 .theme:active,
 
 li.theme:active,
 
 a.theme:active {
 
-  background: #1984c2;
 
+  background: #2a95d3;
 
 }
 
 /* @group <header> & <footer> & <article> */
 
 section > header {
 
-  background-color: #1984c2;
 
-  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
 
-  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
 
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
 
+  background-color: #2a95d3;
 
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
 
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
 
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
 
 }
 
 section > header .title {
 
   color: #fff;
 
@@ -58,6 +58,54 @@ section > footer  > nav a.current {
 
 section > article {
 
   background: #f4f5f5;
 
 }
 
+aside {
 
+  color: #fff;
 
+  background: #191919;
 
+}
 
+aside header,
 
+aside footer {
 
+  background: #111111;
 
+  text-shadow: none;
 
+}
 
+aside header {
 
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
 
+  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
 
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
 
+}
 
+aside article {
 
+  background: none;
 
+}
 
+aside nav .icon {
 
+  color: white;
 
+}
 
+aside .list li {
 
+  background: none;
 
+  border-bottom-color: #222222;
 
+}
 
+aside .list li.current {
 
+  background: #2a95d3;
 
+  border-bottom-color: #2a95d3;
 
+}
 
+aside .list li.current strong,
 
+aside .list li.current small,
 
+aside .list li.current .icon {
 
+  color: #fff;
 
+}
 
+aside .list li strong,
 
+aside .list li small,
 
+aside .list li .icon {
 
+  color: #888888;
 
+}
 
+section.aside {
 
+  -webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
 
+  -moz-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
 
+  box-shadow: -1px 0 0 rgba(0,0,0,0.2);
 
+}
 
+section.aside.right {
 
+  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
 
+  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
 
+  box-shadow: 4px 0 8px rgba(0,0,0,0.5);
 
+}
 
 /* @end */
 
 /* @group <nav> */
 
 header nav a {
 
@@ -106,41 +154,11 @@ nav.groupbar > a.current {
 
 }
 
 /* @end */
 
 /* @group <aside> */
 
-aside {
 
-  color: #fff;
 
-  background: #222222;
 
-}
 
-aside header,
 
-aside footer {
 
-  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
-  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
-  box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1);
 
-  background: #111111;
 
-}
 
-aside article {
 
-  background: none;
 
-}
 
-aside nav .icon {
 
-  color: white;
 
-}
 
-section.aside {
 
-  -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
 
-  -moz-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
 
-  box-shadow: -4px 0 8px rgba(0,0,0,0.5);
 
-}
 
-section.aside.right {
 
-  -webkit-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
 
-  -moz-box-shadow: 4px 0 8px rgba(0,0,0,0.5);
 
-  box-shadow: 4px 0 8px rgba(0,0,0,0.5);
 
-}
 
 /* @group .list */
 
 .list li {
 
   background: #fff;
 
   border-bottom: 1px inset #dddddd;
 
 }
 
-.list li:last-child {
 
-  border-bottom: none;
 
-}
 
 .list li,
 
 .list li a {
 
   color: #2a2a2a;
 
@@ -161,7 +179,7 @@ section.aside.right {
 
   color: #fff !important;
 
 }
 
 .list li.selectable:active {
 
-  background: #39abe1;
 
+  background: #25aeeb;
 
 }
 
 .list li.selectable:active,
 
 .list li.selectable:active a {
 
@@ -172,27 +190,6 @@ section.aside.right {
 
 .list li .right:not(.bubble) {
 
   opacity: 0.8;
 
 }
 
-aside .list li {
 
-  background: none;
 
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
 
-  border-bottom: 1px solid ;
 
-}
 
-aside .list li.current {
 
-  border-top-color: #2a95d3;
 
-  background-image: -webkit-linear-gradient(top , #39abe1 25% , #1984c2 100%);
 
-  background-image: -moz-linear-gradient(top , #39abe1 25% , #1984c2 100%);
 
-  background-image: -ms-linear-gradient(top , #39abe1 25% , #1984c2 100%);
 
-  background-image: -o-linear-gradient(top , #39abe1 25% , #1984c2 100%);
 
-  background-image: linear-gradient(top , #39abe1 25% , #1984c2 100%);
 
-}
 
-aside .list li strong,
 
-aside .list li small,
 
-aside .list li .icon {
 
-  color: #fff;
 
-}
 
-aside .list li strong {
 
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
 
-}
 
 /* @end */
 
 /* @group widgets */
 
 .splash {
 
@@ -266,9 +263,9 @@ textarea:focus,
 
 select:focus {
 
   color: #484a49;
 
   border-color: #2a95d3;
 
-  -webkit-box-shadow: 0 0 1px #39abe1;
 
-  -moz-box-shadow: 0 0 1px #39abe1;
 
-  box-shadow: 0 0 1px #39abe1;
 
+  -webkit-box-shadow: 0 0 1px #25aeeb;
 
+  -moz-box-shadow: 0 0 1px #25aeeb;
 
+  box-shadow: 0 0 1px #25aeeb;
 
 }
 
 input:not([type=range])[disabled],
 
 textarea[disabled],
 
@@ -298,14 +295,14 @@ input[type=range]:not(.checkbox) {
 
   background-color: #c7c7c7;
 
 }
 
 input[type=range]:not(.checkbox):active {
 
-  background-color: #39abe1;
 
+  background-color: #25aeeb;
 
 }
 
 input[type=range].checkbox {
 
   background-color: #aaaaaa;
 
   color: rgba(255, 255, 255, 0.6);
 
 }
 
 input[type=range].checkbox.active {
 
-  background-color: #39abe1;
 
+  background-color: #25aeeb;
 
 }
 
 input[type=range]::-webkit-slider-thumb {
 
   border-radius: 1px;
 
@@ -336,7 +333,7 @@ input[type=range]::-webkit-slider-thumb::after {
 
   background-clip: padding-box;
 
 }
 
 .progress .bar .value {
 
-  background-color: #39abe1;
 
+  background-color: #25aeeb;
 
   -webkit-border-radius: 1px;
 
   -moz-border-radius: 1px;
 
   border-radius: 1px;