RubyGems - sass-twitter-bootstrap - Versions diffs - 2.1.1 → 2.2.1 - Mend

sass-twitter-bootstrap 2.1.1 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

data/vendor/assets/javascripts/twitter/bootstrap.js CHANGED Viewed

@@ -10,3 +10,4 @@
 //= require twitter/bootstrap-collapse
 //= require twitter/bootstrap-carousel
 //= require twitter/bootstrap-typeahead
+//= require twitter/bootstrap-affix

data/vendor/assets/stylesheets/tests/navbar.html CHANGED Viewed

@@ -11,9 +11,12 @@
     <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
     <style>
       body {
-        padding-top: 60px;
+        padding-top: 0;
         padding-bottom: 30px;
       }
+      .navbar {
+        margin-top: 20px;
+      }
     </style>
     <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
@@ -32,27 +35,6 @@
   <body>
-    <!-- Fixed navbar -->
-    <div class="navbar navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </a>
-          <a class="brand" href="#">Project name</a>
-          <div class="nav-collapse">
-            <ul class="nav">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="#about">About</a></li>
-              <li><a href="#contact">Contact</a></li>
-            </ul>
-          </div><!--/.nav-collapse -->
-        </div>
-      </div>
-    </div>
     <div class="container">
       <!-- Static navbar -->
@@ -65,11 +47,28 @@
               <span class="icon-bar"></span>
             </a>
             <a class="brand" href="#">Project name</a>
-            <div class="nav-collapse">
+            <div class="nav-collapse collapse">
               <ul class="nav">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#about">About</a></li>
                 <li><a href="#contact">Contact</a></li>
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                  <ul class="dropdown-menu">
+                    <li><a href="#">Action</a></li>
+                    <li><a href="#">Another action</a></li>
+                    <li><a href="#">Something else here</a></li>
+                    <li class="divider"></li>
+                    <li class="nav-header">Nav header</li>
+                    <li><a href="#">Separated link</a></li>
+                    <li><a href="#">One more separated link</a></li>
+                  </ul>
+                </li>
+              </ul>
+              <ul class="nav pull-right">
+                <li class="active"><a href="./navbar.html">Default</a></li>
+                <li><a href="./navbar-static-top.html">Static top</a></li>
+                <li><a href="./navbar-fixed-top.html">Fixed top</a></li>
               </ul>
             </div><!--/.nav-collapse -->
           </div>
@@ -90,19 +89,19 @@
     <!-- Le javascript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="../assets/js/jquery.js"></script>
-    <script src="../assets/js/bootstrap-transition.js"></script>
-    <script src="../assets/js/bootstrap-alert.js"></script>
-    <script src="../assets/js/bootstrap-modal.js"></script>
-    <script src="../assets/js/bootstrap-dropdown.js"></script>
-    <script src="../assets/js/bootstrap-scrollspy.js"></script>
-    <script src="../assets/js/bootstrap-tab.js"></script>
-    <script src="../assets/js/bootstrap-tooltip.js"></script>
-    <script src="../assets/js/bootstrap-popover.js"></script>
-    <script src="../assets/js/bootstrap-button.js"></script>
-    <script src="../assets/js/bootstrap-collapse.js"></script>
-    <script src="../assets/js/bootstrap-carousel.js"></script>
-    <script src="../assets/js/bootstrap-typeahead.js"></script>
+    <script src="../../docs/assets/js/jquery.js"></script>
+    <script src="../../docs/assets/js/bootstrap-transition.js"></script>
+    <script src="../../docs/assets/js/bootstrap-alert.js"></script>
+    <script src="../../docs/assets/js/bootstrap-modal.js"></script>
+    <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
+    <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
+    <script src="../../docs/assets/js/bootstrap-tab.js"></script>
+    <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
+    <script src="../../docs/assets/js/bootstrap-popover.js"></script>
+    <script src="../../docs/assets/js/bootstrap-button.js"></script>
+    <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
+    <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
+    <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
   </body>
 </html>

data/vendor/assets/stylesheets/twitter/_accordion.scss CHANGED Viewed

@@ -12,7 +12,7 @@
 .accordion-group {
   margin-bottom: 2px;
   border: 1px solid #e5e5e5;
-  @include border-radius(4px);
+  @include border-radius($baseBorderRadius);
 }
 .accordion-heading {
   border-bottom: 0;

data/vendor/assets/stylesheets/twitter/_alerts.scss CHANGED Viewed

@@ -12,7 +12,7 @@
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   background-color: $warningBackground;
   border: 1px solid $warningBorder;
-  @include border-radius(4px);
+  @include border-radius($baseBorderRadius);
   color: $warningText;
 }
 .alert h4 {

data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss CHANGED Viewed

@@ -8,7 +8,7 @@
   margin: 0 0 $baseLineHeight;
   list-style: none;
   background-color: #f5f5f5;
-  @include border-radius(4px);
+  @include border-radius($baseBorderRadius);
   li {
     display: inline-block;
     @include ie7-inline-block();

data/vendor/assets/stylesheets/twitter/_button-groups.scss CHANGED Viewed

@@ -6,6 +6,8 @@
 // Make the div behave like a button
 .btn-group {
   position: relative;
+  display: inline-block;
+  @include ie7-inline-block();
   font-size: 0; // remove as part 1 of font-size inline-block hack
   vertical-align: middle; // match .btn alignment given font-size hack above
   white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
@@ -22,10 +24,6 @@
   font-size: 0; // Hack to remove whitespace that results from using inline-block
   margin-top: $baseLineHeight / 2;
   margin-bottom: $baseLineHeight / 2;
-  .btn-group {
-    display: inline-block;
-    @include ie7-inline-block();
-  }
   .btn + .btn,
   .btn-group + .btn,
   .btn + .btn-group {
@@ -120,7 +118,7 @@
 .btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
-  @include box-shadow(#{inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
+  @include box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
   *padding-top: 5px;
   *padding-bottom: 5px;
 }
@@ -147,7 +145,7 @@
   // Remove the gradient and set the same inset shadow as the :active state
   .dropdown-toggle {
     background-image: none;
-    @include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
+    @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
   }
   // Keep the hover's background when dropdown is open
@@ -193,8 +191,7 @@
 }
 // Upside down carets for .dropup
 .dropup .btn-large .caret {
-  border-bottom: 5px solid $black;
-  border-top: 0;
+  border-bottom-width: 5px;
 }

data/vendor/assets/stylesheets/twitter/_buttons.scss CHANGED Viewed

@@ -10,7 +10,7 @@
 .btn {
   display: inline-block;
   @include ie7-inline-block();
-  padding: 4px 14px;
+  padding: 4px 12px;
   margin-bottom: 0; // For input.btn
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
@@ -22,9 +22,9 @@
   border: 1px solid $btnBorder;
   *border: 0; // Remove the border to prevent IE7's black border on input:focus
   border-bottom-color: darken($btnBorder, 10%);
-  @include border-radius(4px);
+  @include border-radius($baseBorderRadius);
   @include ie7-restore-left-whitespace(); // Give IE7 some love
-  @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
+  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
   // Hover state
   &:hover {
@@ -51,7 +51,7 @@
     background-color: darken($white, 15%) \9;
     background-image: none;
     outline: 0;
-    @include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
+    @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
   }
   // Disabled state
@@ -73,30 +73,31 @@
 // Large
 .btn-large {
-  padding: 9px 14px;
-  font-size: $baseFontSize + 2px;
-  line-height: normal;
-  @include border-radius(5px);
+  padding: $paddingLarge;
+  font-size: $fontSizeLarge;
+  @include border-radius($borderRadiusLarge);
 }
-.btn-large [class^="icon-"] {
+.btn-large [class^="icon-"],
+.btn-large [class*=" icon-"] {
   margin-top: 2px;
 }
 // Small
 .btn-small {
-  padding: 3px 9px;
-  font-size: $baseFontSize - 2px;
-  line-height: $baseLineHeight - 2px;
+  padding: $paddingSmall;
+  font-size: $fontSizeSmall;
+  @include border-radius($borderRadiusSmall);
 }
-.btn-small [class^="icon-"] {
-  margin-top: 0px;
+.btn-small [class^="icon-"],
+.btn-small [class*=" icon-"] {
+  margin-top: 0;
 }
 // Mini
 .btn-mini {
-  padding: 2px 6px;
-  font-size: $baseFontSize - 3px;
-  line-height: $baseLineHeight - 3px;
+  padding: $paddingMini;
+  font-size: $fontSizeMini;
+  @include border-radius($borderRadiusSmall);
 }

data/vendor/assets/stylesheets/twitter/_code.scss CHANGED Viewed

@@ -35,7 +35,7 @@ pre {
   background-color: #f5f5f5;
   border: 1px solid #ccc; // fallback for IE7-8
   border: 1px solid rgba(0,0,0,.15);
-  @include border-radius(4px);
+  @include border-radius($baseBorderRadius);
   // Make prettyprint styles more spaced out for readability
   &.prettyprint {

data/vendor/assets/stylesheets/twitter/_component-animations.scss CHANGED Viewed

@@ -4,10 +4,10 @@
 .fade {
-  @include opacity(0);
+  opacity: 0;
   @include transition(opacity .15s linear);
   &.in {
-    @include opacity(100);
+    opacity: 1;
   }
 }

data/vendor/assets/stylesheets/twitter/_dropdowns.scss CHANGED Viewed

@@ -72,7 +72,7 @@
   }
   // Links within the dropdown menu
-  a {
+  li > a {
     display: block;
     padding: 3px 20px;
     clear: both;
@@ -90,7 +90,6 @@
 .dropdown-submenu:hover > a {
   text-decoration: none;
   color: $dropdownLinkColorHover;
-  background-color: $dropdownLinkBackgroundHover;
   @include gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
 }
@@ -98,10 +97,9 @@
 // ------------
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
-  color: $dropdownLinkColorHover;
+  color: $dropdownLinkColorActive;
   text-decoration: none;
   outline: 0;
-  background-color: $dropdownLinkBackgroundActive;
   @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
 }
@@ -116,6 +114,7 @@
 .dropdown-menu .disabled > a:hover {
   text-decoration: none;
   background-color: transparent;
+  background-image: none; // Remove CSS gradient
   cursor: default;
 }
@@ -163,6 +162,7 @@
 .dropdown-submenu {
   position: relative;
 }
+// Default dropdowns
 .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
@@ -176,6 +176,18 @@
   display: block;
 }
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  -webkit-border-radius: 5px 5px 5px 0;
+     -moz-border-radius: 5px 5px 5px 0;
+          border-radius: 5px 5px 5px 0;
+}
+// Caret to indicate there is a submenu
 .dropdown-submenu > a:after {
   display: block;
   content: " ";
@@ -193,6 +205,21 @@
   border-left-color: $dropdownLinkColorHover;
 }
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  // Undo the float
+  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+  float: none;
+  // Positioning the submenu
+  > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+       -moz-border-radius: 6px 0 6px 6px;
+            border-radius: 6px 0 6px 6px;
+  }
+}
 // Tweak nav headers
 // -----------------
@@ -206,5 +233,5 @@
 // ---------
 .typeahead {
   margin-top: 2px; // give it some space to breathe
-  @include border-radius(4px);
+  @include border-radius($baseBorderRadius);
 }

data/vendor/assets/stylesheets/twitter/_forms.scss CHANGED Viewed

@@ -81,11 +81,12 @@ input[type="color"],
   display: inline-block;
   height: $baseLineHeight;
   padding: 4px 6px;
-  margin-bottom: 9px;
+  margin-bottom: $baseLineHeight / 2;;
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
   color: $gray;
   @include border-radius($inputBorderRadius);
+  vertical-align: middle;
 }
 // Reset appearance properties for textual inputs and textarea
@@ -119,14 +120,14 @@ input[type="color"],
   background-color: $inputBackground;
   border: 1px solid $inputBorder;
   @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  @include transition(#{border linear .2s, box-shadow linear .2s});
+  @include transition(border linear .2s, box-shadow linear .2s);
   // Focus state
   &:focus {
     border-color: rgba(82,168,236,.8);
     outline: 0;
     outline: thin dotted \9; /* IE6-9 */
-    @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)});
+    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
   }
 }
