[geeklog-cvs] geeklog: newpro: Use same styling for navbar as in jQuery UI tabs

[geeklog-cvs at lists.geeklog.net]

changeset 8646:8e7425694a5c
url:  http://project.geeklog.net/cgi-bin/hgwebdir.cgi/geeklog/rev/8e7425694a5c
user: Rouslan Placella <rouslan at placella.com>
date: Sun Apr 29 14:55:10 2012 +0100
description:
newpro: Use same styling for navbar as in jQuery UI tabs

diffstat:

 public_html/layout/newpro/css/navbar/navbar.css |  134 +++++++++++------------
 public_html/layout/newpro/navbar/menuitem.thtml |    2 +-
 public_html/layout/newpro/navbar/navbar.thtml   |    2 +-
 3 files changed, 68 insertions(+), 70 deletions(-)

diffs (182 lines):

diff -r 4cf2b864925c -r 8e7425694a5c public_html/layout/newpro/css/navbar/navbar.css
--- a/public_html/layout/newpro/css/navbar/navbar.css	Sun Apr 29 14:54:25 2012 +0100
+++ b/public_html/layout/newpro/css/navbar/navbar.css	Sun Apr 29 14:55:10 2012 +0100
@@ -31,89 +31,87 @@
 
 /*--------------------------------------
   Navigation
+
+ (most styling here is adapted from jQuery UI)
 --------------------------------------*/
 
 #navcontainer {
-  overflow: hidden;  /* Adjust floating element */
-  margin-bottom: 1em;
-  padding-top: 16px;
-  padding-{left}: 8px;
-  background: #F4F4F4;
-  border-top: 1px solid #CCCCCC;
-  border-bottom: 1px solid #24618E;
+    position: relative;
+    padding: .2em;
+    zoom: 1;
+    -moz-border-radius-topleft: 5px;
+    -webkit-border-top-left-radius: 5px;
+    border-top-left-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    -webkit-border-top-right-radius: 5px;
+    border-top-right-radius: 5px;
+    border: 1px solid #a6c9e2;
+    border-bottom: 1px dotted #a6c9e2;
 }
 
-/* Content generated by the float clear */
-#navcontainer:after {
-  content: "";
-  display: block;
-  clear: both;
-  height: 1px;
-  overflow: hidden;
+#navcontainer ul {
+    margin: 0;
+    padding: .2em .2em 0;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    border: 1px solid #4297d7;
+    background: #5c9ccc url('jquery_ui/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png') 50% 50% repeat-x;
+    color: #ffffff;
+    font-weight: bold;
+
 }
 
-/* Win IE 6(Adjust floating element) { \*/
-* html #navcontainer {
-  height: 1%;
-  overflow: visible;
-}
-/* } Win IE 6(Adjust floating element) */
-
-#navcontainer ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background: transparent !important;
+#navcontainer ul li {
+    list-style: none;
+    float: left;
 }
 
-#navcontainer li {
-  float: {left};
-  margin: 0;
-  padding: 0;
+#navcontainer ul li a {
+    padding: 0;
+    white-space: nowrap;
+    -moz-border-radius-topleft: 5px;
+    -webkit-border-top-left-radius: 5px;
+    border-top-left-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    -webkit-border-top-right-radius: 5px;
+    border-top-right-radius: 5px;
+
+    border: 1px solid #c5dbec;
+    background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
+    font-weight: bold;
+    color: #2e6e9e;
+
+    margin: 0 .2em 1px 0;
+    position: relative;
+    top: 1px;
+
+    border-bottom: 0 !important;
 }
 
-#navcontainer a {
-  display: block;
-  margin: 0;
-  padding: 0;
-  padding-{left}: 5px;
-  background: url(./navbar/images/tableftJ.gif) no-repeat 0 0;
-  text-decoration: none;
+#navcontainer ul li a span {
+    float: left;
+    padding: .5em 1em;
+    text-decoration: none;
+    color: #2e6e9e;
 }
 
-#navcontainer a span {
-  display: block;
-  padding: 4px;
-  padding-{right}: 8px;
-  padding-{left}: 3px;
-  color: #24618E;
-  background: url(./navbar/images/tabrightJ.gif) no-repeat 100% 0;
+#navcontainer ul li a#current {
+    border: 1px solid #79b7e7;
+    background: #f5f8f9 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x;
+    font-weight: bold;
+    padding-bottom: 1px;
+    margin-bottom: 0;
+    cursor: text;
 }
 
-#navcontainer a span {
-  float: none;
+#navcontainer ul li a#current span {
+    color: #e17009;
 }
 
-#navcontainer a:hover span {
-  color: #FFFFFF;
+#navcontainer ul li a:hover {
+    border: 1px solid #79b7e7;
+    background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
+    font-weight: bold;
+    color: #1d5987;
 }
-
-#navcontainer a:hover {
-  background-position: 0% -42px;
-}
-
-#navcontainer a:hover span {
-  background-position: 100% -42px;
-}
-
-#navcontainer a#current span {
-  color: #FFFFFF;
-  background: url(./navbar/images/tabrightI.gif) no-repeat 100% -42px;
-}
-
-#navcontainer a:link#current,
-#navcontainer a:visited#current,
-#navcontainer a:hover#current {
-  background: url(./navbar/images/tableftI.gif) no-repeat 0% -42px;
-}
-
diff -r 4cf2b864925c -r 8e7425694a5c public_html/layout/newpro/navbar/menuitem.thtml
--- a/public_html/layout/newpro/navbar/menuitem.thtml	Sun Apr 29 14:54:25 2012 +0100
+++ b/public_html/layout/newpro/navbar/menuitem.thtml	Sun Apr 29 14:55:10 2012 +0100
@@ -1,6 +1,6 @@
 
 <!-- navbar/menuitem.thtml { -->
 
-<li><a {csscurrent} href="{link}{parms}"{onclick}><span class="label">{label}</span></a></li>
+<li><a {csscurrent} class="clearfix" href="{link}{parms}"{onclick}><span class="label">{label}</span></a></li>
 
 <!-- } navbar/menuitem.thtml -->
diff -r 4cf2b864925c -r 8e7425694a5c public_html/layout/newpro/navbar/navbar.thtml
--- a/public_html/layout/newpro/navbar/navbar.thtml	Sun Apr 29 14:54:25 2012 +0100
+++ b/public_html/layout/newpro/navbar/navbar.thtml	Sun Apr 29 14:55:10 2012 +0100
@@ -2,7 +2,7 @@
 <!-- navbar/navbar.thtml { -->
 
 <div id="navcontainer">
-  <ul id="navlist">
+  <ul id="navlist" class="clearfix">
     {menuitems}
   </ul>
 </div>