Fix: Added slider fill and marking styling (fixes #407) (#408)

adaptlearning · Apr 3, 2023 · 992d162 · 992d162
1 parent 4f36c11
commit 992d162
Showing 1 changed file with 43 additions and 7 deletions.
diff --git a/less/plugins/adapt-contrib-slider/slider.less b/less/plugins/adapt-contrib-slider/slider.less
@@ -1,6 +1,10 @@
+@slider-handle-width: 2rem;
+@slider-handle-height: 2rem;
+
+@slider-track-height: .375rem;
+
 .slider {
   // Numbers
-  // --------------------------------------------------
   &__number-container {
     min-height: 2.5rem;
   }
@@ -32,10 +36,7 @@
   }
 
   // Scale
-  // --------------------------------------------------
   &__scale-container {
-    margin-top: @item-margin * 2;
-    margin-bottom: @item-margin * 4;
     background-color: lighten(@black, 75%);
   }
 
@@ -44,8 +45,43 @@
   }
 
   // Slider bar
-  // --------------------------------------------------
-  &__item {
-    margin-bottom: @item-margin * 4;
+  &__item-input-track {
+    background-color: darken(@background-inverted, 20%);
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  &__item-input-fill {
+    background-color: @item-color;
+  }
+
+  // Class to show whether the users selection is in/correct
+  &__widget.show-user-answer.is-correct &__number-selection {
+    background-color: @validation-success;
+    color: @validation-success-inverted;
+  }
+
+  &__widget.show-user-answer.is-correct &__item-input-fill {
+    background-color: @validation-success;
+  }
+
+  &__widget.show-user-answer.is-incorrect &__number-selection {
+    background-color: @validation-error;
+    color: @validation-error-inverted;
+  }
+
+  &__widget.show-user-answer.is-incorrect &__item-input-fill {
+    background-color: @validation-error;
+  }
+
+  &__widget.show-correct-answer.is-correct &__item-input-fill,
+  &__widget.show-correct-answer.is-incorrect &__item-input-fill {
+    background-color: @validation-success;
+  }
+
+  &__widget.show-correct-answer.is-correct &__number-model-answer,
+  &__widget.show-correct-answer.is-incorrect &__number-model-answer {
+    background-color: @validation-success;
+    color: @validation-success-inverted;
   }
 }