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

New layout(flexbox system)

Javi Jimenez Villar 13 лет назад
Родитель
618b628afc
Сommit
108178e662
7 измененных файлов с 50 добавлено и 100 удалено
Разделённый вид Показать статистику Diff
  1. 13 15
      example/app/articles/grid.html
  2. 1 1
      example/index.html
  3. 0 81
      src/stylesheets/lungo.layout.grid.styl
  4. 1 1
      src/stylesheets/lungo.layout.list.styl
  5. 1 0
      src/stylesheets/lungo.layout.styl
  6. 27 2
      src/stylesheets/lungo.widgets.styl
  7. 7 0
      src/stylesheets/theme.lungo.styl

+ 13 - 15
example/app/articles/grid.html
Просмотреть файл 

@@ -1,17 +1,15 @@
 
-<article id="grid" class="active"  style="font-size:0.7em;">
 
-    <div class="four rows">class="four rows"</div>
 
-    <div class="one row blue">class="one row blue"</div>
 
-    <div class="one row">class="one row"</div>
 
-    <div class="two rows ">
 
-        <div class="two columns blue">class="two colums blue"</div>
 
-        <div class="two column">class="two columns"</div>
 
-        <div class="three columns blue">class="three columns blue"</div>
 
-        <div class="three columns">class="three columns"</div>
 
-    </div>
 
-    <div class="two rows">
 
-        <div class="three columns">class="three columns"</div>
 
-        <div class="three column blue">class="three column"</div>
 
-        <div class="two columns">class="two columns"</div>
 
-        <div class="two columns blue">class="two columns blue"</div>
 
+<article id="grid" class="indented">
 
+    <div class="layout">
 
+        <div>&nbsp;</div>
 
+        <div data-layout="secondary" class="bck accept">&nbsp;</div>
 
+        <div data-layout="primary" class="bck cancel">&nbsp;</div>
 
+        <br/>
 
+        <div>
 
+            <div class="layout horizontal">
 
+                <div>&nbsp;</div>
 
+                <div data-layout="secondary" class="bck accept">&nbsp;</div>
 
+                <div data-layout="primary" class="bck cancel">&nbsp;</div>
 
+            </div>
 
+        </div>
 
     </div>
 
 </article>

+ 1 - 1
example/index.html
Просмотреть файл 

@@ -2,7 +2,7 @@
 
 <html>
 
 <head>
 
     <meta charset="utf-8">
 
-    <title>Lungo 2.1 - SDK</title>
 
+    <title>Brownie</title>
 
     <meta name="description" content="">
 
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
     <meta name="HandheldFriendly" content="True">

+ 0 - 81
src/stylesheets/lungo.layout.grid.styl
Просмотреть файл 

@@ -1,81 +0,0 @@
 
-/**
 
- * Stylesheet
 
- *
 
- * @namespace Lungo.Layout
 
- * @class Grid
 
- *
 
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
- */
 
-
 
-@import "constants.styl"
 
-
 
-.row, .rows
 
-  width: 100%
 
-  margin: 0 auto
 
-  *zoom: 1
 
-
 
-  &:before, &:after
 
-    content: ""
 
-    display: table
 
-
 
-  &:after
 
-    clear: both
 
-
 
-  &.one
 
-    height: 10%
 
-  &.two
 
-    height: 20%
 
-  &.three
 
-    height: 30%
 
-  &.four
 
-    height: 40%
 
-  &.five
 
-    height: 50%
 
-  &.six
 
-    height: 60%
 
-  &.seven
 
-    height: 70%
 
-  &.eight
 
-    height: 80%
 
-  &.nine
 
-    height: 90%
 
-  &.ten
 
-    height: 100%
 
-
 
-
 
-.column, .columns
 
-  float: left
 
-  position: relative
 
-  display: block
 
-  height: 100%
 
-
 
-  &.centered
 
-    float: none
 
-    margin: 0 auto
 
-
 
-
 
-  &.one
 
-    width: 10%
 
-  &.two
 
-    width: 20%
 
-  &.three
 
-    width: 30%
 
-  &.four
 
-    width: 40%
 
-  &.five
 
-    width: 50%
 
-  &.six
 
-    width: 60%
 
-  &.seven
 
-    width: 70%
 
-  &.eight
 
-    width: 80%
 
-  &.nine
 
-    width: 90%
 
-  &.ten
 
-    width: 100%
 
-
 
-[class*="column"] + [class*="column"]:last-child
 
-  float: right
 
-[class*="column"] + [class*="column"].end
 
-  float: left

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

@@ -90,5 +90,5 @@
 
       font-size: 1.2em !important
 
       line-height: 1.1em
 
 
-  &.indented li
 
+  &.indented li:not(:last-child)
 
     margin-bottom: 10px

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

@@ -98,6 +98,7 @@ article
 
     visibility: visible
 
     display: block
 
     z-index: 1
 
+    height: inherit
 
 
     &.pull
 
       transition-property transform

+ 27 - 2
src/stylesheets/lungo.widgets.styl
Просмотреть файл 

@@ -23,6 +23,13 @@
 
   -webkit-overflow-scrolling: touch
 
   -webkit-box-flex: 1
 
 
+  // & > *
 
+  //   background: -webkit-linear-gradient(white 30%, hsla(0,0%,100%,0)), -webkit-linear-gradient(hsla(0,0%,100%,0), white 70%) bottom, -webkit-radial-gradient(50% 0, rgba(0,0,0,.2), transparent 70%), -webkit-radial-gradient(50% 100%, rgba(0,0,0,.2), transparent 70%) bottom;
 
+  //   background-repeat: no-repeat;
 
+  //   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
 
+  //   background-attachment: local, local, scroll, scroll;
 
+
 
+
 
   &.horizontal
 
     overflow-x: scroll
 
     overflow-y: hidden
 
@@ -39,8 +46,10 @@
 
 
 .hidden
 
   display: none
 
+
 
 .indented > *
 
-  margin: 10px
 
+  padding: 10px
 
+
 
 .margined
 
   margin: 3%
 
 
@@ -74,7 +83,23 @@ size = 5px
 
     margin-bottom: size
 
 
 
-/* ================================  CAROUSEL  ================================ */
 
+/* ================================  .layout  ================================ */
 
+.layout
 
+  display-box()
 
+  height:  inherit !important
 
+  &:not(.horizontal)
 
+    box-orient(vertical)
 
+  &:.horizontal
 
+    box-orient(horizontal)
 
+  & > *
 
+    box-flex(1)
 
+  & > [data-layout='secondary']
 
+    box-flex(2)
 
+  & > [data-layout='primary']
 
+    box-flex(3)
 
+
 
+
 
+/* ================================  MENU  ================================ */
 
 [data-view-menu]
 
   &:after
 
     content: "▼"

+ 7 - 0
src/stylesheets/theme.lungo.styl
Просмотреть файл 

@@ -32,6 +32,13 @@ THEME           = #0093D5
 
 THEME_light     = lighten(THEME, 15%)
 
 THEME_dark      = darken(THEME, 15%)
 
 
+.bck
 
+  &.theme
 
+    background-color: THEME
 
+  &.cancel
 
+    background-color: COLOR_cancel
 
+  &.accept
 
+    background-color: COLOR_accept
 
 
 /* -------------------------- DEFAULTS -------------------------- */
 
 body