Merge pull request #9 from snide/design/stop

Cleanup of thumb display
thompsongl · Sep 30, 2019 · a57ceff · a57ceff
2 parents 3f0b89d + 4f8efd5
commit a57ceff
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js
@@ -15,16 +15,16 @@ export const ColorStops = () => {
   const [addColor, setAddColor] = useState(generateRandomColor());
   const [colorStops, setColorStops] = useState([
     {
-      stop: 0,
-      color: '#ff0000',
+      stop: 20,
+      color: '#00B3A4',
     },
     {
-      stop: 25,
-      color: '#FFFF00',
+      stop: 50,
+      color: '#DB1374',
     },
     {
-      stop: 45,
-      color: '#008000',
+      stop: 65,
+      color: '#490092',
     },
   ]);
 
@@ -36,15 +36,15 @@ export const ColorStops = () => {
   const [extendedColorStops, setExtendedColorStops] = useState([
     {
       stop: 100,
-      color: '#ff0000',
+      color: '#00B3A4',
     },
     {
       stop: 250,
-      color: '#FFFF00',
+      color: '#DB1374',
     },
     {
       stop: 350,
-      color: '#008000',
+      color: '#490092',
     },
   ]);
 

diff --git a/src/components/color_picker/color_stops/_color_stops.scss b/src/components/color_picker/color_stops/_color_stops.scss
@@ -56,10 +56,16 @@
 }
 
 .euiColorStopThumb.euiRangeThumb:not(:disabled) {
+  // sass-lint:disable-block no-color-literals, indentation
   top: 0;
   margin-top: 0;
   pointer-events: auto;
   cursor: grab;
+  border: solid ($euiSizeXS - 1px) $euiColorEmptyShade;
+  box-shadow:
+    0 0 0 1px $euiColorMediumShade,
+    0 2px 2px -1px rgba($euiShadowColor, .2),
+    0 1px 5px -2px rgba($euiShadowColor, .2);
 
   &:active {
     cursor: grabbing;