From 4f4592c22501a220d2d6c2e5daab80395f93dce7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Jul 2017 15:09:46 -0700 Subject: Reorganize v3 docs CSS to use Less --- docs/assets/less/ads.less | 152 ++++++++++ docs/assets/less/anchor.less | 25 ++ docs/assets/less/booticon.less | 30 ++ docs/assets/less/brand.less | 64 ++++ docs/assets/less/buttons.less | 28 ++ docs/assets/less/callouts.less | 50 ++++ docs/assets/less/customizer.less | 108 +++++++ docs/assets/less/demos.less | 20 ++ docs/assets/less/docs.less | 129 ++++++++ docs/assets/less/examples.less | 324 +++++++++++++++++++++ docs/assets/less/featured-sites.less | 21 ++ docs/assets/less/featurettes.less | 66 +++++ docs/assets/less/footer.less | 30 ++ docs/assets/less/glyphicons.less | 44 +++ docs/assets/less/ie10-viewport-bug-workaround.less | 13 + docs/assets/less/masthead.less | 72 +++++ docs/assets/less/nav.less | 30 ++ docs/assets/less/page-header.less | 36 +++ docs/assets/less/responsive-tests.less | 72 +++++ docs/assets/less/sidebar.less | 122 ++++++++ docs/assets/less/skip-link.less | 23 ++ docs/assets/less/swatches.less | 64 ++++ docs/assets/less/syntax.less | 96 ++++++ docs/assets/less/team.less | 21 ++ docs/assets/less/zero-clipboard.less | 33 +++ 25 files changed, 1673 insertions(+) create mode 100644 docs/assets/less/ads.less create mode 100644 docs/assets/less/anchor.less create mode 100644 docs/assets/less/booticon.less create mode 100644 docs/assets/less/brand.less create mode 100644 docs/assets/less/buttons.less create mode 100644 docs/assets/less/callouts.less create mode 100644 docs/assets/less/customizer.less create mode 100644 docs/assets/less/demos.less create mode 100644 docs/assets/less/docs.less create mode 100644 docs/assets/less/examples.less create mode 100644 docs/assets/less/featured-sites.less create mode 100644 docs/assets/less/featurettes.less create mode 100644 docs/assets/less/footer.less create mode 100644 docs/assets/less/glyphicons.less create mode 100644 docs/assets/less/ie10-viewport-bug-workaround.less create mode 100644 docs/assets/less/masthead.less create mode 100644 docs/assets/less/nav.less create mode 100644 docs/assets/less/page-header.less create mode 100644 docs/assets/less/responsive-tests.less create mode 100644 docs/assets/less/sidebar.less create mode 100644 docs/assets/less/skip-link.less create mode 100644 docs/assets/less/swatches.less create mode 100644 docs/assets/less/syntax.less create mode 100644 docs/assets/less/team.less create mode 100644 docs/assets/less/zero-clipboard.less (limited to 'docs/assets/less') diff --git a/docs/assets/less/ads.less b/docs/assets/less/ads.less new file mode 100644 index 0000000000..412205e7e2 --- /dev/null +++ b/docs/assets/less/ads.less @@ -0,0 +1,152 @@ +// scss-lint:disable ImportantRule, IdSelector + +// +// Carbon ads +// + +#carbonads { + display: block; + padding: 15px 15px 15px 160px; + margin: 50px -15px 0; + overflow: hidden; + font-size: 13px; + line-height: 1.5; + text-align: left; + border: solid #866ab3; + border-width: 1px 0 0; + + a { + color: #fff; + text-decoration: none; + } + + @media (min-width: @screen-sm-min) { + max-width: 330px; + margin: 50px auto 0; + border-width: 1px; + border-radius: 4px; + } + + @media (min-width: @screen-lg-min) { + position: absolute; + top: 0; + right: 15px; + margin-top: 0; + + .bd-masthead & { + position: static; + } + } +} + +.carbon-img { + float: left; + margin-left: -145px; +} + +.carbon-poweredby { + display: block; + color: #cdbfe3 !important; +} + +.bd-content { + #carbonads { + position: static; + max-width: 400px; + margin: 2rem 0; + line-height: 1.4; + background-color: #f5f5f5; + border: 0; + + a { + color: #333; + } + + .carbon-poweredby { + color: #777 !important; + } + } +} + + + + +/* + * 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. + */ + +// .carbonad { +// width: auto !important; +// height: auto !important; +// padding: 20px !important; +// margin: 30px -15px -31px !important; +// overflow: hidden; /* clearfix */ +// font-size: 13px !important; +// line-height: 16px !important; +// text-align: left; +// background: transparent !important; +// border: solid #866ab3 !important; +// border-width: 1px 0 !important; +// } +// .carbonad-img { +// margin: 0 !important; +// } +// .carbonad-text, +// .carbonad-tag { +// display: block !important; +// float: none !important; +// 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 { +// color: inherit !important; +// text-align: left !important; +// } +// .carbonad-text a, +// .carbonad-tag a { +// color: #fff !important; +// } +// .carbonad #azcarbon > img { +// display: none; /* hide what I assume are tracking images */ +// } +// +// @media (min-width: 480px) { +// .carbonad { +// width: 330px !important; +// margin: 20px auto !important; +// border-width: 1px !important; +// border-radius: 4px; +// } +// .bs-docs-masthead .carbonad { +// margin: 50px auto 0 !important; +// } +// } +// +// @media (min-width: 768px) { +// .carbonad { +// margin-right: 0 !important; +// margin-left: 0 !important; +// } +// } +// +// @media (min-width: 992px) { +// .carbonad { +// position: absolute; +// top: 0; +// right: 15px; /* 15px instead of 0 since box-sizing */ +// width: 330px !important; +// padding: 15px !important; +// margin: 0 !important; +// } +// .bs-docs-masthead .carbonad { +// position: static; +// } +// } diff --git a/docs/assets/less/anchor.less b/docs/assets/less/anchor.less new file mode 100644 index 0000000000..5bc63602e7 --- /dev/null +++ b/docs/assets/less/anchor.less @@ -0,0 +1,25 @@ +/* + * 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; +} diff --git a/docs/assets/less/booticon.less b/docs/assets/less/booticon.less new file mode 100644 index 0000000000..21077a8d39 --- /dev/null +++ b/docs/assets/less/booticon.less @@ -0,0 +1,30 @@ +/* Bootstrap "B" icon */ +.bs-docs-booticon { + display: block; + font-weight: 500; + color: #fff; + text-align: center; + cursor: default; + background-color: #563d7c; + border-radius: 15%; +} +.bs-docs-booticon-sm { + width: 30px; + height: 30px; + font-size: 20px; + line-height: 28px; +} +.bs-docs-booticon-lg { + width: 144px; + height: 144px; + font-size: 108px; + line-height: 140px; +} +.bs-docs-booticon-inverse { + color: #563d7c; + background-color: #fff; +} +.bs-docs-booticon-outline { + background-color: transparent; + border: 1px solid #cdbfe3; +} diff --git a/docs/assets/less/brand.less b/docs/assets/less/brand.less new file mode 100644 index 0000000000..c2971222d5 --- /dev/null +++ b/docs/assets/less/brand.less @@ -0,0 +1,64 @@ +/* Logo series wrapper */ +.bs-brand-logos { + display: table; + width: 100%; + margin-bottom: 15px; + overflow: hidden; + color: #563d7c; + background-color: #f9f9f9; + border-radius: 4px; +} + +/* Individual items */ +.bs-brand-item { + padding: 60px 0; + text-align: center; +} +.bs-brand-item + .bs-brand-item { + border-top: 1px solid #fff; +} +.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 { + margin-right: auto; + margin-left: auto; +} + +/* 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; +} + +@media (min-width: 768px) { + .bs-brand-item { + display: table-cell; + width: 1%; + } + .bs-brand-item + .bs-brand-item { + border-top: 0; + border-left: 1px solid #fff; + } + .bs-brand-item h1 { + font-size: 60px; + } +} diff --git a/docs/assets/less/buttons.less b/docs/assets/less/buttons.less new file mode 100644 index 0000000000..c90cefe376 --- /dev/null +++ b/docs/assets/less/buttons.less @@ -0,0 +1,28 @@ +/* Outline button for use within the docs */ +.btn-outline { + color: #563d7c; + background-color: transparent; + border-color: #563d7c; +} +.btn-outline:hover, +.btn-outline:focus, +.btn-outline:active { + color: #fff; + background-color: #563d7c; + border-color: #563d7c; +} + +/* Inverted outline button (white on dark) */ +.btn-outline-inverse { + color: #fff; + background-color: transparent; + border-color: #cdbfe3; +} +.btn-outline-inverse:hover, +.btn-outline-inverse:focus, +.btn-outline-inverse:active { + color: #563d7c; + text-shadow: none; + background-color: #fff; + border-color: #fff; +} diff --git a/docs/assets/less/callouts.less b/docs/assets/less/callouts.less new file mode 100644 index 0000000000..1017d0bde7 --- /dev/null +++ b/docs/assets/less/callouts.less @@ -0,0 +1,50 @@ +/* + * Callouts + * + * Not quite alerts, but custom and helpful notes for folks reading the docs. + * Requires a base and modifier class. + */ + +/* Common styles for all types */ +.bs-callout { + padding: 20px; + margin: 20px 0; + border: 1px solid #eee; + border-left-width: 5px; + border-radius: 3px; +} +.bs-callout h4 { + margin-top: 0; + margin-bottom: 5px; +} +.bs-callout p:last-child { + margin-bottom: 0; +} +.bs-callout code { + border-radius: 3px; +} + +/* Tighten up space between multiple callouts */ +.bs-callout + .bs-callout { + margin-top: -5px; +} + +/* Variations */ +.bs-callout-danger { + border-left-color: #ce4844; +} +.bs-callout-danger h4 { + color: #ce4844; +} +.bs-callout-warning { + border-left-color: #aa6708; +} +.bs-callout-warning h4 { + color: #aa6708; +} +.bs-callout-info { + border-left-color: #1b809e; +} +.bs-callout-info h4 { + color: #1b809e; +} diff --git a/docs/assets/less/customizer.less b/docs/assets/less/customizer.less new file mode 100644 index 0000000000..6046a0c07b --- /dev/null +++ b/docs/assets/less/customizer.less @@ -0,0 +1,108 @@ +.bs-customizer .toggle { + float: right; + margin-top: 25px; +} + +/* Headings and form contrls */ +.bs-customizer label { + margin-top: 10px; + font-weight: 500; + color: #555; +} +.bs-customizer h2 { + padding-top: 30px; + margin-top: 0; + margin-bottom: 5px; +} +.bs-customizer h3 { + margin-bottom: 0; +} +.bs-customizer h4 { + margin-top: 15px; + margin-bottom: 0; +} +.bs-customizer .bs-callout h4 { + margin-top: 0; /* lame, but due to specificity we have to duplicate */ + margin-bottom: 5px; +} +.bs-customizer input[type="text"] { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + background-color: #fafafa; +} +.bs-customizer .help-block { + margin-bottom: 5px; + font-size: 12px; +} + +/* For the variables, use regular weight */ +#less-section label { + font-weight: normal; +} + +/* Downloads */ +.bs-customize-download .btn-outline { + padding: 20px; +} + +/* Error handling */ +.bs-customizer-alert { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + padding: 15px 0; + color: #fff; + background-color: #d9534f; + border-bottom: 1px solid #b94441; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.25); +} +.bs-customizer-alert .close { + margin-top: -4px; + font-size: 24px; +} +.bs-customizer-alert p { + margin-bottom: 0; +} +.bs-customizer-alert .glyphicon { + margin-right: 5px; +} +.bs-customizer-alert pre { + margin: 10px 0 0; + color: #fff; + background-color: #a83c3a; + border-color: #973634; + -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); +} + +.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; +} diff --git a/docs/assets/less/demos.less b/docs/assets/less/demos.less new file mode 100644 index 0000000000..e05d7f0d95 --- /dev/null +++ b/docs/assets/less/demos.less @@ -0,0 +1,20 @@ +.bs-examples .thumbnail { + margin-bottom: 10px; +} +.bs-examples h4 { + margin-bottom: 5px; +} +.bs-examples p { + margin-bottom: 20px; +} + +@media (max-width: 480px) { + .bs-examples { + margin-right: -10px; + margin-left: -10px; + } + .bs-examples > [class^="col-"] { + padding-right: 10px; + padding-left: 10px; + } +} diff --git a/docs/assets/less/docs.less b/docs/assets/less/docs.less new file mode 100644 index 0000000000..3a0bec96c0 --- /dev/null +++ b/docs/assets/less/docs.less @@ -0,0 +1,129 @@ +/*! + * Bootstrap Docs (http://getbootstrap.com) + * Copyright 2011-2017 Twitter, Inc. + * Licensed under the Creative Commons Attribution 3.0 Unported License. For + * details, see https://creativecommons.org/licenses/by/3.0/. + */ + +/* + * Bootstrap Documentation + * Special styles for presenting Bootstrap's documentation and code examples. + */ + +// Dependencies +@import "syntax.less"; +@import "ie10-viewport-bug-workaround.less"; + +// Core variables and mixins +@import "../../../less/variables.less"; +@import "../../../less/mixins.less"; + +// Docs components +@import "buttons.less"; +@import "booticon.less"; +@import "skip-link.less"; +@import "nav.less"; +@import "footer.less"; +@import "masthead.less"; +@import "page-header.less"; +@import "ads.less"; +@import "featurettes.less"; +@import "featured-sites.less"; +@import "demos.less"; +@import "sidebar.less"; +@import "examples.less"; +@import "callouts.less"; +@import "swatches.less"; +@import "team.less"; +@import "responsive-tests.less"; +@import "glyphicons.less"; +@import "customizer.less"; +@import "brand.less"; +@import "zero-clipboard.less"; +@import "anchor.less"; + + +// +// Misc +// + +// For scrollspy +body { + position: relative; +} + +// 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; +} + +// Space docs sections out +.bs-docs-section { + margin-bottom: 60px; +} +.bs-docs-section:last-child { + margin-bottom: 0; +} + +h1[id] { + padding-top: 20px; + margin-top: 0; +} + +// Wall of Browser Bugs +.bs-docs-browser-bugs td p { + margin-bottom: 0; +} + +.bs-docs-browser-bugs th:first-child { + width: 18%; +} + +// 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; +} + +.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; +} + +// 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 { + a[href]:after { + content: "" !important; + } +} diff --git a/docs/assets/less/examples.less b/docs/assets/less/examples.less new file mode 100644 index 0000000000..9bc7a53161 --- /dev/null +++ b/docs/assets/less/examples.less @@ -0,0 +1,324 @@ +/* + * Grid examples + * + * Highlight the grid columns within the docs so folks can see their padding, + * alignment, sizing, etc. + */ + +.show-grid { + margin-bottom: 15px; +} +.show-grid [class^="col-"] { + padding-top: 10px; + padding-bottom: 10px; + background-color: #eee; + background-color: rgba(86,61,124,.15); + border: 1px solid #ddd; + border: 1px solid rgba(86,61,124,.2); +} + +/* + * Examples + * + * Isolated sections of example content for each component or feature. Usually + * followed by a code snippet. + */ + +.bs-example { + position: relative; + padding: 45px 15px 15px; + margin: 0 -15px 15px; + border-color: #e5e5e5 #eee #eee; + border-style: solid; + border-width: 1px 0; + -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05); + box-shadow: inset 0 3px 6px rgba(0,0,0,.05); +} +/* Echo out a label for the example */ +.bs-example:after { + position: absolute; + top: 15px; + left: 15px; + font-size: 12px; + font-weight: bold; + color: #959595; + text-transform: uppercase; + letter-spacing: 1px; + content: "Example"; +} + +.bs-example-padded-bottom { + padding-bottom: 24px; +} + +/* Tweak display of the code snippets when following an example */ +.bs-example + .highlight, +.bs-example + .zero-clipboard + .highlight { + margin: -15px -15px 15px; + border-width: 0 0 1px; + border-radius: 0; +} + +/* Make the examples and snippets not full-width */ +@media (min-width: 768px) { + .bs-example { + margin-right: 0; + margin-left: 0; + background-color: #fff; + border-color: #ddd; + border-width: 1px; + border-radius: 4px 4px 0 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .bs-example + .highlight, + .bs-example + .zero-clipboard + .highlight { + margin-top: -16px; + margin-right: 0; + margin-left: 0; + border-width: 1px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + } + .bs-example-standalone { + border-radius: 4px; + } +} + +/* Undo width of container */ +.bs-example .container { + width: auto; +} + +/* Tweak content of examples for optimum awesome */ +.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, +.bs-example > .table:last-child, +.bs-example > .navbar:last-child, +.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 { + margin-bottom: 0; +} +.bs-example > p > .close { + float: none; +} + +/* Typography */ +.bs-example-type .table .type-info { + color: #767676; + vertical-align: middle; +} +.bs-example-type .table td { + padding: 15px 0; + border-color: #eee; +} +.bs-example-type .table tr:first-child td { + border-top: 0; +} +.bs-example-type h1, +.bs-example-type h2, +.bs-example-type h3, +.bs-example-type h4, +.bs-example-type h5, +.bs-example-type h6 { + 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; +} + +/* 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; +} +.bs-example > textarea.form-control { + resize: vertical; +} + +/* List groups */ +.bs-example > .list-group { + max-width: 400px; +} + +/* Navbars */ +.bs-example .navbar:last-child { + margin-bottom: 0; +} +.bs-navbar-top-example, +.bs-navbar-bottom-example { + z-index: 1; + padding: 0; + overflow: hidden; /* cut the drop shadows off */ +} +.bs-navbar-top-example .navbar-header, +.bs-navbar-bottom-example .navbar-header { + margin-left: 0; +} +.bs-navbar-top-example .navbar-fixed-top, +.bs-navbar-bottom-example .navbar-fixed-bottom { + position: relative; + margin-right: 0; + margin-left: 0; +} +.bs-navbar-top-example { + padding-bottom: 45px; +} +.bs-navbar-top-example:after { + top: auto; + bottom: 15px; +} +.bs-navbar-top-example .navbar-fixed-top { + top: -1px; +} +.bs-navbar-bottom-example { + padding-top: 45px; +} +.bs-navbar-bottom-example .navbar-fixed-bottom { + bottom: -1px; +} +.bs-navbar-bottom-example .navbar { + margin-bottom: 0; +} +@media (min-width: 768px) { + .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 */ +.bs-example > .pager { + margin-top: 0; +} + +/* Example modals */ +.bs-example-modal { + background-color: #f5f5f5; +} +.bs-example-modal .modal { + position: relative; + top: auto; + right: auto; + bottom: auto; + left: auto; + z-index: 1; + display: block; +} +.bs-example-modal .modal-dialog { + left: auto; + margin-right: auto; + margin-left: auto; +} + +/* Example dropdowns */ +.bs-example > .dropdown > .dropdown-toggle { + float: left; +} +.bs-example > .dropdown > .dropdown-menu { + position: static; + display: block; + margin-bottom: 5px; + clear: left; +} + +/* Example tabbable tabs */ +.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 */ +.bs-example-popover { + padding-bottom: 24px; + background-color: #f9f9f9; +} +.bs-example-popover .popover { + position: relative; + display: block; + float: left; + width: 260px; + margin: 20px; +} + +/* Scrollspy demo on fixed height div */ +.scrollspy-example { + position: relative; + height: 200px; + margin-top: 10px; + overflow: auto; +} + +.bs-example > .nav-pills-stacked-example { + max-width: 300px; +} + +/* Simple collapse example */ +#collapseExample .well { + margin-bottom: 0; +} + +/* 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); +} diff --git a/docs/assets/less/featured-sites.less b/docs/assets/less/featured-sites.less new file mode 100644 index 0000000000..926db75a58 --- /dev/null +++ b/docs/assets/less/featured-sites.less @@ -0,0 +1,21 @@ +.bs-docs-featured-sites { + margin-right: -1px; + margin-left: -1px; +} +.bs-docs-featured-sites .col-xs-6 { + padding: 1px; +} +.bs-docs-featured-sites .img-responsive { + margin-top: 0; +} + +@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; + } +} diff --git a/docs/assets/less/featurettes.less b/docs/assets/less/featurettes.less new file mode 100644 index 0000000000..caeb86ffc5 --- /dev/null +++ b/docs/assets/less/featurettes.less @@ -0,0 +1,66 @@ +.bs-docs-featurette { + padding-top: 40px; + padding-bottom: 40px; + 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 { + margin-top: 0; + border-top: 0; +} + +.bs-docs-featurette-title { + margin-bottom: 5px; + font-size: 30px; + font-weight: normal; + color: #333; +} +.half-rule { + width: 100px; + margin: 40px auto; +} +.bs-docs-featurette h3 { + margin-bottom: 5px; + font-weight: normal; + color: #333; +} +.bs-docs-featurette-img { + display: block; + margin-bottom: 20px; + color: #333; +} +.bs-docs-featurette-img:hover { + color: #337ab7; + text-decoration: none; +} +.bs-docs-featurette-img img { + display: block; + margin-bottom: 15px; +} + +@media (min-width: 480px) { + .bs-docs-featurette .img-responsive { + margin-top: 30px; + } +} +@media (min-width: 768px) { + .bs-docs-featurette { + padding-top: 100px; + padding-bottom: 100px; + } + .bs-docs-featurette-title { + font-size: 40px; + } + .bs-docs-featurette .lead { + max-width: 80%; + margin-right: auto; + margin-left: auto; + } + .bs-docs-featurette .img-responsive { + margin-top: 0; + } +} diff --git a/docs/assets/less/footer.less b/docs/assets/less/footer.less new file mode 100644 index 0000000000..8d9e33c1c7 --- /dev/null +++ b/docs/assets/less/footer.less @@ -0,0 +1,30 @@ +.bs-docs-footer { + padding-top: 50px; + padding-bottom: 50px; + margin-top: 100px; + color: #99979c; + text-align: center; + background-color: #2a2730; +} +.bs-docs-footer a { + color: #fff; +} +.bs-docs-footer-links { + padding-left: 0; + margin-bottom: 20px; +} +.bs-docs-footer-links li { + display: inline-block; +} +.bs-docs-footer-links li + li { + margin-left: 15px; +} + +@media (min-width: 768px) { + .bs-docs-footer { + text-align: left; + } + .bs-docs-footer p { + margin-bottom: 0; + } +} diff --git a/docs/assets/less/glyphicons.less b/docs/assets/less/glyphicons.less new file mode 100644 index 0000000000..841e1e244c --- /dev/null +++ b/docs/assets/less/glyphicons.less @@ -0,0 +1,44 @@ +.bs-glyphicons { + margin: 0 -10px 20px; + overflow: hidden; +} +.bs-glyphicons-list { + padding-left: 0; + list-style: none; +} +.bs-glyphicons li { + float: left; + width: 25%; + height: 115px; + padding: 10px; + font-size: 10px; + line-height: 1.4; + text-align: center; + background-color: #f9f9f9; + border: 1px solid #fff; +} +.bs-glyphicons .glyphicon { + margin-top: 5px; + margin-bottom: 10px; + font-size: 24px; +} +.bs-glyphicons .glyphicon-class { + display: block; + text-align: center; + word-wrap: break-word; /* Help out IE10+ with class names */ +} +.bs-glyphicons li:hover { + color: #fff; + background-color: #563d7c; +} + +@media (min-width: 768px) { + .bs-glyphicons { + margin-right: 0; + margin-left: 0; + } + .bs-glyphicons li { + width: 12.5%; + font-size: 12px; + } +} diff --git a/docs/assets/less/ie10-viewport-bug-workaround.less b/docs/assets/less/ie10-viewport-bug-workaround.less new file mode 100644 index 0000000000..4b9518e218 --- /dev/null +++ b/docs/assets/less/ie10-viewport-bug-workaround.less @@ -0,0 +1,13 @@ +/*! + * IE10 viewport hack for Surface/desktop Windows 8 bug + * Copyright 2014-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +/* + * See the Getting Started docs for more information: + * http://getbootstrap.com/getting-started/#support-ie10-width + */ +@-ms-viewport { width: device-width; } +@-o-viewport { width: device-width; } +@viewport { width: device-width; } diff --git a/docs/assets/less/masthead.less b/docs/assets/less/masthead.less new file mode 100644 index 0000000000..b36d170e0d --- /dev/null +++ b/docs/assets/less/masthead.less @@ -0,0 +1,72 @@ +/* + * Homepage + * + * Tweaks to the custom homepage and the masthead (main jumbotron). + */ + +/* Share masthead with page headers */ +.bs-docs-masthead, +.bs-docs-header { + position: relative; + padding: 30px 0; + color: #cdbfe3; + text-align: center; + text-shadow: 0 1px 0 rgba(0,0,0,.1); + background-color: #6f5499; + background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499)); + background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%); + background-image: -o-linear-gradient(top, #563d7c 0%, #6f5499 100%); + background-image: linear-gradient(to bottom, #563d7c 0%, #6f5499 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0); + background-repeat: repeat-x; +} + +/* Masthead (headings and download button) */ +.bs-docs-masthead .bs-docs-booticon { + margin: 0 auto 30px; +} +.bs-docs-masthead h1 { + font-weight: 300; + line-height: 1; + color: #fff; +} +.bs-docs-masthead .lead { + margin: 0 auto 30px; + font-size: 20px; + color: #fff; +} +.bs-docs-masthead .version { + margin-top: -15px; + margin-bottom: 30px; + color: #9783b9; +} +.bs-docs-masthead .btn { + width: 100%; + padding: 15px 30px; + font-size: 20px; +} + +@media (min-width: 480px) { + .bs-docs-masthead .btn { + width: auto; + } +} + +@media (min-width: 768px) { + .bs-docs-masthead { + padding: 80px 0; + } + .bs-docs-masthead h1 { + font-size: 60px; + } + .bs-docs-masthead .lead { + font-size: 24px; + } +} + +@media (min-width: 992px) { + .bs-docs-masthead .lead { + width: 80%; + font-size: 30px; + } +} diff --git a/docs/assets/less/nav.less b/docs/assets/less/nav.less new file mode 100644 index 0000000000..29af534ca5 --- /dev/null +++ b/docs/assets/less/nav.less @@ -0,0 +1,30 @@ +.bs-docs-nav { + margin-bottom: 0; + background-color: #fff; + border-bottom: 0; +} +.bs-home-nav .bs-nav-b { + display: none; +} +.bs-docs-nav .navbar-brand, +.bs-docs-nav .navbar-nav > li > a { + font-weight: 500; + color: #563d7c; +} +.bs-docs-nav .navbar-nav > li > a:hover, +.bs-docs-nav .navbar-nav > .active > a, +.bs-docs-nav .navbar-nav > .active > a:hover { + color: #463265; + background-color: #f9f9f9; +} +.bs-docs-nav .navbar-toggle .icon-bar { + background-color: #563d7c; +} +.bs-docs-nav .navbar-header .navbar-toggle { + border-color: #fff; +} +.bs-docs-nav .navbar-header .navbar-toggle:hover, +.bs-docs-nav .navbar-header .navbar-toggle:focus { + background-color: #f9f9f9; + border-color: #f9f9f9; +} diff --git a/docs/assets/less/page-header.less b/docs/assets/less/page-header.less new file mode 100644 index 0000000000..33900f3342 --- /dev/null +++ b/docs/assets/less/page-header.less @@ -0,0 +1,36 @@ +.bs-docs-header { + margin-bottom: 40px; + font-size: 20px; +} +.bs-docs-header h1 { + margin-top: 0; + color: #fff; +} +.bs-docs-header p { + margin-bottom: 0; + font-weight: 300; + line-height: 1.4; +} +.bs-docs-header .container { + position: relative; +} + +@media (min-width: 768px) { + .bs-docs-header { + padding-top: 60px; + padding-bottom: 60px; + font-size: 24px; + text-align: left; + } + .bs-docs-header h1 { + font-size: 60px; + line-height: 1; + } +} + +@media (min-width: 992px) { + .bs-docs-header h1, + .bs-docs-header p { + margin-right: 380px; + } +} diff --git a/docs/assets/less/responsive-tests.less b/docs/assets/less/responsive-tests.less new file mode 100644 index 0000000000..a5c61a1039 --- /dev/null +++ b/docs/assets/less/responsive-tests.less @@ -0,0 +1,72 @@ +/* + * Responsive tests + * + * Generate a set of tests to show the responsive utilities in action. + */ + +/* Responsive (scrollable) doc tables */ +.table-responsive .highlight pre { + white-space: normal; +} + +/* Utility classes table */ +.bs-table th small, +.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 */ +.responsive-utilities-test { + margin-top: 5px; +} +.responsive-utilities-test .col-xs-6 { + margin-bottom: 10px; +} +.responsive-utilities-test span { + display: block; + padding: 15px 10px; + font-size: 14px; + font-weight: bold; + line-height: 1.1; + text-align: center; + border-radius: 4px; +} +.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 { + 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 { + color: #468847; + background-color: #dff0d8; + border: 1px solid #d6e9c6; +} diff --git a/docs/assets/less/sidebar.less b/docs/assets/less/sidebar.less new file mode 100644 index 0000000000..61d1c36101 --- /dev/null +++ b/docs/assets/less/sidebar.less @@ -0,0 +1,122 @@ +/* By default it's not affixed in mobile views, so undo that */ +.bs-docs-sidebar.affix { + position: static; +} +@media (min-width: 768px) { + .bs-docs-sidebar { + padding-left: 20px; + } +} + +/* First level of nav */ +.bs-docs-sidenav { + margin-top: 20px; + margin-bottom: 20px; +} + +/* All levels of nav */ +.bs-docs-sidebar .nav > li > a { + display: block; + padding: 4px 20px; + font-size: 13px; + font-weight: 500; + color: #767676; +} +.bs-docs-sidebar .nav > li > a:hover, +.bs-docs-sidebar .nav > li > a:focus { + padding-left: 19px; + color: #563d7c; + text-decoration: none; + background-color: transparent; + border-left: 1px solid #563d7c; +} +.bs-docs-sidebar .nav > .active > a, +.bs-docs-sidebar .nav > .active:hover > a, +.bs-docs-sidebar .nav > .active:focus > a { + padding-left: 18px; + font-weight: bold; + color: #563d7c; + background-color: transparent; + border-left: 2px solid #563d7c; +} + +/* Nav: second level (shown on .active) */ +.bs-docs-sidebar .nav .nav { + display: none; /* Hide by default, but at >768px, show it */ + padding-bottom: 10px; +} +.bs-docs-sidebar .nav .nav > li > a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 30px; + font-size: 12px; + font-weight: normal; +} +.bs-docs-sidebar .nav .nav > li > a:hover, +.bs-docs-sidebar .nav .nav > li > a:focus { + 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 { + padding-left: 28px; + font-weight: 500; +} + +/* Back to top (hidden on mobile) */ +.back-to-top, +.bs-docs-theme-toggle { + display: none; + padding: 4px 10px; + margin-top: 10px; + margin-left: 10px; + font-size: 12px; + font-weight: 500; + color: #999; +} +.back-to-top:hover, +.bs-docs-theme-toggle:hover { + color: #563d7c; + text-decoration: none; +} +.bs-docs-theme-toggle { + margin-top: 0; +} + +@media (min-width: 768px) { + .back-to-top, + .bs-docs-theme-toggle { + display: block; + } +} + +/* Show and affix the side nav when space allows it */ +@media (min-width: 992px) { + .bs-docs-sidebar .nav > .active > ul { + display: block; + } + /* Widen the fixed sidebar */ + .bs-docs-sidebar.affix, + .bs-docs-sidebar.affix-bottom { + width: 213px; + } + .bs-docs-sidebar.affix { + position: fixed; /* Undo the static from mobile first approach */ + top: 20px; + } + .bs-docs-sidebar.affix-bottom { + position: absolute; /* Undo the static from mobile first approach */ + } + .bs-docs-sidebar.affix-bottom .bs-docs-sidenav, + .bs-docs-sidebar.affix .bs-docs-sidenav { + margin-top: 0; + margin-bottom: 0; + } +} +@media (min-width: 1200px) { + /* Widen the fixed sidebar again */ + .bs-docs-sidebar.affix-bottom, + .bs-docs-sidebar.affix { + width: 263px; + } +} diff --git a/docs/assets/less/skip-link.less b/docs/assets/less/skip-link.less new file mode 100644 index 0000000000..7085e3f5c6 --- /dev/null +++ b/docs/assets/less/skip-link.less @@ -0,0 +1,23 @@ +/* + * 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; + background-color: #6f5499; + outline: 0; +} + +#skippy .skiplink-text { + padding: .5em; + outline: 1px dotted; +} + +#content:focus { + outline: none; +} diff --git a/docs/assets/less/swatches.less b/docs/assets/less/swatches.less new file mode 100644 index 0000000000..1d23e1e135 --- /dev/null +++ b/docs/assets/less/swatches.less @@ -0,0 +1,64 @@ +.color-swatches { + margin: 0 -5px; + overflow: hidden; /* clearfix */ +} +.color-swatch { + float: left; + width: 60px; + height: 60px; + margin: 0 5px; + border-radius: 3px; +} + +@media (min-width: 768px) { + .color-swatch { + width: 100px; + height: 100px; + } +} + +/* Framework colors */ +.color-swatches .gray-darker { + background-color: #222; +} +.color-swatches .gray-dark { + background-color: #333; +} +.color-swatches .gray { + background-color: #555; +} +.color-swatches .gray-light { + background-color: #999; +} +.color-swatches .gray-lighter { + background-color: #eee; +} +.color-swatches .brand-primary { + background-color: #337ab7; +} +.color-swatches .brand-success { + background-color: #5cb85c; +} +.color-swatches .brand-warning { + background-color: #f0ad4e; +} +.color-swatches .brand-danger { + background-color: #d9534f; +} +.color-swatches .brand-info { + background-color: #5bc0de; +} + +/* Docs colors */ +.color-swatches .bs-purple { + background-color: #563d7c; +} +.color-swatches .bs-purple-light { + background-color: #c7bfd3; +} +.color-swatches .bs-purple-lighter { + background-color: #e5e1ea; +} +.color-swatches .bs-gray { + background-color: #f9f9f9; +} diff --git a/docs/assets/less/syntax.less b/docs/assets/less/syntax.less new file mode 100644 index 0000000000..37ffb104af --- /dev/null +++ b/docs/assets/less/syntax.less @@ -0,0 +1,96 @@ +.hll { background-color: #ffffcc } + /*{ background: #f0f3f3; }*/ +.c { color: #999; } /* Comment */ +.err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.k { color: #006699; } /* Keyword */ +.o { color: #555555 } /* Operator */ +.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */ +.cp { color: #009999 } /* Comment.Preproc */ +.c1 { color: #999; } /* Comment.Single */ +.cs { color: #999; } /* Comment.Special */ +.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.ge { font-style: italic } /* Generic.Emph */ +.gr { color: #FF0000 } /* Generic.Error */ +.gh { color: #003300; } /* Generic.Heading */ +.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.go { color: #AAAAAA } /* Generic.Output */ +.gp { color: #000099; } /* Generic.Prompt */ +.gs { } /* Generic.Strong */ +.gu { color: #003300; } /* Generic.Subheading */ +.gt { color: #99CC66 } /* Generic.Traceback */ +.kc { color: #006699; } /* Keyword.Constant */ +.kd { color: #006699; } /* Keyword.Declaration */ +.kn { color: #006699; } /* Keyword.Namespace */ +.kp { color: #006699 } /* Keyword.Pseudo */ +.kr { color: #006699; } /* Keyword.Reserved */ +.kt { color: #007788; } /* Keyword.Type */ +.m { color: #FF6600 } /* Literal.Number */ +.s { color: #d44950 } /* Literal.String */ +.na { color: #4f9fcf } /* Name.Attribute */ +.nb { color: #336666 } /* Name.Builtin */ +.nc { color: #00AA88; } /* Name.Class */ +.no { color: #336600 } /* Name.Constant */ +.nd { color: #9999FF } /* Name.Decorator */ +.ni { color: #999999; } /* Name.Entity */ +.ne { color: #CC0000; } /* Name.Exception */ +.nf { color: #CC00FF } /* Name.Function */ +.nl { color: #9999FF } /* Name.Label */ +.nn { color: #00CCFF; } /* Name.Namespace */ +.nt { color: #2f6f9f; } /* Name.Tag */ +.nv { color: #003333 } /* Name.Variable */ +.ow { color: #000000; } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #FF6600 } /* Literal.Number.Float */ +.mh { color: #FF6600 } /* Literal.Number.Hex */ +.mi { color: #FF6600 } /* Literal.Number.Integer */ +.mo { color: #FF6600 } /* Literal.Number.Oct */ +.sb { color: #CC3300 } /* Literal.String.Backtick */ +.sc { color: #CC3300 } /* Literal.String.Char */ +.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.s2 { color: #CC3300 } /* Literal.String.Double */ +.se { color: #CC3300; } /* Literal.String.Escape */ +.sh { color: #CC3300 } /* Literal.String.Heredoc */ +.si { color: #AA0000 } /* Literal.String.Interpol */ +.sx { color: #CC3300 } /* Literal.String.Other */ +.sr { color: #33AAAA } /* Literal.String.Regex */ +.s1 { color: #CC3300 } /* Literal.String.Single */ +.ss { color: #FFCC33 } /* Literal.String.Symbol */ +.bp { color: #336666 } /* Name.Builtin.Pseudo */ +.vc { color: #003333 } /* Name.Variable.Class */ +.vg { color: #003333 } /* Name.Variable.Global */ +.vi { color: #003333 } /* Name.Variable.Instance */ +.il { color: #FF6600 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } + + +// +// Docs additions +// + +.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; + word-break: normal; + white-space: nowrap; + background-color: transparent; + border: 0; +} +.highlight pre code { + font-size: inherit; + color: #333; /* Effectively the base text color */ +} +.highlight pre code:first-child { + display: inline-block; + padding-right: 45px; +} diff --git a/docs/assets/less/team.less b/docs/assets/less/team.less new file mode 100644 index 0000000000..f85a5bfe35 --- /dev/null +++ b/docs/assets/less/team.less @@ -0,0 +1,21 @@ +.bs-team .team-member { + line-height: 32px; + color: #555; +} +.bs-team .team-member:hover { + color: #333; + text-decoration: none; +} +.bs-team .github-btn { + float: right; + width: 180px; + height: 20px; + margin-top: 6px; + border: none; +} +.bs-team img { + float: left; + width: 32px; + margin-right: 10px; + border-radius: 4px; +} diff --git a/docs/assets/less/zero-clipboard.less b/docs/assets/less/zero-clipboard.less new file mode 100644 index 0000000000..2a12503936 --- /dev/null +++ b/docs/assets/less/zero-clipboard.less @@ -0,0 +1,33 @@ +.zero-clipboard { + position: relative; + display: none; +} +.btn-clipboard { + position: absolute; + top: 0; + right: 0; + z-index: 10; + display: block; + padding: 5px 8px; + font-size: 12px; + color: #767676; + cursor: pointer; + background-color: #fff; + border: 1px solid #e1e1e8; + border-radius: 0 4px 0 4px; +} +.btn-clipboard-hover { + color: #fff; + background-color: #563d7c; + border-color: #563d7c; +} + +@media (min-width: 768px) { + .zero-clipboard { + display: block; + } + .bs-example + .zero-clipboard .btn-clipboard { + top: -16px; + border-top-right-radius: 0; + } +} -- cgit v1.2.3