mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Badges, navs, and more
This commit is contained in:
parent
f380ca21e2
commit
a8625f452e
12 changed files with 90 additions and 50 deletions
30
dist/css/bootstrap.css
vendored
30
dist/css/bootstrap.css
vendored
|
@ -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 {
|
||||
|
|
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -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">
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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({
|
||||
|
|
30
docs/dist/css/bootstrap.css
vendored
30
docs/dist/css/bootstrap.css
vendored
|
@ -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 {
|
||||
|
|
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -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
|
||||
|
|
|
@ -20,6 +20,8 @@
|
|||
position: relative;
|
||||
display: block;
|
||||
padding: @nav-link-padding;
|
||||
line-height: @line-height-base;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue