Elastic: Added style for .ui-slider

roundcube · Mar 9, 2018 · d4ced14 · d4ced14
1 parent e4ccc2b
commit d4ced14
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
@@ -331,6 +331,7 @@ input.smart-upload {
         -ms-hyphens: auto;
         hyphens: auto;
         overflow: hidden;
+        margin-bottom: 0;
     }
 }
 
@@ -1043,6 +1044,29 @@ html.touch .popupmenu.form {
     }
 }
 
+/*** Percent input with jQuery-UI slider ***/
+
+
+// Structure: <input><span.label><div.ui-slider>
+.input-percent-slider {
+    display: flex;
+    align-items: center;
+
+    input {
+        max-width: 4em;
+    }
+
+    span.label {
+        line-height: 2.4;
+        padding: 0 .5rem 0 .25rem;
+    }
+
+    div.ui-slider {
+        flex: 1;
+        margin: 0 .5em;
+    }
+}
+
 /*** Image upload widget ***/
 
 .image-upload {

diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
@@ -208,6 +208,26 @@
     }
 }
 
+/* Slider widget */
+
+.ui-slider {
+    box-shadow: none;
+
+    .ui-slider-range {
+        border-radius: .3rem;
+        background: lighten(@color-main, 30%);
+    }
+
+    .ui-slider-handle {
+        border-radius: .3rem;
+
+        &.ui-state-active {
+            background: @color-main;
+            border-color: @color-main-dark;
+        }
+    }
+}
+
 /* Datepicker widget */
 
 .ui-datepicker {