- Patch #535066 by jide, jbrown, marvil07, yoroy, mcjim, TheRec, mr.baileys: use CSS3 / IE filter to render toolbar shadow.

4 files changed, 23 insertions, 18 deletions

diff --git a/modules/toolbar/toolbar.css b/modules/toolbar/toolbar.css
index e7c30336b..7ce4893f3 100644
--- a/modules/toolbar/toolbar.css
+++ b/modules/toolbar/toolbar.css
@@ -33,10 +33,17 @@ body.toolbar-drawer {
   background: #666;
   color: #ccc;
   position: fixed;
+  top: 0;
   left: 0;
   right: 0;
-  top: 0;
+  margin: 0 -20px;
+  padding: 0 20px;
   z-index: 600;
+  box-shadow: 0 3px 20px #000;
+  -moz-box-shadow: 0 3px 20px #000;
+  -webkit-box-shadow: 0 3px 20px #000;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10');
+  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10')";
 }
 
 #toolbar div.collapsed {
@@ -44,15 +51,6 @@ body.toolbar-drawer {
   visibility: hidden;
 }
 
-#toolbar div.shadow {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -15px;
-  height: 15px;
-  background: url(toolbar.png) 0 -45px repeat-x;
-}
-
 #toolbar a {
   text-decoration: none;
   color: #fff;
@@ -78,7 +76,7 @@ body.toolbar-drawer {
   width: 11px;
   height: 14px;
   display: block;
-  background: url(toolbar.png) no-repeat -6px -63px;
+  background: url(toolbar.png) no-repeat 0 -45px;
   text-indent: -9999px;
   margin: 3px 0px;
 }
@@ -142,6 +140,9 @@ body.toolbar-drawer {
  */
 * html #toolbar {
   position: absolute;
-  top: 0;
-  left: 0;
+  margin: 0;
+  padding-right: 0;
+  left: -20px;
+  right: 0;
+  width: 100%;
 }
diff --git a/modules/toolbar/toolbar.js b/modules/toolbar/toolbar.js
index a71d22daa..673507fbe 100644
--- a/modules/toolbar/toolbar.js
+++ b/modules/toolbar/toolbar.js
@@ -49,7 +49,7 @@ Drupal.toolbar.collapse = function() {
     .removeClass('toggle-active')
     .attr('title',  toggle_text)
     .html(toggle_text);
-  $('body').removeClass('toolbar-drawer').css('paddingTop', $('#toolbar').outerHeight());
+  $('body').addClass('toolbar-drawer').css('paddingTop', Drupal.toolbar.height());
   $.cookie(
     'Drupal.toolbar.collapsed',
     1,
@@ -71,7 +71,7 @@ Drupal.toolbar.expand = function() {
     .addClass('toggle-active')
     .attr('title',  toggle_text)
     .html(toggle_text);
-  $('body').addClass('toolbar-drawer').css('paddingTop', $('#toolbar').outerHeight());
+  $('body').addClass('toolbar-drawer').css('paddingTop', Drupal.toolbar.height());
   $.cookie(
     'Drupal.toolbar.collapsed',
     0,
@@ -96,7 +96,13 @@ Drupal.toolbar.toggle = function() {
 };
 
 Drupal.toolbar.height = function() {
-  return $("#toolbar").height();
+  var height = $('#toolbar').outerHeight();
+  // In IE, Shadow filter adds some extra height, so we need to remove it from
+  // the returned height.
+  if ($('#toolbar').css('filter').match(/DXImageTransform\.Microsoft\.Shadow/)) {
+    height -= $('#toolbar').get(0).filters.item("DXImageTransform.Microsoft.Shadow").strength;
+  }
+  return height;
 };
 
 })(jQuery);
diff --git a/modules/toolbar/toolbar.png b/modules/toolbar/toolbar.png
index 7a3a65df5..f93e9f745 100644
--- a/modules/toolbar/toolbar.png
+++ b/modules/toolbar/toolbar.png
diff --git a/modules/toolbar/toolbar.tpl.php b/modules/toolbar/toolbar.tpl.php
index 5e4c3dc1f..d38aae696 100644
--- a/modules/toolbar/toolbar.tpl.php
+++ b/modules/toolbar/toolbar.tpl.php
@@ -35,6 +35,4 @@
   <div class="<?php echo $toolbar['toolbar_drawer_classes']; ?>">
     <?php print render($toolbar['toolbar_drawer']); ?>
   </div>
-
-  <div class="shadow"></div>
 </div>