groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/core/_defaults.scss

@@ -1,6 +1,6 @@
 // =============================================
 //              Default Settings
-//          Last Updated:2013-6-24
+//          Last Updated:2013-8-16
 // =============================================
 
 
@@ -15,297 +15,4 @@ $fonts_path:          "fonts/" !default;    // path to fonts (relative from $roo
 $boxsizing_path:      "/js/libs/boxsizing.htc" !default;  // path to box sizing polyfill (change to absolute path from HTML document root)
 $PIE_path:            "/js/libs/PIE.htc" !default;  // path to IE CSS3 polyfill (change to absolute path from HTML document root)
 
-// build options
-$reset:               true !default;       // 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 !default;
-
-$global-tags:         true !default;       // enable output in base/_global.scss  (recommended)
-
-// grid settings
-$grid-classes:        true !default;       // enable output of grid classes       (recommended)
-$numerators:          one    two    three  four    five   six    seven    eight   nine   ten    eleven    twelve !default;
-$denominators:        whole  half   third  fourth  fifth  sixth  seventh  eighth  ninth  tenth  eleventh  twelfth !default;
-$denominators-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths !default;
-$grid-adapters:       $one-whole $one-half $one-third $one-fourth $one-fifth !default;
-$max-width:           1200px !default;     // maximum container width (i.e. - 960px)
-$gutter:              10px !default;       // gutter spacing (used by padded/gapped helpers, elements with padding, etc.)
-
-// flexbox settings
-$flexbox-classes:    true !default;       // enable output of flexbox classes    (optional)
-$flexbox-helpers:    flex-wrapper flex-box vertical-center !default; // for flexbox order use @include flex-order($val);
-
-// helper settings
-$layout-classes:      true !default;       // enable output of layout helpers     (recommended)
-$layout-helpers:      inline block
-                      hidden
-                      disabled
-                      zero
-                      pull-right pull-left clear
-                      center !default;
-
-$positioning-classes: true !default;       // enable output of position helpers   (optional)
-
-$size-classes:        true !default;       // enable output of size helpers       (recommended)
-$size-helpers:        small large !default;
-
-$typography-classes:  true !default;       // enable output of typography helpers (recommended)
-$typography-helpers:  align-top align-right align-bottom align-left align-center justify
-                      truncate !default;
-
-$border-classes:      true !default;       // enable output of border helpers     (optional)
-$border-helpers:      bordered border-right border-left border-top border-bottom !default;
-
-// round/square
-$default-radius:      4px !default;
-$radius-classes:      true !default;       // enable output of radius helpers     (optional)
-$radius-helpers:      square round !default;
-
-// rotation
-$rotation-classes:    true !default;       // enable output of rotational helpers (optional)
-$rotation-helpers:    rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr !default;
-
-// spinners
-$spin-classes:        true !default;       // 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 !default;
-
-// spacers
-$spacer-classes:      true !default;       // 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 !default;
-
-// spacer multipliers
-$spacer-mod-classes:  true !default;       // enable output of spacer modifiers   (optional)
-$spacer-modifiers:    double triple !default;
-
-// states
-$ui-states:           disabled info alert warning error success !default;
-$button-states:       on active disabled info alert warning error success !default;
-
-// typography
-$type-tags:           true !default;       // 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 !default;
-$type-colors:         true !default;       // enable output of colors classes     (optional)
-$type-classes:        false !default;      // 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 !default;
-$styled-lists:        true !default;       // enable output of styled lists       (optional)
-
-// webfonts
-$webfont-classes:     true !default;       // enable output of webfont classes    (optional)
-
-// buttons
-$button-tags:         true !default;       // enable output of button selectors   (recommended)
-$button-classes:      true !default;       // enable output of button classes     (recommended)
-$button-modifiers:    small large on active square round block !default;
-
-// navigation
-$nav-tags:            true !default;       // enable output of nav selectors      (optional)
-$nav-classes:         true !default;
-
-// tabs
-$tab-classes:         true !default;       // enable output of tab classes        (optional)
-
-// forms
-$form-tags:           true !default;       // enable output of form selectors     (recommended)
-$form-classes:        false !default;      // enable output of form classes       (optional)
-$form-elements:       fieldset legend label input textarea !default;
-
-// tiles
-$tiles:               true !default;       // enable output of tile classes       (optional)
-$tile-modifiers:      on active small large square round disabled !default;
-
-// message & callout boxes
-$ui-classes:          true !default;
-$ui-modifiers:        dismissible !default;
-
-// tables
-$table-tags:          true !default;
-$table-classes:       true !default;
-
-// ARIA role selectors (WIP - nav, buttons, tabs, etc.)
-$aria-selectors:      true !default;       // enable Aria role selectors
-
-// Compass default transition settings
-$default-transition-property: all;
-$default-transition-duration: 0.2s;
-
-
-///////////////////////
-//     typography    //
-///////////////////////
-
-// typography
-$base-font-size:      16px !default;        // already set by Compass
-$base-line-height:    24px !default;        // already set by Compass
-$font-family:         Helvetica, Arial, Geneva, sans-serif !default;
-
-
-///////////////////////
-//     web fonts     //
-///////////////////////
-
-// font names (no spaces or special characters, these are used to build selectors)
-$web-font-names:      AverageSans,
-                      AmericanTypewriter !default;
-// 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 !default;
-
-
-///////////////////////
-//       colors      //
-///////////////////////
-
-// base styles
-$background-color:    #ffffff !default;
-$font-color:          #2b2b2d !default;
-
-// links
-$link-color:          #489AC1 !default;
-$link-active:         #198D98 !default;
-
-// selection highlight
-$selection-color:     $link-color !default;
-$selection-text:      #ffffff !default;
-
-// borders
-$border-thickness:    1px !default;
-$border-style:        solid !default;
-$border-color:        #dddddd !default;
-$border:              #{$border-thickness} #{$border-style} #{$border-color} !default;
-
-// buttons
-$button-color:        #1DABB8 !default;
-$button-border-color: darken($button-color, 10%) !default;
-$button-active:       #198D98 !default;
-$button-text:         #ffffff !default;
-$button-active-text:  #ffffff !default;
-
-// info
-$info-color:          #3a87ad !default; // text only
-$info-text:           #ffffff !default; // box text
-$info-background:     #d9edf7 !default;
-$info-border:         #bce8f1 !default;
-
-// alert
-$alert-color:         #c09853 !default; // text only
-$alert-text:          #ffffff !default; // box text
-$alert-background:    #fcf8e3 !default;
-$alert-border:        #fbeee0 !default;
-
-// error
-$error-color:         #b94a48 !default; // text only
-$error-text:          #ffffff !default; // box text
-$error-background:    #f2dede !default;
-$error-border:        #eed3d7 !default;
-
-// warning
-$warning-color:       #FF971E !default; // text only
-$warning-text:        #ffffff !default; // box text
-$warning-background:  #FFE5C7 !default;
-$warning-border:      #FFDBB3 !default;
-
-// success
-$success-color:       #468847 !default; // text only
-$success-text:        #ffffff !default; // box text
-$success-background:  #dff0d8 !default;
-$success-border:      #d6e9c6 !default;
-
-// disabled
-$disabled-color:      #808080 !default; // text only
-$disabled-text:       #ffffff !default; // box text
-$disabled-background: lighten($disabled-color, 20%) !default;
-$disabled-border:     darken($disabled-color, 10%) !default;
-
-// modifier states
-$state-name:          "info"       "alert"       "warning"       "error"       "success"       "disabled"       !default;
-$state-code:          $info-color  $alert-color  $warning-color  $error-color  $success-color  $disabled-color  !default;
-$state-text:          $info-text   $alert-text   $warning-text   $error-text   $success-text   $disabled-text   !default;
-
-// modifier colors
-$green:               #2ecc71 !default;
-$blue:                #3498db !default;
-$purple:              #9b59b6 !default;
-$yellow:              #f1c40f !default;
-$orange:              #e67e22 !default;
-$red:                 #e74c3c !default;
-$pink:                #f02475 !default;
-$turquoise:           #1abc9c !default;
-$asphalt:             #34495e !default;
-
-$modifier-name:       "green"   "blue"   "purple"   "yellow"   "orange"   "red"   "pink"   "turquoise"   "asphalt"  !default;
-$modifier-code:       $green    $blue    $purple    $yellow    $orange    $red    $pink    $turquoise    $asphalt   !default;
-$modifier-text:       $white    $white   $white     $white     $white     $white  $white   $white        $white     !default;
-
-
-///////////////////////
-//      modals       //
-///////////////////////
-
-// overlay
-$overlay-color:                   #0b0b0b !default;                    // Color of overlay screen
-$overlay-opacity:                 0.5 !default;                        // Opacity of overlay screen
-$shadow:                          0 0 8px rgba(0, 0, 0, 0.6) !default; // Shadow on image or iframe
-
-// spacing
-$popup-padding-left:              8px !default;                        // Padding from left and from right side
-$popup-padding-left-mobile:       6px !default;                        // Same as above, but is applied when width of window is less than 800px
-
-$z-index-base:                    500 !default;                        // Base z-index of popup
-
-// controls
-$include-arrows:                  true !default;                       // Include styles for nav arrows
-$controls-opacity:                0.65 !default;                       // Opacity of controls
-$controls-color:                  #FFF !default;                       // Color of controls
-$inner-close-icon-color:          #333 !default;                       // Color of close button when inside
-$controls-text-color:             #CCC !default;                       // Color of preloader and '1 of X' indicator
-$controls-text-color-hover:       #FFF !default;                       // Hover color of preloader and '1 of X' indicator
-$IE7support:                      true !default;                       // Very basic IE7 support
-
-// Inline-type options
-$modal-max-width:                 $max-width !default;                 // Maximum width of inline modals
-
-// Iframe-type options
-$include-iframe-type:             true !default;                       // Enable Iframe-type popups
-$iframe-padding-top:              ($gutter*4) !default;                // Iframe padding top
-$iframe-background:               #000 !default;                       // Background color of iframes
-$iframe-max-width:                $max-width !default;                 // Maximum width of iframes
-$iframe-ratio:                    9/16 !default;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
-
-// Image-type options
-$include-image-type:              true !default;                       // Enable Image-type popups
-$image-padding-top:               ($gutter*4) !default;                // Image padding top
-$image-padding-bottom:            ($gutter*4) !default;                // Image padding bottom
-$include-mobile-layout-for-image: true !default;                       // Removes paddings from top and bottom
-
-// Image caption options
-$caption-title-color:             #F3F3F3 !default;                    // Caption title color
-$caption-subtitle-color:          #BDBDBD !default;                    // Caption subtitle color
+@import "palette";

