position custom color picker

FortAwesome · Jul 25, 2024 · 4e81458 · 4e81458
1 parent f0845ed
commit 4e81458
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/block-editor/src/colors.js b/block-editor/src/colors.js
@@ -110,7 +110,10 @@ export default ({ themeColors, onChange, attributes }) => {
         </div>
       </Tooltip>
       {showCustomColorPicker &&
-        <ColorPicker defaultValue={customColorPickerDefaultValue()} onChange={(color) => setColor({ color, custom: true })} />}
+        <div className="fawp-color-picker-wrapper">
+          <ColorPicker defaultValue={customColorPickerDefaultValue()} onChange={(color) => setColor({ color, custom: true })} />
+        </div>
+      }
     </div>
   );
 };
diff --git a/block-editor/src/index.css b/block-editor/src/index.css
@@ -70,6 +70,7 @@
 }
 
 .fa-icon-modifier {
+  position: relative;
   display: flex;
   gap: var(--spacing-xl-fa);
 }
@@ -203,6 +204,17 @@ button:disabled .fa-icon-modifier-control {
   box-shadow: 0 0 0 2px var(--white-fa), 0 0 0 4px var(--black-fa);
 }
 
+.fawp-color-picker-wrapper {
+  position: absolute;
+  padding: 10px;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0,0,0,.5);
+  border: 1px solid gray;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+}
+
 .icon-animations .animation-controls button {
   flex: 1 0 33%;
 }