color picker styles

quadratichq · Sep 11, 2024 · fb7b7f5 · fb7b7f5
1 parent 8978160
commit fb7b7f5
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 69 deletions.
diff --git a/quadratic-client/src/app/ui/components/qColorPicker.scss b/quadratic-client/src/app/ui/components/qColorPicker.scss
@@ -0,0 +1,68 @@
+.compact-picker {
+  width: 160px !important;
+
+  /* hides custom RBG input on color picker */
+  .flexbox-fix {
+    display: none !important;
+  }
+
+  div span div {
+    position: relative;
+    border-radius: 2px;
+    overflow: hidden;
+
+    &:before {
+      content: '';
+      box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}
+
+.color-picker-clear {
+  display: flex;
+  margin-bottom: 5px;
+  justify-content: center;
+  font-size: 0.875rem;
+}
+
+.color-picker-clear span {
+  text-indent: 20px;
+  position: relative;
+  cursor: pointer;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 1px;
+    background: #fff;
+    box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
+    height: 15px;
+    width: 15px;
+    overflow: hidden;
+  }
+  &:after {
+    content: '';
+    width: 2px;
+    height: calc(100% + 2px);
+    position: absolute;
+    top: 1px;
+    left: 0;
+    background: red;
+    transform: rotate(45deg) translate(3px, -6px);
+    border-radius: 2px;
+  }
+}
+
+.color-picker-submenu .szh-menu {
+  padding: 4px !important;
+}
+
+.color-picker-submenu .szh-menu > div > div {
+  box-shadow: none !important;
+}
diff --git a/quadratic-client/src/app/ui/components/qColorPicker.tsx b/quadratic-client/src/app/ui/components/qColorPicker.tsx
@@ -1,4 +1,5 @@
 import { ColorChangeHandler, CompactPicker } from 'react-color';
+import './qColorPicker.scss';
 
 interface IProps {
   onChangeComplete: ColorChangeHandler | undefined;
@@ -9,6 +10,7 @@ export const QColorPicker = (props: IProps) => {
   return (
     <>
       <CompactPicker
+        className="color-picker-submenu"
         onChangeComplete={props.onChangeComplete}
         colors={[
           '#F9D2CE' /* first row of colors */,

diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/formatMenuStyles.scss b/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/formatMenuStyles.scss
@@ -1,47 +1,3 @@
-.color-picker-submenu .szh-menu {
-  padding: 4px !important;
-}
-
-.color-picker-submenu .szh-menu > div > div {
-  box-shadow: none !important;
-}
-
-.color-picker-clear {
-  display: flex;
-  margin-bottom: 5px;
-  justify-content: center;
-  font-size: 0.875rem;
-}
-
-.color-picker-clear span {
-  text-indent: 20px;
-  position: relative;
-  cursor: pointer;
-
-  &:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 1px;
-    background: #fff;
-    box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
-    height: 15px;
-    width: 15px;
-    overflow: hidden;
-  }
-  &:after {
-    content: '';
-    width: 2px;
-    height: calc(100% + 2px);
-    position: absolute;
-    top: 1px;
-    left: 0;
-    background: red;
-    transform: rotate(45deg) translate(3px, -6px);
-    border-radius: 2px;
-  }
-}
-
 .lineStyleBorder {
   width: 110px;
   margin-top: 3px;
@@ -81,28 +37,3 @@
   border-bottom: 1px solid black;
   bottom: 3px;
 }
-
-.compact-picker {
-  width: 160px !important;
-
-  /* hides custom RBG input on color picker */
-  .flexbox-fix {
-    display: none !important;
-  }
-
-  div span div {
-    position: relative;
-    border-radius: 2px;
-    overflow: hidden;
-
-    &:before {
-      content: '';
-      box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-    }
-  }
-}