data/app/assets/stylesheets/groundworkcss/core/_mixins-core.scss

@@ -1,9 +1,9 @@
 // =============================================
 //              Global Mixins
-//          Last Updated:2013-4-24
+//          Last Updated:2013-8-16
 // =============================================
 
-
+$font-family: Helvetica, Arial, Geneva, sans-serif !default;
 
 
 ///////////////////////
@@ -64,28 +64,16 @@
 
 // filter drop shadow
 @mixin filter-shadow($color: rgba(0,0,0,0.2), $blur: 0, $x: 0, $y: 0) {
-  -ms-filter: drop-shadow($x $y $blur $color);                          // IE9+
-  -o-filter: drop-shadow($x $y $blur $color);                           // Opera
-  -moz-filter: drop-shadow($x $y $blur $color);                         // Firefox
-  -webkit-filter: drop-shadow($x $y $blur $color);                      // Webkit (Safari, Chrome, other)
   filter: drop-shadow($x $y $blur $color);
   @media #{$retina} {
-    -ms-transform: translateZ(0);                                       // make filter nice and crisp on retina devices
-    -o-transform: translateZ(0);
-    -moz-transform: translateZ(0);
-    -webkit-transform: translateZ(0);
     transform: translateZ(0);
   }
 }
 
 // inner box shadow
 @mixin inner-shadow($color, $blur: 0, $x: 0, $y: 0) {
-  -ms-box-shadow: inset $x $y $blur $color;                             // IE10+
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}')";  // IE8
   filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}')";      // IE7-
