From b0251d2579c6fb1afecdd702f69a7c5975501e43 Mon Sep 17 00:00:00 2001 From: Jason Grout Date: Thu, 24 Jun 2021 17:46:56 -0700 Subject: [PATCH] Update nouislider CSS to 15.2.0, and move our custom css to another file to make updating easier. --- packages/controls/css/nouislider-custom.css | 99 +++++++++++ packages/controls/css/nouislider.css | 185 +++++--------------- packages/controls/css/widgets-base.css | 1 + 3 files changed, 148 insertions(+), 137 deletions(-) create mode 100644 packages/controls/css/nouislider-custom.css diff --git a/packages/controls/css/nouislider-custom.css b/packages/controls/css/nouislider-custom.css new file mode 100644 index 0000000000..1783c94bda --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/packages/controls/css/nouislider.css b/packages/controls/css/nouislider.css index a13a47bb0b..bac6ccf80a 100644 --- a/packages/controls/css/nouislider.css +++ b/packages/controls/css/nouislider.css @@ -1,8 +1,8 @@ -/* taken from https://github.com/leongersen/noUiSlider/blob/5481ab7450a6d48ab05c32e256718fb04dd90245/distribute/nouislider.css +/* taken from the 15.2.0 release * each class has been prefixed with .widget-slider to scope it to our slider */ -/*! nouislider - 14.1.1 - 12/15/2019 */ +/*! nouislider - 15.2.0 - 15 Jun 2021 */ /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. @@ -43,7 +43,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI z-index: 1; } /* Wrapper for all connect elements. - */ +*/ .widget-slider .noUi-connects { overflow: hidden; z-index: 0; @@ -70,14 +70,14 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI width: 10%; } /* Offset direction - */ +*/ .widget-slider .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin { left: 0; right: auto; } /* Give origins 0 height/width so they don't interfere with clicking the - * connect elements. - */ +* connect elements. +*/ .widget-slider .noUi-vertical .noUi-origin { width: 0; } @@ -102,7 +102,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI cursor: inherit !important; } /* Slider size and handle placement; - */ +*/ .widget-slider .noUi-horizontal { height: 18px; } @@ -113,7 +113,6 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI top: -6px; } .widget-slider .noUi-vertical { - height: 100%; width: 18px; } .widget-slider .noUi-vertical .noUi-handle { @@ -127,22 +126,22 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI right: auto; } /* Styling; - * Giving the connect element a border radius causes issues with using transform: scale - */ +* Giving the connect element a border radius causes issues with using transform: scale +*/ .widget-slider .noUi-target { - background: #fafafa; + background: #FAFAFA; border-radius: 4px; - border: 1px solid #d3d3d3; - box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbb; + border: 1px solid #D3D3D3; + box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; } .widget-slider .noUi-connects { border-radius: 3px; } .widget-slider .noUi-connect { - background: #3fb8af; + background: #3FB8AF; } /* Handles and cursors; - */ +*/ .widget-slider .noUi-draggable { cursor: ew-resize; } @@ -150,25 +149,25 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI cursor: ns-resize; } .widget-slider .noUi-handle { - border: 1px solid #d9d9d9; + border: 1px solid #D9D9D9; border-radius: 3px; - background: #fff; + background: #FFF; cursor: default; - box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb; + box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } .widget-slider .noUi-active { - box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb; + box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; } /* Handle stripes; - */ +*/ .widget-slider .noUi-handle:before, .widget-slider .noUi-handle:after { - content: ''; + content: ""; display: block; position: absolute; height: 14px; width: 1px; - background: #e8e7e6; + background: #E8E7E6; left: 14px; top: 6px; } @@ -186,9 +185,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI top: 17px; } /* Disabled state; - */ +*/ .widget-slider [disabled] .noUi-connect { - background: #b8b8b8; + background: #B8B8B8; } .widget-slider [disabled].noUi-target, .widget-slider [disabled].noUi-handle, @@ -196,8 +195,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI cursor: not-allowed; } /* Base; - * - */ +* +*/ .widget-slider .noUi-pips, .widget-slider .noUi-pips * { -moz-box-sizing: border-box; @@ -208,8 +207,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI color: #999; } /* Values; - * - */ +* +*/ .widget-slider .noUi-value { position: absolute; white-space: nowrap; @@ -220,21 +219,21 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI font-size: 10px; } /* Markings; - * - */ +* +*/ .widget-slider .noUi-marker { position: absolute; - background: #ccc; + background: #CCC; } .widget-slider .noUi-marker-sub { - background: #aaa; + background: #AAA; } .widget-slider .noUi-marker-large { - background: #aaa; + background: #AAA; } /* Horizontal layout; - * - */ +* +*/ .widget-slider .noUi-pips-horizontal { padding: 10px 0; height: 80px; @@ -262,8 +261,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI height: 15px; } /* Vertical layout; - * - */ +* +*/ .widget-slider .noUi-pips-vertical { padding: 0 10px; height: 100%; @@ -293,7 +292,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI .widget-slider .noUi-tooltip { display: block; position: absolute; - border: 1px solid #d9d9d9; + border: 1px solid #D9D9D9; border-radius: 3px; background: #fff; color: #000; @@ -313,103 +312,15 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI top: 50%; right: 120%; } - -/* 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; +.widget-slider .noUi-horizontal .noUi-origin > .noUi-tooltip { + -webkit-transform: translate(50%, 0); + transform: translate(50%, 0); + left: auto; + bottom: 10px; +} +.widget-slider .noUi-vertical .noUi-origin > .noUi-tooltip { + -webkit-transform: translate(0, -18px); + transform: translate(0, -18px); + top: auto; + right: 28px; } diff --git a/packages/controls/css/widgets-base.css b/packages/controls/css/widgets-base.css index c84090ed19..1310eb4a02 100644 --- a/packages/controls/css/widgets-base.css +++ b/packages/controls/css/widgets-base.css @@ -10,6 +10,7 @@ @import './lumino.css'; @import './nouislider.css'; +@import './nouislider-custom.css'; :root { --jp-widgets-color: var(--jp-content-font-color1);