groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/_settings-rails3.scss

@@ -1,12 +1,12 @@
 // =============================================
 //              Custom Settings
-//          Last Updated:2013-6-24
+//          Last Updated:2013-9-12
 // =============================================
 
 
-///////////////////////
-//     framework     //
-///////////////////////
+// =============================================
+//                  File Paths
+// =============================================
 
 // file paths
 $root_path:           "/assets/";
@@ -15,293 +15,329 @@ $fonts_path:          'groundworkcss/';
 $boxsizing_path:      asset-path("groundworkcss/libs/boxsizing.htc", javascript);
 $PIE_path:            asset-path("groundworkcss/libs/PIE.htc", javascript);
 
-// build options
-// $reset:               true;       // enable CSS reset (recommended)
-// elements that will be reset (refine this to only include elements that you actually use in your markup patterns for optimal performance)
-// $reset-elements:      html body
-//                       div span header footer aside nav menu main section article details
-//                       h1 h2 h3 h4 h5 h6 p
-//                       ol ul li dl dt dd
-//                       em small big strong b u i sub sup del strike
-//                       blockquote cite pre code time address
-//                       a img center hr
-//                       form fieldset legend label input textarea button
-//                       table caption tbody thead tfoot tr th td
-//                       iframe object canvas audio video;
-
-// $global-tags:         true;       // enable output in base/_global.scss  (recommended)
-
-// grid settings
-// $grid-classes:        true;       // enable output of grid classes       (recommended)
-// $numerators:          one    two    three  four    five   six    seven    eight   nine   ten    eleven    twelve;
-// $denominators:        whole  half   third  fourth  fifth  sixth  seventh  eighth  ninth  tenth  eleventh  twelfth;
-// $denominators-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
-// $grid-adapters:       $one-whole $one-half $one-third $one-fourth $one-fifth;
-// $max-width:           1200px;     // maximum container width (i.e. - 960px)
-// $gutter:              10px;       // gutter spacing (used by padded/gapped helpers, elements with padding, etc.)
-
-// flexbox settings
-// $flexbox-classes:    true;       // enable output of flexbox classes    (optional)
-// $flexbox-helpers:    flex-wrapper flex-box vertical-center; // for flexbox order use @include flex-order($val);
-
-// helper settings
-// $layout-classes:      true;       // enable output of layout helpers     (recommended)
-// $layout-helpers:      inline block
-//                       hidden
-//                       disabled
-//                       zero
-//                       pull-right pull-left clear
-//                       center;
-
-// $positioning-classes: true;       // enable output of position helpers   (optional)
-
-// $size-classes:        true;       // enable output of size helpers       (recommended)
-// $size-helpers:        small large;
-
-// $typography-classes:  true;       // enable output of typography helpers (recommended)
-// $typography-helpers:  align-top align-right align-bottom align-left align-center justify
-//                       truncate;
-
-// $border-classes:      true;       // enable output of border helpers     (optional)
-// $border-helpers:      bordered border-right border-left border-top border-bottom;
-
-// round/square
-// $default-radius:      4px;
-// $radius-classes:      true;       // enable output of radius helpers     (optional)
-// $radius-helpers:      square round;
-
-// rotation
-// $rotation-classes:    true;       // enable output of rotational helpers (optional)
-// $rotation-helpers:    rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr;
-
-// spinners
-// $spin-classes:        true;       // enable output of spin helpers       (optional)
-// $spin-helpers:        spin spin-once spin-twice spin-thrice
-//                       spin-fast spin-fast-once spin-fast-twice spin-fast-thrice
-//                       spin-slow spin-slow-once spin-slow-twice spin-slow-thrice;
-
-// spacers
-// $spacer-classes:      true;       // enable output of spacer helpers     (recommended)
-// $spacer-helpers:      padded pad-top pad-right pad-bottom pad-left
-//                       gapped gap-top gap-right gap-bottom gap-left
-//                       offset offset-top offset-right offset-bottom offset-left;
-
-// spacer multipliers
-// $spacer-mod-classes:  true;       // enable output of spacer modifiers   (optional)
-// $spacer-modifiers:    double triple;
-
-// states
-// $ui-states:           disabled info alert warning error success;
-// $button-states:       on active disabled info alert warning error success;
-
-// typography
-// $type-tags:           true;       // enable output of type selectors     (recommended)
-// $type-elements:       h1 h2 h3 h4 h5 h6 p
-//                       ul ol dl
-//                       blockquote cite
-//                       small big em b strong
-//                       sup sub
-//                       del strike
-//                       code pre;
-// $type-colors:         true;       // enable output of colors classes     (optional)
-// $type-classes:        false;      // enable output of type classes       (optional)
-// $type-classnames:     h1 h2 h3 h4 h5 h6 p
-//                       ul ol dl
-//                       blockquote cite
-//                       small big large
-//                       b bold strong
-//                       em italic
-//                       sup sub
-//                       del strike
-//                       code pre
-//                       invalid valid
-//                       unstyled;
-// $styled-lists:        true;       // enable output of styled lists       (optional)
-
-// webfonts
-// $webfont-classes:     true;       // enable output of webfont classes    (optional)
+
+// =============================================
+//                  Web Fonts
+// =============================================
+
+// $web-font-classes:          true;
+// $web-font-names:            "source-sans-pro"
+//                             "museo-slab"
+//                             "quicksand";
+// $web-font-files:            "sourcesanspro-regular-webfont"
+//                             "museo-slab-500-webfont"
+//                             "quicksand-regular-webfont";
+// $placeholder-fonts:         true;
+// $placeholderText-fallback:  true; // noscript fallback for placeholderText.js
+// $placeholder-font-classes:  true;
+// $placeholder-font-names:    "redacted"
+//                             "redacted-script"
+//                             "redacted-script-light"
+//                             "redacted-script-bold";
+// $placeholder-font-files:    "redacted-regular"
+//                             "redacted-script-regular"
+//                             "redacted-script-light"
+//                             "redacted-script-bold";
+
+// =============================================
+//                 Color Palette
+// =============================================
+
+// $white:               #ffffff;
+// $black:               #111111;
+
+// document
+// $background-color:          #ffffff;
+// $font-color:                #2b2b2d;
+
+// links
+// $link-color:                #489AC1;
+// $link-active:               #198D98;
+
+// selection highlight
+// $selection-color:           $link-color;
+// $selection-text:            #ffffff;
+
+// code
+// $code-text:                 #555555;
+// $code-background:           #ffffff;
+
+// borders
+// $border-thickness:          1px;
+// $border-style:              solid;
+// $border-color:              #dddddd;
+// $border:                    #{$border-thickness} #{$border-style} #{$border-color};
 
 // buttons
