Главная Обзор Помощь
Вход
pwa
/
Lungo.js
зеркало из https://github.com/tapquo/Lungo.js.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Changes in stylesheets

soyjavi 13 лет назад
Родитель
91673a0dea
Сommit
ad621182c2
5 измененных файлов с 47 добавлено и 48 удалено
Единый вид Показать статистику Diff
  1. 5 5
      kitchen-sink/index.html
  2. 1 1
      src/stylesheets/Lungo.layout.list.styl
  3. 16 15
      src/stylesheets/Lungo.theme.default.styl
  4. 1 1
      src/stylesheets/css/Lungo.layout.list.css
  5. 24 26
      src/stylesheets/css/Lungo.theme.default.css

+ 5 - 5
kitchen-sink/index.html
Просмотреть файл 

@@ -71,7 +71,7 @@
 
     <link rel="stylesheet" href="../package/lungo.theme.default.css">
 
     <link rel="stylesheet" href="../package/lungo.theme.default.css">
 
     -->
 
     -->
 
     <!-- App Stylesheet -->
 
     <!-- App Stylesheet -->
 
-    <link rel="stylesheet" href="stylesheets/app.css">
 
+    <link rel="stylesheet" href="-stylesheets/app.css">
 
 </head>
 
 </head>
 
 
 
 <body class="app">
 
 <body class="app">
 
@@ -95,19 +95,19 @@
 
                     A framework for developers who want to design, build and share cross device apps.
 
                     A framework for developers who want to design, build and share cross device apps.
 
                 </strong>
 
                 </strong>
 
                 </li>
 
                 </li>
 
-                <li data-icon="brand html5" class="feature">
 
+                <li class="feature">
 
                     <strong>HTML5 Optimized Apps</strong>
 
                     <strong>HTML5 Optimized Apps</strong>
 
                     Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
 
                     Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
 
                 </li>
 
                 </li>
 
-                <li data-icon="brand github-2" class="feature">
 
+                <li class="feature">
 
                     <strong>Open Source Project</strong>
 
                     <strong>Open Source Project</strong>
 
                     Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
 
                     Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
 
                 </li>
 
                 </li>
 
-                <li data-icon="book" class="feature">
 
+                <li class="feature">
 
                     <strong>Powerfull JavaScript API</strong>
 
                     <strong>Powerfull JavaScript API</strong>
 
                     Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
 
                     Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
 
                 </li>
 
                 </li>
 
-                <li data-icon="brand branch" class="feature">
 
+                <li class="feature">
 
                     <strong>Multi-Device full support</strong>
 
                     <strong>Multi-Device full support</strong>
 
                     Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
 
                     Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
 
                 </li>
 
                 </li>

+ 1 - 1
src/stylesheets/Lungo.layout.list.styl
Просмотреть файл 

@@ -58,7 +58,7 @@
 
 
 
     & strong
 
     & strong
 
       position: relative
 
       position: relative
 
-      font-weight: 400
 
+      font-weight: 600
 
 
 
     & small
 
     & small
 
       display: block
 
       display: block

+ 16 - 15
src/stylesheets/Lungo.theme.default.styl
Просмотреть файл 

@@ -8,14 +8,14 @@
 
  */
 
  */
 
 
 
 @import "import/vendor.styl"
 
 @import "import/vendor.styl"
 
-@import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
 
+@import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700")
 
 @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700")
 
 @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700")
 
-
 
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,600")
 
 
 
 THEME = #0093D5
 
 THEME = #0093D5
 
 THEME_light =  #39ABE1
 
 THEME_light =  #39ABE1
 
-THEME = #2A95D3
 
-THEME_light =  #25AEEB
 
+
 
+THEME = #ddd
 
 THEME_dark = #222
 
 THEME_dark = #222
 
 THEME_dark_current = #111
 
 THEME_dark_current = #111
 
 THEME_dark_nav = #888
 
 THEME_dark_nav = #888
 
@@ -30,11 +30,13 @@ FORM_border_radius = 1px
 
 
 
 body
 
 body
 
   background: #000
 
   background: #000
 
-  font-family: "Source Sans Pro", "Titillium Web", Helvetica, Arial, sans-serif
 
-  font-weight: 300
 
-  font-size: 16px
 
+  font-family: "Open Sans", "Source Sans Pro","Titillium Web",  Helvetica, Arial, sans-serif
 
+  font-weight: 400
 
+  font-size: 15px
 
   line-height: 1.3em
 
   line-height: 1.3em
 
 
 
+
 
+
 
 .theme
 
 .theme
 
   &, li&, a&
 
   &, li&, a&
 
     background:
 
     background:
 
@@ -51,12 +53,9 @@ body
 
 section
 
 section
 
   & > header
 
   & > header
 
     background-color: THEME
 
     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)
 
+    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.1)
 
     & .title
 
     & .title
 
-      color: #fff
 
-    & .subtitle
 
-      color: #fff
 
-      opacity: 0.7
 
+      color: #333
 
 
 
   & > footer
 
   & > footer
 
     background-color: THEME-dark
 
     background-color: THEME-dark
 
