+
@@ -225,72 +188,66 @@ function Color({ color }) {
-
-
- #
-
-
-
-
-
- Copy
-
+
-
Hue
-
-
- handleInputChange(e, h)}
- size="3"
- />
- {h.unit}
-
+
Hue
+
+
+
+ handleInputChange(e, h)}
+ size="3"
+ />
+ {h.unit}
+
+
-
Saturation
-
-
- handleInputChange(e, s)}
- size="3"
- />
- {s.unit}
-
+
Saturation
+
+
+
+ handleInputChange(e, s)}
+ size="3"
+ />
+ {s.unit}
+
+
-
Lightness
-
-
- handleInputChange(e, l)}
- size="3"
- />
- {l.unit}
-
+
Lightness
+
+
+
+ handleInputChange(e, l)}
+ size="3"
+ />
+ {l.unit}
+
+
-
diff --git a/docs/_react/bulma-customizer/src/components/Color.module.css b/docs/_react/bulma-customizer/src/components/Color.module.css
index 0e42a432..62a2164b 100644
--- a/docs/_react/bulma-customizer/src/components/Color.module.css
+++ b/docs/_react/bulma-customizer/src/components/Color.module.css
@@ -1,17 +1,9 @@
.main {
- background-color: var(--bulma-body-background-color);
- display: flex;
- flex-wrap: wrap;
- gap: var(--var-item-gap);
- box-shadow: 0 0 0 1px var(--bulma-border);
+ border-top: 1px solid var(--bulma-border);
padding: var(--var-item-padding);
justify-content: center;
}
-.side {
- width: 15rem;
-}
-
.swatch {
background-color: hsl(var(--h) var(--s) var(--l));
height: 1.25rem;
@@ -42,13 +34,23 @@
.line {
display: flex;
+ flex-wrap: wrap;
align-items: center;
- gap: 1.5rem;
+ gap: 0 1.5rem;
}
.line p {
color: var(--bulma-text-strong);
- width: 6rem;
+}
+
+.label {
+ width: 100%;
+}
+
+.slider {
+ display: flex;
+ align-items: center;
+ gap: 0 1.5rem;
}
.form {
@@ -56,6 +58,7 @@
align-items: center;
font-family: var(--bulma-family-code);
gap: 0.25em;
+ width: 6rem;
}
.form input {
@@ -71,3 +74,7 @@
.form span {
opacity: 0.5;
}
+
+.example {
+ margin-top: 0.5rem;
+}
diff --git a/docs/_react/bulma-customizer/src/components/Slider.jsx b/docs/_react/bulma-customizer/src/components/Slider.jsx
index 05fa1e69..3168ab88 100644
--- a/docs/_react/bulma-customizer/src/components/Slider.jsx
+++ b/docs/_react/bulma-customizer/src/components/Slider.jsx
@@ -67,11 +67,14 @@ function Slider({ id, color }) {
// }, [current, id, start, unit]);
useEffect(() => {
+ if (!isMoving) {
+ return;
+ }
const slider = sliderRef.current;
const sliderRect = slider.getBoundingClientRect();
const final = xToValue(x, sliderRect.width, min, max);
updateVar(id, final);
- }, [id, min, max, updateVar, x]);
+ }, [id, isMoving, min, max, updateVar, x]);
useEffect(() => {
const newX = valueToX(current, 360, min, max);
diff --git a/docs/_react/bulma-customizer/src/components/VarItem.module.css b/docs/_react/bulma-customizer/src/components/VarItem.module.css
index b6b98315..c75fafb8 100644
--- a/docs/_react/bulma-customizer/src/components/VarItem.module.css
+++ b/docs/_react/bulma-customizer/src/components/VarItem.module.css
@@ -1,7 +1,6 @@
.main {
- background-color: var(--bulma-body-background-color);
gap: var(--var-item-gap);
- box-shadow: 0 0 0 1px var(--bulma-border);
+ border-top: 1px solid var(--bulma-border);
padding: var(--var-item-padding);
transition-property: background-color;
transition-duration: var(--bulma-duration);