Skip to content

Commit

Permalink
bug fix, add navigation-bar description
Browse files Browse the repository at this point in the history
  • Loading branch information
@olton
olton committed Oct 17, 2012
1 parent ff35967 commit 4c2cf69
Show file tree
Hide file tree
Showing 7 changed files with 196 additions and 11 deletions.
41 changes: 41 additions & 0 deletions css/modern-responsive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,9 @@
border-color: #525252 !important;
}
/* Large desktop */
@media (min-width: 1200px) {

}
@media (min-width: 980px) {
.navigation-bar .navigation-bar-inner .menu-pull {
display: none;
Expand Down Expand Up @@ -445,6 +448,44 @@
.tile.quadro-vertical .tile-content {
height: 470px;
}
.tile .tile-content {
width: 120px;
height: 90px;
padding: 5px 10px;
}
.tile .tile-content.icon {
padding-top: 20px;
display: table-cell !important;
vertical-align: middle !important;
text-align: center;
}
.tile .tile-content.icon img {
width: 48px;
height: 48px;
}
.tile .brand > .badge,
.tile .tile-status > .badge {
width: 26px;
height: 28px;
right: 0;
font-size: 9pt;
}
.tile .brand > .name,
.tile .tile-status > .name {
margin-left: 10px;
}
.tile .brand > .icon,
.tile .tile-status > .icon {
width: 24px;
height: 24px;
margin: 5px 10px;
}
.tile .brand > .text,
.tile .tile-status > .text {
left: 40px;
right: 40px;
font-size: 8pt;
}
.tile-group {
max-width: 400px;
float: none;
Expand Down
28 changes: 26 additions & 2 deletions css/modern.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2336,7 +2336,7 @@ table.bordered tbody tr:last-child td {
z-index: 10000;
}
.navigation-bar .navigation-bar-inner {
padding: 5px 20px;
padding: 5px 20px 2px 20px;
color: #fff;
font-size: 11pt;
margin: auto;
Expand All @@ -2345,7 +2345,7 @@ table.bordered tbody tr:last-child td {
.navigation-bar .navigation-bar-inner > .brand {
float: left;
margin-right: 20px;
margin-top: 0px;
margin-top: 3px;
}
.navigation-bar .navigation-bar-inner > .brand:hover {
background-color: transparent;
Expand All @@ -2370,12 +2370,34 @@ table.bordered tbody tr:last-child td {
margin-left: 0;
list-style: none;
padding-top: 5px;
margin-top: 2px;
}
.navigation-bar .navigation-bar-inner > ul > li {
display: inline-block;
line-height: 32px;
position: relative;
}
.navigation-bar .navigation-bar-inner > ul > li.sub-menu {
padding-right: 20px;
}
.navigation-bar .navigation-bar-inner > ul > li.sub-menu:after {
position: absolute;
content: "\3009";
display: inline-block;
font-size: 10pt;
font-family: sans;
top: 3px;
right: 10px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
cursor: pointer;
}
.navigation-bar .navigation-bar-inner > ul > li.sub-menu:hover:after {
color: #1e1e1e;
}
.navigation-bar .navigation-bar-inner > ul > li > a {
color: #fff;
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
Expand All @@ -2384,6 +2406,7 @@ table.bordered tbody tr:last-child td {
letter-spacing: 0.01em;
line-height: 14pt;
padding: 5px 10px;
cursor: pointer;
}
.navigation-bar .navigation-bar-inner > ul > li.active,
.navigation-bar .navigation-bar-inner > ul > li:hover {
Expand Down Expand Up @@ -2453,6 +2476,7 @@ table.bordered tbody tr:last-child td {
padding: 3px 20px;
white-space: nowrap;
font-size: 14px;
cursor: pointer;
}
.dropdown-menu a:hover {
color: rgba(0, 0, 0, 0.8);
Expand Down
28 changes: 26 additions & 2 deletions less/menus.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
z-index: 10000;

.navigation-bar-inner {
padding: 5px 20px;
padding: 5px 20px 2px 20px;
color: #fff;
font-size: 11pt;
margin: auto;
Expand All @@ -23,7 +23,7 @@
& > .brand {
float: left;
margin-right: 20px;
margin-top: 0px;
margin-top: 3px;

&:hover {
background-color: transparent;
Expand All @@ -47,16 +47,39 @@
& > ul {
.unstyled;
padding-top: 5px;
margin-top: 2px;

& > li {
display: inline-block;
line-height: 32px;
position: relative;

&.sub-menu {
padding-right: 20px;
&:after {
position: absolute;
content: "\3009";
display: inline-block;
font-size: 10pt;
font-family: sans;
top: 3px;
right: 10px;
.rotate(90deg);
cursor: pointer;
}

&:hover {
&:after {
color: #1e1e1e;
}
}
}

& > a {
color: #fff;
#font > .navigation;
padding: 5px 10px;
cursor: pointer;
}

&.active, &:hover {
Expand Down Expand Up @@ -132,6 +155,7 @@
padding: 3px 20px;
white-space: nowrap;
font-size: 14px;
cursor: pointer;

&:hover {
.bg-color-blue;
Expand Down
2 changes: 1 addition & 1 deletion less/modern-responsive-max480.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@
& > .text {
left: 40px;
right: 40px;
font-size: 8pt;
font-size: 8pt;
}
}
}
Expand Down
28 changes: 26 additions & 2 deletions public/css/modern.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2336,7 +2336,7 @@ table.bordered tbody tr:last-child td {
z-index: 10000;
}
.navigation-bar .navigation-bar-inner {
padding: 5px 20px;
padding: 5px 20px 2px 20px;
color: #fff;
font-size: 11pt;
margin: auto;
Expand All @@ -2345,7 +2345,7 @@ table.bordered tbody tr:last-child td {
.navigation-bar .navigation-bar-inner > .brand {
float: left;
margin-right: 20px;
margin-top: 0px;
margin-top: 3px;
}
.navigation-bar .navigation-bar-inner > .brand:hover {
background-color: transparent;
Expand All @@ -2370,12 +2370,34 @@ table.bordered tbody tr:last-child td {
margin-left: 0;
list-style: none;
padding-top: 5px;
margin-top: 2px;
}
.navigation-bar .navigation-bar-inner > ul > li {
display: inline-block;
line-height: 32px;
position: relative;
}
.navigation-bar .navigation-bar-inner > ul > li.sub-menu {
padding-right: 20px;
}
.navigation-bar .navigation-bar-inner > ul > li.sub-menu:after {
position: absolute;
content: "\3009";
display: inline-block;
font-size: 10pt;
font-family: sans;
top: 3px;
right: 10px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
cursor: pointer;
}
.navigation-bar .navigation-bar-inner > ul > li.sub-menu:hover:after {
color: #1e1e1e;
}
.navigation-bar .navigation-bar-inner > ul > li > a {
color: #fff;
font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
Expand All @@ -2384,6 +2406,7 @@ table.bordered tbody tr:last-child td {
letter-spacing: 0.01em;
line-height: 14pt;
padding: 5px 10px;
cursor: pointer;
}
.navigation-bar .navigation-bar-inner > ul > li.active,
.navigation-bar .navigation-bar-inner > ul > li:hover {
Expand Down Expand Up @@ -2453,6 +2476,7 @@ table.bordered tbody tr:last-child td {
padding: 3px 20px;
white-space: nowrap;
font-size: 14px;
cursor: pointer;
}
.dropdown-menu a:hover {
color: rgba(0, 0, 0, 0.8);
Expand Down
6 changes: 3 additions & 3 deletions public/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function getWindowsSize(){
<ul>
<li><a href="/">Home</a></li>
<li data-role="dropdown">
<li data-role="dropdown" class="sub-menu">
<a href="#">Scaffolding</a>
<ul class="dropdown-menu">
<li><a href="global.php">Global styles</a></li>
Expand All @@ -44,7 +44,7 @@ function getWindowsSize(){
</ul>
</li>
<li data-role="dropdown">
<li data-role="dropdown" class="sub-menu">
<a href="#">Base CSS</a>
<ul class="dropdown-menu">
<li><a href="typography.php">Typography</a></li>
Expand All @@ -57,7 +57,7 @@ function getWindowsSize(){
</ul>
</li>
<li data-role="dropdown">
<li data-role="dropdown" class="sub-menu">
<a href="#">Components</a>
<ul class="dropdown-menu">
<li><a href="tiles.php">Tiles</a></li>
Expand Down
74 changes: 73 additions & 1 deletion public/menus.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,82 @@
</ul>
</div>
<p>
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.
Toggleable, contextual menu for displaying lists of links. Made interactive with the <code>dropdown</code> javascript plugin.
</p>
</div>

<h2>Navigation Bar</h2>
<div class="span10">
<div class="navigation-bar">
<div class="navigation-bar-inner">
<div class="brand"><a class="name" href="#">Product Name</a></div>

<ul class="place-right">
<li data-role="dropdown" class="sub-menu">
<a>Right Menu</a>
<ul class="dropdown-menu place-right">
<li><a href="#">SubItem 1</a></li>
<li><a href="#">SubItem 2</a></li>
<li><a href="#">SubItem 3</a></li>
<li><a href="#">SubItem 4</a></li>
<li><a href="#">SubItem 5</a></li>
</ul>
</li>
</ul>

<ul>
<li data-role="dropdown" class="sub-menu">
<a>Item 1</a>
<ul class="dropdown-menu">
<li><a href="#">SubItem 1</a></li>
<li><a href="#">SubItem 2</a></li>
<li><a href="#">SubItem 3</a></li>
<li class="divider"></li>
<li><a href="#">SubItem 4</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
</div>
<pre class="prettyprint linenums span10">
&lt;div class="navigation-bar"&gt;
&lt;div class="navigation-bar-inner"&gt;
&lt;div class="brand"&gt;
&lt;span class="name"&gt;Project Name&lt;/span&gt;
&lt;/div&gt;

&lt;ul class="place-right"&gt;
&lt;li data-role="dropdown" class="sub-menu"&gt;
&lt;a&gt;Right Menu&lt;/a&gt;
&lt;ul class="dropdown-menu place-right"&gt;
&lt;li&gt;&lt;a href="#"&gt;SubItem&lt;/a&gt;&lt;/li&gt;
...
&lt;li&gt;&lt;a href="#"&gt;SubItem&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;ul&gt;
&lt;li data-role="dropdown" class="sub-menu"&gt;
&lt;a href="#"&gt;Item 1&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;SubItem&lt;/a&gt;&lt;/li&gt;
...
&lt;li&gt;&lt;a href="#"&gt;SubItem&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a /&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>

<h2>Horizontal menu</h2>
<div class="span10">
<div class="horizontal-menu">
Expand Down

0 comments on commit 4c2cf69

Please sign in to comment.