react-best-gradient-color-picker - npm Package Compare versions

Comparing version 3.0.3-beta.8 to 3.0.3-beta.9

dist/cjs/components/GradientControls.js

@@ -56,5 +56,35 @@ "use strict";
         } },
-        react_1.default.createElement("div", { onClick: handleLinear, id: "rbgcp-linear-btn", className: `rbgcp-control-btn rbgcp-linear-btn ${isLinear && 'rbgcp-control-btn-selected'}` },
+        react_1.default.createElement("div", { onClick: handleLinear, id: "rbgcp-linear-btn", className: `rbgcp-control-btn rbgcp-linear-btn ${isLinear && 'rbgcp-control-btn-selected'}`, style: {
+                paddingLeft: '8px',
+                paddingRight: '8px',
+                lineHeight: 1,
+                borderRadius: '4px',
+                fontWeight: 700,
+                fontSize: '12px',
+                height: '24px',
+                transition: 'all 160ms ease',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'rgba(255,255,255,0)',
+                boxShadow: '1px 1px 3px rgba(0,0,0,0)',
+                // color: [theme]?.c1,
+            } },
             react_1.default.createElement(icon_js_1.LinearIcon, { color: isLinear ? '#568CF5' : '' })),
-        react_1.default.createElement("div", { onClick: handleRadial, id: "rbgcp-gradient-btn", className: `rbgcp-control-btn rbgcp-gradient-btn ${isRadial && 'rbgcp-control-btn-selected'}` },
+        react_1.default.createElement("div", { onClick: handleRadial, id: "rbgcp-gradient-btn", className: `rbgcp-control-btn rbgcp-gradient-btn ${isRadial && 'rbgcp-control-btn-selected'}`, style: {
+                paddingLeft: '8px',
+                paddingRight: '8px',
+                lineHeight: 1,
+                borderRadius: '4px',
+                fontWeight: 700,
+                fontSize: '12px',
+                height: '24px',
+                transition: 'all 160ms ease',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'rgba(255,255,255,0)',
+                boxShadow: '1px 1px 3px rgba(0,0,0,0)',
+                // color: [theme]?.c1,
+            } },
             react_1.default.createElement(icon_js_1.RadialIcon, { color: isRadial ? '#568CF5' : '' }))));
@@ -67,5 +97,26 @@ };
     };
-    return (react_1.default.createElement("div", { className: "rbgcp-control-btn-wrapper rbgcp-control-input-wrap rbgcp-stop-input-wrap", style: { paddingLeft: 8 } },
+    return (react_1.default.createElement("div", { className: "rbgcp-control-btn-wrapper rbgcp-control-input-wrap rbgcp-stop-input-wrap", style: {
+            paddingLeft: 8,
+            height: '28px',
+            // background: [theme]?.c3,
+            borderRadius: '6px',
+            padding: '2px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'relative',
+        } },
         react_1.default.createElement(icon_js_1.StopIcon, null),
-        react_1.default.createElement("input", { id: "rbgcp-stop-input", value: currentLeft, className: "rbgcp-control-input rbgcp-stop-input", onChange: (e) => handleMove(e.target.value) })));
+        react_1.default.createElement("input", { id: "rbgcp-stop-input", value: currentLeft, className: "rbgcp-control-input rbgcp-stop-input", onChange: (e) => handleMove(e.target.value), style: {
+                height: '24px',
+                borderRadius: '4px',
+                border: 'none',
+                outline: 'none',
+                textAlign: 'center',
+                width: '34px',
+                fontWeight: 500,
+                // color: [theme]?.c2,
+                fontSize: '13px',
+                background: 'transparent',
+            } })));
 };
@@ -79,5 +130,26 @@ const DegreePicker = () => {
     };
