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

Normalize sizes

Javi Jimenez Villar 13 лет назад
Родитель
e68d4e2601
Сommit
f3e0b7bf73
9 измененных файлов с 55 добавлено и 53 удалено
Единый вид Показать статистику Diff
  1. 3 3
      example/app/sections/form.html
  2. 13 8
      example/app/sections/splash.html
  3. 3 1
      example/index.html
  4. 2 0
      src/stylesheets/constants.styl
  5. 0 1
      src/stylesheets/lungo.layout.list.styl
  6. 2 2
      src/stylesheets/lungo.widgets.button.styl
  7. 1 1
      src/stylesheets/lungo.widgets.form.styl
  8. 7 13
      src/stylesheets/lungo.widgets.splash.styl
  9. 24 24
      src/stylesheets/theme.lungo.styl

+ 3 - 3
example/app/sections/form.html
Просмотреть файл 

@@ -2,9 +2,9 @@
 
     <header data-title="Form Elements" data-back="home"></header>
 
     <header data-title="Form Elements" data-back="home"></header>
 
 
 
     <nav data-control="groupbar">
 
     <nav data-control="groupbar">
 
-        <a href="#" data-view-article="form-normal" data-label="Profile" class="active"></a>
 
-        <a href="#" data-view-article="form-indented" data-label="Inbox"></a>
 
-        <a href="#" data-view-article="form-special" data-label="Map"></a>
 
+        <a href="#" data-view-article="form-normal" data-label="Normal" class="active"></a>
 
+        <a href="#" data-view-article="form-indented" data-label="Indented"></a>
 
+        <a href="#" data-view-article="form-special" data-label="Specials"></a>
 
     </nav>
 
     </nav>
 
 
 
     <article id="form-normal" class="scroll">
 
     <article id="form-normal" class="scroll">

+ 13 - 8
example/app/sections/splash.html
Просмотреть файл 

@@ -1,11 +1,16 @@
 
 <section id="splash" data-transition="slide">
 
 <section id="splash" data-transition="slide">
 
-    <article class="active indented splash">
 
-        <img src="http://cdn.tapquo.com/lungo/logo.png"/>
 
-        <form class="roundeds">
 
-            <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 theme anchor large" data-icon="lock" data-icon="user">Login</a>
 
-            <a href="#" data-view-section="back" class="button secondary anchor" data-icon="home">Return to Kichensink</a>
 
-        </form>
 
+    <article class="active splash">
 
+        <img src="http://cdn.tapquo.com/lungo/logo.png" class="logo"/>
 
+        <div class="form">
 
+            <fieldset>
 
+                <input type="text" class="large" placeholder="Your username" id="txt-signup-name" value="">
 
+            </fieldset>
 
+            <fieldset>
 
+                <input type="password" class="large" placeholder="Your password" id="txt-signup-password" value="">
 
+            </fieldset>
 
+            <a href="#" class="button large anchor" data-icon="lock" data-icon="user" data-label="Login"></a>
 
+            <a href="#" data-view-section="back" class="button large secondary anchor" data-icon="home" data-label="Return to kitchensink"></a>
 
+        </div>
 
+        <span class="copyright text thin">Copyright (C) 2011-2013 - <span class="text bold">Tapquo S.L.</span></span>
 
     </article>
 
     </article>
 
 </section>
 
 </section>

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

@@ -57,6 +57,8 @@
 
 </head>
 
 </head>
 
 
 
 <body class="app">
 
 <body class="app">
 
+
 
+
 
     <section id="main" data-transition="" data-aside="features" class="drag">
 
     <section id="main" data-transition="" data-aside="features" class="drag">
 
         <header>
 
         <header>
 
             <nav>
 
             <nav>
 
@@ -111,7 +113,7 @@
 
                     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>
 
                 <li>
 
-                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
 
+                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
         </article>
 
         </article>

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

@@ -13,6 +13,8 @@ TRANSITION_TIME        = 400ms
 
 FONT_SIZE_TINY         = 11px
 
 FONT_SIZE_TINY         = 11px
 
 FONT_SIZE_SMALL        = 0.9em
 
 FONT_SIZE_SMALL        = 0.9em
 
 FONT_SIZE_BIG          = 1.2em
 
 FONT_SIZE_BIG          = 1.2em
 
+FONT_SIZE_LARGE        = 1.4em
 
+
 
 
 
 LIST_PADDING           = 14px
 
 LIST_PADDING           = 14px
 
 LIST_PADDING_HORIZONTAL= (LIST_PADDING / 1.25)
 
 LIST_PADDING_HORIZONTAL= (LIST_PADDING / 1.25)

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

@@ -16,7 +16,6 @@
 
     padding: LIST_PADDING LIST_PADDING_HORIZONTAL (LIST_PADDING - 1) LIST_PADDING_HORIZONTAL
 
     padding: LIST_PADDING LIST_PADDING_HORIZONTAL (LIST_PADDING - 1) LIST_PADDING_HORIZONTAL
 
     position: relative
 
     position: relative
 
 
 