-  -o-box-shadow: inset $x $y $blur $color;                              // Opera
-  -moz-box-shadow: inset $x $y $blur $color;                            // Firefox
-  -webkit-box-shadow: inset $x $y $blur $color;                         // Webkit (Safari, Chrome, other)
   box-shadow: inset $x $y $blur $color;
 }
 
@@ -102,27 +90,29 @@
       $color: $warning-color;
     }@else if $state == "error" {
       $color: $error-color;
+    }@else if $state == "question" {
+      $color: $question-color;
     }
   }
-  color: lighten($color, 35%);
+  color: lighten($color, 25%);
   @if $mode != "textOnly" {
   background: lighten($color, 15%);
-  border-color: $color;
+  border-color: lighten($color, 10%);
   }
   @if $state == "disabled" {
   cursor: not-allowed;
   text-decoration: none;
   outline: none;
-    &:hover, &:focus, &:visited {
-      color: lighten($color, 35%);
-      @if $mode != "textOnly" {
-      background: lighten($color, 15%);
-      border-color: $color;
-      }
-      cursor: not-allowed;
-      text-decoration: none;
-      outline: none;
-    }
+    // &:hover, &:focus, &:visited {
+    //   color: lighten($color, 35%);
+    //   @if $mode != "textOnly" {
+    //   background: lighten($color, 15%);
+    //   border-color: $color;
+    //   }
+    //   cursor: not-allowed;
+    //   text-decoration: none;
+    //   outline: none;
+    // }
   }
 }
 
