mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-24 03:40:10 +00:00
52a348aa3f
I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
775 lines
14 KiB
CSS
775 lines
14 KiB
CSS
/*
|
|
* Bootstrap Documentation
|
|
* Special styles for presenting Bootstrap's documentation and code examples.
|
|
*/
|
|
|
|
|
|
|
|
/* Key scaffolding
|
|
-------------------------------------------------- */
|
|
|
|
body {
|
|
position: relative; /* For scrollyspy */
|
|
padding-top: 50px; /* Account for fixed navbar */
|
|
}
|
|
|
|
|
|
|
|
/* Top nav and header
|
|
-------------------------------------------------- */
|
|
|
|
.bs-docs-nav {
|
|
background-color: #b94a48;
|
|
}
|
|
.bs-docs-nav .navbar-brand {
|
|
color: #fff;
|
|
}
|
|
.bs-docs-nav .navbar-nav > li > a {
|
|
color: #e6cac8;
|
|
}
|
|
.bs-docs-nav .navbar-nav > li > a:hover {
|
|
color: #fff;
|
|
}
|
|
.bs-docs-nav .navbar-nav > .active > a,
|
|
.bs-docs-nav .navbar-nav > .active > a:hover {
|
|
color: #fff;
|
|
background-color: #993c3a;
|
|
}
|
|
.bs-docs-nav .navbar-toggle {
|
|
border-color: #b94a48;
|
|
}
|
|
.bs-docs-nav .navbar-toggle:hover {
|
|
background-color: #993c3a;
|
|
border-color: #993c3a;
|
|
}
|
|
|
|
|
|
|
|
/* Homepage masthead
|
|
-------------------------------------------------- */
|
|
|
|
.bs-masthead {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding: 30px 15px;
|
|
text-align: center;
|
|
}
|
|
.bs-masthead h1 {
|
|
font-size: 50px;
|
|
line-height: 1;
|
|
}
|
|
.bs-masthead .bs-social {
|
|
margin-top: 80px;
|
|
}
|
|
|
|
/* Download button */
|
|
.bs-masthead .btn {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
padding: 18px 24px;
|
|
font-size: 21px;
|
|
color: #b94a48; /* redeclare to override the `.jumbotron a` */
|
|
background-color: #fff;
|
|
border-color: #e5e5e5;
|
|
}
|
|
.bs-masthead .btn:hover,
|
|
.bs-masthead .btn:active {
|
|
color: #fff; /* redeclare to override the `.jumbotron a` */
|
|
background-color: #b94a48;
|
|
border-color: #b94a48;
|
|
}
|
|
|
|
/* Textual links */
|
|
.bs-masthead-links {
|
|
margin: 20px 0;
|
|
list-style: none;
|
|
}
|
|
.bs-masthead-links li {
|
|
display: inline;
|
|
color: #999;
|
|
}
|
|
.bs-masthead-links li + li {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
|
|
|
|
/* Customize and Download button
|
|
-------------------------------------------------- */
|
|
|
|
.bs-customize-download {
|
|
text-align:center;
|
|
}
|
|
.bs-customize-download .btn {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
padding: 18px 24px;
|
|
font-size: 21px;
|
|
color: #b94a48;
|
|
background-color: #fff;
|
|
border-color: #b94a48;
|
|
}
|
|
.bs-customize-download .btn:hover,
|
|
.bs-customize-download .btn:active {
|
|
color: #fff;
|
|
background-color: #b94a48;
|
|
}
|
|
|
|
|
|
|
|
/* Docs pages and sections
|
|
-------------------------------------------------- */
|
|
|
|
/* Page headers */
|
|
.bs-header {
|
|
padding: 30px 30px 40px;
|
|
font-size: 16px;
|
|
color: #5a5a5a;
|
|
text-align: center;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.bs-header h1 {
|
|
color: #b94a48;
|
|
}
|
|
.bs-header p {
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Padding for in-page bookmarks */
|
|
.bs-docs-section {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
|
|
|
|
/* Docs sidebar
|
|
-------------------------------------------------- */
|
|
|
|
/* By default it's not affixed in mobile views, so undo that */
|
|
.bs-sidebar.affix {
|
|
position: static;
|
|
}
|
|
|
|
/* First level of nav */
|
|
.bs-sidenav {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
text-shadow: 0 1px 0 #fff;
|
|
background-color: #f5f5f5;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* All levels of nav */
|
|
.bs-sidebar .nav > li > a {
|
|
display: block;
|
|
color: #666;
|
|
padding: 4px 20px;
|
|
}
|
|
.bs-sidebar .nav > li > a:hover,
|
|
.bs-sidebar .nav > li > a:focus {
|
|
text-decoration: none;
|
|
border-right: 1px solid #d5d5d5;
|
|
}
|
|
.bs-sidebar .nav > .active > a,
|
|
.bs-sidebar .nav > .active:hover > a,
|
|
.bs-sidebar .nav > .active:focus > a {
|
|
font-weight: 500;
|
|
color: #b94a48;
|
|
background-color: transparent;
|
|
border-right: 1px solid #b94a48;
|
|
}
|
|
|
|
/* Nav: second level (shown on .active) */
|
|
.bs-sidebar .nav .nav {
|
|
display: none;
|
|
margin-bottom: 5px;
|
|
}
|
|
.bs-sidebar .nav > .active > ul {
|
|
display: block;
|
|
}
|
|
.bs-sidebar .nav .nav > li > a {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding-left: 30px;
|
|
font-size: 90%;
|
|
}
|
|
|
|
|
|
|
|
/* Side notes for calling out things
|
|
-------------------------------------------------- */
|
|
|
|
.bs-callout {
|
|
margin: 20px 0;
|
|
padding: 15px 30px 15px 15px;
|
|
background-color: #fcf2f2;
|
|
border-left: 5px solid #df7c7b;
|
|
}
|
|
.bs-callout h4 {
|
|
margin-top: 0;
|
|
}
|
|
.bs-callout p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.bs-callout code,
|
|
.bs-callout .highlight {
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
|
|
/* Special grid styles
|
|
-------------------------------------------------- */
|
|
|
|
.show-grid {
|
|
margin-bottom: 15px;
|
|
}
|
|
.show-grid .col {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
background-color: #eee;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.show-grid .col:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
|
|
|
|
/* Bootstrap code examples
|
|
-------------------------------------------------- */
|
|
|
|
/* Base class */
|
|
.bs-example {
|
|
position: relative;
|
|
padding: 39px 14px 14px;
|
|
margin-bottom: -1px;
|
|
border: 1px solid #ddd;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
/* Echo out a label for the example */
|
|
.bs-example:after {
|
|
content: "Example";
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
padding: 3px 7px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #9da0a4;
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #ddd;
|
|
border-top-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
/* Tweak display of the examples */
|
|
.bs-example + .prettyprint,
|
|
.bs-example + .highlight {
|
|
margin-top: 0;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
/* Tweak content of examples for optimum awesome */
|
|
.bs-example > p:last-child,
|
|
.bs-example > ul:last-child,
|
|
.bs-example > ol:last-child,
|
|
.bs-example > blockquote:last-child,
|
|
.bs-example > input:last-child,
|
|
.bs-example > select:last-child,
|
|
.bs-example > textarea:last-child,
|
|
.bs-example > .table:last-child,
|
|
.bs-example > .navbar:last-child
|
|
.bs-example > .jumbotron:last-child,
|
|
.bs-example > .alert:last-child,
|
|
.bs-example > .panel:last-child,
|
|
.bs-example > .list-group:last-child,
|
|
.bs-example > .well:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.bs-example > .close {
|
|
float: none;
|
|
}
|
|
|
|
/* Typography */
|
|
.bs-example-type .table td {
|
|
color: #999;
|
|
vertical-align: middle;
|
|
border-color: ;
|
|
}
|
|
.bs-example-type .table td,
|
|
.bs-example-type .table th {
|
|
padding: 15px 0;
|
|
border-color: #eee;
|
|
}
|
|
.bs-example-type .table tr:first-child td,
|
|
.bs-example-type .table tr:first-child th {
|
|
border-top: 0;
|
|
}
|
|
.bs-example-type h1,
|
|
.bs-example-type h2,
|
|
.bs-example-type h3,
|
|
.bs-example-type h4,
|
|
.bs-example-type h5,
|
|
.bs-example-type h6 {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Forms */
|
|
.bs-example.form-inline select,
|
|
.bs-example.form-inline input[type="text"],
|
|
.bs-example.form-inline input[type="password"] {
|
|
width: 180px;
|
|
}
|
|
.bs-example-control-sizing input[type="text"] + input[type="text"] {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* List groups */
|
|
.bs-example > .list-group {
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* Navbar examples */
|
|
.bs-navbar-top-example,
|
|
.bs-navbar-bottom-example {
|
|
z-index: 1;
|
|
padding: 0;
|
|
min-height: 110px;
|
|
overflow: hidden; /* cut the drop shadows off */
|
|
}
|
|
.bs-navbar-top-example .navbar-fixed-top,
|
|
.bs-navbar-bottom-example .navbar-fixed-bottom {
|
|
position: relative;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
.bs-navbar-top-example .navbar-fixed-top {
|
|
top: -1px;
|
|
}
|
|
.bs-navbar-bottom-example .navbar-fixed-bottom {
|
|
bottom: -1px;
|
|
}
|
|
.bs-navbar-top-example {
|
|
-webkit-border-radius: 0 0 4px 4px;
|
|
-moz-border-radius: 0 0 4px 4px;
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
.bs-navbar-top-example:after {
|
|
top: auto;
|
|
bottom: -1px;
|
|
-webkit-border-radius: 0 4px 0 4px;
|
|
-moz-border-radius: 0 4px 0 4px;
|
|
border-radius: 0 4px 0 4px;
|
|
}
|
|
.bs-navbar-bottom-example {
|
|
-webkit-border-radius: 4px 4px 0 0;
|
|
-moz-border-radius: 4px 4px 0 0;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
.bs-navbar-bottom-example .navbar {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Example modals */
|
|
.bs-example-modal {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.bs-example-modal .modal {
|
|
position: relative;
|
|
top: auto;
|
|
right: auto;
|
|
left: auto;
|
|
bottom: auto;
|
|
z-index: 1;
|
|
display: block;
|
|
}
|
|
.bs-example-modal .modal-dialog {
|
|
left: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Example dropdowns */
|
|
.bs-example > .dropdown > .dropdown-menu,
|
|
.bs-example-submenu > .pull-left > .dropup > .dropdown-menu,
|
|
.bs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
|
|
position: static;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
.bs-example-submenu {
|
|
min-height: 230px;
|
|
}
|
|
.bs-example-submenu > .pull-left + .pull-left {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
/* Example tabbable tabs */
|
|
.bs-example-tabs .nav-tabs {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Tooltips */
|
|
.bs-example-tooltips {
|
|
text-align: center;
|
|
margin: 0 0 10px;
|
|
list-style: none;
|
|
}
|
|
.bs-example-tooltips li {
|
|
display: inline;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* Popovers */
|
|
.bs-example-popover {
|
|
padding-bottom: 24px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
.bs-example-popover .popover {
|
|
position: relative;
|
|
display: block;
|
|
float: left;
|
|
width: 260px;
|
|
margin: 20px;
|
|
}
|
|
|
|
|
|
|
|
/* Example templates
|
|
-------------------------------------------------- */
|
|
|
|
.bs-examples h4 {
|
|
margin-bottom: 5px;
|
|
}
|
|
.bs-examples p {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
|
|
/* Icons
|
|
-------------------------------------------------- */
|
|
|
|
.the-icons {
|
|
padding-bottom: 1px;
|
|
margin-left: 0;
|
|
list-style: none;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
.the-icons li {
|
|
float: left;
|
|
width: 100px;
|
|
height: 110px;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
font-size: 12px;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin: 0 -1px -1px 0;
|
|
}
|
|
.the-icons .glyphicon {
|
|
display: block;
|
|
margin: 5px auto;
|
|
vertical-align: middle;
|
|
margin-right: 3px;
|
|
font-size: 24px;
|
|
}
|
|
.the-icons li:hover {
|
|
background-color: rgba(255,0,0,.1);
|
|
}
|
|
|
|
|
|
|
|
/* Responsive docs
|
|
-------------------------------------------------- */
|
|
|
|
/* Related: responsive utilities tables */
|
|
.table code {
|
|
font-size: 13px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Utility classes table
|
|
------------------------- */
|
|
.responsive-utilities th small {
|
|
display: block;
|
|
font-weight: normal;
|
|
color: #999;
|
|
}
|
|
.responsive-utilities tbody th {
|
|
font-weight: normal;
|
|
}
|
|
.responsive-utilities td {
|
|
text-align: center;
|
|
}
|
|
.responsive-utilities td.is-visible {
|
|
color: #468847;
|
|
background-color: #dff0d8 !important;
|
|
}
|
|
.responsive-utilities td.is-hidden {
|
|
color: #ccc;
|
|
background-color: #f9f9f9 !important;
|
|
}
|
|
|
|
/* Responsive tests
|
|
------------------------- */
|
|
.responsive-utilities-test {
|
|
margin-top: 5px;
|
|
margin-left: 0;
|
|
list-style: none;
|
|
overflow: hidden; /* clear floats */
|
|
}
|
|
.responsive-utilities-test li {
|
|
position: relative;
|
|
float: left;
|
|
width: 25%;
|
|
}
|
|
.responsive-utilities-test li + li {
|
|
margin-left: 10px;
|
|
}
|
|
.responsive-utilities-test span {
|
|
padding: 15px 10px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
line-height: 1.1;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
}
|
|
.responsive-utilities-test.visible-on [class*="hidden"],
|
|
.responsive-utilities-test.hidden-on [class*="visible"] {
|
|
color: #999;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.responsive-utilities-test.visible-on [class*="visible"],
|
|
.responsive-utilities-test.hidden-on [class*="hidden"] {
|
|
color: #468847;
|
|
background-color: #dff0d8;
|
|
border: 1px solid #d6e9c6;
|
|
}
|
|
|
|
|
|
|
|
/* Footer
|
|
-------------------------------------------------- */
|
|
|
|
.bs-footer {
|
|
padding-top: 40px;
|
|
padding-bottom: 30px;
|
|
margin-top: 100px;
|
|
text-align: center;
|
|
border-top: 1px solid #e5e5e5;
|
|
}
|
|
.bs-footer p {
|
|
margin-bottom: 0;
|
|
color: #777;
|
|
}
|
|
.footer-links {
|
|
margin: 10px 0;
|
|
}
|
|
.footer-links li {
|
|
display: inline;
|
|
padding: 0 2px;
|
|
}
|
|
.footer-links li:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Social proof buttons from GitHub & Twitter */
|
|
.bs-social {
|
|
margin-bottom: 20px;
|
|
}
|
|
.bs-social-buttons {
|
|
display: inline-block;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
.bs-social-buttons li {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
}
|
|
.bs-social-buttons li + li {
|
|
margin-left: 15px;
|
|
}
|
|
.bs-social-buttons .twitter-follow-button {
|
|
width: 225px !important;
|
|
}
|
|
.bs-social-buttons .twitter-share-button {
|
|
width: 98px !important;
|
|
}
|
|
|
|
|
|
|
|
/* Misc docs stuff
|
|
-------------------------------------------------- */
|
|
|
|
/* Pseudo :focus state for showing how it looks in the docs */
|
|
input.focused {
|
|
border-color: rgba(82,168,236,.8);
|
|
outline: 0;
|
|
outline: thin dotted \9; /* IE6-9 */
|
|
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
|
|
box-shadow: 0 0 8px rgba(82,168,236,.6);
|
|
}
|
|
|
|
/* Scrollspy demo on fixed height div */
|
|
.scrollspy-example {
|
|
position: relative;
|
|
height: 200px;
|
|
margin-top: 10px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.highlight {
|
|
padding: 9px 14px;
|
|
margin-bottom: 14px;
|
|
background-color: #f7f7f9;
|
|
border: 1px solid #e1e1e8;
|
|
border-radius: 4px;
|
|
}
|
|
.highlight pre {
|
|
padding: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
background-color: transparent;
|
|
border: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.highlight pre code {
|
|
font-size: inherit;
|
|
color: #333; /* Effectively the base text color */
|
|
}
|
|
.highlight pre .lineno {
|
|
display: inline-block;
|
|
width: 22px;
|
|
padding-right: 5px;
|
|
margin-right: 10px;
|
|
text-align: right;
|
|
color: #bebec5;
|
|
}
|
|
|
|
/* Better spacing on download options in getting started */
|
|
.bs-docs-dl-options h4 {
|
|
margin-top: 15px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Hide the top link initially */
|
|
.bs-top {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* Responsive variations
|
|
-------------------------------------------------- */
|
|
|
|
/* Hide code snippets on mobile devices */
|
|
@media screen and (max-width: 480px) {
|
|
.bs-example {
|
|
border-radius: 4px;
|
|
}
|
|
.highlight {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Tablets and up */
|
|
@media screen and (min-width: 768px) {
|
|
|
|
/* Reaffix the fixed sidebar */
|
|
.bs-sidebar.affix {
|
|
position: fixed; /* Undo the static from mobile-first approach */
|
|
top: 50px;
|
|
width: 160px;
|
|
}
|
|
|
|
/* Back to top link */
|
|
.bs-top {
|
|
display: block; /* Unhide */
|
|
float: left;
|
|
padding: 7px 15px;
|
|
font-weight: 500;
|
|
color: #999;
|
|
background-color: #eee;
|
|
border-radius: 4px;
|
|
}
|
|
.bs-top:hover {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background-color: #999;
|
|
}
|
|
.bs-top.affix {
|
|
position: fixed;
|
|
right: 15px;
|
|
bottom: 15px;
|
|
}
|
|
|
|
.bs-header {
|
|
font-size: 21px;
|
|
text-align: left;
|
|
}
|
|
.bs-header h1 {
|
|
font-size: 60px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Show the docs nav */
|
|
.bs-sidebar {
|
|
display: block;
|
|
}
|
|
|
|
/* Tweak display of docs jumbotrons */
|
|
.bs-masthead {
|
|
padding-top: 100px;
|
|
padding-bottom: 100px;
|
|
}
|
|
.bs-masthead h1 {
|
|
font-size: 100px;
|
|
}
|
|
.bs-masthead p {
|
|
margin-left: 15%;
|
|
margin-right: 15%;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.bs-navbar-top-example .navbar-fixed-top,
|
|
.bs-navbar-bottom-example .navbar-fixed-bottom {
|
|
position: absolute;
|
|
}
|
|
|
|
}
|
|
|
|
/* Tablets/desktops and up */
|
|
@media screen and (min-width: 992px) {
|
|
|
|
/* Widen the fixed sidebar */
|
|
.bs-sidebar.affix {
|
|
width: 213px;
|
|
}
|
|
|
|
/* Icons */
|
|
.the-icons li {
|
|
width: 12.5%;
|
|
}
|
|
|
|
}
|
|
|
|
/* Large desktops and up */
|
|
@media screen and (min-width: 1200px) {
|
|
|
|
/* Widen the fixed sidebar again */
|
|
.bs-sidebar.affix {
|
|
width: 270px;
|
|
}
|
|
|
|
}
|