Remove .bubble class to .tag

kitchen-sink/app/asides/features.html

@@ -12,7 +12,7 @@
             <!-- Layout & Navigation -->
             <li>
                 <a href="#layout" data-router="section">
-                    <div class="bubble right">5</div>
+                    <div class="tag secondary right">5</div>
                     <strong>Layout</strong>
                 </a>
             </li>
@@ -27,7 +27,7 @@
             <!-- Forms -->
             <li>
                 <a href="#form" data-router="section">
-                    <div class="bubble right">8</div>
+                    <div class="tag right">8</div>
                     <strong>Form Elements</strong>
                 </a>
             </li>
@@ -35,7 +35,7 @@
             <!-- Asides -->
             <li>
                 <a href="#aside" data-router="section">
-                    <div class="bubble right">8</div>
+                    <div class="tag right">8</div>
                     <strong>Asides</strong>
                 </a>
             </li>
@@ -43,7 +43,7 @@
             <!-- Data-Attributes -->
             <li>
                 <a href="#data" data-router="section">
-                    <div class="bubble right">9</div>
+                    <div class="tag right">9</div>
                     <strong>Data-attributes</strong>
                 </a>
             </li>
@@ -51,7 +51,7 @@
             <!-- Icons -->
             <li>
                 <a href="#icon" data-router="section">
-                    <div class="bubble right">109</div>
+                    <div class="tag right">109</div>
                     <strong>Icons</strong>
                 </a>
             </li>
@@ -59,7 +59,7 @@
             <!-- Scrolls -->
             <li>
                 <a href="#scroll" data-router="section">
-                    <div class="bubble right">2</div>
+                    <div class="tag right">2</div>
                     <strong>Scrolls</strong>
                 </a>
             </li>
@@ -67,7 +67,7 @@
             <!-- Touch Events -->
             <li>
                 <a href="#touchevents" data-router="section">
-                    <div class="bubble right">19</div>
+                    <div class="tag right">19</div>
                     <strong>Touch Events</strong>
                 </a>
             </li>
@@ -75,7 +75,7 @@
             <!-- Layout Events -->
             <li>
                 <a href="#layoutevents" data-router="section">
-                    <div class="bubble right">2</div>
+                    <div class="tag right">2</div>
                     <strong>Layout Events</strong>
                 </a>
             </li>
@@ -83,7 +83,7 @@
             <!-- Notifications -->
             <li>
                 <a href="#notification" data-router="section">
-                    <div class="bubble right">8</div>
+                    <div class="tag right">8</div>
                     <strong>Notifications</strong>
                 </a>
             </li>
@@ -91,7 +91,7 @@
             <!-- Pull & Refresh -->
             <li>
                 <a href="#pull" data-router="section">
-                    <div class="bubble right">1</div>
+                    <div class="tag right">1</div>
                     <strong>Pull & Refresh</strong>
                 </a>
             </li>
@@ -99,7 +99,7 @@
             <!-- Carousel -->
             <li>
                 <a href="#carousel" data-router="section">
-                    <div class="bubble right">1</div>
+                    <div class="tag right">1</div>
                     <strong>Carousel</strong>
                 </a>
             </li>
@@ -107,7 +107,7 @@
             <!-- Environment -->
             <li>
                 <a href="#environment" data-router="section">
-                    <div class="bubble right">1</div>
+                    <div class="tag right">1</div>
                     <strong>Environment</strong>
                 </a>
             </li>
@@ -115,7 +115,7 @@
             <!-- Buttons & Colours -->
             <li>
                 <a href="#color" data-router="section" data-title="Colours">
-                    <div class="bubble right">14</div>
+                    <div class="tag right">14</div>
                     <strong>Buttons & Colours</strong>
                 </a>
             </li>

kitchen-sink/app/events.trigger.js

@@ -5,6 +5,6 @@ Lungo.Events.init({
 });
 
 Lungo.ready(function() {
-    Lungo.View.Aside.show('features');
+    // Lungo.View.Aside.show('features');
     App.environment();
 });

kitchen-sink/index.html

@@ -56,7 +56,6 @@
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.splash.css">
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.button.css">
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.form.css">
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.colour.css">
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.icon.css">
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.icon.brand.css">
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.loading.css">
@@ -76,7 +75,7 @@
 
 <body class="app">
     <section id="main" data-transition="slide">
-        <header  class="">
+        <header>
             <nav class="left box">
                 <a href="#features" data-router="aside" data-icon="menu"></a>
             </nav>
@@ -95,7 +94,7 @@
                     <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>
