Skip to content
GitLab
Commit 4fa931e4 authored by Mark Otto's avatar Mark Otto
Browse files

fix the navbar click and a few jank responsive problems

parent 06df91ac
2 merge requests!14752.0 wip,!1403warningText and warningBackground docs fix
Hide whitespace changes
Inline Side-by-side
Showing
with 210 additions and 154 deletions
+210 -154
docs/assets/css/bootstrap-responsive.css
+ 84
- 58
View file @ 4fa931e4
...@@ -175,22 +175,23 @@ ...@@ -175,22 +175,23 @@
margin-bottom: 36px; margin-bottom: 36px;
} }
.navbar-inner { .navbar-inner {
padding: 10px; padding: 5px;
background-image: none; background-image: none;
} }
.navbar .container { .navbar .container {
padding: 0; padding: 0;
} }
.navbar .brand { .navbar .brand {
float: none; padding-left: 10px;
display: block; padding-right: 10px;
padding-left: 15px; margin: 0 0 0 -5px;
padding-right: 15px; }
margin: 0; .navbar .nav-collapse {
clear: left;
} }
.navbar .nav { .navbar .nav {
float: none; float: none;
margin: 9px 0; margin: 0 0 9px;
} }
.navbar .nav > li { .navbar .nav > li {
float: none; float: none;
...@@ -217,8 +218,10 @@ ...@@ -217,8 +218,10 @@
} }
.navbar .dropdown-menu { .navbar .dropdown-menu {
position: static; position: static;
display: block; top: auto;
left: auto;
float: none; float: none;
display: block;
max-width: none; max-width: none;
margin: 0 15px; margin: 0 15px;
padding: 0; padding: 0;
...@@ -263,60 +266,83 @@ ...@@ -263,60 +266,83 @@
height: 0; height: 0;
} }
} }
/*
@media (min-width: 1210px) { @media (min-width: 1210px) {
// Reset grid variables
@gridColumns: 12;
@gridColumnWidth: 70px;
@gridGutterWidth: 30px;
@siteWidth: 1170px;
// Bring grid mixins to recalculate widths
.columns(@columns: 1) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
.container { .container {
width: @siteWidth; width: 1170px;
} }
.row { .row {
margin-left: @gridGutterWidth * -1; margin-left: -30px;
} }
[class*="span"] { [class*="span"] {
margin-left: @gridGutterWidth; margin-left: 30px;
} }
.span1 {
// Default columns width: 70px;
.span1 { .columns(1); } }
.span2 { .columns(2); } .span2 {
.span3 { .columns(3); } width: 170px;
.span4 { .columns(4); } }
.span5 { .columns(5); } .span3 {
.span6 { .columns(6); } width: 270px;
.span7 { .columns(7); } }
.span8 { .columns(8); } .span4 {
.span9 { .columns(9); } width: 370px;
.span10 { .columns(10); } }
.span11 { .columns(11); } .span5 {
.span12 { .columns(12); } width: 470px;
}
// Offset column options .span6 {
.offset1 { .offset(1); } width: 570px;
.offset2 { .offset(2); } }
.offset3 { .offset(3); } .span7 {
.offset4 { .offset(4); } width: 670px;
.offset5 { .offset(5); } }
.offset6 { .offset(6); } .span8 {
.offset7 { .offset(7); } width: 770px;
.offset8 { .offset(8); } }
.offset9 { .offset(9); } .span9 {
.offset10 { .offset(10); } width: 870px;
.offset11 { .offset(11); } }
.offset12 { .offset(12); } .span10 {
width: 970px;
}
.span11 {
width: 1070px;
}
.span12 {
width: 1170px;
}
.offset1 {
margin-left: 130px;
}
.offset2 {
margin-left: 230px;
}
.offset3 {
margin-left: 330px;
}
.offset4 {
margin-left: 430px;
}
.offset5 {
margin-left: 530px;
}
.offset6 {
margin-left: 630px;
}
.offset7 {
margin-left: 730px;
}
.offset8 {
margin-left: 830px;
}
.offset9 {
margin-left: 930px;
}
.offset10 {
margin-left: 1030px;
}
.offset11 {
margin-left: 1130px;
}
} }
*/
\ No newline at end of file
docs/assets/css/bootstrap.css
+ 2
- 2
View file @ 4fa931e4
...@@ -2315,8 +2315,8 @@ button.btn.small, input[type="submit"].btn.small { ...@@ -2315,8 +2315,8 @@ button.btn.small, input[type="submit"].btn.small {
display: none; display: none;
float: right; float: right;
padding: 7px 10px; padding: 7px 10px;
margin-left: 10px; margin-left: 5px;
margin-right: 10px; margin-right: 5px;
background-color: #2c2c2c; background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222);
......
docs/assets/css/docs.css
+ 19
- 4
View file @ 4fa931e4
...@@ -522,6 +522,7 @@ h2 + .row { ...@@ -522,6 +522,7 @@ h2 + .row {
/* Example sites showcase */ /* Example sites showcase */
.example-sites img { .example-sites img {
max-width: 100%; max-width: 100%;
margin: 0 auto;
} }
.marketing-byline { .marketing-byline {
margin: -18px 0 27px; margin: -18px 0 27px;
...@@ -646,6 +647,10 @@ form.well { ...@@ -646,6 +647,10 @@ form.well {
padding: 10px 14px; padding: 10px 14px;
margin: 0 auto 10px; margin: 0 auto 10px;
} }
/* Masthead (home page jumbotron) */
.masthead {
padding-top: 0;
}
/* Don't space out quick links so much */ /* Don't space out quick links so much */
.quick-links { .quick-links {
...@@ -669,8 +674,9 @@ form.well { ...@@ -669,8 +674,9 @@ form.well {
display: block; display: block;
max-width: 300px; max-width: 300px;
margin: 0 auto 18px; margin: 0 auto 18px;
text-align: center;
} }
.example-sites img { .example-sites .thumbnail > img {
max-width: 270px; max-width: 270px;
} }
...@@ -796,11 +802,20 @@ form.well { ...@@ -796,11 +802,20 @@ form.well {
/* Unfloat brand */ /* Unfloat brand */
.navbar-fixed-top .brand { .navbar-fixed-top .brand {
float: none; float: left;
margin-left: 0; margin-left: 0;
padding-left: 15px; padding-left: 10px;
padding-right: 15px; padding-right: 10px;
} }
} }
/* LARGE DESKTOP SCREENS */
@media (min-width: 1210px) {
/* Update subnav container */
.subnav-fixed .nav {
width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
}
}
docs/base-css.html
+ 1
- 1
View file @ 4fa931e4
...@@ -1497,7 +1497,7 @@ For example, <code>section</code> should be wrapped as inline. ...@@ -1497,7 +1497,7 @@ For example, <code>section</code> should be wrapped as inline.
<div class="controls"> <div class="controls">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="icon envelope"></i></span> <span class="add-on"><i class="icon envelope"></i></span>
<input class="span32" id="iconInput" size="16" type="text"> <input class="span2" id="iconInput" type="text">
</div> </div>
</div> </div>
</div> </div>
......
docs/components.html
+ 44
- 37
View file @ 4fa931e4
...@@ -662,40 +662,47 @@ ...@@ -662,40 +662,47 @@
<div class="navbar navbar-static"> <div class="navbar navbar-static">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="#">Project name</a> <a class="brand" href="#">Project name</a>
<ul class="nav"> <div class="nav-collapse">
<li class="active"><a href="#">Home</a></li> <ul class="nav">
<li><a href="#">Link</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li><a href="#">Link</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <li class="dropdown">
<ul class="dropdown-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</li> </ul>
</ul> </li>
<form class="navbar-search pull-left" action=""> </ul>
<input type="text" class="search-query span2" placeholder="Search"> <form class="navbar-search pull-left" action="">
</form> <input type="text" class="search-query span2" placeholder="Search">
<ul class="nav pull-right"> </form>
<li><a href="#">Link</a></li> <ul class="nav pull-right">
<li class="vertical-divider"></li> <li><a href="#">Link</a></li>
<li class="dropdown"> <li class="vertical-divider"></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <li class="dropdown">
<ul class="dropdown-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<li><a href="#">Action</a></li> <ul class="dropdown-menu">
<li><a href="#">Another action</a></li> <li><a href="#">Action</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Another action</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Separated link</a></li>
</li> </ul>
</ul> </li>
</ul>
</div><!-- /.nav-collapse -->
</div> </div>
</div><!-- /navbar-inner --> </div><!-- /navbar-inner -->
</div><!-- /navbar --> </div><!-- /navbar -->
...@@ -733,7 +740,7 @@ ...@@ -733,7 +740,7 @@
&lt;input type="text" class="search-query pull-left" placeholder="Search"&gt; &lt;input type="text" class="search-query pull-left" placeholder="Search"&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </div><!-- /.span -->
<div class="span4"> <div class="span4">
<h3>Nav links</h3> <h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p> <p>Nav items are simple to add via unordered lists.</p>
...@@ -763,9 +770,9 @@ ...@@ -763,9 +770,9 @@
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<p><a class="btn" href="./javascript.html/#dropdown">Get the javascript &rarr;</a></p> <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript &rarr;</a></p>
</div> </div><!-- /.span -->
</div> </div><!-- /.row -->
</section> </section>
......
docs/templates/pages/base-css.mustache
+ 1
- 1
View file @ 4fa931e4
...@@ -1425,7 +1425,7 @@ ...@@ -1425,7 +1425,7 @@
<div class="controls"> <div class="controls">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="icon envelope"></i></span> <span class="add-on"><i class="icon envelope"></i></span>
<input class="span32" id="iconInput" size="16" type="text"> <input class="span2" id="iconInput" type="text">
</div> </div>
</div> </div>
</div> </div>
......
docs/templates/pages/components.mustache
+ 44
- 37
View file @ 4fa931e4
...@@ -590,40 +590,47 @@ ...@@ -590,40 +590,47 @@
<div class="navbar navbar-static"> <div class="navbar navbar-static">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="#">{{_i}}Project name{{/i}}</a> <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
<ul class="nav"> <div class="nav-collapse">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li> <ul class="nav">
<li><a href="#">{{_i}}Link{{/i}}</a></li> <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li> <li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li> <li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="dropdown"> <li><a href="#">{{_i}}Link{{/i}}</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <li class="dropdown">
<ul class="dropdown-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</li> </ul>
</ul> </li>
<form class="navbar-search pull-left" action=""> </ul>
<input type="text" class="search-query span2" placeholder="Search"> <form class="navbar-search pull-left" action="">
</form> <input type="text" class="search-query span2" placeholder="Search">
<ul class="nav pull-right"> </form>
<li><a href="#">{{_i}}Link{{/i}}</a></li> <ul class="nav pull-right">
<li class="vertical-divider"></li> <li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="dropdown"> <li class="vertical-divider"></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a> <li class="dropdown">
<ul class="dropdown-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<li><a href="#">{{_i}}Action{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#">{{_i}}Another action{{/i}}</a></li> <li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li> <li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li class="divider"></li> <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li class="divider"></li>
</ul> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</li> </ul>
</ul> </li>
</ul>
</div><!-- /.nav-collapse -->
</div> </div>
</div><!-- /navbar-inner --> </div><!-- /navbar-inner -->
</div><!-- /navbar --> </div><!-- /navbar -->
...@@ -661,7 +668,7 @@ ...@@ -661,7 +668,7 @@
&lt;input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"&gt; &lt;input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div> </div><!-- /.span -->
<div class="span4"> <div class="span4">
<h3>{{_i}}Nav links{{/i}}</h3> <h3>{{_i}}Nav links{{/i}}</h3>
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p> <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
...@@ -691,9 +698,9 @@ ...@@ -691,9 +698,9 @@
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p> <p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
</div> </div><!-- /.span -->
</div> </div><!-- /.row -->
</section> </section>
......
less/navbar.less
+ 2
- 2
View file @ 4fa931e4
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
display: none; display: none;
float: right; float: right;
padding: 7px 10px; padding: 7px 10px;
margin-left: 10px; margin-left: 5px;
margin-right: 10px; margin-right: 5px;
.buttonBackground(@navbarBackgroundHighlight, @navbarBackground); .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
.box-shadow(@shadow); .box-shadow(@shadow);
......
less/responsive.less
+ 13
- 12
View file @ 4fa931e4
...@@ -202,7 +202,7 @@ ...@@ -202,7 +202,7 @@
margin-bottom: @baseLineHeight * 2; margin-bottom: @baseLineHeight * 2;
} }
.navbar-inner { .navbar-inner {
padding: 10px; padding: 5px;
background-image: none; background-image: none;
} }
.navbar .container { .navbar .container {
...@@ -210,16 +210,18 @@ ...@@ -210,16 +210,18 @@
} }
// Account for brand name // Account for brand name
.navbar .brand { .navbar .brand {
float: none; padding-left: 10px;
display: block; padding-right: 10px;
padding-left: 15px; margin: 0 0 0 -5px;
padding-right: 15px; }
margin: 0; // Nav collapse clears brand
.navbar .nav-collapse {
clear: left;
} }
// Block-level the nav // Block-level the nav
.navbar .nav { .navbar .nav {
float: none; float: none;
margin: (@baseLineHeight / 2) 0; margin: 0 0 (@baseLineHeight / 2);
} }
.navbar .nav > li { .navbar .nav > li {
float: none; float: none;
...@@ -248,8 +250,10 @@ ...@@ -248,8 +250,10 @@
// Dropdowns in the navbar // Dropdowns in the navbar
.navbar .dropdown-menu { .navbar .dropdown-menu {
position: static; position: static;
display: block; top: auto;
left: auto;
float: none; float: none;
display: block;
max-width: none; max-width: none;
margin: 0 15px; margin: 0 15px;
padding: 0; padding: 0;
...@@ -301,7 +305,7 @@ ...@@ -301,7 +305,7 @@
// LARGE DESKTOP & UP // LARGE DESKTOP & UP
// ------------------ // ------------------
/*
@media (min-width: 1210px) { @media (min-width: 1210px) {
// Reset grid variables // Reset grid variables
...@@ -317,7 +321,6 @@ ...@@ -317,7 +321,6 @@
.offset(@columns: 1) { .offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
} }
.container { .container {
width: @siteWidth; width: @siteWidth;
} }
...@@ -354,7 +357,5 @@ ...@@ -354,7 +357,5 @@
.offset9 { .offset(9); } .offset9 { .offset(9); }
.offset10 { .offset(10); } .offset10 { .offset(10); }
.offset11 { .offset(11); } .offset11 { .offset(11); }
.offset12 { .offset(12); }
} }
*/
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment