Remove default box-shadow from .content and aside

Fixes #1419.

We also standardize on using `@include box-shadow()` where possible,
and clearing out lots of now unnecessary box-shadow resets.

9 files changed, 25 insertions, 71 deletions

diff --git a/web/cobrands/eastsussex/layout.scss b/web/cobrands/eastsussex/layout.scss
index 20be807a6..1f7c3bbb3 100644
--- a/web/cobrands/eastsussex/layout.scss
+++ b/web/cobrands/eastsussex/layout.scss
@@ -191,10 +191,6 @@ body.frontpage {
     width: auto;
 }
 
-body.twothirdswidthpage .content aside {
-    box-shadow: 0 0 12px 0 #dae1e5;
-}
-
 .banner p#fixed {
     background-position: -328px -333px;
 }
diff --git a/web/cobrands/fixmystreet.com/posters.scss b/web/cobrands/fixmystreet.com/posters.scss
index ee8da9d32..518462539 100644
--- a/web/cobrands/fixmystreet.com/posters.scss
+++ b/web/cobrands/fixmystreet.com/posters.scss
@@ -129,7 +129,6 @@ body.goodies {
           padding: 0;
 
           aside {
-            box-shadow: none;
             background-color: inherit;
           }
         }
diff --git a/web/cobrands/harrogate/layout.scss b/web/cobrands/harrogate/layout.scss
index 417eff539..d8cc3b441 100644
--- a/web/cobrands/harrogate/layout.scss
+++ b/web/cobrands/harrogate/layout.scss
@@ -77,7 +77,6 @@ body.twothirdswidthpage .container .content {
 
 body.twothirdswidthpage .content aside {
     margin-top: 2em;
-    @include box-shadow(none);
 }
 
 
diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss
index 99f8bdfcf..7799fa3fd 100644
--- a/web/cobrands/hart/layout.scss
+++ b/web/cobrands/hart/layout.scss
@@ -33,7 +33,6 @@ body.twothirdswidthpage .content {
         left: 672px;
         width: 208px;
         padding: 16px;
-        @include box-shadow(none);
     }
     .sticky-sidebar {
         left: 672px;
@@ -43,7 +42,3 @@ body.twothirdswidthpage .content {
         }
     }
 }
-
-.content {
-    @include box-shadow(none);
-}
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 0bd37b95f..bc5c6c93a 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -34,24 +34,15 @@ body, body a {
   display: none;
 }
 
