Fixing PX to EM

src/stylesheets/__init.styl

@@ -2,6 +2,7 @@
 
 /* CONSTANTS */
 HEADER_HEIGHT           = 45px
+HEADER_GROUPBAR_HEIGHT  = 32px
 
 ASIDE_WIDTH             = 264px
 ASIDE_WIDTH_SMALL       = 64px

src/stylesheets/lungo.layout.nav.styl

@@ -7,8 +7,6 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-HEADER_GROUPBAR_HEIGHT = 32px
-
 nav
   /* ========================================================================= */
   /* ================================= HEADER ================================ */
@@ -66,27 +64,21 @@ nav
     font-size: FONT_SIZE_SMALL
     line-height: HEADER_GROUPBAR_HEIGHT
     & > a
-      padding: 0px
-      margin: 0px
+      padding:0
+      margin:0
       height: HEADER_GROUPBAR_HEIGHT !important
       display: block
       text-align: center
-      & .icon
-        font-size: 1.0em
-        margin-right: 2px
-
-      & .tag
-        position: relative
-        top: -1px
-        left: 2px
-
+      & .icon, .tag
+        margin: 0 0.25em
+        line-height: inherit
 
   /* ========================================================================= */
   /* ================================= MENU ================================== */
   /* ========================================================================= */
   &[data-control=menu]
     position: absolute
-    left: 0px
+    left:0
     top: HEADER_HEIGHT
     visibility: hidden
     z-index: 2
@@ -136,14 +128,16 @@ nav
       height:  HEADER_HEIGHT
 
     & .icon
-      font-size: 2.0em !important
-      line-height: HEADER_HEIGHT
-      width: 32px
+      font-size: 2.0em
+      line-height: inherit
+      width: HEADER_HEIGHT
       display: inline-block
 
     & .tag
-      top:  -42px
-      left: 4px
+      position: relative
+      top:  SIZE = -12px
+      left: SIZE
+      margin-right: -24px
       & .loading
         top: 0
         font-size: 1.4em
@@ -151,22 +145,17 @@ nav
     abbr
       display: none
 
-    & .tag
-      position: relative
-      top:  -12px
-      left: -12px
-      margin-right: -20px
-
     &.with-labels
       & .icon
-        line-height: 36px
+        font-size: 1.8em
+        line-height: 1.0em
       & abbr
-        display: block !important
-        margin-top: -8px
         z-index: 1
+        display: block !important
+        margin-top: -1.3em
 
-        font-size: 11px
-        line-height: 14px
+        font-size: FONT_SIZE_TINY
+        line-height: FONT_SIZE_TINY
 
         overflow: hidden
         white-space: nowrap

src/stylesheets/lungo.layout.styl

@@ -100,7 +100,7 @@ body
     &.show
       z-index: 0
     &.right
-      right: 0px
+      right:0
 
   /* ========================================================================= */
   /* =============================== EXCLUDE OS ============================== */

src/stylesheets/lungo.media.tablet.styl

@@ -12,7 +12,7 @@
       margin-right: -(ASIDE_WIDTH)
       &.show
         transform translateX(0px)
-        margin-right: 0px
+        margin-right:0
       &.hide
         transform translateX(-100%)
         margin-right: -(ASIDE_WIDTH) !important

src/stylesheets/lungo.widget.form.styl

@@ -23,14 +23,14 @@ form, .form
   & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea, label.select
     display: block
     width: 100%
-    padding: 0px 6px
+    padding:0 6px
     height: FORM_HEIGHT
     transition all 0.15s linear
     font-family: inherit
     -webkit-appearance: none
     -webkit-user-select: text
     -webkit-font-smoothing: antialiased
-    border: 0px
+    border:0
     &:focus
       outline: none !important
     &.border
@@ -62,7 +62,7 @@ form, .form
     & input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea
       box-shadow none
       border: none
-      padding: 0px
+      padding:0
       &, &:focus
         background: none
 
@@ -77,7 +77,7 @@ form, .form
     display: inline-block
     font-size: inherit
     line-height: inherit
-    padding-left: 0px
+    padding-left:0
 
     &.border
       H = FORM_border_height - (FORM_border * 2)
@@ -107,7 +107,7 @@ form, .form
 
     height: FORM_PROGRESS_HEIGHT
     width: 100%
-    padding: 0px
+    padding:0
     border: none
 
     &::-webkit-slider-thumb

src/stylesheets/lungo.widget.notification.styl

@@ -54,8 +54,8 @@ WINDOW_WIDTH = 280px
         height: LOADING !important
 
       & > .icon
-        left: 0px
-        top: 0px
+        left:0
+        top:0
         font-size: 52px
         line-height: LOADING
       & > strong
@@ -104,7 +104,7 @@ WINDOW_WIDTH = 280px
       transition-property opacity, top
       top: -(H)
       &.show
-        top: 0px
+        top:0
       & .icon
         font-size: FONT_SIZE_LARGE
         float: left

src/stylesheets/lungo.widget.styl

@@ -135,6 +135,6 @@ body > section > article.splash
     position: absolute
     width: 100%
     bottom: 8px
-    left: 0px
+    left:0
     font-size: FONT_SIZE_TINY
-    padding: 0px
+    padding:0

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

@@ -13,13 +13,13 @@
     &:not(.anchor)
       border-bottom: inset 1px LIST_border
     &.color
-      box-shadow: inset 4px 0px 0px COLOR
+      box-shadow: inset 4px00 COLOR
     &.accept
-      box-shadow: inset 4px 0px 0px SUCCESS
+      box-shadow: inset 4px00 SUCCESS
     &.cancel
-      box-shadow: inset 4px 0px 0px DANGER
+      box-shadow: inset 4px00 DANGER
     &.warning
-      box-shadow: inset 4px 0px 0px WARNING
+      box-shadow: inset 4px00 WARNING
     &.arrow::after
       border-color: lighten(COLOR, 75%)
 

src/stylesheets/theme/theme.widget.form.styl

@@ -83,7 +83,7 @@ form, .form
     color: darken(FORM_color, 25%)
     font-weight: 700
     border-radius: (FORM_border_radius * 4)
-    // box-shadow: inset 0px 1px 2px rgba(0,0,0,0.25), 0px 1px 0px rgba(255,255,255,0.25)
+    // box-shadow: inset0 1px 2px rgba(0,0,0,0.25),0 1px0 rgba(255,255,255,0.25)
     & label
       border-radius: (FORM_border_radius * 4)
       background: darken(FORM_color, 25%)

src/stylesheets/theme/theme.widget.notification.styl

@@ -41,10 +41,10 @@
       & .title
         background: THEME
         color: #fff
-        border-radius FORM_border_radius FORM_border_radius 0px 0px
+        border-radius FORM_border_radius FORM_border_radius00
     &.push
       background: rgba(0,0,0,0.75)
 
     & button, & .button
       &:last-child
-        border-radius 0px 0px FORM_border_radius FORM_border_radius
+        border-radius00 FORM_border_radius FORM_border_radius