diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index ec0383cb..ded0b6f3 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -8,6 +8,10 @@ template.innerHTML = `
margin: 5px 1px;
padding: 3px;
}
+ div.imginside {
+ --se-spin-input-width: var(--global-se-spin-input-width);
+ width: var(--se-spin-input-width);
+ }
img {
position: relative;
right: -4px;
@@ -69,7 +73,7 @@ export class SESpinInput extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
- return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step' ];
+ return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step', 'width' ];
}
/**
* @function attributeChangedCallback
@@ -84,7 +88,10 @@ export class SESpinInput extends HTMLElement {
case 'src':
this.$img.setAttribute('src', newValue);
this.$label.remove();
- this.$div.style.width = '82px';
+ break;
+ case 'width':
+ this.$div.classList.add('imginside');
+ this.$div.style.setProperty('--se-spin-input-width', newValue + 'px');
break;
case 'size':
// access to the underlying input box
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 15947b87..46377164 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -216,7 +216,7 @@ class BottomPanel {
height="22px">
+ src="${imgPath}/opacity.svg" width="82">
`;
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index ae2132c7..cf53ca06 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -8,6 +8,7 @@
--icon-bg-color: #72797A;
--icon-bg-color-hover: #2B3C45;
--input-color: #B2B2B2;
+ --global-se-spin-input-width: 82px;
}
.svg_editor * {