+                        <div class="right tag secondary">tapquo</div>
                         Hola a todos, nos llega esta oportunida muy inteeresante
                     </small>
                 </li>
@@ -104,7 +103,7 @@
                     <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>
+                        <div class="right tag cancel">tapquo</div>
                         Hola a todos, nos llega esta oportunida muy inteeresante
                     </small>
                 </li>

src/attributes/Lungo.Attributes.Data.js

@@ -17,7 +17,7 @@ Lungo.Attributes.Data = {
     Count: {
         tag: 'count',
         selector: '*',
-        html: '<span class="bubble count">{{value}}</span>'
+        html: '<span class="tag theme count">{{value}}</span>'
     },
     Pull: {
         tag: 'pull',

src/stylesheets/Lungo.layout.aside.styl

@@ -46,7 +46,7 @@ aside
     position: absolute
     bottom: 0
 
-  & .bubble
+  & .tag
     float: right
 
   &.small
@@ -64,7 +64,7 @@ aside
           width: inherit
           line-height: ASIDE_WIDTH_SMALL
 
-        & .bubble
+        & .tag
           position: relative
           top: -54px
           right: 6px

src/stylesheets/Lungo.layout.list.styl

@@ -53,7 +53,7 @@
       padding: 2px 10px
       & .icon.small
         margin-right: 2px
-      & .bubble
+      & .tag
         display: none
 
     & strong
@@ -73,8 +73,9 @@
       font-size: FONT_SIZE_SMALL
 
 
-  & .bubble
-    padding: 1px 5px 3px 5px
+  & .tag
+    margin-top: 1px
+    padding: 1px 3px 3px 3px
 
   & .loading .right
     font-size: 1.0em

src/stylesheets/Lungo.layout.nav.styl

@@ -35,7 +35,7 @@ nav
         height: 16px
         top: -1px !important
 
-      & .bubble
+      & .tag
         position: relative
         top:  -12px
         left: -12px
@@ -83,7 +83,8 @@ nav
           font-size: 1.0em
           margin-right: 2px
 
-      & .bubble
+      & .tag
+          padding: 1px 3px 3px 3px
           position: relative
           top: -1px
           left: 2px
@@ -102,9 +103,11 @@ nav
       width: 32px
       display: inline-block
 
-    & .bubble
+    & .tag
       top:  -42px
       left: 4px
+      padding: 1px 3px 3px 3px
+
       & .loading
         top: 0
         font-size: 1.4em
@@ -112,7 +115,7 @@ nav
     abbr
       display: none
 
-    & .bubble
+    & .tag
       position: relative
       top:  -12px
       left: -12px

src/stylesheets/Lungo.theme.default.styl

@@ -137,7 +137,7 @@ header nav
 
 
 section > nav.groupbar
-  background-color: THEME-dark
+  background-color: THEME_dark
   & > a.current
     box-shadow inset 0 -3px 0 THEME
 
@@ -190,7 +190,7 @@ LIST-color-secondary = #555
         &, & a
           color: #fff !important
 
-      & small, & .right:not(.bubble)
+      & small, & .right:not(.tag)
         color: LIST-color-secondary
 
   &:not(.indented) li
@@ -227,6 +227,16 @@ LIST-color-secondary = #555
   &[disabled]
     background-color: black
 
+button, .button, .tag
+  &.theme
+    background-color: THEME
+  &.secondary
+    background-color: COLOR_SECONDARY
+  &.accept
+    background-color: COLOR_ACCEPT
+  &.cancel
+    background-color: COLOR_CANCEL
+
 FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
 FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
 FORM_border_color = #D0D4C6
@@ -302,20 +312,18 @@ form, .form
           font-size: 12px
 
 
-.bubble
+.tag
   color: #fff
   border-radius 2px
+  font-weight: 400 !important
   &.count
     background: THEME
   header .count
     background: THEME-dark !important
-  footer .bubble
+  footer &
     box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
-  article .list .bubble
+  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)
-  aside
-    .list .bubble
-      background: rgba(0,0,0,0.25)
 
 .notification
   color: #fff
@@ -336,7 +344,3 @@ form, .form
         background: #000
         border: solid 2px #fff
         box-shadow: 0 0 4px black
-
-
-
-

src/stylesheets/Lungo.widgets.styl

@@ -53,13 +53,10 @@
 .round
   border-radius( 4px )
 
-.bubble
+.tag
   display: inline-block
-  padding: 2px 3px
-  min-width: 12px
-  font-size: 0.75em
-  font-weight: bold
-  line-height: 13px
+  font-size: FONT_SIZE_SMALL
+  line-height: FONT_SIZE_BIG
   text-align: center
 
 size = 5px

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

@@ -52,7 +52,7 @@ aside footer {
   position: absolute;
   bottom: 0;
 }
-aside .bubble {
+aside .tag {
   float: right;
 }
 aside.small {
@@ -73,7 +73,7 @@ aside.small nav a .icon {
   width: inherit;
   line-height: 64px;
 }
-aside.small nav a .bubble {
+aside.small nav a .tag {
   position: relative;
   top: -54px;
   right: 6px;

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

@@ -56,7 +56,7 @@
 .list li.anchor .icon.small {
   margin-right: 2px;
 }
-.list li.anchor .bubble {
+.list li.anchor .tag {
   display: none;
 }
 .list li strong {
@@ -78,8 +78,9 @@
 .list li .right {
   font-size: 0.9em;
 }
-.list .bubble {
-  padding: 1px 5px 3px 5px;
+.list .tag {
+  margin-top: 1px;
+  padding: 1px 3px 3px 3px;
 }
 .list .loading .right {
   font-size: 1em;

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

@@ -40,7 +40,7 @@ header nav a img {
   height: 16px;
   top: -1px !important;
 }
-header nav a .bubble {
+header nav a .tag {
   position: relative;
   top: -12px;
   left: -12px;
@@ -91,7 +91,8 @@ nav.groupbar > a .icon {
   font-size: 1em;
   margin-right: 2px;
 }
-nav.groupbar > a .bubble {
+nav.groupbar > a .tag {
+  padding: 1px 3px 3px 3px;
   position: relative;
   top: -1px;
   left: 2px;
@@ -108,18 +109,19 @@ footer nav .icon {
   width: 32px;
   display: inline-block;
 }
-footer nav .bubble {
+footer nav .tag {
   top: -42px;
   left: 4px;
+  padding: 1px 3px 3px 3px;
 }
-footer nav .bubble .loading {
+footer nav .tag .loading {
   top: 0;
   font-size: 1.4em;
 }
 footer nav abbr {
   display: none;
 }
-footer nav .bubble {
+footer nav .tag {
   position: relative;
   top: -12px;
   left: -12px;

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

@@ -145,7 +145,7 @@ header nav.button a:active {
   background: rgba(0,0,0,0.2);
 }
 section > nav.groupbar {
-  background-color: THEME-dark;
+  background-color: #222;
 }
 section > nav.groupbar > a.current {
   -webkit-box-shadow: inset 0 -3px 0 #0093d5;
@@ -235,8 +235,8 @@ nav.groupbar > a.current {
 }
 .list li small,
 .list li a small,
-.list li .right:not(.bubble),
-.list li a .right:not(.bubble) {
+.list li .right:not(.tag),
+.list li a .right:not(.tag) {
   color: #555;
 }
 .list:not(.indented) li.dark,
@@ -294,6 +294,26 @@ button.cancel {
 button[disabled] {
   background-color: #000;
 }
+button.theme,
+.button.theme,
+.tag.theme {
+  background-color: #0093d5;
+}
+button.secondary,
+.button.secondary,
+.tag.secondary {
+  background-color: #ccc;
+}
+button.accept,
+.button.accept,
+.tag.accept {
+  background-color: #009600;
+}
+button.cancel,
+.button.cancel,
+.tag.cancel {
+  background-color: #e33100;
+}
 form label,
 .form label {
   color: #999;
@@ -508,31 +528,29 @@ form .progress .bar .value .label,
   text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
   font-size: 12px;
 }
-.bubble {
+.tag {
   color: #fff;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
+  font-weight: 400 !important;
 }
-.bubble.count {
+.tag.count {
   background: #0093d5;
 }
-.bubble header .count {
+.tag header .count {
   background: THEME-dark !important;
 }
-.bubble footer .bubble {
+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);
 }
-.bubble article .list .bubble {
+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);
 }
-.bubble aside .list .bubble {
-  background: rgba(0,0,0,0.25);
-}
 .notification {
   color: #fff;
 }

src/stylesheets/css/Lungo.widgets.css

@@ -54,13 +54,10 @@
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
-.bubble {
+.tag {
   display: inline-block;
-  padding: 2px 3px;
-  min-width: 12px;
-  font-size: 0.75em;
-  font-weight: bold;
-  line-height: 13px;
+  font-size: 0.9em;
+  line-height: 1.2em;
   text-align: center;
 }
 .margin.bottom {