From 1802cedbc11d9468705e9289297616f785e33a8d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 31 Jan 2014 13:12:31 -0800 Subject: [PATCH] Use scss option instead of css for better highlighting --- docs/assets/css/docs.min.css | 2 +- docs/assets/css/pygments-manni.css | 2 +- docs/components.html | 4 +- docs/css.html | 76 +++++++++++++++--------------- docs/getting-started.html | 8 ++-- 5 files changed, 46 insertions(+), 46 deletions(-) diff --git a/docs/assets/css/docs.min.css b/docs/assets/css/docs.min.css index e4c99cbbc5..10cc5385cd 100644 --- a/docs/assets/css/docs.min.css +++ b/docs/assets/css/docs.min.css @@ -3,4 +3,4 @@ * Copyright 2011-2014 Twitter, Inc. * Licensed under the Creative Commons Attribution 3.0 Unported License. For * details, see http://creativecommons.org/licenses/by/3.0/. - */body{position:relative}.table code{font-size:13px;font-weight:400}.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}.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}.bs-booticon{display:block;font-weight:500;color:#fff;background-color:#563d7c;border-radius:15%;cursor:default;text-align:center}.bs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}.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{color:#563d7c;font-weight:500}.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}.bs-footer{padding-top:40px;padding-bottom:40px;margin-top:100px;color:#777;text-align:center;border-top:1px solid #e5e5e5}.footer-links{margin-top:20px;padding-left:0;color:#999}.footer-links li{display:inline;padding:0 2px}.footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-footer p{margin-bottom:0}}.bs-social{margin-bottom:20px;text-align:center}.bs-social-buttons{display:inline-block;margin-bottom:0;padding-left:0;list-style:none}.bs-social-buttons li{display:inline-block;line-height:1;padding:5px 8px}.bs-social-buttons .twitter-follow-button{width:225px!important}.bs-social-buttons .twitter-share-button{width:98px!important}.github-btn{border:0;overflow:hidden}.bs-masthead,.bs-header{position:relative;padding:30px 15px;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0)}.bs-masthead .bs-booticon{margin:0 auto 30px}.bs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-masthead .btn{width:auto}}@media (min-width:768px){.bs-masthead{padding-top:80px;padding-bottom:80px}.bs-masthead h1{font-size:60px}.bs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-masthead .lead{width:80%;font-size:30px}}.bs-header{margin-bottom:40px;font-size:20px}.bs-header h1{margin-top:0;color:#fff}.bs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-header .container{position:relative}@media (min-width:768px){.bs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-header h1,.bs-header p{margin-right:380px}}.carbonad{width:auto!important;margin:30px -30px -31px!important;padding:20px!important;overflow:hidden;height:auto!important;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{float:none!important;display:block!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}@media (min-width:480px){.carbonad{width:330px!important;margin:20px auto!important;border-radius:4px;border-width:1px!important}.bs-masthead .carbonad{margin:50px auto 0!important}}@media (min-width:768px){.carbonad{margin-left:0!important;margin-right:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:0;right:15px;margin:0!important;padding:15px!important;width:330px!important}.bs-masthead .carbonad{position:static}}.bs-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-featurette+.bs-footer{margin-top:0;border-top:0}.bs-featurette-title{font-size:30px;font-weight:400;color:#333;margin-bottom:5px}.half-rule{width:100px;margin:40px auto}.bs-featurette h3{font-weight:400;color:#333;margin-bottom:5px}.bs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-featurette-img:hover{text-decoration:none;color:#428bca}.bs-featurette-img img{display:block;margin-bottom:15px}.bs-featured-sites{margin-left:-1px;margin-right:-1px}.bs-featured-sites .col-sm-3{padding-left:1px;padding-right:1px}@media (min-width:480px){.bs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-featurette{padding-top:100px;padding-bottom:100px}.bs-featurette-title{font-size:40px}.bs-featurette .lead{margin-left:auto;margin-right:auto;max-width:80%}.bs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}.bs-featurette .img-responsive{margin-top:0}}.bs-sidebar.affix{position:static}@media (min-width:768px){.bs-sidebar{padding-left:20px}}.bs-sidenav{margin-top:20px;margin-bottom:20px}.bs-sidebar .nav>li>a{display:block;font-size:13px;font-weight:500;color:#999;padding:4px 20px}.bs-sidebar .nav>li>a:hover,.bs-sidebar .nav>li>a:focus{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-sidebar .nav>.active>a,.bs-sidebar .nav>.active:hover>a,.bs-sidebar .nav>.active:focus>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-sidebar .nav .nav>li>a{padding-top:2px;padding-bottom:2px;padding-left:30px;font-size:12px;font-weight:400}.bs-sidebar .nav .nav>li>a:hover,.bs-sidebar .nav .nav>li>a:focus{padding-left:29px}.bs-sidebar .nav .nav>.active>a,.bs-sidebar .nav .nav>.active:hover>a,.bs-sidebar .nav .nav>.active:focus>a{font-weight:500;padding-left:28px}@media (min-width:992px){.bs-sidebar .nav>.active>ul{display:block}.bs-sidebar.affix,.bs-sidebar.affix-bottom{width:213px}.bs-sidebar.affix{position:fixed;top:20px}.bs-sidebar.affix-bottom{position:absolute}.bs-sidebar.affix-bottom .bs-sidenav,.bs-sidebar.affix .bs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-sidebar.affix-bottom,.bs-sidebar.affix{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{margin-top:0;padding-top:20px}.bs-callout{margin:20px 0;padding:20px;border-left:3px solid #eee}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{background-color:#fff;border-radius:3px}.bs-callout-danger{background-color:#fdf7f7;border-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{background-color:#fcf8f2;border-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{background-color:#f4f8fa;border-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.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:#428bca}.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}.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}.bs-team .team-member{color:#555;line-height:32px}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;margin-top:6px;width:180px;height:20px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.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)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;background-color:#fafafa;box-shadow:inset 0 3px 6px rgba(0,0,0,.05);border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0}.bs-example:after{content:"Example";position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:1px}.bs-example+.highlight{margin:-15px -15px 15px;border-radius:0;border-width:0 0 1px}@media (min-width:768px){.bs-example{margin-left:0;margin-right:0;background-color:#fff;border-width:1px;border-color:#ddd;border-radius:4px 4px 0 0;box-shadow:none}.bs-example+.highlight{margin-top:-16px;margin-left:0;margin-right:0;border-width:1px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}}.bs-example .container{width:auto}.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}.bs-example-type .table .type-info{color:#999;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}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.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}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.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-left:0;margin-right: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}.bs-navbar-top-example{border-radius:0 0 4px 4px}.bs-navbar-bottom-example{border-radius:4px 4px 0 0}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-left:auto;margin-right:auto}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.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;background-color:transparent;border:0;white-space:nowrap}.highlight pre code{font-size:inherit;color:#333}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;text-align:right;color:#bebec5}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.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-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:700;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,.visible-on .col-xs-6 .visible-sm,.visible-on .col-xs-6 .visible-md,.visible-on .col-xs-6 .visible-lg,.hidden-on .col-xs-6 .visible-xs,.hidden-on .col-xs-6 .visible-sm,.hidden-on .col-xs-6 .visible-md,.hidden-on .col-xs-6 .visible-lg{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -19px 20px -16px;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;border:1px solid #fff;background-color:#f9f9f9}.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}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-left:0;margin-right:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{margin-top:0;margin-bottom:5px;padding-top:30px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{font-size:12px;margin-bottom:5px}#less-section label{font-weight:400}.bs-customizer-input{float:left;width:33.333333%;padding-left:15px;padding-right:15px}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:51px;left:0;right:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);border-bottom:1px solid #b94441}.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;box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.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}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-booticon{margin-left:auto;margin-right:auto}.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}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted \9;-moz-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#09F;font-style:italic}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999} \ No newline at end of file + */body{position:relative}.table code{font-size:13px;font-weight:400}.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}.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}.bs-booticon{display:block;font-weight:500;color:#fff;background-color:#563d7c;border-radius:15%;cursor:default;text-align:center}.bs-booticon-sm{width:30px;height:30px;font-size:20px;line-height:28px}.bs-booticon-lg{width:144px;height:144px;font-size:108px;line-height:140px}.bs-booticon-inverse{color:#563d7c;background-color:#fff}.bs-booticon-outline{background-color:transparent;border:1px solid #cdbfe3}.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{color:#563d7c;font-weight:500}.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}.bs-footer{padding-top:40px;padding-bottom:40px;margin-top:100px;color:#777;text-align:center;border-top:1px solid #e5e5e5}.footer-links{margin-top:20px;padding-left:0;color:#999}.footer-links li{display:inline;padding:0 2px}.footer-links li:first-child{padding-left:0}@media (min-width:768px){.bs-footer p{margin-bottom:0}}.bs-social{margin-bottom:20px;text-align:center}.bs-social-buttons{display:inline-block;margin-bottom:0;padding-left:0;list-style:none}.bs-social-buttons li{display:inline-block;line-height:1;padding:5px 8px}.bs-social-buttons .twitter-follow-button{width:225px!important}.bs-social-buttons .twitter-share-button{width:98px!important}.github-btn{border:0;overflow:hidden}.bs-masthead,.bs-header{position:relative;padding:30px 15px;color:#cdbfe3;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.1);background-color:#6f5499;background-image:-webkit-linear-gradient(top,#563d7c 0,#6f5499 100%);background-image:linear-gradient(to bottom,#563d7c 0,#6f5499 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0)}.bs-masthead .bs-booticon{margin:0 auto 30px}.bs-masthead h1{font-weight:300;line-height:1;color:#fff}.bs-masthead .lead{margin:0 auto 30px;font-size:20px;color:#fff}.bs-masthead .btn{width:100%;padding:15px 30px;font-size:20px}@media (min-width:480px){.bs-masthead .btn{width:auto}}@media (min-width:768px){.bs-masthead{padding-top:80px;padding-bottom:80px}.bs-masthead h1{font-size:60px}.bs-masthead .lead{font-size:24px}}@media (min-width:992px){.bs-masthead .lead{width:80%;font-size:30px}}.bs-header{margin-bottom:40px;font-size:20px}.bs-header h1{margin-top:0;color:#fff}.bs-header p{margin-bottom:0;font-weight:300;line-height:1.4}.bs-header .container{position:relative}@media (min-width:768px){.bs-header{padding-top:60px;padding-bottom:60px;font-size:24px;text-align:left}.bs-header h1{font-size:60px;line-height:1}}@media (min-width:992px){.bs-header h1,.bs-header p{margin-right:380px}}.carbonad{width:auto!important;margin:30px -30px -31px!important;padding:20px!important;overflow:hidden;height:auto!important;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{float:none!important;display:block!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}@media (min-width:480px){.carbonad{width:330px!important;margin:20px auto!important;border-radius:4px;border-width:1px!important}.bs-masthead .carbonad{margin:50px auto 0!important}}@media (min-width:768px){.carbonad{margin-left:0!important;margin-right:0!important}}@media (min-width:992px){.carbonad{position:absolute;top:0;right:15px;margin:0!important;padding:15px!important;width:330px!important}.bs-masthead .carbonad{position:static}}.bs-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-featurette+.bs-footer{margin-top:0;border-top:0}.bs-featurette-title{font-size:30px;font-weight:400;color:#333;margin-bottom:5px}.half-rule{width:100px;margin:40px auto}.bs-featurette h3{font-weight:400;color:#333;margin-bottom:5px}.bs-featurette-img{display:block;margin-bottom:20px;color:#333}.bs-featurette-img:hover{text-decoration:none;color:#428bca}.bs-featurette-img img{display:block;margin-bottom:15px}.bs-featured-sites{margin-left:-1px;margin-right:-1px}.bs-featured-sites .col-sm-3{padding-left:1px;padding-right:1px}@media (min-width:480px){.bs-featurette .img-responsive{margin-top:30px}}@media (min-width:768px){.bs-featurette{padding-top:100px;padding-bottom:100px}.bs-featurette-title{font-size:40px}.bs-featurette .lead{margin-left:auto;margin-right:auto;max-width:80%}.bs-featured-sites .col-sm-3:first-child img{border-top-left-radius:4px;border-bottom-left-radius:4px}.bs-featured-sites .col-sm-3:last-child img{border-top-right-radius:4px;border-bottom-right-radius:4px}.bs-featurette .img-responsive{margin-top:0}}.bs-sidebar.affix{position:static}@media (min-width:768px){.bs-sidebar{padding-left:20px}}.bs-sidenav{margin-top:20px;margin-bottom:20px}.bs-sidebar .nav>li>a{display:block;font-size:13px;font-weight:500;color:#999;padding:4px 20px}.bs-sidebar .nav>li>a:hover,.bs-sidebar .nav>li>a:focus{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}.bs-sidebar .nav>.active>a,.bs-sidebar .nav>.active:hover>a,.bs-sidebar .nav>.active:focus>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}.bs-sidebar .nav .nav{display:none;padding-bottom:10px}.bs-sidebar .nav .nav>li>a{padding-top:2px;padding-bottom:2px;padding-left:30px;font-size:12px;font-weight:400}.bs-sidebar .nav .nav>li>a:hover,.bs-sidebar .nav .nav>li>a:focus{padding-left:29px}.bs-sidebar .nav .nav>.active>a,.bs-sidebar .nav .nav>.active:hover>a,.bs-sidebar .nav .nav>.active:focus>a{font-weight:500;padding-left:28px}@media (min-width:992px){.bs-sidebar .nav>.active>ul{display:block}.bs-sidebar.affix,.bs-sidebar.affix-bottom{width:213px}.bs-sidebar.affix{position:fixed;top:20px}.bs-sidebar.affix-bottom{position:absolute}.bs-sidebar.affix-bottom .bs-sidenav,.bs-sidebar.affix .bs-sidenav{margin-top:0;margin-bottom:0}}@media (min-width:1200px){.bs-sidebar.affix-bottom,.bs-sidebar.affix{width:263px}}.bs-docs-section{margin-bottom:60px}.bs-docs-section:last-child{margin-bottom:0}h1[id]{margin-top:0;padding-top:20px}.bs-callout{margin:20px 0;padding:20px;border-left:3px solid #eee}.bs-callout h4{margin-top:0;margin-bottom:5px}.bs-callout p:last-child{margin-bottom:0}.bs-callout code{background-color:#fff;border-radius:3px}.bs-callout-danger{background-color:#fdf7f7;border-color:#d9534f}.bs-callout-danger h4{color:#d9534f}.bs-callout-warning{background-color:#fcf8f2;border-color:#f0ad4e}.bs-callout-warning h4{color:#f0ad4e}.bs-callout-info{background-color:#f4f8fa;border-color:#5bc0de}.bs-callout-info h4{color:#5bc0de}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{float:left;width:60px;height:60px;margin:0 5px;border-radius:3px}@media (min-width:768px){.color-swatch{width:100px;height:100px}}.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:#428bca}.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}.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}.bs-team .team-member{color:#555;line-height:32px}.bs-team .team-member:hover{color:#333;text-decoration:none}.bs-team .github-btn{float:right;margin-top:6px;width:180px;height:20px}.bs-team img{float:left;width:32px;margin-right:10px;border-radius:4px}.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)}.bs-example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;background-color:#fafafa;box-shadow:inset 0 3px 6px rgba(0,0,0,.05);border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0}.bs-example:after{content:"Example";position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:1px}.bs-example+.highlight{margin:-15px -15px 15px;border-radius:0;border-width:0 0 1px}@media (min-width:768px){.bs-example{margin-left:0;margin-right:0;background-color:#fff;border-width:1px;border-color:#ddd;border-radius:4px 4px 0 0;box-shadow:none}.bs-example+.highlight{margin-top:-16px;margin-left:0;margin-right:0;border-width:1px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}}.bs-example .container{width:auto}.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}.bs-example-type .table .type-info{color:#999;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}.bs-example-bg-classes p{padding:15px}.bs-example>.img-circle,.bs-example>.img-rounded,.bs-example>.img-thumbnail{margin:5px}.bs-example>.table-responsive>.table{background-color:#fff}.bs-example>.btn,.bs-example>.btn-group{margin-top:5px;margin-bottom:5px}.bs-example>.btn-toolbar+.btn-toolbar{margin-top:10px}.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}.bs-example>.list-group{max-width:400px}.bs-example .navbar:last-child{margin-bottom:0}.bs-navbar-top-example,.bs-navbar-bottom-example{z-index:1;padding:0;overflow:hidden}.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-left:0;margin-right: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}.bs-navbar-top-example{border-radius:0 0 4px 4px}.bs-navbar-bottom-example{border-radius:4px 4px 0 0}}.bs-example .pagination{margin-top:10px;margin-bottom:10px}.bs-example>.pager{margin-top:0}.bs-example-modal{background-color:#f5f5f5}.bs-example-modal .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-example-modal .modal-dialog{left:auto;margin-left:auto;margin-right:auto}.bs-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:5px}.bs-example-tabs .nav-tabs{margin-bottom:15px}.bs-example-tooltips{text-align:center}.bs-example-tooltips>.btn{margin-top:5px;margin-bottom:5px}.bs-example-popover{padding-bottom:24px;background-color:#f9f9f9}.bs-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:20px}.scrollspy-example{position:relative;height:200px;margin-top:10px;overflow:auto}.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;background-color:transparent;border:0;white-space:nowrap}.highlight pre code{font-size:inherit;color:#333}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;text-align:right;color:#bebec5}.table-responsive .highlight pre{white-space:normal}.bs-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.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-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:700;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,.visible-on .col-xs-6 .visible-sm,.visible-on .col-xs-6 .visible-md,.visible-on .col-xs-6 .visible-lg,.hidden-on .col-xs-6 .visible-xs,.hidden-on .col-xs-6 .visible-sm,.hidden-on .col-xs-6 .visible-md,.hidden-on .col-xs-6 .visible-lg{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}.bs-glyphicons{margin:0 -19px 20px -16px;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;border:1px solid #fff;background-color:#f9f9f9}.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}.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}@media (min-width:768px){.bs-glyphicons{margin-left:0;margin-right:0}.bs-glyphicons li{width:12.5%;font-size:12px}}.bs-customizer .toggle{float:right;margin-top:25px}.bs-customizer label{margin-top:10px;font-weight:500;color:#555}.bs-customizer h2{margin-top:0;margin-bottom:5px;padding-top:30px}.bs-customizer h3{margin-bottom:0}.bs-customizer h4{margin-top:15px;margin-bottom:0}.bs-customizer .bs-callout h4{margin-top:0;margin-bottom:5px}.bs-customizer input[type=text]{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#fafafa}.bs-customizer .help-block{font-size:12px;margin-bottom:5px}#less-section label{font-weight:400}.bs-customizer-input{float:left;width:33.333333%;padding-left:15px;padding-right:15px}.bs-customize-download .btn-outline{padding:20px}.bs-customizer-alert{position:fixed;top:51px;left:0;right:0;z-index:1030;padding:15px 0;color:#fff;background-color:#d9534f;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);border-bottom:1px solid #b94441}.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;box-shadow:inset 0 2px 4px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}.bs-brand-logos{display:table;width:100%;margin-bottom:15px;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:4px}.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}.bs-brand-item h1,.bs-brand-item h3{margin-top:0;margin-bottom:0}.bs-brand-item .bs-booticon{margin-left:auto;margin-right:auto}.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}}.bs-examples .thumbnail{margin-bottom:10px}.bs-examples h4{margin-bottom:5px}.bs-examples p{margin-bottom:20px}#focusedInput{border-color:#ccc;border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted \9;-moz-box-shadow:0 0 8px rgba(82,168,236,.6);box-shadow:0 0 8px rgba(82,168,236,.6)}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.ge{font-style:italic}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc{color:#069}.kd{color:#069}.kn{color:#069}.kp{color:#069}.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf{color:#F60}.mh{color:#F60}.mi{color:#F60}.mo{color:#F60}.sb{color:#C30}.sc{color:#C30}.sd{color:#C30;font-style:italic}.s2{color:#C30}.se{color:#C30}.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#F60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999} \ No newline at end of file diff --git a/docs/assets/css/pygments-manni.css b/docs/assets/css/pygments-manni.css index 1264b87f14..1b3c92cb27 100644 --- a/docs/assets/css/pygments-manni.css +++ b/docs/assets/css/pygments-manni.css @@ -4,7 +4,7 @@ .err { color: #AA0000; background-color: #FFAAAA } /* Error */ .k { color: #006699; } /* Keyword */ .o { color: #555555 } /* Operator */ -.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ +.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 */ diff --git a/docs/components.html b/docs/components.html index 695482eadd..a1e6d063f3 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1574,7 +1574,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

