_mixins.scss in bootstrap-sass-rails-3.0.0.0

- old
+ new

@@ -284,22 +284,22 @@
 }
 
 
 // Reset filters for IE
 //
-// When you need to remove a gradient background, don't forget to use this to reset
+// When you need to remove a gradient background, do not forget to use this to reset
 // the IE filter for IE9 and below.
 @mixin reset-filter() {
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
 
 
 
-// RETINA IMAGE SUPPORT
-// --------------------------------------------------
-
+// Retina images
+//
 // Short retina mixin for setting background-image and -size
+
 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
   background-image: url("$file-1x");
 
   @media
   only screen and (-webkit-min-device-pixel-ratio: 2),
@@ -312,10 +312,21 @@
     background-size: $width-1x $height-1x;
   }
 }
 
 
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@mixin img-responsive($display: block) {
+  display: $display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
 // COMPONENT MIXINS
 // --------------------------------------------------
 
 // Horizontal dividers
 // -------------------------
@@ -329,19 +340,19 @@
 
 // Panels
 // -------------------------
 @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
   border-color: $border;
-  .panel-heading {
+  & > .panel-heading {
     color: $heading-text-color;
     background-color: $heading-bg-color;
     border-color: $heading-border;
     + .panel-collapse .panel-body {
       border-top-color: $border;
     }
   }
-  .panel-footer {
+  & > .panel-footer {
     + .panel-collapse .panel-body {
       border-bottom-color: $border;
     }
   }
 }
@@ -358,31 +369,66 @@
   .alert-link {
     color: darken($text-color, 10%);
   }
 }
 
+// Tables
+// -------------------------
+@mixin table-row-variant($state, $background, $border) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table > thead > tr,
+  .table > tbody > tr,
+  .table > tfoot > tr {
+    > td.#{$state},
+    > th.#{$state},
+    &.#{$state} > td,
+    &.#{$state} > th {
+      background-color: $background;
+      border-color: $border;
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.#{$state}:hover,
+    > th.#{$state}:hover,
+    &.#{$state}:hover > td {
+      background-color: darken($background, 5%);
+      border-color: darken($border, 5%);
+    }
+  }
+}
+
 // Button variants
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
-@mixin button-variant($color, $background, $border) {
-  color: $color;
-  background-color: $background;
-  border-color: $border;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &.active {
+@mixin button-variant($parent, $color, $background, $border) {
+  #{$parent} {
     color: $color;
+    background-color: $background;
+    border-color: $border;
+  }
+  #{$parent}:hover,
+  #{$parent}:focus,
+  #{$parent}:active,
+  #{$parent}.active,
+  .open .dropdown-toggle#{$parent} {
+    color: $color;
     background-color: darken($background, 8%);
         border-color: darken($border, 12%);
   }
-
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
+  #{$parent}:active,
+  #{$parent}.active,
+  .open .dropdown-toggle#{$parent} {
+    background-image: none;
+  }
+  #{$parent}.disabled,
+  #{$parent}[disabled],
+  fieldset[disabled] #{$parent} {
     &,
     &:hover,
     &:focus,
     &:active,
     &.active {
@@ -457,22 +503,18 @@
 
 // Responsive utilities
 // -------------------------
 // More easily include all the states for responsive-utilities.less.
 @mixin responsive-visibility($parent) {
-  #{$parent} { 
-    display: block !important;
-  }
+  #{$parent} { display: block !important; }
   tr#{$parent} { display: table-row !important; }
   th#{$parent},
   td#{$parent} { display: table-cell !important; }
 }
 
 @mixin responsive-invisibility($parent) {
-  #{$parent} { 
-    display: none !important;
-  }
+  #{$parent} { display: none !important; }
   tr#{$parent} { display: none !important; }
   th#{$parent},
   td#{$parent} { display: none !important; }
 }
 
