Changes on theme

example/components.html

@@ -61,30 +61,34 @@
             <nav class="on-left">
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
             </nav>
-            <h1 class="title">Brownie <span class="tag count">2.2</span></h1>
+            <h1 class="title centered">
+                Brownie
+                <!--<span class="tag count">2.2</span>-->
+            </h1>
 
             <nav class="on-right">
-                         <!--
                 <a href="#" class="button" data-icon="inbox" data-count="19"></a>
                 <button data-icon="share"></button>
+                         <!--
 
                 <a href="#" data-icon="menu" data-loading="white"></a>
                 <button data-label="send" data-icon="envelope"></button>
                 <button data-label="send"></button>
-                -->
+
                 <a href="#" class="button" data-view-menu="options" data-icon="menu"></a>
                 <a href="#" class="button" data-view-menu="options-icons" data-icon="grid"></a>
+                -->
+
             </nav>
         </header>
 
         <nav data-control="groupbar">
             <a href="#" data-view-article="layout-art1" data-icon="user" data-label="Profile" class="active"></a>
-            <a href="#" data-view-article="layout-art2" data-label="Inbox" data-count="19"></a>
+            <a href="#" data-view-article="layout-art2" data-label="Inbox" data-count="6"></a>
             <a href="#" data-view-article="layout-art3" data-label="Comments"></a>
             <a href="#" data-view-article="layout-art4" data-label="Settings"></a>
         </nav>
 
-
         <nav id="options" data-control="menu">
             <a href="#" data-view-article="layout-art1" data-icon="user" class="active" data-label="Profile"></a>
             <a href="#" data-view-article="layout-art2" data-icon="inbox" data-label="Inbox" data-count="80"></a>
@@ -101,6 +105,141 @@
 
         <article id="layout-art2" class="list scroll ">
 
+            <ul>
+                <li class="selectable">
+                    <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>
+                </li>
+
+                <li>
+                    <a href="#">
+                        <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
+                    </a>
+                </li>
+
+                <li>
+                    <strong>&lt;li&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+
+                <li class="anchor contrast">colors</li>
+
+                <li class="dark">
+                    <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+
+                <li class="theme">
+                    <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+
+                <li class="arrow light">
+                    <strong>&lt;li .arrow.light&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+
+                <li class="anchor contrast">.arrow class</li>
+
+                <li class="arrow">
+                    <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                </li>
+
+                <li class="arrow">
+                    <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                    <small>&lt;small&gt;</small>
+                </li>
+
+
+                <li class="anchor contrast">.right element</li>
+
+                <li>
+                    <a href="#">
+                        <div class="on-right">.right</div>
+                        <strong>&lt;strong&gt; element</strong>
+                        <small>with &lt;small&gt; element</small>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="#">
+                        <strong>&lt;strong&gt; element</strong>
+                        <small>with &lt;small&gt; element</small>
+                        <div class="on-right">.right</div>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="#">
+                        <div class="on-right tag blue">.right.tag</div>
+                        <strong>&lt;strong&gt; element</strong>
+                        <small>with &lt;small&gt; element</small>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="#">
+                        <div class="on-right" data-icon="globe">.right data-icon</div>
+                        <strong>&lt;strong&gt; element</strong>
+                        <small>with &lt;small&gt; element</small>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="#">
+                        <a href="#" class="button small red on-right" data-label="button"></a>
+                        <strong>&lt;strong&gt; element</strong>
+                        <small>with &lt;small&gt; element</small>
+                    </a>
+                </li>
+
+                <li class="anchor contrast">With data-icon or data-image attribute</li>
+                <li class="thumb">
+                    <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
+                    <div>
+                        <div class="on-right text tiny">lorem ipsum</div>
+                        <strong>&lt;strong&gt;</strong>
+                        <span class="text small">
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
+                        </span>
+                    </div>
+                </li>
+
+                <li class="thumb big">
+                    <img src="http://cdn.tapquo.com/lungo/icon-144.png" />
+                    <div>
+                        <div class="on-right text tiny">lorem ipsum</div>
+                        <strong>&lt;strong&gt;</strong>
+                        <span class="text tiny opacity">lorem ipsum</span>
+                        <small>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, aliquam, nisi commodi blanditiis.
+                        </small>
+                    </div>
+                </li>
+
+                <li data-icon="user">
+                    <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+
+                <li class="anchor contrast">With colours</li>
+                <li class="accept">
+                    <strong>&lt;li .accept&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+                <li class="cancel">
+                    <strong>&lt;li .cancel&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+                <li class="warning">
+                    <strong>&lt;li .warning&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+                <li class="color">
+                    <strong>&lt;li .color&gt; + &lt;strong&gt; </strong>
+                    <small>&lt;small&gt;</small>
+                </li>
+            </ul>
         </article>
 
         <article id="layout-art1" class="indented scroll">

