mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Refactor navs: new classes, remove separate pills & tabs files, drop justified nav because it never really worked
This commit is contained in:
Mark Otto
@@ -1,58 +1,93 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="nav" class="page-header">Navs</h1>
|
||||
|
||||
<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
|
||||
<p class="lead">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
|
||||
<h2 id="nav-basic">Basic nav</h2>
|
||||
<p>Uses no modifier classes. No supported active state by default, given highly customizable nature of nav styles.</p>
|
||||
<h2 id="nav-base">Base nav</h2>
|
||||
<p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but <strong>not the active state</strong>.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav" role="tablist">
|
||||
<li>
|
||||
<a href="#">Active</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Link</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Another link</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="disabled">
|
||||
<a href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="nav-tabs">Tabs</h2>
|
||||
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav-tab" role="tablist">
|
||||
<li class="nav-tab-item active">
|
||||
<a href="#" class="nav-tab-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-tab-item">
|
||||
<a href="#" class="nav-tab-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item">
|
||||
<a href="#" class="nav-tab-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item disabled">
|
||||
<a href="#" class="nav-tab-link">Disabled</a>
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav-tab" role="tablist">
|
||||
<li class="nav-tab-item active">
|
||||
<a href="#" class="nav-tab-link">Active</a>
|
||||
<ul class="nav" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item">
|
||||
<a href="#" class="nav-tab-link">Link</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item">
|
||||
<a href="#" class="nav-tab-link">Another link</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-tab-item disabled">
|
||||
<a href="#" class="nav-tab-link">Disabled</a>
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Classes are used so your markup can be super flexible.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="nav" role="tablist">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<nav class="nav" role="tablist">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="nav-tabs">Tabs</h2>
|
||||
<p>Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
@@ -64,78 +99,70 @@
|
||||
<h2 id="nav-pills">Pills</h2>
|
||||
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav-pill" role="tablist">
|
||||
<li class="nav-pill-item active">
|
||||
<a href="#" class="nav-pill-link">Active</a>
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Link</a>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Another link</a>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item disabled">
|
||||
<a href="#" class="nav-pill-link">Disabled</a>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav-pill" role="tablist">
|
||||
<li class="nav-pill-item active">
|
||||
<a href="#" class="nav-pill-link">Active</a>
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Link</a>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item">
|
||||
<a href="#" class="nav-pill-link">Another link</a>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-pill-item disabled">
|
||||
<a href="#" class="nav-pill-link">Disabled</a>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
|
||||
<h2 id="nav-pills-stacked">Stacked pills</h2>
|
||||
<p>Just add <code>.nav-stacked</code>.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist">
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="nav-justified">Justified</h2>
|
||||
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Safari and responsive justified navs</h4>
|
||||
<p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs nav-justified" role="tablist">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<ul class="nav nav-pills nav-justified" role="tablist">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Messages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs nav-justified" role="tablist">
|
||||
...
|
||||
</ul>
|
||||
<ul class="nav nav-pills nav-justified" role="tablist">
|
||||
...
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@@ -41,10 +41,9 @@
|
||||
<li>
|
||||
<a href="#nav">Navs</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#nav-base">Base nav</a></li>
|
||||
<li><a href="#nav-tabs">Tabs</a></li>
|
||||
<li><a href="#nav-pills">Pills</a></li>
|
||||
<li><a href="#nav-justified">Justified nav</a></li>
|
||||
<li><a href="#nav-disabled-links">Disabled links</a></li>
|
||||
<li><a href="#nav-dropdowns">Using dropdowns</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -21,4 +21,4 @@ var Holder=Holder||{};!function(a,b){function c(a,b,c){b=parseInt(b,10),a=parseI
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
!function(a){"use strict";a(function(){var b=a(window),c=a(document.body);c.scrollspy({target:".active .bs-docs-sidenav"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()})(function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b=a(this),c=b.prev(),d='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';c.hasClass("bs-example")?c.before(d.replace(/btn-clipboard/,"btn-clipboard with-example")):b.before(d)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||
!function(a){"use strict";a(function(){var b=a(window),c=a("document.body");c.scrollspy({target:".active .bs-docs-sidenav"}),b.on("load",function(){c.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()})(function(){var b=a("#bs-theme-stylesheet"),c=a(".bs-docs-theme-toggle"),d=function(){b.attr("href",b.attr("data-href")),c.text("Disable theme preview"),localStorage.setItem("previewTheme",!0)};localStorage.getItem("previewTheme")&&d(),c.click(function(){var a=b.attr("href");a&&0!==a.indexOf("data")?(b.attr("href",""),c.text("Preview theme"),localStorage.removeItem("previewTheme")):d()})}),a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b=a(this),c=b.prev(),d='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';c.hasClass("bs-example")?c.before(d.replace(/btn-clipboard/,"btn-clipboard with-example")):b.before(d)});var d=new ZeroClipboard(a(".btn-clipboard")),e=a("#global-zeroclipboard-html-bridge");d.on("load",function(){e.data("placement","top").attr("title","Copy to clipboard").tooltip()}),d.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),d.on("complete",function(){e.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),d.on("noflash wrongflash",function(){e.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
// Scrollspy
|
||||
var $window = $(window)
|
||||
var $body = $(document.body)
|
||||
var $body = $('document.body')
|
||||
|
||||
$body.scrollspy({
|
||||
target: '.active .bs-docs-sidenav'
|
||||
|
||||
@@ -916,6 +916,7 @@ h1[id] {
|
||||
}
|
||||
|
||||
// Tweak content of examples for optimum awesome
|
||||
.bs-example > *:last-child,
|
||||
.bs-example > p:last-child,
|
||||
.bs-example > ul:last-child,
|
||||
.bs-example > ol:last-child,
|
||||
@@ -930,7 +931,7 @@ h1[id] {
|
||||
.bs-example > .well:last-child,
|
||||
.bs-example > .progress:last-child,
|
||||
.bs-example > .table-responsive:last-child > .table {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.bs-example > p > .close {
|
||||
float: none;
|
||||
|
||||
Vendored
+64
-258
@@ -2963,15 +2963,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
.nav-link {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
padding: .5em 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -2980,198 +2979,103 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.open > .nav-link:hover,
|
||||
.active > .nav-link:hover,
|
||||
.open > .nav-link:focus,
|
||||
.active > .nav-link:focus {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.disabled > .nav-link {
|
||||
.disabled > .nav-link,
|
||||
.nav-link.disabled {
|
||||
color: #818a91;
|
||||
}
|
||||
.disabled > .nav-link,
|
||||
.nav-link.disabled,
|
||||
.disabled > .nav-link:hover,
|
||||
.disabled > .nav-link:focus {
|
||||
.nav-link.disabled:hover,
|
||||
.disabled > .nav-link:focus,
|
||||
.nav-link.disabled:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.nav > li.disabled > a {
|
||||
color: #818a91;
|
||||
}
|
||||
.nav > li.disabled > a:hover,
|
||||
.nav > li.disabled > a:focus {
|
||||
color: #818a91;
|
||||
text-decoration: none;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus {
|
||||
background-color: #eceeef;
|
||||
border-color: #027de7;
|
||||
}
|
||||
.nav-tabs {
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs > li {
|
||||
.nav-tabs .nav-item {
|
||||
float: left;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: 1.5;
|
||||
.nav-tabs .nav-item + .nav-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-tabs .nav-link {
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
.nav-tabs .nav-link:hover,
|
||||
.nav-tabs .nav-link:focus {
|
||||
border-color: #eceeef #eceeef #ddd;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.active > a:focus {
|
||||
.nav-tabs .open > .nav-link,
|
||||
.nav-tabs .active > .nav-link,
|
||||
.nav-tabs .nav-link.open,
|
||||
.nav-tabs .nav-link.active,
|
||||
.nav-tabs .open > .nav-link:hover,
|
||||
.nav-tabs .active > .nav-link:hover,
|
||||
.nav-tabs .nav-link.open:hover,
|
||||
.nav-tabs .nav-link.active:hover,
|
||||
.nav-tabs .open > .nav-link:focus,
|
||||
.nav-tabs .active > .nav-link:focus,
|
||||
.nav-tabs .nav-link.open:focus,
|
||||
.nav-tabs .nav-link.active:focus {
|
||||
color: #55595c;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
border-color: #ddd #ddd transparent;
|
||||
}
|
||||
.nav-tabs.nav-justified {
|
||||
width: 100%;
|
||||
border-bottom: 0;
|
||||
.nav-tabs .disabled > .nav-link,
|
||||
.nav-tabs .nav-link.disabled,
|
||||
.nav-tabs .disabled > .nav-link:hover,
|
||||
.nav-tabs .nav-link.disabled:hover,
|
||||
.nav-tabs .disabled > .nav-link:focus,
|
||||
.nav-tabs .nav-link.disabled:focus {
|
||||
color: #818a91;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.nav-tabs.nav-justified > li {
|
||||
float: none;
|
||||
.nav-pills {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs.nav-justified > li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-right: 0;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-tabs.nav-justified > .active > a,
|
||||
.nav-tabs.nav-justified > .active > a:hover,
|
||||
.nav-tabs.nav-justified > .active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs.nav-justified > .active > a,
|
||||
.nav-tabs.nav-justified > .active > a:hover,
|
||||
.nav-tabs.nav-justified > .active > a:focus {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
.nav-pills > li {
|
||||
.nav-pills .nav-item {
|
||||
float: left;
|
||||
}
|
||||
.nav-pills > li > a {
|
||||
.nav-pills .nav-item + .nav-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-pills .nav-link {
|
||||
display: block;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.nav-pills > li.active > a,
|
||||
.nav-pills > li.active > a:hover,
|
||||
.nav-pills > li.active > a:focus {
|
||||
.nav-pills .open > .nav-link,
|
||||
.nav-pills .active > .nav-link,
|
||||
.nav-pills .nav-link.open,
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .open > .nav-link:hover,
|
||||
.nav-pills .active > .nav-link:hover,
|
||||
.nav-pills .nav-link.open:hover,
|
||||
.nav-pills .nav-link.active:hover,
|
||||
.nav-pills .open > .nav-link:focus,
|
||||
.nav-pills .active > .nav-link:focus,
|
||||
.nav-pills .nav-link.open:focus,
|
||||
.nav-pills .nav-link.active:focus {
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.nav-stacked > li {
|
||||
.nav-stacked .nav-item {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
.nav-stacked > li + li {
|
||||
margin-top: 2px;
|
||||
.nav-stacked .nav-item + .nav-item {
|
||||
margin-top: .2rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.nav-justified {
|
||||
width: 100%;
|
||||
}
|
||||
.nav-justified > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-justified > li > a {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-justified > .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-justified > li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
.nav-justified > li > a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs-justified {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs-justified > li > a {
|
||||
margin-right: 0;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-tabs-justified > .active > a,
|
||||
.nav-tabs-justified > .active > a:hover,
|
||||
.nav-tabs-justified > .active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.nav-tabs-justified > li > a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tabs-justified > .active > a,
|
||||
.nav-tabs-justified > .active > a:hover,
|
||||
.nav-tabs-justified > .active > a:focus {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
.tab-content > .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
@@ -3183,95 +3087,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.nav-tab {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.nav-tab-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-tab-link {
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
margin-right: .2rem;
|
||||
line-height: 1.5;
|
||||
border: 1px solid transparent;
|
||||
border-radius: .2rem .2rem 0 0;
|
||||
}
|
||||
.nav-tab-link:hover,
|
||||
.nav-tab-link:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
border-color: #eceeef #eceeef #ddd;
|
||||
}
|
||||
.open > .nav-tab-link,
|
||||
.active > .nav-tab-link,
|
||||
.open > .nav-tab-link:hover,
|
||||
.active > .nav-tab-link:hover,
|
||||
.open > .nav-tab-link:focus,
|
||||
.active > .nav-tab-link:focus {
|
||||
color: #55595c;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.disabled > .nav-tab-link,
|
||||
.disabled > .nav-tab-link:hover,
|
||||
.disabled > .nav-tab-link:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.nav-pill {
|
||||
padding-left: 0;
|
||||
margin-bottom: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-pill-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.nav-pill-item + .nav-pill-item {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
.nav-pill-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
.nav-pill-link:hover,
|
||||
.nav-pill-link:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eceeef;
|
||||
}
|
||||
.open > .nav-pill-link,
|
||||
.active > .nav-pill-link,
|
||||
.open > .nav-pill-link:hover,
|
||||
.active > .nav-pill-link:hover,
|
||||
.open > .nav-pill-link:focus,
|
||||
.active > .nav-pill-link:focus {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
.disabled > .nav-pill-link {
|
||||
color: #818a91;
|
||||
}
|
||||
.disabled > .nav-pill-link,
|
||||
.disabled > .nav-pill-link:hover,
|
||||
.disabled > .nav-pill-link:focus {
|
||||
color: #818a91;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar {
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
@@ -5128,12 +4943,6 @@ button.close {
|
||||
.btn-group-vertical > .btn-group:after,
|
||||
.nav:before,
|
||||
.nav:after,
|
||||
.nav:before,
|
||||
.nav:after,
|
||||
.nav-tab:before,
|
||||
.nav-tab:after,
|
||||
.nav-pill:before,
|
||||
.nav-pill:after,
|
||||
.navbar:before,
|
||||
.navbar:after,
|
||||
.navbar-header:before,
|
||||
@@ -5156,9 +4965,6 @@ button.close {
|
||||
.btn-toolbar:after,
|
||||
.btn-group-vertical > .btn-group:after,
|
||||
.nav:after,
|
||||
.nav:after,
|
||||
.nav-tab:after,
|
||||
.nav-pill:after,
|
||||
.navbar:after,
|
||||
.navbar-header:after,
|
||||
.navbar-collapse:after,
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user