-// $button-tags:         true;       // enable output of button selectors   (recommended)
-// $button-classes:      true;       // enable output of button classes     (recommended)
-// $button-modifiers:    small large on active square round block;
+// $button-color:              lighten(gray, 32.5%);
+// $button-text:               darken(gray, 15%);
+// $button-border-color:       lighten(gray, 27.5%);
+// $button-active:             lighten(gray, 27.5%);
+// $button-active-text:        darken(gray, 12%);
 
 // navigation
-// $nav-tags:            true;       // enable output of nav selectors      (optional)
-// $nav-classes:         true;
+// $nav-color:                 lighten(gray, 32.5%);
+// $nav-text:                  darken(gray, 15%);
+// $nav-border-color:          lighten(gray, 27.5%);
+// $nav-active:                lighten(gray, 27.5%);
+// $nav-active-text:           darken(gray, 12%);
 
 // tabs
-// $tab-classes:         true;       // enable output of tab classes        (optional)
+// $tab-color:                 lighten(gray, 32.5%);
+// $tab-text:                  darken(gray, 15%);
+// $tab-border-color:          lighten(gray, 22.5%);
+// $tab-active:                lighten(gray, 27.5%);
+// $tab-active-text:           darken(gray, 12%);
+// $tabpanel-background:       #ffffff;
+// $tabpanel-text:             #2b2b2d;
 
-// forms
-// $form-tags:           true;       // enable output of form selectors     (recommended)
-// $form-classes:        false;      // enable output of form classes       (optional)
-// $form-elements:       fieldset legend label input textarea;
+// info
+// $info-color:                #3a87ad;
+// $info-text:                 #ffffff;
+// $info-background:           #d9edf7;
+// $info-border:               #bce8f1;
 
