0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-14 02:24:00 +01:00
Bootstrap/docs/assets/css/src/docs.css

1633 lines
30 KiB
CSS
Raw Normal View History

/*!
* Bootstrap Docs (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
2015-05-17 11:43:04 +02:00
* details, see https://creativecommons.org/licenses/by/3.0/.
*/
2013-02-12 21:16:32 +01:00
/*
* Bootstrap Documentation
* Special styles for presenting Bootstrap's documentation and code examples.
*/
2013-08-18 08:53:27 +02:00
/*
* Scaffolding
*
* Update the basics of our documents to prep for docs content.
*/
2013-02-12 21:16:32 +01:00
body {
2014-02-12 21:01:37 +01:00
position: relative; /* For scrollspy */
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
/* Keep code small in tables on account of limited space */
.table code {
font-size: 13px;
font-weight: normal;
}
/* Inline code within headings retain the heading's background-color */
h2 code,
h3 code,
h4 code {
background-color: inherit;
}
2013-08-18 08:53:27 +02:00
/* Outline button for use within the docs */
2013-08-19 06:02:52 +02:00
.btn-outline {
2013-07-26 09:04:15 +02:00
color: #563d7c;
2013-11-06 20:00:39 +01:00
background-color: transparent;
border-color: #563d7c;
}
2013-08-19 06:02:52 +02:00
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
color: #fff;
2013-07-26 09:04:15 +02:00
background-color: #563d7c;
border-color: #563d7c;
}
2013-08-19 06:02:52 +02:00
/* Inverted outline button (white on dark) */
.btn-outline-inverse {
2014-01-10 03:05:04 +01:00
color: #fff;
background-color: transparent;
border-color: #cdbfe3;
}
2013-08-19 06:02:52 +02:00
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
color: #563d7c;
text-shadow: none;
background-color: #fff;
border-color: #fff;
}
2013-12-12 07:37:59 +01:00
/* Bootstrap "B" icon */
.bs-docs-booticon {
2013-12-12 07:37:59 +01:00
display: block;
font-weight: 500;
color: #fff;
2014-02-27 09:12:52 +01:00
text-align: center;
cursor: default;
2013-12-12 07:37:59 +01:00
background-color: #563d7c;
border-radius: 15%;
}
.bs-docs-booticon-sm {
2013-12-12 07:37:59 +01:00
width: 30px;
height: 30px;
font-size: 20px;
line-height: 28px;
}
.bs-docs-booticon-lg {
2013-12-12 07:37:59 +01:00
width: 144px;
height: 144px;
font-size: 108px;
line-height: 140px;
}
.bs-docs-booticon-inverse {
2013-12-27 23:04:44 +01:00
color: #563d7c;
background-color: #fff;
}
.bs-docs-booticon-outline {
2014-01-10 03:05:04 +01:00
background-color: transparent;
2014-01-12 04:35:40 +01:00
border: 1px solid #cdbfe3;
2014-01-10 03:05:04 +01:00
}
2013-12-12 07:37:59 +01:00
2013-05-09 07:50:41 +02:00
/*
* Fancy skip link
*
* Make it look a bit less "bare bones"
* Also includes focus suppression for the Chrome tabindex="-1" workaround
*/
#skippy {
display: block;
padding: 1em;
color: #fff;
2014-12-21 08:05:18 +01:00
background-color: #6f5499;
outline: 0;
}
#skippy .skiplink-text {
2014-12-21 08:05:18 +01:00
padding: .5em;
outline: 1px dotted;
}
#content:focus {
outline: none;
}
2013-08-18 08:53:27 +02:00
/*
* Main navigation
*
* Turn the `.navbar` at the top of the docs purple.
*/
2013-05-09 07:50:41 +02:00
.bs-docs-nav {
2014-01-10 03:05:04 +01:00
margin-bottom: 0;
2013-11-06 20:00:39 +01:00
background-color: #fff;
2014-01-12 04:35:40 +01:00
border-bottom: 0;
2014-01-10 03:05:04 +01:00
}
.bs-home-nav .bs-nav-b {
display: none;
2013-05-15 07:08:32 +02:00
}
2013-11-06 20:00:39 +01:00
.bs-docs-nav .navbar-brand,
2013-05-09 07:24:07 +02:00
.bs-docs-nav .navbar-nav > li > a {
2013-11-06 20:00:39 +01:00
font-weight: 500;
2014-02-27 09:12:52 +01:00
color: #563d7c;
2013-05-09 07:24:07 +02:00
}
2013-11-06 20:00:39 +01:00
.bs-docs-nav .navbar-nav > li > a:hover,
2013-05-09 07:31:49 +02:00
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
2013-11-06 20:00:39 +01:00
color: #463265;
background-color: #f9f9f9;
2013-05-09 07:24:07 +02:00
}
2013-11-06 20:00:39 +01:00
.bs-docs-nav .navbar-toggle .icon-bar {
background-color: #563d7c;
2013-05-09 07:24:07 +02:00
}
.bs-docs-nav .navbar-header .navbar-toggle {
border-color: #fff;
2013-05-09 07:24:07 +02:00
}
.bs-docs-nav .navbar-header .navbar-toggle:hover,
.bs-docs-nav .navbar-header .navbar-toggle:focus {
2013-11-06 20:00:39 +01:00
background-color: #f9f9f9;
border-color: #f9f9f9;
}
2013-08-18 08:53:27 +02:00
/*
* Footer
*
* Separated section of content at the bottom of all pages, save the homepage.
*/
.bs-docs-footer {
padding-top: 50px;
padding-bottom: 50px;
2013-08-18 08:53:27 +02:00
margin-top: 100px;
color: #99979c;
text-align: center;
background-color: #2a2730;
}
.bs-docs-footer a {
color: #fff;
}
.bs-docs-footer-links {
2013-08-18 08:53:27 +02:00
padding-left: 0;
margin-bottom: 20px;
}
.bs-docs-footer-links li {
display: inline-block;
}
.bs-docs-footer-links li + li {
margin-left: 15px;
2013-08-18 08:53:27 +02:00
}
@media (min-width: 768px) {
.bs-docs-footer {
text-align: left;
}
.bs-docs-footer p {
margin-bottom: 0;
}
}
2013-08-18 08:53:27 +02:00
/*
* Homepage
*
* Tweaks to the custom homepage and the masthead (main jumbotron).
*/
2013-02-12 21:16:32 +01:00
2014-01-14 07:54:22 +01:00
/* Share masthead with page headers */
.bs-docs-masthead,
.bs-docs-header {
2014-01-16 00:01:41 +01:00
position: relative;
padding: 30px 0;
2014-01-10 03:05:04 +01:00
color: #cdbfe3;
2013-04-15 01:31:52 +02:00
text-align: center;
2014-01-12 04:35:40 +01:00
text-shadow: 0 1px 0 rgba(0,0,0,.1);
background-color: #6f5499;
2014-02-22 11:17:58 +01:00
background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
2014-01-12 04:35:40 +01:00
background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%);
2014-02-22 11:17:58 +01:00
background-image: -o-linear-gradient(top, #563d7c 0%, #6f5499 100%);
2014-02-27 09:12:52 +01:00
background-image: linear-gradient(to bottom, #563d7c 0%, #6f5499 100%);
2014-01-12 04:35:40 +01:00
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
2014-02-27 09:12:52 +01:00
background-repeat: repeat-x;
2013-12-12 07:37:59 +01:00
}
2014-01-14 07:54:22 +01:00
/* Masthead (headings and download button) */
.bs-docs-masthead .bs-docs-booticon {
2013-12-12 07:37:59 +01:00
margin: 0 auto 30px;
2013-11-06 20:00:39 +01:00
}
.bs-docs-masthead h1 {
2013-12-12 07:37:59 +01:00
font-weight: 300;
2013-04-14 21:49:35 +02:00
line-height: 1;
2014-01-10 03:05:04 +01:00
color: #fff;
2013-02-12 21:16:32 +01:00
}
.bs-docs-masthead .lead {
2014-01-10 03:05:04 +01:00
margin: 0 auto 30px;
2013-12-12 07:37:59 +01:00
font-size: 20px;
2014-01-10 03:05:04 +01:00
color: #fff;
2013-11-06 20:00:39 +01:00
}
.bs-docs-masthead .version {
margin-top: -15px;
margin-bottom: 30px;
color: #9783b9;
}
.bs-docs-masthead .btn {
2013-11-06 20:00:39 +01:00
width: 100%;
2014-01-10 03:05:04 +01:00
padding: 15px 30px;
2013-11-06 20:00:39 +01:00
font-size: 20px;
}
@media (min-width: 480px) {
.bs-docs-masthead .btn {
2013-11-06 20:00:39 +01:00
width: auto;
}
}
2013-02-12 21:16:32 +01:00
@media (min-width: 768px) {
.bs-docs-masthead {
padding: 80px 0;
2013-12-12 07:37:59 +01:00
}
.bs-docs-masthead h1 {
2013-12-12 23:57:43 +01:00
font-size: 60px;
}
.bs-docs-masthead .lead {
2013-11-17 01:50:47 +01:00
font-size: 24px;
2013-11-06 20:00:39 +01:00
}
}
@media (min-width: 992px) {
.bs-docs-masthead .lead {
2014-01-10 03:05:04 +01:00
width: 80%;
2013-08-18 08:53:27 +02:00
font-size: 30px;
}
2013-08-16 05:25:43 +02:00
}
2013-08-18 08:53:27 +02:00
/*
* Page headers
*
* Jumbotron-esque headers at the top of every page that's not the homepage.
*/
/* Page headers */
.bs-docs-header {
2014-01-12 09:04:24 +01:00
margin-bottom: 40px;
font-size: 20px;
2013-05-09 07:29:53 +02:00
}
.bs-docs-header h1 {
2014-01-14 07:59:09 +01:00
margin-top: 0;
2014-01-14 07:54:22 +01:00
color: #fff;
2013-05-09 07:29:53 +02:00
}
.bs-docs-header p {
2014-01-14 07:59:09 +01:00
margin-bottom: 0;
2013-05-09 07:29:53 +02:00
font-weight: 300;
2014-01-14 07:54:22 +01:00
line-height: 1.4;
2013-02-12 21:16:32 +01:00
}
.bs-docs-header .container {
2013-07-18 08:22:28 +02:00
position: relative;
}
@media (min-width: 768px) {
.bs-docs-header {
2014-01-14 07:59:09 +01:00
padding-top: 60px;
padding-bottom: 60px;
2014-01-14 07:54:22 +01:00
font-size: 24px;
2013-08-18 08:53:27 +02:00
text-align: left;
}
.bs-docs-header h1 {
2013-08-18 08:53:27 +02:00
font-size: 60px;
line-height: 1;
}
2013-07-27 04:32:05 +02:00
}
@media (min-width: 992px) {
.bs-docs-header h1,
.bs-docs-header p {
2013-08-18 08:53:27 +02:00
margin-right: 380px;
}
}
/*
* Carbon ads
*
* Single display ad that shows on all pages (except homepage) in page headers.
* The hella `!important` is required for any pre-set property.
*/
2013-07-18 08:22:28 +02:00
.carbonad {
width: auto !important;
2014-02-27 09:12:52 +01:00
height: auto !important;
2013-07-18 08:22:28 +02:00
padding: 20px !important;
margin: 30px -15px -31px !important;
2013-07-18 08:22:28 +02:00
overflow: hidden; /* clearfix */
font-size: 13px !important;
line-height: 16px !important;
text-align: left;
2014-01-14 07:54:22 +01:00
background: transparent !important;
border: solid #866ab3 !important;
border-width: 1px 0 !important;
2013-07-18 08:22:28 +02:00
}
.carbonad-img {
margin: 0 !important;
}
.carbonad-text,
.carbonad-tag {
display: block !important;
2014-02-27 09:12:52 +01:00
float: none !important;
2013-07-18 08:22:28 +02:00
width: auto !important;
height: auto !important;
margin-left: 145px !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.carbonad-text {
padding-top: 0 !important;
}
.carbonad-tag {
2014-01-14 07:54:22 +01:00
color: inherit !important;
2013-07-18 08:22:28 +02:00
text-align: left !important;
}
2013-08-16 09:54:19 +02:00
.carbonad-text a,
.carbonad-tag a {
2014-01-14 07:54:22 +01:00
color: #fff !important;
2013-08-16 09:54:19 +02:00
}
2013-07-18 08:22:28 +02:00
.carbonad #azcarbon > img {
display: none; /* hide what I assume are tracking images */
}
@media (min-width: 480px) {
.carbonad {
width: 330px !important;
2014-01-14 07:54:22 +01:00
margin: 20px auto !important;
border-width: 1px !important;
2014-02-27 09:12:52 +01:00
border-radius: 4px;
}
.bs-docs-masthead .carbonad {
2013-12-27 06:49:40 +01:00
margin: 50px auto 0 !important;
}
}
@media (min-width: 768px) {
2013-08-18 08:53:27 +02:00
.carbonad {
2014-01-16 01:25:04 +01:00
margin-right: 0 !important;
2014-02-27 09:12:52 +01:00
margin-left: 0 !important;
2013-08-18 08:53:27 +02:00
}
}
@media (min-width: 992px) {
2013-08-18 08:53:27 +02:00
.carbonad {
position: absolute;
2014-01-14 07:59:09 +01:00
top: 0;
right: 15px; /* 15px instead of 0 since box-sizing */
2013-08-18 08:53:27 +02:00
width: 330px !important;
2014-02-27 09:12:52 +01:00
padding: 15px !important;
margin: 0 !important;
2013-08-18 08:53:27 +02:00
}
.bs-docs-masthead .carbonad {
position: static;
2013-10-02 07:11:51 +02:00
}
}
2013-12-12 07:37:59 +01:00
/*
* Homepage featurettes
*
* Reasons to use Bootstrap, entries from the Expo, and more.
*/
.bs-docs-featurette {
2014-03-04 23:35:23 +01:00
padding-top: 40px;
2013-12-12 23:57:43 +01:00
padding-bottom: 40px;
2013-12-12 07:37:59 +01:00
font-size: 16px;
line-height: 1.5;
color: #555;
text-align: center;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
}
.bs-docs-featurette + .bs-docs-footer {
2013-12-12 07:37:59 +01:00
margin-top: 0;
border-top: 0;
}
.bs-docs-featurette-title {
2014-02-27 09:12:52 +01:00
margin-bottom: 5px;
2013-12-12 23:57:43 +01:00
font-size: 30px;
2013-12-12 07:37:59 +01:00
font-weight: normal;
color: #333;
}
2013-12-12 23:57:43 +01:00
.half-rule {
width: 100px;
margin: 40px auto;
2013-12-12 07:37:59 +01:00
}
.bs-docs-featurette h3 {
2014-02-27 09:12:52 +01:00
margin-bottom: 5px;
2013-12-12 23:57:43 +01:00
font-weight: normal;
color: #333;
2013-12-12 07:37:59 +01:00
}
.bs-docs-featurette-img {
2013-12-12 23:57:43 +01:00
display: block;
margin-bottom: 20px;
color: #333;
2013-12-12 07:37:59 +01:00
}
.bs-docs-featurette-img:hover {
color: #337ab7;
2014-02-27 09:12:52 +01:00
text-decoration: none;
2013-12-12 23:57:43 +01:00
}
.bs-docs-featurette-img img {
2013-12-12 23:57:43 +01:00
display: block;
margin-bottom: 15px;
}
@media (min-width: 480px) {
.bs-docs-featurette .img-responsive {
2013-12-12 23:57:43 +01:00
margin-top: 30px;
}
}
@media (min-width: 768px) {
.bs-docs-featurette {
2014-03-04 23:35:23 +01:00
padding-top: 100px;
2013-12-12 23:57:43 +01:00
padding-bottom: 100px;
}
.bs-docs-featurette-title {
2013-12-12 23:57:43 +01:00
font-size: 40px;
}
.bs-docs-featurette .lead {
2013-12-12 23:57:43 +01:00
max-width: 80%;
2014-02-27 09:12:52 +01:00
margin-right: auto;
2014-03-04 23:35:23 +01:00
margin-left: auto;
2013-12-12 23:57:43 +01:00
}
.bs-docs-featurette .img-responsive {
2013-12-12 23:57:43 +01:00
margin-top: 0;
}
2013-10-02 07:11:51 +02:00
}
/*
* Featured sites
*
* Homepage thumbnails from the Expo.
*/
2014-06-26 11:49:21 +02:00
.bs-docs-featured-sites {
margin-right: -1px;
margin-left: -1px;
}
.bs-docs-featured-sites .col-xs-6 {
padding: 1px;
2014-06-26 11:49:21 +02:00
}
.bs-docs-featured-sites .img-responsive {
margin-top: 0;
2014-06-26 11:49:21 +02:00
}
@media (min-width: 768px) {
.bs-docs-featured-sites .col-sm-3:first-child img {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.bs-docs-featured-sites .col-sm-3:last-child img {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
2014-06-26 11:49:21 +02:00
}
}
/*
* Examples
*
* Linked docs examples.
*/
.bs-examples .thumbnail {
margin-bottom: 10px;
}
.bs-examples h4 {
margin-bottom: 5px;
}
.bs-examples p {
margin-bottom: 20px;
}
2014-06-26 11:49:21 +02:00
@media (max-width: 480px) {
.bs-examples {
margin-right: -10px;
margin-left: -10px;
}
.bs-examples > [class^="col-"] {
padding-right: 10px;
padding-left: 10px;
}
}
2013-08-18 08:53:27 +02:00
/*
* Side navigation
*
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
* sections of docs content.
*/
2013-02-12 21:16:32 +01:00
/* By default it's not affixed in mobile views, so undo that */
.bs-docs-sidebar.affix {
position: static;
}
2013-12-12 07:37:59 +01:00
@media (min-width: 768px) {
.bs-docs-sidebar {
2013-12-18 18:42:13 +01:00
padding-left: 20px;
2013-12-12 07:37:59 +01:00
}
}
/* First level of nav */
.bs-docs-sidenav {
2014-01-10 03:05:04 +01:00
margin-top: 20px;
margin-bottom: 20px;
2013-03-28 08:21:21 +01:00
}
/* All levels of nav */
.bs-docs-sidebar .nav > li > a {
2013-03-30 07:33:08 +01:00
display: block;
2014-02-27 09:12:52 +01:00
padding: 4px 20px;
2013-12-18 18:42:13 +01:00
font-size: 13px;
2013-12-12 07:37:59 +01:00
font-weight: 500;
2014-11-13 18:28:14 +01:00
color: #767676;
}
.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus {
2013-12-12 07:37:59 +01:00
padding-left: 19px;
color: #563d7c;
2013-03-30 07:33:08 +01:00
text-decoration: none;
2013-12-12 07:37:59 +01:00
background-color: transparent;
border-left: 1px solid #563d7c;
2013-03-28 08:21:21 +01:00
}
.bs-docs-sidebar .nav > .active > a,
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a {
2013-12-12 07:37:59 +01:00
padding-left: 18px;
2013-07-27 00:34:50 +02:00
font-weight: bold;
2013-07-26 09:04:15 +02:00
color: #563d7c;
background-color: transparent;
2013-12-12 07:37:59 +01:00
border-left: 2px solid #563d7c;
2013-03-28 08:21:21 +01:00
}
2013-03-30 07:33:08 +01:00
/* Nav: second level (shown on .active) */
.bs-docs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
2013-12-12 07:37:59 +01:00
padding-bottom: 10px;
2013-03-30 07:33:08 +01:00
}
.bs-docs-sidebar .nav .nav > li > a {
2014-03-04 23:35:23 +01:00
padding-top: 1px;
padding-bottom: 1px;
2013-05-10 19:29:54 +02:00
padding-left: 30px;
2013-12-18 18:42:13 +01:00
font-size: 12px;
2013-12-12 07:37:59 +01:00
font-weight: normal;
}
.bs-docs-sidebar .nav .nav > li > a:hover,
.bs-docs-sidebar .nav .nav > li > a:focus {
2013-12-12 07:37:59 +01:00
padding-left: 29px;
}
.bs-docs-sidebar .nav .nav > .active > a,
.bs-docs-sidebar .nav .nav > .active:hover > a,
.bs-docs-sidebar .nav .nav > .active:focus > a {
2013-12-12 07:37:59 +01:00
padding-left: 28px;
2014-02-27 09:12:52 +01:00
font-weight: 500;
2013-03-30 07:33:08 +01:00
}
/* Back to top (hidden on mobile) */
2014-05-23 03:38:43 +02:00
.back-to-top,
.bs-docs-theme-toggle {
display: none;
2014-02-27 09:12:52 +01:00
padding: 4px 10px;
margin-top: 10px;
margin-left: 10px;
font-size: 12px;
font-weight: 500;
color: #999;
}
2014-05-23 03:38:43 +02:00
.back-to-top:hover,
.bs-docs-theme-toggle:hover {
color: #563d7c;
2014-02-27 09:12:52 +01:00
text-decoration: none;
}
2014-05-23 03:38:43 +02:00
.bs-docs-theme-toggle {
margin-top: 0;
}
@media (min-width: 768px) {
2014-05-23 03:38:43 +02:00
.back-to-top,
.bs-docs-theme-toggle {
display: block;
}
}
2013-08-18 08:53:27 +02:00
/* Show and affix the side nav when space allows it */
@media (min-width: 992px) {
.bs-docs-sidebar .nav > .active > ul {
2013-08-18 08:53:27 +02:00
display: block;
}
/* Widen the fixed sidebar */
.bs-docs-sidebar.affix,
.bs-docs-sidebar.affix-bottom {
2013-08-18 08:53:27 +02:00
width: 213px;
}
.bs-docs-sidebar.affix {
2013-08-18 08:53:27 +02:00
position: fixed; /* Undo the static from mobile first approach */
2014-01-10 03:05:04 +01:00
top: 20px;
2013-08-18 08:53:27 +02:00
}
.bs-docs-sidebar.affix-bottom {
2013-08-18 08:53:27 +02:00
position: absolute; /* Undo the static from mobile first approach */
}
.bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
.bs-docs-sidebar.affix .bs-docs-sidenav {
2013-08-18 08:53:27 +02:00
margin-top: 0;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
2013-08-18 08:53:27 +02:00
/* Widen the fixed sidebar again */
.bs-docs-sidebar.affix-bottom,
.bs-docs-sidebar.affix {
2013-08-18 08:53:27 +02:00
width: 263px;
}
}
/*
* Docs sections
*
* Content blocks for each component or feature.
*/
/* Space things out */
.bs-docs-section {
margin-bottom: 60px;
2013-08-18 08:53:27 +02:00
}
.bs-docs-section:last-child {
margin-bottom: 0;
}
2013-02-12 21:16:32 +01:00
h1[id] {
padding-top: 20px;
2014-02-27 09:12:52 +01:00
margin-top: 0;
}
2013-08-18 08:53:27 +02:00
/*
* Callouts
*
* Not quite alerts, but custom and helpful notes for folks reading the docs.
* Requires a base and modifier class.
*/
2013-05-09 07:50:41 +02:00
2013-08-18 08:53:27 +02:00
/* Common styles for all types */
2013-05-09 07:58:54 +02:00
.bs-callout {
2014-05-23 06:34:24 +02:00
padding: 20px;
2014-02-27 09:12:52 +01:00
margin: 20px 0;
2014-05-23 06:34:24 +02:00
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
2013-05-09 07:50:41 +02:00
}
2013-05-09 07:58:54 +02:00
.bs-callout h4 {
2013-05-09 07:50:41 +02:00
margin-top: 0;
margin-bottom: 5px;
2013-05-09 07:50:41 +02:00
}
2013-05-09 07:58:54 +02:00
.bs-callout p:last-child {
2013-05-09 07:50:41 +02:00
margin-bottom: 0;
}
2013-12-18 22:52:39 +01:00
.bs-callout code {
border-radius: 3px;
}
2013-05-09 07:50:41 +02:00
/* Tighten up space between multiple callouts */
.bs-callout + .bs-callout {
2014-05-23 06:34:24 +02:00
margin-top: -5px;
}
2013-08-18 08:53:27 +02:00
/* Variations */
2013-06-25 23:12:36 +02:00
.bs-callout-danger {
2014-11-13 18:28:14 +01:00
border-left-color: #ce4844;
}
.bs-callout-danger h4 {
2014-11-13 18:28:14 +01:00
color: #ce4844;
2013-06-25 23:12:36 +02:00
}
.bs-callout-warning {
2014-11-13 18:28:14 +01:00
border-left-color: #aa6708;
}
.bs-callout-warning h4 {
2014-11-13 18:28:14 +01:00
color: #aa6708;
2013-06-25 23:12:36 +02:00
}
.bs-callout-info {
2014-11-13 18:28:14 +01:00
border-left-color: #1b809e;
}
.bs-callout-info h4 {
2014-11-13 18:28:14 +01:00
color: #1b809e;
}
/*
* Color swatches
*
* Color swatches and associated values for our grayscale and brand colors.
*/
.color-swatches {
margin: 0 -5px;
overflow: hidden; /* clearfix */
}
.color-swatch {
float: left;
2014-03-04 23:35:23 +01:00
width: 60px;
2014-01-12 04:42:10 +01:00
height: 60px;
margin: 0 5px;
border-radius: 3px;
}
2013-12-27 23:04:44 +01:00
2014-01-12 04:42:10 +01:00
@media (min-width: 768px) {
.color-swatch {
2014-03-04 23:35:23 +01:00
width: 100px;
2014-01-12 04:42:10 +01:00
height: 100px;
}
}
2013-12-27 23:04:44 +01:00
/* Framework colors */
2014-03-04 23:35:23 +01:00
.color-swatches .gray-darker {
2014-02-27 09:12:52 +01:00
background-color: #222;
}
2014-03-04 23:35:23 +01:00
.color-swatches .gray-dark {
2014-02-27 09:12:52 +01:00
background-color: #333;
}
2014-03-04 23:35:23 +01:00
.color-swatches .gray {
2014-02-27 09:12:52 +01:00
background-color: #555;
}
2014-03-04 23:35:23 +01:00
.color-swatches .gray-light {
2014-02-27 09:12:52 +01:00
background-color: #999;
}
2014-03-04 23:35:23 +01:00
.color-swatches .gray-lighter {
2014-02-27 09:12:52 +01:00
background-color: #eee;
}
.color-swatches .brand-primary {
background-color: #337ab7;
2014-02-27 09:12:52 +01:00
}
.color-swatches .brand-success {
background-color: #5cb85c;
}
.color-swatches .brand-warning {
background-color: #f0ad4e;
}
2014-03-04 23:35:23 +01:00
.color-swatches .brand-danger {
2014-02-27 09:12:52 +01:00
background-color: #d9534f;
}
2014-03-04 23:35:23 +01:00
.color-swatches .brand-info {
2014-02-27 09:12:52 +01:00
background-color: #5bc0de;
}
2013-12-27 23:04:44 +01:00
/* Docs colors */
2014-03-04 23:35:23 +01:00
.color-swatches .bs-purple {
2014-02-27 09:12:52 +01:00
background-color: #563d7c;
}
2014-03-04 23:35:23 +01:00
.color-swatches .bs-purple-light {
2014-02-27 09:12:52 +01:00
background-color: #c7bfd3;
}
2014-03-04 23:35:23 +01:00
.color-swatches .bs-purple-lighter {
2014-02-27 09:12:52 +01:00
background-color: #e5e1ea;
}
2014-03-04 23:35:23 +01:00
.color-swatches .bs-gray {
2014-02-27 09:12:52 +01:00
background-color: #f9f9f9;
}
2013-12-27 23:04:44 +01:00
/*
* Team members
*
* Avatars, names, and usernames for core team.
*/
.bs-team .team-member {
line-height: 32px;
2014-02-27 09:12:52 +01:00
color: #555;
}
.bs-team .team-member:hover {
color: #333;
text-decoration: none;
}
.bs-team .github-btn {
float: right;
2013-12-21 19:08:04 +01:00
width: 180px;
height: 20px;
2014-02-27 09:12:52 +01:00
margin-top: 6px;
border: none;
}
.bs-team img {
float: left;
width: 32px;
margin-right: 10px;
border-radius: 4px;
2013-06-25 23:12:36 +02:00
}
2013-05-09 07:50:41 +02:00
/*
* Wall of Browser Bugs
*
* Better display for the responsive table on the Wall of Browser Bugs.
*/
.bs-docs-browser-bugs td p {
margin-bottom: 0;
}
.bs-docs-browser-bugs th:first-child {
width: 18%;
}
2013-08-18 08:53:27 +02:00
/*
* Grid examples
*
* Highlight the grid columns within the docs so folks can see their padding,
* alignment, sizing, etc.
*/
.show-grid {
margin-bottom: 15px;
}
2013-06-04 06:58:58 +02:00
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
2013-07-26 09:04:15 +02:00
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
2013-07-26 09:04:15 +02:00
border: 1px solid rgba(86,61,124,.2);
}
2013-08-18 08:53:27 +02:00
/*
* Examples
*
* Isolated sections of example content for each component or feature. Usually
* followed by a code snippet.
*/
2013-05-09 07:56:29 +02:00
.bs-example {
2013-02-12 21:16:32 +01:00
position: relative;
2013-07-20 02:09:39 +02:00
padding: 45px 15px 15px;
2013-08-14 23:24:00 +02:00
margin: 0 -15px 15px;
2013-07-20 02:09:39 +02:00
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
2014-02-22 11:17:58 +01:00
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
2013-02-12 21:16:32 +01:00
}
/* Echo out a label for the example */
2013-05-09 07:56:29 +02:00
.bs-example:after {
2013-02-12 21:16:32 +01:00
position: absolute;
2014-03-04 23:35:23 +01:00
top: 15px;
2013-07-20 02:09:39 +02:00
left: 15px;
2013-02-12 21:16:32 +01:00
font-size: 12px;
font-weight: bold;
color: #959595;
2013-07-20 02:09:39 +02:00
text-transform: uppercase;
letter-spacing: 1px;
2014-02-27 09:12:52 +01:00
content: "Example";
2013-02-12 21:16:32 +01:00
}
2014-11-20 09:09:47 +01:00
.bs-example-padded-bottom {
padding-bottom: 24px;
}
2013-08-18 08:53:27 +02:00
/* Tweak display of the code snippets when following an example */
2014-10-26 06:39:01 +01:00
.bs-example + .highlight,
.bs-example + .zero-clipboard + .highlight {
2013-08-14 23:24:00 +02:00
margin: -15px -15px 15px;
border-width: 0 0 1px;
2014-02-27 09:12:52 +01:00
border-radius: 0;
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
/* Make the examples and snippets not full-width */
@media (min-width: 768px) {
2013-08-18 08:53:27 +02:00
.bs-example {
margin-right: 0;
2014-02-27 09:12:52 +01:00
margin-left: 0;
2013-08-18 08:53:27 +02:00
background-color: #fff;
border-color: #ddd;
2014-02-27 09:12:52 +01:00
border-width: 1px;
2013-08-18 08:53:27 +02:00
border-radius: 4px 4px 0 0;
2014-02-22 11:17:58 +01:00
-webkit-box-shadow: none;
box-shadow: none;
2013-08-18 08:53:27 +02:00
}
2014-10-26 06:39:01 +01:00
.bs-example + .highlight,
.bs-example + .zero-clipboard + .highlight {
2013-08-18 08:53:27 +02:00
margin-top: -16px;
margin-right: 0;
2014-02-27 09:12:52 +01:00
margin-left: 0;
2013-08-18 08:53:27 +02:00
border-width: 1px;
border-bottom-right-radius: 4px;
2014-02-27 09:12:52 +01:00
border-bottom-left-radius: 4px;
2013-08-18 08:53:27 +02:00
}
.bs-example-standalone {
border-radius: 4px;
}
2013-08-18 08:53:27 +02:00
}
/* Undo width of container */
.bs-example .container {
width: auto;
}
2013-02-12 21:16:32 +01:00
/* Tweak content of examples for optimum awesome */
2013-05-09 07:56:29 +02:00
.bs-example > p:last-child,
.bs-example > ul:last-child,
.bs-example > ol:last-child,
.bs-example > blockquote:last-child,
.bs-example > .form-control:last-child,
2013-05-09 07:56:29 +02:00
.bs-example > .table:last-child,
2013-08-16 21:43:54 +02:00
.bs-example > .navbar:last-child,
2013-05-09 07:56:29 +02:00
.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,
.bs-example > .progress:last-child,
.bs-example > .table-responsive:last-child > .table {
2013-02-12 21:16:32 +01:00
margin-bottom: 0;
}
2013-06-28 08:26:04 +02:00
.bs-example > p > .close {
float: none;
}
2013-02-12 21:16:32 +01:00
2013-02-24 10:29:19 +01:00
/* Typography */
2013-12-15 06:25:57 +01:00
.bs-example-type .table .type-info {
2014-11-13 18:28:14 +01:00
color: #767676;
2013-02-24 10:29:19 +01:00
vertical-align: middle;
}
.bs-example-type .table td {
2013-02-24 10:29:19 +01:00
padding: 15px 0;
border-color: #eee;
}
.bs-example-type .table tr:first-child td {
2013-02-24 10:29:19 +01:00
border-top: 0;
}
2013-05-09 07:56:29 +02:00
.bs-example-type h1,
.bs-example-type h2,
.bs-example-type h3,
.bs-example-type h4,
.bs-example-type h5,
.bs-example-type h6 {
2013-02-24 10:29:19 +01:00
margin: 0;
}
/* Contextual background colors */
.bs-example-bg-classes p {
padding: 15px;
}
/* Images */
.bs-example > .img-circle,
.bs-example > .img-rounded,
.bs-example > .img-thumbnail {
margin: 5px;
}
/* Tables */
.bs-example > .table-responsive > .table {
background-color: #fff;
}
/* Buttons */
.bs-example > .btn,
.bs-example > .btn-group {
margin-top: 5px;
margin-bottom: 5px;
}
.bs-example > .btn-toolbar + .btn-toolbar {
margin-top: 10px;
2013-05-14 14:33:49 +02:00
}
/* Forms */
.bs-example-control-sizing select,
.bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px;
}
.bs-example-form .input-group {
margin-bottom: 10px;
}
2013-08-15 23:57:55 +02:00
.bs-example > textarea.form-control {
resize: vertical;
}
2013-03-31 00:07:50 +01:00
/* List groups */
2013-05-09 07:56:29 +02:00
.bs-example > .list-group {
2013-03-31 00:07:50 +01:00
max-width: 400px;
}
2013-02-24 10:29:19 +01:00
2013-08-18 08:53:27 +02:00
/* Navbars */
.bs-example .navbar:last-child {
margin-bottom: 0;
}
2013-02-12 21:16:32 +01:00
.bs-navbar-top-example,
.bs-navbar-bottom-example {
z-index: 1;
padding: 0;
overflow: hidden; /* cut the drop shadows off */
}
2013-08-16 09:54:19 +02:00
.bs-navbar-top-example .navbar-header,
.bs-navbar-bottom-example .navbar-header {
margin-left: 0;
}
2013-02-12 21:16:32 +01:00
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: relative;
2013-02-12 21:16:32 +01:00
margin-right: 0;
2014-02-27 09:12:52 +01:00
margin-left: 0;
2013-02-12 21:16:32 +01:00
}
.bs-navbar-top-example {
padding-bottom: 45px;
2013-02-12 21:16:32 +01:00
}
.bs-navbar-top-example:after {
top: auto;
bottom: 15px;
}
.bs-navbar-top-example .navbar-fixed-top {
top: -1px;
2013-02-12 21:16:32 +01:00
}
.bs-navbar-bottom-example {
padding-top: 45px;
}
.bs-navbar-bottom-example .navbar-fixed-bottom {
bottom: -1px;
2013-02-12 21:16:32 +01:00
}
.bs-navbar-bottom-example .navbar {
margin-bottom: 0;
}
@media (min-width: 768px) {
2013-08-18 08:53:27 +02:00
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: absolute;
}
}
/* Pagination */
.bs-example .pagination {
margin-top: 10px;
margin-bottom: 10px;
}
2013-08-19 09:36:45 +02:00
/* Pager */
.bs-example > .pager {
margin-top: 0;
}
2013-02-12 21:16:32 +01:00
/* Example modals */
2013-05-09 07:56:29 +02:00
.bs-example-modal {
2013-02-12 21:16:32 +01:00
background-color: #f5f5f5;
}
2013-05-09 07:56:29 +02:00
.bs-example-modal .modal {
2013-02-12 21:16:32 +01:00
position: relative;
top: auto;
right: auto;
bottom: auto;
2014-02-27 09:12:52 +01:00
left: auto;
2013-02-12 21:16:32 +01:00
z-index: 1;
display: block;
}
2013-05-09 07:56:29 +02:00
.bs-example-modal .modal-dialog {
2013-02-12 21:16:32 +01:00
left: auto;
margin-right: auto;
2014-02-27 09:12:52 +01:00
margin-left: auto;
2013-02-12 21:16:32 +01:00
}
2013-02-17 22:35:14 +01:00
/* Example dropdowns */
.bs-example > .dropdown > .dropdown-toggle {
float: left;
}
2013-08-15 22:06:25 +02:00
.bs-example > .dropdown > .dropdown-menu {
2013-02-17 22:35:14 +01:00
position: static;
display: block;
margin-bottom: 5px;
clear: left;
2013-02-17 22:35:14 +01:00
}
2013-02-12 21:16:32 +01:00
/* Example tabbable tabs */
2013-05-09 07:56:29 +02:00
.bs-example-tabs .nav-tabs {
margin-bottom: 15px;
}
/* Tooltips */
.bs-example-tooltips {
text-align: center;
}
.bs-example-tooltips > .btn {
margin-top: 5px;
margin-bottom: 5px;
}
.bs-example-tooltip .tooltip {
position: relative;
display: inline-block;
margin: 10px 20px;
opacity: 1;
}
/* Popovers */
2013-05-09 07:56:29 +02:00
.bs-example-popover {
padding-bottom: 24px;
background-color: #f9f9f9;
}
2013-05-09 07:56:29 +02:00
.bs-example-popover .popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 20px;
}
2013-08-18 08:53:27 +02:00
/* Scrollspy demo on fixed height div */
.scrollspy-example {
position: relative;
height: 200px;
margin-top: 10px;
overflow: auto;
}
2014-11-20 09:09:47 +01:00
.bs-example > .nav-pills-stacked-example {
max-width: 300px;
}
/* Simple collapse example */
#collapseExample .well {
margin-bottom: 0;
}
/* Don't wrap event names in Events tables in JS plugin docs */
.bs-events-table > thead > tr > th:first-child,
.bs-events-table > tbody > tr > td:first-child {
white-space: nowrap;
}
2013-08-18 08:53:27 +02:00
2014-11-20 09:09:47 +01:00
.bs-events-table > thead > tr > th:first-child {
width: 150px;
}
.js-options-table > thead > tr > th:nth-child(1),
.js-options-table > thead > tr > th:nth-child(2) {
width: 100px;
}
.js-options-table > thead > tr > th:nth-child(3) {
width: 50px;
}
2013-08-18 08:53:27 +02:00
/*
* Code snippets
*
* Generated via Pygments and Jekyll, these are snippets of HTML, CSS, and JS.
*/
.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;
2014-05-13 04:47:53 +02:00
word-break: normal;
2014-02-27 09:12:52 +01:00
white-space: nowrap;
2013-08-18 08:53:27 +02:00
background-color: transparent;
border: 0;
}
.highlight pre code {
font-size: inherit;
color: #333; /* Effectively the base text color */
}
2014-02-11 09:04:53 +01:00
.highlight pre code:first-child {
2013-08-18 08:53:27 +02:00
display: inline-block;
2014-02-11 09:04:53 +01:00
padding-right: 45px;
2013-08-18 08:53:27 +02:00
}
/*
* Responsive tests
*
* Generate a set of tests to show the responsive utilities in action.
*/
2013-02-12 21:16:32 +01:00
/* Responsive (scrollable) doc tables */
.table-responsive .highlight pre {
white-space: normal;
}
2013-08-18 08:53:27 +02:00
/* Utility classes table */
.bs-table th small,
2013-02-12 21:16:32 +01:00
.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;
}
2013-08-18 08:53:27 +02:00
/* Responsive tests */
2013-02-12 21:16:32 +01:00
.responsive-utilities-test {
margin-top: 5px;
}
Media query (grid and responsive utilities) overhaul Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the #9128 fix in https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * #9135: fourth grid tier * #9302: undoes previous range change for small grid system, so no need to update any docs here * #8755: consistent grid and responsive utilities schemas) * #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 09:28:50 +02:00
.responsive-utilities-test .col-xs-6 {
margin-bottom: 10px;
2013-02-12 21:16:32 +01:00
}
.responsive-utilities-test span {
2013-10-31 10:32:23 +01:00
display: block;
padding: 15px 10px;
2013-05-17 05:07:41 +02:00
font-size: 14px;
font-weight: bold;
line-height: 1.1;
text-align: center;
border-radius: 4px;
2013-02-12 21:16:32 +01:00
}
2013-08-15 08:52:57 +02:00
.visible-on .col-xs-6 .hidden-xs,
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
2013-05-17 05:07:41 +02:00
color: #999;
border: 1px solid #ddd;
}
.visible-on .col-xs-6 .visible-xs-block,
.visible-on .col-xs-6 .visible-sm-block,
.visible-on .col-xs-6 .visible-md-block,
.visible-on .col-xs-6 .visible-lg-block,
.hidden-on .col-xs-6 .visible-xs-block,
.hidden-on .col-xs-6 .visible-sm-block,
.hidden-on .col-xs-6 .visible-md-block,
.hidden-on .col-xs-6 .visible-lg-block {
2013-02-12 21:16:32 +01:00
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
}
2013-08-19 04:04:30 +02:00
/*
* Glyphicons
*
* Special styles for displaying the icons and their classes in the docs.
*/
.bs-glyphicons {
margin: 0 -10px 20px;
2013-12-08 01:28:29 +01:00
overflow: hidden;
}
.bs-glyphicons-list {
2013-08-19 04:04:30 +02:00
padding-left: 0;
list-style: none;
}
.bs-glyphicons li {
float: left;
width: 25%;
height: 115px;
padding: 10px;
2013-12-08 01:28:29 +01:00
font-size: 10px;
2013-08-19 04:04:30 +02:00
line-height: 1.4;
text-align: center;
2013-11-06 20:00:39 +01:00
background-color: #f9f9f9;
2014-02-27 09:12:52 +01:00
border: 1px solid #fff;
2013-08-19 04:04:30 +02:00
}
.bs-glyphicons .glyphicon {
margin-top: 5px;
margin-bottom: 10px;
2013-08-19 04:04:30 +02:00
font-size: 24px;
}
.bs-glyphicons .glyphicon-class {
display: block;
text-align: center;
2013-12-02 05:27:09 +01:00
word-wrap: break-word; /* Help out IE10+ with class names */
}
2013-08-19 04:04:30 +02:00
.bs-glyphicons li:hover {
2013-11-06 20:00:39 +01:00
color: #fff;
background-color: #563d7c;
2013-08-19 04:04:30 +02:00
}
@media (min-width: 768px) {
2013-12-08 01:28:29 +01:00
.bs-glyphicons {
margin-right: 0;
2014-02-27 09:12:52 +01:00
margin-left: 0;
2013-12-08 01:28:29 +01:00
}
2013-08-19 04:04:30 +02:00
.bs-glyphicons li {
width: 12.5%;
2013-12-08 01:28:29 +01:00
font-size: 12px;
2013-08-19 04:04:30 +02:00
}
}
2013-08-18 08:53:27 +02:00
/*
* Customizer
*
* Since this is so form control heavy, we have quite a few styles to customize
* the display of inputs, headings, and more. Also included are all the download
* buttons and actions.
*/
2013-02-12 21:16:32 +01:00
2013-08-18 08:53:27 +02:00
.bs-customizer .toggle {
float: right;
margin-top: 25px;
2013-08-18 08:53:27 +02:00
}
2013-02-12 21:16:32 +01:00
2013-08-18 08:53:27 +02:00
/* Headings and form contrls */
.bs-customizer label {
margin-top: 10px;
font-weight: 500;
color: #555;
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
.bs-customizer h2 {
2014-02-27 09:12:52 +01:00
padding-top: 30px;
2013-08-18 08:53:27 +02:00
margin-top: 0;
margin-bottom: 5px;
2013-02-12 21:16:32 +01:00
}
.bs-customizer h3 {
margin-bottom: 0;
}
.bs-customizer h4 {
2013-08-18 08:53:27 +02:00
margin-top: 15px;
margin-bottom: 0;
}
.bs-customizer .bs-callout h4 {
margin-top: 0; /* lame, but due to specificity we have to duplicate */
2013-09-20 19:43:47 +02:00
margin-bottom: 5px;
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
.bs-customizer input[type="text"] {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
background-color: #fafafa;
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
.bs-customizer .help-block {
margin-bottom: 5px;
2014-02-27 09:12:52 +01:00
font-size: 12px;
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
/* For the variables, use regular weight */
#less-section label {
font-weight: normal;
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
/* Downloads */
2013-08-19 06:04:46 +02:00
.bs-customize-download .btn-outline {
padding: 20px;
2013-04-14 21:49:35 +02:00
}
2013-08-18 08:53:27 +02:00
/* Error handling */
.bs-customizer-alert {
position: fixed;
top: 0;
2013-08-18 08:53:27 +02:00
right: 0;
2014-02-27 09:12:52 +01:00
left: 0;
2013-08-18 08:53:27 +02:00
z-index: 1030;
padding: 15px 0;
color: #fff;
background-color: #d9534f;
border-bottom: 1px solid #b94441;
2014-02-22 11:17:58 +01:00
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
.bs-customizer-alert .close {
margin-top: -4px;
font-size: 24px;
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
.bs-customizer-alert p {
margin-bottom: 0;
2013-08-13 00:23:37 +02:00
}
.bs-customizer-alert .glyphicon {
margin-right: 5px;
}
.bs-customizer-alert pre {
margin: 10px 0 0;
color: #fff;
background-color: #a83c3a;
border-color: #973634;
2014-02-22 11:17:58 +01:00
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
}
2013-02-12 21:16:32 +01:00
.bs-dropzone {
position: relative;
padding: 20px;
margin-bottom: 20px;
color: #777;
text-align: center;
border: 2px dashed #eee;
border-radius: 4px;
}
.bs-dropzone .import-header {
margin-bottom: 5px;
}
.bs-dropzone .glyphicon-download-alt {
font-size: 40px;
}
.bs-dropzone hr {
width: 100px;
}
.bs-dropzone .lead {
margin-bottom: 10px;
font-weight: normal;
color: #333;
}
/*.bs-dropzone*/ #import-manual-trigger {
cursor: pointer;
}
.bs-dropzone p:last-child {
margin-bottom: 0;
}
2013-02-12 21:16:32 +01:00
2013-08-18 08:53:27 +02:00
/*
2013-12-27 23:04:44 +01:00
* Brand guidelines
2013-08-18 08:53:27 +02:00
*
2013-12-27 23:04:44 +01:00
* Extra styles for displaying wordmarks, logos, etc.
2013-08-18 08:53:27 +02:00
*/
2013-02-12 21:16:32 +01:00
2013-12-27 23:04:44 +01:00
/* Logo series wrapper */
.bs-brand-logos {
display: table;
width: 100%;
margin-bottom: 15px;
overflow: hidden;
color: #563d7c;
background-color: #f9f9f9;
2013-11-06 20:00:39 +01:00
border-radius: 4px;
}
2013-12-27 23:04:44 +01:00
/* Individual items */
.bs-brand-item {
padding: 60px 0;
2013-11-06 20:00:39 +01:00
text-align: center;
}
2013-12-27 23:04:44 +01:00
.bs-brand-item + .bs-brand-item {
2014-01-12 04:42:10 +01:00
border-top: 1px solid #fff;
2013-12-27 23:04:44 +01:00
}
.bs-brand-logos .inverse {
color: #fff;
background-color: #563d7c;
}
/* Heading content within */
.bs-brand-item h1,
.bs-brand-item h3 {
margin-top: 0;
margin-bottom: 0;
}
.bs-brand-item .bs-docs-booticon {
2013-12-27 23:04:44 +01:00
margin-right: auto;
2014-02-27 09:12:52 +01:00
margin-left: auto;
2013-12-27 23:04:44 +01:00
}
/* Make the icons stand out on what is/isn't okay */
.bs-brand-item .glyphicon {
width: 30px;
height: 30px;
2013-12-28 01:44:00 +01:00
margin: 10px auto -10px;
2013-12-27 23:04:44 +01:00
line-height: 30px;
color: #fff;
border-radius: 50%;
}
2014-02-27 09:12:52 +01:00
.bs-brand-item .glyphicon-ok {
background-color: #5cb85c;
}
.bs-brand-item .glyphicon-remove {
background-color: #d9534f;
}
2013-12-27 23:04:44 +01:00
2013-11-06 20:00:39 +01:00
@media (min-width: 768px) {
2014-01-12 04:42:10 +01:00
.bs-brand-item {
display: table-cell;
width: 1%;
}
.bs-brand-item + .bs-brand-item {
border-top: 0;
border-left: 1px solid #fff;
2013-11-06 20:00:39 +01:00
}
2014-01-12 04:42:10 +01:00
.bs-brand-item h1 {
font-size: 60px;
}
}
2013-12-27 23:04:44 +01:00
/*
* ZeroClipboard styles
*/
.zero-clipboard {
position: relative;
2014-02-11 09:04:53 +01:00
display: none;
}
.btn-clipboard {
position: absolute;
2014-02-11 09:04:53 +01:00
top: 0;
right: 0;
z-index: 10;
2014-02-11 09:04:53 +01:00
display: block;
padding: 5px 8px;
font-size: 12px;
2014-11-13 18:28:14 +01:00
color: #767676;
cursor: pointer;
2014-02-11 09:04:53 +01:00
background-color: #fff;
border: 1px solid #e1e1e8;
border-radius: 0 4px 0 4px;
}
.btn-clipboard-hover {
2014-02-11 09:04:53 +01:00
color: #fff;
background-color: #563d7c;
border-color: #563d7c;
}
2014-02-11 09:04:53 +01:00
@media (min-width: 768px) {
.zero-clipboard {
display: block;
}
2014-10-26 06:39:01 +01:00
.bs-example + .zero-clipboard .btn-clipboard {
top: -16px;
border-top-right-radius: 0;
}
}
/*
* AnchorJS Styles
*/
.anchorjs-link {
color: inherit;
}
@media (max-width: 480px) {
.anchorjs-link {
display: none;
}
}
*:hover > .anchorjs-link {
opacity: .75;
-webkit-transition: color .16s linear;
-o-transition: color .16s linear;
transition: color .16s linear;
}
*:hover > .anchorjs-link:hover,
.anchorjs-link:focus {
text-decoration: none;
opacity: 1;
}
/*
* Miscellaneous
*
* Odds and ends for optimum docs display.
*/
/* Pseudo :focus state for showing how it looks in the docs */
#focusedInput {
border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
-webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
2015-12-06 10:50:31 +01:00
/* v4 notice above main navbar */
.v4-tease {
display: block;
padding: 15px 20px;
font-weight: bold;
color: #fff;
text-align: center;
background-color: #0275d8;
}
.v4-tease:hover {
color: #fff;
text-decoration: none;
background-color: #0269c2;
}
/* Nullify ill-advised printing of hrefs; see #18711 */
@media print {
2016-02-28 03:02:49 +01:00
a[href]:after {
content: "" !important;
}
}