bootstrap-sass-rails 3.0.0.0.rc1 → 3.0.0.0.rc2

data/app/assets/stylesheets/twitter/bootstrap/_navs.scss

@@ -39,11 +39,6 @@
         cursor: not-allowed;
       }
     }
-
-    // Space the headers out when they follow another list item (link)
-    + .nav-header {
-      margin-top: 9px;
-    }
   }
 
   // Open dropdowns
@@ -61,23 +56,19 @@
     }
   }
 
-  // Redeclare pull classes because of specificity
-  // Todo: consider making these utilities !important to avoid this bullshit
-  > .pull-right {
-    float: right;
-  }
-
   // Dividers (basically an hr) within the dropdown
   .nav-divider {
     @include nav-divider();
   }
-}
 
+  // Prevent IE8 from misplacing imgs
+  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+  > li > a > img {
+    max-width: none;
+  }
+}
 
 
-// Nav variations
-// --------------------------------------------------
-
 // Tabs
 // -------------------------
 
@@ -153,14 +144,16 @@
   > li {
     float: none;
     + li {
-      > a {
-        margin-top: 2px;
-        margin-left: 0; // no need for this gap between nav items
-      }
+      margin-top: 2px;
+      margin-left: 0; // no need for this gap between nav items
     }
   }
 }
 
+
+// Nav variations
+// --------------------------------------------------
+
 // Justified nav links
 // -------------------------
 
@@ -188,11 +181,9 @@
   > .active > a {
     border-bottom-color: $nav-tabs-justified-active-link-border-color;
   }
-
 }
 
 
-
 // Tabbable tabs
 // -------------------------
 

data/app/assets/stylesheets/twitter/bootstrap/_pagination.scss

@@ -6,13 +6,13 @@
   padding-left: 0;
   margin: $line-height-computed 0;
   border-radius: $border-radius-base;
-  
+
   > li {
     display: inline; // Remove list-style and block-level defaults
     > a,
     > span {
       float: left; // Collapse white-space
-      padding: 4px 12px;
+      padding: $padding-base-vertical $padding-base-horizontal;
       line-height: $line-height-base;
       text-decoration: none;
       background-color: $pagination-bg;
@@ -33,7 +33,7 @@
       }
     }
   }
-  
+
   > li > a:hover,
   > li > a:focus,
   > .active > a,
@@ -45,7 +45,7 @@
     color: $pagination-active-color;
     cursor: default;
   }
-  
+
   > .disabled {
     > span,
     > a,
@@ -62,47 +62,11 @@
 // --------------------------------------------------
 
 // Large
-.pagination-large {
-  > li {
-    > a,
-    > span {
-      padding: $padding-large-vertical $padding-large-horizontal;
-      font-size: $font-size-large;
-    }
-    &:first-child {
-      > a,
-      > span {
-        @include border-left-radius($border-radius-large);
-      }
-    }
-    &:last-child {
-      > a,
-      > span {
-        @include border-right-radius($border-radius-large);
-      }
-    }
-  }
+.pagination-lg {
+  @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
 }
 
 // Small
-.pagination-small {
-  > li {
-    > a,
-    > span {
-      padding: $padding-small-vertical $padding-small-horizontal;
-      font-size: $font-size-small;
-    }
-    &:first-child {
-      > a,
-      > span {
-        @include border-left-radius($border-radius-small);
-      }
-    }
-    &:last-child {
-      > a,
-      > span {
-        @include border-right-radius($border-radius-small);
-      }
-    }
-  }
+.pagination-sm {
+  @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small);
 }

data/app/assets/stylesheets/twitter/bootstrap/_panels.scss

@@ -5,22 +5,54 @@
 
 // Base class
 .panel {
-  padding: 15px;
-  margin-bottom: 20px;
+  margin-bottom: $line-height-computed;
   background-color: $panel-bg;
   border: 1px solid $panel-border;
   border-radius: $panel-border-radius;
   @include box-shadow(0 1px 1px rgba(0,0,0,.05));
 }
 
+// Panel contents
+.panel-body {
+  padding: 15px;
+}
+
+// List groups in panels
+//
+// By default, space out list group content from panel headings to account for
+// any kind of custom content between the two.
+
+.panel {
+  .list-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      border-width: 1px 0;
+
+      // Remove border radius for top one
+      &:first-child {
+        @include border-top-radius(0);
+      }
+      // But keep it for the last one
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+  .list-group-item:first-child {
+    border-top-width: 0;
+  }
+}
+
 // Optional heading
 .panel-heading {
-  margin: -15px -15px 15px;
   padding: 10px 15px;
   background-color: $panel-heading-bg;
   border-bottom: 1px solid $panel-border;
-  border-top-left-radius:  ($panel-border-radius - 1);
-  border-top-right-radius: ($panel-border-radius - 1);
+  @include border-top-radius($panel-border-radius - 1);
 }
 
 // Within heading, strip any `h*` tag of it's default margins for spacing.
@@ -28,75 +60,69 @@
   margin-top: 0;
   margin-bottom: 0;
   font-size: ($font-size-base * 1.25);
-  font-weight: 500;
+  > a {
+    color: inherit;
+  }
 }
 
 // Optional footer (stays gray in every modifier class)
 .panel-footer {
-  margin: 15px -15px -15px;
   padding: 10px 15px;
   background-color: $panel-footer-bg;
   border-top: 1px solid $panel-border;
-  border-bottom-left-radius:  ($panel-border-radius - 1);
-  border-bottom-right-radius: ($panel-border-radius - 1);
+  @include border-bottom-radius($panel-border-radius - 1);
 }
 
-// Contextual variations
-.panel-primary {
-  border-color: $panel-primary-border;
+
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+  // Tighten up margin so it's only between panels
+  .panel {
+    margin-bottom: 0;
+    border-radius: $panel-border-radius;
+    overflow: hidden; // crop contents when collapsed
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+
   .panel-heading {
-    color: $panel-primary-text;
-    background-color: $panel-primary-heading-bg;
-    border-color: $panel-primary-border;
+    border-bottom: 0;
+    + .panel-collapse .panel-body {
+      border-top: 1px solid $panel-border;
+    }
+  }
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid $panel-border;
+    }
+  }
+
+  // New subcomponent for wrapping collapsable content for proper animations
+  .panel-collapse {
+
   }
 }
