mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Docs: Refactor to use .less file instead, importing Bootstrap vars and mixins, and cleaning all the things up
This commit is contained in:
Mark Otto
parent
54537b500e
commit
41d6cad4b6
8 changed files with 276 additions and 408 deletions
21
Gruntfile.js
21
Gruntfile.js
|
|
@ -170,6 +170,14 @@ module.exports = function (grunt) {
|
|||
files: {
|
||||
'dist/css/<%= pkg.name %>-theme.css': 'less/theme.less'
|
||||
}
|
||||
},
|
||||
compileDocs: {
|
||||
options: {
|
||||
strictMath: true
|
||||
},
|
||||
files: {
|
||||
'docs/assets/css/docs.min.css': 'docs/assets/less/docs.less'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -199,7 +207,7 @@ module.exports = function (grunt) {
|
|||
src: 'dist/css/<%= pkg.name %>-theme.css'
|
||||
},
|
||||
docs: {
|
||||
src: 'docs/assets/css/src/docs.css'
|
||||
src: 'docs/assets/css/docs.css'
|
||||
},
|
||||
examples: {
|
||||
expand: true,
|
||||
|
|
@ -225,7 +233,7 @@ module.exports = function (grunt) {
|
|||
ids: false,
|
||||
'overqualified-elements': false
|
||||
},
|
||||
src: 'docs/assets/css/src/docs.css'
|
||||
src: 'docs/assets/css/docs.css'
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -242,10 +250,7 @@ module.exports = function (grunt) {
|
|||
}
|
||||
},
|
||||
docs: {
|
||||
src: [
|
||||
'docs/assets/css/src/docs.css',
|
||||
'docs/assets/css/src/pygments-manni.css'
|
||||
],
|
||||
src: 'docs/assets/css/docs.min.css',
|
||||
dest: 'docs/assets/css/docs.min.css'
|
||||
}
|
||||
},
|
||||
|
|
@ -355,6 +360,10 @@ module.exports = function (grunt) {
|
|||
less: {
|
||||
files: 'less/*.less',
|
||||
tasks: 'less'
|
||||
},
|
||||
docs: {
|
||||
files: 'docs/assets/less/*.less',
|
||||
tasks: 'less'
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -29,12 +29,7 @@
|
|||
{% endif %}
|
||||
|
||||
<!-- Documentation extras -->
|
||||
{% if site.github %}
|
||||
<link href="../assets/css/docs.min.css" rel="stylesheet">
|
||||
{% else %}
|
||||
<link href="../assets/css/src/docs.css" rel="stylesheet">
|
||||
<link href="../assets/css/src/pygments-manni.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@
|
|||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="../" class="navbar-brand">
|
||||
<span class="visible-xs">Bootstrap</span>
|
||||
<span class="bs-docs-booticon bs-docs-booticon-md hidden-xs">B</span>
|
||||
Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
<nav class="collapse navbar-collapse bs-sidenav-collapse" role="navigation">
|
||||
|
|
|
|||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,66 +0,0 @@
|
|||
.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; }
|
||||
|
|
@ -5,30 +5,31 @@
|
|||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
// Import Bootstrap variables and mixins
|
||||
@import "../../../less/variables.less";
|
||||
@import "../../../less/mixins.less";
|
||||
|
||||
/*
|
||||
* Bootstrap Documentation
|
||||
* Special styles for presenting Bootstrap's documentation and code examples.
|
||||
*/
|
||||
// Import the syntax highlighting
|
||||
@import "syntax.less";
|
||||
|
||||
// Local docs variables
|
||||
@bs-purple: #563d7c;
|
||||
@bs-purple-light: #cdbfe3;
|
||||
|
||||
|
||||
/*
|
||||
* Scaffolding
|
||||
*
|
||||
* Update the basics of our documents to prep for docs content.
|
||||
*/
|
||||
// Scaffolding
|
||||
//
|
||||
// Update the basics of our documents to prep for docs content.
|
||||
|
||||
body {
|
||||
position: relative; /* For scrollspy */
|
||||
position: relative; // For scrollspy?
|
||||
}
|
||||
|
||||
/* Keep code small in tables on account of limited space */
|
||||
.table code {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Outline button for use within the docs */
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
|
||||
.btn-outline {
|
||||
color: #563d7c;
|
||||
background-color: transparent;
|
||||
|
|
@ -42,7 +43,6 @@ body {
|
|||
border-color: #563d7c;
|
||||
}
|
||||
|
||||
/* Inverted outline button (white on dark) */
|
||||
.btn-outline-inverse {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
|
|
@ -57,50 +57,38 @@ body {
|
|||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Bootstrap "B" icon */
|
||||
|
||||
//
|
||||
// Bootstrap "B" icon
|
||||
//
|
||||
|
||||
.bs-docs-booticon {
|
||||
display: block;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
font-size: 108px;
|
||||
font-weight: 500;
|
||||
line-height: 140px;
|
||||
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-md {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.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;
|
||||
|
||||
&.inverse {
|
||||
color: #563d7c;
|
||||
background-color: #fff;
|
||||
}
|
||||
&.outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid #cdbfe3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Main navigation
|
||||
*
|
||||
* Turn the `.navbar` at the top of the docs purple.
|
||||
*/
|
||||
|
||||
//
|
||||
// Main navigation
|
||||
//
|
||||
|
||||
.bs-docs-nav {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -137,11 +125,9 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*
|
||||
* Separated section of content at the bottom of all pages, save the homepage.
|
||||
*/
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
.bs-docs-footer {
|
||||
margin-top: 100px;
|
||||
|
|
@ -172,11 +158,9 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Social buttons
|
||||
*
|
||||
* Twitter and GitHub social action buttons (for homepage and footer).
|
||||
*/
|
||||
//
|
||||
// Social buttons
|
||||
//
|
||||
|
||||
.bs-docs-social {
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -199,7 +183,8 @@ body {
|
|||
.bs-docs-social-buttons .twitter-share-button {
|
||||
width: 98px !important;
|
||||
}
|
||||
/* Style the GitHub buttons via CSS instead of inline attributes */
|
||||
|
||||
// Style the GitHub buttons via CSS instead of inline attributes
|
||||
.github-btn {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
|
|
@ -213,13 +198,11 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Homepage
|
||||
*
|
||||
* Tweaks to the custom homepage and the masthead (main jumbotron).
|
||||
*/
|
||||
//
|
||||
// Homepage
|
||||
//
|
||||
|
||||
/* Masthead (headings and download button) */
|
||||
// Masthead (headings and download button)
|
||||
.bs-docs-masthead {
|
||||
position: relative;
|
||||
padding: 30px 15px;
|
||||
|
|
@ -227,12 +210,7 @@ body {
|
|||
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;
|
||||
#gradient > .vertical(@bs-purple, #6f5499);
|
||||
}
|
||||
|
||||
.bs-docs-masthead .bs-docs-booticon {
|
||||
|
|
@ -285,13 +263,10 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Page headers
|
||||
*
|
||||
* Jumbotron-esque headers at the top of every page that's not the homepage.
|
||||
*/
|
||||
//
|
||||
// Page headers
|
||||
//
|
||||
|
||||
/* Page headers */
|
||||
.bs-docs-header {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
|
@ -336,12 +311,9 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
//
|
||||
// Carbon ads
|
||||
//
|
||||
|
||||
.carbonad {
|
||||
width: auto !important;
|
||||
|
|
@ -351,6 +323,7 @@ body {
|
|||
overflow: hidden; /* clearfix */
|
||||
font-size: 13px !important;
|
||||
line-height: 16px !important;
|
||||
color: @bs-purple-light !important;
|
||||
text-align: left;
|
||||
background: transparent !important;
|
||||
border: solid #866ab3 !important;
|
||||
|
|
@ -380,19 +353,19 @@ body {
|
|||
color: #fff !important;
|
||||
}
|
||||
.carbonad #azcarbon > img {
|
||||
display: none; /* hide what I assume are tracking images */
|
||||
display: none; // hide what I assume are tracking images
|
||||
}
|
||||
|
||||
/* In the lighter page headers */
|
||||
.bs-docs-header .carbonad {
|
||||
color: #777;
|
||||
background-color: #fff !important;
|
||||
border-color: #eee !important;
|
||||
}
|
||||
.bs-docs-header .carbonad-text a,
|
||||
.bs-docs-header .carbonad-tag a {
|
||||
color: #563d7c !important;
|
||||
}
|
||||
// In the lighter page headers
|
||||
// .bs-docs-header .carbonad {
|
||||
// color: #777;
|
||||
// background-color: #fff !important;
|
||||
// border-color: #eee !important;
|
||||
// }
|
||||
// .bs-docs-header .carbonad-text a,
|
||||
// .bs-docs-header .carbonad-tag a {
|
||||
// color: #563d7c !important;
|
||||
// }
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.carbonad {
|
||||
|
|
@ -417,7 +390,7 @@ body {
|
|||
.carbonad {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 60px; /* 15px instead of 0 since box-sizing */
|
||||
right: 60px; // 15px instead of 0 since box-sizing
|
||||
width: 330px !important;
|
||||
padding: 15px !important;
|
||||
margin: 0 !important;
|
||||
|
|
@ -428,11 +401,9 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Homepage featurettes
|
||||
*
|
||||
* Reasons to use Bootstrap, entries from the Expo, and more.
|
||||
*/
|
||||
//
|
||||
// Homepage featurettes
|
||||
//
|
||||
|
||||
.bs-docs-featurette {
|
||||
padding-top: 40px;
|
||||
|
|
@ -502,11 +473,9 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Featured sites
|
||||
*
|
||||
* Homepage thumbnails from the Expo.
|
||||
*/
|
||||
//
|
||||
// Featured Expo sites
|
||||
//
|
||||
|
||||
.bs-docs-featured-sites {
|
||||
margin-right: -1px;
|
||||
|
|
@ -531,11 +500,9 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Examples
|
||||
*
|
||||
* Linked docs examples.
|
||||
*/
|
||||
//
|
||||
// Examples
|
||||
//
|
||||
|
||||
.bs-examples .thumbnail {
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -559,12 +526,9 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Side navigation
|
||||
*
|
||||
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
|
||||
* sections of docs content.
|
||||
*/
|
||||
//
|
||||
// Side navigation
|
||||
//
|
||||
|
||||
.bs-docs-container {
|
||||
position: relative;
|
||||
|
|
@ -621,12 +585,7 @@ body {
|
|||
width: 240px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#29262f), to(#322f38));
|
||||
background-image: -webkit-linear-gradient(top, #29262f 0%, #322f38 100%);
|
||||
background-image: -o-linear-gradient(top, #29262f 0%, #322f38 100%);
|
||||
background-image: linear-gradient(to bottom, #29262f 0%, #322f38 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#29262f', endColorstr='#322f38', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
#gradient > .vertical(#29262f, #322f38);
|
||||
}
|
||||
.bs-docs-sidebar .navbar-brand {
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -643,6 +602,7 @@ body {
|
|||
font-weight: 500;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
.bs-docs-sidebar-brand:hover,
|
||||
.bs-docs-sidebar-brand:focus {
|
||||
|
|
@ -688,7 +648,7 @@ body {
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* All levels of nav */
|
||||
// All levels of nav
|
||||
.bs-docs-sidebar .nav > li > a {
|
||||
display: block;
|
||||
padding: 4px 20px;
|
||||
|
|
@ -709,9 +669,9 @@ body {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Nav: second level (shown on .active) */
|
||||
// Nav: second level (shown on .active)
|
||||
.bs-docs-sidebar .nav .nav {
|
||||
display: none; /* Hide by default, but at >768px, show it */
|
||||
display: none; // Hide by default, but at >768px, show it
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.bs-docs-sidebar .nav .nav > li > a {
|
||||
|
|
@ -727,16 +687,6 @@ body {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Back to top (hidden on mobile) */
|
||||
.back-to-top,
|
||||
.bs-docs-theme-toggle {
|
||||
display: none;
|
||||
}
|
||||
.back-to-top:hover,
|
||||
.bs-docs-theme-toggle:hover {
|
||||
color: #563d7c;
|
||||
text-decoration: none;
|
||||
}
|
||||
.bs-docs-sidebar .nav > .active > .nav {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -748,13 +698,11 @@ body {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Docs sections
|
||||
*
|
||||
* Content blocks for each component or feature.
|
||||
*/
|
||||
//
|
||||
// Docs sections
|
||||
//
|
||||
|
||||
/* Space things out */
|
||||
// Space things out
|
||||
.bs-docs-section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
|
@ -768,14 +716,10 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Callouts
|
||||
*
|
||||
* Not quite alerts, but custom and helpful notes for folks reading the docs.
|
||||
* Requires a base and modifier class.
|
||||
*/
|
||||
//
|
||||
// Callouts
|
||||
//
|
||||
|
||||
/* Common styles for all types */
|
||||
.bs-callout {
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
|
|
@ -794,12 +738,11 @@ h1[id] {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Tighten up space between multiple callouts */
|
||||
.bs-callout + .bs-callout {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
// Variations
|
||||
.bs-callout-danger {
|
||||
border-left-color: #d9534f;
|
||||
}
|
||||
|
|
@ -820,15 +763,13 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Color swatches
|
||||
*
|
||||
* Color swatches and associated values for our grayscale and brand colors.
|
||||
*/
|
||||
//
|
||||
// Color swatches
|
||||
//
|
||||
|
||||
.color-swatches {
|
||||
margin: 0 -5px;
|
||||
overflow: hidden; /* clearfix */
|
||||
overflow: hidden; // clearfix
|
||||
}
|
||||
.color-swatch {
|
||||
float: left;
|
||||
|
|
@ -845,44 +786,44 @@ h1[id] {
|
|||
}
|
||||
}
|
||||
|
||||
/* Framework colors */
|
||||
// Framework colors
|
||||
.color-swatches .gray-darker {
|
||||
background-color: #222;
|
||||
background-color: @gray-darker;
|
||||
}
|
||||
.color-swatches .gray-dark {
|
||||
background-color: #333;
|
||||
background-color: @gray-dark;
|
||||
}
|
||||
.color-swatches .gray {
|
||||
background-color: #555;
|
||||
background-color: @gray;
|
||||
}
|
||||
.color-swatches .gray-light {
|
||||
background-color: #999;
|
||||
background-color: @gray-light;
|
||||
}
|
||||
.color-swatches .gray-lighter {
|
||||
background-color: #eee;
|
||||
background-color: @gray-lighter;
|
||||
}
|
||||
.color-swatches .brand-primary {
|
||||
background-color: #428bca;
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
.color-swatches .brand-success {
|
||||
background-color: #5cb85c;
|
||||
background-color: @brand-success;
|
||||
}
|
||||
.color-swatches .brand-warning {
|
||||
background-color: #f0ad4e;
|
||||
background-color: @brand-warning;
|
||||
}
|
||||
.color-swatches .brand-danger {
|
||||
background-color: #d9534f;
|
||||
background-color: @brand-danger;
|
||||
}
|
||||
.color-swatches .brand-info {
|
||||
background-color: #5bc0de;
|
||||
background-color: @brand-info;
|
||||
}
|
||||
|
||||
/* Docs colors */
|
||||
// Docs colors
|
||||
.color-swatches .bs-purple {
|
||||
background-color: #563d7c;
|
||||
background-color: @bs-purple;
|
||||
}
|
||||
.color-swatches .bs-purple-light {
|
||||
background-color: #c7bfd3;
|
||||
background-color: @bs-purple-light;
|
||||
}
|
||||
.color-swatches .bs-purple-lighter {
|
||||
background-color: #e5e1ea;
|
||||
|
|
@ -892,11 +833,9 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Team members
|
||||
*
|
||||
* Avatars, names, and usernames for core team.
|
||||
*/
|
||||
//
|
||||
// Team members
|
||||
//
|
||||
|
||||
.bs-team .team-member {
|
||||
line-height: 32px;
|
||||
|
|
@ -920,12 +859,9 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Grid examples
|
||||
*
|
||||
* Highlight the grid columns within the docs so folks can see their padding,
|
||||
* alignment, sizing, etc.
|
||||
*/
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.show-grid {
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -940,12 +876,9 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Examples
|
||||
*
|
||||
* Isolated sections of example content for each component or feature. Usually
|
||||
* followed by a code snippet.
|
||||
*/
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
|
||||
.bs-example {
|
||||
position: relative;
|
||||
|
|
@ -955,7 +888,7 @@ h1[id] {
|
|||
border: solid #f7f7f9;
|
||||
border-width: .2rem 0 0;
|
||||
}
|
||||
/* Echo out a label for the example */
|
||||
// Echo out a label for the example
|
||||
.bs-example:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -977,12 +910,12 @@ h1[id] {
|
|||
}
|
||||
}
|
||||
|
||||
/* Undo width of container */
|
||||
// Undo width of container
|
||||
.bs-example .container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Tweak content of examples for optimum awesome */
|
||||
// Tweak content of examples for optimum awesome
|
||||
.bs-example > p:last-child,
|
||||
.bs-example > ul:last-child,
|
||||
.bs-example > ol:last-child,
|
||||
|
|
@ -1003,7 +936,7 @@ h1[id] {
|
|||
float: none;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
// Typography
|
||||
.bs-example-type .table .type-info {
|
||||
color: #999;
|
||||
vertical-align: middle;
|
||||
|
|
@ -1024,24 +957,24 @@ h1[id] {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* Contextual background colors */
|
||||
// Contextual background colors
|
||||
.bs-example-bg-classes p {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
// Images
|
||||
.bs-example > .img-circle,
|
||||
.bs-example > .img-rounded,
|
||||
.bs-example > .img-thumbnail {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.bs-example > .table-responsive > .table {
|
||||
background-color: #fff;
|
||||
}
|
||||
// Tables
|
||||
// .bs-example > .table-responsive > .table {
|
||||
// background-color: #fff;
|
||||
// }
|
||||
|
||||
/* Buttons */
|
||||
// Buttons
|
||||
.bs-example > .btn,
|
||||
.bs-example > .btn-group {
|
||||
margin-top: 5px;
|
||||
|
|
@ -1051,7 +984,7 @@ h1[id] {
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
// Forms
|
||||
.bs-example-control-sizing select,
|
||||
.bs-example-control-sizing input[type="text"] + input[type="text"] {
|
||||
margin-top: 10px;
|
||||
|
|
@ -1063,12 +996,12 @@ h1[id] {
|
|||
resize: vertical;
|
||||
}
|
||||
|
||||
/* List groups */
|
||||
// List groups
|
||||
.bs-example > .list-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* Navbars */
|
||||
// Navbars
|
||||
.bs-example .navbar:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -1076,7 +1009,7 @@ h1[id] {
|
|||
.bs-navbar-bottom-example {
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
overflow: hidden; /* cut the drop shadows off */
|
||||
overflow: hidden; // cut the drop shadows off
|
||||
}
|
||||
.bs-navbar-top-example .navbar-header,
|
||||
.bs-navbar-bottom-example .navbar-header {
|
||||
|
|
@ -1114,18 +1047,18 @@ h1[id] {
|
|||
}
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
// Pagination
|
||||
.bs-example .pagination {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Pager */
|
||||
// Pager
|
||||
.bs-example > .pager {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Example modals */
|
||||
// Example modals
|
||||
.bs-example-modal {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
|
@ -1144,7 +1077,7 @@ h1[id] {
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Example dropdowns */
|
||||
// Example dropdowns
|
||||
.bs-example > .dropdown > .dropdown-toggle {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -1155,12 +1088,12 @@ h1[id] {
|
|||
clear: left;
|
||||
}
|
||||
|
||||
/* Example tabbable tabs */
|
||||
// Example tabbable tabs
|
||||
.bs-example-tabs .nav-tabs {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
// Tooltips
|
||||
.bs-example-tooltips {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1169,7 +1102,7 @@ h1[id] {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Popovers */
|
||||
// Popovers
|
||||
.bs-example-popover {
|
||||
padding-bottom: 24px;
|
||||
background-color: #f9f9f9;
|
||||
|
|
@ -1182,7 +1115,7 @@ h1[id] {
|
|||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Scrollspy demo on fixed height div */
|
||||
// Scrollspy demo on fixed height div
|
||||
.scrollspy-example {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
|
|
@ -1191,11 +1124,9 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Code snippets
|
||||
*
|
||||
* Generated via Pygments and Jekyll, these are snippets of HTML, CSS, and JS.
|
||||
*/
|
||||
//
|
||||
// Code snippets
|
||||
//
|
||||
|
||||
.highlight {
|
||||
padding: 1.5rem;
|
||||
|
|
@ -1212,22 +1143,20 @@ h1[id] {
|
|||
}
|
||||
.highlight pre code {
|
||||
font-size: inherit;
|
||||
color: #333; /* Effectively the base text color */
|
||||
color: @gray-dark; // Effectively the base text color
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Responsive tests
|
||||
*
|
||||
* Generate a set of tests to show the responsive utilities in action.
|
||||
*/
|
||||
//
|
||||
// Responsive tests
|
||||
//
|
||||
|
||||
/* Responsive (scrollable) doc tables */
|
||||
// Responsive (scrollable) doc tables
|
||||
.table-responsive .highlight pre {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Utility classes table */
|
||||
// Utility classes table
|
||||
.bs-table th small,
|
||||
.responsive-utilities th small {
|
||||
display: block;
|
||||
|
|
@ -1249,7 +1178,7 @@ h1[id] {
|
|||
background-color: #f9f9f9 !important;
|
||||
}
|
||||
|
||||
/* Responsive tests */
|
||||
// Responsive tests
|
||||
.responsive-utilities-test {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
@ -1290,72 +1219,16 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Glyphicons
|
||||
*
|
||||
* Special styles for displaying the icons and their classes in the docs.
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Customizer
|
||||
*
|
||||
* Since this is so form control heavy, we have quite a few styles to customize
|
||||
* the display of inputs, headings, and more. Also included are all the download
|
||||
* buttons and actions.
|
||||
*/
|
||||
//
|
||||
// Customizer
|
||||
//
|
||||
|
||||
.bs-customizer .toggle {
|
||||
float: right;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
/* Headings and form contrls */
|
||||
// Headings and form controls
|
||||
.bs-customizer label {
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -1374,7 +1247,7 @@ h1[id] {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
.bs-customizer .bs-callout h4 {
|
||||
margin-top: 0; /* lame, but due to specificity we have to duplicate */
|
||||
margin-top: 0; // lame, but due to specificity we have to duplicate
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bs-customizer input[type="text"] {
|
||||
|
|
@ -1386,7 +1259,7 @@ h1[id] {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* For the variables, use regular weight */
|
||||
// For the variables, use regular weight
|
||||
#less-section label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -1398,12 +1271,12 @@ h1[id] {
|
|||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/* Downloads */
|
||||
// Downloads
|
||||
.bs-customize-download .btn-outline {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Error handling */
|
||||
// Error handling
|
||||
.bs-customizer-alert {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -1437,13 +1310,11 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Brand guidelines
|
||||
*
|
||||
* Extra styles for displaying wordmarks, logos, etc.
|
||||
*/
|
||||
//
|
||||
// Brand guidelines
|
||||
//
|
||||
|
||||
/* Logo series wrapper */
|
||||
// Logo series wrapper
|
||||
.bs-brand-logos {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
|
@ -1454,7 +1325,7 @@ h1[id] {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Individual items */
|
||||
// Individual items
|
||||
.bs-brand-item {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
|
|
@ -1471,7 +1342,7 @@ h1[id] {
|
|||
height: 144px;
|
||||
}
|
||||
|
||||
/* Heading content within */
|
||||
// Heading content within
|
||||
.bs-brand-item h1,
|
||||
.bs-brand-item h3 {
|
||||
margin-top: 0;
|
||||
|
|
@ -1482,21 +1353,21 @@ h1[id] {
|
|||
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;
|
||||
}
|
||||
// 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 {
|
||||
|
|
@ -1513,9 +1384,9 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* ZeroClipboard styles
|
||||
*/
|
||||
//
|
||||
// ZeroClipboard styles
|
||||
//
|
||||
|
||||
.zero-clipboard {
|
||||
position: relative;
|
||||
|
|
@ -1547,18 +1418,14 @@ h1[id] {
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
* Miscellaneous
|
||||
*
|
||||
* Odds and ends for optimum docs display.
|
||||
*/
|
||||
//
|
||||
// Miscellaneous
|
||||
//
|
||||
|
||||
/* Pseudo :focus state for showing how it looks in the docs */
|
||||
// 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);
|
||||
border-color: @input-border-focus;
|
||||
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);
|
||||
outline: thin dotted \9; // IE9
|
||||
box-shadow: 0 0 8px @input-box-shadow-focus;
|
||||
}
|
||||
64
docs/assets/less/syntax.less
Normal file
64
docs/assets/less/syntax.less
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.hll { background-color: #ffffcc }
|
||||
.c { color: #999; }
|
||||
.err { color: #AA0000; background-color: #FFAAAA }
|
||||
.k { color: #006699; }
|
||||
.o { color: #555555 }
|
||||
.cm { color: #999; }
|
||||
.cp { color: #009999 }
|
||||
.c1 { color: #999; }
|
||||
.cs { color: #999; }
|
||||
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 }
|
||||
.ge { font-style: italic }
|
||||
.gr { color: #FF0000 }
|
||||
.gh { color: #003300; }
|
||||
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 }
|
||||
.go { color: #AAAAAA }
|
||||
.gp { color: #000099; }
|
||||
.gu { color: #003300; }
|
||||
.gt { color: #99CC66 }
|
||||
.kc { color: #006699; }
|
||||
.kd { color: #006699; }
|
||||
.kn { color: #006699; }
|
||||
.kp { color: #006699 }
|
||||
.kr { color: #006699; }
|
||||
.kt { color: #007788; }
|
||||
.m { color: #FF6600 }
|
||||
.s { color: #d44950 }
|
||||
.na { color: #4f9fcf }
|
||||
.nb { color: #336666 }
|
||||
.nc { color: #00AA88; }
|
||||
.no { color: #336600 }
|
||||
.nd { color: #9999FF }
|
||||
.ni { color: #999999; }
|
||||
.ne { color: #CC0000; }
|
||||
.nf { color: #CC00FF }
|
||||
.nl { color: #9999FF }
|
||||
.nn { color: #00CCFF; }
|
||||
.nt { color: #2f6f9f; }
|
||||
.nv { color: #003333 }
|
||||
.ow { color: #000000; }
|
||||
.w { color: #bbbbbb }
|
||||
.mf { color: #FF6600 }
|
||||
.mh { color: #FF6600 }
|
||||
.mi { color: #FF6600 }
|
||||
.mo { color: #FF6600 }
|
||||
.sb { color: #CC3300 }
|
||||
.sc { color: #CC3300 }
|
||||
.sd { color: #CC3300; font-style: italic }
|
||||
.s2 { color: #CC3300 }
|
||||
.se { color: #CC3300; }
|
||||
.sh { color: #CC3300 }
|
||||
.si { color: #AA0000 }
|
||||
.sx { color: #CC3300 }
|
||||
.sr { color: #33AAAA }
|
||||
.s1 { color: #CC3300 }
|
||||
.ss { color: #FFCC33 }
|
||||
.bp { color: #336666 }
|
||||
.vc { color: #003333 }
|
||||
.vg { color: #003333 }
|
||||
.vi { color: #003333 }
|
||||
.il { color: #FF6600 }
|
||||
|
||||
.css .o,
|
||||
.css .o + .nt,
|
||||
.css .nt + .nt { color: #999; }
|
||||
|
|
@ -5,7 +5,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
|
|||
|
||||
<main class="bs-docs-masthead" id="content" role="main">
|
||||
<div class="container">
|
||||
<span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
|
||||
<span class="bs-docs-booticon outline">B</span>
|
||||
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
|
||||
<p class="lead">
|
||||
<a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
|
||||
|
|
|
|||
Loading…
Reference in a new issue