diff options
Diffstat (limited to '97suifangqa/sass/sass-extensions/zen-grids/stylesheets')
3 files changed, 438 insertions, 0 deletions
diff --git a/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/_zen.scss b/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/_zen.scss new file mode 100644 index 0000000..283f2ee --- /dev/null +++ b/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/_zen.scss @@ -0,0 +1,3 @@ +// Import the partial for Zen Grids. + +@import "zen/grids"; diff --git a/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss b/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss new file mode 100644 index 0000000..4510125 --- /dev/null +++ b/97suifangqa/sass/sass-extensions/zen-grids/stylesheets/zen/_background-grid.scss @@ -0,0 +1,80 @@ +@import "zen/grids"; + +// Specify the column background color. +$bg-grid-color: #ffdede !default; + + +// +// This mixin currently requires the following markup at the top of the responsive container (e.g. body or div#page, etc.). +// <p class="bg-grid"> +// <span class="bgcol-1">1</span><span class="bgcol-2">2</span><span class="bgcol-3">3</span><span class="bgcol-4">4</span><span class="bgcol-5">5</span><span class="bgcol-6">6</span><span class="bgcol-7">7</span><span class="bgcol-8">8</span><span class="bgcol-9">9</span><span class="bgcol-10">10</span><span class="bgcol-11">11</span><span class="bgcol-12">12</span><span class="bgcol-13">13</span><span class="bgcol-14">14</span><span class="bgcol-15">15</span><span class="bgcol-16">16</span><span class="bgcol-17">17</span><span class="bgcol-18">18</span><span class="bgcol-19">19</span><span class="bgcol-20">20</span><span class="bgcol-21">21</span><span class="bgcol-22">22</span><span class="bgcol-23">23</span><span class="bgcol-24">24</span><span class="bgcol-25">25</span><span class="bgcol-26">26</span><span class="bgcol-27">27</span><span class="bgcol-28">28</span><span class="bgcol-29">29</span><span class="bgcol-30">30</span> +// <span class="bgcolrev-1">1</span><span class="bgcolrev-2">2</span><span class="bgcolrev-3">3</span><span class="bgcolrev-4">4</span><span class="bgcolrev-5">5</span><span class="bgcolrev-6">6</span><span class="bgcolrev-7">7</span><span class="bgcolrev-8">8</span><span class="bgcolrev-9">9</span><span class="bgcolrev-10">10</span><span class="bgcolrev-11">11</span><span class="bgcolrev-12">12</span><span class="bgcolrev-13">13</span><span class="bgcolrev-14">14</span><span class="bgcolrev-15">15</span><span class="bgcolrev-16">16</span><span class="bgcolrev-17">17</span><span class="bgcolrev-18">18</span><span class="bgcolrev-19">19</span><span class="bgcolrev-20">20</span><span class="bgcolrev-21">21</span><span class="bgcolrev-22">22</span><span class="bgcolrev-23">23</span><span class="bgcolrev-24">24</span><span class="bgcolrev-25">25</span><span class="bgcolrev-26">26</span><span class="bgcolrev-27">27</span><span class="bgcolrev-28">28</span><span class="bgcolrev-29">29</span><span class="bgcolrev-30">30</span> +// </p> +// +@mixin -experimental-bg-grid( + $column-count: $zen-column-count, + $gutter-width: $zen-gutter-width, + $grid-color: $bg-grid-color, + $grid-width: $zen-grid-width, + $flow-direction: $zen-float-direction +) { + + // Internal variables. + $dir: $flow-direction; + @if $zen-reverse-all-floats { + $dir: zen-direction-flip($dir); + } + $rev: zen-direction-flip($dir); + + $font-size: 16px; + $line-height: 24px; + $color-bg: #fff; + + @include zen-grid-container; + position: absolute; + position: fixed; + z-index: -1; + margin-left: auto; + margin-right: auto; + width: $grid-width; + height: 100%; + font-size: $font-size; + line-height: $line-height; + font-weight: bold; + font-family: sans-serif; + background-color: $color-bg; + + span { + @include zen-grid-item-base; + padding: 0; + text-align: center; + color: $color-bg; + @include text-shadow(darken($grid-color, 75%) 0 0 4px); + } + @for $i from 1 through $column-count { + .bgcol-#{$i} { + @include zen-grid-item(1, $i, $column-count: $column-count, $gutter-width: $gutter-width, $float-direction: $dir, $auto-include-item-base: false); + display: block; // Override display: none applied for grids with different column numbers. + height: 100%; + margin-bottom: -($line-height); + background-color: $grid-color; + border: { + left: zen-half-gutter($gutter-width) solid $color-bg; + right: zen-half-gutter($gutter-width) solid $color-bg; + } + } + .bgcolrev-#{$i} { + @if $i == 1 { + @include zen-clear(); + } + @include zen-grid-item(1, $i, $column-count: $column-count, $gutter-width: $gutter-width, $float-direction: $rev, $auto-include-item-base: false); + display: block; // Override display: none applied for grids with different column numbers. + } + } + @for $i from ($column-count + 1) through 30 { + .bgcol-#{$i}, + .bgcolrev-#{$i} { + display: none; + } + } +} 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; +} |