Головна сторінка Огляд Довідка
Увійти
pwa
/
Lungo2.0.js
дзеркало https://github.com/xabstract/Lungo2.0.js.git
2
0
Відгалуження 0
Файли Проблеми 0 Wiki
Переглянути джерело

Apply final theme for Lungo2

soyjavi 13 роки тому
батько
53984c90bf
коміт
e826459372
18 змінених файлів з 557 додано та 548 видалено
Розділений вигляд Показати статистику Diff
  1. 14 1
      examples/test/app/resources/sections/form.html
  2. 40 9
      examples/test/kitchensink.html
  3. 2 2
      src/stylesheets/Lungo.layout.article.less
  4. 1 1
      src/stylesheets/Lungo.layout.aside.less
  5. 6 21
      src/stylesheets/Lungo.layout.less
  6. 24 20
      src/stylesheets/Lungo.layout.nav.less
  7. 124 124
      src/stylesheets/Lungo.theme.default.less
  8. 14 14
      src/stylesheets/Lungo.widgets.colour.less
  9. 1 5
      src/stylesheets/Lungo.widgets.form.less
  10. 3 5
      src/stylesheets/constants.less
  11. 4 4
      src/stylesheets/css/Lungo.layout.article.css
  12. 1 1
      src/stylesheets/css/Lungo.layout.aside.css
  13. 3 14
      src/stylesheets/css/Lungo.layout.css
  14. 23 14
      src/stylesheets/css/Lungo.layout.nav.css
  15. 259 259
      src/stylesheets/css/Lungo.theme.default.css
  16. 14 28
      src/stylesheets/css/Lungo.widgets.colour.css
  17. 12 26
      src/stylesheets/css/Lungo.widgets.form.css
  18. 12 0
      src/stylesheets/lungo.theme.default.font.less

+ 14 - 1
examples/test/app/resources/sections/form.html
Переглянути файл 

@@ -1,7 +1,15 @@
 
 <section id="form" data-transition="slide">
 
     <header data-title="Form Elements" data-back="home"></header>
 
 
-    <article class="list scroll">
 
+
 
+    <footer>
 
+        <nav class="with-labels">
 
+            <a href="#form-normal" data-target="article" class="current" data-icon="user" data-label="Normal" data-count="5"></a>
 
+            <a href="#form-extra" data-target="article" data-icon="users" data-label="Extra" data-count="2"></a>
 
+
 
+        </nav>
 
+    </footer>
 
+    <article id="form-normal" class="list  indented">
 
         <ul>
 
             <li>
 
                 <label>Example of text</label>
 
@@ -31,7 +39,12 @@
 
                 <label>Do you like Lungo forms?</label>
 
                 <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
 
             </li>
 
+        </ul>
 
 
+    </article>
 
+
 
+    <article id="form-extra" class="list  indented">
 
+        <ul>
 
             <li class="padding">
 
                 <label>Example of progress</label>
 
                 <div id="progress-normal" data-progress="25%"></div>

+ 40 - 9
examples/test/kitchensink.html
Переглянути файл 

@@ -53,18 +53,30 @@
 
 </head>
 
 
 <body class="app">
 
+<!--         <section id="login">
 
+        <article class="indented splash current">
 
+            <h1>New user</h1>
 
+            <form class="roundeds">
 
+                <input type="text" placeholder="Your email" id="txt-signup-mail" value="">
 
+                <input type="text" placeholder="Your username" id="txt-signup-name" value="">
 
+                <input type="password" placeholder="Your password" id="txt-signup-password" value="">
 
+                <a href="#" class="button blue big" id="btn-signup-call" data-icon="checkmark">Signup</a>
 
+                <a href="#back" data-target="section" class="button red big" data-icon="close">Return to login</a>
 
+                <a href="#back" data-target="section" class="button green " data-icon="user">Return to login</a>
 
+            </form>
 
+        </article>
 
+    </section> -->
 
 
     <section id="main" data-transition="slide">
 
-        <header>
 
-            <nav class="left">
 
+        <header  class="extended">
 
+            <nav class="left button">
 
                 <a href="#features" data-target="aside" data-icon="menu"></a>
 
             </nav>
 
-            <nav class="right">
 
-                <a href="#" data-icon="user" data-count="3"></a>
 
+            <nav class="right button">
 
+                <a href="#" data-icon="share" data-label="Share"></a>
 
             </nav>
 
             <div class="left">
 
-                <span class="title with-subtitle">LUNGO FRAMEWORK</span>
 
-                <span class="subtitle">version 2.0</span>
 
+                <span class="title">LUNGO FRAMEWORK</span>
 
             </div>
 
         </header>
 
 
@@ -77,10 +89,17 @@
 
             </nav>
 
         </footer>
 
 
+        <nav class="groupbar">
 
+            <a href="#art-1" data-target="article" class="current" data-label="Inicio"></a>
 
+                <a href="#art-2" data-target="article" data-label="user"></a>
 
+                <a href="#art-3" data-target="article" data-label="user"></a>
 
+                <a href="#art-4" data-target="article" data-label="Cuenta"></a>
 
+
 
+            </nav>
 
+
 
 
     <article id="list-normal" class="list scroll indented">
 
         <ul>
 
-            <li class="anchor">With right elements</li>
 
 
             <li>
 
                 <strong>&lt;li&gt; + &lt;strong&gt; </strong>
 
@@ -105,6 +124,10 @@
 
                 <strong>&lt;li class="highlight"&gt; + &lt;strong&gt; </strong>
 
             </li>
 
 
+        </ul>
 
+
 
+        <ul>
 
+
 
 
             <li class="anchor">.arrow class</li>
 
 
@@ -134,9 +157,17 @@
 
                 </a>
 
             </li>
 
 
+            <li class="selectable">
 
+                <a href="#">
 
+                    <div class="right">.right</div>
 
+                    <strong>&lt;strong&gt; element</strong>
 
+                    <small>with &lt;small&gt; element</small>
 
+                </a>
 
+            </li>
 
+
 
             <li>
 
                 <a href="#">
 
-                    <div class="right bubble blue">.right.bubble</div>
 
+                    <div class="right bubble theme">.right.bubble</div>
 
                     <strong>&lt;strong&gt; element</strong>
 
                     <small>with &lt;small&gt; element</small>
 
                 </a>
 
@@ -144,7 +175,7 @@
 
 
             <li>
 
                 <a href="#">
 
-                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
 
+                    <div class="right bubble theme" data-icon="clock">.right data-icon</div>
 
                     <strong>&lt;strong&gt; element</strong>
 
                     <small>with &lt;small&gt; element</small>
 
                 </a>

+ 2 - 2
src/stylesheets/Lungo.layout.article.less
Переглянути файл 

@@ -38,9 +38,9 @@ article {
 
     }
 
 }
 
 
-header:not(.extended) ~ article { top: @header-height; }
 
+header:not(.extended) ~ article { top: @header-footer-height; }
 
     header.extended ~ article { top: @article_with_header_extended; }
 
-footer:not(.with-labels) ~ article { bottom: @article-bottom; }
 