-// White background, so no shadow or margin needed.
-.content {
+// White background, so no margin needed.
+.content,
+.iel8 .content {
     margin: 0;
-    @include box-shadow(none);
-}
-.iel8 {
-    .content {
-        margin: 0;
-        border: none;
-    }
 }
 
 // Fix location of aside sidebar
 body.twothirdswidthpage {
     .content {
-        aside {
-            @include box-shadow(none);
-        }
         .sticky-sidebar {
             aside {
                 position: fixed;
@@ -114,7 +105,7 @@ body.mappage {
     background-color: #069b01; // picked from header.jpg
     background-position: 100% 40%;
     overflow: auto;
-    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+    @include box-shadow(0 0 5px rgba(0,0,0,0.3));
 
     & > * {
       display: none;
@@ -309,9 +300,7 @@ h4.static-with-rule {
     width: 432px;
 
     ul#key-tools {
-        -webkit-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
-        -moz-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
-        box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
+        @include box-shadow(0 0 1em 1em $oxfordshire_very_light_green);
         border-top-width: 2px;
     }
 }
@@ -345,9 +334,10 @@ input.green-btn{
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  @include box-shadow(
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.05)
+  );
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   font-weight: normal;
   cursor: pointer;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 5ed4ddb97..bdb8e90a7 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -222,12 +222,9 @@ h1 {
   padding: 1em 1em 3em;
   background: #fff;
   color: #222;
-  @include box-shadow(0 0 10px rgba(0,0,0,0.5));
 }
 .iel8 {
   .content {
-    // If no box-shadow, just want a boring black border to stand it out from the map.
-    border: 1px solid #666;
     //take off margins so we line up properly
     margin: 0 0.5em;
   }
@@ -392,7 +389,6 @@ body.twothirdswidthpage,
 body.fullwidthpage {
     .container {
         .content {
-            box-shadow: none;
             padding: 1em;
             margin-bottom: 0em;
             footer {
@@ -438,10 +434,6 @@ body.fullwidthpage {
 .iel8 {
   body.twothirdswidthpage,
   body.fullwidthpage {
-    .content {
-      border: 0px;
-    }
-
     .container .content footer a.platform-logo {
       color: #ffffff;
       background: none;
@@ -470,7 +462,6 @@ body.twothirdswidthpage {
       z-index: -1;
       width:13em;
       padding:1em;
-      @include box-shadow(0px 0px 6px 1px #000);
       h2 {
         margin-top: 0;
       }
@@ -507,7 +498,6 @@ body.authpage {
     margin-#{$left}: auto;
     margin-#{$right}: auto;
     margin-bottom: 0;
-    box-shadow: none;
     padding: 1em; // same as .twothirdswidthpage .content
   }
 }
@@ -556,7 +546,6 @@ body.authpage {
   border-#{$right}: 1em solid transparent;
   background:none;
   padding:0;
-  @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
   h2 {
     color:#222;
     margin-top:0;
@@ -720,7 +709,7 @@ body.authpage {
   ul#key-tools {
     border-top: 0.25em solid $primary;
     margin: 0;
-    @include box-shadow(-0em 0px 1em 1em #fff);
+    @include box-shadow(0 0 1em 1em #fff);
     li {
       border:none;
       a, input[type=submit] {
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 71f9b95a3..5bbbc19eb 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -71,16 +71,16 @@ $right: right;
   @include experimental(border-radius, $radius, -moz, -webkit, not -o, not -ms, official);
 }
 
-@mixin box-shadow($shadow) {
-  @include experimental(box-shadow, $shadow, -moz, -webkit, not -o, not -ms, official);
+@mixin box-shadow($shadows...) {
+  @include experimental(box-shadow, $shadows, -moz, -webkit, not -o, not -ms, official);
 }
 
 @mixin experimental($property, $value, $moz: true, $webkit: true, $o: true, $ms: true, $official: true) {
-  @if $webkit   { -webkit-#{$property} : $value; }
-  @if $moz      {    -moz-#{$property} : $value; }
-  @if $ms       {     -ms-#{$property} : $value; }
-  @if $o        {      -o-#{$property} : $value; }
-  @if $official {         #{$property} : $value; }
+  @if $webkit   { -webkit-#{$property} : #{$value}; }
+  @if $moz      {    -moz-#{$property} : #{$value}; }
+  @if $ms       {     -ms-#{$property} : #{$value}; }
+  @if $o        {      -o-#{$property} : #{$value}; }
+  @if $official {         #{$property} : #{$value}; }
 }
 
 @mixin inline-block($alignment: middle) {
diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss
index f55ac0d15..901f3fb3e 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -80,7 +80,6 @@
 // d523b431
 body.fullwidthpage {
     .content {
-        @include box-shadow(none);
         background: none;
     }
 }
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index 3f24b3685..57cae97e9 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -4,35 +4,25 @@
 
 // Things to override from parent stylesheet
 
-// White background, so no shadow or margin needed.
 .content {
     color: #3c3c3c;
-    @include box-shadow(none);
-}
-.iel8 {
-    .content {
-        border: none;
-    }
 }
-// Except on map pages (which includes the front page)
-body.mappage .content, body.frontpage .content {
+
+// Front page content needs a shadow.
+// (Purely decorative: No need for border fallback for IE8)
+body.frontpage .content {
     @include box-shadow(0 0 6px 1px #000);
 }
-.iel8 {
-    body.mappage .content, body.frontpage .content {
-        border: 1px solid #666;
-    }
-}
-/* The header on a map page needs a shadow too */
-body.mappage .nav-wrapper-2 {
+// The header on a map page needs a shadow too
+body.mappage .nav-wrapper .nav-wrapper-2 {
     @include box-shadow(0 0 6px 1px #000);
 }
-/* Except on admin pages where there's an admin nav directly underneath it */
+// Except on admin pages where there's an admin nav directly underneath it
 body.mappage.admin .nav-wrapper-2 {
     @include box-shadow(none);
 }
 
-/* Fix positioning of images in the admin */
+// Fix positioning of images in the admin
 body.admin .admin-nav-wrapper {
     z-index: 1;
 }
@@ -191,9 +181,6 @@ body.mappage {
 
 body.twothirdswidthpage {
     .content {
-        aside {
-            @include box-shadow(none);
-        }
         .sticky-sidebar aside {
           top: 14em; // overrides default value, due to Zurich nav at top of content
         }