From 22e0c5f7c8c092531b111b6042a7d7ee87d406b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 22:06:44 -0800 Subject: [PATCH] redoing the tabs on bottom, left, and right --- bootstrap.css | 198 +++++++++++++++++++++++++++---------------- bootstrap.min.css | 31 ++++--- docs/components.html | 192 +++++++++++++++++++++-------------------- lib/navs.less | 117 +++++++++++++++++++------ 4 files changed, 335 insertions(+), 203 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6d9d78ebb1..ebb3cbe294 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: Sat Jan 7 21:10:08 PST 2012 + * Date: Sat Jan 7 22:06:30 PST 2012 */ html, body { margin: 0; @@ -1948,104 +1948,160 @@ i { opacity: 1; } .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 { +.tabbable:before, .tabbable:after { display: table; *display: inline; content: ""; zoom: 1; } -.tabbable.tabs-left:after, .tabbable.tabs-right:after { +.tabbable:after { clear: both; } -.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { - width: 100px; +.tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs { + border-bottom: 0; } -.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { +.tabs-below .tabs { + border-top: 1px solid #ddd; +} +.tabs-below .tabs > li { + margin-top: -1px; + margin-bottom: 0; +} +.tabs-below .tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.tabs-below .tabs > li > a:hover { + border-bottom-color: transparent; + border-top-color: #ddd; +} +.tabs-below .tabs .active > a, .tabs-below .tabs .active > a:hover { + border-color: transparent #ddd #ddd #ddd; +} +.tabs-left .tabs > li, .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 { +.tabs-left .tabs > li > a, .tabs-right .tabs > li > a { + min-width: 74px; margin-right: 0; + margin-bottom: 3px; +} +.tabs-left .tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} +.tabs-left .tabs > li > a { + margin-right: -1px; -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; +.tabs-left .tabs > li > a:hover { + border-color: #eee #ddd #eee #eee; } -.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { - border-color: #ddd; - border-right-color: transparent; +.tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover { + border-color: #ddd transparent #ddd #ddd; } -.tabbable.tabs-right .tab-content { - margin-right: 100px; -} -.tabbable.tabs-right .tabs { +.tabs-right .tabs { float: right; + margin-left: 19px; + border-left: 1px solid #ddd; } -.tabbable.tabs-right .tabs > li { +.tabs-right .tabs > li > a { 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; +.tabs-right .tabs > li > a:hover { + border-color: #eee #eee #eee #ddd; } -.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { - border-color: #ddd; - border-left-color: transparent; +.tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { + border-color: #ddd #ddd #ddd transparent; } +/* +.tabbable { + + // 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; + } + } + } +} +*/ .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 9974092057..868cfcb659 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -371,20 +371,23 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;} .tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;} .tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.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;*display:inline;content:"";zoom:1;} -.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;} +.tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;} +.tabbable:after{clear:both;} +.tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;} +.tabs-below .tabs{border-top:1px solid #ddd;} +.tabs-below .tabs>li{margin-top:-1px;margin-bottom:0;} +.tabs-below .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabs-below .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} +.tabs-below .tabs .active>a,.tabs-below .tabs .active>a:hover{border-color:transparent #ddd #ddd #ddd;} +.tabs-left .tabs>li,.tabs-right .tabs>li{float:none;} +.tabs-left .tabs>li>a,.tabs-right .tabs>li>a{min-width:74px;margin-right:0;margin-bottom:3px;} +.tabs-left .tabs{float:left;margin-right:19px;border-right:1px solid #ddd;} +.tabs-left .tabs>li>a{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;} +.tabs-left .tabs>li>a:hover{border-color:#eee #ddd #eee #eee;} +.tabs-left .tabs .active>a,.tabs-left .tabs .active>a:hover{border-color:#ddd transparent #ddd #ddd;} +.tabs-right .tabs{float:right;margin-left:19px;border-left:1px solid #ddd;} +.tabs-right .tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;} +.tabs-right .tabs>li>a:hover{border-color:#eee #eee #eee #ddd;} +.tabs-right .tabs .active>a,.tabs-right .tabs .active>a:hover{border-color:#ddd #ddd #ddd transparent;} .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-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;} diff --git a/docs/components.html b/docs/components.html index e0ce812976..6fca1268f7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -258,7 +258,7 @@ -

Tabbable tabs

+

Tabbable nav Bring tabs to life via javascript

What's included

@@ -270,116 +270,128 @@
  • left

    • Changing between them is easy and only requires changing very little markup.

    +
    +

    Custom jQuery plugin

    +

    All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

    +

    Get the javascript →

    -
    -
    -
    -
    -
    - - - - - - - -

    Tabbable tabs

    -

    As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.

    - +
    +

    Tabbable example

    +

    To make tabs tabbable, wrap the .tabs in another div with class .tabbable.

    -
      +
      -

      Oh hai #1!

      +

      I'm in Section 1.

      -

      Oh hai #2!

      +

      Howdy, I'm in Section 2.

      -

      Oh hai #3!

      -
      -
      -

      Oh hai #4!

      +

      What up girl, this is Section 3.

      -
    +
    +
    +

    Straightforward markup

    +

    Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

    +
    +<div class="tabbable">
+  <ul class="nav tabs">
+    <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
+    <li><a href="#2" data-toggle="tab">Section 2</a></li>
+  </ul>
+  <div class="tab-content">
+    <div class="tab-pane active" id="1">
+      <p>I'm in Section 1.</p>
+    </div>
+    <div class="tab-pane" id="2">
+      <p>Howdy, I'm in Section 2.</p>
+    </div>
+  </div>
+</div>
+
    + + -
    -
    -
    - -
    -
    -

    Section 1

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 2

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 3

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -
    -
    -
    -
    - -
    -
    -

    Section 1

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 2

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 3

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -
    -
    -
    - -
    +

    Tabbable in any direction

    +
    + +
    +

    Tabs on the bottom

    +

    Flip the order of the HTML and add a class to put tabs on the bottom.

    +
    -
    -

    Oh hai #1!

    +
    +

    I'm in Section A.

    -
    -

    Oh hai #2!

    +
    +

    Howdy, I'm in Section B.

    -
    -

    Oh hai #3!

    -
    -
    -

    Oh hai #4!

    +
    +

    What up girl, this is Section C.

    -
    +
    +
    +
    +

    Tabs on the left

    +

    Swap the class to put tabs on the left.

    +
    + +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    +
    +
    +
    +
    +

    Tabs on the right

    +

    Swap the class to put tabs on the right.

    +
    + +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    +
    +
    +
    +
    diff --git a/lib/navs.less b/lib/navs.less index 0d31cf3bcf..f76f1acad0 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -203,36 +203,97 @@ // TABBABLE // -------- + +// COMMON STYLES +// ------------- + +// Clear any floats +.tabbable { + .clearfix(); +} +// Remove border on bottom, left, right +.tabs-below .tabs, +.tabs-right .tabs, +.tabs-left .tabs { + border-bottom: 0; +} + +// BOTTOM +// ------ + +.tabs-below .tabs { + border-top: 1px solid #ddd; +} +.tabs-below .tabs > li { + margin-top: -1px; + margin-bottom: 0; +} +.tabs-below .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { + border-bottom-color: transparent; + border-top-color: #ddd; + } +} +.tabs-below .tabs .active > a, +.tabs-below .tabs .active > a:hover { + border-color: transparent #ddd #ddd #ddd; +} + +// LEFT & RIGHT +// ------------ + +// Common styles +.tabs-left .tabs > li, +.tabs-right .tabs > li { + float: none; +} +.tabs-left .tabs > li > a, +.tabs-right .tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} + +// Tabs on the left +.tabs-left .tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} +.tabs-left .tabs > li > a { + margin-right: -1px; + .border-radius(4px 0 0 4px); +} +.tabs-left .tabs > li > a:hover { + border-color: #eee #ddd #eee #eee; +} +.tabs-left .tabs .active > a, +.tabs-left .tabs .active > a:hover { + border-color: #ddd transparent #ddd #ddd; +} + +// Tabs on the right +.tabs-right .tabs { + float: right; + margin-left: 19px; + border-left: 1px solid #ddd; +} +.tabs-right .tabs > li > a { + margin-left: -1px; + .border-radius(0 4px 4px 0); +} +.tabs-right .tabs > li > a:hover { + border-color: #eee #eee #eee #ddd; +} +.tabs-right .tabs .active > a, +.tabs-right .tabs .active > a:hover { + border-color: #ddd #ddd #ddd transparent; +} + + /* .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,