Enhanced tags

kitchen-sink/app/asides/features.html

@@ -8,11 +8,16 @@
     <article class="list scroll">
         <ul>
             <!-- Basic Layout -->
-            <li class="current">
+            <li>
                 <a href="#main-article" data-router="article">
                     <strong>Meet the framework</strong>
                 </a>
             </li>
+            <li class="current">
+                <a href="#second-article" data-router="article">
+                    <strong>Meet the framework</strong>
+                </a>
+            </li>
 
             <!-- Layout & Navigation -->
             <li>

kitchen-sink/app/sections/layout.html

@@ -10,7 +10,7 @@
 
     <nav class="groupbar">
         <a href="#layout-art1" data-router="article" class="current" data-label="Profile"></a>
-        <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="3"></a>
+        <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="19"></a>
         <a href="#layout-art3" data-router="article" data-label="Map"></a>
         <a href="#layout-art4" data-router="article" data-label="Settings"></a>
     </nav>
@@ -18,7 +18,7 @@
     <footer>
         <nav>
             <a href="#layout-art1" data-router="article" class="current" data-icon="home"></a>
-            <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="3"></a>
+            <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="80"></a>
             <a href="#layout-art3" data-router="article" data-icon="compass"></a>
             <a href="#layout-art4" data-router="article" data-icon="settings"></a>
         </nav>

kitchen-sink/app/sections/list.html

@@ -81,7 +81,7 @@
 
             <li>
                 <a href="#">
-                    <div class="right bubble blue">.right.bubble</div>
+                    <div class="right tag blue">.right.tag</div>
                     <strong>&lt;strong&gt; element</strong>
                     <small>with &lt;small&gt; element</small>
                 </a>
@@ -89,7 +89,7 @@
 
             <li>
                 <a href="#">
-                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
+                    <div class="right tag blue" data-icon="clock">.right data-icon</div>
                     <strong>&lt;strong&gt; element</strong>
                     <small>with &lt;small&gt; element</small>
                 </a>
@@ -208,7 +208,7 @@
 
             <li>
                 <a href="#">
-                    <div class="right bubble blue">.right.bubble</div>
+                    <div class="right tag blue">.right.tag</div>
                     <strong>&lt;strong&gt; element</strong>
                     <small>with &lt;small&gt; element</small>
                 </a>
@@ -216,7 +216,7 @@
 
             <li>
                 <a href="#">
-                    <div class="right bubble blue" data-icon="clock">.right data-icon</div>
+                    <div class="right tag blue" data-icon="clock">.right data-icon</div>
                     <strong>&lt;strong&gt; element</strong>
                     <small>with &lt;small&gt; element</small>
                 </a>

kitchen-sink/index.html

@@ -82,14 +82,14 @@
             </nav>
         </header>
 
-        <article id="main-article" class="list  scroll">
+        <article id="second-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 tag ">tapquo</div>
+                        <div class="right tag ">theme</div>
                         Hola a todos, nos llega esta oportunida muy inteeresante
                     </small>
                 </li>
@@ -98,11 +98,12 @@
                     <strong class="text normal">Enrique Amodeo Rubio</strong>
                     <small class="text small">[madridJS] [JOB] Front Developer Position</small>
                     <small>
-                        <div class="right tag cancel">tapquo</div>
+                        <div class="right tag cancel">important</div>
                         Hola a todos, nos llega esta oportunida muy inteeresante
                     </small>
                 </li>
                 <li class="feature">
+                    <div class="right tag accept">sended</div>
                     <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>
@@ -117,7 +118,7 @@
 
                 <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>
-
+                    <button data-icon="brand twitter" class="anchor theme" data-label="Tweet me"></button>
                 </li>
             </ul>
         </article>

src/attributes/Lungo.Attributes.Data.js

