From de6ec034dbf08a2e9facb995c638ed6a9c156dcd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 30 Sep 2012 23:24:07 -0700 Subject: [PATCH] single CSS file for all css, including responsive --- Makefile | 5 - docs/assets/css/bootstrap-responsive.css | 689 ----------------------- docs/assets/css/bootstrap.css | 680 ++++++++++++++++++++++ less/bootstrap.less | 26 + 4 files changed, 706 insertions(+), 694 deletions(-) delete mode 100644 docs/assets/css/bootstrap-responsive.css diff --git a/Makefile b/Makefile index b28b2e9308..045a707fe8 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,5 @@ BOOTSTRAP = ./docs/assets/css/bootstrap.css BOOTSTRAP_LESS = ./less/bootstrap.less -BOOTSTRAP_RESPONSIVE = ./docs/assets/css/bootstrap-responsive.css -BOOTSTRAP_RESPONSIVE_LESS = ./less/responsive.less DATE=$(shell date +%I:%M%p) CHECK=\033[32m✔\033[39m HR=\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\# @@ -19,7 +17,6 @@ build: @jshint js/tests/unit/*.js --config js/.jshintrc @echo "Running JSHint on javascript... ${CHECK} Done" @recess --compile ${BOOTSTRAP_LESS} > ${BOOTSTRAP} - @recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > ${BOOTSTRAP_RESPONSIVE} @echo "Compiling LESS with Recess... ${CHECK} Done" @node docs/build @cp img/* docs/assets/img/ @@ -69,8 +66,6 @@ bootstrap: cp img/* bootstrap/img/ recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css - recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css - recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css deleted file mode 100644 index c79f34c9cb..0000000000 --- a/docs/assets/css/bootstrap-responsive.css +++ /dev/null @@ -1,689 +0,0 @@ -/*! - * Bootstrap Responsive v2.1.2 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ - -.hidden { - display: none; - visibility: hidden; -} - -.visible-phone { - display: none !important; -} - -.visible-tablet { - display: none !important; -} - -.hidden-desktop { - display: none !important; -} - -.visible-desktop { - display: inherit !important; -} - -@media (min-width: 768px) and (max-width: 979px) { - .hidden-desktop { - display: inherit !important; - } - .visible-desktop { - display: none !important ; - } - .visible-tablet { - display: inherit !important; - } - .hidden-tablet { - display: none !important; - } -} - -@media (max-width: 767px) { - .hidden-desktop { - display: inherit !important; - } - .visible-desktop { - display: none !important; - } - .visible-phone { - display: inherit !important; - } - .hidden-phone { - display: none !important; - } -} - -@media (min-width: 1200px) { - .container, - .navbar-fixed-top .container, - .navbar-fixed-bottom .container { - width: 1170px; - } - .row { - margin-right: -15px; - margin-left: -15px; - } - .row:before, - .row:after { - display: table; - line-height: 0; - content: ""; - } - .row:after { - clear: both; - } - [class*="span"] { - float: left; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - .span12 { - width: 100%; - } - .span11 { - width: 91.66666666666666%; - } - .span10 { - width: 83.33333333333334%; - } - .span9 { - width: 75%; - } - .span8 { - width: 66.66666666666666%; - } - .span7 { - width: 58.333333333333336%; - } - .span6 { - width: 50%; - } - .span5 { - width: 41.66666666666667%; - } - .span4 { - width: 33.33333333333333%; - } - .span3 { - width: 25%; - } - .span2 { - width: 16.666666666666664%; - } - .span1 { - width: 8.333333333333332%; - } - .offset12 { - margin-left: 100%; - } - .offset11 { - margin-left: 91.66666666666666%; - } - .offset10 { - margin-left: 83.33333333333334%; - } - .offset9 { - margin-left: 75%; - } - .offset8 { - margin-left: 66.66666666666666%; - } - .offset7 { - margin-left: 58.333333333333336%; - } - .offset6 { - margin-left: 50%; - } - .offset5 { - margin-left: 41.66666666666667%; - } - .offset4 { - margin-left: 33.33333333333333%; - } - .offset3 { - margin-left: 25%; - } - .offset2 { - margin-left: 16.666666666666664%; - } - .offset1 { - margin-left: 8.333333333333332%; - } - input.span12, - textarea.span12, - select.span12, - .uneditable-input.span12 { - width: 97.43589743589743%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span11, - textarea.span11, - select.span11, - .uneditable-input.span11 { - width: 89.10256410256409%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span10, - textarea.span10, - select.span10, - .uneditable-input.span10 { - width: 80.76923076923077%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span9, - textarea.span9, - select.span9, - .uneditable-input.span9 { - width: 72.43589743589743%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span8, - textarea.span8, - select.span8, - .uneditable-input.span8 { - width: 64.10256410256409%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span7, - textarea.span7, - select.span7, - .uneditable-input.span7 { - width: 55.769230769230774%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span6, - textarea.span6, - select.span6, - .uneditable-input.span6 { - width: 47.43589743589744%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span5, - textarea.span5, - select.span5, - .uneditable-input.span5 { - width: 39.10256410256411%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span4, - textarea.span4, - select.span4, - .uneditable-input.span4 { - width: 30.769230769230766%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span3, - textarea.span3, - select.span3, - .uneditable-input.span3 { - width: 22.435897435897438%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span2, - textarea.span2, - select.span2, - .uneditable-input.span2 { - width: 14.1025641025641%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span1, - textarea.span1, - select.span1, - .uneditable-input.span1 { - width: 5.769230769230768%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.offset12, - textarea.offset12, - select.offset12, - uneditable-input.offset12 { - margin-left: 101.28205128205128%; - } - input.offset11, - textarea.offset11, - select.offset11, - uneditable-input.offset11 { - margin-left: 92.94871794871794%; - } - input.offset10, - textarea.offset10, - select.offset10, - uneditable-input.offset10 { - margin-left: 84.61538461538463%; - } - input.offset9, - textarea.offset9, - select.offset9, - uneditable-input.offset9 { - margin-left: 76.28205128205128%; - } - input.offset8, - textarea.offset8, - select.offset8, - uneditable-input.offset8 { - margin-left: 67.94871794871794%; - } - input.offset7, - textarea.offset7, - select.offset7, - uneditable-input.offset7 { - margin-left: 59.61538461538462%; - } - input.offset6, - textarea.offset6, - select.offset6, - uneditable-input.offset6 { - margin-left: 51.282051282051285%; - } - input.offset5, - textarea.offset5, - select.offset5, - uneditable-input.offset5 { - margin-left: 42.948717948717956%; - } - input.offset4, - textarea.offset4, - select.offset4, - uneditable-input.offset4 { - margin-left: 34.61538461538461%; - } - input.offset3, - textarea.offset3, - select.offset3, - uneditable-input.offset3 { - margin-left: 26.28205128205128%; - } - input.offset2, - textarea.offset2, - select.offset2, - uneditable-input.offset2 { - margin-left: 17.948717948717945%; - } - input.offset1, - textarea.offset1, - select.offset1, - uneditable-input.offset1 { - margin-left: 9.615384615384613%; - } -} - -@media (min-width: 768px) and (max-width: 979px) { - .row { - margin-right: -10px; - margin-left: -10px; - } - .row:before, - .row:after { - display: table; - line-height: 0; - content: ""; - } - .row:after { - clear: both; - } - [class*="span"] { - float: left; - min-height: 1px; - padding-right: 10px; - padding-left: 10px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - .span12 { - width: 100%; - } - .span11 { - width: 91.66666666666666%; - } - .span10 { - width: 83.33333333333334%; - } - .span9 { - width: 75%; - } - .span8 { - width: 66.66666666666666%; - } - .span7 { - width: 58.333333333333336%; - } - .span6 { - width: 50%; - } - .span5 { - width: 41.66666666666667%; - } - .span4 { - width: 33.33333333333333%; - } - .span3 { - width: 25%; - } - .span2 { - width: 16.666666666666664%; - } - .span1 { - width: 8.333333333333332%; - } - .offset12 { - margin-left: 100%; - } - .offset11 { - margin-left: 91.66666666666666%; - } - .offset10 { - margin-left: 83.33333333333334%; - } - .offset9 { - margin-left: 75%; - } - .offset8 { - margin-left: 66.66666666666666%; - } - .offset7 { - margin-left: 58.333333333333336%; - } - .offset6 { - margin-left: 50%; - } - .offset5 { - margin-left: 41.66666666666667%; - } - .offset4 { - margin-left: 33.33333333333333%; - } - .offset3 { - margin-left: 25%; - } - .offset2 { - margin-left: 16.666666666666664%; - } - .offset1 { - margin-left: 8.333333333333332%; - } -} - -@media (max-width: 767px) { - body { - padding-right: 20px; - padding-left: 20px; - } - .navbar-fixed-top, - .navbar-fixed-bottom, - .navbar-static-top { - margin-right: -20px; - margin-left: -20px; - } - .container-fluid { - padding: 0; - } - .dl-horizontal dt { - float: none; - width: auto; - clear: none; - text-align: left; - } - .dl-horizontal dd { - margin-left: 0; - } - .container { - width: auto; - } - .row { - margin-left: 0; - } - [class*="span"], - .uneditable-input[class*="span"] { - display: block; - float: none; - width: 100%; - margin-left: 0; - } - input[class*="span"], - select[class*="span"], - textarea[class*="span"], - .uneditable-input { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - .input-prepend input, - .input-append input, - .input-prepend input[class*="span"], - .input-append input[class*="span"] { - display: inline-block; - width: auto; - } - .controls-row [class*="span"] + [class*="span"] { - margin-left: 0; - } - .modal { - position: fixed; - top: 20px; - right: 20px; - left: 20px; - width: auto; - margin: 0; - } - .modal.fade.in { - top: auto; - } -} - -@media (max-width: 480px) { - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); - } - .page-header h1 small { - display: block; - line-height: 20px; - } - input[type="checkbox"], - input[type="radio"] { - border: 1px solid #ccc; - } - .form-horizontal .control-label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - .form-horizontal .controls { - margin-left: 0; - } - .form-horizontal .control-list { - padding-top: 0; - } - .form-horizontal .form-actions { - padding-right: 10px; - padding-left: 10px; - } - .media .pull-left, - .media .pull-right { - display: block; - float: none; - margin-bottom: 10px; - } - .media-object { - margin-right: 0; - margin-left: 0; - } - .modal { - top: 10px; - right: 10px; - left: 10px; - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - .carousel-caption { - position: static; - } -} - -@media (max-width: 979px) { - body { - padding-top: 0; - } - .navbar-fixed-top, - .navbar-fixed-bottom { - position: static; - } - .navbar-fixed-top { - margin-bottom: 20px; - } - .navbar-fixed-bottom { - margin-top: 20px; - } - .navbar-fixed-top, - .navbar-fixed-bottom { - padding: 5px; - } - .navbar .container { - width: auto; - padding: 0; - } - .navbar .brand { - padding-right: 10px; - padding-left: 10px; - margin: 0 0 0 -5px; - } - .nav-collapse { - clear: both; - } - .nav-collapse .nav { - float: none; - margin: 0 0 10px; - } - .nav-collapse .nav > li { - float: none; - } - .nav-collapse .nav > li > a { - margin-bottom: 2px; - } - .nav-collapse .nav > .divider-vertical { - display: none; - } - .nav-collapse .nav .nav-header { - color: #777777; - text-shadow: none; - } - .nav-collapse .nav > li > a, - .nav-collapse .dropdown-menu a { - padding: 9px 15px; - font-weight: bold; - color: #777777; - border-radius: 3px; - } - .nav-collapse .btn { - padding: 4px 10px 4px; - font-weight: normal; - border-radius: 4px; - } - .nav-collapse .dropdown-menu li + li a { - margin-bottom: 2px; - } - .nav-collapse .nav > li > a:hover, - .nav-collapse .dropdown-menu a:hover { - background-color: #f2f2f2; - } - .navbar-inverse .nav-collapse .nav > li > a:hover, - .navbar-inverse .nav-collapse .dropdown-menu a:hover { - background-color: #111111; - } - .nav-collapse.in .btn-group { - padding: 0; - margin-top: 5px; - } - .nav-collapse .dropdown-menu { - position: static; - top: auto; - left: auto; - display: block; - float: none; - max-width: none; - padding: 0; - margin: 0 15px; - background-color: transparent; - border: none; - border-radius: 0; - -webkit-box-shadow: none; - box-shadow: none; - } - .nav-collapse .dropdown-menu:before, - .nav-collapse .dropdown-menu:after { - display: none; - } - .nav-collapse .dropdown-menu .divider { - display: none; - } - .nav-collapse .nav > li > .dropdown-menu:before, - .nav-collapse .nav > li > .dropdown-menu:after { - display: none; - } - .nav-collapse .navbar-form, - .nav-collapse .navbar-search { - float: none; - padding: 10px 15px; - margin: 10px 0; - border-top: 1px solid #f2f2f2; - border-bottom: 1px solid #f2f2f2; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - } - .navbar-inverse .nav-collapse .navbar-form, - .navbar-inverse .nav-collapse .navbar-search { - border-top-color: #111111; - border-bottom-color: #111111; - } - .navbar .nav-collapse .nav.pull-right { - float: none; - margin-left: 0; - } - .nav-collapse, - .nav-collapse.collapse { - height: 0; - overflow: hidden; - } - .navbar .btn-navbar { - display: block; - } - .navbar-static { - padding-right: 10px; - padding-left: 10px; - } -} - -@media (min-width: 980px) { - .nav-collapse.collapse { - height: auto !important; - overflow: visible !important; - } -} diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fea2076911..6f5df4832d 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -5519,3 +5519,683 @@ a.badge:hover { -moz-box-sizing: border-box; box-sizing: border-box; } + +.hidden { + display: none; + visibility: hidden; +} + +.visible-phone { + display: none !important; +} + +.visible-tablet { + display: none !important; +} + +.hidden-desktop { + display: none !important; +} + +.visible-desktop { + display: inherit !important; +} + +@media (min-width: 768px) and (max-width: 979px) { + .hidden-desktop { + display: inherit !important; + } + .visible-desktop { + display: none !important ; + } + .visible-tablet { + display: inherit !important; + } + .hidden-tablet { + display: none !important; + } +} + +@media (max-width: 767px) { + .hidden-desktop { + display: inherit !important; + } + .visible-desktop { + display: none !important; + } + .visible-phone { + display: inherit !important; + } + .hidden-phone { + display: none !important; + } +} + +@media (min-width: 1200px) { + .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 1170px; + } + .row { + margin-right: -15px; + margin-left: -15px; + } + .row:before, + .row:after { + display: table; + line-height: 0; + content: ""; + } + .row:after { + clear: both; + } + [class*="span"] { + float: left; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .span12 { + width: 100%; + } + .span11 { + width: 91.66666666666666%; + } + .span10 { + width: 83.33333333333334%; + } + .span9 { + width: 75%; + } + .span8 { + width: 66.66666666666666%; + } + .span7 { + width: 58.333333333333336%; + } + .span6 { + width: 50%; + } + .span5 { + width: 41.66666666666667%; + } + .span4 { + width: 33.33333333333333%; + } + .span3 { + width: 25%; + } + .span2 { + width: 16.666666666666664%; + } + .span1 { + width: 8.333333333333332%; + } + .offset12 { + margin-left: 100%; + } + .offset11 { + margin-left: 91.66666666666666%; + } + .offset10 { + margin-left: 83.33333333333334%; + } + .offset9 { + margin-left: 75%; + } + .offset8 { + margin-left: 66.66666666666666%; + } + .offset7 { + margin-left: 58.333333333333336%; + } + .offset6 { + margin-left: 50%; + } + .offset5 { + margin-left: 41.66666666666667%; + } + .offset4 { + margin-left: 33.33333333333333%; + } + .offset3 { + margin-left: 25%; + } + .offset2 { + margin-left: 16.666666666666664%; + } + .offset1 { + margin-left: 8.333333333333332%; + } + input.span12, + textarea.span12, + select.span12, + .uneditable-input.span12 { + width: 97.43589743589743%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span11, + textarea.span11, + select.span11, + .uneditable-input.span11 { + width: 89.10256410256409%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span10, + textarea.span10, + select.span10, + .uneditable-input.span10 { + width: 80.76923076923077%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span9, + textarea.span9, + select.span9, + .uneditable-input.span9 { + width: 72.43589743589743%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span8, + textarea.span8, + select.span8, + .uneditable-input.span8 { + width: 64.10256410256409%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span7, + textarea.span7, + select.span7, + .uneditable-input.span7 { + width: 55.769230769230774%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span6, + textarea.span6, + select.span6, + .uneditable-input.span6 { + width: 47.43589743589744%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span5, + textarea.span5, + select.span5, + .uneditable-input.span5 { + width: 39.10256410256411%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span4, + textarea.span4, + select.span4, + .uneditable-input.span4 { + width: 30.769230769230766%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span3, + textarea.span3, + select.span3, + .uneditable-input.span3 { + width: 22.435897435897438%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span2, + textarea.span2, + select.span2, + .uneditable-input.span2 { + width: 14.1025641025641%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span1, + textarea.span1, + select.span1, + .uneditable-input.span1 { + width: 5.769230769230768%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.offset12, + textarea.offset12, + select.offset12, + uneditable-input.offset12 { + margin-left: 101.28205128205128%; + } + input.offset11, + textarea.offset11, + select.offset11, + uneditable-input.offset11 { + margin-left: 92.94871794871794%; + } + input.offset10, + textarea.offset10, + select.offset10, + uneditable-input.offset10 { + margin-left: 84.61538461538463%; + } + input.offset9, + textarea.offset9, + select.offset9, + uneditable-input.offset9 { + margin-left: 76.28205128205128%; + } + input.offset8, + textarea.offset8, + select.offset8, + uneditable-input.offset8 { + margin-left: 67.94871794871794%; + } + input.offset7, + textarea.offset7, + select.offset7, + uneditable-input.offset7 { + margin-left: 59.61538461538462%; + } + input.offset6, + textarea.offset6, + select.offset6, + uneditable-input.offset6 { + margin-left: 51.282051282051285%; + } + input.offset5, + textarea.offset5, + select.offset5, + uneditable-input.offset5 { + margin-left: 42.948717948717956%; + } + input.offset4, + textarea.offset4, + select.offset4, + uneditable-input.offset4 { + margin-left: 34.61538461538461%; + } + input.offset3, + textarea.offset3, + select.offset3, + uneditable-input.offset3 { + margin-left: 26.28205128205128%; + } + input.offset2, + textarea.offset2, + select.offset2, + uneditable-input.offset2 { + margin-left: 17.948717948717945%; + } + input.offset1, + textarea.offset1, + select.offset1, + uneditable-input.offset1 { + margin-left: 9.615384615384613%; + } +} + +@media (min-width: 768px) and (max-width: 979px) { + .row { + margin-right: -10px; + margin-left: -10px; + } + .row:before, + .row:after { + display: table; + line-height: 0; + content: ""; + } + .row:after { + clear: both; + } + [class*="span"] { + float: left; + min-height: 1px; + padding-right: 10px; + padding-left: 10px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .span12 { + width: 100%; + } + .span11 { + width: 91.66666666666666%; + } + .span10 { + width: 83.33333333333334%; + } + .span9 { + width: 75%; + } + .span8 { + width: 66.66666666666666%; + } + .span7 { + width: 58.333333333333336%; + } + .span6 { + width: 50%; + } + .span5 { + width: 41.66666666666667%; + } + .span4 { + width: 33.33333333333333%; + } + .span3 { + width: 25%; + } + .span2 { + width: 16.666666666666664%; + } + .span1 { + width: 8.333333333333332%; + } + .offset12 { + margin-left: 100%; + } + .offset11 { + margin-left: 91.66666666666666%; + } + .offset10 { + margin-left: 83.33333333333334%; + } + .offset9 { + margin-left: 75%; + } + .offset8 { + margin-left: 66.66666666666666%; + } + .offset7 { + margin-left: 58.333333333333336%; + } + .offset6 { + margin-left: 50%; + } + .offset5 { + margin-left: 41.66666666666667%; + } + .offset4 { + margin-left: 33.33333333333333%; + } + .offset3 { + margin-left: 25%; + } + .offset2 { + margin-left: 16.666666666666664%; + } + .offset1 { + margin-left: 8.333333333333332%; + } +} + +@media (max-width: 767px) { + body { + padding-right: 20px; + padding-left: 20px; + } + .navbar-fixed-top, + .navbar-fixed-bottom, + .navbar-static-top { + margin-right: -20px; + margin-left: -20px; + } + .container-fluid { + padding: 0; + } + .dl-horizontal dt { + float: none; + width: auto; + clear: none; + text-align: left; + } + .dl-horizontal dd { + margin-left: 0; + } + .container { + width: auto; + } + .row { + margin-left: 0; + } + [class*="span"], + .uneditable-input[class*="span"] { + display: block; + float: none; + width: 100%; + margin-left: 0; + } + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .input-prepend input, + .input-append input, + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + display: inline-block; + width: auto; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 0; + } + .modal { + position: fixed; + top: 20px; + right: 20px; + left: 20px; + width: auto; + margin: 0; + } + .modal.fade.in { + top: auto; + } +} + +@media (max-width: 480px) { + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); + } + .page-header h1 small { + display: block; + line-height: 20px; + } + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + .form-horizontal .control-label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .form-horizontal .controls { + margin-left: 0; + } + .form-horizontal .control-list { + padding-top: 0; + } + .form-horizontal .form-actions { + padding-right: 10px; + padding-left: 10px; + } + .media .pull-left, + .media .pull-right { + display: block; + float: none; + margin-bottom: 10px; + } + .media-object { + margin-right: 0; + margin-left: 0; + } + .modal { + top: 10px; + right: 10px; + left: 10px; + } + .modal-header .close { + padding: 10px; + margin: -10px; + } + .carousel-caption { + position: static; + } +} + +@media (max-width: 979px) { + body { + padding-top: 0; + } + .navbar-fixed-top, + .navbar-fixed-bottom { + position: static; + } + .navbar-fixed-top { + margin-bottom: 20px; + } + .navbar-fixed-bottom { + margin-top: 20px; + } + .navbar-fixed-top, + .navbar-fixed-bottom { + padding: 5px; + } + .navbar .container { + width: auto; + padding: 0; + } + .navbar .brand { + padding-right: 10px; + padding-left: 10px; + margin: 0 0 0 -5px; + } + .nav-collapse { + clear: both; + } + .nav-collapse .nav { + float: none; + margin: 0 0 10px; + } + .nav-collapse .nav > li { + float: none; + } + .nav-collapse .nav > li > a { + margin-bottom: 2px; + } + .nav-collapse .nav > .divider-vertical { + display: none; + } + .nav-collapse .nav .nav-header { + color: #777777; + text-shadow: none; + } + .nav-collapse .nav > li > a, + .nav-collapse .dropdown-menu a { + padding: 9px 15px; + font-weight: bold; + color: #777777; + border-radius: 3px; + } + .nav-collapse .btn { + padding: 4px 10px 4px; + font-weight: normal; + border-radius: 4px; + } + .nav-collapse .dropdown-menu li + li a { + margin-bottom: 2px; + } + .nav-collapse .nav > li > a:hover, + .nav-collapse .dropdown-menu a:hover { + background-color: #f2f2f2; + } + .navbar-inverse .nav-collapse .nav > li > a:hover, + .navbar-inverse .nav-collapse .dropdown-menu a:hover { + background-color: #111111; + } + .nav-collapse.in .btn-group { + padding: 0; + margin-top: 5px; + } + .nav-collapse .dropdown-menu { + position: static; + top: auto; + left: auto; + display: block; + float: none; + max-width: none; + padding: 0; + margin: 0 15px; + background-color: transparent; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .nav-collapse .dropdown-menu:before, + .nav-collapse .dropdown-menu:after { + display: none; + } + .nav-collapse .dropdown-menu .divider { + display: none; + } + .nav-collapse .nav > li > .dropdown-menu:before, + .nav-collapse .nav > li > .dropdown-menu:after { + display: none; + } + .nav-collapse .navbar-form, + .nav-collapse .navbar-search { + float: none; + padding: 10px 15px; + margin: 10px 0; + border-top: 1px solid #f2f2f2; + border-bottom: 1px solid #f2f2f2; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + } + .navbar-inverse .nav-collapse .navbar-form, + .navbar-inverse .nav-collapse .navbar-search { + border-top-color: #111111; + border-bottom-color: #111111; + } + .navbar .nav-collapse .nav.pull-right { + float: none; + margin-left: 0; + } + .nav-collapse, + .nav-collapse.collapse { + height: 0; + overflow: hidden; + } + .navbar .btn-navbar { + display: block; + } + .navbar-static { + padding-right: 10px; + padding-left: 10px; + } +} + +@media (min-width: 980px) { + .nav-collapse.collapse { + height: auto !important; + overflow: visible !important; + } +} diff --git a/less/bootstrap.less b/less/bootstrap.less index 7117ca345f..98090475d7 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -61,3 +61,29 @@ // Utility classes @import "utilities.less"; // Has to be last to override when necessary + + + +// Responsive +// ------------------------------------------------------------- + +// Responsive utility classes +@import "responsive-utilities.less"; + + +// Media queries +// ------------------ + +// Large desktops +@import "responsive-1200px-min.less"; + +// Tablets to regular desktops +@import "responsive-768px-979px.less"; + +// Phones to portrait tablets and narrow desktops +@import "responsive-767px-max.less"; + + +// Responsive navbar +// From 979px and below, show a button to toggle navbar contents +@import "responsive-navbar.less";