From a0179322854a9d1e2b9363447c9884e40733d04f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 16 Nov 2011 23:58:36 -0800 Subject: [PATCH] start breaking down patterns.less into more distinct files, update docs for forms to use correct classes --- bootstrap.css | 582 +++++++++++++++++++++---------------------- bootstrap.min.css | 78 +++--- docs/base-css.html | 8 +- docs/less.html | 197 ++++++++++++++- lib/bootstrap.less | 10 + lib/breadcrumbs.less | 22 ++ lib/media-grids.less | 26 ++ lib/mixins.less | 39 ++- lib/modals.less | 60 +++++ lib/pagination.less | 40 +++ lib/patterns.less | 485 +----------------------------------- lib/popovers.less | 45 ++++ lib/tabs-pills.less | 221 ++++++++++++++++ lib/twipsy.less | 33 +++ 14 files changed, 1025 insertions(+), 821 deletions(-) create mode 100644 lib/breadcrumbs.less create mode 100644 lib/media-grids.less create mode 100644 lib/modals.less create mode 100644 lib/pagination.less create mode 100644 lib/popovers.less create mode 100644 lib/tabs-pills.less create mode 100644 lib/twipsy.less diff --git a/bootstrap.css b/bootstrap.css index 71712829f0..c59d499546 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Mon Nov 7 21:14:04 PST 2011 + * Date: Wed Nov 16 23:58:14 PST 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -1440,238 +1440,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { .dropdown.open .dropdown-menu { display: block; } -.tabs, .pills { - margin: 0 0 20px; - padding: 0; - list-style: none; - zoom: 1; -} -.tabs:before, -.pills:before, -.tabs:after, -.pills:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.tabs:after, .pills:after { - clear: both; -} -.tabs > li, .pills > li { - float: left; -} -.tabs > li > a, .pills > li > a { - display: block; -} -.tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; -} -.tabs > li { - position: relative; - margin-bottom: -1px; -} -.tabs > li > a { - padding: 0 15px; - margin-right: 2px; - line-height: 36px; - border: 1px solid transparent; - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} -.tabs > li > a:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; -} -.tabs .active > a, .tabs .active > a:hover { - color: #808080; - background-color: #ffffff; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} -.tabbable { - margin-bottom: 18px; -} -.tabbable .tabs { - margin-bottom: 0; - border-bottom: 0; -} -.tabbable .tab-content { - padding: 19px; - border: 1px solid #ddd; -} -.tabbable.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; -} -.tabbable.tabs-bottom .tabs > li > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} -.tabbable.tabs-bottom .tabs > li > a:hover { - border-bottom-color: transparent; - border-top-color: #ddd; -} -.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; -} -.tabbable.tabs-left, .tabbable.tabs-right { - zoom: 1; -} -.tabbable.tabs-left:before, -.tabbable.tabs-right:before, -.tabbable.tabs-left:after, -.tabbable.tabs-right:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.tabbable.tabs-left:after, .tabbable.tabs-right:after { - clear: both; -} -.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { - width: 100px; -} -.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { - float: none; - margin-bottom: -1px; -} -.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a { - margin-bottom: 2px; -} -.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover { - border-color: transparent; -} -.tabbable.tabs-left .tab-content { - margin-left: 100px; -} -.tabbable.tabs-left .tabs { - float: left; -} -.tabbable.tabs-left .tabs > li { - margin-right: -1px; -} -.tabbable.tabs-left .tabs > li > a { - margin-right: 0; - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} -.tabbable.tabs-left .tabs > li > a:hover { - border-right-color: #ddd; -} -.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { - border-color: #ddd; - border-right-color: transparent; -} -.tabbable.tabs-right .tab-content { - margin-right: 100px; -} -.tabbable.tabs-right .tabs { - float: right; -} -.tabbable.tabs-right .tabs > li { - margin-left: -1px; -} -.tabbable.tabs-right .tabs > li > a { - margin-left: 0; - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; -} -.tabbable.tabs-right .tabs > li > a:hover { - border-left-color: #ddd; -} -.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { - border-color: #ddd; - border-left-color: transparent; -} -.tabs .menu-dropdown, .tabs .dropdown-menu { - top: 35px; - border-width: 1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px 6px; - border-radius: 0 6px 6px 6px; -} -.tabs a.menu:after, .tabs .dropdown-toggle:after { - border-top-color: #999; - margin-top: 15px; - margin-left: 5px; -} -.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { - border-color: #999; -} -.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { - border-top-color: #555; -} -.pills a { - margin: 5px 3px 5px 0; - padding: 0 15px; - line-height: 30px; - text-shadow: 0 1px 1px #ffffff; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; -} -.pills a:hover { - color: #ffffff; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #00438a; -} -.pills .active a { - color: #ffffff; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #0069d6; -} -.pills-vertical > li { - float: none; -} -.tab-content > .tab-pane, .pill-content > .pill-pane { - display: none; -} -.tab-content > .active, .pill-content > .active { - display: block; -} -.breadcrumb { - margin: 0 0 18px; - padding: 7px 14px; - background-color: #f5f5f5; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5)); - background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5)); - background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); - background-image: linear-gradient(top, #ffffff, #f5f5f5); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); - border: 1px solid #ddd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; -} -.breadcrumb li { - display: inline; - text-shadow: 0 1px 0 #ffffff; -} -.breadcrumb .divider { - padding: 0 5px; - color: #bfbfbf; -} -.breadcrumb .active a { - color: #404040; -} .hero-unit { background-color: #f5f5f5; margin-bottom: 30px; @@ -2038,6 +1806,296 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { background-color: #ddf4fb; border-color: #c6edf9; } +.well { + background-color: #f5f5f5; + margin-bottom: 20px; + padding: 19px; + min-height: 20px; + border: 1px solid #eee; + border: 1px solid rgba(0, 0, 0, 0.05); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, 0.15); +} +.fade { + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -ms-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; + opacity: 0; +} +.fade.in { + opacity: 1; +} +.label { + padding: 1px 3px 2px; + background-color: #bfbfbf; + font-size: 9.75px; + font-weight: bold; + color: #ffffff; + text-transform: uppercase; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.label.important { + background-color: #c43c35; +} +.label.warning { + background-color: #f89406; +} +.label.success { + background-color: #46a546; +} +.label.notice { + background-color: #62cffc; +} +.pull-right { + float: right; +} +.pull-left { + float: left; +} +.tabs, .pills { + margin: 0 0 20px; + padding: 0; + list-style: none; + zoom: 1; +} +.tabs:before, +.pills:before, +.tabs:after, +.pills:after { + display: table; + content: ""; + zoom: 1; + *display: inline; +} +.tabs:after, .pills:after { + clear: both; +} +.tabs > li, .pills > li { + float: left; +} +.tabs > li > a, .pills > li > a { + display: block; +} +.tabs { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; +} +.tabs > li { + position: relative; + margin-bottom: -1px; +} +.tabs > li > a { + padding: 0 15px; + margin-right: 2px; + line-height: 36px; + border: 1px solid transparent; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} +.tabs > li > a:hover { + text-decoration: none; + background-color: #eee; + border-color: #eee #eee #ddd; +} +.tabs .active > a, .tabs .active > a:hover { + color: #808080; + background-color: #ffffff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} +.tabbable { + margin-bottom: 18px; +} +.tabbable .tabs { + margin-bottom: 0; + border-bottom: 0; +} +.tabbable .tab-content { + padding: 19px; + border: 1px solid #ddd; +} +.tabbable.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; +} +.tabbable.tabs-bottom .tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.tabbable.tabs-bottom .tabs > li > a:hover { + border-bottom-color: transparent; + border-top-color: #ddd; +} +.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; +} +.tabbable.tabs-left, .tabbable.tabs-right { + zoom: 1; +} +.tabbable.tabs-left:before, +.tabbable.tabs-right:before, +.tabbable.tabs-left:after, +.tabbable.tabs-right:after { + display: table; + content: ""; + zoom: 1; + *display: inline; +} +.tabbable.tabs-left:after, .tabbable.tabs-right:after { + clear: both; +} +.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { + width: 100px; +} +.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { + float: none; + margin-bottom: -1px; +} +.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a { + margin-bottom: 2px; +} +.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover { + border-color: transparent; +} +.tabbable.tabs-left .tab-content { + margin-left: 100px; +} +.tabbable.tabs-left .tabs { + float: left; +} +.tabbable.tabs-left .tabs > li { + margin-right: -1px; +} +.tabbable.tabs-left .tabs > li > a { + margin-right: 0; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} +.tabbable.tabs-left .tabs > li > a:hover { + border-right-color: #ddd; +} +.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { + border-color: #ddd; + border-right-color: transparent; +} +.tabbable.tabs-right .tab-content { + margin-right: 100px; +} +.tabbable.tabs-right .tabs { + float: right; +} +.tabbable.tabs-right .tabs > li { + margin-left: -1px; +} +.tabbable.tabs-right .tabs > li > a { + margin-left: 0; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} +.tabbable.tabs-right .tabs > li > a:hover { + border-left-color: #ddd; +} +.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { + border-color: #ddd; + border-left-color: transparent; +} +.tabs .menu-dropdown, .tabs .dropdown-menu { + top: 35px; + border-width: 1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} +.tabs a.menu:after, .tabs .dropdown-toggle:after { + border-top-color: #999; + margin-top: 15px; + margin-left: 5px; +} +.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { + border-color: #999; +} +.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { + border-top-color: #555; +} +.pills a { + margin: 5px 3px 5px 0; + padding: 0 15px; + line-height: 30px; + text-shadow: 0 1px 1px #ffffff; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} +.pills a:hover { + color: #ffffff; + text-decoration: none; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background-color: #00438a; +} +.pills .active a { + color: #ffffff; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background-color: #0069d6; +} +.pills-vertical > li { + float: none; +} +.tab-content > .tab-pane, .pill-content > .pill-pane { + display: none; +} +.tab-content > .active, .pill-content > .active { + display: block; +} +.breadcrumb { + margin: 0 0 18px; + padding: 7px 14px; + background-color: #f5f5f5; + background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5)); + background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); + background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5)); + background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); + background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); + background-image: linear-gradient(top, #ffffff, #f5f5f5); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); + border: 1px solid #ddd; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; +} +.breadcrumb li { + display: inline; + text-shadow: 0 1px 0 #ffffff; +} +.breadcrumb .divider { + padding: 0 5px; + color: #bfbfbf; +} +.breadcrumb .active a { + color: #404040; +} .pagination { height: 36px; margin: 18px 0; @@ -2079,24 +2137,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .pagination .next a { border: 0; } -.well { - background-color: #f5f5f5; - margin-bottom: 20px; - padding: 19px; - min-height: 20px; - border: 1px solid #eee; - border: 1px solid rgba(0, 0, 0, 0.05); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -} -.well blockquote { - border-color: #ddd; - border-color: rgba(0, 0, 0, 0.15); -} .modal-backdrop { background-color: #000000; position: fixed; @@ -2331,40 +2371,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } -.fade { - -webkit-transition: opacity 0.15s linear; - -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; - opacity: 0; -} -.fade.in { - opacity: 1; -} -.label { - padding: 1px 3px 2px; - background-color: #bfbfbf; - font-size: 9.75px; - font-weight: bold; - color: #ffffff; - text-transform: uppercase; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.label.important { - background-color: #c43c35; -} -.label.warning { - background-color: #f89406; -} -.label.success { - background-color: #46a546; -} -.label.notice { - background-color: #62cffc; -} .media-grid { margin-left: -20px; margin-bottom: 0; @@ -2403,12 +2409,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } -.pull-right { - float: right; -} -.pull-left { - float: left; -} /* Responsive.less * For phone and tablet devices * ------------------------------------------------------------- */ diff --git a/bootstrap.min.css b/bootstrap.min.css index 04badb14ec..e236547a61 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -236,37 +236,6 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} -.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;} -.tabs:after,.pills:after{clear:both;} -.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} -.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;} -.tabs .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} -.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} -.tabbable .tab-content{padding:19px;border:1px solid #ddd;} -.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} -.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} -.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} -.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;} -.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;} -.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;} -.tabbable.tabs-left .tab-content{margin-left:100px;} -.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;} -.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;} -.tabbable.tabs-right .tab-content{margin-right:100px;} -.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} -.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;} -.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} -.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;} -.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;} -.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;} -.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} -.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} -.pills-vertical>li{float:none;} -.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} -.tab-content>.active,.pill-content>.active{display:block;} -.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;} -.breadcrumb .divider{padding:0 5px;color:#bfbfbf;} -.breadcrumb .active a{color:#404040;} .hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;} .hero-unit p{font-size:18px;font-weight:200;line-height:27px;} footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} @@ -307,13 +276,51 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;} .alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;} .alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;} +.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} +.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} +.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label.warning{background-color:#f89406;} +.label.success{background-color:#46a546;} +.label.notice{background-color:#62cffc;} +.pull-right{float:right;} +.pull-left{float:left;} +.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;} +.tabs:after,.pills:after{clear:both;} +.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} +.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;} +.tabs .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} +.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} +.tabbable .tab-content{padding:19px;border:1px solid #ddd;} +.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} +.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} +.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} +.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;} +.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;} +.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;} +.tabbable.tabs-left .tab-content{margin-left:100px;} +.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;} +.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;} +.tabbable.tabs-right .tab-content{margin-right:100px;} +.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} +.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;} +.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} +.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;} +.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;} +.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;} +.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} +.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} +.pills-vertical>li{float:none;} +.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} +.tab-content>.active,.pill-content>.active{display:block;} +.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;} +.breadcrumb .divider{padding:0 5px;color:#bfbfbf;} +.breadcrumb .active a{color:#404040;} .pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);} .pagination li{display:inline;} .pagination a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;} .pagination a:hover,.pagination .active a{background-color:#c7eefe;} .pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;} .pagination .next a{border:0;} -.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} .modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} @@ -339,16 +346,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} -.label.warning{background-color:#f89406;} -.label.success{background-color:#46a546;} -.label.notice{background-color:#62cffc;} .media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;} .media-grid:after{clear:both;} .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -.pull-right{float:right;} -.pull-left{float:left;} @media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>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-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/base-css.html b/docs/base-css.html index 51c4d35a3b..9c1af11c4e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -696,22 +696,22 @@ Vertical (default) - .vertical-form (not required) + .form-vertical (not required) Stacked, left-aligned labels over controls Horiztonal - .horizontal-form + .form-horizontal Float left, right-aligned labels on same line as controls Inline - .inline-form + .form-inline Left-aligned label and inline-block controls for compact style Search - .search-form + .form-search Extra-rounded text input for a typical search aesthetic diff --git a/docs/less.html b/docs/less.html index fccd5b9a46..2d35eea267 100644 --- a/docs/less.html +++ b/docs/less.html @@ -95,15 +95,208 @@
-

Variables

+

Variables from variables.less

+
+
+

Hyperlinks

+
+
+ + + + + + + + + + + + + + + + + + + + +
VariableValueUsage
@linkColor#0069d6Default link text color
@linkColorHoverdarken(@linkColor, 15)Default link text hover color
+
+
+ +
+
+

Grayscale colors

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@black#000Black
@grayDarklighten(@black, 25%)Dark gray
@graylighten(@black, 50%)Medium gray
@grayLightlighten(@black, 75%)Light gray
@grayLighterlighten(@black, 90%)Lighter gray
@white#fffWhite
+
+
+ +
+
+

Accent colors

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@blue#049CDB
@green#46a546
@red#9d261d
@yellow#ffc40d
@orange#f89406
@pink#c3325f
@purple#7a43b6
+
+
+ +
+
+

Grid system

+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@siteWidth(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))
+
+
+ +
+
+

