comixins 0.1.1 → 0.1.2

data/vendor/assets/stylesheets/compass/reset/_utilities.scss

@@ -0,0 +1,142 @@
+// Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+@mixin global-reset {
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    @include reset-box-model;
+    @include reset-font; }
+  // Unlike Eric's original reset, we reset the html element to be compatible
+  // with the vertical rhythm mixins.
+  html {
+    @include reset-body; }
+  ol, ul {
+    @include reset-list-style; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; }
+  @include reset-html5; }
+
+// Reset all elements within some selector scope. To reset the selector itself,
+// mixin the appropriate reset mixin for that element type as well. This could be
+// useful if you want to style a part of your page in a dramatically different way.
+@mixin nested-reset {
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed, 
+  figure, figcaption, footer, header, hgroup, 
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    @include reset-box-model;
+    @include reset-font; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// Reset the box model measurements.
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0; }
+
+// Reset the font and vertical alignment.
+@mixin reset-font {
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline; }
+
+// Resets the outline when focus.
+// For accessibility you need to apply some styling in its place.
+@mixin reset-focus {
+  outline: 0; }
+
+// Reset a body element.
+@mixin reset-body {
+  line-height: 1; }
+
+// Reset the list style of an element.
+@mixin reset-list-style {
+  list-style: none; }
+
+// Reset a table
+@mixin reset-table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+// Reset a table cell (`th`, `td`)
+@mixin reset-table-cell {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+// Reset a quotation (`q`, `blockquote`)
+@mixin reset-quotation {
+  quotes: none;
+  &:before, &:after {
+    content: ""; 
+    content: none; } }
+
+// Resets the border.
+@mixin reset-image-anchor-border {
+  border: none; }
+
+// Unrecognized elements are displayed inline.
+// This reset provides a basic reset for block html5 elements
+// so they are rendered correctly in browsers that don't recognize them
+// and reset in browsers that have default styles for them.
+@mixin reset-html5 {
+  #{elements-of-type(html5-block)} {
+    display: block; } }
+
+// Resets the display of inline and block elements to their default display
+// according to their tag type. Elements that have a default display that varies across
+// versions of html or browser are not handled here, but this covers the 90% use case.
+// Usage Example:
+//
+//     // Turn off the display for both of these classes
+//     .unregistered-only, .registered-only
+//       display: none
+//     // Now turn only one of them back on depending on some other context.
+//     body.registered
+//       +reset-display(".registered-only")
+//     body.unregistered
+//       +reset-display(".unregistered-only")
+@mixin reset-display($selector: "", $important: false) {
+  #{append-selector(elements-of-type("inline"), $selector)} {
+    @if $important {
+      display: inline !important; }
+    @else {
+      display: inline; } }
+  #{append-selector(elements-of-type("block"), $selector)} {
+    @if $important {
+      display: block !important; }
+    @else {
+      display: block; } } }

data/vendor/assets/stylesheets/compass/typography/_links.scss

@@ -0,0 +1,3 @@
+@import "links/hover-link";
+@import "links/link-colors";
+@import "links/unstyled-link";

data/vendor/assets/stylesheets/compass/typography/_lists.scss

@@ -0,0 +1,4 @@
+@import "lists/horizontal-list";
+@import "lists/inline-list";
+@import "lists/inline-block-list";
+@import "lists/bullets";

data/vendor/assets/stylesheets/compass/typography/_text.scss

@@ -0,0 +1,4 @@
+@import "text/ellipsis";
+@import "text/nowrap";
+@import "text/replacement";
+@import "text/force-wrap";

data/vendor/assets/stylesheets/compass/typography/_vertical_rhythm.scss