-// tiles
-// $tiles:               true;       // enable output of tile classes       (optional)
-// $tile-modifiers:      on active small large square round disabled;
+// alert
+// $alert-color:               #c09853;
+// $alert-text:                #ffffff;
+// $alert-background:          #fcf8e3;
+// $alert-border:              #fbeee0;
 
-// message & callout boxes
-// $ui-classes:          true;
-// $ui-modifiers:        dismissible;
+// error
+// $error-color:               #b94a48;
+// $error-text:                #ffffff;
+// $error-background:          #f2dede;
+// $error-border:              #eed3d7;
 
-// tables
-// $table-tags:          true;
-// $table-classes:       true;
+// warning
+// $warning-color:             #FF971E;
+// $warning-text:              #ffffff;
+// $warning-background:        #FFE5C7;
+// $warning-border:            #FFDBB3;
 
-// ARIA role selectors (WIP - nav, buttons, tabs, etc.)
-// $aria-selectors:      true;       // enable Aria role selectors
+// success
+// $success-color:             #468847;
+// $success-text:              #ffffff;
+// $success-background:        #dff0d8;
+// $success-border:            #d6e9c6;
 
+// question
+// $question-color:            #9855b4;
+// $question-text:             #ffffff;
+// $question-background:       #f0e6f4;
+// $question-border:           #f1dbfa;
 
-///////////////////////
-//     typography    //
-///////////////////////
+// disabled
+// $disabled-color:            #808080;
+// $disabled-text:             #dddddd;
+// $disabled-background:       lighten($disabled-color, 20%);
+// $disabled-border:           darken($disabled-color, 10%);
 
-// typography
-$base-font-size:      14px;        // base font size for Compass vertical rhythm
-$base-line-height:    18px;        // base line height for Compass vertical rhythm
-// $font-family:         Helvetica, Arial, Geneva, sans-serif;
+// modifier states
+// $state-name:                "info"       "alert"       "warning"       "error"       "success"       "question"       "disabled";
+// $state-code:                $info-color  $alert-color  $warning-color  $error-color  $success-color  $question-color  $disabled-color;
+// $state-text:                $info-text   $alert-text   $warning-text   $error-text   $success-text   $question-text   $disabled-text;
 
+// modifier colors
+// $yellow:                    #f1c40f;
+// $orange:                    #e67e22;
+// $red:                       #e74c3c;
+// $pink:                      #f02475;
+// $purple:                    #9b59b6;
+// $asphalt:                   #34495e;
+// $charcoal:                  #383636;
+// $blue:                      #3498db;
+// $turquoise:                 #1abc9c;
+// $green:                     #2ecc71;
+
+// $modifier-name:             "green"   "blue"   "purple"   "yellow"   "orange"   "red"   "pink"   "turquoise"   "asphalt"  "charcoal"  "white"   "black";
+// $modifier-code:             $green    $blue    $purple    $yellow    $orange    $red    $pink    $turquoise    $asphalt   $charcoal   $white    $black;
+// $modifier-text:             $white    $white   $white     $white     $white     $white  $white   $white        $white     $white      $black    $white;
 
-///////////////////////
-//     web fonts     //
-///////////////////////
 
-// font names (no spaces or special characters, these are used to build selectors)
-// $web-font-names:      AverageSans,
-//                       AmericanTypewriter;
-// font files (must all be named the same as listed below and include .eot, .woff and .ttf file types)
-// $web-font-files:      average-sans-webfont,
-//                       americantypewriterstd-bold;
+// =============================================
+//                 Grid System
+// =============================================
 
