docs.css 15.74 KiB
/* Add additional stylesheets below
-------------------------------------------------- */
/*
  Bootstrap's documentation styles
  Special styles for presenting Bootstrap's documentation and examples
*/
/* Body and structure
-------------------------------------------------- */
body {
  position: relative;
  padding-top: 90px;
  background-color: #fff;
  background-image: url(../img/grid-18px-masked.png);
  background-repeat: repeat-x;
  background-position: 0 40px;
/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
.navbar-fixed .brand {
  padding-right: 0;
  padding-left: 0;
  margin-left: 20px;
  float: right;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
  -webkit-transition: all .2s linear;
     -moz-transition: all .2s linear;
          transition: all .2s linear;
.navbar-fixed .brand:hover {
  text-decoration: none;
/* Space out sub-sections more
-------------------------------------------------- */
section {
  padding-top: 60px;
.page-header {
  margin: 18px 0;
  border-bottom: 1px solid #eee;
.page-header h1 {
  margin-bottom: 17px;
  line-height: 1;
/* Faded out hr */
hr.soften {
  height: 1px;
  margin: 54px 0;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 
  border: 0;
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
  position: relative;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
.jumbotron h1 { margin-bottom: 9px; font-size: 81px; letter-spacing: -1px; line-height: 1; } .jumbotron p { margin-bottom: 18px; font-size: 25px; font-weight: 300; line-height: 36px; color: #333; } .jumbotron .btn-large { font-size: 20px; font-weight: normal; padding: 14px 24px; margin-right: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .jumbotron .download-info { font-size: 16px; color: #999; } /* Masthead (docs home) */ .masthead { padding-top: 36px; margin-bottom: 72px; } .masthead h1, .masthead p { text-align: center; } .masthead h1 { margin-bottom: 18px; } .masthead p { margin: 0 5% 18px; font-size: 30px; line-height: 36px; } /* Benefits list in masthead */ .benefits { display: none; width: 260px; position: absolute; right: 0; bottom: 0; } .benefits ul { list-style: none; margin: 0; } .benefits li { font-size: 16px; font-weight: 300; line-height: 35px; color: #555; } .benefits li + li { border-top: 1px solid #f5f5f5; } .benefits h4 { color: #555; }
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
.benefits span { padding-right: 5px; color: #999; } /* Specific jumbotrons ------------------------- */ /* supporting docs pages */ .subhead { padding-bottom: 0; border-bottom: 0; } .subhead h1, .subhead p { margin-right: 0; } .subhead h1 { font-size: 54px; } /* Subnav */ .subnav { width: 100%; height: 36px; overflow: hidden; background-color: #eeeeee; /* Old browsers */ background-repeat: repeat-x; /* Repeat the gradient */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */ background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */ background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */ border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .subnav .nav { margin-bottom: 0; } .subnav .nav a { margin: 0; padding-top: 11px; padding-bottom: 11px; font-size: 13px; color: #777; border-left: 1px solid #f5f5f5; border-right: 1px solid #e5e5e5; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .subnav .nav a:hover, .subnav .nav .active a { background-color: transparent; color: #333; } .subnav .nav .active a { background-color: #e9e9e9; border-right-color: #ddd; border-left: 0; padding-left: 13px; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); box-shadow: inset 0 3px 5px rgba(0,0,0,.05); } .subnav .nav li:first-child a { border-left: 0;
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
padding-left: 12px; } .subnav .nav li:last-child a { border-right: 0; } /* Fixed subnav on scroll, but only for 940px and up (sorry IE!) */ @media (min-width: 940px) { .subnav-fixed { position: fixed; top: 40px; left: 0; right: 0; z-index: 1030; border-color: #d5d5d5; border-width: 0 0 1px; /* drop the border on the fixed edges */ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); } .subnav-fixed .nav { width: 938px; margin: 0 auto; padding: 0 1px; } } /* Quick links -------------------------------------------------- */ .quick-links { min-height: 30px; padding: 5px 20px; margin: 36px 0; list-style: none; text-align: center; overflow: hidden; } .quick-links li { display: inline; margin: 0 5px; } .quick-links .divider { color: #999; } .quick-links strong { font-weight: normal; color: #999; } .quick-links .github-btn, .quick-links .tweet-btn, .quick-links .follow-btn { position: relative; top: 5px; } /* Marketing section of Overview -------------------------------------------------- */ .marketing .row { margin-bottom: 9px; } .marketing h1 { margin: 36px 0 27px; font-size: 40px; font-weight: 300; text-align: center;
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
} .marketing h2, .marketing h3 { font-weight: 300; } .marketing h2 { font-size: 22px; } .marketing p { margin-right: 10px; } .marketing .bs-icon { float: left; margin: 7px 10px 0 0; opacity: .8; } .marketing .small-bs-icon { float: left; margin: 4px 5px 0 0; } /* Quickstart section for getting le code -------------------------------------------------- */ .getting-started h3, .getting-started p { line-height: 18px; text-align: center; margin-bottom: 9px; } .getting-started p { color: #777; } .getting-started .current-version, .getting-started .current-version a { color: #999; } .getting-started form { margin-bottom: 0; } .getting-started textarea { display: block; width: 95%; height: auto; margin-left: auto; margin-right: auto; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; background-color: #f5f5f5; /* Makes inputs behave like true block-level elements */ -webkit-box-sizing: border-box; /* Older Webkit */ -moz-box-sizing: border-box; /* Older FF */ -ms-box-sizing: border-box; /* IE8 */ box-sizing: border-box; /* CSS3 spec*/ /* Hacks for IE7 to make this work just okay enough to function */ *width: 80%; *height: 24px; } /* Footer -------------------------------------------------- */ .footer { margin-top: 45px; padding: 35px 0 36px; border-top: 1px solid #e5e5e5; }
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
.footer p { margin-bottom: 0; color: #555; } .footer dl { margin-bottom: 0; } .footer dl dt { font-size: 11px; color: #999; text-transform: uppercase; } .footer dl dd + dt { margin-top: 18px; } .footer dl dd { margin-left: 0; font-size: 12px; } .footer dl a { color: #999; } .footer dl a:hover { color: #555; } /* Special grid styles -------------------------------------------------- */ .show-grid { margin-top: 10px; margin-bottom: 20px; } .show-grid [class*="span"] { background-color: #eee; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; min-height: 30px; line-height: 30px; } .show-grid:hover [class*="span"] { background: #ddd; } .show-grid .show-grid { margin-top: 0; margin-bottom: 0; } .show-grid .show-grid [class*="span"] { background-color: #ccc; } /* Render mini layout previews -------------------------------------------------- */ .mini-layout { border: 1px solid #ddd; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); box-shadow: 0 1px 2px rgba(0,0,0,.075); } .mini-layout { height: 240px; margin-bottom: 20px; padding: 9px;
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
} .mini-layout div { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .mini-layout .mini-layout-body { background-color: #dceaf4; margin: 0 auto; width: 70%; height: 240px; } .mini-layout.fluid .mini-layout-sidebar, .mini-layout.fluid .mini-layout-header, .mini-layout.fluid .mini-layout-body { float: left; } .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; width: 20%; height: 240px; } .mini-layout.fluid .mini-layout-body { width: 60%; margin-left: 10px; } /* Popover docs -------------------------------------------------- */ .popover-well { min-height: 160px; } .popover-well .popover { display: block; } .popover-well .popover-wrapper { width: 50%; height: 160px; float: left; margin-left: 55px; position: relative; } .popover-well .popover-menu-wrapper { height: 80px; } .large-bird { margin: 5px 0 0 310px; opacity: .1; } /* Download page -------------------------------------------------- */ .download .page-header { margin-top: 36px; } .page-header .toggle-all { margin-top: 13px; } /* Space out h3s when following a section */ .download h3 { margin-bottom: 5px; } .download-builder input + h3, .download-builder .checkbox + h3 { margin-top: 9px; }
491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
/* Fields for variables */ .download-builder input[type=text] { margin-bottom: 9px; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; color: #d14; } .download-builder input[type=text]:focus { background-color: #fff; } /* Custom, larger checkbox labels */ .download .checkbox { padding: 6px 10px 6px 25px; color: #555; background-color: #f9f9f9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; } .download .checkbox:hover { color: #333; background-color: #f5f5f5; } .download .checkbox small { font-size: 12px; color: #777; } /* Giant download button */ .download-btn { margin: 36px 0 108px.i; } .download p, .download h4 { max-width: 50%; margin: 0 auto 18px; color: #999; text-align: center; } .download-btn h4 { margin-bottom: 0; } .btn.xlarge { display: block; width: auto; padding: 19px 24px; margin-bottom: 27px; font-size: 30px; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } /* Misc -------------------------------------------------- */ pre.prettyprint { overflow: hidden; } .browser-support { max-width: 100%; } /* Make tables spaced out a bit more */
561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
h2 + table, h3 + table, h4 + table, h2 + .row { margin-top: 5px; } /* Example sites showcase */ .example-sites img { max-width: 100%; } .marketing-byline { margin: -18px 0 27px; font-size: 18px; font-weight: 300; line-height: 24px; color: #999; text-align: center; } .scrollspy-example { height: 200px; overflow: auto; position: relative; } /* Remove bottom margin on example forms in wells */ form.well { padding: 14px; } /* Tighten up spacing */ .well hr { margin: 18px 0; } /* Form docs for horizontal forms */ .form-docs { padding-left: 10px; } .form-docs h3, .form-docs p, .form-docs li { color: #777; } .form-docs hr { margin: 18px 0; } /* Fake the :focus state to demo it */ .focused { border-color: rgba(82,168,236,.8); -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); outline: 0; } /* For input sizes, make them display block */ .docs-input-sizes input[type=text] { display: block; margin-bottom: 9px; } /* Icons ------------------------- */ .the-icons { margin-bottom: 18px; } .the-icons i {
631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700
display: block; margin-bottom: 5px; } .the-icons i:hover { background-color: rgba(255,0,0,.25); } .the-icons i:after { display: block; content: attr(class); font-style: normal; margin-left: 20px; width: 140px; } #javascript input[type=checkbox] { position: relative; top: -1px; display: inline; margin-left: 6px; } /* Responsive Docs -------------------------------------------------- */ @media (max-width: 480px) { /* Reduce padding above jumbotron */ body { padding-top: 70px; } /* Change up some type stuff */ h1 small { display: block; line-height: 20px; } /* More space between sections */ h2 { margin-top: 27px; } h3 { margin-top: 18px; } /* Adjust the jumbotron */ .jumbotron h1, .jumbotron p { text-align: center; margin-right: 0; } .jumbotron h1 { font-size: 45px; margin-right: 0; } .jumbotron p { margin-right: 0; font-size: 18px; line-height: 24px; } .jumbotron .btn { display: block; font-size: 18px; padding: 10px 14px; margin: 0 auto 10px; } /* Don't space out quick links so much */ .quick-links { margin: 40px 0 0; } /* hide the bullets on mobile since our horizontal space is limited */
701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770
.quick-links .divider { display: none; } /* center example sites */ .example-sites { margin-left: 0; } .example-sites > li { float: none; display: block; max-width: 300px; margin: 0 auto 18px; } .example-sites img { max-width: 270px; } table code { white-space: normal; word-wrap: break-word; word-break: break-all; } } @media (max-width: 768px) { /* Subnav */ .subnav { position: static; top: auto; z-index: auto; width: auto; height: auto; background: #fff; /* whole background property since we use a background-image for gradient */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .subnav .nav > li { float: none; } .subnav .nav a { border: 0; } .subnav .nav li + li a { border-top: 1px solid #e5e5e5; } /* Adjust the jumbotron */ .jumbotron .benefits { position: relative; width: auto; margin: 36px 0; } /* Popovers */ .large-bird { display: none; } .popover-well .popover-wrapper { margin-left: 0; } /* Space out the show-grid examples */ .show-grid [class*="span"] { margin-bottom: 5px; }
771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815
/* Space out the getting started sections */ .getting-started .span4 { margin-bottom: 18px; } /* Unfloat the back to top link in footer */ .footer .pull-right { float: none; } .footer p { margin-bottom: 9px; } } @media (min-width: 480px) and (max-width: 768px) { /* Scale down the jumbotron content */ .jumbotron h1 { font-size: 54px; } .jumbotron h1, .jumbotron p { margin-right: 0; } } @media (min-width: 768px) and (max-width: 940px) { /* Scale down the jumbotron content */ .jumbotron h1 { font-size: 72px; } /* Provide enough space on right-hand side for benefits list */ .jumbotron h1, .jumbotron p { margin-right: 40%; } }