@@ -481,47 +523,32 @@
 
 // Centered container element
 @mixin container-fixed() {
   margin-right: auto;
   margin-left: auto;
+  padding-left:  ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width / 2);
   @include clearfix();
 }
 
 // Creates a wrapper for a series of columns
 @mixin make-row($gutter: $grid-gutter-width) {
-  // Then clear the floated columns
+  margin-left:  ($gutter / -2);
+  margin-right: ($gutter / -2);
   @include clearfix();
-
-  .container & {
-    @media (min-width: $screen-small) {
-      margin-left:  ($gutter / -2);
-      margin-right: ($gutter / -2);
-    }
-  }
-
-  // Negative margin nested rows out to align the content of columns
-  .row {
-    margin-left:  ($gutter / -2);
-    margin-right: ($gutter / -2);
-  }
 }
 
 // Generate the extra small columns
 @mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
   float: left;
+  width: percentage(($columns / $grid-columns));
   // Prevent columns from collapsing when empty
   min-height: 1px;
   // Inner gutter via padding
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
-  $max-width: ($screen-small - 1);
-
-  // Calculate width based on number of columns available
-  @media (max-width: $max-width) {
-    width: percentage(($columns / $grid-columns));
-  }
 }
 
 // Generate the small columns
 @mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
@@ -530,29 +557,29 @@
   // Inner gutter via padding
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: $screen-small) {
+  @media (min-width: $screen-sm) {
     float: left;
     width: percentage(($columns / $grid-columns));
   }
 }
 
 // Generate the small column offsets
 @mixin make-sm-column-offset($columns) {
-  @media (min-width: $screen-small) {
+  @media (min-width: $screen-sm) {
     margin-left: percentage(($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-push($columns) {
-  @media (min-width: $screen-small) {
+  @media (min-width: $screen-sm) {
     left: percentage(($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-pull($columns) {
-  @media (min-width: $screen-small) {
+  @media (min-width: $screen-sm) {
     right: percentage(($columns / $grid-columns));
   }
 }
 
 // Generate the medium columns
@@ -563,29 +590,29 @@
   // Inner gutter via padding
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: $screen-medium) {
+  @media (min-width: $screen-md) {
     float: left;
     width: percentage(($columns / $grid-columns));
   }
 }
 
 // Generate the large column offsets
 @mixin make-md-column-offset($columns) {
-  @media (min-width: $screen-medium) {
+  @media (min-width: $screen-md) {
     margin-left: percentage(($columns / $grid-columns));
   }
 }
 @mixin make-md-column-push($columns) {
-  @media (min-width: $screen-medium) {
+  @media (min-width: $screen-md) {
     left: percentage(($columns / $grid-columns));
   }
 }
 @mixin make-md-column-pull($columns) {
-  @media (min-width: $screen-medium) {
+  @media (min-width: $screen-md) {
     right: percentage(($columns / $grid-columns));
   }
 }
 
 // Generate the large columns
@@ -596,29 +623,29 @@
   // Inner gutter via padding
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: $screen-large) {
+  @media (min-width: $screen-lg) {
     float: left;
     width: percentage(($columns / $grid-columns));
   }
 }
 
 // Generate the large column offsets
 @mixin make-lg-column-offset($columns) {
-  @media (min-width: $screen-large) {
+  @media (min-width: $screen-lg) {
     margin-left: percentage(($columns / $grid-columns));
   }
 }
 @mixin make-lg-column-push($columns) {
-  @media (min-width: $screen-large) {
+  @media (min-width: $screen-lg) {
     left: percentage(($columns / $grid-columns));
   }
 }
 @mixin make-lg-column-pull($columns) {
-  @media (min-width: $screen-large) {
+  @media (min-width: $screen-lg) {
     right: percentage(($columns / $grid-columns));
   }
 }
 
 
@@ -678,21 +705,21 @@
 // Relative text size, padding, and border-radii changes for form controls. For
 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 // element gets special love because it's special, and that's a fact!
 
 @mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
-  #{$parent} { 
+  #{$parent} {
     height: $input-height;
     padding: $padding-vertical $padding-horizontal;
     font-size: $font-size;
     line-height: $line-height;
     border-radius: $border-radius;
   }
   select#{$parent} {
     height: $input-height;
     line-height: $input-height;
   }
-  
+
   textarea#{$parent} {
     height: auto;
   }
 }