-
 
     &, & a, & small, & .right
 
     &, & a, & small, & .right
 
       font-weight: 300
 
       font-weight: 300

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

@@ -14,7 +14,7 @@
 
   border: none
 
   border: none
 
   cursor: pointer
 
   cursor: pointer
 
   font-family: inherit
 
   font-family: inherit
 
-  font-size: 1.15em
 
+  font-size: FONT_SIZE_BIG
 
   text-align: center
 
   text-align: center
 
   text-decoration: none
 
   text-decoration: none
 
   outline: none
 
   outline: none
 
@@ -54,7 +54,7 @@
 
     &.large
 
     &.large
 
       height: H = 52px
 
       height: H = 52px
 
       padding: 0 20px
 
       padding: 0 20px
 
-      font-size: 1.4em
 
+      font-size: FONT_SIZE_LARGE
 
       line-height: (H - 2)
 
       line-height: (H - 2)
 
       & .icon + abbr
 
       & .icon + abbr
 
         margin-left: 10px
 
         margin-left: 10px

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

@@ -20,7 +20,7 @@ form, .form
 
     margin-bottom: 8px
 
     margin-bottom: 8px
 
     font-size: FONT_SIZE_BIG
 
     font-size: FONT_SIZE_BIG
 
     &.large
 
     &.large
 
-      font-size: (FONT_SIZE_BIG * 1.2)
 
+      font-size: FONT_SIZE_LARGE
 
 
 
   & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea, label.select
 
   & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea, label.select
 
     display: block
 
     display: block

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

@@ -11,27 +11,21 @@
 
 
 
 .splash
 
 .splash
 
   text-align: center
 
   text-align: center
 
+  padding: (INDENT * 2)
 
 
 
-  & > form
 
-    margin: 24px 32px
 
-
 
-  & img
 
-    max-width: 206px
 
-    margin: 20% auto 0%
 
-
 
-  & h1
 
-    margin-top: 20%
 
+  & .logo
 
+    width: 60%
 
+    margin: 20% 0 10% 0
 
     font-size: 2.2em
 
     font-size: 2.2em
 
-    font-weight: bold
 
 
 
   & .button
 
   & .button
 
-    margin-top: 10px
 
+    margin-top: INDENT
 
+    margin-bottom: INDENT
 
 
 
   & .copyright
 
   & .copyright
 
     position: absolute
 
     position: absolute
 
     width: 100%
 
     width: 100%
 
     bottom: 8px
 
     bottom: 8px
 
     left: 0px
 
     left: 0px
 
-    font-size: 0.8em
 
-    font-style: normal
 
+    font-size: FONT_SIZE_TINY
 
     padding: 0px
 
     padding: 0px

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

@@ -22,7 +22,6 @@ DARK            = #222
 
 DARK_light      = lighten(DARK, 25%)
 
 DARK_light      = lighten(DARK, 25%)
 
 DARK_dark       = darken(DARK, 15%)
 
 DARK_dark       = darken(DARK, 15%)
 
 DARK_darkest    = darken(DARK, 30%)
 
 DARK_darkest    = darken(DARK, 30%)
 
-FORM_radius     = 1px
 
 LIST_color      = lighten(COLOR, 5%)
 
 LIST_color      = lighten(COLOR, 5%)
 
 LIST_color_2nd  = lighten(COLOR, 35%)
 
 LIST_color_2nd  = lighten(COLOR, 35%)
 
 LIST_border     = lighten(COLOR, 90%)
 
 LIST_border     = lighten(COLOR, 90%)
 
@@ -32,6 +31,8 @@ THEME           = #0093D5
 
 THEME_light     = lighten(THEME, 15%)
 
 THEME_light     = lighten(THEME, 15%)
 
 THEME_dark      = darken(THEME, 15%)
 
 THEME_dark      = darken(THEME, 15%)
 
 
 
+FORM_color      = #e5e5e5
 
+BORDER_radius   = 2px
 
 /* -------------------------- DEFAULTS -------------------------- */
 
 /* -------------------------- DEFAULTS -------------------------- */
 
 body
 
 body
 
   background-color: #000
 
   background-color: #000
 
@@ -55,7 +56,7 @@ section
 
     background-color: THEME
 
     background-color: THEME
 
     box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
 
     box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
 
     color: #fff
 
     color: #fff
 
-    border-radius 4px 4px 0 0
 
+    border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0
 
 
 
   & > footer, & nav[data-control=groupbar]
 
   & > footer, & nav[data-control=groupbar]
 
     background-color: DARK
 
     background-color: DARK
 
@@ -63,7 +64,7 @@ section
 
   & > article, & > [data-control="pull"]
 
   & > article, & > [data-control="pull"]
 
     background-color: CONTENT
 
     background-color: CONTENT
 
     &.splash
 
     &.splash
 
-      background: DARK
 
+      background: THEME
 
       color: #fff
 
       color: #fff
 
   &.aside
 
   &.aside
 
     box-shadow -1px 0 2px rgba(0,0,0,0.2)
 
     box-shadow -1px 0 2px rgba(0,0,0,0.2)
 
@@ -113,7 +114,6 @@ nav
 
     COLOR = DARK
 
     COLOR = DARK
 
     background: COLOR
 
     background: COLOR
 
     box-shadow 0 2px 0 rgba(0,0,0,0.15)
 
     box-shadow 0 2px 0 rgba(0,0,0,0.15)
 
-
 
     &.icons
 
     &.icons
 
       background: rgba(0,0,0,0.8)
 
       background: rgba(0,0,0,0.8)
 
       & > a
 
       & > a
 
@@ -200,7 +200,7 @@ nav
 
 /* -------------------------- TAG -------------------------- */
 
 /* -------------------------- TAG -------------------------- */
 
 .tag:not(.icon)
 
 .tag:not(.icon)
 
   color: #fff
 
   color: #fff
 
-  border-radius 2px
 
+  border-radius BORDER_radius
 
   font-weight: 700 !important
 
   font-weight: 700 !important
 
   &.count
 
   &.count
 
     background-color: THEME
 
     background-color: THEME
 
@@ -245,14 +245,14 @@ header
 
     color: #fff
 
     color: #fff
 
     background-color: THEME_dark
 
     background-color: THEME_dark
 
     box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
 
     box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
 
-    border-radius 4px
 
+    border-radius (BORDER_radius * 2)
 
     &:active
 
     &:active
 
       background-color: darken(THEME, 40%)
 
       background-color: darken(THEME, 40%)
 
 
 
 article
 
 article
 
   & .button, button
 
   & .button, button
 
     color: #fff !important
 
     color: #fff !important
 
-    border-radius 2px
 
+    border-radius BORDER_radius
 
     box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
 
     box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
 
     border: solid 1px rgba(0,0,0,0.1)
 
     border: solid 1px rgba(0,0,0,0.1)
 
     &:active
 
     &:active
 
@@ -282,7 +282,11 @@ article
 
 
 
 
 
 /* -------------------------- FORMS -------------------------- */
 
 /* -------------------------- FORMS -------------------------- */
 
-FORM_border_color = #e5e5e5
 
+.splash fieldset
 
+  &:first-child
 
+    border-radius BORDER_radius BORDER_radius 0px 0px
 
+  &:last-child
 
+    border-radius 0px 0px BORDER_radius BORDER_radius
 
 
 
 form, .form
 
 form, .form
 
   & label
 
   & label
 
@@ -303,21 +307,19 @@ form, .form
 
       background-color: lighten(COLOR_cancel, 75%)
 
       background-color: lighten(COLOR_cancel, 75%)
 
       font-weight: 700
 
       font-weight: 700
 
     &:focus, &:active, &:hover
 
     &:focus, &:active, &:hover
 
-      background: lighten(THEME, 95%)
 
-      color: rgba(0, 0, 0, 0.75)
 
+      color: THEME_dark
 
     &[disabled]
 
     &[disabled]
 
-      background: darken(FORM_border_color, 10%)
 
+      background: darken(FORM_color, 10%)
 
       color: #999
 
       color: #999
 
     &.large
 
     &.large
 
       font-weight: 700
 
       font-weight: 700
 
 
 
-
 
   & .select:after
 
   & .select:after
 
-    background: darken(FORM_border_color, 10%)
 
+    background: darken(FORM_color, 10%)
 
     color: #fff
 
     color: #fff
 
 
 
   & input[type=range]
 
   & input[type=range]
 
-    border-radius: 0px
 
+    border-radius 0px
 
     &:not(.checkbox)
 
     &:not(.checkbox)
 
       background-color: #ddd
 
       background-color: #ddd
 
       &:active
 
       &:active
 
@@ -331,15 +333,13 @@ form, .form
 
         background-color: THEME_light
 
         background-color: THEME_light
 
 
 
     &::-webkit-slider-thumb
 
     &::-webkit-slider-thumb
 
-      border-radius: 2px
 
-      background-color: lighten(FORM_border_color, 50%)
 
-      border: solid 1px FORM_border_color
 
+      border-radius BORDER_radius
 
+      background-color: lighten(FORM_color, 50%)
 
+      border: solid 1px FORM_color
 
     &::-webkit-slider-thumb::after
 
     &::-webkit-slider-thumb::after
 
-      background: FORM_border_color
 
-
 
-  & .progress
 
-    & .bar
 
-      background-color: #ddd
 
-      & .value
 
-        background-color: THEME_light
 
+      background: FORM_color
 
 
 
+  & .progress .bar
 
+    background-color: #ddd
 
+    & .value
 
+      background-color: THEME_light