diff options
Diffstat (limited to 'docs/assets/css/docs.css')
| -rw-r--r-- | docs/assets/css/docs.css | 826 |
1 files changed, 656 insertions, 170 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index fb727a900..cc64d3166 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -5,186 +5,300 @@ Special styles for presenting Bootstrap's documentation and examples */ + /* Body and structure -------------------------------------------------- */ body { - background-color: #fff; 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; } -section > .row { - margin-bottom: 10px; + +/* 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 { - min-width: 940px; - padding-top: 40px; -} -.jumbotron .inner { - background: transparent url(../img/grid-18px.png) top center; - padding: 45px 0; - -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); - -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); -/* box-shadow: inset 0 10px 30px rgba(0,0,0,.3); -*/} -.jumbotron h1, -.jumbotron p { - margin-bottom: 9px; - color: #fff; - text-align: center; - text-shadow: 0 1px 1px rgba(0,0,0,.3); + position: relative; } .jumbotron h1 { - font-size: 54px; + margin-bottom: 9px; + font-size: 81px; + letter-spacing: -1px; line-height: 1; - text-shadow: 0 1px 2px rgba(0,0,0,.5); } .jumbotron p { + margin-bottom: 18px; + font-size: 25px; font-weight: 300; + line-height: 36px; + color: #333; } -.jumbotron .lead { +.jumbotron .btn-large { font-size: 20px; - line-height: 27px; + font-weight: normal; + padding: 14px 24px; + margin-right: 10px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } -.jumbotron p a { - color: #fff; - font-weight: bold; +.jumbotron .download-info { + font-size: 16px; + color: #999; } -/* Specific jumbotrons -------------------------- */ -/* main docs page */ +/* Masthead (docs home) */ .masthead { - background-color: #049cd9; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - background-image: -webkit-linear-gradient(#004D9F, #049cd9); - background-image: -moz-linear-gradient(#004D9F, #049cd9); - background-image: -o-linear-gradient(top, #004D9F, #049cd9); - background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */ + 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; +} + + +/* Specific jumbotrons +------------------------- */ /* supporting docs pages */ .subhead { - background-color: #767d80; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); - background-image: -webkit-linear-gradient(#565d60, #767d80); - background-image: -moz-linear-gradient(#565d60, #767d80); - background-image: -o-linear-gradient(top, #565d60, #767d80); - background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */ -} -.subhead .inner { - padding: 36px 0 27px; + padding-bottom: 0; + border-bottom: 0; } .subhead h1, .subhead p { - text-align: left; + margin-right: 0; } .subhead h1 { - font-size: 40px; + font-size: 54px; } -.subhead p a { - font-weight: normal; + +/* 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 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; + } + .subnav .nav > li:first-child > a, + .subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + } +} -/* Footer + +/* Quick links -------------------------------------------------- */ -.footer { - background-color: #eee; - min-width: 940px; - padding: 30px 0; - text-shadow: 0 1px 0 #fff; - border-top: 1px solid #e5e5e5; - -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); - -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); -/* box-shadow: inset 0 5px 15px rgba(0,0,0,.025); -*/} -.footer p { - color: #555; +.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; } -/* Quickstart section for getting le code +/* Marketing section of Overview -------------------------------------------------- */ -.quickstart { - background-color: #f5f5f5; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5)); - background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5)); - background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -o-linear-gradient(#f9f9f9, #f5f5f5); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)"; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0); - background-image: linear-gradient(#f9f9f9, #f5f5f5); - border-top: 1px solid #fff; - border-bottom: 1px solid #eee; -} -.quickstart .container { - margin-bottom: 0; +.marketing .row { + margin-bottom: 9px; } -.quickstart .row { - margin: 0 -20px; - -webkit-box-shadow: 1px 0 0 #f9f9f9; - -moz-box-shadow: 1px 0 0 #f9f9f9; - box-shadow: 1px 0 0 #f9f9f9; -} -.quickstart [class*="span"] { - width: 285px; - height: 117px; - margin-left: 0; - padding: 17px 20px 26px; - border-left: 1px solid #eee; - -webkit-box-shadow: inset 1px 0 0 #f9f9f9; - -moz-box-shadow: inset 1px 0 0 #f9f9f9; - box-shadow: inset 1px 0 0 #f9f9f9; -} -.quickstart [class*="span"]:last-child { - border-right: 1px solid #eee; - width: 286px; -} -.quickstart h6, -.quickstart p { - line-height: 18px; +.marketing h1 { + margin: 36px 0 27px; + font-size: 40px; + font-weight: 300; text-align: center; - margin-bottom: 9px; - color: #333; } -.quickstart .current-version, -.quickstart .current-version a { - color: #999; +.marketing h2, +.marketing h3 { + font-weight: 300; } -.quickstart h6 { - color: #999; +.marketing h2 { + font-size: 22px; } -.quickstart textarea { - display: block; - width: 275px; - height: auto; - margin: 0 0 9px; - line-height: 21px; - white-space: nowrap; - overflow: hidden; +.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: 10px; + margin-bottom: 20px; } .show-grid [class*="span"] { - background: #eee; + background-color: #eee; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -228,7 +342,7 @@ section > .row { .mini-layout .mini-layout-body { background-color: #dceaf4; margin: 0 auto; - width: 240px; + width: 70%; height: 240px; } .mini-layout.fluid .mini-layout-sidebar, @@ -238,52 +352,12 @@ section > .row { } .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; - width: 90px; + width: 20%; height: 240px; } .mini-layout.fluid .mini-layout-body { - width: 300px; - margin-left: 10px; -} - - -/* Topbar special styles --------------------------------------------------- */ -.topbar-wrapper { - position: relative; - height: 40px; - margin: 5px 0 15px; -} -.topbar-wrapper .topbar { - position: absolute; - margin: 0 -20px; -} -.topbar-wrapper .topbar .topbar-inner { - padding-left: 20px; - padding-right: 20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} - -/* Topbar in js docs -------------------------- */ -#bootstrap-js .topbar-wrapper { - z-index: 1; -} -#bootstrap-js .topbar-wrapper .topbar { - position: absolute; - margin: 0 -20px; -} -#bootstrap-js .topbar-wrapper .topbar .topbar-inner { - padding-left: 20px; - padding-right: 20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -#bootstrap-js .topbar-wrapper .container { - width: auto; + width: 77.5%; + margin-left: 2.5%; } @@ -305,13 +379,425 @@ section > .row { .popover-well .popover-menu-wrapper { height: 80px; } -img.large-bird { +.large-bird { margin: 5px 0 0 310px; opacity: .1; } -/* Pretty Print + +/* 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; -}
\ No newline at end of file +} + +.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; +} + + +/* 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; + } + .quick-links li { + margin-top: 5px; + margin-bottom: 5px; + } + /* 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: 300px; + 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; + } + + /* 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 > 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; + } + + /* 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; + } + .masthead p { + font-size: 25px; + line-height: 36px; + } + .jumbotron h1, + .jumbotron p { + margin-right: 0; + margin-left: 0; + } + +} + + +@media (min-width: 768px) and (max-width: 940px) { + + /* Remove any padding from the body */ + body { + padding-top: 0; + } + + /* Scale down the jumbotron content */ + .jumbotron h1 { + font-size: 72px; + } + +} + + +@media (max-width: 940px) { + + /* Unfloat brand */ + .navbar-fixed-top .brand { + float: left; + margin-left: 0; + padding-left: 10px; + padding-right: 10px; + } + +} + + +/* 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 */ + } + +} |