+
+
+// Contextual variations
+.panel-primary {
+  @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
+}
 .panel-success {
-  border-color: $panel-success-border;
-  .panel-heading {
-    color: $panel-success-text;
-    background-color: $panel-success-heading-bg;
-    border-color: $panel-success-border;
-  }
+  @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
 }
 .panel-warning {
-  border-color: $panel-warning-border;
-  .panel-heading {
-    color: $panel-warning-text;
-    background-color: $panel-warning-heading-bg;
-    border-color: $panel-warning-border;
-  }
+  @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
 }
 .panel-danger {
-  border-color: $panel-danger-border;
-  .panel-heading {
-    color: $panel-danger-text;
-    background-color: $panel-danger-heading-bg;
-    border-color: $panel-danger-border;
-  }
+  @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
 }
 .panel-info {
-  border-color: $panel-info-border;
-  .panel-heading {
-    color: $panel-info-text;
-    background-color: $panel-info-heading-bg;
-    border-color: $panel-info-border;
-  }
-}
-
-// List groups in panels
-.list-group-flush {
-  margin: 15px -15px -15px;
-
-  .list-group-item {
-    border-width: 1px 0;
-
-    // Remove border radius for top one
-    &:first-child {
-      @include border-top-radius(0);
-    }
-    // But keep it for the last one
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
+  @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
 }

data/app/assets/stylesheets/twitter/bootstrap/_popovers.scss

@@ -13,8 +13,6 @@
   padding: 1px;
   text-align: left; // Reset given new insertion method
   background-color: $popover-bg;
-  -webkit-bg-clip: padding-box;
-     -moz-bg-clip: padding;
   background-clip: padding-box;
   border: 1px solid $popover-fallback-border-color;
   border: 1px solid $popover-border-color;

data/app/assets/stylesheets/twitter/bootstrap/_progress-bars.scss

@@ -18,19 +18,13 @@
   to    { background-position: 0 0; }
 }
 
-// IE9
-@-ms-keyframes progress-bar-stripes {
-  from  { background-position: 40px 0; }
-  to    { background-position: 0 0; }
-}
-
 // Opera
 @-o-keyframes progress-bar-stripes {
   from  { background-position: 0 0; }
   to    { background-position: 40px 0; }
 }
 
