[gnome-devel-docs/gnome3-hig] hig3: legible footer menu. buttons for mobile version.

[Jakub Steiner <jimmac src gnome org>]

commit e818df7dd21e3d5ff2142bac88b8a0f8e93f929b
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Jan 20 17:04:35 2012 +0100

    hig3: legible footer menu. buttons for mobile version.

 hig3/src/stylesheets/hig.scss |   50 +++++++++++++++++++++++++++++++++++-----
 1 files changed, 43 insertions(+), 7 deletions(-)
---
diff --git a/hig3/src/stylesheets/hig.scss b/hig3/src/stylesheets/hig.scss
index 473ba8d..98f9a2a 100644
--- a/hig3/src/stylesheets/hig.scss
+++ b/hig3/src/stylesheets/hig.scss
@@ -10,6 +10,7 @@ $columns: 16;
 
 $c-link: #3465a4;
 $c-header: #888a85;
+$c-footer: #d3d7cf;
 
 a { 
   color: $c-link;
@@ -241,7 +242,7 @@ hr.footerart {
   padding: 0;
   border: 0;
   width: 100%;
-  background-color: #d3d7cf;
+  background-color: $c-footer;
   overflow: hidden;
   position: inline;
   
@@ -269,7 +270,9 @@ hr.footerart {
       font-size: 110%;
     }
     a {
-      color: #fff;
+      font-weight: normal;
+      color: #666;
+      @include text-shadow(0,1px,0,rgba(255,255,255,0.6));
       text-decoration: none;
       &:hover {
         color: #444;
@@ -298,6 +301,7 @@ hr.footerart {
         a {
           color: $c-header;
           font-size: 105%;
+          font-weight: bold;
           &:hover {
             text-decoration: none;
           }
@@ -308,7 +312,9 @@ hr.footerart {
           ul li {
             margin: 0;
             a {
-              color: #fff;
+              font-weight: normal;
+              color: #666;
+              @include text-shadow(0,1px,0,rgba(255,255,255,0.6));
               text-decoration: none;
               &:hover {
                 color: #444;
@@ -322,6 +328,25 @@ hr.footerart {
   }
 }
 
+ mixin menubutton() {
+  display: block;
+  text-align: center;
+  @include text-shadow(0,1px,2px,rgba(0,0,0,0.6));
+  padding: .5em;
+  border: 1px solid darken($c-footer,20%);
+  @include border-radius(0.5em);
+  background-color: darken($c-footer, 5%);
+  @include gradient-vertical(lighten($c-footer,5%), darken($c-footer, 8%));
+  margin-bottom: 4px;
+  &:hover {
+    border: 1px solid darken($c-footer,30%);
+    @include no-text-shadow();
+  }
+  &:active {
+    @include gradient-vertical(darken($c-footer,10%), darken($c-footer,5%));
+  }
+}
+
 /* MOBILE VERSION BELOW */
 @media screen and (max-width: 960px) {
   $total-width: 100%;
@@ -405,10 +430,13 @@ hr.footerart {
       @include column(16);
       li {
         @include column(16);
+        width: 100%;
       }
       .direct {
         @include column(16);
         margin: 0;
+
+        a { @include menubutton(); }
       }
       .nested {
         @include column(16);
@@ -416,14 +444,20 @@ hr.footerart {
         ul.collapsed {
           @include column(16);
           margin: 0;
+          width: 100%;
           li {
             @include column(16);
             margin: 0;
-            ul li {
-              display: block;
-              float: none;
+            width: 100%;
+            ul {
               width: 100%;
-              margin: 0;
+              li {
+                display: block;
+                float: none;
+                width: 100%;
+                margin: 0;
+                a { @include menubutton(); }
+              }
             }
           }
         }
@@ -437,3 +471,5 @@ hr.footerart {
     }
   }
 }
+
+