+// grid
+// $numerators:                "one"    "two"    "three"  "four"    "five"   "six"    "seven"    "eight"   "nine"   "ten"    "eleven"    "twelve";
+// $denominators:              "whole"  "half"   "third"  "fourth"  "fifth"  "sixth"  "seventh"  "eighth"  "ninth"  "tenth"  "eleventh"  "twelfth";
+// $denominators-plural:       "wholes" "halves" "thirds" "fourths" "fifths" "sixths" "sevenths" "eighths" "ninths" "tenths" "elevenths" "twelfths";
+// $grid-classes:              true;
+// $grid-adapter-classes:      true;
+// $grid-adapters:             $one-whole $one-half $one-third $one-fourth $one-fifth;
+// $grid-adapters-clearfix:    15;
+// $container-width:           1200px;
+// $gutter:                    10px;
+// $responsive:                true;
 
-///////////////////////
-//       colors      //
-///////////////////////
 
-// base styles
-// $background-color:    #ffffff;
-// $font-color:          #2b2b2d;
+// =============================================
+//                  Breakpoints
+// =============================================
 
-// links
-// $link-color:          #489AC1;
-// $link-active:         #198D98;
+// breakpoints
+// $small-mobile:              "(max-width: 319px)";
+// $iphone:                    "(min-device-width: 320px) and (max-device-width: 480px)";
+// $iphone5:                   "(min-device-width: 320px) and (max-device-width: 568px)";
+// $mobile:                    "(max-width: 480px)";
+// $not-mobile:                "(min-width: 481px)";
+// $small-tablet:              "(max-width: 767px)";
+// $tablet:                    "(min-width: 768px)";
+// $ipad:                      "(min-width: 768px) and (max-width:1024px)";
+// $retina-ipad:               "(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)";
+// $not-desktop:               "(max-width: 1024px)";
+// $desktop:                   "(min-width: 1025px)";
+// $retina:                    "(-webkit-min-device-pixel-ratio: 2)";
 
-// selection highlight
-// $selection-color:     $link-color;
-// $selection-text:      #ffffff;
 
-// borders
-// $border-thickness:    1px;
-// $border-style:        solid;
-// $border-color:        #dddddd;
-// $border:              #{$border-thickness} #{$border-style} #{$border-color};
+// =============================================
+//                   Flexbox
+// =============================================
 
-// buttons
-// $button-color:        #1DABB8;
-// $button-border-color: darken($button-color, 10%);
-// $button-active:       #198D98;
-// $button-text:         #ffffff;
-// $button-active-text:  #ffffff;
+// flexible box layout
+// $flexbox-classes:           true; enable output of flexbox classes
+// $flexbox-helpers:           "flex-wrapper" "flex-box" "vertical-center";
 
-// info
-// $info-color:          #3a87ad; // text only
-// $info-text:           #ffffff; // box text
-// $info-background:     #d9edf7;
-// $info-border:         #bce8f1;
 
-// alert
-// $alert-color:         #c09853; // text only
-// $alert-text:          #ffffff; // box text
-// $alert-background:    #fcf8e3;
-// $alert-border:        #fbeee0;
+// =============================================
+//                   Buttons
+// =============================================
 
-// error
-// $error-color:         #b94a48; // text only
-// $error-text:          #ffffff; // box text
-// $error-background:    #f2dede;
-// $error-border:        #eed3d7;
+// $button-tags:               true;
+// $button-classes:            true;
+// $button-modifiers:          "small" "large" "on" "active" "square" "round" "block";
+// $button-states:             "on" "active" "selected" "pressed" "disabled" "info" "alert" "warning" "error" "success" "question";
+// $aria-selectors:            true;
+// $aria-states:               "selected" "pressed" "disabled" "readonly" "invalid";
 
-// warning
-// $warning-color:       #FF971E; // text only
-// $warning-text:        #ffffff; // box text
-// $warning-background:  #FFE5C7;
-// $warning-border:      #FFDBB3;
 
-// success
-// $success-color:       #468847; // text only
-// $success-text:        #ffffff; // box text
-// $success-background:  #dff0d8;
-// $success-border:      #d6e9c6;
+// =============================================
+//                  Animations
+// =============================================
 
