Make Customizer a floating window

docs/_react/bulma-customizer/src/components/Color.jsx

@@ -5,6 +5,7 @@ import Slider from "./Slider";
 
 import cn from "./Color.module.css";
 import { CustomizerContext } from "../App";
+import classNames from "classnames";
 
 function hslToHex(h, s, l) {
   s /= 100;
@@ -195,6 +196,11 @@ function Color({ color }) {
     Number(h.current) === Number(h.start) &&
     Number(s.current) === Number(s.start) &&
     Number(l.current) === Number(l.start);
+  const resetClass = classNames({
+    button: true,
+    "is-danger is-outlined": !isDisabled,
+  });
+  const resetStyle = isDisabled ? { opacity: 0.1 } : {};
 
   return (
     <div className={cn.main} style={mainStyle}>
@@ -210,7 +216,8 @@ function Color({ color }) {
           </button>
 
           <button
-            className="button"
+            className={resetClass}
+            style={resetStyle}
             onClick={handleReset}
             disabled={isDisabled}
           >

docs/_react/bulma-customizer/src/components/VarItem.jsx

@@ -28,7 +28,9 @@ function VarItem({ id }) {
 
   const isDisabled = cssvar.current == cssvar.start;
   const resetClass = classNames({
-    button: true,
+    "button is-small": true,
+    "is-float-right": true,
+    "ml-2": true,
     "is-danger is-outlined": !isDisabled,
   });
   const resetStyle = isDisabled ? { opacity: 0.1 } : {};
@@ -72,22 +74,20 @@ function VarItem({ id }) {
   return (
     <div className={cn.main}>
       <div className={cn.side}>
+        <button
+          className={resetClass}
+          onClick={handleReset}
+          disabled={isDisabled}
+          style={resetStyle}
+        >
+          Reset
+        </button>
+
         <div className={cn.name}>
           <code>{cssvar.id}</code>
         </div>
 
         <div className={cn.description}>{cssvar.description}</div>
-
-        <div className="buttons are-small">
-          <button
-            className={resetClass}
-            onClick={handleReset}
-            disabled={isDisabled}
-            style={resetStyle}
-          >
-            Reset
-          </button>
-        </div>
       </div>
 
       <div className={cn.slider}>{control}</div>

docs/_react/bulma-customizer/src/components/VarItem.module.css

@@ -1,7 +1,5 @@
 .main {
   background-color: var(--bulma-body-background-color);
-  align-items: start;
-  display: flex;
   gap: var(--var-item-gap);
   box-shadow: 0 0 0 1px var(--bulma-border);
   padding: var(--var-item-padding);
@@ -15,7 +13,6 @@
 
 .side {
   flex-shrink: 0;
-  width: var(--var-item-side-width);
 }
 
 .name {