-// Spec
+// Spec and IE10+
 @keyframes progress-bar-stripes {
   from  { background-position: 40px 0; }
   to    { background-position: 0 0; }
@@ -67,7 +61,7 @@
 // Striped bars
 .progress-striped .progress-bar {
   @include gradient-striped($progress-bar-bg);
-  @include background-size(40px 40px);
+  background-size: 40px 40px;
 }
 
 // Call animation for the active one

data/app/assets/stylesheets/twitter/bootstrap/_responsive-utilities.scss

@@ -35,48 +35,93 @@
 
 // Visibility utilities
 
-// For Phones
-// TODO: Revert to more less like syntax once Sass supports it
-@include responsive-visibility(visible-sm);
-@include responsive-invisibility(visible-md);
-@include responsive-invisibility(visible-lg);
-
-@include responsive-invisibility(hidden-sm);
-@include responsive-visibility(hidden-md);
-@include responsive-visibility(hidden-lg);
-
-
-// Tablets & small desktops only
+@include responsive-visibility('.visible-xs');
 @media (min-width: $screen-tablet) and (max-width: $screen-tablet-max) {
-  // TODO: Revert to more less like syntax once Sass supports it
-  @include responsive-invisibility(visible-sm);
-  @include responsive-visibility(visible-md);
-  @include responsive-invisibility(visible-lg);
-
-  @include responsive-visibility(hidden-sm);
-  @include responsive-invisibility(hidden-md);
-  @include responsive-visibility(hidden-lg);
+  @include responsive-invisibility('.visible-xs');
+}
+@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
+  @include responsive-invisibility('.visible-xs');
+}
+@media (min-width: $screen-large-desktop) {
+  @include responsive-invisibility('.visible-xs');
+}
+@include responsive-invisibility('.visible-sm');
+@media (min-width: $screen-tablet) and (max-width: $screen-tablet-max) {
+  @include responsive-visibility('.visible-sm');
+}
+@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
+  @include responsive-invisibility('.visible-sm');
+}
+@media (min-width: $screen-large-desktop) {
+  @include responsive-invisibility('.visible-sm');
+}
+@include responsive-invisibility('.visible-md');
+@media (min-width: $screen-tablet) and (max-width: $screen-tablet-max) {
+  @include responsive-invisibility('.visible-md');
+}
+@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
+  @include responsive-visibility('.visible-md');
+}
+@media (min-width: $screen-large-desktop) {
+  @include responsive-invisibility('.visible-md');
+}
+@include responsive-invisibility('.visible-lg');
+@media (min-width: $screen-tablet) and (max-width: $screen-tablet-max) {
+  @include responsive-invisibility('.visible-lg');
+}
+@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
+  @include responsive-invisibility('.visible-lg');
+}
+@media (min-width: $screen-large-desktop) {
+  @include responsive-visibility('.visible-lg');
 }
 
-// For desktops
-@media (min-width: $screen-desktop) {
-  // TODO: Revert to more less like syntax once Sass supports it
-  @include responsive-invisibility(visible-sm);
-  @include responsive-invisibility(visible-md);
-  @include responsive-visibility(visible-lg);
-
-  @include responsive-visibility(hidden-sm);
-  @include responsive-visibility(hidden-md);
-  @include responsive-invisibility(hidden-lg);
+@include responsive-invisibility('.hidden-xs');
+@media (min-width: $screen-tablet) and (max-width: $screen-tablet-max) {
+  @include responsive-visibility('.hidden-xs');
+}
+@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
+  @include responsive-visibility('.hidden-xs');
+}
+@media (min-width: $screen-large-desktop) {
+  @include responsive-visibility('.hidden-xs');
+}
+@include responsive-visibility('.hidden-sm');
+@media (min-width: $screen-tablet) and (max-width: $screen-tablet-max) {
+  @include responsive-invisibility('.hidden-sm');
+}
+@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
+  @include responsive-visibility('.hidden-sm');
+}
+@media (min-width: $screen-large-desktop) {
+  @include responsive-visibility('.hidden-sm');
+}
+@include responsive-visibility('.hidden-md');
+@media (min-width: $screen-tablet) and (max-width: $screen-tablet-max) {
+  @include responsive-visibility('.hidden-md');
+}
+@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
+  @include responsive-invisibility('.hidden-md');
+}
+@media (min-width: $screen-large-desktop) {
+  @include responsive-visibility('.hidden-md');
+}
+@include responsive-visibility('.hidden-lg');
+@media (min-width: $screen-tablet) and (max-width: $screen-tablet-max) {
+  @include responsive-visibility('.hidden-lg');
+}
+@media (min-width: $screen-desktop) and (max-width: $screen-desktop-max) {
+  @include responsive-visibility('.hidden-lg');
+}
+@media (min-width: $screen-large-desktop) {
+  @include responsive-invisibility('.hidden-lg');
 }
 
 // Print utilities
-// TODO: Revert to more less like syntax once Sass supports it
-@include responsive-invisibility(visible-print);
+@include responsive-invisibility('.visible-print');
 .hidden-print  { }
 
 @media print {
-  // TODO: Revert to more less like syntax once Sass supports it
-  @include responsive-visibility(visible-print);
-  @include responsive-invisibility(hidden-print);
+  @include responsive-visibility('.visible-print');
+  @include responsive-invisibility('.hidden-print');
 }