@@ -141,22 +131,6 @@
   }
 }
 
-// animations
-@mixin animation($animation: spin, $count: infinite, $speed: 2s, $easing: linear) {
-  -moz-animation: $animation $speed $easing;
-  -moz-animation-iteration-count: $count;
-  -o-animation: $animation $speed $easing;
-  -o-animation-iteration-count: $count;
-  -webkit-animation: $animation $speed $easing;
-  -webkit-animation-iteration-count: $count;
-  animation: $animation $speed $easing;
-  animation-iteration-count: $count;
-}
-// deprecated, use animation() now instead
-@mixin spin($count: infinite, $speed: 2s) {
-  @include animation(spin, $count, $speed);
-}
-
 
 ///////////////////////
 //       fonts       //

data/app/assets/stylesheets/groundworkcss/core/_palette.scss

@@ -0,0 +1,123 @@
+// =============================================
+//            Default Palette
+//          Last Updated:2013-8-16
+// =============================================
+
+// color range
+$white:               #ffffff !default;
+$black:               #111111 !default;
+
+// base styles
+$background-color:    #ffffff !default;
+$font-color:          #2b2b2d !default;
+
+// links
+$link-color:          #489AC1 !default;
+$link-active:         #198D98 !default;
+
+// selection highlight
+$selection-color:     $link-color !default;
+$selection-text:      #ffffff !default;
+
+// borders
+$border-thickness:    1px !default;
+$border-style:        solid !default;
+$border-color:        #dddddd !default;
+$border:              #{$border-thickness} #{$border-style} #{$border-color} !default;
+
+// buttons
+$button-color:        lighten(gray, 32.5%) !default;
+$button-text:         darken(gray, 15%) !default;
+$button-border-color: lighten(gray, 27.5%) !default;
+$button-active:       lighten(gray, 27.5%) !default;
+$button-active-text:  darken(gray, 12%) !default;
+
+// navigation
+$nav-color:           lighten(gray, 32.5%) !default;
+$nav-text:            darken(gray, 15%) !default;
+$nav-border-color:    lighten(gray, 27.5%) !default;
+$nav-active:          lighten(gray, 27.5%) !default;
+$nav-active-text:     darken(gray, 12%) !default;
+
+// info
+$info-color:          #3a87ad !default;
+$info-text:           #ffffff !default;
+$info-background:     #d9edf7 !default;
+$info-border:         #bce8f1 !default;
+
+// alert
+$alert-color:         #c09853 !default;
+$alert-text:          #ffffff !default;
+$alert-background:    #fcf8e3 !default;
+$alert-border:        #fbeee0 !default;
+
+// error
+$error-color:         #b94a48 !default;
+$error-text:          #ffffff !default;
+$error-background:    #f2dede !default;
+$error-border:        #eed3d7 !default;
+
+// warning
+$warning-color:       #FF971E !default;
+$warning-text:        #ffffff !default;
+$warning-background:  #FFE5C7 !default;
+$warning-border:      #FFDBB3 !default;
+
+// success
+$success-color:       #468847 !default;
+$success-text:        #ffffff !default;
+$success-background:  #dff0d8 !default;
+$success-border:      #d6e9c6 !default;
+
+// question
+$question-color:      #9855b4 !default;
+$question-text:       #ffffff !default;
+$question-background: #f0e6f4 !default;
+$question-border:     #f1dbfa !default;
+
+// disabled
+$disabled-color:      #808080 !default;
+$disabled-text:       #dddddd !default;
+$disabled-background: lighten($disabled-color, 20%) !default;
+$disabled-border:     darken($disabled-color, 10%) !default;
+
+// modifier states
+$state-name:          "info"       "alert"       "warning"       "error"       "success"       "question"       "disabled"       !default;
+$state-code:          $info-color  $alert-color  $warning-color  $error-color  $success-color  $question-color  $disabled-color  !default;
+$state-text:          $info-text   $alert-text   $warning-text   $error-text   $success-text   $question-text   $disabled-text   !default;
+
+// modifier colors
+$yellow:              #f1c40f !default;
+$orange:              #e67e22 !default;
+$red:                 #e74c3c !default;
+$pink:                #f02475 !default;
+$purple:              #9b59b6 !default;
+$charcoal:            #383636 !default;
+$asphalt:             #34495e !default;
+$blue:                #3498db !default;
+$turquoise:           #1abc9c !default;
+$green:               #2ecc71 !default;
+
+$modifier-name:       "green"   "blue"   "purple"   "yellow"   "orange"   "red"   "pink"   "turquoise"   "asphalt"  "charcoal"  "white"   "black" !default;
+$modifier-code:       $green    $blue    $purple    $yellow    $orange    $red    $pink    $turquoise    $asphalt   $charcoal   $white    $black  !default;
+$modifier-text:       $white    $white   $white     $white     $white     $white  $white   $white        $white     $white      $black    $white  !default;
+
+// social brand colors
+$twitter:             #00ABF0 !default;
+$facebook:            #3A5898 !default;
+$tumblr:              #44546B !default;
+$linkedin:            #007AB8 !default;
+$pinterest:           #CD1D1F !default;
+$googleplus:          #DE492F !default;
+$gmail:               #E54C3B !default;
+$rss:                 #FF7F00 !default;
+$youtube:             #CD332D !default;
+$github:              #171516 !default;
+$stackoverflow:       #FF7312 !default;
+$instagram:           #231F20 !default;
+$flickr:              #FF0083 !default;
+$foursquare:          #0A9ACF !default;
+$dribbble:            #ea4c89 !default;
+$dropbox:             #007FE1 !default;
+$trello:              #3493CA !default;
+$skype:               #009FE3 !default;