-{% highlight css %} +{% highlight scss %} body { padding-top: 70px; } {% endhighlight %}

Make sure to include this after the core Bootstrap CSS.

@@ -1618,7 +1618,7 @@ body { padding-top: 70px; }

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

-{% highlight css %} +{% highlight scss %} body { padding-bottom: 70px; } {% endhighlight %}

Make sure to include this after the core Bootstrap CSS.

diff --git a/docs/css.html b/docs/css.html index 0f2d79c27d..b4eaabe9b5 100644 --- a/docs/css.html +++ b/docs/css.html @@ -89,7 +89,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Media queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.

-{% highlight css %} +{% highlight scss %} /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ @@ -103,7 +103,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e @media (min-width: @screen-lg-min) { ... } {% endhighlight %}

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

-{% highlight css %} +{% highlight scss %} @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @@ -449,7 +449,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Variables

Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

-{% highlight css %} +{% highlight scss %} @grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px; @@ -457,7 +457,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

-{% highlight css %} +{% highlight scss %} // Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns @@ -593,7 +593,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.

-{% highlight css %} +{% highlight scss %} .wrapper { .make-row(); } @@ -2433,7 +2433,7 @@ For example, <section> should be wrapped as inline.
...
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .pull-left { float: left !important; @@ -2462,7 +2462,7 @@ For example, <section> should be wrapped as inline. {% highlight html %}
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .center-block { display: block; @@ -2483,7 +2483,7 @@ For example, <section> should be wrapped as inline.
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Mixin itself .clearfix() { &:before, @@ -2511,7 +2511,7 @@ For example, <section> should be wrapped as inline.
...
{% endhighlight %} -{% highlight css %} +{% highlight scss %} // Classes .show { display: block !important; @@ -2539,7 +2539,7 @@ For example, <section> should be wrapped as inline. {% highlight html %} Skip to main content {% endhighlight %} -{% highlight css %} +{% highlight scss %} // Usage as a Mixin .skip-navigation { .sr-only(); @@ -2552,7 +2552,7 @@ For example, <section> should be wrapped as inline. {% highlight html %}

Custom heading

{% endhighlight %} - {% highlight css %} + {% highlight scss %} // Usage as a Mixin .heading { .text-hide(); @@ -2821,7 +2821,7 @@ For example, <section> should be wrapped as inline.
-{% highlight css %} +{% highlight scss %} @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @@ -2838,7 +2838,7 @@ For example, <section> should be wrapped as inline.
-{% highlight css %} +{% highlight scss %} @brand-primary: #428bca; @brand-success: #5cb85c; @brand-info: #5bc0de; @@ -2847,7 +2847,7 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

-{% highlight css %} +{% highlight scss %} // Use as-is .masthead { background-color: @brand-primary; @@ -2862,7 +2862,7 @@ For example, <section> should be wrapped as inline.

Scaffolding

A handful of variables for quickly customizing key elements of your site's skeleton.

-{% highlight css %} +{% highlight scss %} // Scaffolding @body-bg: #fff; @text-color: @black-50; @@ -2870,7 +2870,7 @@ For example, <section> should be wrapped as inline.

Easily style your links with the right color with only one value.

-{% highlight css %} +{% highlight scss %} // Variables @link-color: @brand-primary; @link-color-hover: darken(@link-color, 15%); @@ -2890,7 +2890,7 @@ a {

Typography

Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.

-{% highlight css %} +{% highlight scss %} @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @@ -2918,14 +2918,14 @@ a {

Icons

Two quick variables for customizing the location and filename of your icons.

-{% highlight css %} +{% highlight scss %} @icon-font-path: "../fonts/"; @icon-font-name: "glyphicons-halflings-regular"; {% endhighlight %}

Components

Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.

-{% highlight css %} +{% highlight scss %} @padding-base-vertical: 6px; @padding-base-horizontal: 12px; @@ -2959,7 +2959,7 @@ a {

Box-sizing

Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.

-{% highlight css %} +{% highlight scss %} .box-sizing(@box-model) { -webkit-box-sizing: @box-model; // Safari <= 5 -moz-box-sizing: @box-model; // Firefox <= 19 @@ -2969,7 +2969,7 @@ a {

Rounded corners

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.

-{% highlight css %} +{% highlight scss %} .border-top-radius(@radius) { border-top-right-radius: @radius; border-top-left-radius: @radius; @@ -2992,7 +2992,7 @@ a {

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.

The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.

-{% highlight css %} +{% highlight scss %} .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; @@ -3001,7 +3001,7 @@ a {

Transitions

Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

-{% highlight css %} +{% highlight scss %} .transition(@transition) { -webkit-transition: @transition; transition: @transition; @@ -3028,7 +3028,7 @@ a {

Transformations

Rotate, scale, translate (move), or skew any object.

-{% highlight css %} +{% highlight scss %} .rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only @@ -3084,7 +3084,7 @@ a {

Animations

A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.

-{% highlight css %} +{% highlight scss %} .animation(@animation) { -webkit-animation: @animation; animation: @animation; @@ -3117,7 +3117,7 @@ a {

Opacity

Set the opacity for all browsers and provide a filter fallback for IE8.

-{% highlight css %} +{% highlight scss %} .opacity(@opacity) { opacity: @opacity; // IE8 filter @@ -3128,7 +3128,7 @@ a {

Placeholder text

Provide context for form controls within each field.

-{% highlight css %} +{% highlight scss %} .placeholder(@color: @input-color-placeholder) { &:-moz-placeholder { color: @color; } // Firefox 4-18 &::-moz-placeholder { color: @color; } // Firefox 19+ @@ -3139,7 +3139,7 @@ a {

Columns

Generate columns via CSS within a single element.

-{% highlight css %} +{% highlight scss %} .content-columns(@width; @count; @gap) { -webkit-column-width: @width; -moz-column-width: @width; @@ -3155,21 +3155,21 @@ a {

Gradients

Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

-{% highlight css %} +{% highlight scss %} #gradient > .vertical(#333; #000); #gradient > .horizontal(#333; #000); #gradient > .radial(#333; #000); {% endhighlight %}

You can also specify the angle of a standard two-color, linear gradient:

-{% highlight css %} +{% highlight scss %} #gradient > .directional(#333; #000; 45deg); {% endhighlight %}

If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

-{% highlight css %} +{% highlight scss %} #gradient > .striped(#333; #000; 45deg); {% endhighlight %}

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:

-{% highlight css %} +{% highlight scss %} #gradient > .vertical-three-colors(#777; #333; .25; #000); #gradient > .horizontal-three-colors(#777; #333; .25; #000); {% endhighlight %} @@ -3181,7 +3181,7 @@ a {

Clearfix

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallager.

-{% highlight css %} +{% highlight scss %} // Mixin .clearfix() { &:before, @@ -3202,7 +3202,7 @@ a {

Horizontal centering

Quickly center any element within its parent. Requires width or max-width to be set.

-{% highlight css %} +{% highlight scss %} // Mixin .center-block() { display: block; @@ -3219,7 +3219,7 @@ a {

Sizing helpers

Specify the dimensions of an object more easily.

-{% highlight css %} +{% highlight scss %} // Mixins .size(@width; @height) { width: @width; @@ -3236,7 +3236,7 @@ a {

Resizable textareas

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

-{% highlight css %} +{% highlight scss %} .resizable(@direction: both) { // Options: horizontal, vertical, both resize: @direction; @@ -3247,7 +3247,7 @@ a {

Truncating text

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

-{% highlight css %} +{% highlight scss %} // Mixin .text-truncate() { overflow: hidden; @@ -3265,7 +3265,7 @@ a {

Retina images

Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

-{% highlight css %} +{% highlight scss %} .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); diff --git a/docs/getting-started.html b/docs/getting-started.html index ec677b15e9..9500862cd8 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -483,11 +483,11 @@ bootstrap/

Internet Explorer 10 in Windows 8 and Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

-{% highlight css %} +{% highlight scss %} @-ms-viewport { width: device-width; } {% endhighlight %}

However, this doesn't work for devices running Windows Phone 8 versions older than Update 3 (a.k.a. GDR3), as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug.

-{% highlight css %} +{% highlight scss %} @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @@ -563,7 +563,7 @@ if (isAndroid) {

Box-sizing

Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to * { box-sizing: border-box; }, a rule which makes it so padding does not affect the final computed width of an element. Learn more about box model and sizing at CSS Tricks.

Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).

-{% highlight css %} +{% highlight scss %} /* Box-sizing resets * * Reset individual elements or override regions to avoid conflicts due to @@ -704,7 +704,7 @@ if (isAndroid) {

To implement this, in the custom stylesheet, add the following CSS:

-{% highlight css %} +{% highlight scss %} /* Custom button -------------------------------------------------- */