MODULE-TYPO

- Sass set-up - md-list - md-theming (install)
2026-10-28 13:25:43 +00:00 · 2015-01-16 07:52:29 -05:00
1 parent ec1b4b9b0c
commit f1d2b8cb75
@@ -0,0 +1 @@
+@import "color/contrast";
@@ -0,0 +1,6 @@
+@import "general/reset";
+@import "general/clearfix";
+@import "general/float";
+@import "general/tag-cloud";
+@import "general/hacks";
+@import "general/min";
@@ -0,0 +1,5 @@
+@warn "This import is deprecated. Use 'compass/typography/links' instead.";
+
+@import "../typography/links/hover-link";
+@import "../typography/links/link-colors";
+@import "../typography/links/unstyled-link";
@@ -0,0 +1,6 @@
+@warn "This import is deprecated. Use 'compass/typography/lists' instead.";
+
+@import "../typography/lists/horizontal-list";
+@import "../typography/lists/inline-list";
+@import "../typography/lists/inline-block-list";
+@import "../typography/lists/bullets";
@@ -0,0 +1,17 @@
+// Classes that are useful for controlling what gets printed.
+// You must mix `+print-utilities` into your print stylesheet
+// and `+print-utilities(screen)` into your screen stylesheet.
+// Note: these aren't semantic.
+@mixin print-utilities($media: print) {
+  @if $media == print {
+    .noprint, .no-print { display: none; }
+    #{elements-of-type(block)} {
+      &.print-only { display: block; }
+    }
+    #{elements-of-type(inline)} {
+      &.print-only {  display: inline; }
+    }
+  } @else {
+    .print-only { display: none; }
+  }
+}
@@ -0,0 +1,2 @@
+@import "sass/lists";
+@import "sass/maps";
@@ -0,0 +1,2 @@
+@import "sprites/base";
+@import "sprites/sprite-img";
@@ -0,0 +1,3 @@
+@import "tables/alternating-rows-and-columns";
+@import "tables/borders";
+@import "tables/scaffolding";
@@ -0,0 +1,5 @@
+@warn "This import is deprecated. Use 'compass/typography/text' instead.";
+
+@import "../typography/text/ellipsis";
+@import "../typography/text/nowrap";
+@import "../typography/text/replacement";
@@ -0,0 +1,20 @@
+// Computes the "brightness" of a color
+//
+// Brightness is similiar to lightness in HSL but more closely approximates
+// how humans perceive the intensity of the different RGB components of
+// a color. Brightness is sometimes called luminance.
+//
+// Returns a number between 0% and 100%, where 100% is fully bright
+// (white) and 0% is fully dark (black) for color values.
+//
+// For numbers and percentages it returns the same value to be used
+// in `@include filter(brightness(1.1))`.
+@function brightness($color) {
+  @if type-of($color) == color {
+    @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
+  }
+  @else {
+    @return unquote("brightness(#{$color})");
+  }
+}
+
@@ -0,0 +1,52 @@
+@import "compass/utilities/color/brightness";
+
+$contrasted-dark-default:   #000 !default;
+$contrasted-light-default:  #fff !default;
+
+// Returns either the `$light` or `$dark` color
+// by deciding which contrasts more with `$color`.
+//
+// E.g. This can be used to select the more readable foreground color
+// for a given background color.
+//
+// `$dark` defaults to black and `$light` defaults to white.
+//
+// When `$color` is `null`, this function returns `null`.
+@function contrast-color(
+  $color,
+  $dark: $contrasted-dark-default,
+  $light: $contrasted-light-default,
+  $threshold: null
+) {
+  @if $threshold {
+    // Deprecated in Compass 0.13
+    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."
+  }
+  @if $color == null {
+    @return null;
+  }
+  @else {
+    $color-brightness: brightness($color);
+    $dark-text-brightness: brightness($dark);
+    $light-text-brightness: brightness($light);
+
+    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+  }
+}
+
+// Sets the specified background color and calculates a dark or light
+// contrasted text color.  The arguments are passed through to the
+// [contrast-color function](#function-contrast-color).
+@mixin contrasted(
+  $background-color,
+  $dark: $contrasted-dark-default,
+  $light: $contrasted-light-default,
+  $threshold: null
+) {
+  @if $threshold {
+    // Deprecated in Compass 0.13
+    @warn "The $threshold argment to contrasted is no longer needed and will be removed in the next release."
+  }
+  background-color: $background-color;
+  color: contrast-color($background-color, $dark, $light);
+}
@@ -0,0 +1,44 @@
+// @doc off
+// Extends the bottom of the element to enclose any floats it contains.
+// @doc on
+
+@import "hacks";
+
+// This basic method is preferred for the usual case, when positioned
+// content will not show outside the bounds of the container.
+//
+// Recommendations include using this in conjunction with a width.
+// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
+@mixin clearfix {
+  overflow: hidden;
+  @include has-layout;
+}
+
+// This older method from Position Is Everything called
+// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html)
+// has the advantage of allowing positioned elements to hang
+// outside the bounds of the container at the expense of more tricky CSS.
+@mixin legacy-pie-clearfix {
+  &:after {
+    content    : "\0020";
+    display    : block;
+    height     : 0;
+    clear      : both;
+    overflow   : hidden;
+    visibility : hidden;
+  }
+  @include has-layout;
+}
+
+// This is an updated version of the PIE clearfix method that reduces the amount of CSS output.
+// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead.
+//
+// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
+@mixin pie-clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  @include has-layout;
+}
@@ -0,0 +1,38 @@
+@import "compass/support";
+
+// The legacy support threshold for float.
+// Defaults to the $critical-usage-threshold.
+$legacy-float-support-threshold: $critical-usage-threshold !default;
+
+// Implementation of float:left with fix for the
+// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
+@mixin float-left {
+  @include float(left); }
+
+// Implementation of float:right with fix for the
+// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
+@mixin float-right {
+  @include float(right); }
+
+// Direction independent float mixin that fixes the
+// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
+@mixin float($side: left) {
+  float: unquote($side);
+  @if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) {
+    display: inline; } }
+
+// Resets floated elements back to their default of `float: none` and defaults
+// to `display: block` unless you pass `inline` as an argument
+//
+// Usage Example:
+//
+//     body.homepage
+//       #footer li
+//         +float-left
+//     body.signup
+//       #footer li
+//         +reset-float
+@mixin reset-float($display: block) {
+  float: none;
+  @if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) {
+    display: $display; } }
@@ -0,0 +1,65 @@
+@import "compass/support";
+
+// The legacy support threshold for has-layout.
+// Defaults to the $critical-usage-threshold.
+$has-layout-support-threshold: $critical-usage-threshold !default;
+
+// The `zoom` approach generates less CSS but does not validate.
+// Set this to `block` to use the display-property to hack the
+// element to gain layout.
+$default-has-layout-approach: zoom !default;
+
+// This mixin causes an element matching the selector
+// to gain the "hasLayout" property in internet explorer.
+// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
+@mixin has-layout($approach: $default-has-layout-approach) {
+  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
+    @if $approach == zoom {
+      @include has-layout-zoom;
+    } @else if $approach == block {
+      @include has-layout-block;
+    } @else {
+      @warn "Unknown has-layout approach: #{$approach}";
+      @include has-layout-zoom;
+    }
+  }
+}
+
+@mixin has-layout-zoom {
+  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
+    *zoom: 1;
+  }
+}
+
+@mixin has-layout-block {
+  @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
+    // This makes ie6 get layout
+    display: inline-block;
+    // and this puts it back to block
+    & { display: block; }
+  }
+}
+
+
+// The legacy support threshold for IE6 attribute hack.
+// Defaults to the $critical-usage-threshold.
+$ie6-attribute-hack-support-threshold: $critical-usage-threshold !default;
+
+// A hack to supply IE6 (and below) with a different property value.
+// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
+@mixin bang-hack($property, $value, $ie6-value) {
+  @if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold) {
+    @warn "it's recommended to use the underscore-hack() mixin instead of bang-hack()";
+    #{$property}: #{$value} !important;
+    #{$property}: #{$ie6-value};
+  }
+}
+
+// A hack to supply IE6 (and below) with a different property value.
+// [Read more](http://www.paulirish.com/2009/browser-specific-css-hacks/)
+@mixin underscore-hack($property, $value, $ie6-value) {
+  @if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold) {
+    #{$property}: #{$value};
+    _#{$property}: #{$ie6-value};
+  }
+}
@@ -0,0 +1,16 @@
+@import "hacks";
+
+//**
+// Cross browser min-height mixin.
+@mixin min-height($value) {
+  @include hacked-minimum(height, $value); }
+
+//**
+// Cross browser min-width mixin.
+@mixin min-width($value) {
+  @include hacked-minimum(width, $value); }
+
+// @private This mixin is not meant to be used directly.
+@mixin hacked-minimum($property, $value) {
+  min-#{$property}: $value;
+  @include underscore-hack($property, auto, $value); }
@@ -0,0 +1,2 @@
+// This module has moved.
+@import "compass/reset/utilities";
@@ -0,0 +1 @@
+
@@ -0,0 +1,18 @@
+// Emits styles for a tag cloud
+@mixin tag-cloud($base-size: 1em) {
+  font-size: $base-size;
+  line-height: 1.2 * $base-size;
+  .xxs, .xs, .s, .l, .xl, .xxl {
+    line-height: 1.2 * $base-size; }
+  .xxs {
+    font-size: $base-size / 2; }
+  .xs {
+    font-size: 2 * $base-size / 3; }
+  .s {
+    font-size: 3 * $base-size / 4; }
+  .l {
+    font-size: 4 * $base-size / 3; }
+  .xl {
+    font-size: 3 * $base-size / 2; }
+  .xxl {
+    font-size: 2 * $base-size; } }
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/links/hover-link' instead.";
+
+@import "../../typography/links/hover-link";
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/links/link-colors' instead.";
+
+@import "../../typography/links/link-colors";
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/links/unstyled-link' instead.";
+
+@import "../../typography/links/unstyled-link";
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/lists/bullets' instead.";
+
+@import "../../typography/lists/bullets";
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/lists/horizontal-list' instead.";
+
+@import "../../typography/lists/horizontal-list";
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/lists/inline-block-list' instead.";
+
+@import "../../typography/lists/inline-block-list";
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/lists/inline-list' instead.";
+
+@import "../../typography/lists/inline-list";
@@ -0,0 +1,16 @@
+@function newline() {
+  @return "
+";
+}
+
+// Joins a list into a string with the separator given.
+@function list-join($list, $separator: ", ") {
+  $result: "";
+  @each $value in $list {
+    @if str-length($result) > 0 {
+      $result: $result + $separator;
+    }
+    $result: $result + #{$value};
+  }
+  @return $result;
+}
@@ -0,0 +1,19 @@
+// Returns true if a $map is a superset of $sub-map.
+@function map-contains-all($map, $sub-map) {
+  @each $key, $value in $sub-map {
+    @if not (map-has-key($map, $key) and map-get($map, $key) == $value) {
+      @return false;
+    }
+  }
+  @return true;
+}
+
+// Returns true if a $map has any key-value pair in $sub-map.
+@function map-contains-any($map, $sub-map) {
+  @each $key, $value in $sub-map {
+    @if map-has-key($map, $key) and map-get($map, $key) == $value {
+      @return true;
+    }
+  }
+  @return false;
+}
@@ -0,0 +1,92 @@
+// Determines those states for which you want to enable magic sprite selectors
+$sprite-selectors: hover, target, active, focus !default;
+
+// Set the width and height of an element to the original
+// dimensions of an image before it was included in the sprite.
+@mixin sprite-dimensions($map, $sprite) {
+  height: image-height(sprite-file($map, $sprite));
+  width: image-width(sprite-file($map, $sprite));
+}
+
+// Set the background position of the given sprite `$map` to display the
+// sprite of the given `$sprite` name. You can move the image relative to its
+// natural position by passing `$offset-x` and `$offset-y`.
+// The background-position will be returned in pixels. By passing `true
+// for `$use_percentages`, you get percentages instead.
+@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0,
+$use-percentages: false) {
+  background-position: sprite-position($map, $sprite, $offset-x, $offset-y,
+  $use-percentages);
+}
+
+
+// Determines if you want to include magic selectors in your sprites
+$disable-magic-sprite-selectors: false !default;
+
+// Set this to underscore if you prefer
+$default-sprite-separator: "-" !default;
+
+// Include the position and (optionally) dimensions of this `$sprite`
+// in the given sprite `$map`. The sprite url should come from either a base
+// class or you can specify the `sprite-url` explicitly like this:
+//
+//     background: $map no-repeat;
+@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0,
+                             $use-percentages: false,
+                             $use-magic-selectors: not $disable-magic-sprite-selectors,
+                             $separator: $default-sprite-separator) {
+  @include sprite-background-position($map, $sprite, $offset-x, $offset-y,
+                                      $use-percentages);
+  @if $dimensions {
+    @include sprite-dimensions($map, $sprite);
+  }
+  @if $use-magic-selectors {
+    @include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y,
+                              $use-percentages, $separator);
+  }
+}
+
+// Include the selectors for the `$sprite` given the `$map` and the 
+// `$full-sprite-name`
+// @private
+@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0,
+                        $offset-y: 0, $use-percentages: false,
+                        $separator: $default-sprite-separator) {
+  @each $state in $sprite-selectors {
+    $sprite-class: "#{$full-sprite-name}#{$separator}#{$state}";
+    @if sprite_has_selector($map, $sprite-name, $state) {
+      @if sprite_has_valid_selector($sprite-class) {
+        &:#{$state}, &.#{$sprite-class} {
+            @include sprite-background-position($map, sprite_selector_file($map, $sprite-name, $state),
+                                                $offset-x, $offset-y, $use-percentages);
+        }
+      }
+    }
+  }
+}
+
+// Generates a class for each space separated name in `$sprite-names`.
+// The class will be of the form .<map-name>-<sprite-name>.
+//
+// If a base class is provided, then each class will extend it.
+//
+// If `$dimensions` is `true`, the sprite dimensions will specified.
+// Positions are returned in pixel units. Set `$use_percentages` to true to
+// instead get percentages.
+@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false,
+               $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0,
+               $use-percentages: false,
+               $separator: $default-sprite-separator) {
+  @each $sprite-name in $sprite-names {
+    @if sprite_does_not_have_parent($map, $sprite-name) {
+      $full-sprite-name: "#{$prefix}#{$separator}#{$sprite-name}";
+      @if sprite_has_valid_selector($full-sprite-name) {
+        .#{$full-sprite-name} {
+          @if $base-class { @extend #{$base-class}; }
+          @include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y, 
+                          $use-percentages, $separator: $separator);
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,81 @@
+@import "compass/typography/text/replacement";
+
+// @doc off
+// Example 1:
+//
+//     a.twitter
+//       +sprite-img("icons-32.png", 1)
+//     a.facebook
+//       +sprite-img("icons-32png", 2)
+//
+// Example 2:
+//
+//     a
+//       +sprite-background("icons-32.png")
+//       a.twitter
+//         +sprite-column(1)
+//       a.facebook
+//         +sprite-row(2)
+// @doc on
+
+$sprite-default-size: 32px !default;
+
+$sprite-default-margin: 0px !default;
+
+$sprite-image-default-width: $sprite-default-size !default;
+
+$sprite-image-default-height: $sprite-default-size !default;
+
+// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.
+// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
+@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
+  @include sprite-background($img, $width, $height);
+  @include sprite-position($col, $row, $width, $height, $margin); 
+}
+
+// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
+@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {
+  @include sprite-background-rectangle($img, $width, $height); 
+}
+
+// Sets rules common for all sprites, assumes a rectangular region.
+@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {
+  background: image-url($img) no-repeat;
+  width: $width;
+  height: $height;
+  overflow: hidden; 
+}
+
+// Allows horizontal sprite positioning optimized for a single row of sprites.
+@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {
+  @include sprite-position($col, 1, $width, 0px, $margin); 
+}
+
+// Allows vertical sprite positioning optimized for a single column of sprites.
+@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
+  @include sprite-position(1, $row, 0px, $height, $margin); 
+}
+
+// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
+@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
+  $x: ($col - 1) * -$width - ($col - 1) * $margin;
+  $y: ($row - 1) * -$height - ($row - 1) * $margin;
+  background-position: $x $y; 
+}
+
+
+
+// Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions
+@mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {    
+  @include hide-text;
+  @include sprite($map, $sprite, $dimensions, $offset-x, $offset-y);
+  background-image: $map;
+  background-repeat: no-repeat;
+}
+
+// Similar to 'replace-text-with-dimensions' but with sprites
+// To use, create your sprite and then pass it in the `$map` param
+// The name of the image in the sprite folder should be `$img-name`
+@mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){    
+  @include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y);
+}
@@ -0,0 +1,22 @@
+@mixin alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color: white, $footer-color: white) {
+  th {
+    background-color: $header-color;
+    &.even, &:nth-child(2n) {
+      background-color: $header-color - $dark-intersection; } }
+  tr {
+    &.odd, &:nth-child(2n+1) {
+      td {
+       background-color: $odd-row-color;
+       &.even, &:nth-child(2n) {
+         background-color: $odd-row-color - $dark-intersection; } } }
+    }
+  tr.even {
+    td {
+      background-color: $even-row-color;
+      &.even, &:nth-child(2n) {
+        background-color: $even-row-color - $dark-intersection; } } }
+  tfoot {
+    th, td {
+      background-color: $footer-color;
+      &.even, &:nth-child(2n) {
+        background-color: $footer-color - $dark-intersection; } } } }
@@ -0,0 +1,38 @@
+@import "compass/support";
+
+@mixin outer-table-borders($width: 2px, $color: black) {
+  border: $width solid $color;
+  thead {
+    th {
+      border-bottom: $width solid $color; } }
+  tfoot {
+    th, td {
+      border-top: $width solid $color; } }
+  th {
+    &:first-child #{if(support-legacy-browser(ie, "6"), ', &.first', null)} {
+      border-right: $width solid $color; } } }
+
+@mixin inner-table-borders($width: 2px, $color: black) {
+  th, td {
+    border: {
+      right: $width solid $color;
+      bottom: $width solid $color;
+      left-width: 0;
+      top-width: 0; };
+    &:last-child {
+      border-right-width: 0; }
+
+    // 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
+    @if support-legacy-browser(ie, "8") {
+      &.last {
+        border-right-width: 0; } } }
+
+  tbody, tfoot {
+    tr:last-child {
+      th, td {
+        border-bottom-width: 0; } }
+    @if support-legacy-browser(ie, "8") {
+      tr.last {
+        th, td {
+          border-bottom-width: 0; } } } } }
@@ -0,0 +1,9 @@
+@mixin table-scaffolding {
+  th {
+    text-align: center;
+    font-weight: bold; }
+  td,
+  th {
+    padding: 2px;
+    &.numeric {
+      text-align: right; } } }
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/text/ellipsis' instead.";
+
+@import "../../typography/text/ellipsis";
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/text/nowrap' instead.";
+
+@import "../../typography/text/nowrap";
@@ -0,0 +1,3 @@
+@warn "This import is deprecated. Use 'compass/typography/text/replacement' instead.";
+
+@import "../../typography/text/replacement";