Enhaced buttons

example/app/articles/buttons.html

@@ -2,11 +2,27 @@
     <div>
         <h1>Sizes</h1>
         <p class="margin bottom">
+            <a href="#" class="button tiny">tiny</a>
             <a href="#" class="button small">small</a>
             <a href="#" class="button">default</a>
             <a href="#" class="button large">large</a>
         </p>
         <a href="#" class="button anchor margin bottom">anchor</a>
+        <h1>Icons</h1>
+        <p class="margin bottom">
+            <a href="#" class="button tiny" data-icon="check" ></a>
+            <a href="#" class="button small" data-icon="check" ></a>
+            <a href="#" class="button"  data-icon="check" ></a>
+            <a href="#" class="button large"  data-icon="check" ></a>
+        </p>
+        <h1>Text + Icons</h1>
+        <p class="margin bottom">
+            <a href="#" class="button tiny" data-icon="check" data-label="tiny"></a>
+            <a href="#" class="button small" data-icon="check" data-label="small"></a>
+            <a href="#" class="button"  data-icon="check" data-label="default"></a>
+            <a href="#" class="button large"  data-icon="check" data-label="large"></a>
+        </p>
+
         <h1>Colors</h1>
         <p>
             <a href="#" class="button anchor margin bottom">default</a>

src/stylesheets/lungo.widgets.button.styl

@@ -9,46 +9,63 @@
 
 @import "constants.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: 600
+  font-size: 1.15em
   text-align: center
   text-decoration: none
   outline: none
 
-  &:disabled, &.disabled
-    background: rgba(255,255,255,0.2)
-    color: #999 !important
-
-  & .icon
-    font-size: FONT_SIZE_BIG
-
-  &.anchor
-    display: block
-    // width: inherit
-    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 = 30px
-    padding: 0 8px
-    font-size: FONT_SIZE_SMALL
-    line-height: (h - 2)
+  article &
+    height: H = 40px
+    line-height: (H - 2)
+    padding: 0 14px
+
+    &, abbr
+      font-weight: 700
+    & .icon + abbr
+      margin-left: 6px
+
+    &:disabled, &.disabled
+      background: rgba(255,255,255,0.2)
+      color: #999 !important
+
+    &:not(.anchor) .icon
+      line-height: (H / 2)
+
+
+    &.anchor
+      display: block
+      // width: inherit
+      width: 100%
+      position: relative
+      & .icon
+        position: absolute
+        left: 14px
+
+    &.large
+      height: H = 52px
+      padding: 0 20px
+      font-size: 1.4em
+      line-height: (H - 2)
+      & .icon + abbr
+        margin-left: 10px
+
+    &.small
+      height: H = 30px
+      padding: 0 10px
+      font-size: FONT_SIZE_SMALL
+      line-height: (H - 2)
+      & .icon + abbr
+        margin-left: 4px
 
+    &.tiny
+      height: H = 22px
+      padding: 0 6px
+      font-size: FONT_SIZE_TINY
+      line-height: (H - 2)
+      & .icon + abbr
+        margin-left: 2px

src/stylesheets/theme.lungo.styl

@@ -243,6 +243,7 @@ nav
 /* -------------------------- BUTTONS -------------------------- */
 header
   & .button, button
+    color: #fff
     background-color: THEME_dark
     box-shadow 0 1px 0 lighten(THEME, 15%), inset 0 1px 0 darken(THEME, 35%)
     border-radius 4px
@@ -252,7 +253,7 @@ header
 article
   & .button, button
     border-radius(FORM-border-radius)
-    color: white
+    color: #fff
     border-radius 2px
     box-shadow inset 0 1px 0 rgba(255,255,255,0.2)
     border: solid 1px rgba(0,0,0,0.1)
@@ -264,6 +265,9 @@ article
       color: #666 !important
     &[disabled]
       background-color: black
+    & .icon
+      opacity: 0.65
+      text-shadow: 0 -1px 0 rgba(0,0,0,0.25)
 
   & button, .button, .tag:not(.icon)
     &