Opened 7 years ago

Last modified 6 years ago

#8054 open feature

CSS .ui.corner.all - aesthetically incorrect radius sizing when used on all widget corners.

Reported by: efeek Owned by:
Priority: minor Milestone: none
Component: ui.css-framework Version: 1.8.17
Keywords: Cc:
Blocked by: Blocking:

Description

Version: Latest download Browsers: All Operating system: Windows 7 Pro Instructions: View a Datepicker or Dialog widget with CSS3rounded corners enabled. What you expect to happen: When an outer container element has a radius enabled (E.g. 6px), its child element with padding (E.g. 1px) and a border (E.g. 1px) should have a reduced size radius (E.g. 4px ). What actually happens: All corners are given the same sizr radius in the CSS with .ui.corner.all (E.g. 6px)

Change History (9)

comment:1 Changed 7 years ago by Scott González

Type: enhancementfeature

comment:2 Changed 7 years ago by efeek

Check out this blog article: Rounded corners done right! Ian Yates has explained it all for me. http://webdesign.tutsplus.com/tutorials/visuals/quick-tip-rounded-corners-done-right/

comment:3 Changed 6 years ago by Scott González

Milestone: 1.9.01.10.0

comment:4 Changed 6 years ago by Jörn Zaefferer

The explanation in that tutsplus article makes sense, but I have no clue how we'd address this on the framework level.

comment:5 Changed 6 years ago by Scott González

Status: newopen

comment:6 in reply to:  4 Changed 6 years ago by sparkybg

Replying to joern.zaefferer:

The explanation in that tutsplus article makes sense, but I have no clue how we'd address this on the framework level.

One way is to add some more additional CSS styles. For example, I have created a "ui-corner-small" style with reduced corner radius and I simply add it to the element when needed. It works well in a dialog widget - the dialog outside corner is theme's default corner, and the dialog caption/header outside corner is reduced, so the caption/header looks much more in place, especially around top left and top right corners.

Of ocurse, this style has to be added to every theme that is used.

I think adding a 2 more corner radius styles to themeroller themes will be adequate for most of the cases.

comment:7 Changed 6 years ago by selfthinker

The underlying problem is that the current CSS framework is very unsemantic and lacks abstraction between styling and behaviour and is therefore less maintainable. If e.g. a dialog was using more semantic classes, it would be very easy to just change them to show two different types of rounded corners. The proposed solution of sparkybg only makes it worse and less maintainable.

Another simple solution (without changing the framework) would be to: Either reduce border-radius in nested corner classes, e.g. .ui-corner-all .ui-corner-all { border-radius: 2px; } etc. Or increase border-radius in containers known to contain other nested corner classes, e.g. .ui-dialog.ui-corner-all { border-radius: 6px; }

comment:8 Changed 6 years ago by mikesherov

selfthinker, I think you've shown us that you know what you're talking about by now. If you have an idea for solving this simply while not hindering maintainability, go for it :)

If you're making an argument for something more drastic, open up a new ticket so we can discuss it or head over to IRC.

comment:9 Changed 6 years ago by tj.vantoll

Milestone: 1.10.0none
Note: See TracTickets for help on using tickets.