Fix padding in aside

dolfly · Jun 16, 2013 · 7d8d209 · 7d8d209
1 parent dd77b66
commit 7d8d209
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 20 deletions.
diff --git a/src/stylesheets/__init.styl b/src/stylesheets/__init.styl
@@ -4,7 +4,8 @@
 HEADER_HEIGHT           = 46px
 HEADER_GROUPBAR_HEIGHT  = 34px
 
-ASIDE_WIDTH             = 264px
+ASIDE_WIDTH             = 256px
+ASIDE_PADDING           = 8px
 ASIDE_WIDTH_SMALL       = 64px
 ASIDE_SMALL_ICON        = 48px
 

diff --git a/src/stylesheets/lungo.animation.aside.styl b/src/stylesheets/lungo.animation.aside.styl
@@ -1,6 +1,12 @@
-@import "__init.styl"
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Animation
+ * @class Aside
 
-BOUNCE_DIST = 8
+ *
+ * @author Javier Jimenez Villar <[email protected]> || @soyjavi
+ */
 
 section
   &[data-aside-left="show"]
@@ -24,26 +30,24 @@ aside
 
 @keyframes sectionAsideLeftShow
   from { transform translateX(0) }
-  60%  { transform translateX(ASIDE_WIDTH + BOUNCE_DIST) }
+  60%  { transform translateX(ASIDE_WIDTH + ASIDE_PADDING) }
   to   { transform translateX(ASIDE_WIDTH) }
 
 @keyframes sectionAsideLeftHide
   from { transform translateX(ASIDE_WIDTH) }
-  25%  { transform translateX(ASIDE_WIDTH + BOUNCE_DIST) }
+  25%  { transform translateX(ASIDE_WIDTH + ASIDE_PADDING) }
   to   { transform translateX(0) }
 
 @keyframes sectionAsideRightShow
   from { transform translateX(0) }
-  60%  { transform translateX(-(ASIDE_WIDTH) - BOUNCE_DIST) }
+  60%  { transform translateX(-(ASIDE_WIDTH) - ASIDE_PADDING) }
   to   { transform translateX(-(ASIDE_WIDTH)) }
 
 @keyframes sectionAsideRightHide
   from { transform translateX(-(ASIDE_WIDTH)) }
-  25%  { transform translateX(-(ASIDE_WIDTH) - BOUNCE_DIST) }
+  25%  { transform translateX(-(ASIDE_WIDTH) - ASIDE_PADDING) }
   to   { transform translateX(0) }
 
-// =============================================
-
 @keyframes asideLeftHide
   from { transform translateX(0) }
   to   { transform translateX(-(ASIDE_WIDTH)) }
diff --git a/src/stylesheets/lungo.animation.phone.styl b/src/stylesheets/lungo.animation.phone.styl
@@ -42,7 +42,6 @@ body[data-device="phone"] > section
 
 OPACITY   = 0.25
 TRANSLATE = 110%
-
 /* ------ SLIDE ------ */
 DEGREES   = -45deg
 @keyframes phoneSlideOut

diff --git a/src/stylesheets/lungo.layout.styl b/src/stylesheets/lungo.layout.styl
@@ -49,8 +49,7 @@ body
       & > .title
         z-index: -1
         float: left
-        // font-size: FONT_SIZE_BIG
-        font-size: 1.25em
+        font-size: 1.21em
         box-flex(1)
         &.centered
           position: absolute
@@ -100,6 +99,7 @@ body
     width: ASIDE_WIDTH
     display: none
     z-index: -1
+    border-right: solid ASIDE_PADDING transparent
     & > header
       & .title
         margin: 0 INDENT

diff --git a/src/stylesheets/lungo.media.phone.styl b/src/stylesheets/lungo.media.phone.styl
@@ -1,4 +1,13 @@
-@import "__init.styl"
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Media
+ * @class Phone
+
+ *
+ * @author Javier Jimenez Villar <[email protected]> || @soyjavi
+ */
+
 
 /* ==== Any phone ==== */
 @media only screen and (max-width: 767px)

diff --git a/src/stylesheets/lungo.widget.empty.styl b/src/stylesheets/lungo.widget.empty.styl
@@ -12,5 +12,7 @@ body > section > article > .empty
   & > strong
     font-size: FONT_SIZE_BIG
     line-height: FONT_SIZE_BIG
+  & > small
+    font-size: FONT_SIZE_SMALL
   & > button
     margin: 0.5em 0
diff --git a/src/stylesheets/theme/theme.layout.nav.styl b/src/stylesheets/theme/theme.layout.nav.styl
@@ -42,7 +42,7 @@ nav
       box-shadow inset 0 3px THEME
 
   &[data-control=menu]
-    background-color: rgba(0,0,0,0.8)
+    background-color: rgba(0,0,0,0.9)
     box-shadow 0 2px 0 SHADOW
     &.icons
       & > a

diff --git a/src/stylesheets/theme/theme.layout.styl b/src/stylesheets/theme/theme.layout.styl
@@ -29,16 +29,18 @@ body > section
       color: #fff
 
   &.aside
-    box-shadow -4px 0 2px SHADOW
+    &:not(.right)
+      box-shadow -1px 0 8px SHADOW
     &.right
-      box-shadow 2px 0 SHADOW
+      box-shadow 1px 0 8px SHADOW
 
   &[data-pull] > article.active
     box-shadow: 0 -1px 0 rgba(0,0,0,0.05)
 
 body > aside
   background-color: darken(ASIDE, 10%)
   color: WHITE
+  border-right-color: darken(ASIDE, 10%)
   & > header, & > footer
     background-color: ASIDE
 

diff --git a/src/stylesheets/theme/theme.widget.button.styl b/src/stylesheets/theme/theme.widget.button.styl
@@ -9,12 +9,14 @@
 
 article
   & .button, button
-    color: #fff !important
-    -webkit-font-smoothing: antialiased
     border-radius BORDER_radius
-
     box-shadow: inset 0 -1px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.075)
-    text-shadow:  0 1px rgba(0,0,0,0.1)
+
+    &, & abbr
+      color: #fff
+      font-weight: 600
+      text-shadow:  0 1px rgba(0,0,0,0.1)
+      -webkit-font-smoothing: antialiased
 
     &:hover
       box-shadow: inset 0 0 5em rgba(0,0,0,0.1), inset 0 -1px rgba(0,0,0,0.15), 0 1px rgba(0,0,0,0.075)