concen 0.2.4 → 0.2.5

data/app/assets/stylesheets/concen/compass/reset/_utilities.scss

@@ -0,0 +1,140 @@
+// 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; }
+  body {
+    @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-size: 100%;
+  font: inherit;
+  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/app/assets/stylesheets/concen/compass/typography/_links.scss

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

data/app/assets/stylesheets/concen/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/app/assets/stylesheets/concen/compass/typography/_text.scss

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

data/app/assets/stylesheets/concen/compass/typography/_vertical_rhythm.scss

@@ -0,0 +1,193 @@
+// The base font size
+$base-font-size: 16px !default;
+
+// The base line height is the basic unit of line hightness.
+$base-line-height: 24px !default;
+
+// set the default border style for rhythm borders
+$default-rhythm-border-style: solid !default;
+
+// The IE font ratio is a fact of life. Deal with it.
+$ie-font-ratio: 16px / 100%;
+
+// Set to false if you want to use absolute pixes in sizing your typography.
+$relative-font-sizing: true !default;
+
+// Ensure there is at least this many pixels
+// of vertical padding above and below the text.
+$min-line-padding: 2px;
+
+// $base-font-size but in your output unit of choice.
+// Defaults to 1em when `$relative-font-sizing`
+$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 in pixels
+@mixin establish-baseline($font-size: $base-font-size) {
+  body {
+    font-size: $font-size / $ie-font-ratio;
+    @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));
+  }
+  html>body {
+    font-size: $font-size;
+  }
+}
+
+// Show a background image that can be used to debug your alignments.
+@mixin debug-vertical-alignment($img: 'underline.png') {
+  background: url($img);
+}
+
+// Adjust a block to have a different font size and leading to maintain the rhythm.
+// $lines is a number that is how many times the baseline rhythm this
+// font size should use up. 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 non-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));
+}
+
+@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
+  @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 adjust-leading-to";
+  }
+  line-height: $font-unit * $lines * $base-line-height / $font-size;
+}
+
+// Calculate rhythm units
+@function rhythm(
+  $lines: 1,
+  $font-size: $base-font-size
+) {
+  @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 / $font-size;
+  @return $rhythm;
+}
+
+@function lines-for-font-size($font-size) {
+  $lines: ceil($font-size / $base-line-height);
+  @if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
+    $lines: $lines + 1;
+  }
+  @return $lines;
+}
+
+// Apply leading whitespace
+@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
+  $leader: rhythm($lines, $font-size);
+  @if unit($leader) == px {
+    $leader: floor($leader)
+  }
+  #{$property}-top: $leader;
+}
+
+// Apply leading whitespace as padding
+@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
+  @include leader($lines, $font-size, padding);
+}
+
+// Apply leading whitespace as margin
+@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
+  @include leader($lines, $font-size, margin);
+}
+
+// Apply trailing whitespace
+@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
+  $leader: rhythm($lines, $font-size);
+  @if unit($leader) == px {
+    $leader: ceil($leader)
+  }
+  #{$property}-bottom: $leader;
+}
+
+// Apply trailing whitespace as padding
+@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
+  @include trailer($lines, $font-size, padding);
+}
+
+// Apply trailing whitespace as margin
+@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
+  @include trailer($lines, $font-size, margin);
+}
+
+// Whitespace application shortcut
+// Apply top margin/padding + bottom padding/margin
+@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 width to any side without destroying the vertical rhythm
+@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;
+    width: $font-unit * $width / $font-size;
+  };
+  padding-#{$side}: $font-unit / $font-size * ($lines * $base-line-height - $width);
+}
+
+// Aplly rhythm borders 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: $font-unit / $font-size * ($lines * $base-line-height - $width);
+}
+
+// Apply a leading rhythm 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 rhythm 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 rhythm 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);
+}
+
+@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/app/assets/stylesheets/concen/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/app/assets/stylesheets/concen/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/app/assets/stylesheets/concen/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/app/assets/stylesheets/concen/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      : 0px;
+}
+
+// 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;
+  }
+}

data/app/assets/stylesheets/concen/compass/typography/lists/_horizontal-list.scss

@@ -0,0 +1,61 @@
+// Horizontal list layout module.
+//
+// Easy mode using simple descendant li selectors:
+//
+//   ul.nav
+//     +horizontal-list
+//
+// Advanced mode:
+// If you need to target the list items using a different selector then use
+// +horizontal-list-container on your ul/ol and +horizontal-list-item on your li.
+// This may help when working on layouts involving nested lists. For example:
+//
+//   ul.nav
+//     +horizontal-list-container
+//     > li
+//       +horizontal-list-item
+
+@import "bullets";
+@import "compass/utilities/general/clearfix";
+@import "compass/utilities/general/reset";
+@import "compass/utilities/general/float";
+
+// Can be mixed into any selector that target a ul or ol that is meant
+// to have a horizontal layout. Used to implement +horizontal-list.
+@mixin horizontal-list-container {
+  @include reset-box-model;
+  @include clearfix; }
+
+// Can be mixed into any li selector that is meant to participate in a horizontal layout.
+// Used to implement +horizontal-list.
+//
+// :last-child is not fully supported
+// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
+// 
+// IE8 ignores rules that are included on the same line as :last-child
+// see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
+//
+// Setting `$padding` to `false` disables the padding between list elements
+@mixin horizontal-list-item($padding: 4px, $direction: left) {
+  @include no-bullet;
+  white-space: nowrap;
+  @include float($direction);
+  @if $padding {
+    padding: {
+      left: $padding;
+      right: $padding;
+    }
+    &:first-child, &.first { padding-#{$direction}: 0; }
+    &:last-child { padding-#{opposite-position($direction)}: 0; }
+    &.last { padding-#{opposite-position($direction)}: 0; }
+  }
+}
+
+// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
+// This is not an inline list.
+//
+// Setting `$padding` to `false` disables the padding between list elements
+@mixin horizontal-list($padding: 4px, $direction: left) {
+  @include horizontal-list-container;
+  li {
+    @include horizontal-list-item($padding, $direction); } }