sass-twitter-bootstrap 2.0.1 → 2.1.1

data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss

@@ -0,0 +1,58 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+
+// Clearing floats
+.clearfix {
+  @include clearfix();
+}
+
+// Accessible yet invisible text
+.hide-text {
+  @include hide-text();
+}
+
+// Uses box-sizing mixin, so must be defined here
+.input-block-level {
+  @include input-block-level();
+}
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Visibility utilities
+
+// For desktops
+.visible-phone     { display: none !important; }
+.visible-tablet    { display: none !important; }
+.hidden-phone      { }
+.hidden-tablet     { }
+.hidden-desktop    { display: none !important; }
+.visible-desktop   { display: inherit !important; }
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
+  // Show
+  .visible-tablet    { display: inherit !important; }
+  // Hide
+  .hidden-tablet     { display: none !important; }
+}
+
+// Phones only
+@media (max-width: 767px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
+  // Show
+  .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
+  // Hide
+  .hidden-phone      { display: none !important; }
+}

data/vendor/assets/stylesheets/twitter/_scaffolding.scss

@@ -1,14 +1,10 @@
+//
 // Scaffolding
-// Basic and global styles for generating a grid system, structural layout, and page templates
-// -------------------------------------------------------------------------------------------
+// --------------------------------------------------
 
 
-// STRUCTURAL LAYOUT
-// -----------------
-
-.clearfix {
-  @include clearfix();
-}
+// Body reset
+// -------------------------
 
 body {
   margin: 0;
@@ -16,12 +12,12 @@ body {
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
   color: $textColor;
-  background-color: $white;
+  background-color: $bodyBackground;
 }
 
 
-// LINKS
-// -----
+// Links
+// -------------------------
 
 a {
   color: $linkColor;
@@ -31,3 +27,28 @@ a:hover {
   color: $linkColorHover;
   text-decoration: underline;
 }
+
+
+// Images
+// -------------------------
+
+// Rounded corners
+.img-rounded {
+  @include border-radius(6px);
+}
+
+// Add polaroid-esque trim
+.img-polaroid {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
+     -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
+          box-shadow: 0 1px 3px rgba(0,0,0,.1);
+}
+
+// Perfect circle
+.img-circle {
+  @include border-radius(500px); // crank the border-radius so it works with most reasonably sized images
+}

data/vendor/assets/stylesheets/twitter/_sprites.scss

@@ -1,17 +1,17 @@
-// SPRITES
-// Glyphs and icons for buttons, nav, and more
-// -------------------------------------------
+//
+// Sprites
+// --------------------------------------------------
 
 
 // ICONS
 // -----
 
-// All icons receive the styles of the <i> tag with a base class 
-// of .i and are then given a unique class to add width, height, 
+// All icons receive the styles of the <i> tag with a base class
+// of .i and are then given a unique class to add width, height,
 // and background-position. Your resulting HTML will look like
 // <i class="icon-inbox"></i>.
 
-// For the white version of the  icons, just add the .icon-white class:
+// For the white version of the icons, just add the .icon-white class:
 // <i class="icon-inbox icon-white"></i>
 
 [class^="icon-"],
@@ -19,15 +19,29 @@
   display: inline-block;
   width: 14px;
   height: 14px;
+  @include ie7-restore-right-whitespace();
   line-height: 14px;
   vertical-align: text-top;
   background-image: url($iconSpritePath);
   background-position: 14px 14px;
   background-repeat: no-repeat;
-
-  @include ie7-restore-right-whitespace();
+  margin-top: 1px;
 }
-.icon-white {
+
+/* White icons with optional class, or on hover/active states of certain elements */
+.icon-white,
+.nav-tabs > .active > a > [class^="icon-"],
+.nav-tabs > .active > a > [class*=" icon-"],
+.nav-pills > .active > a > [class^="icon-"],
+.nav-pills > .active > a > [class*=" icon-"],
+.nav-list > .active > a > [class^="icon-"],
+.nav-list > .active > a > [class*=" icon-"],
+.navbar-inverse .nav > .active > a > [class^="icon-"],
+.navbar-inverse .nav > .active > a > [class*=" icon-"],
+.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > .active > a > [class^="icon-"],
+.dropdown-menu > .active > a > [class*=" icon-"] {
   background-image: url($iconWhiteSpritePath);
 }
 
@@ -145,14 +159,35 @@
 .icon-warning-sign       { background-position: -144px -120px; }
 .icon-plane              { background-position: -168px -120px; }
 .icon-calendar           { background-position: -192px -120px; }
-.icon-random             { background-position: -216px -120px; }
+.icon-random             { background-position: -216px -120px; width: 16px; }
 .icon-comment            { background-position: -240px -120px; }
 .icon-magnet             { background-position: -264px -120px; }
 .icon-chevron-up         { background-position: -288px -120px; }
-.icon-chevron-down       { background-position: -313px -119px; } // 1px off
+.icon-chevron-down       { background-position: -313px -119px; } // 1px, 1px off
 .icon-retweet            { background-position: -336px -120px; }
 .icon-shopping-cart      { background-position: -360px -120px; }
 .icon-folder-close       { background-position: -384px -120px; }
-.icon-folder-open        { background-position: -408px -120px; }
-.icon-resize-vertical    { background-position: -432px -119px; }
-.icon-resize-horizontal  { background-position: -456px -118px; }
+.icon-folder-open        { background-position: -408px -120px; width: 16px; }
+.icon-resize-vertical    { background-position: -432px -119px; } // 1px, 1px off
+.icon-resize-horizontal  { background-position: -456px -118px; } // 1px, 2px off
+
+.icon-hdd                     { background-position: 0      -144px; }
+.icon-bullhorn                { background-position: -24px  -144px; }
+.icon-bell                    { background-position: -48px  -144px; }
+.icon-certificate             { background-position: -72px  -144px; }
+.icon-thumbs-up               { background-position: -96px  -144px; }
+.icon-thumbs-down             { background-position: -120px -144px; }
+.icon-hand-right              { background-position: -144px -144px; }
+.icon-hand-left               { background-position: -168px -144px; }
+.icon-hand-up                 { background-position: -192px -144px; }
+.icon-hand-down               { background-position: -216px -144px; }
+.icon-circle-arrow-right      { background-position: -240px -144px; }
+.icon-circle-arrow-left       { background-position: -264px -144px; }
+.icon-circle-arrow-up         { background-position: -288px -144px; }
+.icon-circle-arrow-down       { background-position: -312px -144px; }
+.icon-globe                   { background-position: -336px -144px; }
+.icon-wrench                  { background-position: -360px -144px; }
+.icon-tasks                   { background-position: -384px -144px; }
+.icon-filter                  { background-position: -408px -144px; }
+.icon-briefcase               { background-position: -432px -144px; }
+.icon-fullscreen              { background-position: -456px -144px; }

data/vendor/assets/stylesheets/twitter/_tables.scss

@@ -1,7 +1,6 @@
 //
-// Tables.scss
-// Tables for, you guessed it, tabular data
-// ----------------------------------------
+// Tables
+// --------------------------------------------------
 
 
 // BASE TABLES
@@ -9,6 +8,7 @@
 
 table {
   max-width: 100%;
+  background-color: $tableBackground;
   border-collapse: collapse;
   border-spacing: 0;
 }
@@ -26,7 +26,7 @@ table {
     line-height: $baseLineHeight;
     text-align: left;
     vertical-align: top;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $tableBorder;
   }
   th {
     font-weight: bold;
@@ -36,13 +36,17 @@ table {
     vertical-align: bottom;
   }
   // Remove top border from thead by default
-  thead:first-child tr th,
-  thead:first-child tr td {
+  caption + thead tr:first-child th,
+  caption + thead tr:first-child td,
+  colgroup + thead tr:first-child th,
+  colgroup + thead tr:first-child td,
+  thead:first-child tr:first-child th,
+  thead:first-child tr:first-child td {
     border-top: 0;
   }
   // Account for multiple tbody instances
   tbody + tbody {
-    border-top: 2px solid #ddd;
+    border-top: 2px solid $tableBorder;
   }
 }
 
@@ -63,17 +67,22 @@ table {
 // ----------------
 
 .table-bordered {
-  border: 1px solid #ddd;
+  border: 1px solid $tableBorder;
   border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapsed; // IE7 can't round corners anyway
+  *border-collapse: collapse; // IE7 can't round corners anyway
+  border-left: 0;
   @include border-radius(4px);
-  th + th,
-  td + td,
-  th + td,
-  td + th {
-    border-left: 1px solid #ddd;
+  th,
+  td {
+    border-left: 1px solid $tableBorder;
   }
   // Prevent a double border
+  caption + thead tr:first-child th,
+  caption + tbody tr:first-child th,
+  caption + tbody tr:first-child td,
+  colgroup + thead tr:first-child th,
+  colgroup + tbody tr:first-child th,
+  colgroup + tbody tr:first-child td,
   thead:first-child tr:first-child th,
   tbody:first-child tr:first-child th,
   tbody:first-child tr:first-child td {
@@ -82,21 +91,51 @@ table {
   // For first th or td in the first row in the first thead or tbody
   thead:first-child tr:first-child th:first-child,
   tbody:first-child tr:first-child td:first-child {
-    @include border-radius(4px 0 0 0);
+    -webkit-border-top-left-radius: 4px;
+            border-top-left-radius: 4px;
+        -moz-border-radius-topleft: 4px;
   }
   thead:first-child tr:first-child th:last-child,
   tbody:first-child tr:first-child td:last-child {
-    @include border-radius(0 4px 0 0);
+    -webkit-border-top-right-radius: 4px;
+            border-top-right-radius: 4px;
+        -moz-border-radius-topright: 4px;
   }
   // For first th or td in the first row in the first thead or tbody
   thead:last-child tr:last-child th:first-child,
-  tbody:last-child tr:last-child td:first-child {
+  tbody:last-child tr:last-child td:first-child,
+  tfoot:last-child tr:last-child td:first-child {
     @include border-radius(0 0 0 4px);
+    -webkit-border-bottom-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+        -moz-border-radius-bottomleft: 4px;
   }
   thead:last-child tr:last-child th:last-child,
-  tbody:last-child tr:last-child td:last-child {
-    @include border-radius(0 0 4px 0);
+  tbody:last-child tr:last-child td:last-child,
+  tfoot:last-child tr:last-child td:last-child {
+    -webkit-border-bottom-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        -moz-border-radius-bottomright: 4px;
+  }
+
+  // Special fixes to round the left border on the first td/th
+  caption + thead tr:first-child th:first-child,
+  caption + tbody tr:first-child td:first-child,
+  colgroup + thead tr:first-child th:first-child,
+  colgroup + tbody tr:first-child td:first-child {
+    -webkit-border-top-left-radius: 4px;
+            border-top-left-radius: 4px;
+        -moz-border-radius-topleft: 4px;
+  }
+  caption + thead tr:first-child th:last-child,
+  caption + tbody tr:first-child td:last-child,
+  colgroup + thead tr:first-child th:last-child,
+  colgroup + tbody tr:first-child td:last-child {
+    -webkit-border-top-right-radius: 4px;
+            border-top-right-radius: 4px;
+         -moz-border-radius-topleft: 4px;
   }
+
 }
 
 
@@ -108,7 +147,7 @@ table {
   tbody {
     tr:nth-child(odd) td,
     tr:nth-child(odd) th {
-      background-color: #f9f9f9;
+      background-color: $tableBackgroundAccent;
     }
   }
 }
@@ -117,10 +156,12 @@ table {
 // HOVER EFFECT
 // ------------
 // Placed here since it has to come after the potential zebra striping
-.table {
-  tbody tr:hover td,
-  tbody tr:hover th {
-    background-color: #f5f5f5;
+.table-hover {
+  tbody {
+    tr:hover td,
+    tr:hover th {
+      background-color: $tableBackgroundHover;
+    }
   }
 }
 
@@ -128,23 +169,55 @@ table {
 // TABLE CELL SIZING
 // -----------------
 
-// Change the columns
-@mixin tableColumns($columnSpan: 1) {
-  float: none;
-  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16;
-  margin-left: 0;
+// Reset default grid behavior
+table [class*=span],
+.row-fluid table [class*=span] {
+  display: table-cell;
+  float: none; // undo default grid column styles
+  margin-left: 0; // undo default grid column styles
 }
-table {
-  .span1     { @include tableColumns(1); }
-  .span2     { @include tableColumns(2); }
-  .span3     { @include tableColumns(3); }
-  .span4     { @include tableColumns(4); }
-  .span5     { @include tableColumns(5); }
-  .span6     { @include tableColumns(6); }
-  .span7     { @include tableColumns(7); }
-  .span8     { @include tableColumns(8); }
-  .span9     { @include tableColumns(9); }
-  .span10    { @include tableColumns(10); }
-  .span11    { @include tableColumns(11); }
-  .span12    { @include tableColumns(12); }
+
+// Change the column widths to account for td/th padding
+.table {
+  @for $i from 1 through 24 {
+    .span#{$i} { @include tableColumns($i); }
+  }
+}
+
+
+
+// TABLE BACKGROUNDS
+// -----------------
+// Exact selectors below required to override .table-striped
+
+.table tbody tr {
+  &.success td {
+    background-color: $successBackground;
+  }
+  &.error td {
+    background-color: $errorBackground;
+  }
+  &.warning td {
+    background-color: $warningBackground;
+  }
+  &.info td {
+    background-color: $infoBackground;
+  }
 }
+
+
+// Hover states for .table-hover
+.table-hover tbody tr {
+  &.success:hover td {
+    background-color: darken($successBackground, 5%);
+  }
+  &.error:hover td {
+    background-color: darken($errorBackground, 5%);
+  }
+  &.warning:hover td {
+    background-color: darken($warningBackground, 5%);
+  }
+  &.info:hover td {
+    background-color: darken($infoBackground, 5%);
+  }
+}