src/stylesheets/lungo.base.styl

@@ -134,8 +134,8 @@ img
   vertical-align: middle
   font-size: 0
 
-strong
-  font-weight: 600
+// strong
+//   font-weight: 600
 
 table
   border-collapse: collapse

src/stylesheets/lungo.layout.nav.styl

@@ -12,14 +12,14 @@ nav
   /* ================================= HEADER ================================ */
   /* ========================================================================= */
   header &
-    & a, button /*:not(.button)*/
+    & a, button
       position: relative
       padding: 0 0.75em !important
       float: left
       height: HEADER_HEIGHT
       min-width: HEADER_HEIGHT
       & > .icon
-          font-size: 1.65em
+        font-size: 1.5em
 
     & .tag
       position: absolute

src/stylesheets/lungo.widget.styl

@@ -67,11 +67,14 @@
 
 /* ================================  TAG  ================================ */
 .tag
-  padding: 0 0.33em
+  SIZE = 20px
   font-size: FONT_SIZE_TINY
-  line-height: inherit
+  min-width: SIZE
+  height: SIZE
+  line-height: SIZE !important
   text-align: center
   z-index: 1
+  display: inline-block
 
 
 /* ================================  .LAYOUT  ================================ */

src/stylesheets/theme/__init.styl

@@ -1,17 +1,19 @@
 @import "../CSSmethods/vendor.styl"
 
 /* -------------------------- COLOUR -------------------------- */
+TEXT                = #000
 THEME               = #3498db
-COLOR               = #292929 /* #2C3E50 */
+COLOR               = #F4F4F4
+ASIDE               = #2f2f2f
 DANGER              = #e74c3c
 SUCCESS             = #2ecc71
 WARNING             = #edba22
 DISABLED            = #acb8b9
-BACKGROUND          = lighten(COLOR, 95%)
+BACKGROUND          = #DFDFDF
 /* -------------------------- VARIATIONS -------------------------- */
-LIST_border         = lighten(COLOR, 90%)
-NAV_LINK            = lighten(COLOR, 25%)
-NAV_LINK_ACTIVE     = #FFF
+LIST_border         = darken(COLOR, 15%)
+NAV_LINK            = lighten(ASIDE, 25%)
+NAV_LINK_ACTIVE     = THEME
 /* ------------------------- TRANSITION ------------------------- */
 TRANSITION_time     = 400ms
 TRANSITION_easing   = ease

src/stylesheets/theme/theme.base.styl

@@ -12,9 +12,9 @@
 body
   background-color: #000
   color: COLOR
-  font: 14px/1.25 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
-  font-weight: 400
-  letter-spacing: -0.025em
+  font: 16px/1.25 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-weight: 300
+  letter-spacing: -0.05em
 
   & .text
     &.thin

src/stylesheets/theme/theme.layout.list.styl

@@ -13,31 +13,31 @@
     &:not(.anchor)
       border-bottom: inset 1px LIST_border
     &.color
-      box-shadow: inset 4px00 COLOR
+      box-shadow: inset 4px 0 COLOR
     &.accept
-      box-shadow: inset 4px00 SUCCESS
+      box-shadow: inset 4px 0 SUCCESS
     &.cancel
-      box-shadow: inset 4px00 DANGER
+      box-shadow: inset 4px 0 DANGER
     &.warning
-      box-shadow: inset 4px00 WARNING
+      box-shadow: inset 4px 0 WARNING
     &.arrow::after
       border-color: lighten(COLOR, 75%)
 
     &, a
       &.contrast
-        background: COLOR
+        background: LIST_border
       &.selectable:active, &.theme, &.active
         background: lighten(THEME, 15%)
       &.light
         background: LIST_border
-        color: lighten(COLOR, 20%)
+        color: lighten(TEXT, 50%)
       &.contrast, &.selectable:active, &.theme
         &, small, & .on-right:not(.tag), strong, .arrow::after
           color: #fff
         &.arrow::after
           border-color: #fff
       & small, & .on-right:not(.tag)
-        color: lighten(COLOR, 20%)
+        color: lighten(TEXT, 50%)
 
     &:not(.big) img
       border-radius 4px
@@ -49,13 +49,13 @@
   aside & li
     background: none
     &, & a
-      color: lighten(COLOR, 25%)
+      color: lighten(ASIDE, 50%)
+
     &.active, &:active
-      border-color: transparent
-      background-color: lighten(COLOR, 5%)
+      background-color: lighten(ASIDE, 5%)
       & :not(.icon)
         color: WHITE
       & .icon
         color: THEME
     & small, .icon
-      color: lighten(COLOR, 25%)
+      color: lighten(ASIDE, 20%)

src/stylesheets/theme/theme.layout.nav.styl

@@ -8,32 +8,42 @@
  */
 
 nav
+  section header > &
+    &:not(.on-right)
+      & a, button
+        color: WHITE
+    &.on-right
+      & a, button
+        color: lighten(THEME, 50%)
+    & a, button
+      text-shadow: 0 1px darken(THEME, 10%)
+
+  aside header > &
+    & a, button
+      color: lighten(ASIDE, 25%)
+      text-shadow: 0 1px darken(ASIDE, 10%)
+
   header > &
-    & a:not(.button)
-      color: THEME
-    & .button, button
-      color: lighten(COLOR, 20%)
     & a, button
-      &:active
+      text-shadow: 0 1px darken(THEME, 10%)
+      transition text-shadow TRANSITION_time TRANSITION_easing
+      &:active, &.active
         color: WHITE
-        text-shadow: 0 0 1em WHITE
+        text-shadow: 0 0 0.5em WHITE
 
   section > footer > & > a, &[data-control=groupbar] > a
     color: NAV_LINK
+    transition box-shadow TRANSITION_time TRANSITION_easing
     & .icon
-      text-shadow: 0 1px darken(COLOR, 25%)
-    & abbr
-      font-weight: 600
+      transition color TRANSITION_time TRANSITION_easing
     &.active
-      transition box-shadow TRANSITION_time TRANSITION_easing
       color: NAV_LINK_ACTIVE
-      background-color: lighten(COLOR, 5%)
 
   section > &[data-control=groupbar] > a.active
-      box-shadow inset 0 -2px 0 THEME
+      box-shadow inset 0 -3px 0 THEME
 
   section > footer > & > a.active
-      box-shadow inset 0 2px THEME
+      box-shadow inset 0 3px THEME
 
   &[data-control=menu]
     background-color: rgba(0,0,0,0.8)

src/stylesheets/theme/theme.layout.styl

@@ -8,47 +8,39 @@
  */
 
 body > section
-  background-color: COLOR
-  &, & a
-    color: COLOR
   & > header
-    C = THEME
-    background-color: darken(COLOR, 50%)
-    box-shadow 0 2px 0 SHADOW
-    color: #fff
+    background-color: THEME
+
+  & nav[data-control=groupbar], & > header
+    box-shadow inset 0 -1px SHADOW, 0 1px SHADOW
 
   & nav[data-control=groupbar], & > footer