@@ -0,0 +1,219 @@
+@import "../layout/grid-background";
+
+// The base font size.
+$base-font-size: 16px !default;
+
+// The base line height determines the basic unit of vertical rhythm.
+$base-line-height: 24px !default;
+
+// Set the default border style for rhythm borders.
+$default-rhythm-border-style: solid !default;
+
+// The default font size in all browsers.
+$browser-default-font-size: 16px;
+
+// Set to false if you want to use absolute pixels in sizing your typography.
+$relative-font-sizing: true !default;
+
+// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
+// to round the line height to the nearest half line height instead of the
+// nearest integral line height to avoid large spacing between lines.
+$round-to-nearest-half-line: false !default;
+
+// Ensure there is at least this many pixels
+// of vertical padding above and below the text.
+$min-line-padding: 2px !default;
+
+// $base-font-size but in your output unit of choice.
+// Defaults to 1em when `$relative-font-sizing` is true.
+$font-unit: if($relative-font-sizing, 1em, $base-font-size) !default;
+
+// The basic unit of font rhythm.
+$base-rhythm-unit: $base-line-height / $base-font-size * $font-unit;
+
+// The leader is the amount of whitespace in a line.
+// It might be useful in your calculations.
+$base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size;
+
+// The half-leader is the amount of whitespace above and below a line.
+// It might be useful in your calculations.
+$base-half-leader: $base-leader / 2;
+
+// True if a number has a relative unit.
+@function relative-unit($number) {
+  @return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem"
+}
+
+// True if a number has an absolute unit.
+@function absolute-unit($number) {
+  @return not(relative-unit($number) or unitless($number));
+}
+
+@if $relative-font-sizing and not(relative-unit($font-unit)) {
+  @warn "$relative-font-sizing is true but $font-unit is set to #{$font-unit} which is not a relative unit.";
+}
+
+// Establishes a font baseline for the given font-size.
+@mixin establish-baseline($font-size: $base-font-size) {
+  // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
+  // whose root is set in ems. So we set the root font size in percentages of
+  // the default font size.
+  * html {
+    font-size: 100% * ($font-size / $browser-default-font-size);
+  }
+  html {
+    font-size: $font-size;
+    @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));
+  }
+}
+
+// Resets the line-height to 1 vertical rhythm unit.
+// Does not work on elements whose font-size is different from $base-font-size.
+//
+// @deprecated This mixin will be removed in the next release.
+// Please use the `adjust-leading-to` mixin instead.
+@mixin reset-baseline {
+  @include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size));
+}
+
+// Show a background image that can be used to debug your alignments.
+// Include the $img argument if you would rather use your own image than the
+// Compass default gradient image.
+@mixin debug-vertical-alignment($img: false) {
+  @if $img {
+    background: image-url($img);
+  } @else {
+    @include baseline-grid-background($base-rhythm-unit);
+  }
+}
+
+// Adjust a block to have a different font size and line height to maintain the
+// rhythm. $lines specifies how many multiples of the baseline rhythm each line
+// of this font should use up. It does not have to be an integer, but it
+// defaults to the smallest integer that is large enough to fit the font.
+// Use $from-size to adjust from a font-size other than the base font-size.
+@mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {
+  @if not($relative-font-sizing) and $from-size != $base-font-size {
+    @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to";
+  }
+  font-size: $font-unit * $to-size / $from-size;
+  @include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size));
+}
+
+// Adjust a block to have different line height to maintain the rhythm.
+// $lines specifies how many multiples of the baseline rhythm each line of this
+// font should use up. It does not have to be an integer, but it defaults to the
+// smallest integer that is large enough to fit the font.
+@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
+  line-height: rhythm($lines, $font-size);
+}
+
+// Calculate rhythm units.
+@function rhythm(
+  $lines: 1,
+  $font-size: $base-font-size,
+  $offset: 0
+) {
+  @if not($relative-font-sizing) and $font-size != $base-font-size {
+    @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
+  }
+  $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;
+  // Round the pixels down to nearest integer.
+  @if unit($rhythm) == px {
+    $rhythm: floor($rhythm);
+  }
+  @return $rhythm;
+}
+
+// Calculate the minimum multiple of rhythm units needed to contain the font-size.
+@function lines-for-font-size($font-size) {
+  $lines: if($round-to-nearest-half-line,
+              ceil(2 * $font-size / $base-line-height) / 2,
+              ceil($font-size / $base-line-height));
+  @if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
+    $lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
+  }
+  @return $lines;
+}
+
+// Apply leading whitespace. The $property can be margin or padding.
+@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
+  #{$property}-top: rhythm($lines, $font-size);
+}
+
+// Apply leading whitespace as padding.
+@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
+  padding-top: rhythm($lines, $font-size);
+}
+
+// Apply leading whitespace as margin.
+@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
+  margin-top: rhythm($lines, $font-size);
+}
+
+// Apply trailing whitespace. The $property can be margin or padding.
+@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
+  #{$property}-bottom: rhythm($lines, $font-size);
+}
+
+// Apply trailing whitespace as padding.
+@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
+  padding-bottom: rhythm($lines, $font-size);
+}
+
+// Apply trailing whitespace as margin.
+@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
+  margin-bottom: rhythm($lines, $font-size);
+}
+
+// Shorthand mixin to apply whitespace for top and bottom margins and padding.
+@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
+  @include leader($leader, $font-size);
+  @include padding-leader($padding-leader, $font-size);
+  @include padding-trailer($padding-trailer, $font-size);
+  @include trailer($trailer, $font-size);
+}
+
+// Apply a border and whitespace to any side without destroying the vertical
+// rhythm. The whitespace must be greater than the width of the border.
+@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @if not($relative-font-sizing) and $font-size != $base-font-size {
+    @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border";
+  }
+  border-#{$side}-style: $border-style;
+  border-#{$side}-width: $font-unit * $width / $font-size;
+  padding-#{$side}: rhythm($lines, $font-size, $offset: $width);
+}
+
+// Apply borders and whitespace equally to all sides.
+@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @if not($relative-font-sizing) and $font-size != $base-font-size {
+    @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders";
+  }
+  border: {
+    style: $border-style;
+    width: $font-unit * $width / $font-size;
+  };
+  padding: rhythm($lines, $font-size, $offset: $width);
+}
+
+// Apply a leading border.
+@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
+}
+
+// Apply a trailing border.
+@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
+}
+
+// Apply both leading and trailing borders.
+@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include leading-border($width, $lines, $font-size, $border-style);
+  @include trailing-border($width, $lines, $font-size, $border-style);
+}
+
+// Alias for `horizontal-borders` mixin.
+@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
+  @include horizontal-borders($width, $lines, $font-size, $border-style);
+}

