From: Mark Otto Date: Fri, 30 Nov 2012 08:13:30 +0000 (-0800) Subject: Merge branch '2.2.2-wip' into exploratory X-Git-Tag: v3.0.0-rc1~882 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=fca35c0dba060da14ccb29fc56dc37aa1de533c4;p=thirdparty%2Fbootstrap.git Merge branch '2.2.2-wip' into exploratory Conflicts: docs/assets/css/bootstrap.css docs/components.html docs/templates/pages/components.mustache less/alerts.less less/button-groups.less less/buttons.less less/tests/css-tests.html --- fca35c0dba060da14ccb29fc56dc37aa1de533c4 diff --cc Makefile index 601b03beb3,33d48ae222..7b89e412c6 --- a/Makefile +++ b/Makefile @@@ -60,14 -63,16 +60,14 @@@ clean # bootstrap: - mkdir -p bootstrap/img + mkdir -p bootstrap/fonts mkdir -p bootstrap/css mkdir -p bootstrap/js - cp img/* bootstrap/img/ + cp fonts/* bootstrap/fonts/ recess --compile ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css recess --compress ${BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css - recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css - recess --compress ${BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.min.css cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js - uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js + uglifyjs bootstrap/js/bootstrap.js -nc > bootstrap/js/bootstrap.min.tmp.js echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js diff --cc docs/assets/css/bootstrap.css index a27f7a41b7,732724f137..3d43848688 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@@ -2734,8 -2953,13 +2737,9 @@@ table th[class*="span"] cursor: default; background-color: transparent; background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } -.open { - *z-index: 1000; -} - .open > .dropdown-menu { display: block; } @@@ -2916,9 -3159,10 +2920,9 @@@ button.close background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); + background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #bbbbbb; - *border: 0; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-bottom-color: #a2a2a2; @@@ -3431,16 -3761,22 +3436,16 @@@ input[type="button"].btn-block .btn-group-vertical { display: inline-block; - *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; } - .btn-group-vertical .btn { + .btn-group-vertical > .btn { display: block; float: none; - width: 100%; + max-width: 100%; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; + border-radius: 0; } - .btn-group-vertical .btn + .btn { + .btn-group-vertical > .btn + .btn { margin-top: -1px; margin-left: 0; } @@@ -3467,10 -3811,16 +3472,14 @@@ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + border-radius: 4px; } + .alert, + .alert h4 { + color: #c09853; + } + .alert h4 { margin: 0; } @@@ -3775,12 -4279,16 +3788,12 @@@ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); - background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); + background-image: linear-gradient(top, #ffffff, #f2f2f2); background-repeat: repeat-x; border: 1px solid #d4d4d4; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); - *zoom: 1; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); } @@@ -4146,9 -4691,9 +4164,9 @@@ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); background-image: -webkit-linear-gradient(top, #222222, #111111); background-image: -o-linear-gradient(top, #222222, #111111); - background-image: linear-gradient(to bottom, #222222, #111111); + background-image: linear-gradient(top, #222222, #111111); background-repeat: repeat-x; - border-color: #252525; + border-color: #111111; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); } @@@ -4816,12 -5463,39 +4907,12 @@@ } .popover.left .arrow:after { - right: -1px; - bottom: -11px; - border-left-color: rgba(0, 0, 0, 0.25); - border-width: 11px 0 11px 11px; + right: 1px; + bottom: -10px; + border-left-color: #ffffff; + border-right-width: 0; } -.thumbnails { - margin-left: -20px; - list-style: none; - *zoom: 1; -} - -.thumbnails:before, -.thumbnails:after { - display: table; - line-height: 0; - content: ""; -} - -.thumbnails:after { - clear: both; -} - -.row-fluid .thumbnails { - margin-left: 0; -} - -.thumbnails > li { - float: left; - margin-bottom: 20px; - margin-left: 20px; -} - .thumbnail { display: block; padding: 4px; @@@ -5041,11 -5724,14 +5132,11 @@@ a.badge:hover background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); + background-image: linear-gradient(top, #f5f5f5, #f9f9f9); background-repeat: repeat-x; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } diff --cc docs/components.html index ecaf641985,a5b1b6afa7..1c55ee79eb --- a/docs/components.html +++ b/docs/components.html @@@ -1715,84 -1918,97 +1715,84 @@@

Thumbnails Grids of images, videos, text, and more

-

Default thumbnails

+

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

-
-
+
- + - -
  • +
    • +
    - + - -
  • +
    • +
    - + - - +
    + +
     +<div class="row">
 +  <div class="span3">
 +    <a href="#" class="thumbnail">
-       <img src="http://placehold.it/260x180" alt="">
++      <img src="holder.js/260x180" alt="">
 +    </a>
 +  </div>
 +  ...
 +</div>
 +
    -

    Highly customizable

    +

    Custom content thumbnails

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    -
    -
    +
    - +

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

    - -
  • +
    • +
    - +

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

    - - +
    + - -

    Why use thumbnails

    -

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    - -

    Simple, flexible markup

    -

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    - -

    Uses grid column sizes

    -

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    - -

    Markup

    -

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

    -
     -<ul class="thumbnails">
 -  <li class="span4">
 -    <a href="#" class="thumbnail">
 -      <img data-src="holder.js/300x200" alt="">
 -    </a>
 -  </li>
 -  ...
 -</ul>
 -
    -

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

     -<ul class="thumbnails">
 -  <li class="span4">
 +<div class="row">
 +  <div class="span4">
      <div class="thumbnail">
