Rounded corner support in Gecko and WebKit

tylerhall · Mar 10, 2009 · fbf4b42 · fbf4b42
1 parent 41ddc66
commit fbf4b42
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git 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; }
diff --git 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
@@ -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>Layout</h3>
 
                         <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>

diff --git 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);
 });