@@ -35,7 +35,7 @@ Lungo.Attributes.Data = {
     },
     Label: {
         tag: 'label',
-        selector: 'a',
+        selector: 'a, button',
         html: '<abbr>{{value}}</abbr>'
     },
     Icon: {

src/stylesheets/Lungo.layout.aside.styl

@@ -46,9 +46,6 @@ aside
     position: absolute
     bottom: 0
 
-  & .tag
-    float: right
-
   &.small
     width: ASIDE_WIDTH_SMALL
     & nav

src/stylesheets/Lungo.layout.list.styl

@@ -51,8 +51,6 @@
 
     &.anchor
       padding: 2px 10px
-      & .icon.small
-        margin-right: 2px
       & .tag
         display: none
 
@@ -69,14 +67,9 @@
       & + .right
         margin-top: -12px
 
-    & small, &.anchor, & .right
+    & small, &.anchor, & .right:not(.tag)
       font-size: FONT_SIZE_SMALL
 
-
-  & .tag
-    margin-top: 1px
-    padding: 1px 3px 3px 3px
-
   & .loading .right
     font-size: 1.0em
 

src/stylesheets/Lungo.layout.nav.styl

@@ -82,7 +82,6 @@ nav
           margin-right: 2px
 
       & .tag
-          padding: 1px 3px 3px 3px
           position: relative
           top: -1px
           left: 2px
@@ -104,8 +103,6 @@ nav
     & .tag
       top:  -42px
       left: 4px
-      padding: 1px 3px 3px 3px
-
       & .loading
         top: 0
         font-size: 1.4em

src/stylesheets/Lungo.theme.default.styl

@@ -22,6 +22,7 @@ DARK            = #222
 DARK_light      = lighten(DARK, 25%)
 DARK_dark       = darken(DARK, 15%)
 DARK_darkest    = darken(DARK, 30%)
+FORM_radius     = 1px
 LIST_color      = #333
 LIST_color_2nd  = lighten(LIST_color, 35%)
 LIST_border     = lighten(LIST_color, 90%)
@@ -32,7 +33,6 @@ THEME_light     = lighten(THEME, 15%)
 THEME_dark      = darken(THEME, 15%)
 //?
 COLOR = #484a49
-FORM_border_radius = 1px
 
 
 body
@@ -161,10 +161,13 @@ nav
 
   aside & li
     background: none
-    border-bottom-color: DARK
+    &:not(:first-child)
+      border-top: solid 1px  DARK
+    &:not(:last-child)
+      border-bottom: solid 1px DARKEST
     &.current
       background: THEME
-      border-bottom-color: transparent
+      border-color: transparent
       & strong, & small, & .icon
         color: #fff
     & strong
@@ -177,16 +180,13 @@ nav
 .tag
   color: #fff
   border-radius 2px
-  font-weight: 400 !important
+  font-weight: 700 !important
   &.count
-    background: THEME
+    background-color: THEME
   header .count
-    background: THEME-dark !important
+    background-color: THEME-dark !important
   footer &
     box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
-  article .list &
-    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)
-
 
 /* -------------------------- NOTIFICATION -------------------------- */
 .notification
@@ -271,12 +271,12 @@ form, .form
   & .select:after
     background: FORM_border_color
     color: white
-    border-top-right-radius: FORM_border_radius
-    border-bottom-right-radius: FORM_border_radius
+    border-top-right-radius: FORM_radius
+    border-bottom-right-radius: FORM_radius
 
   & input[type=range]
     box-shadow  FORM_shadow_form
-    border-radius FORM_border_radius
+    border-radius FORM_radius
 
     &:not(.checkbox)
       background-color: #c7c7c7
@@ -314,4 +314,3 @@ form, .form
           color: rgba(0,0,0,0.6)
           text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important
           font-size: 12px
-

src/stylesheets/Lungo.widgets.styl

@@ -53,10 +53,12 @@
 .round
   border-radius( 4px )
 
+/* ================================  TAG  ================================ */
 .tag
   display: inline-block
-  font-size: FONT_SIZE_SMALL
-  line-height: FONT_SIZE_BIG
+  padding: 0 3px
+  font-size: FONT_SIZE_TINY
+  line-height: 1.3em
   text-align: center
 
 size = 5px

