From fbf4b4286dbd5178a0b1892aa7ceb7d268cc6e0c Mon Sep 17 00:00:00 2001 From: Tyler Hall Date: Mon, 9 Mar 2009 19:05:51 -0700 Subject: [PATCH] Rounded corner support in Gecko and WebKit --- css/purple.css | 1 + css/yuiapp.css | 13 +++++++++++++ index.html | 17 ++++++++++++----- js/yuiapp.js | 10 ++++++++++ 4 files changed, 36 insertions(+), 5 deletions(-) diff --git a/css/purple.css b/css/purple.css index 166a19f..d49d1ad 100644 --- a/css/purple.css +++ b/css/purple.css @@ -10,3 +10,4 @@ .spaces .hd { background-color:transparent; } .spaces .hd ul li { background-color:#5D0265; } a { color:#5D0265; } +.tabs .hd ul li a:hover { background-color:#8d0399; } \ No newline at end of file diff --git a/css/yuiapp.css b/css/yuiapp.css index 851be5f..aae9570 100644 --- a/css/yuiapp.css +++ b/css/yuiapp.css @@ -44,6 +44,19 @@ h3 { font-size:153.9%; margin-bottom:0.5em; } .spaces .hd { background-color:transparent; } .spaces .hd ul li { background-color:#7a1818; margin-right:0.1em; } +/* Extend block and header to have rounded corners */ +.rounded .hd, +.rounded .hd ul li, +.rounded .hd ul li a, +.rounded #navigation, +.rounded #navigation ul li, +.rounded #navigation ul li a { + -moz-border-radius-topright:7px; + -moz-border-radius-topleft:7px; + -webkit-border-top-right-radius:7px; + -webkit-border-top-left-radius:7px; +} + /* Style the horizontal rules inside .block */ .block hr { background-color:#f0f0ee; color:#f0f0ee; height:1px; border:0; } diff --git a/index.html b/index.html index ffb6fa5..67b0bef 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - +
@@ -317,10 +317,17 @@

Layout

Color Scheme

+ +

Rounded Corners

+

Rounded corners are not supported in Internet Explorer.

+
diff --git a/js/yuiapp.js b/js/yuiapp.js index bdcdc51..11c3079 100644 --- a/js/yuiapp.js +++ b/js/yuiapp.js @@ -21,6 +21,16 @@ YUI().use('node', function(Y) { Y.get('#theme').set('href', 'css/' + e.target.get('title') + '.css'); e.halt(); }); + + Y.all('#page-corner-switcher a').on('click', function(e) { + Y.all('#page-corner-switcher a.highlight').removeClass('highlight'); + e.target.addClass('highlight'); + if(e.target.get('title') == 'on') + Y.get('body').addClass('rounded'); + else + Y.get('body').removeClass('rounded'); + e.halt(); + }); } Y.on("domready", init); });