diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 790f98340e..6eff3a5896 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/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: Fri Jan 27 18:48:54 PST 2012 + * Date: Fri Jan 27 19:45:56 PST 2012 */ article, aside, @@ -2691,6 +2691,10 @@ button.btn.small, input[type=submit].btn.small { .btn-group + .btn-group { margin-left: 5px; } +.btn-toolbar { + margin-top: 9px; + margin-bottom: 9px; +} .btn-toolbar .btn-group { display: inline-block; *display: inline; @@ -2769,9 +2773,13 @@ button.btn.small, input[type=submit].btn.small { box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn .caret { - margin-top: 6px; + margin-top: 7px; margin-left: 0; } +.btn:hover .caret, .open.btn-group .caret { + opacity: 1; + filter: alpha(opacity=100); +} .primary .caret, .danger .caret, .info .caret, diff --git a/docs/base-css.html b/docs/base-css.html index 0c6579b1e7..7552fb9b91 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1492,18 +1492,15 @@
  • For buttons to help convey the meaning of an action
  • With links to share context on a user's destination
    • -

    Essentially, anywhere you can put an <i> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use .icon class with no other classes:

    -
    -<i class="icon"></i>
-
    +

    Essentially, anywhere you can put an <i> tag, you can put an icon.

    Examples

    +

    Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

    -

    Use them in buttons - of all types and sizes.

    -
    +
    @@ -1518,7 +1515,7 @@
  • Delete
  • Ban
  • -
  • Make Admin
    • +
  • Make admin
    • @@ -1534,7 +1531,6 @@

    -

    Use them in navigation.

    • Home
      • @@ -1546,9 +1542,8 @@
    -

    Use them with prepended forms.

    - +
    @@ -1556,20 +1551,6 @@
    -
    - -
    -
    - - -
    -
    -
    diff --git a/docs/components.html b/docs/components.html index cf5fcb9289..6ebf6a4f06 100644 --- a/docs/components.html +++ b/docs/components.html @@ -96,32 +96,29 @@

    Button groups

    Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

    You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.

    -
    +
    Left Middle Right
    -
    -
    -
    - 1 - 2 - 3 - 4 -
    -
    - 5 - 6 - 7 -
    -
    - 8 -
    +
    +
    + 1 + 2 + 3 + 4 +
    +
    + 5 + 6 + 7 +
    +
    + 8
    -

    Example markup

    @@ -165,67 +162,65 @@

    Split button dropdowns

    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

    -
    -
    -
    - Action - - -
    -
    - Action - - -
    -
    - Danger - - -
    -
    -
    -
    - Success - - -
    -
    - Info - - -
    -
    -
    +
    +
    + Action + + +
    +
    + Action + + +
    +
    + Danger + + +
    +
    +
    +
    + Success + + +
    +
    + Info + + +
    +

    Example markup

    diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 5b9cae472a..23a6a37a26 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1412,7 +1412,7 @@ 
     <i class="icon search"></i>
    -

    There are also styles available for inverted (white) icons, made ready with one extra class:

    +

    {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}

     <i class="icon white search"></i>
    @@ -1427,18 +1427,15 @@
  • {{_i}}For buttons to help convey the meaning of an action{{/i}}
  • {{_i}}With links to share context on a user's destination{{/i}}
    • -

    {{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use .icon class with no other classes:{{/i}}

    -
    -<i class="icon"></i>
-
    +

    {{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon.{{/i}}

    {{_i}}Examples{{/i}}

    +

    {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

    -

    {{_i}}Use them in buttons - of all types and sizes.{{/i}}

    -
    +
    @@ -1453,7 +1450,7 @@
  • {{_i}}Delete{{/i}}
  • {{_i}}Ban{{/i}}
  • -
  • {{_i}}Make Admin{{/i}}
    • +
  • {{_i}}Make admin{{/i}}
    • @@ -1469,7 +1466,6 @@

    -

    {{_i}}Use them in navigation.{{/i}}

    -

    {{_i}}Use them with prepended forms.{{_i}}

    - +
    @@ -1491,20 +1486,6 @@
    -
    - -
    -
    - - -
    -
    -
    diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index f73052e63a..48de1f8bf2 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -31,32 +31,29 @@

    {{_i}}Button groups{{/i}}

    {{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

    {{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}

    -
    +
    {{_i}}Left{{/i}} {{_i}}Middle{{/i}} {{_i}}Right{{/i}}
    -
    -
    -
    - 1 - 2 - 3 - 4 -
    -
    - 5 - 6 - 7 -
    -
    - 8 -
    +
    +
    + 1 + 2 + 3 + 4 +
    +
    + 5 + 6 + 7 +
    +
    + 8
    -

    {{_i}}Example markup{{/i}}

    @@ -100,67 +97,65 @@

    {{_i}}Split button dropdowns{{/i}}

    {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

    -
    -
    -
    - {{_i}}Action{{/i}} - - -
    -
    - {{_i}}Action{{/i}} - - -
    -
    - {{_i}}Danger{{/i}} - - -
    -
    -
    -
    - {{_i}}Success{{/i}} - - -
    -
    - {{_i}}Info{{/i}} - - -
    -
    -
    +
    +
    + {{_i}}Action{{/i}} + + +
    +
    + {{_i}}Action{{/i}} + + +
    +
    + {{_i}}Danger{{/i}} + + +
    +
    +
    +
    + {{_i}}Success{{/i}} + + +
    +
    + {{_i}}Info{{/i}} + + +
    +

    {{_i}}Example markup{{/i}}

    diff --git a/less/button-groups.less b/less/button-groups.less index fafc955848..471d337481 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -16,6 +16,8 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { + margin-top: @baseLineHeight / 2; + margin-bottom: @baseLineHeight / 2; .btn-group { display: inline-block; .ie7-inline-block(); @@ -110,9 +112,14 @@ // Reposition the caret .btn .caret { - margin-top: 6px; + margin-top: 7px; margin-left: 0; } +.btn:hover .caret, +.open.btn-group .caret { + .opacity(100); +} + // Account for other colors .primary,