Badges, navs, and more

This commit is contained in:
Mark Otto 2014-07-09 00:15:20 -07:00
parent f380ca21e2
commit a8625f452e
12 changed files with 90 additions and 50 deletions

View File

@ -2988,7 +2988,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
padding: .5em 1em;
line-height: 1.5;
}
.nav > li > a:hover,
.nav > li > a:focus {
@ -3903,29 +3904,34 @@ a.label:focus {
background-color: #c9302c;
}
.badge {
position: relative;
top: -.1em;
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: .85rem;
padding-right: .6em;
padding-left: .6em;
font-size: .75em;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #818a91;
border-radius: 10px;
border-radius: 2em;
/* .btn & {
position: relative;
top: -1px;
}
*/
}
.badge:empty {
display: none;
}
.btn .badge {
position: relative;
top: -1px;
.badge.pull-left,
.badge.pull-right {
top: .2em;
}
.btn-xs .badge {
top: 0;
padding: 1px 5px;
/*top: 0;*/
/*padding: 1px 5px;*/
}
a.badge:hover,
a.badge:focus {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -43,9 +43,20 @@
</li>
</ul>
<br>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
<p>
<button class="btn btn-primary btn-lg" type="button">
Large button <span class="badge">4</span>
</button>
<button class="btn btn-primary" type="button">
Button <span class="badge">4</span>
</button>
<button class="btn btn-primary btn-sm" type="button">
Small button <span class="badge">4</span>
</button>
<button class="btn btn-primary btn-xs" type="button">
Extra small <span class="badge">4</span>
</button>
</p>
</div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked" role="tablist">

View File

@ -949,32 +949,41 @@ h1[id] {
.bs-example {
position: relative;
padding-top: 3rem;
padding: 1.5rem;
margin-top: 1rem;
margin-bottom: -1rem;
border: solid #f7f7f9;
border-width: .2rem 0 0;
}
/* Echo out a label for the example */
.bs-example:before {
position: absolute;
top: 0;
display: inline-block;
padding: .5rem .75rem;
font-size: .8rem;
display: none;
padding: .4rem .75rem;
font-size: .75rem;
font-weight: bold;
color: #fff;
text-transform: uppercase;
letter-spacing: .1rem;
content: "Example";
background-color: #818a91;
background-color: #eb4c82;
border-radius: .2rem;
}
/* Tweak display of the code snippets when following an example */
.bs-example + .highlight:before {
position: absolute;
/* position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
*/}
@media (min-width: 480px) {
.bs-example {
border-width: .2rem;
}
}
/* Undo width of container */

View File

@ -57,7 +57,7 @@
// }, 100)
// theme toggler
;(function () {
(function () {
var stylesheetLink = $('#bs-theme-stylesheet')
var themeBtn = $('.bs-docs-theme-toggle')
@ -81,7 +81,7 @@
localStorage.removeItem('previewTheme')
}
})
})();
})
// Tooltip and popover demos
$('.tooltip-demo').tooltip({

View File

@ -2988,7 +2988,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
padding: .5em 1em;
line-height: 1.5;
}
.nav > li > a:hover,
.nav > li > a:focus {
@ -3903,29 +3904,34 @@ a.label:focus {
background-color: #c9302c;
}
.badge {
position: relative;
top: -.1em;
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: .85rem;
padding-right: .6em;
padding-left: .6em;
font-size: .75em;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #818a91;
border-radius: 10px;
border-radius: 2em;
/* .btn & {
position: relative;
top: -1px;
}
*/
}
.badge:empty {
display: none;
}
.btn .badge {
position: relative;
top: -1px;
.badge.pull-left,
.badge.pull-right {
top: .2em;
}
.btn-xs .badge {
top: 0;
padding: 1px 5px;
/*top: 0;*/
/*padding: 1px 5px;*/
}
a.badge:hover,
a.badge:focus {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -5,16 +5,16 @@
// Base class
.badge {
position: relative;
top: -.1em;
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
padding-left: .6em;
padding-right: .6em;
font-size: .75em;
font-weight: @badge-font-weight;
color: @badge-color;
line-height: @badge-line-height;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
white-space: nowrap;
background-color: @badge-bg;
.border-radius(@badge-border-radius);
@ -23,14 +23,20 @@
display: none;
}
&.pull-left,
&.pull-right {
top: .2em;
}
// Quick fix for badges in buttons
.btn & {
/* .btn & {
position: relative;
top: -1px;
}
*/
.btn-xs & {
top: 0;
padding: 1px 5px;
/*top: 0;*/
/*padding: 1px 5px;*/
}
// Hover state, but only for links

View File

@ -20,6 +20,8 @@
position: relative;
display: block;
padding: @nav-link-padding;
line-height: @line-height-base;
&:hover,
&:focus {
text-decoration: none;

View File

@ -369,7 +369,7 @@
//##
//=== Shared nav styles
@nav-link-padding: 10px 15px;
@nav-link-padding: .5em 1em;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@ -675,7 +675,7 @@
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
@badge-border-radius: 2em;
//== Breadcrumbs