Merge pull request #383 from marekdedic/no-button

Replaced <button> with <div>
marekdedic · Aug 9, 2022 · 3718457 · 3718457
2 parents 3192700 + c41e2d5
commit 3718457
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 21 deletions.
diff --git a/src/imagelightbox.css b/src/imagelightbox.css
@@ -163,12 +163,10 @@
     width: 4em; /* 53.3 */
     height: 4em; /* 53.3 */
     background-color: rgba(130, 130, 130, 0.8);
-    vertical-align: middle;
     display: none;
     position: fixed;
     z-index: 10001;
     top: 50%;
-    padding: 0;
     margin-top: -3.75em; /* 60 */
 }
 .imagelightbox-arrow:hover {
@@ -184,22 +182,19 @@
     right: 2.5em; /* 40 */
 }
 .imagelightbox-arrow:before {
-    width: 0;
-    height: 0;
     border: 1em solid transparent;
     content: '';
-    display: inline-block;
-    margin-bottom: -7%;
+    position: absolute;
+    top: 25%;
+    left: 50%;
 }
 .imagelightbox-arrow-left:before {
-    border-left: none;
     border-right-color: #fff;
-    margin-left: -0.35em;
+    margin-left: -1.7em;
 }
 .imagelightbox-arrow-right:before {
-    border-right: none;
     border-left-color: #fff;
-    margin-left: 0.2em;
+    margin-left: -0.3em;
 }
 
 .imagelightbox-loading,
@@ -223,11 +218,6 @@
         top: 1.25em; /* 20 */
         right: 1.25em; /* 20 */
     }
-    .imagelightbox-arrow {
-        width: 2.5em; /* 40 */
-        height: 3.75em; /* 60 */
-        margin-top: -1.875em; /* 30 */
-    }
     .imagelightbox-arrow-left {
         left: 1.25em; /* 20 */
     }

diff --git a/src/imagelightbox.ts b/src/imagelightbox.ts
@@ -18,21 +18,18 @@
     const $activityObject = $("<div/>")
             .attr("class", "imagelightbox-loading")
             .append($("<div/>")),
-        $arrowLeftObject = $("<button/>", {
-            type: "button",
+        $arrowLeftObject = $("<div/>", {
             class: "imagelightbox-arrow imagelightbox-arrow-left",
         }),
-        $arrowRightObject = $("<button/>", {
-            type: "button",
+        $arrowRightObject = $("<div/>", {
             class: "imagelightbox-arrow imagelightbox-arrow-right",
         }),
         $arrows = $arrowLeftObject.add($arrowRightObject),
         $captionObject = $("<div/>", {
             class: "imagelightbox-caption",
             html: "&nbsp;",
         }),
-        $buttonObject = $("<button/>", {
-            type: "button",
+        $buttonObject = $("<div/>", {
             class: "imagelightbox-close",
         }),
         $overlayObject = $("<div/>", {