New style for lists

kitchen-sink/app/asides/features.html

@@ -112,11 +112,11 @@
                 </a>
             </li>
 
-            <!-- Colours -->
+            <!-- Buttons & Colours -->
             <li>
                 <a href="#color" data-router="section" data-title="Colours">
                     <div class="bubble right">14</div>
-                    <strong>Colors</strong>
+                    <strong>Buttons & Colours</strong>
                 </a>
             </li>
 

kitchen-sink/app/sections/list.html

@@ -250,16 +250,20 @@
             </li>
 
             <li class="anchor">With colours</li>
-            <li class="blue">
-                <strong>&lt;li .blue&gt; + &lt;strong&gt; </strong>
+            <li class="theme">
+                <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
                 <small>&lt;small&gt;</small>
             </li>
-            <li class="green">
-                <strong>&lt;li .green&gt; + &lt;strong&gt; </strong>
+            <li class="accept">
+                <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
                 <small>&lt;small&gt;</small>
             </li>
-            <li class="yellow">
-                <strong>&lt;li .yellow&gt; + &lt;strong&gt; </strong>
+            <li class="cancel">
+                <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
+                <small>&lt;small&gt;</small>
+            </li>
+            <li class="secondary">
+                <strong>&lt;li .secondary&gt; + &lt;strong&gt; </strong>
                 <small>&lt;small&gt;</small>
             </li>
         </ul>

kitchen-sink/index.html

@@ -81,13 +81,53 @@
                 <a href="#features" data-router="aside" data-icon="menu"></a>
             </nav>
             <div class="left">
-                <div class="centered title">Lungo</div>
+                <div class="centered title">Recibidos</div>
             </div>
             <nav class="right ">
                 <a href="#features" data-router="aside" data-icon="menu"></a>
             </nav>
         </header>
 
+        <article id="main-article" class="list  scroll">
+            <ul>
+                <li class="feature">
+                    <div class="right  ">15:49</div>
+                    <strong class="text bold">Enrique Amodeo Rubio</strong>
+                    <div class="text small">[madridJS] [JOB] Front Developer Position</div>
+                    <small>
+                        <div class="right bubble blue">tapquo</div>
+                        Hola a todos, nos llega esta oportunida muy inteeresante
+                    </small>
+                </li>
+                <li class="feature">
+                    <div class="right  ">15:49</div>
+                    <strong class="text normal">Enrique Amodeo Rubio</strong>
+                    <small class="text small">[madridJS] [JOB] Front Developer Position</small>
+                    <small>
+                        <div class="right bubble red">tapquo</div>
+                        Hola a todos, nos llega esta oportunida muy inteeresante
+                    </small>
+                </li>
+                <li class="feature">
+                    <strong class="text bold">Open Source Project</strong>
+                    <p class="text thin">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.</p>
+                </li>
+                <li class="feature">
+                    <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.
+                </li>
+                <li class="feature">
+                    <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.
+                </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>
+
+                </li>
+            </ul>
+        </article>
+
         <article id="main-article" class="list indented scroll">
             <ul>
                 <li class="dark">

src/stylesheets/Lungo.layout.article.styl

@@ -29,11 +29,6 @@ article
     transition-property(transform)
     transition-duration(300ms)
 
-  & .text
-    margin: 4px 0 8px
-    display: block
-
-
 header
   &:not(.extended) ~ article
     top: HEADER_FOOTER_HEIGHT

src/stylesheets/Lungo.layout.list.styl

@@ -13,7 +13,7 @@
 .list
   & li
     list-style-type: none
-    padding: 9px
+    padding: 10px
     position: relative
 
     &, & a, & small, & .right
@@ -70,12 +70,11 @@
         margin-top: -12px
 
     & small, &.anchor, & .right
-      font-size: 0.9em
+      font-size: FONT_SIZE_SMALL
 
 
   & .bubble
-    padding-left: 4px
-    padding-right: 4px
+    padding: 1px 5px 3px 5px
 
   & .loading .right
     font-size: 1.0em

src/stylesheets/Lungo.layout.styl

@@ -94,8 +94,7 @@ header
     margin-left: 4px
     float: left
     z-index: -1
-    font-size: FONT_SIZE_BIG
-    font-weight: 400
+    font-size: (FONT_SIZE_BIG * 1.2)
 
     & img
       height: 24px

src/stylesheets/Lungo.widgets.button.styl

@@ -10,42 +10,45 @@
 @import "import/constants.styl"
 @import "import/vendor.styl"
 
-.button, button
-  display: inline-block
-  padding: 10px 16px
-  border: none
-  cursor: pointer
-
-  color: #fff !important
-  font-family: inherit
-  font-size: 1.05em
-  font-weight: 400
-  text-align: center
-  text-decoration: none
-  outline: none
-
-  &:disabled, &.disabled
-    background: rgba(255,255,255,0.2)
-    color: #999 !important
-
-  & .icon
-    margin-right: 4px
-
-  &.anchor
-    width: 100%
-    margin-bottom: 4px
+
+:not(header)
+  & .button, button
+    display: inline-block
+    padding: 10px 16px
+    border: none
+    cursor: pointer
+
+    color: #fff !important
+    font-family: inherit
+    font-size: 1.05em
+    font-weight: 400
+    text-align: center
+    text-decoration: none
+    outline: none
+
+    &:disabled, &.disabled
+      background: rgba(255,255,255,0.2)
+      color: #999 !important
+
     & .icon