-// disabled
-// $disabled-color:      #808080; // text only
-// $disabled-text:       #ffffff; // box text
-// $disabled-background: lighten($disabled-color, 20%);
-// $disabled-border:     darken($disabled-color, 10%);
+// dismissible message animation
+// $dismiss-animation:         "fadeOut";
+
+// animations
+// $bounce-animations:         true;
+// $fade-animations:           true;
+// $flash-animations:          true;
+// $flip-animations:           true;
+// $hinge-animations:          true;
+// $lightspeed-animations:     true;
+// $pulse-animations:          true;
+// $roll-animations:           true;
+// $rotate-animations:         true;
+// $shake-animations:          true;
+// $spin-animations:           true;
+// $spin-helpers:              "spin" "spin-once" "spin-twice" "spin-thrice"
+//                             "spin-fast" "spin-fast-once" "spin-fast-twice" "spin-fast-thrice"
+//                             "spin-slow" "spin-slow-once" "spin-slow-twice" "spin-slow-thrice";
+// $swing-animations:          true;
+// $tada-animations:           true;
+// $wiggle-animations:         true;
+// $wobble-animations:         true;
 
-// modifier states
-// $state-name:          "info"       "alert"       "warning"       "error"       "success"       "disabled"      ;
-// $state-code:          $info-color  $alert-color  $warning-color  $error-color  $success-color  $disabled-color ;
-// $state-text:          $info-text   $alert-text   $warning-text   $error-text   $success-text   $disabled-text  ;
 
