Better bar styles

dist/framework-with-theme.css

@@ -139,7 +139,8 @@ a.list-item:hover, a.list-item:focus {
 
 .bar {
   background-color: white;
-  border-bottom: 1px solid #dddddd;
+  border-style: solid;
+  border-width: 0;
   padding: 10px;
   /*
   Disabled temporarily because it's annoying for testing.
@@ -147,12 +148,16 @@ a.list-item:hover, a.list-item:focus {
     padding: $barPaddingLandscape;
   }
   */ }
+  .bar.bar-header {
+    border-bottom-width: 1px; }
+  .bar.bar-footer {
+    border-top-width: 1px; }
   .bar.bar-default {
     background-color: white;
-    border-bottom: 1px solid #dddddd; }
+    border-color: #dddddd; }
   .bar.bar-secondary {
     background-color: whitesmoke;
-    border-bottom: 1px solid #cccccc; }
+    border-color: #cccccc; }
 
 .button {
   color: #222222;

example/index.html

@@ -99,7 +99,8 @@
       <form>
       </form>
     </div>
-    <footer class="bar bar-footer">
+    <footer class="bar bar-footer bar-secondary">
+      <h1 class="title">Auf Wiedersehen</h1>
     </footer>
   </body>
 </html>

scss/framework/theme/default/_bar.scss

@@ -1,9 +1,26 @@
 .bar {
   background-color: $barBackground;
-  border-bottom: $barBorderBottom;
+  border-style: solid;
+  border-width: 0;
 
   padding: $barPaddingPortrait;
 
+  &.bar-header {
+    border-bottom-width: 1px;
+  }
+  &.bar-footer {
+    border-top-width: 1px;
+  }
+
+  &.bar-default {
+    background-color: $barDefaultBackground;
+    border-color: $barDefaultBorderColor;
+  }
+  &.bar-secondary {
+    background-color: $barSecondaryBackground;
+    border-color: $barSecondaryBorderColor;
+  }
+
   /*
   Disabled temporarily because it's annoying for testing.
   @media screen and (orientation : landscape) {
@@ -11,13 +28,4 @@
   }
   */
 
-
-  &.bar-default {
-    background-color: $barDefaultBackground;
-    border-bottom: $barDefaultBorderBottom;
-  }
-  &.bar-secondary {
-    background-color: $barSecondaryBackground;
-    border-bottom: $barSecondaryBorderBottom;
-  }
-}
+}

scss/framework/theme/default/_variables.scss

@@ -16,14 +16,13 @@ $barPaddingPortrait: 10px;
 $barPaddingLandscape : 5px;
 
 $barBackground: white;
-$barBorderBottom: 1px solid #ddd;
 
 // Bar variations
 $barDefaultBackground: #fff;
-$barDefaultBorderBottom: 1px solid #ddd;
+$barDefaultBorderColor: #ddd;
 
 $barSecondaryBackground: #f5f5f5;
-$barSecondaryBorderBottom: 1px solid #ccc;
+$barSecondaryBorderColor: #ccc;
 
 //
 // Lists