Opened 11 years ago

Last modified 10 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 10 years ago by Scott González

Type: enhancementfeature

comment:2 Changed 10 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 10 years ago by Scott González

Milestone: 1.9.01.10.0

comment:4 Changed 10 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 10 years ago by Scott González

Status: newopen

comment:6 in reply to:  4 Changed 10 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 10 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 10 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 10 years ago by tj.vantoll

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