Typography

+
+
+ + + + + + + + + + + + + + + + + + +
@baseFontSize13px
@baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight18px
+
+
+ +
+
+

Visuals

+
+
+ + + + + + + + +
@primaryButtonColor@blue
+
+
-

Mixins

+

Mixins from mixins.less

diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 9665306fd5..ffad359130 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -23,7 +23,17 @@ @import "type.less"; @import "forms.less"; @import "tables.less"; + +// Temp catchall for what's missing thus far @import "patterns.less"; +@import "tabs-pills.less"; +@import "breadcrumbs.less"; +@import "pagination.less"; +@import "modals.less"; +@import "twipsy.less"; +@import "popovers.less"; +@import "media-grids.less"; + // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less new file mode 100644 index 0000000000..89a7aef13a --- /dev/null +++ b/lib/breadcrumbs.less @@ -0,0 +1,22 @@ +// BREADCRUMBS +// ----------- + +.breadcrumb { + margin: 0 0 @baseLineHeight; + padding: 7px 14px; + #gradient > .vertical(#ffffff, #f5f5f5); + border: 1px solid #ddd; + .border-radius(3px); + .box-shadow(inset 0 1px 0 @white); + li { + display: inline; + text-shadow: 0 1px 0 @white; + } + .divider { + padding: 0 5px; + color: @grayLight; + } + .active a { + color: @grayDark; + } +} diff --git a/lib/media-grids.less b/lib/media-grids.less new file mode 100644 index 0000000000..7ceade651b --- /dev/null +++ b/lib/media-grids.less @@ -0,0 +1,26 @@ +// MEDIA GRIDS +// ----------- + +.media-grid { + margin-left: -20px; + margin-bottom: 0; + .clearfix(); + li { + display: inline; + } + a { + float: left; + padding: 4px; + margin: 0 0 20px 20px; + border: 1px solid #ddd; + .border-radius(4px); + .box-shadow(0 1px 1px rgba(0,0,0,.075)); + img { + display: block; + } + &:hover { + border-color: @linkColor; + .box-shadow(0 1px 4px rgba(0,105,214,.25)); + } + } +} diff --git a/lib/mixins.less b/lib/mixins.less index 1d2c68856e..b8565bbdcc 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -272,4 +272,41 @@ -khtml-opacity: @opacity / 100; -moz-opacity: @opacity / 100; opacity: @opacity / 100; -} \ No newline at end of file +} + +// Popover arrows +// For tipsies and popovers +#popoverArrow { + .above(@arrowWidth: 5px) { + bottom: 0; + left: 50%; + margin-left: -@arrowWidth; + border-left: @arrowWidth solid transparent; + border-right: @arrowWidth solid transparent; + border-top: @arrowWidth solid @black; + } + .left(@arrowWidth: 5px) { + top: 50%; + right: 0; + margin-top: -@arrowWidth; + border-top: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid transparent; + border-left: @arrowWidth solid @black; + } + .below(@arrowWidth: 5px) { + top: 0; + left: 50%; + margin-left: -@arrowWidth; + border-left: @arrowWidth solid transparent; + border-right: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid @black; + } + .right(@arrowWidth: 5px) { + top: 50%; + left: 0; + margin-top: -@arrowWidth; + border-top: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid transparent; + border-right: @arrowWidth solid @black; + } +} diff --git a/lib/modals.less b/lib/modals.less new file mode 100644 index 0000000000..672431beb6 --- /dev/null +++ b/lib/modals.less @@ -0,0 +1,60 @@ +// MODALS +// ------ + +.modal-backdrop { + background-color: @black; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10000; + // Fade for backdrop + &.fade { opacity: 0; } +} + +.modal-backdrop, .modal-backdrop.fade.in { + .opacity(80); +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + z-index: 11000; + width: 560px; + margin: -250px 0 0 -250px; + background-color: @white; + border: 1px solid #999; + border: 1px solid rgba(0,0,0,.3); + *border: 1px solid #999; /* IE6-7 */ + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + .background-clip(padding-box); + .close { margin-top: 7px; } + &.fade { + .transition(e('opacity .3s linear, top .3s ease-out')); + top: -25%; + } + &.fade.in { top: 50%; } +} +.modal-header { + border-bottom: 1px solid #eee; + padding: 5px 15px; +} +.modal-body { + padding: 15px; +} +.modal-footer { + background-color: #f5f5f5; + padding: 14px 15px 15px; + border-top: 1px solid #ddd; + .border-radius(0 0 6px 6px); + .box-shadow(inset 0 1px 0 @white); + .clearfix(); + margin-bottom: 0; + .btn { + float: right; + margin-left: 5px; + } +} diff --git a/lib/pagination.less b/lib/pagination.less new file mode 100644 index 0000000000..d97a1bab3b --- /dev/null +++ b/lib/pagination.less @@ -0,0 +1,40 @@ +// PAGINATION +// ---------- + +.pagination { + height: @baseLineHeight * 2; + margin: @baseLineHeight 0; + ul { + float: left; + margin: 0; + border: 1px solid #ddd; + border: 1px solid rgba(0,0,0,.15); + .border-radius(3px); + .box-shadow(0 1px 2px rgba(0,0,0,.05)); + } + li { + display: inline; + } + a { + float: left; + padding: 0 14px; + line-height: (@baseLineHeight * 2) - 2; + border-right: 1px solid; + border-right-color: #ddd; + border-right-color: rgba(0,0,0,.15); + *border-right-color: #ddd; /* IE6-7 */ + text-decoration: none; + } + a:hover, + .active a { + background-color: lighten(@blue, 45%); + } + .disabled a, + .disabled a:hover { + background-color: transparent; + color: @grayLight; + } + .next a { + border: 0; + } +} diff --git a/lib/patterns.less b/lib/patterns.less index 618b90840f..bc1229bd90 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -301,251 +301,8 @@ } -// Tabs and Pills -.tabs, -.pills { - margin: 0 0 20px; - padding: 0; - list-style: none; - .clearfix(); - > li { - float: left; - > a { - display: block; - } - } -} - -// Tabs -.tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; - > li { - position: relative; // For the dropdowns mostly - margin-bottom: -1px; - > a { - padding: 0 15px; - margin-right: 2px; - line-height: @baseLineHeight * 2; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; - } - } - } - // Active state, and it's :hover to override normal :hover - .active > a, - .active > a:hover { - color: @gray; - background-color: @white; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; - } -} - -.tabbable { - margin-bottom: @baseLineHeight; - - // Tabs on top - .tabs { - margin-bottom: 0; - border-bottom: 0; - } - .tab-content { - padding: 19px; - border: 1px solid #ddd; - } - - // Tabs on bottom - &.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; - } - &.tabs-bottom .tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; - } - } - &.tabs-bottom .tabs > .active > a, - &.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; - } - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} -// Dropdowns in tabs -.tabs { - // first one for backwards compatibility - .menu-dropdown, - .dropdown-menu { - top: 35px; - border-width: 1px; - .border-radius(0 6px 6px 6px); - } - // first one for backwards compatibility - a.menu:after, - .dropdown-toggle:after { - border-top-color: #999; - margin-top: 15px; - margin-left: 5px; - } - // first one for backwards compatibility - li.open.menu .menu, - .open.dropdown .dropdown-toggle { - border-color: #999; - } - // first one for backwards compatibility - li.open a.menu:after, - .dropdown.open .dropdown-toggle:after { - border-top-color: #555; - } -} - -// Pills -.pills { - a { - margin: 5px 3px 5px 0; - padding: 0 15px; - line-height: 30px; - text-shadow: 0 1px 1px @white; - .border-radius(15px); - &:hover { - color: @white; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColorHover; - } - } - .active a { - color: @white; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColor; - } -} - -// Stacked pills -.pills-vertical > li { - float: none; -} - -// Tabbable areas -.tab-content, -.pill-content { -} -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - - -// BREADCRUMBS -// ----------- - -.breadcrumb { - margin: 0 0 @baseLineHeight; - padding: 7px 14px; - #gradient > .vertical(#ffffff, #f5f5f5); - border: 1px solid #ddd; - .border-radius(3px); - .box-shadow(inset 0 1px 0 @white); - li { - display: inline; - text-shadow: 0 1px 0 @white; - } - .divider { - padding: 0 5px; - color: @grayLight; - } - .active a { - color: @grayDark; - } -} // PAGE HEADERS @@ -852,46 +609,6 @@ input[type=submit].btn { } -// PAGINATION -// ---------- - -.pagination { - height: @baseLineHeight * 2; - margin: @baseLineHeight 0; - ul { - float: left; - margin: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0,0,0,.15); - .border-radius(3px); - .box-shadow(0 1px 2px rgba(0,0,0,.05)); - } - li { - display: inline; - } - a { - float: left; - padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0,0,0,.15); - *border-right-color: #ddd; /* IE6-7 */ - text-decoration: none; - } - a:hover, - .active a { - background-color: lighten(@blue, 45%); - } - .disabled a, - .disabled a:hover { - background-color: transparent; - color: @grayLight; - } - .next a { - border: 0; - } -} // WELLS @@ -913,186 +630,12 @@ input[type=submit].btn { } -// MODALS -// ------ - -.modal-backdrop { - background-color: @black; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 10000; - // Fade for backdrop - &.fade { opacity: 0; } -} - -.modal-backdrop, .modal-backdrop.fade.in { - .opacity(80); -} - -.modal { - position: fixed; - top: 50%; - left: 50%; - z-index: 11000; - width: 560px; - margin: -250px 0 0 -250px; - background-color: @white; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,.3); - *border: 1px solid #999; /* IE6-7 */ - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); - .close { margin-top: 7px; } - &.fade { - .transition(e('opacity .3s linear, top .3s ease-out')); - top: -25%; - } - &.fade.in { top: 50%; } -} -.modal-header { - border-bottom: 1px solid #eee; - padding: 5px 15px; -} -.modal-body { - padding: 15px; -} -.modal-footer { - background-color: #f5f5f5; - padding: 14px 15px 15px; - border-top: 1px solid #ddd; - .border-radius(0 0 6px 6px); - .box-shadow(inset 0 1px 0 @white); - .clearfix(); - margin-bottom: 0; - .btn { - float: right; - margin-left: 5px; - } -} -// POPOVER ARROWS -// -------------- - -#popoverArrow { - .above(@arrowWidth: 5px) { - bottom: 0; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-top: @arrowWidth solid @black; - } - .left(@arrowWidth: 5px) { - top: 50%; - right: 0; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-left: @arrowWidth solid @black; - } - .below(@arrowWidth: 5px) { - top: 0; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid @black; - } - .right(@arrowWidth: 5px) { - top: 50%; - left: 0; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-right: @arrowWidth solid @black; - } -} - -// TWIPSY -// ------ - -.twipsy { - display: block; - position: absolute; - visibility: visible; - padding: 5px; - font-size: 11px; - z-index: 1000; - .opacity(80); - &.fade.in { - .opacity(80); - } - &.above .twipsy-arrow { #popoverArrow > .above(); } - &.left .twipsy-arrow { #popoverArrow > .left(); } - &.below .twipsy-arrow { #popoverArrow > .below(); } - &.right .twipsy-arrow { #popoverArrow > .right(); } -} -.twipsy-inner { - padding: 3px 8px; - background-color: @black; - color: white; - text-align: center; - max-width: 200px; - text-decoration: none; - .border-radius(4px); -} -.twipsy-arrow { - position: absolute; - width: 0; - height: 0; -} -// POPOVERS -// -------- -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1000; - padding: 5px; - display: none; - &.above .arrow { #popoverArrow > .above(); } - &.right .arrow { #popoverArrow > .right(); } - &.below .arrow { #popoverArrow > .below(); } - &.left .arrow { #popoverArrow > .left(); } - .arrow { - position: absolute; - width: 0; - height: 0; - } - .inner { - background-color: @black; - background-color: rgba(0,0,0,.8); - padding: 3px; - overflow: hidden; - width: 280px; - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - } - .title { - background-color: #f5f5f5; - padding: 9px 15px; - line-height: 1; - .border-radius(3px 3px 0 0); - border-bottom:1px solid #eee; - } - .content { - background-color: @white; - padding: 14px; - .border-radius(0 0 3px 3px); - .background-clip(padding-box); - p, ul, ol { - margin-bottom: 0; - } - } -} + // PATTERN ANIMATIONS @@ -1125,32 +668,6 @@ input[type=submit].btn { } -// MEDIA GRIDS -// ----------- - -.media-grid { - margin-left: -20px; - margin-bottom: 0; - .clearfix(); - li { - display: inline; - } - a { - float: left; - padding: 4px; - margin: 0 0 20px 20px; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); - img { - display: block; - } - &:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); - } - } -} // MISC diff --git a/lib/popovers.less b/lib/popovers.less new file mode 100644 index 0000000000..ed335eeedf --- /dev/null +++ b/lib/popovers.less @@ -0,0 +1,45 @@ +// POPOVERS +// -------- + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1000; + padding: 5px; + display: none; + &.above .arrow { #popoverArrow > .above(); } + &.right .arrow { #popoverArrow > .right(); } + &.below .arrow { #popoverArrow > .below(); } + &.left .arrow { #popoverArrow > .left(); } + .arrow { + position: absolute; + width: 0; + height: 0; + } + .inner { + background-color: @black; + background-color: rgba(0,0,0,.8); + padding: 3px; + overflow: hidden; + width: 280px; + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + } + .title { + background-color: #f5f5f5; + padding: 9px 15px; + line-height: 1; + .border-radius(3px 3px 0 0); + border-bottom:1px solid #eee; + } + .content { + background-color: @white; + padding: 14px; + .border-radius(0 0 3px 3px); + .background-clip(padding-box); + p, ul, ol { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less new file mode 100644 index 0000000000..7e6c0bf39e --- /dev/null +++ b/lib/tabs-pills.less @@ -0,0 +1,221 @@ +// Tabs and Pills +.tabs, +.pills { + margin: 0 0 20px; + padding: 0; + list-style: none; + .clearfix(); + > li { + float: left; + > a { + display: block; + } + } +} + +// Tabs +.tabs { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; + > li { + position: relative; // For the dropdowns mostly + margin-bottom: -1px; + > a { + padding: 0 15px; + margin-right: 2px; + line-height: @baseLineHeight * 2; + border: 1px solid transparent; + .border-radius(4px 4px 0 0); + &:hover { + text-decoration: none; + background-color: #eee; + border-color: #eee #eee #ddd; + } + } + } + // Active state, and it's :hover to override normal :hover + .active > a, + .active > a:hover { + color: @gray; + background-color: @white; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + } +} + +.tabbable { + margin-bottom: @baseLineHeight; + + // Tabs on top + .tabs { + margin-bottom: 0; + border-bottom: 0; + } + .tab-content { + padding: 19px; + border: 1px solid #ddd; + } + + // Tabs on bottom + &.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; + } + &.tabs-bottom .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { + border-bottom-color: transparent; + border-top-color: #ddd; + } + } + &.tabs-bottom .tabs > .active > a, + &.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; + } + + // Tabs on left and right + &.tabs-left, + &.tabs-right { + .clearfix(); + .tabs { + // Give a fixed width to avoid floating .tab-con + width: 100px; + // Unfloat them so they stack + > li { + float: none; + margin-bottom: -1px; + > a { + margin-bottom: 2px; + &:hover { + border-color: transparent; + } + } + } + } + } + + // Tabs on left + &.tabs-left { + .tab-content { + margin-left: 100px; + } + .tabs { + float: left; + > li { + margin-right: -1px; + > a { + margin-right: 0; + .border-radius(4px 0 0 4px); + + &:hover { + border-right-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-right-color: transparent; + } + } + } + + // Tabs on right + &.tabs-right { + .tab-content { + margin-right: 100px; + } + .tabs { + float: right; + > li { + margin-left: -1px; + > a { + margin-left: 0; + .border-radius(0 4px 4px 0); + + &:hover { + border-left-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-left-color: transparent; + } + } + } +} + + +// Dropdowns in tabs +.tabs { + // first one for backwards compatibility + .menu-dropdown, + .dropdown-menu { + top: 35px; + border-width: 1px; + .border-radius(0 6px 6px 6px); + } + // first one for backwards compatibility + a.menu:after, + .dropdown-toggle:after { + border-top-color: #999; + margin-top: 15px; + margin-left: 5px; + } + // first one for backwards compatibility + li.open.menu .menu, + .open.dropdown .dropdown-toggle { + border-color: #999; + } + // first one for backwards compatibility + li.open a.menu:after, + .dropdown.open .dropdown-toggle:after { + border-top-color: #555; + } +} + +// Pills +.pills { + a { + margin: 5px 3px 5px 0; + padding: 0 15px; + line-height: 30px; + text-shadow: 0 1px 1px @white; + .border-radius(15px); + &:hover { + color: @white; + text-decoration: none; + text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColorHover; + } + } + .active a { + color: @white; + text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColor; + } +} + +// Stacked pills +.pills-vertical > li { + float: none; +} + +// Tabbable areas +.tab-content, +.pill-content { +} +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content > .active, +.pill-content > .active { + display: block; +} diff --git a/lib/twipsy.less b/lib/twipsy.less new file mode 100644 index 0000000000..5d168db3e6 --- /dev/null +++ b/lib/twipsy.less @@ -0,0 +1,33 @@ +// TWIPSY +// ------ + +.twipsy { + display: block; + position: absolute; + visibility: visible; + padding: 5px; + font-size: 11px; + z-index: 1000; + .opacity(80); + &.fade.in { + .opacity(80); + } + &.above .twipsy-arrow { #popoverArrow > .above(); } + &.left .twipsy-arrow { #popoverArrow > .left(); } + &.below .twipsy-arrow { #popoverArrow > .below(); } + &.right .twipsy-arrow { #popoverArrow > .right(); } +} +.twipsy-inner { + padding: 3px 8px; + background-color: @black; + color: white; + text-align: center; + max-width: 200px; + text-decoration: none; + .border-radius(4px); +} +.twipsy-arrow { + position: absolute; + width: 0; + height: 0; +}