+footer ~ article { bottom: @header-footer-height; }
 
 
 @media handheld, only screen and (min-width: 768px) {
 
     article.aside { .transform(translate3d(0px, 0, 0)); }

+ 1 - 1
src/stylesheets/Lungo.layout.aside.less
Переглянути файл 

@@ -43,7 +43,7 @@ aside {
 
     & header, & footer {
 
         position: relative;
 
         left: none;
 
-        height: @header-height;
 
+        height: @header-footer-height;
 
     }
 
 
     & footer {

+ 6 - 21
src/stylesheets/Lungo.layout.less
Переглянути файл 

@@ -76,43 +76,28 @@ header, footer  {
 
 
 header {
 
     top: 0;
 
-    height: @header-height;
 
-    line-height: @header-height;
 
+    height: @header-footer-height;
 
+    line-height: @header-footer-height;
 
 
     & .title {
 
         margin-left: 4px;
 
         float: left;
 
         z-index: -1;
 
-        font-size: 15px;
 
+        font-size: 1.2em;
 
         font-weight: bold;
 
 
-        & img {
 
-            height: 24px;
 
-        }
 
+        & img { height: 24px; }
 
 
         &.centered {
 
             position: absolute;
 
             left: 0px;
 
             right: 0px;
 
             text-align: center;
 
-            display: inline-block;
 
-        }
 
-        &.with-subtitle {
 
-            line-height: 20px;
 
-            padding-top: 4px;
 
-        }
 
-    }
 
-
 
-    & .subtitle {
 
-        margin-left: 4px;
 
-        display:block;
 
-        font-size: 11px;
 
-        line-height: 11px;
 
-        width: 100%;
 
+            display: inline-block; }
 
     }
 
 }
 
 
 footer {
 
     bottom: 0;
 
-    height: @footer-height;
 
+    height: @header-footer-height;
 
 }

+ 24 - 20
src/stylesheets/Lungo.layout.nav.less
Переглянути файл 

@@ -19,30 +19,29 @@ nav {
 
         min-width: 28px;
 
         z-index: 1000;
 
         float: left;
 
-        height:  @header_nav_height;
 
+        height: @header-footer-height;
 
 
-        & .icon {
 
-            font-size: 1.7em; }
 
+        & .icon { font-size: 1.7em; }
 
 
         & img {
 
             width: 16px;
 
             height: 16px;
 
             top: -1px !important; }
 
 
-        & abbr {
 
-            font-weight: bold; }
 
-    }
 
+        & abbr { font-weight: bold; }
 
+
 
+        & .bubble {
 
+            position: relative;
 
+            top:  -12px;
 
+            left: -12px;
 
+            margin-right: -20px;
 
+        }
 
 
-    & .bubble {
 
-        position: relative;
 
-        top:  -12px;
 
-        left: -12px;
 
-        margin-right: -20px;
 
     }
 
 
     &.groupbar {
 
         position: absolute;
 
-        top: @header-height;
 
+        top: @header-footer-height;
 
         height: @header_groupbar_height;
 
         display: block;
 
         width: 100%;
 
@@ -67,6 +66,15 @@ nav {
 
 }
 
 
 header nav {
 
+    &.button a {
 
+        margin: 5px 5px 5px 0;
 
+        height: 32px;
 
+        line-height: 32px;
 
+        & .icon {  line-height: 33px; }
 
+
 
+        &:first-child { margin: 5px; }
 
+    }
 
+
 
     & .icon ~ abbr {
 
         margin-left: 4px;
 
         float: right; }
 
@@ -74,24 +82,20 @@ header nav {
 
     & .loading {
 
         margin-top: .5em;
 
         font-size: 1.6em;
 
-
 
         & + .icon { display: none; }
 
     }
 
 }
 
 
-footer nav {
 
+footer nav a {
 
     display: block;
 
-
 
-    & a {
 
-        padding: 0;
 
-        height:  44px;
 
-    }
 
+    padding: 0;
 
+    height:  @header-footer-height;
 
 
     & .icon {
 
         display: block;
 
         top:  0px;
 
         font-size: 2.0em !important;
 
-        line-height: 44px; }
 
+        line-height: @header-footer-height; }
 
 
     & .bubble {
 
         top:  -42px;

+ 124 - 124
src/stylesheets/Lungo.theme.default.less
Переглянути файл 

@@ -9,198 +9,198 @@
 
 
 @import "constants.less";
 
 @import "mixins.less";
 
-
 
-@theme: #05bde9;
 
-@theme-light:  #42c8fc;
 
-@theme-dark: #07acd0;
 
+@import "lungo.theme.default.font.less";
 
+
 
+@theme: #2A95D3;
 
+@theme-light:  #39ABE1;
 
+@theme-dark: #1984C2;
 
+@theme: #2C8BCA;
 
+@theme-light:  #2C8BCA;
 
+@theme-dark: #154F93;
 
+@footer: #292F34;
 
+    @footer-dark: #23282C;
 
 @color: #484a49;
 
 
 @section-radius: 4px;
 
-@header: #efeeed;
 
-    @header-bottom: #e0dedf;
 
-@footer: #353b42;
 
-    @footer-bottom: #272a2d;
 
-
 
-@color-secondary: #353b42;
 
-    @color-secondary-dark: #272a2d;
 
-
 
 
 .app {
 
     background: @black;
 
-    font-family: Helvetica, Arial, sans-serif;
 
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
 
+}
 
+
 
+.theme, li.theme, a.theme {
 
+    background: @theme;
 
+    &:active { background: @theme-dark;}
 
 }
 
 
 /* @group <header> & <footer> & <article> */
 
 section > header {
 
-    .linear-gradient(top, ~','@header 0%, ~','@header-bottom 100%);
 
-    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.3)");
 
+    .linear-gradient(top, ~','@theme, ~','@theme-dark);
 
+    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5)");
 
     .border-radius(@section-radius @section-radius 0px 0px);
 
-    & .title { color: @color; }
 
-    & .subtitle {
 
-        color: rgba(255,255,255,0.6);
 
-        text-shadow: 0px -1px 0px rgba(0,0,0,0.3); }
 
-}
 
 
+    & .title {
 
+        color: @white;
 
+        text-shadow: 0 1px 0 rgba(0,0,0,0.2);
 
+    }
 
+}
 
 section > footer {
 
-    .linear-gradient(top, ~','@footer 0%, ~','@footer-bottom 60%);
 
-    color: #353b42;
 
-    .border-radius(0px 0px @section-radius @section-radius); }
 
+    .linear-gradient(top, ~','@footer 0%, ~','@footer-dark 60%);
 
+    .border-radius(0px 0px @section-radius @section-radius);
 
+    .box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.05)");
 
+}
 
 
-article { background: #f4f5f5; }
 
+section > nav.groupbar {
 
+    .linear-gradient(top, ~','@footer-dark 0%, ~','@footer 60%);
 
+}
 
+
 
+section > article { background: #f4f5f5; }
 
 /* @end */
 
 
 /* @group <nav> */
 
 header nav {
 
-    & a { color: @color; }
 
+    & a {
 
+        color: @white;
 
+        // &:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
 
+    }
 
 
-    &:not(.plain) {
 
-        & a {
 
-            .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); }
 
+    &.box {
 
+        .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); }
 
 
-            &:active {
 
-                color: @white;
 
-                &.accept { background: rgba(0, 255, 0, 0.2); }
 
-                &.cancel { background: rgba(255, 0, 0, 0.2); }
 
-                &:not(.accept):not(.cancel) { background: rgba(0,0,0,0.1); }
 
-            }
 
+        &:active {
 
+            color: @white;
 
+            &.accept { background: rgba(0, 255, 0, 0.2); }
 
+            &.cancel { background: rgba(255, 0, 0, 0.2); }
 
+            &:not(.accept):not(.cancel) { background: rgba(0,0,0,0.1); }
 
         }
 
 
-        &.right a {
 
+        &.right a:not(.ios) {
 
             .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)");
 
         }
 
     }
 
 
-    &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
 
-}
 
-
 
-footer nav {
 
-    & a {
 
-        color: rgba(0,0,0,0.6);
 
-        .text-shadow(0 1px 0 rgba(255,255,255,0.1));
 
-
 
-        &.current, &.active {
 
-            color: @white;
 
-            text-shadow: 0 0 1px @white;
 
-            background: @black;
 
-            .box-shadow(~"-1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)"); }
 
+    &.button a {
 
+        border-radius: @section-radius;
 
+        .linear-gradient(top, ~','rgba(0,0,0,0.0), ~','rgba(0,0,0,0.1));
 
+        box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(0, 0, 0, .5);
 
+        &:active { background: rgba(0,0,0,0.2); }
 
     }
 
-}
 
 
-.toolbar a {
 
-    color: #cdd9e3;
 
-    .border-radius(4px);
 
+}
 
 
-    &.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)");
 
-    }
 
+footer nav a.current {
 
+    background: @black;
 
+    .box-shadow(~"-1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)");
 
 }
 
 
-.groupbar {
 
-    background: @color-secondary;
 
-    & a {
 
-        color: #e3e4e3;
 
-        &.current {
 
-            color:  @white;
 
-            .box-shadow(inset 0 -3px 0 @theme); }
 
-    }
 
+footer nav a, nav.groupbar a{
 
+    color: rgba(0,0,0,0.7);
 
+    .text-shadow(0 1px 0 rgba(255,255,255,0.1));
 
+    &.current {
 
+        color:  @white;
 
+        text-shadow: 0 0 1px @white;}
 
 }
 
+
 
+nav.groupbar a.current { .box-shadow(inset 0 -3px 0 @theme); }
 
+
 
 /* @end */
 
 
 /* @group <aside> */
 
 aside {
 
-    color:  #fff;
 
-    background: #333;
 
+    color: @white;
 
+    background: @footer;
 
 
     & 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: #272727; }
 
+        background: @footer-dark; }
 
 
     & article { background: none; }
 
-
 
-    & .list {
 
-        & ul { background: none; }
 
-
 
-        & li {
 
-            color: #F0F0F0;
 
-            border-top: 1px solid rgba(255,255,255,0.05);
 
-            border-bottom: 1px solid #2f2f2f;
 
-            &.current { background: @theme; }
 
-            & strong {
 
-                text-shadow: 0 1px 1px rgba(0,0,0,0.75);
 
-                color: @white; }
 
-            & small { color:  rgba(255,255,255,0.5); }
 
-        }
 
-    }
 
-
 
-    & a.current { background: @theme; }
 
 }
 
 
 section.aside {
 
-    .box-shadow(~"-4px 0 8px rgba(0,0,0,0.4)");
 
-    &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.4)"); }
 
+    .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
 
+    &.right { .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)");
 
         &.right { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
 
     }
 
 }
 
