diff options
Diffstat (limited to 'assets/css/docs.css')
| -rwxr-xr-x | assets/css/docs.css | 790 |
1 files changed, 790 insertions, 0 deletions
diff --git a/assets/css/docs.css b/assets/css/docs.css new file mode 100755 index 00000000..f3643f8d --- /dev/null +++ b/assets/css/docs.css @@ -0,0 +1,790 @@ +/* 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-top .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-top .brand:hover { + text-decoration: none; +} */ + + +/* Space out sub-sections more +-------------------------------------------------- */ +section { + padding-top: 60px; +} + +/* 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; +} +.jumbotron h1 { + margin-bottom: 9px; + font-size: 81px; + letter-spacing: -1px; + line-height: 1; +} +.jumbotron p { + margin-bottom: 18px; + font-weight: 300; +} +.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; +} + +/* 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-left: 5%; + margin-right: 5%; + font-size: 30px; + line-height: 36px; +} + + +/* Specific jumbotrons +------------------------- */ +/* supporting docs pages */ +.subhead { + padding-bottom: 0; + margin-bottom: 9px; +} +.subhead h1 { + font-size: 54px; +} + +/* Subnav */ +.subnav { + width: 100%; + height: 36px; + 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 > li > a { + margin: 0; + padding-top: 11px; + padding-bottom: 11px; + border-left: 1px solid #f5f5f5; + border-right: 1px solid #e5e5e5; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} +.subnav .nav > .active > a, +.subnav .nav > .active > a:hover { + padding-left: 13px; + color: #777; + background-color: #e9e9e9; + border-right-color: #ddd; + border-left: 0; + -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 > .active > a .caret, +.subnav .nav > .active > a:hover .caret { + border-top-color: #777; +} +.subnav .nav > li:first-child > a, +.subnav .nav > li:first-child > a:hover { + border-left: 0; + padding-left: 12px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} +.subnav .nav > li:last-child > a { + border-right: 0; +} +.subnav .dropdown-menu { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ +@media (min-width: 980px) { + .subnav-fixed { + position: fixed; + top: 40px; + left: 0; + right: 0; + z-index: 900; + 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; + } + .subnav .nav > li:first-child > a, + .subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + } +} + + +/* 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; + 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; +} +.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; +} + + + +/* Footer +-------------------------------------------------- */ +.footer { + margin-top: 45px; + padding: 35px 0 36px; + border-top: 1px solid #e5e5e5; +} +.footer p { + margin-bottom: 0; + 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; +} +.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: 77.5%; + margin-left: 2.5%; +} + + +/* 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: 5px; +} + +/* Space out h3s when following a section */ +.download h3 { + margin-bottom: 5px; +} +.download-builder input + h3, +.download-builder .checkbox + h3 { + margin-top: 9px; +} + +/* 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; +} + +/* Variables section */ +#variables label { + margin-bottom: 0; +} + +/* Giant download button */ +.download-btn { + margin: 36px 0 108px; +} +.download p, +.download h4 { + max-width: 50%; + margin: 0 auto; + color: #999; + text-align: center; +} +.download h4 { + margin-bottom: 0; +} +.download p { + margin-bottom: 18px; +} +.download-btn .btn { + display: block; + width: auto; + padding: 19px 24px; + margin-bottom: 27px; + font-size: 30px; + line-height: 1; + text-align: center; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + + + +/* Color swatches on LESS docs page +-------------------------------------------------- */ +/* Sets the width of the td */ +.swatch-col { + width: 30px; +} +/* Le swatch */ +.swatch { + display: inline-block; + width: 30px; + height: 20px; + margin: -6px 0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +/* For white swatches, give a border */ +.swatch-bordered { + width: 28px; + height: 18px; + border: 1px solid #eee; +} + + +/* Misc +-------------------------------------------------- */ + +pre.prettyprint { + overflow: hidden; +} + +.browser-support { + max-width: 100%; +} + +/* Make tables spaced out a bit more */ +h2 + table, +h3 + table, +h4 + table, +h2 + .row { + margin-top: 5px; +} + +/* Example sites showcase */ +.example-sites img { + max-width: 100%; + margin: 0 auto; +} +.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; +} + +/* 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 select, +.docs-input-sizes input[type=text] { + display: block; + margin-bottom: 9px; +} + +/* Icons +------------------------- */ +.the-icons { + margin-bottom: 18px; +} +.the-icons i { + 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; +} + +/* Eaxmples page +------------------------- */ +.bootstrap-examples .thumbnail { + margin-bottom: 9px; + background-color: #fff; +} + + +/* Responsive Docs +-------------------------------------------------- */ +@media (max-width: 480px) { + + /* Reduce padding above jumbotron */ + body { + padding-top: 70px; + } + + /* Change up some type stuff */ + h2 { + margin-top: 27px; + } + h2 small { + display: block; + line-height: 18px; + } + 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; + margin-left: 0; + font-size: 18px; + line-height: 24px; + } + .jumbotron .btn { + display: block; + font-size: 18px; + padding: 10px 14px; + margin: 0 auto 10px; + } + /* Masthead (home page jumbotron) */ + .masthead { + padding-top: 0; + } + + /* 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 */ + .quick-links .divider { + display: none; + } + + /* center example sites */ + .example-sites { + margin-left: 0; + } + .example-sites > li { + float: none; + display: block; + max-width: 280px; + margin: 0 auto 18px; + text-align: center; + } + .example-sites .thumbnail > img { + max-width: 270px; + } + + table code { + white-space: normal; + word-wrap: break-word; + word-break: break-all; + } + + /* Modal example */ + .modal-example .modal { + position: relative; + top: auto; + right: auto; + bottom: auto; + left: auto; + } + +} + + +@media (max-width: 768px) { + + /* Remove any padding from the body */ + body { + padding-top: 0; + } + + /* Jumbotron buttons */ + .jumbotron .btn { + margin-bottom: 10px; + } + + /* Subnav */ + .subnav { + position: static; + top: auto; + -moz-border-radius: 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 > li > a { + border: 0; + } + .subnav .nav > li + li > a { + border-top: 1px solid #e5e5e5; + } + .subnav .nav > li:first-child > a, + .subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 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; + } + + /* 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 p { + margin-right: 0; + margin-left: 0; + } + +} + + +@media (min-width: 768px) and (max-width: 980px) { + + /* Remove any padding from the body */ + body { + padding-top: 0; + } + + /* Scale down the jumbotron content */ + .jumbotron h1 { + font-size: 72px; + } + +} + + +@media (max-width: 980px) { + + /* Unfloat brand */ + .navbar-fixed-top .brand { + float: left; + margin-left: 0; + padding-left: 10px; + padding-right: 10px; + } + + /* Inline-block quick links for more spacing */ + .quick-links li { + display: inline-block; + margin: 5px; + } + +} + + +/* LARGE DESKTOP SCREENS */ +@media (min-width: 1210px) { + + /* Update subnav container */ + .subnav-fixed .nav { + width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ + } + +} |