-    background-color: COLOR
-    box-shadow inset 0 -2px SHADOW
+    background-color: ASIDE
 
   & > footer
-    box-shadow 0 -2px SHADOW, inset 0 2px SHADOW
+    box-shadow inset 0 1px SHADOW, 0 -1px SHADOW
 
   & > article, & > [data-control="pull"]
+    &, a
+      color: TEXT
     background-color: BACKGROUND
-    box-shadow: 0 1px 0 red
     &.splash
       background: THEME
       color: #fff
 
   &.aside
-    box-shadow -2px SHADOW
+    box-shadow -4px 0 2px SHADOW
     &.right
-      box-shadow 2px SHADOW
+      box-shadow 2px 0 SHADOW
 
   &[data-pull] > article.active
     box-shadow: 0 -1px 0 rgba(0,0,0,0.05)
 
 body > aside
-  background-color: COLOR
+  background-color: darken(ASIDE, 10%)
   color: WHITE
   & > header, & > footer
-    background-color: darken(COLOR, 25%)
-  & > header
-    box-shadow 0 2px 0 SHADOW
+    background-color: ASIDE
 
-body > * > header > .title
-  color: lighten(COLOR, 85%)
-  font-weight: 700
-  text-transform: uppercase
-  letter-spacing: -0.05em
+body header .title
+  font-weight: 400

src/stylesheets/theme/theme.media.styl

@@ -11,4 +11,4 @@
   body
     & > section
       & > header
-        border-radius BORDER_radius BORDER_radius 0 0
+        border-radius 0

src/stylesheets/theme/theme.widget.button.styl

@@ -7,24 +7,15 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-.button, button
-  &, abbr
-    font-weight: 600
-
 article
   & .button, button
-    // border-radius (BORDER_radius * 2)
-    border-radius BORDER_radius
     color: #fff !important
-
-    box-shadow: inset 0 0.1em 0 rgba(255,255,255,0.1), inset 0 -0.15em 0 rgba(0,0,0,0.2), 0 0.15em 0 rgba(0,0,0,0.075)
     -webkit-font-smoothing: antialiased
-    text-shadow: 0 0.1em 0 rgba(0,0,0,0.1)
-
+    border-radius BORDER_radius
     &:hover
-        box-shadow: inset 0 0 5em rgba(0,0,0,0.15), inset 0 -0.15em 0 rgba(0,0,0,0.2), 0 0.15em 0 rgba(0,0,0,0.075)
+      box-shadow: inset 0 0 5em rgba(255,255,255,0.15)
     &:active
-      box-shadow inset 0 0 5em rgba(0,0,0,0.3), inset 0 0.15em 0 rgba(0,0,0,0.1)
+      box-shadow inset 0 0 5em rgba(0,0,0,0.3)
 
     & .icon
       opacity: 0.65

src/stylesheets/theme/theme.widget.styl

@@ -10,22 +10,16 @@
 /* =================================  TAG  ================================= */
 .tag:not(.icon)
   color: #fff
-  border-radius BORDER_radius
-  font-weight: 700
-  box-shadow inset 0 0.1em rgba(255,255,255,0.2), 0 0.1em rgba(0,0,0,0.25)
+  font-weight: 400
   &.count
-    background-color: THEME
-    aside a:not(.active) &,  footer a:not(.active) &, [data-control="groupbar"] a:not(.active) &
-      background-color: lighten(COLOR, 20%)
-
+    border-radius 1em
+    background-color: DANGER
 
 /* =================================  PULL  =============================== */
 body > section > [data-control="pull"]
   background-color: darken(BACKGROUND, 15%)
   color: darken(BACKGROUND, 50%)
   text-shadow: 0 0.1em 1em BACKGROUND
-  & > strong
-    font-weight: 700
   &.rotate
     color: darken(BACKGROUND, 75%)