feat(slider): support ui labels

fomantic · Oct 23, 2024 · 15d4e6b · 15d4e6b
1 parent 28f0a4f
commit 15d4e6b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less
@@ -232,6 +232,14 @@
                 top: auto;
                 bottom: 100%;
             }
+            & when (@variationSliderUiLabel) {
+                .ui.labeled.slider.bottom.aligned .labels .ui.label {
+                    margin-bottom: -@uiLabelMargin;
+                }
+                .ui.labeled.ticked.slider.bottom.aligned .labels .ui.label::after {
+                    margin-bottom: @uiLabelMargin;
+                }
+            }
         }
         .ui.labeled.ticked.slider > .labels .halftick.label::after {
             height: (@labelHeight / 2);
@@ -242,6 +250,17 @@
             }
         }
     }
+    & when (@variationSliderUiLabel) {
+        .ui.labeled.slider:not(.vertical):not(.bottom) .labels .ui.label {
+            margin-top: -@uiLabelMargin;
+        }
+        .ui.labeled.ticked.slider:not(.vertical):not(.bottom) .labels .ui.label::after {
+            margin-top: @uiLabelMargin;
+        }
+        .ui.labeled.ticked.slider:not(.vertical) > .labels .ui.label::after {
+            height: @uiLabelTickHeight;
+        }
+    }
 
     & when (@variationSliderVertical) {
         /* Vertical Labels */
@@ -279,6 +298,11 @@
                 transform: translate(-100%, 50%);
             }
         }
+        & when (@variationSliderUiLabel) {
+            .ui.labeled.ticked.vertical.slider:not(.right) > .labels .ui.label::after {
+                margin-left: @verticalUiLabelMargin;
+            }
+        }
         & when (@variationSliderRightAligned) {
             .ui.labeled.vertical.right.aligned.slider > .labels {
                 transform: translateX(50%);
@@ -301,6 +325,11 @@
                     transform: translate(100%, 50%);
                 }
             }
+            & when (@variationSliderUiLabel) {
+                .ui.labeled.ticked.vertical.right.aligned.slider > .labels .ui.label::after {
+                    margin-right: @verticalUiLabelMargin;
+                }
+            }
         }
     }
 }

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -716,6 +716,7 @@
 @variationSliderHighlight: true;
 @variationSliderBottomAligned: true;
 @variationSliderRightAligned: true;
+@variationSliderUiLabel: true;
 @variationSliderSizes: small, large, big;
 @variationSliderColors: @variationAllColors;
 

diff --git a/src/themes/default/modules/slider.variables b/src/themes/default/modules/slider.variables
@@ -60,13 +60,16 @@
 /* Vertical */
 @verticalPadding: 0.5em 1em;
 @verticalTickDistance: 0.6em;
+@verticalUiLabelMargin: 0.3em;
 
 /* Labeled */
 @labelHeight: @height;
 @labelWidth: 1px;
 @labelColor: @background;
 @labelPadding: 0.2em 0;
 @invertedLabelColor: @invertedBackground;
+@uiLabelMargin: 0.5em;
+@uiLabelTickHeight: 2em;
 
 /* Hover */
 @hoverVarOpacity: 0;