Search and Top Navigation
#8054 open feature ()
Opened January 24, 2012 02:04PM UTC
Last modified January 25, 2013 09:23PM UTC
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)
Attachments (0)
Change History (9)
Changed June 26, 2012 01:22AM UTC by comment:1
| type: | enhancement → feature |
|---|
Changed June 28, 2012 01:59PM UTC by comment:2
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/
Changed October 11, 2012 02:40PM UTC by comment:3
| milestone: | 1.9.0 → 1.10.0 |
|---|
Changed November 04, 2012 05:34PM UTC by comment:4
The explanation in that tutsplus article makes sense, but I have no clue how we'd address this on the framework level.
Changed November 05, 2012 02:54PM UTC by comment:5
| status: | new → open |
|---|
Changed November 15, 2012 12:37PM UTC by comment:6
Replying to [comment:4 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.
Changed December 01, 2012 01:55PM UTC by comment:7
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; }
Changed December 01, 2012 02:55PM UTC by comment:8
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.
Changed January 25, 2013 09:23PM UTC by comment:9
| milestone: | 1.10.0 → none |
|---|