data/vendor/assets/stylesheets/compass/typography/links/_hover-link.scss

@@ -0,0 +1,5 @@
+// a link that only has an underline when you hover over it
+@mixin hover-link {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline; } }

data/vendor/assets/stylesheets/compass/typography/links/_link-colors.scss

@@ -0,0 +1,28 @@
+// Set all the colors for a link with one mixin call.
+// Order of arguments is:
+//
+// 1. normal
+// 2. hover
+// 3. active
+// 4. visited
+// 5. focus
+//
+// Those states not specified will inherit.
+// Mixin to an anchor link like so:
+//     a
+//       +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
+
+@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
+  color: $normal;
+  @if $visited {
+    &:visited {
+      color: $visited; } }
+  @if $focus {
+    &:focus {
+      color: $focus; } }
+  @if $hover {
+    &:hover {
+      color: $hover; } }
+  @if $active {
+    &:active {
+      color: $active; } } }

data/vendor/assets/stylesheets/compass/typography/links/_unstyled-link.scss

@@ -0,0 +1,7 @@
+// A link that looks and acts like the text it is contained within
+@mixin unstyled-link {
+  color: inherit;
+  text-decoration: inherit;
+  cursor: inherit;
+  &:active, &:focus {
+    outline: none; } }

data/vendor/assets/stylesheets/compass/typography/lists/_bullets.scss

@@ -0,0 +1,34 @@
+// Turn off the bullet for an element of a list
+@mixin no-bullet {
+  list-style-image : none;
+  list-style-type  : none;
+  margin-left      : 0;
+}
+
+// turns off the bullets for an entire list
+@mixin no-bullets {
+  list-style: none;
+  li { @include no-bullet; }
+}
+
+// Make a list(ul/ol) have an image bullet.
+//
+// The mixin should be used like this for an icon that is 5x7:
+//
+//     ul.pretty
+//       +pretty-bullets("my-icon.png", 5px, 7px)
+//
+// Additionally, if the image dimensions are not provided,
+// The image dimensions will be extracted from the image itself.
+//
+//     ul.pretty
+//       +pretty-bullets("my-icon.png")
+//
+@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
+  margin-left: 0;
+  li {
+    padding-left: $padding;
+    background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
+    list-style-type: none;
+  }
+}