Update nouislider CSS to 15.2.0, and move our custom css to another f…

…ile to make updating easier.
jupyter-widgets · Jun 25, 2021 · b0251d2 · b0251d2
1 parent 7f3efb6
commit b0251d2
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 137 deletions.
diff --git a/packages/controls/css/nouislider-custom.css b/packages/controls/css/nouislider-custom.css
@@ -0,0 +1,99 @@
+/* Custom CSS */
+
+.widget-slider .noUi-connect {
+  background: rgb(33, 150, 243);
+}
+
+.widget-slider .noUi-horizontal {
+  height: var(--jp-widgets-slider-track-thickness);
+}
+
+.widget-slider .noUi-vertical {
+  width: var(--jp-widgets-slider-track-thickness);
+}
+
+.widget-slider .noUi-horizontal .noUi-handle {
+  width: var(--jp-widgets-slider-handle-size);
+  height: var(--jp-widgets-slider-handle-size);
+  border-radius: 50%;
+  top: calc(
+    (
+        var(--jp-widgets-slider-track-thickness) -
+          var(--jp-widgets-slider-handle-size)
+      ) / 2
+  );
+  right: calc(var(--jp-widgets-slider-handle-size) / -2);
+}
+
+.widget-slider .noUi-vertical .noUi-handle {
+  height: var(--jp-widgets-slider-handle-size);
+  width: var(--jp-widgets-slider-handle-size);
+  border-radius: 50%;
+  right: calc(
+    (
+        var(--jp-widgets-slider-handle-size) -
+          var(--jp-widgets-slider-track-thickness)
+      ) / -2
+  );
+  top: calc(var(--jp-widgets-slider-handle-size) / -2);
+}
+
+.widget-slider .noUi-handle:after {
+  content: none;
+}
+
+.widget-slider .noUi-handle:before {
+  content: none;
+}
+
+.widget-slider .noUi-target {
+  background: #fafafa;
+  border-radius: 4px;
+  border: 1px;
+  /* box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; */
+}
+
+.widget-slider .ui-slider {
+  border: var(--jp-widgets-slider-border-width) solid var(--jp-layout-color3);
+  background: var(--jp-layout-color3);
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 0px;
+}
+
+.widget-slider .noUi-handle {
+  width: var(--jp-widgets-slider-handle-size);
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  background: #fff;
+  cursor: default;
+  box-shadow: none;
+  outline: none;
+}
+
+.widget-slider .noUi-target:not([disabled]) .noUi-handle:hover,
+.widget-slider .noUi-target:not([disabled]) .noUi-handle:focus {
+  background-color: var(--jp-widgets-slider-active-handle-color);
+  border: var(--jp-widgets-slider-border-width) solid
+    var(--jp-widgets-slider-active-handle-color);
+}
+
+.widget-slider [disabled].noUi-target {
+  opacity: 0.35;
+}
+
+.widget-slider .noUi-connects {
+  overflow: visible;
+  z-index: 0;
+  background: var(--jp-layout-color3);
+}
+
+.widget-slider .noUi-vertical .noUi-connect {
+  width: calc(100% + 2px);
+  right: -1px;
+}
+
+.widget-slider .noUi-horizontal .noUi-connect {
+  height: calc(100% + 2px);
+  top: -1px;
+}