Merge pull request #50 from ulaharbmg/JS-321

JS-321: Remove margin for zoom buttons in fullscreen
magento · Nov 24, 2015 · 89271f7 · 89271f7
2 parents ec77114 + 5625f14
commit 89271f7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 27 deletions.
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
@@ -450,8 +450,8 @@
     &:extend(.fotorama-sprite);
     background-position: 0 0;
     height: @size-fotorama-block;
-    right: 2px;
-    top: 2px;
+    right: 0;
+    top: 0;
     width: @size-fotorama-block;
     z-index: @z-index-10;
     display:  none;

diff --git a/lib/web/mage/gallery/module/_focus.less b/lib/web/mage/gallery/module/_focus.less
@@ -5,27 +5,24 @@
 
 .fotorama__fullscreen-icon:focus,
 .fotorama__zoom-out:focus,
-.fotorama__zoom-in:focus {
-    box-shadow:@focus__box-shadow;
-}
-
-.fotorama__arr:focus {
+.fotorama__zoom-in:focus,
+.fotorama__arr:focus,
+.fotorama__arr:focus,
+.fotorama__stage__shaft:focus,
+.fotorama__nav__frame--thumb:focus .fotorama__thumb,
+.fotorama__nav__frame--dot:focus .fotorama__dot {
     box-shadow: none;
-}
-
-.fotorama__arr:focus:after,
-.fotorama__stage__shaft:focus:after,
-.fotorama__nav__frame--thumb:focus .fotorama__thumb:after,
-.fotorama__nav__frame--dot:focus .fotorama__dot:after{
-    box-shadow: @focus__box-shadow;
-    border-radius: inherit;
-    content: '';
-    position: absolute;
-    left: 3px;
-    top: 3px;
-    bottom: 3px;
-    right: 3px;
-    z-index: 10;
+    &:after {
+        content: '';
+        border-radius: inherit;
+        position: absolute;
+        top: @fotorama-inner-box-shadow;
+        right: @fotorama-inner-box-shadow;
+        left: @fotorama-inner-box-shadow;
+        bottom: @fotorama-inner-box-shadow;
+        box-shadow: @focus__box-shadow;
+        z-index: @z-index-10;
+    }
 }
 
 .fotorama__nav__frame--thumb:focus,

diff --git a/lib/web/mage/gallery/module/_fullscreen.less b/lib/web/mage/gallery/module/_fullscreen.less
@@ -13,7 +13,6 @@
     right: 0 !important;
     top: 0 !important;
     width: 100% !important;
-    height: 100% !important;
     z-index: @z-index-10 !important;
     &:extend(.fotorama-gpu);
     .fotorama__wrap {
@@ -35,19 +34,19 @@
 
     }
     .fotorama__zoom-out {
-        top: 83px;
+        top: 80px;
         &:extend(.fotorama-sprite);
         background-position: 0 (-@size-fotorama-block) !important;
         &.fotorama__zoom-out--disabled {
-            display: none
+            display: none;
         }
     }
     .fotorama__zoom-in {
-        top: 2px;
+        top: 0;
         &:extend(.fotorama-sprite);
         background-position: 0 0 !important;
         &.fotorama__zoom-in--disabled {
-            display: none
+            display: none;
         }
     }
 }

diff --git a/lib/web/mage/gallery/module/_variables.less b/lib/web/mage/gallery/module/_variables.less
@@ -9,3 +9,4 @@
 @size-fotorama-block: 80px;
 @fotorama-thumb-arrow: 30px;
 @fotorama-fullscreen-zoom-time: 0.3s;
+@fotorama-inner-box-shadow: 3px;