New style for .tag

example/components/lungo.brownie

@@ -1 +1 @@
-Subproject commit 6a0dce2bb44ab5115fa291d85ae1e48f9fdfdb8d
+Subproject commit 72e2217c1b7894907ed507a462c6f9d0ac7c0fdb

src/stylesheets/lungo.layout.styl

@@ -76,6 +76,8 @@ body
       &.pull
         transition-property transform
         transition-duration TRANSITION_TIME
+    & [data-article].hide
+      display: none
 
   /* ========================================================================= */
   /* ================================ SECTION ================================ */

src/stylesheets/lungo.widgets.styl

@@ -9,10 +9,30 @@
 
 @import "constants.styl"
 
-[data-article].hide
+
+/* ================================  CLASSES  ================================ */
+.hidden
   display: none
+.block
+  display: block
+.inline
+  display: inline
+.inline-block
+  display: inline-block
+
+.indented > *
+  padding: INDENT
+.margined > *
+  margin: INDENT
+
+:not(.icon)
+  &.left
+    float: left
+  &.right
+    float: right
 
 
+/* ================================  SCROLL  ================================ */
 .overthrow-enabled .overthrow
   overflow: auto
   -webkit-overflow-scrolling: touch
@@ -38,29 +58,52 @@
   & > *
     -webkit-transform: translate3d(0, 0, 0)
 
-:not(.icon)
-  &.left
-    float: left
-  &.right
-    float: right
 
-.hidden
-  display: none
-.block
-  display: block
 
-.indented > *
-  padding: INDENT
+/* ================================  TEXT  ================================ */
+.text
+  &.thin
+    font-weight: 300
+  &.normal
+    font-weight: 400
+  &.bold
+    font-weight: 600
+  &.extra-bold
+    font-weight: 700
+  &.italic
+    font-style: italic
+  &.underline
+    text-decoration: underline
+  &.line-through
+    text-decoration: line-through
+  &.align_left
+    text-align: left
+  &.align_right
+    text-align: right
+  &.align_center
+    text-align: center
+  &.align_justify
+    text-align: justify
+  &.tiny
+    font-size: 0.8em
+  &.small
+    font-size: FONT_SIZE_SMALL
+  &.big
+    font-size: FONT_SIZE_BIG
+  &.opacity
+    opacity: 0.5
 
 
 /* ================================  TAG  ================================ */
 .tag
   display: inline-block
-  padding: 0 3px
+  padding: 0px 3px
   font-size: FONT_SIZE_TINY
-  line-height: 1.25em
-  height: 1.35em
+  line-height: (FONT_SIZE_LARGE / 1.1)
+  height: FONT_SIZE_LARGE
   text-align: center
+  min-width: 16px
+  z-index: 1
 
 size = 5px
 .margin
@@ -91,12 +134,11 @@ size = 5px
       width: 25%
 
   & > *
-    box-flex(0)
-  & > [data-layout=secondary]
     box-flex(1)
-  & > [data-layout=primary]
+  & > [data-layout=secondary]
     box-flex(2)
-
+  & > [data-layout=primary]
+    box-flex(3)
 
 
 /* ================================  MENU  ================================ */
@@ -108,10 +150,29 @@ size = 5px
     left: 1px
     font-size: FONT_SIZE_TINY
 
+
 /* ================================  CAROUSEL  ================================ */
 [data-control=carousel]
   overflow: hidden
   list-style: none
   margin: 0
-  // article
-  //   display: block !important
+
+
+/* ================================  SPLASH  ================================ */
+body > section > article.splash
+  text-align: center
+  padding: (INDENT * 2)
+  & .logo
+    height: 20%
+    margin: 20% 0 10% 0
+    font-size: 2.2em
+  & .button
+    margin-top: INDENT
+    margin-bottom: INDENT
+  & .copyright
+    position: absolute
+    width: 100%
+    bottom: 8px
+    left: 0px
+    font-size: FONT_SIZE_TINY
+    padding: 0px

src/stylesheets/theme.lungo.styl

@@ -9,7 +9,7 @@
 
 /* @import url("https://raw.github.com/soyjavi/CSSmethods/master/stylus/vendor.styl") */
 @import "CSSmethods/vendor.styl"
-// @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
+@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700")
 
 
 /* -------------------------- THEME -------------------------- */
@@ -32,7 +32,7 @@ THEME_light     = lighten(THEME, 15%)
 THEME_dark      = darken(THEME, 15%)
 
 FORM_color      = #e5e5e5
-BORDER_radius   = 1px
+BORDER_radius   = 2px
 /* -------------------------- DEFAULTS -------------------------- */
 body
   background-color: #000
@@ -196,6 +196,10 @@ nav
       color: #666
 
 
+/* -------------------------- PULL -------------------------- */
+[data-control="pull"]
+    text-shadow: 0 1px 0 #fff
+
 /* -------------------------- TAG -------------------------- */
 .tag:not(.icon)
   color: #fff
@@ -208,11 +212,6 @@ nav
   footer &
     box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
 
-
-[data-control="pull"]
-    text-shadow: 0 1px 0 #fff
-
-
 /* -------------------------- NOTIFICATION -------------------------- */
 .notification
   color: #fff
@@ -244,6 +243,7 @@ nav
         color: #fff
     &.push
       background: rgba(0,0,0,0.65)
+
 /* -------------------------- BUTTONS -------------------------- */
 header
   & .button, button
@@ -285,14 +285,7 @@ article
     &.cancel
       background-color: COLOR_cancel
 
-
 /* -------------------------- FORMS -------------------------- */
-.splash fieldset
-  &:first-child
-    border-radius BORDER_radius BORDER_radius 0px 0px
-  &:last-child
-    border-radius 0px 0px BORDER_radius BORDER_radius
-
 form, .form
   & label
     color: #aaa
@@ -304,11 +297,11 @@ form, .form
     & .icon
       color: #ccc
     &.radius-top
-      border-radius 4px 4px 0 0
+      border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0
     &.radius-bottom
-      border-radius 0 0 4px 4px
+      border-radius 0 0 (BORDER_radius * 2) (BORDER_radius * 2)
     &.radius
-      border-radius 4px
+      border-radius (BORDER_radius * 2)
     &.shadow
       border-bottom: 1px solid rgba(0,0,0,0.1)