Merge pull request #33 from imgix/31-luminousgallery-ux

Default LuminousGallery style UX improvements
strawdynamics · Sep 7, 2016 · 463f83f · 463f83f
2 parents 8d9ccb5 + cad7a16
commit 463f83f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 27 deletions.
diff --git a/dist/luminous-basic.css b/dist/luminous-basic.css
@@ -130,24 +130,20 @@
   padding: 0;
   outline: 0;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 35%;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 100px;
+  max-height: 100%;
+  width: 60px;
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 120ms ease-out;
-}
-
-.lum-gallery-button:hover {
-  opacity: 1;
 }
 
 .lum-previous-button {
-  left: 0;
+  left: 12px;
 }
 
 .lum-next-button {
-  right: 0;
+  right: 12px;
 }
 
 .lum-gallery-button:after {
@@ -163,15 +159,15 @@
 .lum-previous-button:after {
   transform: translateY(-50%) rotate(-45deg);
   border-left: 4px solid rgba(255, 255, 255, 0.8);
-  box-shadow: -1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: -2px 0 rgba(0, 0, 0, 0.2);
   left: 12%;
   border-radius: 3px 0 0 0;
 }
 
 .lum-next-button:after {
   transform: translateY(-50%) rotate(45deg);
   border-right: 4px solid rgba(255, 255, 255, 0.8);
-  box-shadow: 1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 2px 0 rgba(0, 0, 0, 0.2);
   right: 12%;
   border-radius: 0 3px 0 0;
 }

diff --git a/dist/luminous-basic.min.css b/dist/luminous-basic.min.css
diff --git a/src/css/luminous-basic.css b/src/css/luminous-basic.css
@@ -130,24 +130,20 @@
   padding: 0;
   outline: 0;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 35%;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 100px;
+  max-height: 100%;
+  width: 60px;
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 120ms ease-out;
-}
-
-.lum-gallery-button:hover {
-  opacity: 1;
 }
 
 .lum-previous-button {
-  left: 0;
+  left: 12px;
 }
 
 .lum-next-button {
-  right: 0;
+  right: 12px;
 }
 
 .lum-gallery-button:after {
@@ -163,15 +159,15 @@
 .lum-previous-button:after {
   transform: translateY(-50%) rotate(-45deg);
   border-left: 4px solid rgba(255, 255, 255, 0.8);
-  box-shadow: -1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: -2px 0 rgba(0, 0, 0, 0.2);
   left: 12%;
   border-radius: 3px 0 0 0;
 }
 
 .lum-next-button:after {
   transform: translateY(-50%) rotate(45deg);
   border-right: 4px solid rgba(255, 255, 255, 0.8);
-  box-shadow: 1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 2px 0 rgba(0, 0, 0, 0.2);
   right: 12%;
   border-radius: 0 3px 0 0;
 }