What’s the CSS for that particular layout?
Thanks!
2 Likes
I really like that a lot. Best of all worlds.
You have space for CSS variables, and you still have the units.
1 Like
I think, actually the optimum would be exactly that (with the unit dropdowns there) but if you start typing var or calc, then it removes the unit automatically . Likewise, if you typed 10em, it detects the em and also removes the added unit.
Otherwise it’s always extra work using the dropdown if you’re quicker at typing. For me, typing 10rem is much quicker than typing 10 and then having to navigate the dropdown. But for others it’s different.
3 Likes
Oh yeah, no question, you should be able to type the units.
I’m just saying that the units should be there as a visual reminder for those that need them.
1 Like
I think after such a large response, I wouldn’t be surprised if the unit dropdown was made optional from the settings. Could be wrong though.
1 Like
I like this version but increased the height of inputs to be the same as the rest of Bricks inputs.
One thing to consider is increasing the width of number control for this to 100%, so when you stretch the Bricks left panel the input fields maximise the full width.
[data-control=spacing][data-type=spacing] [data-control="number"] {
width: 100%;
}
Share the whole CSS when you have it, we can just keep improving on it. Crowdsource UI design 
3 Likes
[data-control=spacing][data-type=spacing] {
height: 100px;
}
[data-control=spacing][data-type=spacing] .handle:before {
display: none;
}
[data-control=spacing][data-type=spacing] .handle {
background-color: var(--builder-bg-2);
height: 30px;
}
[data-control=spacing][data-type=spacing] .handle.top ,
[data-control=spacing][data-type=spacing] .handle.bottom {
margin: 0 20px
}
[data-control=spacing][data-type=spacing] .handle.left ,
[data-control=spacing][data-type=spacing] .handle.right {
width: calc(50% - 30px);
top: 35px
}
[data-control=spacing][data-type=spacing] [data-control="number"] {
width: 100%;
}
[data-control=spacing][data-type=spacing] .label {
position: absolute;
top: -27px;
}
Nice. There’s just one tiny issue with the width when you make the control sidebar very small. Adding left and right of around 18% on the top and bottom handle solves it (rather than the current fixed 60px)
Updated code? LOL
(I’m not seeing 60px anywhere.)
Ah, I updated my code on the Gist I linked to (the 60px is coming from Bricks)
4 Likes
One final adjustment for me (lol, longest thread on the forum!)…
[data-control=spacing][data-type=spacing] .handle.left,
[data-control=spacing][data-type=spacing] .handle.right {
width: calc(50% - 15px);
top: 35px;
}
15px in the calc, instead of 30px.
Looks more balanced to me.
Not sure if it’s exact though, but it’s better than 30px for me.
2 Likes
This is nice. We don’t need to have a webflow look UI in Bricks.
3 Likes
Bit shocked that they kept this design in 1.5.1 stable though no one likes it. Bit worried about upcoming other decisions in the future at the moment.
4 Likes
I, for one, am totally fine with Bricks going pro and removing unit dropdowns. Not sure how this will work with the upcoming default unit setting, though.
Regarding the new margin/padding UI — it’s fancy looking, but I think it’s unnecessary. Simple wide inputs work best as you don’t have to click them to see the whole variable name.
1 Like
Hi, and thanks for this suggestion.
Looks the best to me as well 
4 Likes
I believe most of us are waiting for an official response about this. 
6 Likes
RE: them removing the measurement for the default unit setting, I do think there was a more elegant way of doing this.
Example from MT:
8 Likes
I would also love that the custom CSS reflects in GUI (and vice versa)
2 Likes