* use svg image for the handle

JoomlaLABS · Aug 31, 2020 · b133a2c · b133a2c
1 parent 92e123a
commit b133a2c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/media/css/imagecomparisonslider.css b/media/css/imagecomparisonslider.css
@@ -129,7 +129,7 @@
     margin-left: -22px;
     margin-top: -22px;
     border-radius: 50%;
-    /* background: #dc717d url("../img/cd-arrows.svg") no-repeat center center; */
+    /* background: var(--primary)  no-repeat center center; */
     cursor: move;
     box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
     opacity: 0;
@@ -139,14 +139,20 @@
     -o-transform: translate3d(0, 0, 0) scale(0);
     transform: translate3d(0, 0, 0) scale(0);
 }
-.cs-handle:before {
-    position: absolute;
-    font-family: 'Font Awesome 5 Free';
-    font-size: 1.5rem;
-    top: 6px;
-    left: 12px;
-    content: "\f337";
+.cs-handle .cs-icon {
+    height: 36px;
+    width: 36px;
+    display: inline-block;
+    margin-top: 4px;
+    margin-left: 4px;
+    -webkit-mask: url("../images/slide-h.svg") no-repeat 50% 50%;
+    mask: url("../images/slide-h.svg") no-repeat 50% 50%;
+    background-color: #ffffff;
+}
+.cs-handle:hover .cs-icon {
+    background-color: #ececec;
 }
+
 .cs-handle.draggable {
     /* change background color when element is active */
     /* background-color: #445b7c; */

diff --git a/media/images/slide-h.svg b/media/images/slide-h.svg
diff --git a/media/images/slide-v.svg b/media/images/slide-v.svg
diff --git a/mod_joomlalabs_imagecomparisonslider_module.xml b/mod_joomlalabs_imagecomparisonslider_module.xml
@@ -7,7 +7,7 @@
 	<authorUrl>https://joomlalabs.com</authorUrl>
 	<copyright>Copyright (C) 2015 - 2020 Joomla!LABS. All rights reserved.</copyright>
 	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
-	<version>1.1.1</version>
+	<version>1.2.0</version>
 	<description>MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_XML_DESCRIPTION</description>
 
 	<files>
@@ -19,6 +19,7 @@
 	</files>
 
 	<media destination="mod_joomlalabs_imagecomparisonslider_module" folder="media">
+		<folder>images</folder>
 		<folder>css</folder>
 		<folder>js</folder>
 	</media>

diff --git a/tmpl/default.php b/tmpl/default.php
@@ -34,5 +34,5 @@
         <span class="cs-image-label" data-type="left"><?php echo $left_caption; ?></span>
     </div>
 
-    <span class="cs-handle btn-primary"></span> <!-- slider handle -->
+    <span class="cs-handle btn-primary"><i class="cs-icon"></i></span> <!-- slider handle -->
 </figure> <!-- cs-image-container -->