-// modifier colors
-// $green:               #2ecc71;
-// $blue:                #3498db;
-// $purple:              #9b59b6;
-// $yellow:              #f1c40f;
-// $orange:              #e67e22;
-// $red:                 #e74c3c;
-// $pink:                #f02475;
-// $turquoise:           #1abc9c;
-// $asphalt:             #34495e;
-
-// $modifier-name:       "green"   "blue"   "purple"   "yellow"   "orange"   "red"   "pink"   "turquoise"   "asphalt" ;
-// $modifier-code:       $green    $blue    $purple    $yellow    $orange    $red    $pink    $turquoise    $asphalt  ;
-// $modifier-text:       $white    $white   $white     $white     $white     $white  $white   $white        $white    ;
-
-
-///////////////////////
-//      modals       //
-///////////////////////
-
-// overlay
-// $overlay-color:                   #0b0b0b;                    // Color of overlay screen
-// $overlay-opacity:                 0.5;                        // Opacity of overlay screen
-// $shadow:                          0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
-
-// spacing
-// $popup-padding-left:              8px;                        // Padding from left and from right side
-// $popup-padding-left-mobile:       6px;                        // Same as above, but is applied when width of window is less than 800px
-
-// $z-index-base:                    500;                        // Base z-index of popup
-
-// controls
-// $include-arrows:                  true;                       // Include styles for nav arrows
-// $controls-opacity:                0.65;                       // Opacity of controls
-// $controls-color:                  #FFF;                       // Color of controls
-// $inner-close-icon-color:          #333;                       // Color of close button when inside
-// $controls-text-color:             #CCC;                       // Color of preloader and '1 of X' indicator
-// $controls-text-color-hover:       #FFF;                       // Hover color of preloader and '1 of X' indicator
-// $IE7support:                      true;                       // Very basic IE7 support
-
-// Inline-type options
-// $modal-max-width:                 $max-width;                 // Maximum width of inline modals
-
-// Iframe-type options
-// $include-iframe-type:             true;                       // Enable Iframe-type popups
-// $iframe-padding-top:              ($gutter*4);                // Iframe padding top
-// $iframe-background:               #000;                       // Background color of iframes
-// $iframe-max-width:                $max-width;                 // Maximum width of iframes
-// $iframe-ratio:                    9/16;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
-
-// Image-type options
-// $include-image-type:              true;                       // Enable Image-type popups
-// $image-padding-top:               ($gutter*4);                // Image padding top
-// $image-padding-bottom:            ($gutter*4);                // Image padding bottom
-// $include-mobile-layout-for-image: true;                       // Removes paddings from top and bottom
-
-// Image caption options
-// $caption-title-color:             #F3F3F3;                    // Caption title color
-// $caption-subtitle-color:          #BDBDBD;                    // Caption subtitle color
+// =============================================
+//                 Typography
+// =============================================
+
+// $type-tags:                 true;
+// $type-elements:             "h1" "h2" "h3" "h4" "h5" "h6" "p"
+//                             "ul" "ol" "dl"
+//                             "q" "quote" "blockquote" "cite"
+//                             "small" "big"
+//                             "b" "strong"
+//                             "em"
+//                             "sup" "sub"
+//                             "del" "strike"
+//                             "code" "pre";
+// $type-colors:               true;
+// $type-classes:              false;
+// $type-classnames:           "h1" "h2" "h3" "h4" "h5" "h6" "p"
+//                             "ul" "ol" "dl"
+//                             "q" "quote" "blockquote" "cite"
+//                             "small" "big" "large"
+//                             "b" "bold" "strong"
+//                             "em" "italic"
+//                             "sup" "sub"
+//                             "del" "strike"
+//                             "code" "pre"
+//                             "invalid" "valid"
+//                             "unstyled";
+// $styled-lists:              true;
+// $multi-column-classes:      true;
+// $multi-column-names:        "one-column" "two-column" "three-column" "four-column" "five-column";
+// $ui-states:                 "info"  "alert" "warning" "error" "success" "question";
+// $ui-icons:                  "\f05a" "\f06a" "\f071"   "\f057" "\f058"   "\f059";
+// $ui-states-colors:          $info-color $alert-color $warning-color $error-color $success-color $question-color;
+// $font-family:               Helvetica, Arial, Geneva, sans-serif;
+// $font-size:                 14px;
+// $line-height:               1.5;
+// $heading-line-height:       1.3;
+// $headings-font:             nth($web-font-names, 1);
+// $links-underlined:          false;
+// $links-active-underlined:   true;
+// $link-type-icons:           true;
+// $link-type-colors:          true;
+
+
+// =============================================
+//                     Misc
+// =============================================
+
+// $default-radius:            4px;
+
+
+// =============================================
+//                   Helpers
+// =============================================
+
+// helpers
+// $positioning-classes:       true;
+// $spacer-classes:            true;
+// $spacer-helpers:            "padded" "pad-top" "pad-right" "pad-bottom" "pad-left"
+//                             "gapped" "gap-top" "gap-right" "gap-bottom" "gap-left"
+//                             "offset" "offset-top" "offset-right" "offset-bottom" "offset-left";
+// $spacer-mod-classes:        true;
+// $spacer-modifiers:          "half" "double" "triple";
+// $size-classes:              true;
+// $size-helpers:              "small" "medium" "large";
+// $layout-classes:            true;
+// $layout-helpers:            "inline" "inline-block" "block"
+//                             "hidden"
+//                             "zero"
+//                             "pull-right" "pull-left" "pull-none" "clear"
+//                             "center";
+// $typography-classes:        true;
+// $typography-helpers:        "align-top" "align-right" "align-bottom" "align-left" "align-center" "justify"
+//                             "truncate";
+// $border-classes:            true;
+// $border-helpers:            "bordered" "border-right" "border-left" "border-top" "border-bottom";
+// $radius-classes:            true;
+// $radius-helpers:            "square" "round";
+// $rotation-classes:          true;
+// $rotation-helpers:          "rotate-90" "rotate-90-ctr" "rotate-180" "rotate-180-ctr" "rotate-270" "rotate-270-ctr" "rotate-360" "rotate-360-ctr";
+// $transition-classes:        true;
+
+// =============================================
+//                  CSS Reset
+// =============================================
+
+// reset
+// $global-tags:               true;
+// $reset:                     true;
+// $reset-elements:            "html" "body"
+//                             "div" "span" "header" "footer" "aside" "nav" "menu" "main" "section" "article" "details"
+//                             "h1" "h2" "h3" "h4" "h5" "h6" "p"
+//                             "ol" "ul" "li" "dl" "dt" "dd"
+//                             "em" "small" "big" "strong" "b" "u" "i" "sub" "sup" "del" "strike"
+//                             "q" "quote" "blockquote" "cite"
+//                             "time" "address"
+//                             "code" "pre"
+//                             "a" "img" "center" "hr"
+//                             "form" "fieldset" "legend" "label" "input" "textarea" "button"
+//                             "table" "caption" "tbody" "thead" "tfoot" "tr" "th" "td"
+//                             "iframe" "object" "canvas" "audio" "video" "embed";