-       <img src="http://placehold.it/300x200" alt="">
+       <img data-src="holder.js/300x200" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...</p>
      </div>
diff --cc docs/templates/pages/components.mustache
index 54fce9c4a2,6fa1947028..4db4497e34
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@@ -1647,84 -1847,97 +1647,84 @@@
              
    {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}
    
            
  
 -          
    {{_i}}Default thumbnails{{/i}}
    
 +          
    {{_i}}Default thumbnails{{/i}}
    
            
    {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}
    
 -          
    
 -            
    
 +              
    
                  
-                   
+                   
                  
 -              
 -              
  • 
 +              
    • 
 +              
    
                  
-                   
+                   
                  
 -              
 -              
  • 
 +              
    • 
 +              
    
                  
-                   
+                   
                  
 -              
 -            
 -          
    
 +              
 +            
 +          {{! /.bs-docs-example }}
 +
     +<div class="row">
 +  <div class="span3">
 +    <a href="#" class="thumbnail">
-       <img src="http://placehold.it/260x180" alt="">
++      <img src="holder.js/260x180" alt="">
 +    </a>
 +  </div>
 +  ...
 +</div>
 +
    
  
 -          
    {{_i}}Highly customizable{{/i}}
    
 +          
    {{_i}}Custom content thumbnails{{/i}}
    
            
    {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}
    
 -          
    
 -            
      
 -              
    • 
 +          
      
 +            
      
 +              
      
                  
      
-                   
+                   
                    
      
                      
      {{_i}}Thumbnail label{{/i}}
      
                      
      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
      
                      
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
                    
      
                  
      
 -              
      • 
 -              
    • 
 +              
    
 +              
    
                  
    
-                   
+                   
                    
    
                      
    {{_i}}Thumbnail label{{/i}}
    
                      
    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
    
                      
    {{_i}}Action{{/i}} {{_i}}Action{{/i}}
    
                    
    
                  
    
 -              
 -              
  • 
 +              
    • 
 +              
    
                  
    
-                   
+                   
                    
    
                      
    {{_i}}Thumbnail label{{/i}}
    
                      
    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
    
                      
    {{_i}}Action{{/i}} {{_i}}Action{{/i}}
    
                    
    
                  
    
 -              
 -            
 -          
    
 -
 -          
    {{_i}}Why use thumbnails{{/i}}
    
 -          
    {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}
    
 -
 -          
    {{_i}}Simple, flexible markup{{/i}}
    
 -          
    {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}
    
 -
 -          
    {{_i}}Uses grid column sizes{{/i}}
    
 -          
    {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}
    
 -
 -          
    {{_i}}Markup{{/i}}
    
 -          
    {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}
    
 -
     -<ul class="thumbnails">
 -  <li class="span4">
 -    <a href="#" class="thumbnail">
 -      <img data-src="holder.js/300x200" alt="">
 -    </a>
 -  </li>
 -  ...
 -</ul>
 -
    
 -          
    {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}
    
 +              
 +            
 +          {{! /.bs-docs-example }}
  
     -<ul class="thumbnails">
 -  <li class="span4">
 +<div class="row">
 +  <div class="span4">
      <div class="thumbnail">
-       <img src="http://placehold.it/300x200" alt="">
+       <img data-src="holder.js/300x200" alt="">
        <h3>{{_i}}Thumbnail label{{/i}}</h3>
        <p>{{_i}}Thumbnail caption...{{/i}}</p>
      </div>
diff --cc less/alerts.less
index 977d960b66,37e50f9038..1425d06524
--- a/less/alerts.less
+++ b/less/alerts.less
@@@ -12,7 -12,11 +12,11 @@@
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    background-color: @warningBackground;
    border: 1px solid @warningBorder;
 -  .border-radius(@baseBorderRadius);
 +  border-radius: @baseBorderRadius;
+ }
+ .alert,
+ .alert h4 {
+   // Specified for the h4 to prevent conflicts of changing @headingsColor
    color: @warningText;
  }
  .alert h4 {
diff --cc less/button-groups.less
index 7b7c779ae6,d6054c8085..b6913b13c7
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@@ -187,15 -200,16 +188,15 @@@
  // ----------------------
  
  .btn-group-vertical {
 -  display: inline-block; // makes buttons only take up the width they need
 -  .ie7-inline-block();
 +  display: inline-block; // Make buttons only take up the width they need
  }
- .btn-group-vertical .btn {
+ .btn-group-vertical > .btn {
    display: block;
    float: none;
-   width: 100%;
 +  border-radius: 0;
+   max-width: 100%;
 -  .border-radius(0);
  }
- .btn-group-vertical .btn + .btn {
+ .btn-group-vertical > .btn + .btn {
    margin-left: 0;
    margin-top: -1px;
  }
diff --cc less/carousel.less
index ba0de8c9b4,2dc0506032..a7ff59f06c
--- a/less/carousel.less
+++ b/less/carousel.less
@@@ -10,14 -10,14 +10,14 @@@
  }
  
  .carousel-inner {
 +  position: relative;
    overflow: hidden;
    width: 100%;
 -  position: relative;
  }
  
- .carousel {
+ .carousel-inner {
  
-   .item {
+   > .item {
      display: none;
      position: relative;
      .transition(.6s ease-in-out left);
diff --cc less/tests/css-tests.html
index 2d9725b3bf,f4df422aa1..c1066741cd
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@@ -776,8 -1049,31 +776,7 @@@
    
  
  
 -
    Fluid thumbnails
    
 -
    
 -  
    
 -    
 -  
    
 -
    
 -
 -
  
-