-      margin-left: 8px
-      float: left
-
-  &.large
-    height: h = 52px
-    padding: 0 24px
-    font-size: 1.4em
-    line-height: h
-
-  &.small
-    height: h = 28px
-    padding: 0 12px
-    font-size: 0.9em
-    line-height: (h - 2)
+      margin-right: 4px
+      font-size: FONT_SIZE_BIG
+
+    &.anchor
+      width: 100%
+      position: relative
+      & .icon
+        position: absolute
+        left: 8px
+
+    &.large
+      height: h = 52px
+      padding: 0 24px
+      font-size: 1.4em
+      line-height: h
+
+    &.small
+      height: h = 28px
+      padding: 0 12px
+      font-size: 0.9em
+      line-height: (h - 2)

src/stylesheets/Lungo.widgets.styl

@@ -62,11 +62,14 @@
   line-height: 13px
   text-align: center
 
+size = 5px
+.margin
+  &.bottom
+    margin-bottom: size
+
 /* ================================  TEXT  ================================ */
 .text
   &.thin
-    font-weight: 200
-  &.book
     font-weight: 300
   &.normal
     font-weight: 400
@@ -87,6 +90,6 @@
   &.align_justify
     text-align: justify
   &.small
-    font-size: 0.9em
+    font-size: FONT_SIZE_SMALL
   &.big
-    font-size: 1.1em
+    font-size: FONT_SIZE_BIG

src/stylesheets/css/Lungo.layout.article.css

@@ -30,10 +30,6 @@ article.pull {
   -moz-transition-duration: 300ms;
   transition-duration: 300ms;
 }
-article .text {
-  margin: 4px 0 8px;
-  display: block;
-}
 header:not(.extended) ~ article {
   top: 44px;
 }

src/stylesheets/css/Lungo.layout.css

@@ -138,8 +138,7 @@ header .title {
   margin-left: 4px;
   float: left;
   z-index: -1;
-  font-size: 1.15em;
-  font-weight: 400;
+  font-size: 1.44em;
 }
 header .title img {
   height: 24px;

src/stylesheets/css/Lungo.layout.list.css

@@ -8,7 +8,7 @@
  */
 .list li {
   list-style-type: none;
-  padding: 9px;
+  padding: 10px;
   position: relative;
 }
 .list li,
@@ -61,7 +61,7 @@
 }
 .list li strong {
   position: relative;
-  font-size: 1.15em;
+  font-size: 1.2em;
   font-weight: 400;
 }
 .list li small {
@@ -79,8 +79,7 @@
   font-size: 0.9em;
 }
 .list .bubble {
-  padding-left: 4px;
-  padding-right: 4px;
+  padding: 1px 5px 3px 5px;
 }
 .list .loading .right {
   font-size: 1em;

src/stylesheets/css/Lungo.widgets.button.css

@@ -6,8 +6,8 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-.button,
-button {
+:not(header) .button,
+:not(header) button {
   display: inline-block;
   padding: 10px 16px;
   border: none;
@@ -20,36 +20,37 @@ button {
   text-decoration: none;
   outline: none;
 }
-.button:disabled,
-button:disabled,
-.button.disabled,
-button.disabled {
+:not(header) .button:disabled,
+:not(header) button:disabled,
+:not(header) .button.disabled,
+:not(header) button.disabled {
   background: rgba(255,255,255,0.2);
   color: #999 !important;
 }
-.button .icon,
-button .icon {
+:not(header) .button .icon,
+:not(header) button .icon {
   margin-right: 4px;
+  font-size: 1.2em;
 }
-.button.anchor,
-button.anchor {
+:not(header) .button.anchor,
+:not(header) button.anchor {
   width: 100%;
-  margin-bottom: 4px;
+  position: relative;
 }
-.button.anchor .icon,
-button.anchor .icon {
-  margin-left: 8px;
-  float: left;
+:not(header) .button.anchor .icon,
+:not(header) button.anchor .icon {
+  position: absolute;
+  left: 8px;
 }
-.button.large,
-button.large {
+:not(header) .button.large,
+:not(header) button.large {
   height: 52px;
   padding: 0 24px;
   font-size: 1.4em;
   line-height: 52px;
 }
-.button.small,
-button.small {
+:not(header) .button.small,
+:not(header) button.small {
   height: 28px;
   padding: 0 12px;
   font-size: 0.9em;

src/stylesheets/css/Lungo.widgets.css

@@ -63,11 +63,11 @@
   line-height: 13px;
   text-align: center;
 }
+.margin.bottom {
+  margin-bottom: 5px;
+}
 /* ================================  TEXT  ================================ */
 .text.thin {
-  font-weight: 200;
-}
-.text.book {
   font-weight: 300;
 }
 .text.normal {
@@ -101,5 +101,5 @@
   font-size: 0.9em;
 }
 .text.big {
-  font-size: 1.1em;
+  font-size: 1.2em;
 }

src/stylesheets/import/constants.styl

@@ -13,22 +13,5 @@ ASIDE_WIDTH_SMALL = 64px
 DEFAULT_TRANSITION = easeOutSine
 
 
-FONT_SIZE_BIG   = 1.15em
+FONT_SIZE_BIG   = 1.2em
 FONT_SIZE_SMALL = 0.9em
-
-/* COLORS */
-WHITE =             #fff
-BLACK =             #000
-GREY =              #ccc
-RED =               #e33100
-LIGHTGREEN =        #91bd09
-GREEN =             #009600
-BLUE =              #237fd7
-ARCTICBLUE =        #2daebf
-ORANGE =            #ff5c00
-PURPLE =            #7b658d
-MAGENTA =           #a9014b
-PINK =              #ff007f
-YELLOW =            #ffb515
-TWITTER =           #35cdff
-FACEBOOK =          #3b5998

src/stylesheets/import/css/constants.css

@@ -1,2 +1 @@
 /* DIMENSIONS */
-/* COLORS */