Merge pull request #6151 from tikot/clearing-patch

Fixes #3410 the image shift
foundation · Jan 5, 2015 · 8495e35 · 8495e35
2 parents 484359e + e7a3816
commit 8495e35
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 30 deletions.
diff --git a/js/foundation/foundation.clearing.js b/js/foundation/foundation.clearing.js
@@ -16,7 +16,7 @@
 
       // comma delimited list of selectors that, on click, will close clearing,
       // add 'div.clearing-blackout, div.visible-img' to close on background click
-      close_selectors : '.clearing-close, div.clearing-blackout', 
+      close_selectors : '.clearing-close, div.clearing-blackout',
 
       // Default to the entire li element.
       open_selectors : '',
@@ -160,7 +160,7 @@
       if ($el.parent().hasClass('carousel')) {
         return;
       }
-      
+
       $el.after('<div id="foundationClearingHolder"></div>');
 
       var grid = $el.detach(),
@@ -171,7 +171,7 @@
       } else {
         grid_outerHTML = grid[0].outerHTML;
       }
-      
+
       var holder = this.S('#foundationClearingHolder'),
           settings = $el.data(this.attr_name(true) + '-init'),
           data = {
@@ -272,7 +272,7 @@
           .removeClass('clearing-blackout');
         container.removeClass('clearing-container');
         visible_image.hide();
-        visible_image.trigger('closed.fndtn.clearing');        
+        visible_image.trigger('closed.fndtn.clearing');
       }
 
       // Event to re-enable scrolling on touch devices
@@ -352,34 +352,18 @@
     },
 
     center_and_label : function (target, label) {
-      if (!this.rtl) {
-        target.css({
-          marginLeft : -(target.outerWidth() / 2),
-          marginTop : -(target.outerHeight() / 2)
+      if (!this.rtl && label.length > 0) {
+        label.css({
+          marginLeft : -(label.outerWidth() / 2),
+          marginTop : -(target.outerHeight() / 2)-label.outerHeight()-10
         });
-
-        if (label.length > 0) {
-          label.css({
-            marginLeft : -(label.outerWidth() / 2),
-            marginTop : -(target.outerHeight() / 2)-label.outerHeight()-10
-          });
-        }
       } else {
-        target.css({
-          marginRight : -(target.outerWidth() / 2),
-          marginTop : -(target.outerHeight() / 2),
+        label.css({
+          marginRight : -(label.outerWidth() / 2),
+          marginTop : -(target.outerHeight() / 2)-label.outerHeight()-10,
           left: 'auto',
           right: '50%'
         });
-
-        if (label.length > 0) {
-          label.css({
-            marginRight : -(label.outerWidth() / 2),
-            marginTop : -(target.outerHeight() / 2)-label.outerHeight()-10,
-            left: 'auto',
-            right: '50%'
-          });
-        }
       }
       return this;
     },
@@ -436,7 +420,7 @@
           .hide();
       }
       return this;
-    }, 
+    },
 
     // directional methods
 

diff --git a/scss/foundation/components/_clearing.scss b/scss/foundation/components/_clearing.scss
@@ -93,7 +93,16 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
         position: absolute;
         #{$default-float}: 50%;
         top: 50%;
-        margin-#{$default-float}: -50%;
+        @if $default-float == left {
+          transform: translateY(-50%) translateX(-50%);
+          -webkit-transform: translateY(-50%) translateX(-50%);
+          -ms-transform: translateY(-50%) translateX(-50%);
+        }
+        @else {
+          transform: translateY(-50%) translateX(50%);
+          -webkit-transform: translateY(-50%) translateX(50%);
+          -ms-transform: translateY(-50%) translateX(50%);
+        };
         max-height: 100%;
         max-width: 100%;
       }
@@ -171,7 +180,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
           border-#{$default-float}-color: $clearing-arrow-color;
         }
       }
-    
+
       .clearing-main-prev.disabled,
       .clearing-main-next.disabled { opacity: 0.3; }