Add Components

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

@@ -1,9 +1,11 @@
 .main {
+  background-color: var(--bulma-body-background-color);
   display: flex;
   flex-wrap: wrap;
-  gap: 1.5rem;
-  border-bottom: 1px solid var(--bulma-border);
-  padding: 1.25rem 0;
+  gap: var(--var-item-gap);
+  box-shadow: 0 0 0 1px var(--bulma-border);
+  padding: var(--var-item-padding);
+  justify-content: center;
 }
 
 .side {
@@ -19,6 +21,7 @@
 }
 
 .name {
+  color: var(--bulma-primary);
   gap: 1rem;
   display: flex;
   align-items: center;

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

@@ -5,6 +5,7 @@ import Slider from "./Slider";
 import { CustomizerContext } from "../App";
 
 import cn from "./VarItem.module.css";
+import classNames from "classnames";
 
 function VarItem({ id }) {
   const { cssvars, updateVar } = useContext(CustomizerContext);
@@ -26,6 +27,11 @@ function VarItem({ id }) {
   };
 
   const isDisabled = cssvar.current == cssvar.start;
+  const resetClass = classNames({
+    button: true,
+    "is-danger is-outlined": !isDisabled,
+  });
+  const resetStyle = isDisabled ? { opacity: 0.1 } : {};
 
   let control;
 
@@ -70,11 +76,14 @@ function VarItem({ id }) {
           <code>{cssvar.id}</code>
         </div>
 
+        <div className={cn.description}>{cssvar.description}</div>
+
         <div className="buttons are-small">
           <button
-            className="button"
+            className={resetClass}
             onClick={handleReset}
             disabled={isDisabled}
+            style={resetStyle}
           >
             Reset
           </button>
@@ -82,8 +91,6 @@ function VarItem({ id }) {
       </div>
 
       <div className={cn.slider}>{control}</div>
-
-      <div className={cn.description}>{cssvar.description}</div>
     </div>
   );
 }

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

@@ -1,9 +1,10 @@
 .main {
+  background-color: var(--bulma-body-background-color);
   align-items: start;
   display: flex;
-  gap: 1.5rem;
-  border-bottom: 1px solid var(--bulma-border);
-  padding: 1.25rem;
+  gap: var(--var-item-gap);
+  box-shadow: 0 0 0 1px var(--bulma-border);
+  padding: var(--var-item-padding);
   transition-property: background-color;
   transition-duration: var(--bulma-duration);
 }
@@ -14,7 +15,7 @@
 
 .side {
   flex-shrink: 0;
-  width: 15rem;
+  width: var(--var-item-side-width);
 }
 
 .name {
@@ -25,6 +26,7 @@
 }
 
 .name code {
+  color: var(--bulma-primary);
   font-size: 1em;
   font-weight: 400;
   padding: 0;
@@ -36,8 +38,8 @@
   display: flex;
   gap: 1.5rem;
   /* padding: 2px 0; */
-  width: 30rem;
   flex-shrink: 0;
+  width: var(--var-item-slider-width);
 }
 
 .form {
@@ -64,4 +66,6 @@
 .description {
   flex-shrink: 1;
   flex-grow: 1;
+  margin: -0.25rem 0 0.5rem;
+  font-size: 0.875em;
 }