[gnome-devel-docs/gnome3-hig] global gnome.org navigation.
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs/gnome3-hig] global gnome.org navigation.
- Date: Thu, 31 Jan 2013 17:13:57 +0000 (UTC)
commit bb2b98835a380ce39054f519fc095afab63a2030
Author: Jakub Steiner <jimmac gmail com>
Date: Thu Jan 31 17:55:13 2013 +0100
global gnome.org navigation.
hig3/site/images/top_bar-bg.png | Bin 0 -> 185 bytes
hig3/site/images/top_bar-item-bg.png | Bin 0 -> 190 bytes
hig3/site/images/top_bar-item-home.png | Bin 0 -> 427 bytes
hig3/site/images/wgo-search-icon.png | Bin 0 -> 395 bytes
hig3/src/layouts/default.haml | 1 +
hig3/src/layouts/landing.haml | 1 +
hig3/src/pages/_top-bar.haml | 18 ++++++
hig3/src/stylesheets/hig.scss | 105 +++++++++++++++++++++++++++++++-
8 files changed, 124 insertions(+), 1 deletions(-)
---
diff --git a/hig3/site/images/top_bar-bg.png b/hig3/site/images/top_bar-bg.png
new file mode 100644
index 0000000..567188c
Binary files /dev/null and b/hig3/site/images/top_bar-bg.png differ
diff --git a/hig3/site/images/top_bar-item-bg.png b/hig3/site/images/top_bar-item-bg.png
new file mode 100644
index 0000000..fbd50fe
Binary files /dev/null and b/hig3/site/images/top_bar-item-bg.png differ
diff --git a/hig3/site/images/top_bar-item-home.png b/hig3/site/images/top_bar-item-home.png
new file mode 100644
index 0000000..1e5a591
Binary files /dev/null and b/hig3/site/images/top_bar-item-home.png differ
diff --git a/hig3/site/images/wgo-search-icon.png b/hig3/site/images/wgo-search-icon.png
new file mode 100644
index 0000000..90e8d2c
Binary files /dev/null and b/hig3/site/images/wgo-search-icon.png differ
diff --git a/hig3/src/layouts/default.haml b/hig3/src/layouts/default.haml
index be66a2f..4cf171c 100644
--- a/hig3/src/layouts/default.haml
+++ b/hig3/src/layouts/default.haml
@@ -18,6 +18,7 @@
.menu
= partial('menu')
%article.main
+ =partial('top-bar')
=typography do
= yield
#footerpositioner
diff --git a/hig3/src/layouts/landing.haml b/hig3/src/layouts/landing.haml
index 16216fb..8eb8fc3 100644
--- a/hig3/src/layouts/landing.haml
+++ b/hig3/src/layouts/landing.haml
@@ -17,6 +17,7 @@
.menu
= partial('menu')
%article.main
+ =partial('top-bar')
= yield
#footerpositioner
%hr.footerart
diff --git a/hig3/src/pages/_top-bar.haml b/hig3/src/pages/_top-bar.haml
new file mode 100644
index 0000000..cba356c
--- /dev/null
+++ b/hig3/src/pages/_top-bar.haml
@@ -0,0 +1,18 @@
+#top_bar
+ .left
+ .menu-globalnav-container
+ %ul#menu-globalnav
+ %li
+ =link "Tutorials", "/tutorials/"
+ %li
+ =link "API Reference", "/api/"
+ %li.current-menu-item
+ =link "Design", "http://library.gnome.org/design/"
+ %li
+ =link "Community", "/community/"
+ .right
+ %form{"role" => "search", "method" => "get", "id" => "searchform", "action" => "/search"}
+ %div
+ %label{"class" => "hidden", "for" => "q"}
+ Search:
+ %input{ "type"=>"text", "value"=>"", "name"=>"q", "id" => "s", "placeholder"=>"Search"}
diff --git a/hig3/src/stylesheets/hig.scss b/hig3/src/stylesheets/hig.scss
index 518b044..761aab1 100644
--- a/hig3/src/stylesheets/hig.scss
+++ b/hig3/src/stylesheets/hig.scss
@@ -69,6 +69,10 @@ table {
}
}
+.left { float: left; }
+.right { float: right; }
+.hidden { display: none; }
+
.shortcut {
display: inline-block;
min-width: 4em;
@@ -162,7 +166,7 @@ table {
.contain {
width: 960px;
- margin: 4em auto 0;
+ margin: 53px auto 0;
overflow: hidden;
.sidebar {
@include column(5,16);
@@ -258,6 +262,73 @@ table {
.main { @include column(11,16);}
}
+#top_bar {
+ background: url("../images/top_bar-bg.png") repeat-x scroll center top #2E3436;
+ @include border-radius(6px);
+ @include box-shadow(0,2px,4px,rgba(0, 0, 0, 0.2));
+ font-size: 13px;
+ line-height: normal;
+ padding: 8px 0;
+ overflow: hidden;
+ margin-bottom: 2em;
+ input {
+ background: url("../images/wgo-search-icon.png") no-repeat scroll 8px center transparent;
+ border: none;
+ border-left: 1px solid rgba(255, 255, 255, 0.3);
+ color: #FFFFFF;
+ font: inherit;
+ margin: -8px 0 -8px -8px;
+ outline: medium none;
+ padding: 8px 8px 8px 28px;
+ width: 150px;
+ }
+ input:focus {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-bottom-right-radius: 6px;
+ border-top-right-radius: 6px;
+ }
+ input.placeholder {
+ color: #CCCCCC;
+ }
+ ul {
+ list-style: none outside none;
+ margin: 0;
+ padding: 0 5px;
+ }
+ ul li {
+ display: inline;
+ margin: 0 5px 0 0;
+ }
+ a {
+ border-radius: 4px;
+ color: #FFFFFF;
+ outline: 0 none;
+ padding: 4px 8px;
+ text-decoration: none;
+ text-shadow: 0 1px 0 #000000;
+ transition: background 100ms linear 0s;
+}
+ a:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ }
+ a:focus {
+ background-color: rgba(255, 255, 255, 0.15);
+ }
+ a:active, li.current-menu-item a, li.current-page-ancestor a {
+ background: url("../images/top_bar-item-bg.png") repeat-x scroll center top #1C2021;
+ box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.4) inset;
+ }
+ li.selected a {
+ font-weight: bold;
+ }
+ li a span.home {
+ background: url("../images/top_bar-item-home.png") no-repeat scroll 0 0 transparent;
+ padding-left: 18px;
+ }
+ #main_search {
+ text-align: right;
+ }
+}
.columns {
@include row(11);
@@ -535,6 +606,38 @@ hr.footerart {
margin-bottom: 2em;
}
}
+
+ .left, .right {
+ float: none;
+ }
+
+ #top_bar {
+ margin-top: 10px;
+ .menu-globalnav-container,
+ ul li,
+ ul li a {
+ display: block;
+ width: 100%;
+ }
+ input,
+ ul li a,
+ form {
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ }
+ ul li a {
+ padding: 1em 0.5em;
+ }
+ form {
+ margin: 10px 0;
+ }
+ input {
+ margin: 0;
+ }
+ }
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]