diff --git a/bootstrap.css b/bootstrap.css
index 5eb8a4a7ce..a9a104ccce 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Jan 8 01:50:02 PST 2012
+ * Date: Sun Jan 8 02:58:37 PST 2012
*/
html, body {
margin: 0;
@@ -485,6 +485,10 @@ blockquote small:before {
}
blockquote.pull-right {
float: right;
+ padding-left: 0;
+ padding-right: 15px;
+ border-left: 0;
+ border-right: 5px solid #eee;
}
blockquote.pull-right p, blockquote.pull-right small {
text-align: right;
@@ -1600,7 +1604,7 @@ i {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
-.navbar .brand:hover, .navbar ul .active > a {
+.navbar .brand:hover, .navbar .nav .active > a {
color: #ffffff;
text-decoration: none;
background-color: #333333;
@@ -1921,7 +1925,7 @@ i {
.pills.stacked > li:last-child > a {
margin-bottom: 1px;
}
-.tabs .dropdown-menu, .pills .dropdown-menu {
+.nav .dropdown-menu {
top: 33px;
border-width: 1px;
}
@@ -1930,19 +1934,26 @@ i {
-moz-border-radius: 4px;
border-radius: 4px;
}
-.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
+.nav .dropdown-toggle .caret {
+ border-top-color: #0088cc;
margin-top: 6px;
}
-.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle {
+.nav .dropdown-toggle:hover .caret {
+ border-top-color: #005580;
+}
+.nav .open .dropdown-toggle {
background-color: #999;
border-color: #999;
}
-.tabs .open .caret, .pills .open .caret {
+.nav .open .caret, .nav .open a:hover .caret {
border-top-color: #fff;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
+.tabs.stacked .open > a:hover {
+ border-color: #999;
+}
.tabbable {
zoom: 1;
}
@@ -2996,6 +3007,61 @@ a.thumbnail:hover {
visibility: hidden;
}
@media (max-width: 480px) {
+ .navbar .nav {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 180px;
+ padding-top: 40px;
+ list-style: none;
+ }
+ .navbar .nav, .navbar .nav > li:last-child a {
+ -webkit-border-radius: 0 0 4px 0;
+ -moz-border-radius: 0 0 4px 0;
+ border-radius: 0 0 4px 0;
+ }
+ .navbar .nav > li {
+ float: none;
+ display: none;
+ }
+ .navbar .nav > li > a {
+ float: none;
+ background-color: #222;
+ }
+ .navbar .nav > .active {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .navbar .nav > .active > a {
+ background-color: transparent;
+ }
+ .navbar .nav > .active > a:hover {
+ background-color: #333;
+ }
+ .navbar .nav > .active > a:after {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-top: 8px;
+ margin-left: 6px;
+ text-indent: -99999px;
+ vertical-align: top;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #ffffff;
+ filter: alpha(opacity=100);
+ -moz-opacity: 1;
+ opacity: 1;
+ content: "↓";
+ }
+ .navbar .nav:hover > li {
+ display: block;
+ }
+ .navbar .nav:hover > li > a:hover {
+ background-color: #333;
+ }
.modal {
width: auto;
margin: 0;
@@ -3030,6 +3096,12 @@ a.thumbnail:hover {
}
}
@media (max-width: 768px) {
+ .navbar-fixed {
+ position: absolute;
+ }
+ .navbar-fixed .nav {
+ float: none;
+ }
.container {
width: auto;
padding: 0 20px;
@@ -3043,55 +3115,6 @@ a.thumbnail:hover {
width: auto;
margin: 0;
}
- .nav {
- position: absolute;
- top: 0;
- left: 0;
- width: 180px;
- padding-top: 40px;
- list-style: none;
- }
- .nav, .nav > li:last-child a {
- -webkit-border-radius: 0 0 4px 0;
- -moz-border-radius: 0 0 4px 0;
- border-radius: 0 0 4px 0;
- }
- .nav > li {
- float: none;
- display: none;
- }
- .nav > li > a {
- float: none;
- background-color: #222;
- }
- .nav > .active {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- }
- .navbar ul .active > a {
- background-color: transparent;
- }
- .nav > .active a:after {
- display: inline-block;
- width: 0;
- height: 0;
- margin-top: 8px;
- margin-left: 6px;
- text-indent: -99999px;
- vertical-align: top;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid #ffffff;
- filter: alpha(opacity=100);
- -moz-opacity: 1;
- opacity: 1;
- content: "↓";
- }
- .nav > .active a:hover {
- background-color: rgba(255, 255, 255, 0.05);
- }
}
@media (min-width: 768px) and (max-width: 940px) {
.container {
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 33e4f7f809..0159780a6c 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -87,7 +87,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;}
blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:before{content:'\2014 \00A0';}
-blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
+blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eee;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
address{display:block;margin-bottom:18px;line-height:18px;}
code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code{padding:1px 3px;background-color:#fee9cc;}
@@ -315,7 +315,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
.navbar{overflow:visible;}
.navbar-inner{background-color:#222222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
-.navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
+.navbar .brand:hover,.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
.navbar .btn{margin-top:5px;}
@@ -368,11 +368,13 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.tabs.stacked>li>a:hover{border-color:#ddd;z-index:2;}
.pills.stacked>li>a{margin-bottom:3px;}
.pills.stacked>li:last-child>a{margin-bottom:1px;}
-.tabs .dropdown-menu,.pills .dropdown-menu{top:33px;border-width:1px;}
+.nav .dropdown-menu{top:33px;border-width:1px;}
.pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
-.tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;}
-.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;}
-.tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
+.nav .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;}
+.nav .dropdown-toggle:hover .caret{border-top-color:#005580;}
+.nav .open .dropdown-toggle{background-color:#999;border-color:#999;}
+.nav .open .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
+.tabs.stacked .open>a:hover{border-color:#999;}
.tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;}
.tabbable:after{clear:both;}
.tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;}
@@ -511,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}
.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
.hidden{display:none;visibility:hidden;}
-@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
+@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
diff --git a/docs/components.html b/docs/components.html
index bd8753401a..2a9d158461 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -222,9 +222,12 @@
Application-style navigation
Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.
Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.
+ With icons
+ Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.
-
Example sidebar navigation
+
Example nav list
+
Take a list of links and add class="nav list":
-
-
Simple markup
<ul class="nav list">
<li class="nav-header">
@@ -253,6 +253,34 @@
</li>
...
</ul>
+
+
+
Example with icons
+
Same example, but with <i> tags for icons.
+
+
+<ul class="nav list">
+ ...
+ <li>
+ <a href="#">
+ <i class="book"></i>
+ Library
+ </a>
+ </li>
+ ...
+</ul>
What's included
-
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:
-
- - top (default)
- - right
- - bottom
- - left
-
+
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.
Changing between them is easy and only requires changing very little markup.
-
-
Custom jQuery plugin
-
All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.
-
Get the javascript →
-
+
Tabbable example
To make tabs tabbable, wrap the .tabs in another div with class .tabbable.
-
-
-
Straightforward markup
-
Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.
+
+
+
Custom jQuery plugin
+
All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.
+
Get the javascript →
+
+
+
+ Straightforward markup
+ Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.
<div class="tabbable">
<ul class="nav tabs">
@@ -315,8 +340,6 @@
</div>
</div>
-
-
Tabbable in any direction
@@ -809,28 +832,6 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index bf42d44687..10e5a43be0 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -243,11 +243,11 @@
<body>
- <div class="fluid-container">
- <div class="sidebar">
+ <div class="fluid-container sidebar-left">
+ <div class="fluid-sidebar">
...
</div>
- <div class="content">
+ <div class="fluid-content">
...
</div>
</div>
diff --git a/lib/navbar.less b/lib/navbar.less
index 8ee203307f..dbad9dcd86 100644
--- a/lib/navbar.less
+++ b/lib/navbar.less
@@ -10,7 +10,7 @@
.navbar {
overflow: visible;
}
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
.navbar-inner {
background-color: @navBarBgEnd;
#gradient > .vertical(@navBarBgStart, @navBarBgEnd);
@@ -21,7 +21,7 @@
.navbar {
// Hover and active states
.brand:hover,
- ul .active > a {
+ .nav .active > a {
color: @white;
text-decoration: none;
background-color: @navBarBgStart;
diff --git a/lib/navs.less b/lib/navs.less
index 743d772f37..dee482aea2 100644
--- a/lib/navs.less
+++ b/lib/navs.less
@@ -175,29 +175,35 @@
// ---------
// Position the menu
-.tabs .dropdown-menu,
-.pills .dropdown-menu {
+.nav .dropdown-menu {
top: 33px;
border-width: 1px;
}
.pills .dropdown-menu {
.border-radius(4px);
}
-.tabs .dropdown-toggle .caret,
-.pills .dropdown-toggle .caret {
+.nav .dropdown-toggle .caret {
+ border-top-color: @linkColor;
margin-top: 6px;
}
-.tabs .open .dropdown-toggle,
-.pills .open .dropdown-toggle {
+.nav .dropdown-toggle:hover .caret {
+ border-top-color: @linkColorHover;
+}
+.nav .open .dropdown-toggle {
background-color: #999;
border-color: #999;
}
-.tabs .open .caret,
-.pills .open .caret {
+.nav .open .caret,
+.nav .open a:hover .caret {
border-top-color: #fff;
.opacity(100);
}
+// Dropdowns in stacked tabs
+.tabs.stacked .open > a:hover {
+ border-color: #999;
+}
+
// TABBABLE
diff --git a/lib/responsive.less b/lib/responsive.less
index 7856121be1..e87b8495f4 100644
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -18,6 +18,64 @@
// ---------------------
@media (max-width: 480px) {
+
+ // Make the nav work for small devices
+ .navbar {
+ .nav {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 180px;
+ padding-top: 40px;
+ list-style: none;
+ }
+ .nav,
+ .nav > li:last-child a {
+ .border-radius(0 0 4px 0);
+ }
+ .nav > li {
+ float: none;
+ display: none;
+ }
+ .nav > li > a {
+ float: none;
+ background-color: #222;
+ }
+ .nav > .active {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .nav > .active > a {
+ background-color: transparent;
+ }
+ .nav > .active > a:hover {
+ background-color: #333;
+ }
+ .nav > .active > a:after {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-top: 8px;
+ margin-left: 6px;
+ text-indent: -99999px;
+ vertical-align: top;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid @white;
+ .opacity(100);
+ content: "↓";
+ }
+
+ .nav:hover > li {
+ display: block;
+ }
+ .nav:hover > li > a:hover {
+ background-color: #333;
+ }
+ }
+
// Resize modals
.modal {
width: auto;
@@ -63,6 +121,15 @@
// --------------------------------------------------
@media (max-width: 768px) {
+
+ // Unfix the navbar
+ .navbar-fixed {
+ position: absolute;
+ }
+ .navbar-fixed .nav {
+ float: none;
+ }
+
// Remove width from containers
.container {
width: auto;
@@ -80,53 +147,6 @@
margin: 0;
}
- // Make the nav work for small devices
- .nav {
- position: absolute;
- top: 0;
- left: 0;
- width: 180px;
- padding-top: 40px;
- list-style: none;
- }
- .nav,
- .nav > li:last-child a {
- .border-radius(0 0 4px 0);
- }
- .nav > li {
- float: none;
- display: none;
- }
- .nav > li > a {
- float: none;
- background-color: #222;
- }
- .nav > .active {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- }
- .navbar ul .active > a {
- background-color: transparent;
- }
- .nav > .active a:after {
- display: inline-block;
- width: 0;
- height: 0;
- margin-top: 8px;
- margin-left: 6px;
- text-indent: -99999px;
- vertical-align: top;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid @white;
- .opacity(100);
- content: "↓";
- }
- .nav > .active a:hover {
- background-color: rgba(255,255,255,.05);
- }
}
diff --git a/lib/type.less b/lib/type.less
index 7e2c4a7a86..84130f3fa1 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -165,6 +165,10 @@ blockquote {
// Float right with text-align: right
&.pull-right {
float: right;
+ padding-left: 0;
+ padding-right: 15px;
+ border-left: 0;
+ border-right: 5px solid #eee;
p,
small {
text-align: right;