src/stylesheets/css/Lungo.layout.aside.css

@@ -52,9 +52,6 @@ aside footer {
   position: absolute;
   bottom: 0;
 }
-aside .tag {
-  float: right;
-}
 aside.small {
   width: 64px;
 }

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

@@ -53,9 +53,6 @@
 .list li.anchor {
   padding: 2px 10px;
 }
-.list li.anchor .icon.small {
-  margin-right: 2px;
-}
 .list li.anchor .tag {
   display: none;
 }
@@ -75,13 +72,9 @@
 }
 .list li small,
 .list li.anchor,
-.list li .right {
+.list li .right:not(.tag) {
   font-size: 0.9em;
 }
-.list .tag {
-  margin-top: 1px;
-  padding: 1px 3px 3px 3px;
-}
 .list .loading .right {
   font-size: 1em;
 }

src/stylesheets/css/Lungo.layout.nav.css

@@ -89,7 +89,6 @@ nav.groupbar > a .icon {
   margin-right: 2px;
 }
 nav.groupbar > a .tag {
-  padding: 1px 3px 3px 3px;
   position: relative;
   top: -1px;
   left: 2px;
@@ -109,7 +108,6 @@ footer nav .icon {
 footer nav .tag {
   top: -42px;
   left: 4px;
-  padding: 1px 3px 3px 3px;
 }
 footer nav .tag .loading {
   top: 0;

src/stylesheets/css/Lungo.theme.default.css

@@ -225,11 +225,16 @@ section .list li a .right:not(.tag) {
 }
 aside .list li {
   background: none;
-  border-bottom-color: #222;
+}
+aside .list li:not(:first-child) {
+  border-top: solid 1px #222;
+}
+aside .list li:not(:last-child) {
+  border-bottom: solid 1px #141414;
 }
 aside .list li.current {
   background: #0093d5;
-  border-bottom-color: transparent;
+  border-color: transparent;
 }
 aside .list li.current strong,
 aside .list li.current small,
@@ -249,24 +254,19 @@ aside .list li .icon {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
-  font-weight: 400 !important;
+  font-weight: 700 !important;
 }
 .tag.count {
-  background: #0093d5;
+  background-color: #0093d5;
 }
 .tag header .count {
-  background: THEME-dark !important;
+  background-color: THEME-dark !important;
 }
 footer .tag {
   -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
   -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
   box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
 }
-article .list .tag {
-  -webkit-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);
-  -moz-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);
-  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);
-}
 /* -------------------------- NOTIFICATION -------------------------- */
 .notification {
   color: #fff;

src/stylesheets/css/Lungo.widgets.css

@@ -54,10 +54,12 @@
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
+/* ================================  TAG  ================================ */
 .tag {
   display: inline-block;
-  font-size: 0.9em;
-  line-height: 1.2em;
+  padding: 0 3px;
+  font-size: 11px;
+  line-height: 1.3em;
   text-align: center;
 }
 .margin.bottom {

src/stylesheets/import/constants.styl

@@ -5,13 +5,13 @@ HEADER_GROUPBAR_HEIGHT = 30px
 ARTICLE_BOTTOM = (HEADER_FOOTER_HEIGHT - 1)
 ARTICLE_WITH_HEADER_EXTENDED = (HEADER_FOOTER_HEIGHT + HEADER_GROUPBAR_HEIGHT)
 
-BORDER_RADIUS = 2px
+ASIDE_WIDTH         = 264px
+ASIDE_WIDTH_SMALL   = 64px
 
-ASIDE_WIDTH = 264px
-ASIDE_WIDTH_SMALL = 64px
+BORDER_RADIUS       = 2px
 
-DEFAULT_TRANSITION = easeOutSine
+DEFAULT_TRANSITION  = easeOutSine
 
-
-FONT_SIZE_BIG   = 1.2em
-FONT_SIZE_SMALL = 0.9em
+FONT_SIZE_TINY      = 11px
+FONT_SIZE_SMALL     = 0.9em
+FONT_SIZE_BIG       = 1.2em