@@ -154,9 +155,9 @@ input[type="checkbox"] {
 // Set the height of select and file controls to match text inputs
 select,
 input[type="file"] {
-  height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+  height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
-  line-height: 30px;
+  line-height: $inputHeight;
 }
 // Make select elements obey height by applying a border
@@ -210,7 +211,7 @@ input[type="checkbox"]:focus {
 // Placeholder
 // -------------------------
-// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn’t understand a selector
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
 input,
 textarea {
   @include placeholder();
@@ -223,13 +224,13 @@ textarea {
 // Indent the labels to position radios/checkboxes as hanging
 .radio,
 .checkbox {
-  min-height: 18px; // clear the floating input if there is no label text
-  padding-left: 18px;
+  min-height: $baseLineHeight; // clear the floating input if there is no label text
+  padding-left: 20px;
 }
 .radio input[type="radio"],
 .checkbox input[type="checkbox"] {
   float: left;
-  margin-left: -18px;
+  margin-left: -20px;
 }
 // Move the options list down to align with labels
@@ -304,8 +305,17 @@ textarea[class*="span"],
 .controls-row {
   @include clearfix(); // Clear the float from controls
 }
-.controls-row [class*="span"] {
-  float: left; // Float to collapse white-space for proper grid alignment
+// Float to collapse white-space for proper grid alignment
+.controls-row [class*="span"],
+// Redeclare the fluid grid collapse since we undo the float for inputs
+.row-fluid .controls-row [class*="span"] {
+  float: left;
+}
+// Explicity set top padding on all checkboxes/radios, not just first-child
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"] {
+  padding-top: 5px;
 }
@@ -413,16 +423,23 @@ select:focus:required:invalid {
 .input-append,
 .input-prepend {
   margin-bottom: 5px;
-  font-size: 0;
+  font-size: 0; // white space collapse hack
   white-space: nowrap; // Prevent span and input from separating
+  // Reset the white space collapse hack
+  input,
+  select,
+  .uneditable-input,
+  .dropdown-menu {
+    font-size: $baseFontSize;
+  }
   input,
   select,
   .uneditable-input {
     position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
     margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
     *margin-left: 0;
-    font-size: $baseFontSize;
     vertical-align: top;
     @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
     // Make input on top when focused so blue border and shadow always show
@@ -454,6 +471,7 @@ select:focus:required:invalid {
     border-color: $green;
   }
 }
 .input-prepend {
   .add-on,
   .btn {
@@ -461,17 +479,23 @@ select:focus:required:invalid {
   }
   .add-on:first-child,
   .btn:first-child {
+    // FYI, `.btn:first-child` accounts for a button group that's prepended
     @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
   }
 }
 .input-append {
   input,
   select,
   .uneditable-input {
     @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+    + .btn-group .btn {
+      @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    }
   }
   .add-on,
-  .btn {
+  .btn,
+  .btn-group {
     margin-left: -1px;
   }
   .add-on:last-child,
@@ -479,12 +503,16 @@ select:focus:required:invalid {
     @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
   }
 }
 // Remove all border-radius for inputs with both prepend and append
 .input-prepend.input-append {
   input,
   select,
   .uneditable-input {
     @include border-radius(0);
+    + .btn-group .btn {
+      @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    }
   }
   .add-on:first-child,
   .btn:first-child {
@@ -496,10 +524,14 @@ select:focus:required:invalid {
     margin-left: -1px;
     @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
   }
+  .btn-group:first-child {
+    margin-left: 0;
+  }
 }
 // SEARCH FORM
 // -----------