+*/
 
 /* @end */
 
 
 /* @group .list */
 
-.list, .list li a { color: #2a2a2a; }
 
+@list-border: #ddd;
 
+@list-color: #2a2a2a;
 
 
-section .list {
 
-    & ul, li { background: #fff; }
 
+.list {
 
     & li {
 
-        border-bottom: 1px inset #eee;
 
-    }
 
-}
 
+        background: @white;
 
+        border-bottom: 1px inset @list-border;
 
 
-.list li {
 
-    &:last-child { border-bottom: none; }
 
+        &:last-child { border-bottom: none; }
 
 
-    &.selectable:active {
 
-        background: @theme-light;
 
+        &, & a { color: @list-color; }
 
 
-        & small, & .right:not(.bubble), & strong {
 
-            color: @white;
 
-            text-shadow: none; }
 
-    }
 
-
 
-    &.highlight { background: #eee; }
 
+        &.highlight { background: @list-border; }
 
+        &.anchor {
 
+            background: @footer;
 
+            border-bottom: none;
 
+            &, & a { color: @white !important; }
 
+        }
 
+        &.selectable:active {
 
+            background: @theme-light;
 
 
-    &.anchor {
 
-        color: @white;
 
-        background: @color;
 
-        border-bottom: none; }
 
+            &, & a {
 
+                color: @white;
 
+                text-shadow: none;
 
+            }
 
+        }
 
 
-    & small, & .right:not(.bubble) { opacity: 0.75; }
 
-    & strong { color: #333; }
 
+        & small, & .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 ;
 
+            &.current {
 
+                border-top-color: @theme;
 
+                .linear-gradient(top, ~','@theme-light 25%, ~','@theme-dark 100%);
 
+                background-color: @red;
 
+            }
 
+            & strong {
 
+                text-shadow: 0 1px 1px rgba(0,0,0,0.75);
 
+                color: @white; }
 
+            & small { color:  rgba(255,255,255,0.5); }
 
+        }
 
+    }
 
+
 
 /* @end */
 
 
 /* @group widgets */
 
 .splash {
 
-    background: @theme-dark;
 
+    background: @footer;
 
     color: #fff;
 
-    text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
 
+    text-shadow: 0 1px 0px rgba(0,0,0,0.2);
 
 }
 
 
 &.indented {
 
     & ul {
 
-        .border-radius(2px);
 
-        box-shadow: 0 0 2px rgba(0,0,0,0.2);
 
+        border: 1px solid @list-border;
 
+        box-shadow: 0 0 4px rgba(0,0,0,0.1);
 
     }
 
 
     & li {
 
-        &:first-child { .border-radius(2px 2px 0px 0px); }
 
+        &:first-child { .border-radius(2px 2px 0 0); }
 
         &:last-child {
 
-            .border-radius(0px 0px 2px 2px);
 
+            .border-radius(0 0 2px 2px);
 
             .box-shadow(0 1px 1px rgba(0,0,0,0.05));
 
         }
 
     }
 
@@ -208,18 +208,13 @@ section .list {
 
 
 
 /* @group .button */
 
-.button {
 
+a.button {
 
     .border-radius(2px);
 
     .box-shadow(~"inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255, 0.2)");
 
     font-weight: bold;
 
     text-shadow: 0 -1px 0 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)"); }
 
-
 
-    &.theme {
 
-        background: @theme;
 
-        &:active, &.active { background: @theme-dark;}
 
-    }
 
 }
 
 
 /* @end */
 
@@ -329,8 +324,13 @@ input[type="range"] {
 
 .bubble {
 
     color: @white;
 
     .border-radius(2px);
 
-    &.count { .linear-gradient(top, ~','@theme-light 0%, ~','@theme-dark 100%); }
 
+
 
+    &.count { .linear-gradient(top, ~','@theme-light 0%, ~','@theme-dark 100%);  }
 
 }
 
+    footer .bubble {
 
+        .box-shadow(~'inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)');  }
 
+
 
+
 
     article .list .bubble {
 
         .box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
 
     }

+ 14 - 14
src/stylesheets/Lungo.widgets.colour.less
Переглянути файл 

@@ -11,33 +11,33 @@
 
 @import "mixins.less";
 
 
 a.grey, .grey{background-color: @grey;}
 
-a.grey:active, a.grey.active{background-color: @grey-active;}
 
+a.grey:active { background-color: @grey-active;}
 
 a.dark-grey, .dark-grey{background-color: @black;}
 
-a.dark-grey:active, a.dark-grey.active{background-color: @black-active;}
 
+a.dark-grey:active{background-color: @black-active;}
 
 a.red, .red{background-color: @red;}
 
-a.red:active, a.red.active{background-color: @red-active;}
 
+a.red:active {background-color: @red-active;}
 
 a.lightgreen, .lightgreen{background-color: @lightgreen;}
 
-a.lightgreen:active, a.lightgreen.active{background-color: @lightgreen-active;}
 
+a.lightgreen:active{background-color: @lightgreen-active;}
 
 a.green, .green{background-color: @green;}
 
-a.green:active, a.green.active{background-color: @green-active;}
 
+a.green:active{background-color: @green-active;}
 
 a.blue, .blue{background-color: @blue;}
 
-a.blue:active, a.blue.active{background-color: @blue-active;}
 
+a.blue:active {background-color: @blue-active;}
 
 a.arcticblue, .arcticblue{background-color: @arcticblue;}
 
-a.arcticblue:active, a.arcticblue.active{background-color: @arcticblue-active;}
 
+a.arcticblue:active {background-color: @arcticblue-active;}
 
 a.orange, .orange{background-color: @orange;}
 
-a.orange:active, a.orange.active{background-color: @orange-active;}
 
+a.orange:active {background-color: @orange-active;}
 
 a.purple, .purple{background-color: @purple;}
 
-a.purple:active, a.purple.active{background-color: @purple-active;}
 
+a.purple:active {background-color: @purple-active;}
 
 a.magenta, .magenta{background-color: @magenta;}
 
-a.magenta:active, a.magenta.active{background-color: @magenta-active;}
 
+a.magenta:active {background-color: @magenta-active;}
 
 a.pink, .pink{background-color: @pink;}
 
-a.pink:active, a.pink.active{background-color: @pink-active;}
 
+a.pink:active {background-color: @pink-active;}
 
 a.yellow, .yellow{background-color: @yellow;}
 
-a.yellow:active, a.yellow.active{background-color: @yellow-active;}
 
+a.yellow:active {background-color: @yellow-active;}
 
 a.twitter, .twitter:not(span){background-color: @twitter;}
 
-a.twitter:active, a.twitter.active{background-color: @twitter-active;}
 
+a.twitter:active {background-color: @twitter-active;}
 
 a.facebook, .facebook:not(span){background-color: @facebook;}
 
-a.facebook:active, a.facebook.active{background-color: @facebook-active;}
 
+a.facebook:active {background-color: @facebook-active;}
 
 
 li.grey{ box-shadow: inset 4px 0px 0px @grey;}
 
 li.dark-grey{ box-shadow: inset 4px 0px 0px @black;}

+ 1 - 5
src/stylesheets/Lungo.widgets.form.less
Переглянути файл 

@@ -19,7 +19,7 @@ form {
 
         }
 
     }
 
 
-    @rounded-radius: 8px;
 
+    @rounded-radius: 2px;
 
     &.rounded {
 
         & input:not([type=checkbox]), textarea, select {
 
             width: 94%;
 
@@ -28,10 +28,6 @@ form {
 
             &:first-of-type { .border-radius(@rounded-radius @rounded-radius 0px 0px); }
 
             &:last-of-type  { .border-radius(0px 0px @rounded-radius @rounded-radius); }
 
         }
 
-
 
-        & .button {
 
-            .border-radius(@rounded-radius);
 
-        }
 
     }
 
 }

+ 3 - 5
src/stylesheets/constants.less
Переглянути файл 

@@ -1,15 +1,13 @@
 
 @import "mixins.less";
 
 
 /* DIMENSIONS */
 
-@header-height: 42px;
 
-    @header_nav_height: 41px;
 
+@header-footer-height: 44px;
 
     @header_groupbar_height: 30px;
 
-@footer-height: 44px;
 
 
 @article-bottom: 45px;
 
-    @article_with_header_extended: 72px;
 
+    @article_with_header_extended: 74px;
 
 
-@border-radius: 3px;
 
+@border-radius: 2px;
 
 
 @aside-width: 256px;
 
     @aside-width-small: 64px;

+ 4 - 4
src/stylesheets/css/Lungo.layout.article.css
Переглянути файл 

@@ -32,13 +32,13 @@ article .text {
 
   line-height: 1.4em;
 
 }
 
 header:not(.extended) ~ article {
 
-  top: 42px;
 
+  top: 44px;
 
 }
 
 header.extended ~ article {
 
-  top: 72px;
 
+  top: 74px;
 
 }
 
-footer:not(.with-labels) ~ article {
 
-  bottom: 45px;
 
+footer ~ article {
 
+  bottom: 44px;
 
 }
 
 @media handheld, only screen and (min-width: 768px) {
 
   article.aside {

+ 1 - 1
src/stylesheets/css/Lungo.layout.aside.css
Переглянути файл 

@@ -76,7 +76,7 @@ aside header,
 
 aside footer {
 
   position: relative;
 
   left: none;
 
-  height: 42px;
 
+  height: 44px;
 
 }
 
 aside footer {
 
   position: absolute;

+ 3 - 14
src/stylesheets/css/Lungo.layout.css
Переглянути файл 

@@ -132,14 +132,14 @@ footer {
 
 }
 
 header {
 
   top: 0;
 
-  height: 42px;
 
-  line-height: 42px;
 
+  height: 44px;
 
+  line-height: 44px;
 
 }
 
 header .title {
 
   margin-left: 4px;
 
   float: left;
 
   z-index: -1;
 
-  font-size: 15px;
 
+  font-size: 1.2em;
 
   font-weight: bold;
 
 }
 
 header .title img {
 
@@ -152,17 +152,6 @@ header .title.centered {
 
   text-align: center;
 
   display: inline-block;
 
 }
 
-header .title.with-subtitle {
 
-  line-height: 20px;
 
-  padding-top: 4px;
 
-}
 
-header .subtitle {
 
-  margin-left: 4px;
 
-  display: block;
 
-  font-size: 11px;
 
-  line-height: 11px;
 
-  width: 100%;
 
-}
 
 footer {
 
   bottom: 0;
 
   height: 44px;

+ 23 - 14
src/stylesheets/css/Lungo.layout.nav.css
Переглянути файл 

@@ -17,7 +17,7 @@ nav a {
 
   min-width: 28px;
 
   z-index: 1000;
 
   float: left;
 
-  height: 41px;
 
+  height: 44px;
 
 }
 
 nav a .icon {
 
   font-size: 1.7em;
 
@@ -30,7 +30,7 @@ nav a img {
 
 nav a abbr {
 
   font-weight: bold;
 
 }
 
-nav .bubble {
 
+nav a .bubble {
 
   position: relative;
 
   top: -12px;
 
   left: -12px;
 
@@ -38,7 +38,7 @@ nav .bubble {
 
 }
 
 nav.groupbar {
 
   position: absolute;
 
-  top: 42px;
 
+  top: 44px;
 
   height: 30px;
 
   display: block;
 
   width: 100%;
 
@@ -58,6 +58,17 @@ nav.groupbar a .bubble {
 
   top: -6px;
 
   left: 0px;
 
 }
 
+header nav.button a {
 
+  margin: 5px 5px 5px 0;
 
+  height: 32px;
 
+  line-height: 32px;
 
+}
 
+header nav.button a .icon {
 
+  line-height: 33px;
 
+}
 
+header nav.button a:first-child {
 
+  margin: 5px;
 
+}
 
 header nav .icon ~ abbr {
 
   margin-left: 4px;
 
   float: right;
 
@@ -69,41 +80,39 @@ header nav .loading {
 
 header nav .loading  + .icon {
 
   display: none;
 
 }
 
-footer nav {
 
-  display: block;
 
-}
 
 footer nav a {
 
+  display: block;
 
   padding: 0;
 
   height: 44px;
 
 }
 
-footer nav .icon {
 
+footer nav a .icon {
 
   display: block;
 
   top: 0px;
 
   font-size: 2.0em !important;
 
   line-height: 44px;
 
 }
 
-footer nav .bubble {
 
+footer nav a .bubble {
 
   top: -42px;
 
   left: 4px;
 
 }
 
-footer nav .bubble .loading {
 
+footer nav a .bubble .loading {
 
   top: 0;
 
   font-size: 1.4em;
 
 }
 
-footer nav abbr {
 
+footer nav a abbr {
 
   display: none;
 
 }
 
-footer nav .loading {
 
+footer nav a .loading {
 
   top: .1em;
 
   font-size: 2.3em;
 
 }
 
-footer nav.with-labels .icon {
 
+footer nav a.with-labels .icon {
 
   line-height: 36px;
 
 }
 
-footer nav.with-labels .bubble {
 
+footer nav a.with-labels .bubble {
 
   top: -34px;
 
 }
 
-footer nav.with-labels abbr {
 
+footer nav a.with-labels abbr {
 
   display: block;
 
   position: absolute;
 
   top: 30px;

Різницю між файлами не показано, бо вона завелика
+ 259 - 259
src/stylesheets/css/Lungo.theme.default.css


+ 14 - 28
src/stylesheets/css/Lungo.widgets.colour.css
Переглянути файл 

@@ -12,112 +12,98 @@ a.grey,
 
 .grey {
 
   background-color: #cccccc;
 
 }
 
-a.grey:active,
 
-a.grey.active {
 
+a.grey:active {
 
   background-color: #b5b5b5;
 
 }
 
 a.dark-grey,
 
 .dark-grey {
 
   background-color: #000000;
 
 }
 
-a.dark-grey:active,
 
-a.dark-grey.active {
 
+a.dark-grey:active {
 
   background-color: #000000;
 
 }
 
 a.red,
 
 .red {
 
   background-color: #e33100;
 
 }
 
-a.red:active,
 
-a.red.active {
 
+a.red:active {
 
   background-color: #c5280f;
 
 }
 
 a.lightgreen,
 
 .lightgreen {
 
   background-color: #91bd09;
 
 }
 
-a.lightgreen:active,
 
-a.lightgreen.active {
 
+a.lightgreen:active {
 
   background-color: #7ea41a;
 
 }
 
 a.green,
 
 .green {
 
   background-color: #009600;
 
 }
 
-a.green:active,
 
-a.green.active {
 
+a.green:active {
 
   background-color: #00770e;
 
 }
 
 a.blue,
 
 .blue {
 
   background-color: #237fd7;
 
 }
 
-a.blue:active,
 
-a.blue.active {
 
+a.blue:active {
 
   background-color: #1a69b6;
 
 }
 
 a.arcticblue,
 
 .arcticblue {
 
   background-color: #2daebf;
 
 }
 
-a.arcticblue:active,
 
-a.arcticblue.active {
 
+a.arcticblue:active {
 
   background-color: #238e9e;
 
 }
 
 a.orange,
 
 .orange {
 
   background-color: #ff5c00;
 
 }
 
-a.orange:active,
 
-a.orange.active {
 
+a.orange:active {
 
   background-color: #da4e15;
 
 }
 
 a.purple,
 
 .purple {
 
   background-color: #7b658d;
 
 }
 
-a.purple:active,
 
-a.purple.active {
 
+a.purple:active {
 
   background-color: #574765;
 
 }
 
 a.magenta,
 
 .magenta {
 
   background-color: #a9014b;
 
 }
 
-a.magenta:active,
 
-a.magenta.active {
 
+a.magenta:active {
 
   background-color: #831239;
 
 }
 
 a.pink,
 
 .pink {
 
   background-color: #ff007f;
 
 }
 
-a.pink:active,
 
-a.pink.active {
 
+a.pink:active {
 
   background-color: #de2870;
 
 }
 
 a.yellow,
 
 .yellow {
 
   background-color: #ffb515;
 
 }
 
-a.yellow:active,
 
-a.yellow.active {
 
+a.yellow:active {
 
   background-color: #dfa020;
 
 }
 
 a.twitter,
 
 .twitter:not(span) {
 
   background-color: #35cdff;
 
 }
 
-a.twitter:active,
 
-a.twitter.active {
 
+a.twitter:active {
 
   background-color: #2bafda;
 
 }
 
 a.facebook,
 
 .facebook:not(span) {
 
   background-color: #3b5998;
 
 }
 
-a.facebook:active,
 
-a.facebook.active {
 
+a.facebook:active {
 
   background-color: #2c4579;
 
 }
 
 li.grey {

+ 12 - 26
src/stylesheets/css/Lungo.widgets.form.css
Переглянути файл 

@@ -22,15 +22,15 @@ form.rounded select {
 
 form.rounded input:not([type=checkbox]):first-of-type,
 
 form.rounded textarea:first-of-type,
 
 form.rounded select:first-of-type {
 
-  -webkit-border-radius: 8px 8px 0px 0px;
 
-  -moz-border-radius: 8px 8px 0px 0px;
 
-  border-radius: 8px 8px 0px 0px;
 
+  -webkit-border-radius: 2px 2px 0px 0px;
 
+  -moz-border-radius: 2px 2px 0px 0px;
 
+  border-radius: 2px 2px 0px 0px;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
-  -webkit-border-radius: 8px 8px 0px 0px;
 
-  -moz-border-radius: 8px 8px 0px 0px;
 
-  border-radius: 8px 8px 0px 0px;
 
+  -webkit-border-radius: 2px 2px 0px 0px;
 
+  -moz-border-radius: 2px 2px 0px 0px;
 
+  border-radius: 2px 2px 0px 0px;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
@@ -38,29 +38,15 @@ form.rounded select:first-of-type {
 
 form.rounded input:not([type=checkbox]):last-of-type,
 
 form.rounded textarea:last-of-type,
 
 form.rounded select:last-of-type {
 
-  -webkit-border-radius: 0px 0px 8px 8px;
 
-  -moz-border-radius: 0px 0px 8px 8px;
 
-  border-radius: 0px 0px 8px 8px;
 
+  -webkit-border-radius: 0px 0px 2px 2px;
 
+  -moz-border-radius: 0px 0px 2px 2px;
 
+  border-radius: 0px 0px 2px 2px;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;
 
-  -webkit-border-radius: 0px 0px 8px 8px;
 
-  -moz-border-radius: 0px 0px 8px 8px;
 
-  border-radius: 0px 0px 8px 8px;
 
-  -webkit-background-clip: padding-box;
 
-  -moz-background-clip: padding;
 
-  background-clip: padding-box;
 
-}
 
-form.rounded .button {
 
-  -webkit-border-radius: 8px;
 
-  -moz-border-radius: 8px;
 
-  border-radius: 8px;
 
-  -webkit-background-clip: padding-box;
 
-  -moz-background-clip: padding;
 
-  background-clip: padding-box;
 
-  -webkit-border-radius: 8px;
 
-  -moz-border-radius: 8px;
 
-  border-radius: 8px;
 
+  -webkit-border-radius: 0px 0px 2px 2px;
 
+  -moz-border-radius: 0px 0px 2px 2px;
 
+  border-radius: 0px 0px 2px 2px;
 
   -webkit-background-clip: padding-box;
 
   -moz-background-clip: padding;
 
   background-clip: padding-box;

Різницю між файлами не показано, бо вона завелика
+ 12 - 0
src/stylesheets/lungo.theme.default.font.less