data/app/assets/stylesheets/groundworkcss/demo/_jquery.snippet.groundwork.scss

@@ -0,0 +1,145 @@
+@import "../core/palette";
+@import "../settings";
+
+
+.sh_groundwork {
+  &.snippet-wrap {
+    .snippet-num {
+      margin: 1em 0.5em;
+      li {
+        padding-left: 0.5em;
+      }
+    }
+    pre.sh_sourceCode {
+      padding: 0;
+      max-height: 16.75em;
+      &.snippet-textonly {
+        padding: 12px 15px;
+      }
+    }
+    .snippet-menu, .snippet-hide {
+      top: 5px;
+      right: 5px;
+      pre {
+        background-color: rgba($black, 0.75);
+        padding: 5px 5px 0;
+        border-radius: 4px;
+      }
+    }
+  }
+  background: none;
+  padding: 0;
+  margin: 0;
+  border: 0 none;
+  .sh_sourceCode {
+    background-color: $asphalt;
+    color: #f6f6f6;
+    font-weight: normal;
+    font-style: normal;
+    .sh_keyword {
+      color: $pink;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_type {
+      color: $green;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_string, .sh_regexp {
+      color: $blue;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_specialchar {
+      color: #ffa500;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_comment {
+      color: #80a0ff;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_number {
+      color: #42cad9;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_preproc {
+      color: #ff80ff;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_symbol {
+      color: $yellow;
+      font-weight: bold;
+      font-style: normal;
+    }
+    .sh_function {
+      color: #fff;
+      font-weight: bold;
+      font-style: normal;
+    }
+    .sh_cbracket {
+      color: $yellow;
+      font-weight: bold;
+      font-style: normal;
+    }
+    .sh_url {
+      color: $white;
+      font-weight: normal;
+      font-style: normal;
+      position: relative;
+      top: -0.35em;
+      &:after, &:before {
+        content: "";
+      }
+    }
+    .sh_date, .sh_time, .sh_file {
+      color: $pink;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_ip, .sh_name {
+      color: $blue;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_variable {
+      color: #26e0e7;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_oldfile {
+      color: #ffa500;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_newfile {
+      color: $blue;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_difflines {
+      color: $pink;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_selector {
+      color: #26e0e7;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_property {
+      color: $pink;
+      font-weight: normal;
+      font-style: normal;
+    }
+    .sh_value {
+      color: $blue;
+      font-weight: normal;
+      font-style: normal;
+    }
+  }
+}