@@ -70,6 +69,7 @@ section
 
 
 
   & > article, & > [data-control="pull"]
 
   & > article, & > [data-control="pull"]
 
     background: #f4f5f5
 
     background: #f4f5f5
 
+    background-color: #ddd
 
 
 
   &.aside
 
   &.aside
 
     box-shadow -1px 0 0 rgba(0,0,0,0.2)
 
     box-shadow -1px 0 0 rgba(0,0,0,0.2)
 
@@ -110,7 +110,7 @@ aside
 
 
 
 header nav
 
 header nav
 
   & a
 
   & a
 
-    color: #fff
 
+    color: #666
 
   &.box
 
   &.box
 
     &:not(.right) a
 
     &:not(.right) 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)
 
@@ -142,7 +142,8 @@ footer > nav > a, nav.groupbar > a
 
 
 
 
 
 LIST-border = #ddd
 
 LIST-border = #ddd
 
-LIST-color = #333
 
+LIST-color = #111
 
+LIST-color-secondary = #666
 
 
 
 .list
 
 .list
 
   & li
 
   & li
 
@@ -175,7 +176,7 @@ LIST-color = #333
 
           color: #fff !important
 
           color: #fff !important
 
 
 
       & small, & .right:not(.bubble)
 
       & small, & .right:not(.bubble)
 
-        opacity: 0.8
 
+        color: LIST-color-secondary
 
 
 
   &:not(.indented) li
 
   &:not(.indented) li
 
     &.dark, &.theme, &.light
 
     &.dark, &.theme, &.light

+ 1 - 1
src/stylesheets/css/Lungo.layout.list.css
Просмотреть файл 

@@ -61,7 +61,7 @@
 
 }
 
 }
 
 .list li strong {
 
 .list li strong {
 
   position: relative;
 
   position: relative;
 
-  font-weight: 400;
 
+  font-weight: 600;
 
 }
 
 }
 
 .list li small {
 
 .list li small {
 
   display: block;
 
   display: block;

+ 24 - 26
src/stylesheets/css/Lungo.theme.default.css
Просмотреть файл 

@@ -8,11 +8,12 @@
 
  */
 
  */
 
 @import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
 
 @import url("http://fonts.googleapis.com/css?family=Titillium+Web:200,400,700");
 
 @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700");
 
 @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700");
 
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,600");
 
 body {
 
 body {
 
   background: #000;
 
   background: #000;
 
-  font-family: "Source Sans Pro", "Titillium Web", Helvetica, Arial, sans-serif;
 
-  font-weight: 300;
 
-  font-size: 16px;
 
+  font-family: "Open Sans", "Source Sans Pro", "Titillium Web", Helvetica, Arial, sans-serif;
 
+  font-weight: 400;
 
+  font-size: 15px;
 
   line-height: 1.3em;
 
   line-height: 1.3em;
 
 }
 
 }
 
 .theme,
 
 .theme,
 
@@ -23,7 +24,7 @@ a.theme {
 
 .theme:active,
 
 .theme:active,
 
 li.theme:active,
 
 li.theme:active,
 
 a.theme:active {
 
 a.theme:active {
 
-  background: #2a95d3;
 
+  background: #ddd;
 
 }
 
 }
 
 [data-control="pull"] {
 
 [data-control="pull"] {
 
   color: #666;
 
   color: #666;
 
@@ -32,17 +33,13 @@ a.theme:active {
 
   text-shadow: 0 1px 0 #fff;
 
   text-shadow: 0 1px 0 #fff;
 
 }
 
 }
 
 section > header {
 
 section > header {
 
-  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);
 
+  background-color: #ddd;
 
+  -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.1);
 
+  -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.1);
 
+  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.1);
 
 }
 
 }
 
 section > header .title {
 
 section > header .title {
 
-  color: #fff;
 
-}
 
-section > header .subtitle {
 
-  color: #fff;
 
-  opacity: 0.7;
 
+  color: #333;
 
 }
 
 }
 
 section > footer {
 
 section > footer {
 
   background-color: THEME-dark;
 
   background-color: THEME-dark;
 
@@ -65,6 +62,7 @@ section > footer > nav a.current {
 
 section > article,
 
 section > article,
 
 section > [data-control="pull"] {
 
 section > [data-control="pull"] {
 
   background: #f4f5f5;
 
   background: #f4f5f5;
 
+  background-color: #ddd;
 
 }
 
 }
 
 section.aside {
 
 section.aside {
 
   -webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
 
   -webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
 
@@ -106,8 +104,8 @@ aside .list li {
 
   border-bottom-color: #222 !important;
 
   border-bottom-color: #222 !important;
 
 }
 
 }
 
 aside .list li.current {
 
 aside .list li.current {
 
-  background: #2a95d3;
 
-  border-bottom-color: #2a95d3;
 
+  background: #ddd;
 
+  border-bottom-color: #ddd;
 
 }
 
 }
 
 aside .list li.current strong,
 
 aside .list li.current strong,
 
 aside .list li.current small,
 
 aside .list li.current small,
 
@@ -120,7 +118,7 @@ aside .list li .icon {
 
   color: #888;
 
   color: #888;
 
 }
 
 }
 
 header nav a {
 
 header nav a {
 
-  color: #fff;
 
+  color: #666;
 
 }
 
 }
 
 header nav.box:not(.right) a {
 
 header nav.box:not(.right) a {
 
   -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
 
   -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
 
@@ -150,9 +148,9 @@ section > nav.groupbar {
 
   background-color: THEME-dark;
 
   background-color: THEME-dark;
 
 }
 
 }
 
 section > nav.groupbar > a.current {
 
 section > nav.groupbar > a.current {
 
-  -webkit-box-shadow: inset 0 -3px 0 #2a95d3;
 
-  -moz-box-shadow: inset 0 -3px 0 #2a95d3;
 
-  box-shadow: inset 0 -3px 0 #2a95d3;
 
+  -webkit-box-shadow: inset 0 -3px 0 #ddd;
 
+  -moz-box-shadow: inset 0 -3px 0 #ddd;
 
+  box-shadow: inset 0 -3px 0 #ddd;
 
 }
 
 }
 
 footer > nav > a,
 
 footer > nav > a,
 
 nav.groupbar > a {
 
 nav.groupbar > a {
 
@@ -168,7 +166,7 @@ nav.groupbar > a.current {
 
 }
 
 }
 
 .list li,
 
 .list li,
 
 .list li a {
 
 .list li a {
 
-  color: #333;
 
+  color: #111;
 
 }
 
 }
 
 .list li.dark,
 
 .list li.dark,
 
 .list li a.dark {
 
 .list li a.dark {
 
@@ -184,7 +182,7 @@ nav.groupbar > a.current {
 
 .list li a.selectable:active,
 
 .list li a.selectable:active,
 
 .list li.theme,
 
 .list li.theme,
 
 .list li a.theme {
 
 .list li a.theme {
 
-  background: #25aeeb;
 
+  background: #39abe1;
 
 }
 
 }
 
 .list li.selectable:active,
 
 .list li.selectable:active,
 
 .list li a.selectable:active,
 
 .list li a.selectable:active,
 
@@ -224,7 +222,7 @@ nav.groupbar > a.current {
 
 .list li a small,
 
 .list li a small,
 
 .list li .right:not(.bubble),
 
 .list li .right:not(.bubble),
 
 .list li a .right:not(.bubble) {
 
 .list li a .right:not(.bubble) {
 
-  opacity: 0.8;
 
+  color: #666;
 
 }
 
 }
 
 .list:not(.indented) li.dark,
 
 .list:not(.indented) li.dark,
 
 .list:not(.indented) li.theme,
 
 .list:not(.indented) li.theme,
 
@@ -375,7 +373,7 @@ form select:focus,
 
 form textarea:focus,
 
 form textarea:focus,
 
 .form textarea:focus {
 
 .form textarea:focus {
 
   background: #fafafa;
 
   background: #fafafa;
 
-  border-color: #2a95d3;
 
+  border-color: #ddd;
 
   color: rgba(0,0,0,0.75);
 
   color: rgba(0,0,0,0.75);
 
 }
 
 }
 
 form input[type="text"][disabled],
 
 form input[type="text"][disabled],
 
@@ -428,7 +426,7 @@ form input[type=range]:not(.checkbox),
 
 }
 
 }
 
 form input[type=range]:not(.checkbox):active,
 
 form input[type=range]:not(.checkbox):active,
 
 .form input[type=range]:not(.checkbox):active {
 
 .form input[type=range]:not(.checkbox):active {
 
-  background-color: #25aeeb;
 
+  background-color: #39abe1;
 
 }
 
 }
 
 form input[type=range].checkbox,
 
 form input[type=range].checkbox,
 
 .form input[type=range].checkbox {
 
 .form input[type=range].checkbox {
 
@@ -437,7 +435,7 @@ form input[type=range].checkbox,
 
 }
 
 }
 
 form input[type=range].checkbox.active,
 
 form input[type=range].checkbox.active,
 
 .form input[type=range].checkbox.active {
 
 .form input[type=range].checkbox.active {
 
-  background-color: #25aeeb;
 
+  background-color: #39abe1;
 
 }
 
 }
 
 form input[type=range]::-webkit-slider-thumb,
 
 form input[type=range]::-webkit-slider-thumb,
 
 .form input[type=range]::-webkit-slider-thumb {
 
 .form input[type=range]::-webkit-slider-thumb {
 
@@ -481,7 +479,7 @@ form .progress .bar .value .label,
 
   border-radius: 2px;
 
   border-radius: 2px;
 
 }
 
 }
 
 .bubble.count {
 
 .bubble.count {
 
-  background: #2a95d3;
 
+  background: #ddd;
 
 }
 
 }
 
 .bubble header .count {
 
 .bubble header .count {
 
   background: THEME-dark !important;
 
   background: THEME-dark !important;