From e2a0ce2062b52bce362b68b5bd4dc2202ed397a8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 11 Oct 2011 23:46:42 -0700 Subject: [PATCH] adding new tabble stuff, still a huge work in progress --- bootstrap.css | 59 +++++++++++++---- bootstrap.min.css | 18 ++++-- docs/index.html | 149 +++++++++++++++++++++++++++++++++++++------ docs/javascript.html | 38 +++++------ lib/patterns.less | 100 ++++++++++++++++++++++------- 5 files changed, 288 insertions(+), 76 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index a6ef275701..7c97e933a5 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: Tue Oct 11 21:49:21 PDT 2011 + * Date: Tue Oct 11 23:12:13 PDT 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). @@ -1616,7 +1616,7 @@ a.menu:after, .dropdown-toggle:after { display: block; } .tabs, .pills { - margin: 0 0 20px; + margin: 0 0 18px; padding: 0; list-style: none; zoom: 1; @@ -1640,13 +1640,13 @@ a.menu:after, .dropdown-toggle:after { display: block; } .tabs { - float: left; - width: 100%; - border-bottom: 1px solid #ddd; + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; } .tabs > li { position: relative; - top: 1px; + margin-bottom: -1px; } .tabs > li > a { padding: 0 15px; @@ -1662,11 +1662,51 @@ a.menu:after, .dropdown-toggle:after { background-color: #eee; border-color: #eee #eee #ddd; } -.tabs > li.active > a { +.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 .tabs { + float: left; +} +.tabbable.tabs-left .tabs > li { + float: none; +} +.tabbable.tabs-right .tabs { + float: right; +} +.tabbable.tabs-right .tabs > li { + float: none; } .tabs .menu-dropdown, .tabs .dropdown-menu { top: 35px; @@ -1709,10 +1749,7 @@ a.menu:after, .dropdown-toggle:after { .pills-vertical > li { float: none; } -.tab-content, .pill-content { - clear: both; -} -.tab-content > *, .pill-content > * { +.tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { diff --git a/bootstrap.min.css b/bootstrap.min.css index f6169a793c..5e92c71438 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -262,11 +262,20 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten .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,.topbar .dropdown-menu a.hover,.dropdown-menu a.hover{background-color:#dddddd;background-repeat:repeat-x;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);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);} .open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.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,.pills{margin:0 0 18px;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{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top: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>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;} +.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 .tabs{float:left;} +.tabbable.tabs-left .tabs>li{float:none;} +.tabbable.tabs-right .tabs{float:right;} +.tabbable.tabs-right .tabs>li{float:none;} .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;} @@ -274,8 +283,7 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten .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,.pill-content{clear:both;} -.tab-content>*,.pill-content>*{display:none;} +.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-repeat:repeat-x;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);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;} diff --git a/docs/index.html b/docs/index.html index dd59e877f2..04b0aa2802 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1448,6 +1448,7 @@

Basic tabs example

+

Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter.