0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/docs/assets/less/docs.less

1381 lines
23 KiB
Plaintext
Raw Normal View History

/*!
* Bootstrap Docs (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/.
*/
// Import Bootstrap variables and mixins
@import "../../../less/variables.less";
@import "../../../less/mixins.less";
// Import the syntax highlighting
@import "syntax.less";
2013-02-12 21:16:32 +01:00
// Local docs variables
@bs-purple: #563d7c;
@bs-purple-light: #cdbfe3;
2013-02-12 21:16:32 +01:00
// Scaffolding
//
// Update the basics of our documents to prep for docs content.
2013-02-12 21:16:32 +01:00
body {
position: relative; // For scrollspy?
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
//
// Buttons
//
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
.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;
}
//
// Bootstrap "B" icon
//
.bs-docs-booticon {
2013-12-12 07:37:59 +01:00
display: block;
width: 144px;
height: 144px;
font-size: 108px;
2013-12-12 07:37:59 +01:00
font-weight: 500;
line-height: 140px;
2013-12-12 07:37:59 +01:00
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%;
&.inverse {
color: #563d7c;
background-color: #fff;
}
&.outline {
background-color: transparent;
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
//
// Main navigation
//
2014-03-17 10:03:16 +01:00
.bs-docs-nav {
2014-01-10 03:05:04 +01:00
margin-bottom: 0;
2014-03-17 10:03:16 +01:00
background-color: #563d7c;
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-03-17 10:03:16 +01:00
color: #cdbfe3;
}
.bs-docs-nav .navbar-brand {
color: #fff;
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 {
2014-03-17 10:03:16 +01:00
color: #fff;
background-color: #563d7c;
2013-05-09 07:24:07 +02:00
}
2013-11-06 20:00:39 +01:00
.bs-docs-nav .navbar-toggle .icon-bar {
2014-03-17 10:03:16 +01:00
background-color: #fff;
2013-05-09 07:24:07 +02:00
}
.bs-docs-nav .navbar-header .navbar-toggle {
2014-03-17 10:03:16 +01:00
border-color: #322f38;
2013-05-09 07:24:07 +02:00
}
.bs-docs-nav .navbar-header .navbar-toggle:hover,
.bs-docs-nav .navbar-header .navbar-toggle:focus {
2014-03-17 10:03:16 +01:00
background-color: #29262f;
border-color: #29262f;
}
2013-08-18 08:53:27 +02:00
//
// Footer
//
2013-08-18 08:53:27 +02:00
.bs-docs-footer {
2013-08-18 08:53:27 +02:00
margin-top: 100px;
color: #777;
text-align: center;
border-top: 1px solid #e5e5e5;
}
.bs-docs-footer-links {
2013-08-18 08:53:27 +02:00
padding-left: 0;
2014-02-27 09:12:52 +01:00
margin-top: 20px;
color: #999;
}
.bs-docs-footer-links li {
2013-08-18 08:53:27 +02:00
display: inline;
padding: 0 2px;
}
.bs-docs-footer-links li:first-child {
2013-08-18 08:53:27 +02:00
padding-left: 0;
}
@media (min-width: 768px) {
.bs-docs-footer p {
margin-bottom: 0;
}
2014-03-17 10:03:16 +01:00
.bs-docs .bs-docs-footer {
text-align: left;
}
}
2013-08-18 08:53:27 +02:00
//
// Social buttons
//
2013-08-18 08:53:27 +02:00
.bs-docs-social {
2013-08-18 08:53:27 +02:00
margin-bottom: 20px;
text-align: center;
2013-08-18 08:53:27 +02:00
}
.bs-docs-social-buttons {
2013-08-18 08:53:27 +02:00
display: inline-block;
padding-left: 0;
2014-02-27 09:12:52 +01:00
margin-bottom: 0;
2013-08-18 08:53:27 +02:00
list-style: none;
}
.bs-docs-social-buttons li {
2013-08-18 08:53:27 +02:00
display: inline-block;
padding: 5px 8px;
2014-02-27 09:12:52 +01:00
line-height: 1;
2013-08-18 08:53:27 +02:00
}
.bs-docs-social-buttons .twitter-follow-button {
2013-08-18 08:53:27 +02:00
width: 225px !important;
}
.bs-docs-social-buttons .twitter-share-button {
2013-08-18 08:53:27 +02:00
width: 98px !important;
}
// Style the GitHub buttons via CSS instead of inline attributes
2013-08-18 08:53:27 +02:00
.github-btn {
overflow: hidden;
2014-02-27 09:12:52 +01:00
border: 0;
2013-08-18 08:53:27 +02:00
}
2014-03-17 10:03:16 +01:00
@media (min-width: 768px) {
.bs-docs .bs-docs-social {
margin-left: -8px;
text-align: left;
}
}
2013-08-18 08:53:27 +02:00
//
// Homepage
//
2013-02-12 21:16:32 +01:00
// Masthead (headings and download button)
2014-03-17 10:03:16 +01:00
.bs-docs-masthead {
2014-01-16 00:01:41 +01:00
position: relative;
padding: 30px 15px;
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;
#gradient > .vertical(@bs-purple, #6f5499);
2013-12-12 07:37:59 +01:00
}
2014-01-14 07:54:22 +01:00
.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
}
//
// Page headers
//
.bs-docs-header {
2014-07-09 01:54:32 +02:00
padding-top: 2rem;
padding-bottom: 2rem;
margin-bottom: 2rem;
font-size: 1.25rem;
2014-07-08 08:36:40 +02:00
background-color: #563d7c;
2013-05-09 07:29:53 +02:00
}
.bs-docs-header h1 {
2014-01-14 07:59:09 +01:00
margin-top: 0;
2014-07-08 08:36:40 +02: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;
2014-07-08 08:36:40 +02:00
color: rgba(255,255,255,.65);
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: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) {
2014-07-09 01:54:32 +02:00
.bs-docs-header {
padding-top: 4rem;
padding-bottom: 4rem;
}
.bs-docs-header h1,
.bs-docs-header p {
2013-08-18 08:53:27 +02:00
margin-right: 380px;
}
}
//
// Carbon ads
//
2013-08-18 08:53:27 +02:00
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;
2014-02-27 09:12:52 +01:00
margin: 30px -30px -31px !important;
2013-07-18 08:22:28 +02:00
overflow: hidden; /* clearfix */
font-size: 13px !important;
line-height: 16px !important;
color: @bs-purple-light !important;
2013-07-18 08:22:28 +02:00
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
2013-07-18 08:22:28 +02:00
}
2014-03-18 21:01:50 +01:00
// In the lighter page headers
// .bs-docs-header .carbonad {
// color: #777;
// background-color: #fff !important;
// border-color: #eee !important;
// }
// .bs-docs-header .carbonad-text a,
// .bs-docs-header .carbonad-tag a {
// color: #563d7c !important;
// }
@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-03-17 10:03:16 +01:00
top: 30px;
right: 60px; // 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
//
2013-12-12 07:37:59 +01:00
.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 {
2013-12-12 23:57:43 +01:00
color: #428bca;
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 Expo sites
//
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 {
2013-12-12 23:57:43 +01:00
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.bs-docs-featured-sites .col-sm-3:last-child img {
2013-12-12 23:57:43 +01:00
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
2014-06-26 11:49:21 +02:00
}
2013-12-12 23:57:43 +01:00
//
// 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-12-12 23:57:43 +01:00
}
2013-10-02 07:11:51 +02:00
}
2013-08-18 08:53:27 +02:00
//
2014-07-10 08:20:33 +02:00
// Custom container
//
2013-02-12 21:16:32 +01:00
2014-03-17 10:03:16 +01:00
.bs-docs-container {
position: relative;
2014-07-08 08:36:40 +02:00
max-width: 62rem;
padding: 1rem;
margin-right: auto;
margin-left: auto;
2014-07-10 08:20:33 +02:00
@media (min-width: 768px) {
2014-07-08 08:36:40 +02:00
padding: 2rem;
2014-03-17 10:03:16 +01:00
}
2014-07-10 08:20:33 +02:00
@media (min-width: 992px) {
2014-07-08 08:36:40 +02:00
padding: 2rem 4rem;
2013-12-12 07:37:59 +01:00
}
}
2014-07-10 08:20:33 +02:00
//
// Side navigation
//
2014-03-17 10:03:16 +01:00
.bs-docs-sidebar {
2014-03-18 21:01:50 +01:00
margin-bottom: 0;
2014-03-17 10:03:16 +01:00
background-color: #322f38;
2013-03-28 08:21:21 +01:00
}
2014-03-18 21:01:50 +01:00
.bs-docs-sidebar .navbar-toggle {
position: absolute;
top: 5px;
right: 0;
z-index: 5;
}
.bs-docs-sidebar .navbar-toggle .icon-bar {
background-color: #fff;
}
.bs-docs-sidebar .navbar-header {
float: none;
margin-right: -15px;
}
.bs-docs-sidebar .navbar-collapse {
padding: 0;
border: 0;
}
@media (min-width: 992px) {
.bs-docs {
padding-left: 240px;
}
.bs-docs-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 240px;
overflow-x: hidden;
overflow-y: auto;
#gradient > .vertical(#29262f, #322f38);
2014-03-18 21:01:50 +01:00
}
.bs-docs-sidebar .navbar-brand {
margin-bottom: 15px;
}
}
.bs-docs-sidebar .navbar-brand {
2013-03-30 07:33:08 +01:00
display: block;
2014-03-18 21:01:50 +01:00
float: none;
height: auto;
2014-03-17 10:03:16 +01:00
padding: 20px;
font-size: 20px;
2013-12-12 07:37:59 +01:00
font-weight: 500;
2014-03-17 10:03:16 +01:00
line-height: 1;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.1);
}
2014-03-17 10:03:16 +01:00
.bs-docs-sidebar-brand:hover,
.bs-docs-sidebar-brand:focus {
color: #fff;
2013-03-30 07:33:08 +01:00
text-decoration: none;
2013-03-28 08:21:21 +01:00
}
2014-03-17 10:03:16 +01:00
.bs-docs-sidenav {
display: none;
2013-03-30 07:33:08 +01:00
}
2014-07-08 08:36:40 +02:00
.bs-docs-toc-item {
margin-right: -.75rem;
margin-left: -.75rem;
2014-07-08 08:36:40 +02:00
}
2014-03-17 10:03:16 +01:00
.bs-docs-toc-link {
display: block;
padding: 4px 20px;
font-size: 16px;
color: #706e74;
2013-12-12 07:37:59 +01:00
}
2014-03-17 10:03:16 +01:00
.bs-docs-toc-link:hover,
.bs-docs-toc-link:focus {
2014-03-18 21:01:50 +01:00
color: #ffe484;
2014-03-17 10:03:16 +01:00
text-decoration: none;
2013-12-12 07:37:59 +01:00
}
2014-03-17 10:03:16 +01:00
.active > .bs-docs-toc-link {
2014-02-27 09:12:52 +01:00
font-weight: 500;
2014-03-18 21:01:50 +01:00
color: #ffe484;
2014-03-17 10:03:16 +01:00
}
.active > .bs-docs-sidenav {
display: block;
2013-03-30 07:33:08 +01:00
}
2014-03-17 10:03:16 +01:00
.bs-docs-toc-item.active {
margin-top: 15px;
margin-bottom: 15px;
}
2014-07-08 08:36:40 +02:00
.bs-docs-toc-item:first-child {
margin-top: 0;
}
2014-03-18 21:01:50 +01:00
.bs-docs-toc-item:last-child {
margin-bottom: 30px;
}
2014-03-17 10:03:16 +01:00
// All levels of nav
2014-03-18 21:01:50 +01:00
.bs-docs-sidebar .nav > li > a {
2014-03-17 10:03:16 +01:00
display: block;
padding: 4px 20px;
font-size: 14px;
color: #99979c;
}
2014-03-18 21:01:50 +01:00
.bs-docs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus {
color: #ffe484;
2014-02-27 09:12:52 +01:00
text-decoration: none;
2014-03-17 10:03:16 +01:00
background-color: transparent;
}
2014-03-18 21:01:50 +01:00
.bs-docs-sidebar .nav > .active > a,
.bs-docs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a {
2014-03-17 10:03:16 +01:00
font-weight: 500;
2014-03-18 21:01:50 +01:00
color: #ffe484;
2014-03-17 10:03:16 +01:00
background-color: transparent;
}
// Nav: second level (shown on .active)
2014-03-18 21:01:50 +01:00
.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 > .active > a,
.bs-docs-sidebar .nav .nav > .active:hover > a,
.bs-docs-sidebar .nav .nav > .active:focus > a {
2014-02-27 09:12:52 +01:00
font-weight: 500;
2013-03-30 07:33:08 +01:00
}
2014-03-18 21:01:50 +01:00
.bs-docs-sidebar .nav > .active > .nav {
2014-03-17 10:03:16 +01:00
display: block;
}
2014-03-18 21:01:50 +01:00
.bs-docs-sidebar .nav .nav > li > a {
2014-03-17 10:03:16 +01:00
padding-top: 2px;
padding-bottom: 2px;
padding-left: 30px;
font-size: 13px;
2013-08-18 08:53:27 +02:00
}
//
// Docs sections
//
2013-08-18 08:53:27 +02:00
2014-07-10 09:52:10 +02:00
.bs-docs-content {
> h1 {
padding-top: 2rem;
margin-top: 3rem;
2013-02-12 21:16:32 +01:00
&:first-child {
margin-top: 0;
}
2014-07-10 09:52:10 +02:00
+ p {
font-size: 1.25rem;
font-weight: 300;
}
}
> h2 {
margin-top: 2.5rem;
}
}
//
// Callouts
//
2013-05-09 07:50:41 +02:00
2013-05-09 07:58:54 +02:00
.bs-callout {
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
.bs-callout + .bs-callout {
2014-05-23 06:34:24 +02:00
margin-top: -5px;
}
// Variations
2013-06-25 23:12:36 +02:00
.bs-callout-danger {
2014-05-23 06:34:24 +02:00
border-left-color: #d9534f;
}
.bs-callout-danger h4 {
2013-12-18 22:52:39 +01:00
color: #d9534f;
2013-06-25 23:12:36 +02:00
}
.bs-callout-warning {
2014-05-23 06:34:24 +02:00
border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
2013-12-18 22:52:39 +01:00
color: #f0ad4e;
2013-06-25 23:12:36 +02:00
}
.bs-callout-info {
2014-05-23 06:34:24 +02:00
border-left-color: #5bc0de;
}
.bs-callout-info h4 {
2013-12-18 22:52:39 +01:00
color: #5bc0de;
}
//
// Color swatches
//
.color-swatches {
margin: 0 -5px;
overflow: hidden; // clearfix
}
2014-07-10 09:52:10 +02:00
.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-07-10 09:52:10 +02:00
@media (min-width: 768px) {
2014-03-04 23:35:23 +01:00
width: 100px;
2014-01-12 04:42:10 +01:00
height: 100px;
}
}
// Docs colors
2014-07-10 09:52:10 +02:00
.color-swatches {
.bs-purple {
background-color: @bs-purple;
}
.bs-purple-light {
background-color: @bs-purple-light;
}
.bs-purple-lighter {
background-color: #e5e1ea;
}
.bs-gray {
background-color: #f9f9f9;
}
2014-02-27 09:12:52 +01:00
}
2013-12-27 23:04:44 +01:00
//
// Team members
//
2014-07-10 09:52:10 +02:00
.bs-team {
.team-member {
line-height: 32px;
color: #555;
}
.team-member:hover {
color: #333;
text-decoration: none;
}
.github-btn {
float: right;
width: 180px;
height: 20px;
margin-top: 6px;
}
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
//
// Grid examples
//
2014-07-10 07:00:07 +02:00
.bs-example > .row {
margin-bottom: 1rem;
}
2014-07-10 07:00:07 +02:00
.bs-example > .row > [class^="col-"] {
padding-top: .75rem;
padding-bottom: .75rem;
2013-07-26 09:04:15 +02:00
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
//
// Docs examples
//
2013-05-09 07:56:29 +02:00
.bs-example {
2013-02-12 21:16:32 +01:00
position: relative;
2014-07-09 09:15:20 +02:00
padding: 1.5rem;
2014-07-08 08:36:40 +02:00
margin-top: 1rem;
2014-07-09 09:15:20 +02:00
margin-bottom: -1rem;
border: solid #f7f7f9;
border-width: .2rem 0 0;
2013-02-12 21:16:32 +01:00
2014-07-10 09:52:10 +02:00
@media (min-width: 480px) {
2014-07-09 09:15:20 +02:00
border-width: .2rem;
}
2013-02-12 21:16:32 +01:00
2014-07-10 09:52:10 +02:00
// Undo width of container
.container {
width: auto;
}
}
2014-07-10 09:52:10 +02:00
// Tweak content of examples for optimum awesome
.bs-example > *:last-child,
.bs-example > .table-responsive:last-child > .table {
margin-bottom: 0 !important;
2013-02-12 21:16:32 +01:00
}
2014-07-10 09:31:09 +02:00
.bs-example > .close {
float: none;
}
2013-02-12 21:16:32 +01:00
// Typography
2013-12-15 06:25:57 +01:00
.bs-example-type .table .type-info {
2013-02-24 10:29:19 +01:00
color: #999;
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-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;
}
// 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
// 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-02-12 21:16:32 +01:00
}
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;
}
// Pager
2013-08-19 09:36:45 +02:00
.bs-example > .pager {
margin-top: 0;
}
// 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
}
// 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;
}
// 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;
}
// Scrollspy demo on fixed height div
2013-08-18 08:53:27 +02:00
.scrollspy-example {
position: relative;
height: 200px;
margin-top: 10px;
overflow: auto;
}
//
// Code snippets
//
2013-08-18 08:53:27 +02:00
.highlight {
2014-07-08 08:36:40 +02:00
padding: 1.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
2013-08-18 08:53:27 +02:00
background-color: #f7f7f9;
}
.highlight pre {
padding: 0;
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
border: 0;
}
.highlight pre code {
font-size: inherit;
color: @gray-dark; // Effectively the base text color
2013-08-18 08:53:27 +02:00
}
//
// Responsive tests
//
2013-02-12 21:16:32 +01:00
// Responsive (scrollable) doc tables
.table-responsive .highlight pre {
white-space: normal;
}
// 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;
}
// 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;
}
//
// Customizer
//
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
// Headings and form controls
2013-08-18 08:53:27 +02:00
.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
}
// For the variables, use regular weight
2013-08-18 08:53:27 +02:00
#less-section label {
font-weight: normal;
2013-02-12 21:16:32 +01:00
}
2013-08-18 08:53:27 +02:00
.bs-customizer-input {
float: left;
width: 33.333333%;
padding-right: 15px;
2014-02-27 09:12:52 +01:00
padding-left: 15px;
}
// 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
2013-08-18 08:53:27 +02:00
.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
//
// Brand guidelines
//
2013-02-12 21:16:32 +01:00
// Logo series wrapper
2013-12-27 23:04:44 +01:00
.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
2013-12-27 23:04:44 +01:00
.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;
}
2014-03-04 22:32:02 +01:00
.bs-brand-item .svg {
2014-03-04 23:35:23 +01:00
width: 144px;
2014-03-04 22:32:02 +01:00
height: 144px;
}
2013-12-27 23:04:44 +01:00
// Heading content within
2013-12-27 23:04:44 +01:00
.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;
// margin: 10px auto -10px;
// line-height: 30px;
// color: #fff;
// border-radius: 50%;
// }
// .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
//
2013-11-06 20:00:39 +01:00
.zero-clipboard {
position: relative;
2014-02-11 09:04:53 +01:00
display: none;
2014-07-08 08:36:40 +02:00
float: right;
2013-12-18 22:40:29 +01:00
}
.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;
2014-07-08 08:36:40 +02:00
padding: .25rem .5rem;
font-size: 75%;
color: #818a91;
cursor: pointer;
2014-07-08 08:36:40 +02:00
background-color: #eceeef;
border-radius: .2rem;
2013-08-18 08:53:27 +02:00
}
.btn-clipboard-hover {
2014-02-11 09:04:53 +01:00
color: #fff;
2014-07-08 08:36:40 +02:00
background-color: #027de7;
}
2014-02-11 09:04:53 +01:00
@media (min-width: 768px) {
.zero-clipboard {
display: block;
}
2013-08-18 08:53:27 +02:00
}
2013-02-12 21:16:32 +01:00
//
// Miscellaneous
//
// Pseudo :focus state for showing how it looks in the docs
#focusedInput {
border-color: @input-border-focus;
2013-02-12 21:16:32 +01:00
outline: 0;
outline: thin dotted \9; // IE9
box-shadow: 0 0 8px @input-box-shadow-focus;
2013-02-12 21:16:32 +01:00
}