Skip to content

Commit 0739781

Browse files
novikov82novikov82
authored
#6701 Toolbox. Submenu button doesn't align correctly (UI scaling less 100 per cent) (#6724)
* #6701 Toolbox. Submenu button doesn't align correctly (UI scaling less 100 per cent) Fixes #6701 * #6701 Toolbox. Submenu button doesn't align correctly (UI scaling less 100 per cent) Fixes #6701
1 parent 9b162d7 commit 0739781

File tree

1 file changed

+37
-50
lines changed

1 file changed

+37
-50
lines changed

‎packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss

+37-50
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
top: 50%;
2929
}
3030
.svc-toolbox__item-submenu-button {
31-
top: calc(var(--ctr-toolbox-item-padding-top, var(--sjs-spacing-x1)));
31+
top: 0;
3232
}
3333
}
3434
}
@@ -78,15 +78,11 @@
7878
/* Shadow / Medium */
7979
border-radius: var(--ctr-tooltip-corner-radius, var(--sjs-corner-radius-x075));
8080
box-shadow:
81-
var(--ctr-tooltip-shadow-1-offset-x, 0px)
82-
var(--ctr-tooltip-shadow-1-offset-y, 2px)
83-
var(--ctr-tooltip-shadow-1-blur, 8px)
84-
var(--ctr-tooltip-shadow-1-spread, 0px)
81+
var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px)
82+
var(--ctr-tooltip-shadow-1-blur, 8px) var(--ctr-tooltip-shadow-1-spread, 0px)
8583
var(--ctr-tooltip-shadow-1-color, var(--sjs-special-glow, #004c441a)),
86-
var(--ctr-tooltip-shadow-2-offset-x, 0px)
87-
var(--ctr-tooltip-shadow-2-offset-y, 1px)
88-
var(--ctr-tooltip-shadow-2-blur, 2px)
89-
var(--ctr-tooltip-shadow-2-spread, 0px)
84+
var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px)
85+
var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px)
9086
var(--ctr-tooltip-shadow-2-color, var(--sjs-special-shadow, #00000040));
9187
// transition:
9288
// max-width 0.1s ease-in-out,
@@ -95,7 +91,7 @@
9591
overflow: visible;
9692
position: absolute;
9793
z-index: 200;
98-
top: calc(50% + 0.5*var(--ctr-toolbox-group-gap, var(--sjs-spacing-x05)));
94+
top: calc(50% + 0.5 * var(--ctr-toolbox-group-gap, var(--sjs-spacing-x05)));
9995
transform: translate(0, -50%);
10096
pointer-events: none;
10197
.svc-toolbox__item-icon {
@@ -114,15 +110,11 @@
114110
border-top-color: transparent;
115111
border-inline-end-color: transparent;
116112
box-shadow:
117-
var(--ctr-tooltip-shadow-1-offset-x, 0px)
118-
var(--ctr-tooltip-shadow-1-offset-y, 2px)
119-
var(--ctr-tooltip-shadow-1-blur, 8px)
120-
var(--ctr-tooltip-shadow-1-spread, 0px)
113+
var(--ctr-tooltip-shadow-1-offset-x, 0px) var(--ctr-tooltip-shadow-1-offset-y, 2px)
114+
var(--ctr-tooltip-shadow-1-blur, 8px) var(--ctr-tooltip-shadow-1-spread, 0px)
121115
var(--ctr-tooltip-shadow-1-color, var(--sjs-special-glow, #004c441a)),
122-
var(--ctr-tooltip-shadow-2-offset-x, 0px)
123-
var(--ctr-tooltip-shadow-2-offset-y, 1px)
124-
var(--ctr-tooltip-shadow-2-blur, 2px)
125-
var(--ctr-tooltip-shadow-2-spread, 0px)
116+
var(--ctr-tooltip-shadow-2-offset-x, 0px) var(--ctr-tooltip-shadow-2-offset-y, 1px)
117+
var(--ctr-tooltip-shadow-2-blur, 2px) var(--ctr-tooltip-shadow-2-spread, 0px)
126118
var(--ctr-tooltip-shadow-2-color, var(--sjs-special-shadow, #00000040));
127119
align-self: center;
128120
position: absolute;
@@ -186,15 +178,11 @@
186178
background-color: var(--ctr-toolbox-item-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
187179

188180
box-shadow:
189-
var(--ctr-toolbox-item-shadow-hovered-1-offset-x, 0px)
190-
var(--ctr-toolbox-item-shadow-hovered-1-offset-y, 2px)
191-
var(--ctr-toolbox-item-shadow-hovered-1-blur, 8px)
192-
var(--ctr-toolbox-item-shadow-hovered-1-spread, 0px)
181+
var(--ctr-toolbox-item-shadow-hovered-1-offset-x, 0px) var(--ctr-toolbox-item-shadow-hovered-1-offset-y, 2px)
182+
var(--ctr-toolbox-item-shadow-hovered-1-blur, 8px) var(--ctr-toolbox-item-shadow-hovered-1-spread, 0px)
193183
var(--ctr-toolbox-item-shadow-hovered-1-color, #00000000),
194-
var(--ctr-toolbox-item-shadow-hovered-2-offset-x, 0px)
195-
var(--ctr-toolbox-item-shadow-hovered-2-offset-y, 1px)
196-
var(--ctr-toolbox-item-shadow-hovered-2-blur, 2px)
197-
var(--ctr-toolbox-item-shadow-hovered-2-spread, 0px)
184+
var(--ctr-toolbox-item-shadow-hovered-2-offset-x, 0px) var(--ctr-toolbox-item-shadow-hovered-2-offset-y, 1px)
185+
var(--ctr-toolbox-item-shadow-hovered-2-blur, 2px) var(--ctr-toolbox-item-shadow-hovered-2-spread, 0px)
198186
var(--ctr-toolbox-item-shadow-hovered-2-color, #00000000);
199187
transition: 0.1s ease-in-out;
200188

@@ -231,8 +219,11 @@
231219
position: absolute;
232220
inset-inline-end: var(--ctr-toolbox-item-padding-right, var(--sjs-spacing-x2));
233221
margin-inline-end: var(--ctr-toolbox-item-submenu-button-margin-right, var(--sjs-spacing-x1n));
234-
top: calc(var(--ctr-toolbox-item-padding-top, var(--sjs-spacing-x1)) + var(--ctr-toolbox-gap, var(--sjs-spacing-x05)));
235-
bottom: var(--ctr-toolbox-item-padding-bottom, var(--dft-toolbox-item-padding-bottom));
222+
top: var(--ctr-toolbox-gap, var(--sjs-spacing-x05));
223+
bottom: 0;
224+
margin-top: auto;
225+
margin-bottom: auto;
226+
height: fit-content;
236227
display: inline-flex;
237228
padding: var(--ctr-toolbox-item-submenu-button-padding-top, var(--sjs-spacing-x05))
238229
var(--ctr-toolbox-item-submenu-button-padding-right, var(--sjs-spacing-x05))
@@ -241,10 +232,16 @@
241232
box-sizing: border-box;
242233
align-items: center;
243234
border-radius: var(--ctr-toolbox-item-submenu-button-corner-radius, var(--sjs-corner-radius-x05));
244-
background-color: var(--ctr-toolbox-item-submenu-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
235+
background-color: var(
236+
--ctr-toolbox-item-submenu-button-background-color,
237+
var(--sjs-layer-1-background-500, #ffffffff)
238+
);
245239
transition: background-color $creator-transition-duration;
246240
&:hover {
247-
background-color: var(--ctr-toolbox-item-submenu-button-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
241+
background-color: var(
242+
--ctr-toolbox-item-submenu-button-background-color-hovered,
243+
var(--sjs-primary-background-10, #19b3941a)
244+
);
248245
}
249246
svg {
250247
fill: var(--ctr-toolbox-item-submenu-button-icon-color, var(--sjs-layer-1-foreground-50, #00000080));
@@ -274,10 +271,8 @@
274271
.svc-toolbox__item {
275272
background: var(--ctr-toolbox-item-background-color-pressed, var(--sjs-layer-1-background-400, #f5f5f5ff));
276273
box-shadow: var(--ctr-toolbox-item-shadow-pressed-offset-x, 0px)
277-
var(--ctr-toolbox-item-shadow-pressed-offset-y, 1px)
278-
var(--ctr-toolbox-item-shadow-pressed-blur, 2px)
279-
var(--ctr-toolbox-item-shadow-pressed-spread, 0px)
280-
var(--ctr-toolbox-item-shadow-pressed-color, #00000000);
274+
var(--ctr-toolbox-item-shadow-pressed-offset-y, 1px) var(--ctr-toolbox-item-shadow-pressed-blur, 2px)
275+
var(--ctr-toolbox-item-shadow-pressed-spread, 0px) var(--ctr-toolbox-item-shadow-pressed-color, #00000000);
281276
}
282277

283278
.svc-toolbox__item-title {
@@ -323,15 +318,11 @@
323318
& > .sv-popup__container > .sv-popup__body-content {
324319
border-radius: var(--ctr-toolbox-submenu-corner-radius, var(--sjs-corner-radius-x1));
325320
box-shadow:
326-
var(--ctr-toolbox-submenu-shadow-1-offset-x, 0px)
327-
var(--ctr-toolbox-submenu-shadow-1-offset-y, 2px)
328-
var(--ctr-toolbox-submenu-shadow-1-blur, 8px)
329-
var(--ctr-toolbox-submenu-shadow-1-spread, 0px)
321+
var(--ctr-toolbox-submenu-shadow-1-offset-x, 0px) var(--ctr-toolbox-submenu-shadow-1-offset-y, 2px)
322+
var(--ctr-toolbox-submenu-shadow-1-blur, 8px) var(--ctr-toolbox-submenu-shadow-1-spread, 0px)
330323
var(--ctr-toolbox-submenu-shadow-1-color, var(--sjs-special-glow, #004c441a)),
331-
var(--ctr-toolbox-submenu-shadow-2-offset-x, 0px)
332-
var(--ctr-toolbox-submenu-shadow-2-offset-y, 16px)
333-
var(--ctr-toolbox-submenu-shadow-2-blur, 32px)
334-
var(--ctr-toolbox-submenu-shadow-2-spread, 0px)
324+
var(--ctr-toolbox-submenu-shadow-2-offset-x, 0px) var(--ctr-toolbox-submenu-shadow-2-offset-y, 16px)
325+
var(--ctr-toolbox-submenu-shadow-2-blur, 32px) var(--ctr-toolbox-submenu-shadow-2-spread, 0px)
335326
var(--ctr-toolbox-submenu-shadow-2-color, var(--sjs-special-glow, #004c441a));
336327
background: var(--ctr-toolbox-submenu-background-color, var(--sjs-layer-1-background-500, #ffffffff));
337328
padding: 0;
@@ -357,15 +348,11 @@
357348
border-radius: var(--ctr-toolbox-item-corner-radius, var(--sjs-corner-radius-x1));
358349
background: var(--ctr-toolbox-item-background-color-submenu, var(--sjs-layer-1-background-500, #ffffffff));
359350
box-shadow:
360-
var(--ctr-toolbox-item-shadow-hovered-1-offset-x, 0px)
361-
var(--ctr-toolbox-item-shadow-hovered-1-offset-y, 2px)
362-
var(--ctr-toolbox-item-shadow-hovered-1-blur, 8px)
363-
var(--ctr-toolbox-item-shadow-hovered-1-spread, 0px)
351+
var(--ctr-toolbox-item-shadow-hovered-1-offset-x, 0px) var(--ctr-toolbox-item-shadow-hovered-1-offset-y, 2px)
352+
var(--ctr-toolbox-item-shadow-hovered-1-blur, 8px) var(--ctr-toolbox-item-shadow-hovered-1-spread, 0px)
364353
var(--ctr-toolbox-item-shadow-hovered-1-color, #00000000),
365-
var(--ctr-toolbox-item-shadow-hovered-2-offset-x, 0px)
366-
var(--ctr-toolbox-item-shadow-hovered-2-offset-y, 1px)
367-
var(--ctr-toolbox-item-shadow-hovered-2-blur, 2px)
368-
var(--ctr-toolbox-item-shadow-hovered-2-spread, 0px)
354+
var(--ctr-toolbox-item-shadow-hovered-2-offset-x, 0px) var(--ctr-toolbox-item-shadow-hovered-2-offset-y, 1px)
355+
var(--ctr-toolbox-item-shadow-hovered-2-blur, 2px) var(--ctr-toolbox-item-shadow-hovered-2-spread, 0px)
369356
var(--ctr-toolbox-item-shadow-hovered-2-color, #00000000);
370357
transition: 0.1s ease-in-out;
371358
padding: var(--ctr-toolbox-item-padding-top-submenu, var(--sjs-spacing-x150))

0 commit comments

Comments
 (0)