fix: adjust the position of toggle on/off

kingsdigitallab · Oct 25, 2023 · 5e40731 · 5e40731
1 parent 4ad902b
commit 5e40731
Showing 1 changed file with 14 additions and 6 deletions.
diff --git a/frontend/_includes/stories.liquid b/frontend/_includes/stories.liquid
@@ -112,7 +112,7 @@ layout: base.liquid
                   <input type="checkbox" id="toggle-all-filters-one" data-featuretype="all" data-criteria="map_source" class="map_filter" data-filtervalue="12-19" />
                   <span class="slider round"></span>
                 </label>
-                <span class="switch-label">Toggle All Filters</span>
+                <label for="toggle-all-filters-one" class="switch-label">Toggle All Filters</label>
               </div>
 
 
@@ -542,12 +542,12 @@ body {
             background-color: #257c00; /* Change color on hover */
         }
 
-/* Style the switch */
+/* style the switch, on/off */
 .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
-  height: 34px;
+  width: 50px;
+  height: 24px;
 }
 
 .switch input {
@@ -572,8 +572,8 @@ body {
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
+  height: 16px;
+  width: 16px;
   left: 4px;
   bottom: 4px;
   background-color: white;
@@ -595,6 +595,14 @@ input:checked + .slider:before {
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
+.filter-controls {
+  display: flex;
+  align-items: center;
+}
+
+.switch-label {
+  margin-left: 15px; /* change this margin if toggle text is too close to the icon */
+}
 </style>