1 files changed, 355 insertions, 0 deletions
diff --git a/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/zen/_grids.scss b/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/zen/_grids.scss
new file mode 100644
index 0000000..6310e7f
--- /dev/null
+++ b/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/zen/_grids.scss
@@ -0,0 +1,355 @@
+//
+// Mixins for the Zen Grids system.
+//
+
+
+// Specify the number of columns in the grid.
+$zen-column-count: 1 !default;
+
+// Specify the width of the gutters; half of the gutter will be placed on each
+// side of a grid column.
+$zen-gutter-width: 20px !default;
+
+// You can generate more efficient CSS if you manually apply the
+// zen-grid-item-base mixin to all grid items from within a single ruleset.
+$zen-auto-include-item-base: true !default;
+$zen-auto-include-flow-item-base: true !default;
+
+// Specify the width of the entire grid. Defaults to 100% for a fluid responsive
+// design, but you can change this to a pixel value if you need a fixed grid.
+$zen-grid-width: 100% !default;
+
+// The box-sizing polyfill for IE6/7 requires an absolute path to the
+// boxsizing.htc file. See https://github.com/Schepp/box-sizing-polyfill
+$box-sizing-polyfill-path: "" !default;
+
+// Specify the CSS3 box-sizing method. The default, "border-box", is compatible
+// with all modern browsers, including IE 8 and later. Use "content-box" for
+// wider compatibility (Note: you'll also need to set $legacy-support-for-ie7
+// and $legacy-support-for-ie6 to true.)
+$zen-box-sizing: border-box !default;
+
+// Turn off IE6/7 support since we're defaulting to box-sizing: border-box.
+$legacy-support-for-ie7: false !default;
+$legacy-support-for-ie6: false !default;
+
+// Specify the default floating direction for zen's mixins.
+$zen-float-direction: left !default;
+
+// This is a helper variable for RTL layouts.
+$zen-reverse-all-floats: false !default;
+
+
+//
+// Apply this to the grid container element.
+//
+@mixin zen-grid-container () {
+  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+    *position: relative; // @TODO: This is a pre-IE8 line of code; don't remember why its needed.
+  }
+  // We use the "micro clearfix", instead of Compass' clearfix or pie-clearfix.
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+    *zoom: 1;
+  }
+}
+
+//
+// Apply this to any grid item that is also a grid container element for a
+// nested grid. It must be applied after the zen-grid-item() mixin.
+//
+@mixin zen-nested-container () {
+  padding: {
+    left: 0;
+    right: 0;
+  }
+}
+
+//
+// Apply this to each grid item. Set the $column-span to the number of columns
+// that the grid item spans. And set the $column-position to the column number
+// the grid item starts on.
+//
+// For grid items that are floated right, the $column-position is counted
+// from the right instead of from the left.
+//
+@mixin zen-grid-item (
+  $column-span,
+  $column-position,
+  $float-direction: $zen-float-direction,
+  $column-count: $zen-column-count,
+  $gutter-width: $zen-gutter-width,
+  $grid-width: $zen-grid-width,
+  $box-sizing: $zen-box-sizing,
+  $reverse-all-floats: $zen-reverse-all-floats,
+  $auto-include-item-base: $zen-auto-include-item-base
+) {
+
+  // Calculate the unit width.
+  $unit-width: zen-unit-width($column-count, $grid-width);
+
+  // Determine the float direction and its reverse.
+  $dir: $float-direction;
+  @if $reverse-all-floats {
+    $dir: zen-direction-flip($dir);
+  }
+  $rev: zen-direction-flip($dir);
+
+  float: $dir;
+  $width: $column-span * $unit-width;
+  @if $box-sizing == content-box {
+    @if not comparable($width, $gutter-width) {
+      $units-gutter: unit($gutter-width);
+      $units-grid: unit($grid-width);
+      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
+    }
+    $width: $width - $gutter-width;
+  }
+  width: $width;
+  margin: {
+    #{$dir}: ($column-position - 1) * $unit-width;
+    #{$rev}: (1 - $column-position - $column-span) * $unit-width;
+  }
+
+  // Auto-apply the unit base mixin.
+  @if $auto-include-item-base {
+    @include zen-grid-item-base($gutter-width, $box-sizing);
+  }
+}
+
+//
+// Applies a standard set of properites to all grid items in the layout.
+//
+// See the note about the $zen-auto-include-item-base and
+// $zen-auto-include-flow-item-base variables for when to use this mixin.
+//
+// The mixin has the following optional parameters, but its better to use the
+// $zen-gutter-width and $zen-box-sizing variables instead:
+// - $gutter-width: Half of this value is applied as padding to the left and
+//   right sides of the item.
+// - $box-sizing: The type of CSS3 box model each box should use. Can be set to
+//   content-box or border-box. Defaults to content-box, but border-box is way
+//   cooler. IE 6 and 7 don't support border-box.
+@mixin zen-grid-item-base (
+  $gutter-width: $zen-gutter-width,
+  $box-sizing: $zen-box-sizing,
+  $flow-direction: $zen-float-direction,
+  $reverse-all-flows: $zen-reverse-all-floats
+) {
+
+  $dir: $flow-direction;
+  @if $reverse-all-flows {
+    $dir: zen-direction-flip($dir);
+  }
+
+  padding: {
+    left: zen-half-gutter($gutter-width, left, $dir);
+    right: zen-half-gutter($gutter-width, right, $dir);
+  }
+  // Specify the border-box properties.
+  @if $box-sizing == border-box {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  // Prevent borders since they'll break the layout with content-box.
+  @if $box-sizing == content-box {
+    border: 0 !important;
+  }
+  // Prevent overflowing content from being hidden beneath other grid items.
+  word-wrap: break-word; // A very nice CSS3 property.
+
+  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+    @if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
+      @warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and the $box-sizing-polyfill-path is empty.";
+    }
+    @if $box-sizing-polyfill-path != "" {
+      *behavior: url($box-sizing-polyfill-path);
+    }
+    @if $legacy-support-for-ie6 {
+      _display: inline; // Display inline or double your floated margin! [1]
+      _overflow: hidden; // Prevent overflowing content from breaking the layout.
+      _overflow-y: visible; // In IE6, overflow visible is broken [2]
+      // 1. http://www.positioniseverything.net/explorer/doubled-margin.html
+      // 2. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
+    }
+  }
+}
+
+//
+// Apply this to content boxes that need to be cleared below other content boxes.
+//
+@mixin zen-clear (
+  $float-direction: $zen-float-direction,
+  $reverse-all-floats: $zen-reverse-all-floats
+) {
+  // Determine the float direction.
+  $dir: $float-direction;
+  @if $reverse-all-floats {
+    $dir: zen-direction-flip($dir);
+  }
+  clear: $dir;
+}
+
+//
+// Apply this to flow items that need to be floated.
+//
+@mixin zen-float (
+  $float-direction: $zen-float-direction,
+  $reverse-all-floats: $zen-reverse-all-floats
+) {
+  // Determine the float direction.
+  $dir: $float-direction;
+  @if $reverse-all-floats {
+    $dir: zen-direction-flip($dir);
+  }
+  float: $dir;
+}
+
+//
+// Apply this to an HTML item that is in the normal flow of a document to help
+// align it to the grid. Set the $column-span to the number of columns that the
+// HTML element should span. For responsive layouts with a percentage-based grid
+// width, set the $parent-column-count to the number of columns that the parent
+// element spans; fixed-unit layouts using px, em, etc. do not need to specify
+// this.
+//
+// Unlike the zen-grid-item() mixin, this mixin does not float the HTML item; it
+// also does not have a half-gutter on each side. By default, it has no gutter
+// in the "alpha position" (the left side) and a full gutter in the "omega
+// position" (the right side.) You can turn on or off the alpha and omega
+// gutters by setting the $alpha-gutter and $omega-gutter parameters to true or
+// false.
+//
+// Note: when the $flow-direction is set to right (for RTL languages), the alpha
+// position is on the right and the omega position is on the left.
+//
+@mixin zen-grid-flow-item (
+  $column-span,
+  $parent-column-count: false,
+  $alpha-gutter: false,
+  $omega-gutter: true,
+  $flow-direction: $zen-float-direction,
+  $column-count: $zen-column-count,
+  $gutter-width: $zen-gutter-width,
+  $grid-width: $zen-grid-width,
+  $box-sizing: $zen-box-sizing,
+  $reverse-all-flows: $zen-reverse-all-floats,
+  $auto-include-flow-item-base: $zen-auto-include-flow-item-base
+) {
+
+  $columns: $column-count;
+  @if unit($grid-width) == "%" {
+    @if $parent-column-count == false {
+      @warn "For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.";
+    }
+    @else {
+      $columns: $parent-column-count;
+    }
+  }
+
+  $dir: $flow-direction;
+  @if $reverse-all-flows {
+    $dir: zen-direction-flip($dir);
+  }
+  $rev: zen-direction-flip($dir);
+
+  // Calculate the item's width.
+  $width: zen-grid-item-width($column-span, $columns, $grid-width);
+  @if $box-sizing == content-box {
+    @if not comparable($width, $gutter-width) {
+      $units-gutter: unit($gutter-width);
+      $units-grid: unit($grid-width);
+      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
+    }
+    $width: $width - $gutter-width;
+  }
+  width: $width;
+
+  // Auto-apply the unit base mixin.
+  @if $auto-include-flow-item-base {
+    @include zen-grid-item-base($gutter-width, $box-sizing);
+  }
+
+  // Ensure the HTML item either has a full gutter or no gutter on each side.
+  padding-#{$dir}: 0;
+  @if $alpha-gutter {
+    margin-#{$dir}: $gutter-width;
+  }
+  $offset: ($columns - $column-span) * $gutter-width / $columns;
+  padding-#{$rev}: $offset;
+  @if $omega-gutter {
+    margin-#{$rev}: $gutter-width - $offset;
+  }
+  @else {
+    margin-#{$rev}: -($offset);
+  }
+}
+
+
+//
+// Helper functions for the Zen mixins.
+//
+
+// Returns a half gutter width.
+@function zen-half-gutter(
+  $gutter-width: $zen-gutter-width,
+  $gutter-side: $zen-float-direction,
+  $flow-direction: $zen-float-direction
+) {
+  $half-gutter: $gutter-width / 2;
+  // Special handling in case gutter has an odd number of pixels.
+  @if unit($gutter-width) == "px" {
+    @if $gutter-side == $flow-direction {
+      @return floor($half-gutter);
+    }
+    @else {
+      @return ceil($half-gutter);
+    }
+  }
+  @return $half-gutter;
+}
+
+// Calculates the unit width of a column.
+@function zen-unit-width (
+  $column-count: $zen-column-count,
+  $grid-width: $zen-grid-width
+) {
+  $unit-width: $grid-width / $column-count;
+  @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
+    @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$column-count} columns.";
+  }
+  @return $unit-width;
+}
+
+// Calculates the width of a grid item that spans the specified number of columns.
+@function zen-grid-item-width (
+  $column-span,
+  $column-count: $zen-column-count,
+  $grid-width: $zen-grid-width
+) {
+  @return $column-span * zen-unit-width($column-count, $grid-width);
+}
+
+// Returns the opposite direction, given "left" or "right".
+@function zen-direction-flip($dir) {
+  @if $dir == left {
+    @return right;
+  }
+  @else if $dir == right {
+    @return left;
+  }
+  @else if $dir == none or $dir == both {
+    @return $dir;
+  }
+  @warn "Invalid direction passed to zen-direction-flip().";
+  @return both;
+}