-    return (react_1.default.createElement("div", { className: "rbgcp-control-btn-wrapper rbgcp-control-input-wrap rbgcp-degree-input-wrap" },
+    return (react_1.default.createElement("div", { className: "rbgcp-control-btn-wrapper rbgcp-control-input-wrap rbgcp-degree-input-wrap", style: {
+            paddingLeft: 8,
+            height: '28px',
+            // background: [theme]?.c3,
+            borderRadius: '6px',
+            padding: '2px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'relative',
+        } },
         react_1.default.createElement(icon_js_1.DegreesIcon, null),
-        react_1.default.createElement("input", { id: "rbgcp-degree-input", value: degrees, className: "rbgcp-control-input rbgcp-degree-input", onChange: (e) => handleDegrees(e) }),
+        react_1.default.createElement("input", { id: "rbgcp-degree-input", value: degrees, className: "rbgcp-control-input rbgcp-degree-input", onChange: (e) => handleDegrees(e), style: {
+                height: '24px',
+                borderRadius: '4px',
+                border: 'none',
+                outline: 'none',
+                textAlign: 'center',
+                width: '34px',
+                fontWeight: 500,
+                // color: [theme]?.c2,
+                fontSize: '13px',
+                background: 'transparent',
+            } }),
         react_1.default.createElement("div", { style: {
@@ -93,3 +165,7 @@ position: 'absolute',
     const { deletePoint } = (0, context_js_1.usePicker)();
-    return (react_1.default.createElement("div", { onClick: deletePoint, style: { width: 28, ...(0, Controls_js_1.controlBtnStyles)(false) }, id: "rbgcp-point-deconste-btn", className: "rbgcp-control-icon-btn rbgcp-point-deconste-btn" },
+    return (react_1.default.createElement("div", { onClick: deletePoint, style: {
+            width: 28,
+            position: 'relative',
+            ...(0, Controls_js_1.controlBtnStyles)(false),
+        }, id: "rbgcp-point-deconste-btn", className: "rbgcp-control-icon-btn rbgcp-point-deconste-btn" },
         react_1.default.createElement(icon_js_1.default, null)));
@@ -105,2 +181,8 @@ };
             justifyContent: 'space-between',
+            height: '28px',
+            // background: [theme]?.c3,
+            borderRadius: '6px',
+            padding: '2px',
+            alignItems: 'center',
+            position: 'relative',
         }, id: "rbgcp-gradient-controls-wrap", className: "rbgcp-control-btn-wrapper" },
@@ -107,0 +189,0 @@ !hideGradientType && react_1.default.createElement(GradientType, null),

dist/esm/components/GradientControls.js

@@ -28,5 +28,35 @@ import React from 'react';
         } },
-        React.createElement("div", { onClick: handleLinear, id: "rbgcp-linear-btn", className: `rbgcp-control-btn rbgcp-linear-btn ${isLinear && 'rbgcp-control-btn-selected'}` },
+        React.createElement("div", { onClick: handleLinear, id: "rbgcp-linear-btn", className: `rbgcp-control-btn rbgcp-linear-btn ${isLinear && 'rbgcp-control-btn-selected'}`, style: {
+                paddingLeft: '8px',
+                paddingRight: '8px',
+                lineHeight: 1,
+                borderRadius: '4px',
+                fontWeight: 700,
+                fontSize: '12px',
+                height: '24px',
+                transition: 'all 160ms ease',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'rgba(255,255,255,0)',
+                boxShadow: '1px 1px 3px rgba(0,0,0,0)',
+                // color: [theme]?.c1,
+            } },
             React.createElement(LinearIcon, { color: isLinear ? '#568CF5' : '' })),
-        React.createElement("div", { onClick: handleRadial, id: "rbgcp-gradient-btn", className: `rbgcp-control-btn rbgcp-gradient-btn ${isRadial && 'rbgcp-control-btn-selected'}` },
+        React.createElement("div", { onClick: handleRadial, id: "rbgcp-gradient-btn", className: `rbgcp-control-btn rbgcp-gradient-btn ${isRadial && 'rbgcp-control-btn-selected'}`, style: {
+                paddingLeft: '8px',
+                paddingRight: '8px',
+                lineHeight: 1,
+                borderRadius: '4px',
+                fontWeight: 700,
+                fontSize: '12px',
+                height: '24px',
+                transition: 'all 160ms ease',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'rgba(255,255,255,0)',
+                boxShadow: '1px 1px 3px rgba(0,0,0,0)',
+                // color: [theme]?.c1,
+            } },
             React.createElement(RadialIcon, { color: isRadial ? '#568CF5' : '' }))));
@@ -39,5 +69,26 @@ };
     };
-    return (React.createElement("div", { className: "rbgcp-control-btn-wrapper rbgcp-control-input-wrap rbgcp-stop-input-wrap", style: { paddingLeft: 8 } },
+    return (React.createElement("div", { className: "rbgcp-control-btn-wrapper rbgcp-control-input-wrap rbgcp-stop-input-wrap", style: {
+            paddingLeft: 8,
+            height: '28px',
+            // background: [theme]?.c3,
+            borderRadius: '6px',
+            padding: '2px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'relative',
+        } },
         React.createElement(StopIcon, null),
-        React.createElement("input", { id: "rbgcp-stop-input", value: currentLeft, className: "rbgcp-control-input rbgcp-stop-input", onChange: (e) => handleMove(e.target.value) })));
+        React.createElement("input", { id: "rbgcp-stop-input", value: currentLeft, className: "rbgcp-control-input rbgcp-stop-input", onChange: (e) => handleMove(e.target.value), style: {
+                height: '24px',
+                borderRadius: '4px',
+                border: 'none',
+                outline: 'none',
+                textAlign: 'center',
+                width: '34px',
+                fontWeight: 500,
+                // color: [theme]?.c2,
+                fontSize: '13px',
+                background: 'transparent',
+            } })));
 };
@@ -51,5 +102,26 @@ const DegreePicker = () => {
     };
-    return (React.createElement("div", { className: "rbgcp-control-btn-wrapper rbgcp-control-input-wrap rbgcp-degree-input-wrap" },
+    return (React.createElement("div", { className: "rbgcp-control-btn-wrapper rbgcp-control-input-wrap rbgcp-degree-input-wrap", style: {
+            paddingLeft: 8,
+            height: '28px',
+            // background: [theme]?.c3,
+            borderRadius: '6px',
+            padding: '2px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'relative',
+        } },
         React.createElement(DegreesIcon, null),
-        React.createElement("input", { id: "rbgcp-degree-input", value: degrees, className: "rbgcp-control-input rbgcp-degree-input", onChange: (e) => handleDegrees(e) }),
+        React.createElement("input", { id: "rbgcp-degree-input", value: degrees, className: "rbgcp-control-input rbgcp-degree-input", onChange: (e) => handleDegrees(e), style: {
+                height: '24px',
+                borderRadius: '4px',
+                border: 'none',
+                outline: 'none',
+                textAlign: 'center',
+                width: '34px',
+                fontWeight: 500,
+                // color: [theme]?.c2,
+                fontSize: '13px',
+                background: 'transparent',
+            } }),
         React.createElement("div", { style: {
@@ -65,3 +137,7 @@ position: 'absolute',
     const { deletePoint } = usePicker();
-    return (React.createElement("div", { onClick: deletePoint, style: { width: 28, ...controlBtnStyles(false) }, id: "rbgcp-point-deconste-btn", className: "rbgcp-control-icon-btn rbgcp-point-deconste-btn" },
+    return (React.createElement("div", { onClick: deletePoint, style: {
+            width: 28,
+            position: 'relative',
+            ...controlBtnStyles(false),
+        }, id: "rbgcp-point-deconste-btn", className: "rbgcp-control-icon-btn rbgcp-point-deconste-btn" },
         React.createElement(TrashIcon, null)));
@@ -77,2 +153,8 @@ };
             justifyContent: 'space-between',
+            height: '28px',
+            // background: [theme]?.c3,
+            borderRadius: '6px',
+            padding: '2px',
+            alignItems: 'center',
+            position: 'relative',
         }, id: "rbgcp-gradient-controls-wrap", className: "rbgcp-control-btn-wrapper" },
@@ -79,0 +161,0 @@ !hideGradientType && React.createElement(GradientType, null),

package.json

 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.3-beta.8",
+  "version": "3.0.3-beta.9",
   "description": "An easy to use color/gradient picker for React.js",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

408136

increased by1.97%

Lines of code

10742

increased by2.41%

No dependency changes