search

vaadin / designer

Public repository for Vaadin Designer
https://vaadin.com/designer
16 stars 3 forks source link

Padding value displays the raw CSS custom property value #2380

Open johannesh2 opened 3 years ago

johannesh2 commented 3 years ago

Steps to reproduce

A horizontal layout has the following style definition style="flex-wrap:wrap;width:100%;background-color:var(--lumo-contrast-5pct);padding:var(--lumo-space-s) var(--lumo-space-l);" but instead

Actual behavior

The custom property string var(--lumo-space-s) is displayed in the padding dropdown.

Expected behavior

The beautified padding values S and L should be displayed as the padding values.

IDE, Designer and OS version

OS: Mac OS X 10.16 x86_64 Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_16) AppleWebKit/605.1.15 (KHTML, like Gecko) Safari/522.0 Java: 11.0.9.1 Eclipse: org.eclipse.epp.package.jee.product 4.18.0.20201210-1200 Designer: 4.6.2

anssit commented 3 years ago

Confirmed. Designer (as of 4.6.8) supports a single value in padding and margin shorthands. Use padding-left, -top, -right and -bottom to set individual margins.

To fix this, Designer would need to support the 2, 3 and 4 valued margin and padding properties.