Borders & shadows on dropdowns - Minimalist Skin 7

Heyy! :grin:

This proposal concerns dropdowns and their borders and shadows.

While they look quite okay at the moment, I think that they could be a bit improved by having no borders on them and a blurrier shadow.

Current Dropdown look

On the Iceberg theme:

image

On the Darkly theme:
image

Change in Dropdowns

On the Iceberg theme: (the change simplifies the UI of the dropdown without losing the contrast between the dropdown and the background elements)

image

On the Darkly theme (the change is minimal on dark themes):

image

CSS change for dropdowns

image

Proposal vs Bootstrap 5

While Bootstrap 5 chose to go full flat style on every UI component, as well as dropdowns, I believe shadows should stay when it comes to modals, dropdowns and pop-ups because they should feel like they go a level up from the level the rest of the UI is at.

This is how Bootstrap 5’s dropdowns look:
image

What do you think? :thinking:

For reference, here is the styles for .dropdown-menu before those changes:
image

So if I understand well, those are the changes on .dropdown-menu:

  • Removed both border values

Is there a change made on the shadows? What is the value you would pick instead of the current one?

Thank you for this proposal :slight_smile:

Oops, yes, there was actually, I pasted the wrong printscreen. Will modify it in the the initial post as well:

image

The shadow was changed to:

box-shadow: 0 6px 24px rgba(0, 0, 0, 0.175);

1 Like

hi @amilica. Thanks for the proposal.

Can you point out the visual differences we are expected to see?
I could see the border being removed, and the shadow being slightly “larger”, bother changes are very subtle change for the light theme, and can’t be seen with a dark them.

Did I miss something?

The changes are pretty subtle, yes. Compared to the other stuff I’ve posted, this change is not as impactful, for sure. I thought: if we can do easy small & quick improvements to the UI, why not do them?

Personally, I always disliked the border on the dropdown menu and never seen its purpose (maybe I’m missing something and there actually is a purpose).

1 Like

Thanks for confirming :slight_smile:
+1 for this change then!

+1 for the change

1 Like

Great, thanks so much! :grin:

I think I’m -0 for this change. When looking on the screenshot I slightly prefer the old version with the border and a bit less shadow, I do like the clear separation of the box it makes. On the proposal I feel it’s less separated against the white background.

Actually I just noticed that your proposal concerns all dropdowns but the screenshot only shows the effect on notification dropdown. It would be nice to see what happens for the “More action” menu dropdown for example. Or the advanced edit dropdown.

I just manually tried removing the border from the edit dropdown and this looks weird to me as the buttons still have borders which creates quite an inconsistency. Could you maybe provide a screenshot with your exact proposed changes? To me, what Bootstrap 5 proposes would look a lot more consistent as these dropdowns are basically a list of buttons.

Now, notifications are different and I wouldn’t object to removing the border from the dropdowns that are launched from the top bar. So +0 for removing the border from the dropdowns that expand from the top bar but -0 for removing the border from other dropdowns that are launched from buttons like the “More Actions” dropdown.