Permalink
Browse files

Rounded corner support in Gecko and WebKit

  • Loading branch information...
1 parent 41ddc66 commit fbf4b4286dbd5178a0b1892aa7ceb7d268cc6e0c @tylerhall committed Mar 10, 2009
Showing with 36 additions and 5 deletions.
  1. +1 −0 css/purple.css
  2. +13 −0 css/yuiapp.css
  3. +12 −5 index.html
  4. +10 −0 js/yuiapp.js
View
1 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; }
View
13 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; }
View
17 index.html
@@ -10,7 +10,7 @@
<script src="http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js" type="text/javascript"></script>
<script src="js/yuiapp.js" type="text/javascript"></script>
</head>
-<body>
+<body class="rounded">
<div id="doc3" class="yui-t6">
<div id="hd">
@@ -317,10 +317,17 @@
<h3>Color Scheme</h3>
<ul id="page-color-switcher" class="biglist">
- <li><a href="" title="red">Red</a></li>
- <li><a href="" title="green">Green</a></li>
- <li><a href="" title="purple" class="highlight">Purple</a></li>
- <li><a href="" title="aqua">Aqua</a></li>
+ <li><a href="#" title="red">Red</a></li>
+ <li><a href="#" title="green">Green</a></li>
+ <li><a href="#" title="purple" class="highlight">Purple</a></li>
+ <li><a href="#" title="aqua">Aqua</a></li>
+ </ul>
+
+ <h3>Rounded Corners</h3>
+ <p class="small gray">Rounded corners are <a href="http://blogs.msdn.com/ie/archive/2005/06/23/431980.aspx">not supported</a> in Internet Explorer.</p>
+ <ul id="page-corner-switcher" class="biglist">
+ <li><a href="#" title="on" class="highlight">On</a></li>
+ <li><a href="#" title="off">Off</a></li>
</ul>
</div>
</div>
View
10 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);
});

0 comments on commit fbf4b42

Please sign in to comment.