groundworkcss 0.2.2

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

@@ -0,0 +1,202 @@
+// =============================================
+//              Custom Settings
+//          Last Updated:2013-4-25
+// =============================================
+
+
+
+
+///////////////////////
+//  custom settings  //
+///////////////////////
+
+// framework options
+$classes:             true !default;       // enable CSS class selectors     (WIP)
+$tags:                true !default;       // enable semantic tag selectors  (WIP)
+$tag-elements: html body
+							div span header footer aside nav menu 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 select button
+							table caption tbody thead tfoot tr th td
+							iframe object canvas audio video !default;
+$aria:                true !default;       // enable Aria role selectors     (WIP)
+
+// file paths
+$root_path:           '../' !default;      // path to HTML document root (relative from $css_path)
+$css_path:            'css/' !default;     // path to CSS output (relative from HTML document root)
+$images_path:         'images/' !default;  // path to images (relative from $root_path)
+$fonts_path:          'font/' !default;    // path to fonts (relative from $root_path)
+$boxsizing_path:      '/js/libs/boxsizing.htc' !default;  // path to box sizing polyfill (change to absolute path from HTML document root)
+
+// layout/grid settings
+$max-width:           1200px !default;     // max container width (i.e. - 960px)
+$gutter:              10px !default;       // gutter spacing
+
+// break points
+$mobile:              "only screen and (max-width:480px)" !default;
+$small-tablet:        "only screen and (max-width:767px)" !default;
+$ipad:                "only screen and (min-width:768px) and (max-width:1024px)" !default;
+$desktop:             "only screen and (min-width:1025px)" !default;
+
+
+
+///////////////////////
+//       colors      //
+///////////////////////
+
+// base styles
+$background-color:    #ffffff !default;
+$font-color:          #2b2b2d !default;
+$base-font-size:      16px !default;       // these are already set by Compass, changing these here will do nothing
+$base-line-height:    24px !default;       // these are already set by Compass, changing these here will do nothing
+$font-family:         Helvetica, Arial, Geneva, sans-serif !default;
+
+// links
+$link-color:          #489AC1 !default;
+$link-active:         #198D98 !default;
+
+// selection
+$selection-color:     $link-color !default;
+$selection-text:      #ffffff !default;
+
+// borders
+$border-color:        #dddddd !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;
+
+// disabled
+$disabled-color:      gray !default;
+
+// info
+$info-color:          #3a87ad !default;
+$info-background:     #d9edf7 !default;
+$info-border:         #bce8f1 !default;
+
+// alert
+$alert-color:         #c09853 !default;
+$alert-background:    #fcf8e3 !default;
+$alert-border:        #fbeee0 !default;
+
+// error
+$error-color:         #b94a48 !default;
+$error-background:    #f2dede !default;
+$error-border:        #eed3d7 !default;
+
+// warning
+$warning-color:       #FF971E !default;
+$warning-background:  #FFE5C7 !default;
+$warning-border:      #FFDBB3 !default;
+
+// success
+$success-color:       #468847 !default;
+$success-background:  #dff0d8 !default;
+$success-border:      #d6e9c6 !default;
+
+$state-name:   'disabled'       'info'       'alert'       'warning'       'error'       'success'       !default;
+$state-code:   $disabled-color  $info-color  $alert-color  $warning-color  $error-color  $success-color  !default;
+$state-text:   $white           $white       $white        $white          $white        $white          !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;
+
+// rounded corners
+$radius:              4px !default;
+
+
+
+///////////////////////
+//   reset elements  //
+///////////////////////
+
+// elements that will be reset (trim this to include only the elements that are used in your markup)
+$reset: true !default;
+$reset-elements:  html body
+                  div span header footer aside nav menu section article details
+                  h1 h2 h3 h4 h5 h6 p
+                  ol ul li dl dt dd
+                  em small big strong b u i
+                  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;
+
+
+
+///////////////////////
+//     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;
+
+
+
+///////////////////////
+//      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

data/vendor/assets/stylesheets/groundworkcss/core/_mixins.scss

@@ -0,0 +1,206 @@
+// =============================================
+//              Global Mixins
+//          Last Updated:2013-4-24
+// =============================================
+
+
+// ====================
+//     helper reset
+// ====================
+
+@mixin helper_reset($properties: padding margin, $spacers: padded pad-top pad-right pad-bottom pad-left gapped gap-top gap-right gap-bottom gap-left) {
+  @for $i from 1 through length($spacers) {
+    &.#{nth($spacers, $i)}, &.#{nth($spacers, $i)}.double, &.#{nth($spacers, $i)}.triple {
+      @for $i from 1 through length($properties) {
+        #{nth($properties, $i)}:0 !important;
+      }
+    }
+  }
+}
+
+
+// ====================
+//      functions
+// ====================
+
+// strip unit of measurement from a value
+@function numericvalue($val) {
+  $unit: unit($val);
+  $number: $val / ($val * 0 + 1);
+  @return $number;
+}
+
+// ====================
+//      utilities
+// ====================
+
+// inline image with fallback support for IE 7-
+@mixin data-image($file) {
+  background-image:url("#{$root_path}#{$images_path}#{$file}");       // fallback
+  background-image:inline-image($file);                               // data URI
+  *background-image:url("#{$root_path}#{$images_path}#{$file}");      // IE7- hack
+}
+
+// vertical gradient
+@mixin gradient($startColor:$white, $endColor:$gray-2, $direction:'top') {
+  @include background-image(linear-gradient($direction, $startColor, $endColor));
+}
+
+// box shadow (deprecated)
+@mixin drop-shadow($color:rgba(0,0,0,0.2), $blur:5px, $x:2px, $y:2px) { // color, blur, x, y
+  @include box-shadow($color $x $y $blur);
+}
+// filter drop shadow
+@mixin filter-shadow($color:rgba(0,0,0,0.2), $blur:0, $x:0, $y:0) { // color, blur, x, y
+  -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);
+  // make filter: drop-shadow not look like poo on retina screens
+  -ms-transform: translateZ(0);
+  -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) { // color, blur, x, y
+  -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;
+}
+
+// text/UI Element states
+@mixin state($state:'disabled',$mode:normal,$color:default) {
+  @if $color == 'default' {
+    @if $state == 'disabled' {
+      $color: $disabled-color;
+    }@else if $state == 'success' {
+      $color: $success-color;
+    }@else if $state == 'warning' {
+      $color: $warning-color;
+    }@else if $state == 'error' {
+      $color: $error-color;
+    }
+  }
+  color:lighten($color, 35%);
+  @if $mode != 'textOnly' {
+  background:lighten($color, 15%);
+  border-color:$color;
+  }
+  @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;
+    }
+  }
+}
+
+// transition
+@mixin transition($transition:all 0.2s) {
+  -ms-transition:$transition; // IE10+
+  -o-transition:$transition; // Opera
+  -moz-transition:$transition; // Firefox
+  -webkit-transition:$transition; // Webkit (Safari, Chrome, other)
+  transition:$transition;
+}
+
+// border radius
+@mixin rounded($radius:4px) {
+  -ms-border-radius:$radius; // IE10+
+  -o-border-radius:$radius; // Opera
+  -moz-border-radius:$radius; // Firefox
+  -webkit-border-radius:$radius; // Webkit (Safari, Chrome, other)
+  border-radius:$radius;
+}
+
+// rotate
+@mixin rotate($deg:0deg) {
+  -ms-transform:rotate($deg); // IE10+
+  -o-transform:rotate($deg); // Opera
+  -moz-transform:rotate($deg); // Firefox
+  -webkit-transform:rotate($deg); // Webkit (Safari, Chrome, other)
+  transform:rotate($deg);
+}
+
+// spin
+@mixin spin($count:infinite,$speed:2s,$easing:linear) {
+  -moz-animation: spin $speed $easing;
+  -moz-animation-iteration-count: $count;
+  -o-animation: spin $speed $easing;
+  -o-animation-iteration-count: $count;
+  -webkit-animation: spin $speed $easing;
+  -webkit-animation-iteration-count: $count;
+  animation: spin $speed $easing;
+  animation-iteration-count: $count;
+}
+
+// scale
+@mixin scale($scale:0) {
+  -ms-transform:scale($scale); // IE10+
+  -o-transform:scale($scale); // Opera
+  -moz-transform:scale($scale); // Firefox
+  -webkit-transform:scale($scale); // Webkit (Safari, Chrome, other)
+  transform:scale($scale);
+}
+
+// translate
+@mixin translate($x:0, $y:0) {
+  -ms-transform:translate($x,$y); // IE10+
+  -o-transform:translate($x,$y); // Opera
+  -moz-transform:translate($x,$y); // Firefox
+  -webkit-transform:translate($x,$y); // Webkit (Safari, Chrome, other)
+  transform:translate($x,$y);
+}
+
+// transform (translate, rotate & scale)
+@mixin transform($x:0, $y:0, $scale:0, $deg:0deg) {
+  -ms-transform:translate($x,$y) rotate($deg) scale($scale); // IE10+
+  -o-transform:translate($x,$y) rotate($deg) scale($scale); // Opera
+  -moz-transform:translate($x,$y) rotate($deg) scale($scale); // Firefox
+  -webkit-transform:translate($x,$y) rotate($deg) scale($scale); // Webkit (Safari, Chrome, other)
+  transform:translate($x,$y) rotate($deg) scale($scale);
+}
+
+// transform origin
+@mixin transform-origin($x:0, $y:0) {
+  -ms-transform-origin:$x $y; // IE10+
+  -o-transform-origin:$x $y; // Opera
+  -moz-transform-origin:$x $y; // Firefox
+  -webkit-transform-origin:$x $y; // Webkit (Safari, Chrome, other)
+  transform-origin:$x $y;
+}
+
+
+// ====================
+//       fonts
+// ====================
+
+// font stacks
+@mixin font-stack($primaryFont:"", $secondaryFont:"", $fallbackFonts:"Arial, Helvetica, Geneva, sans-serif") {
+  /* might add inline-font-files() at some point */
+  @if $secondaryFont != "" {
+    font-family:#{$primaryFont}, #{$secondaryFont}, #{$fallbackFonts};
+  } @else {
+    @if $primaryFont != "" {
+      font-family:#{$primaryFont}, #{$fallbackFonts};
+    } @else {
+      font-family:#{$fallbackFonts};
+    }
+  }
+}

data/vendor/assets/stylesheets/groundworkcss/font-awesome-ie7.min.css

@@ -0,0 +1,22 @@
+/*!
+ *  Font Awesome 3.0.2
+ *  the iconic font designed for use with Twitter Bootstrap
+ *  -------------------------------------------------------
+ *  The full suite of pictographic icons, examples, and documentation
+ *  can be found at: http://fortawesome.github.com/Font-Awesome/
+ *
+ *  License
+ *  -------------------------------------------------------
+ *  - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
+ *  - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
+ *    http://opensource.org/licenses/mit-license.html
+ *  - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
+ *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
+ *    "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
+
+ *  Contact
+ *  -------------------------------------------------------
+ *  Email: dave@davegandy.com
+ *  Twitter: http://twitter.com/fortaweso_me
+ *  Work: Lead Product Designer @ http://kyruus.com
+ */.icon-large{font-size:1.3333333333333333em;margin-top:-4px;padding-top:3px;margin-bottom:-4px;padding-bottom:3px;vertical-align:middle}.nav [class^="icon-"],.nav [class*=" icon-"]{vertical-align:inherit;margin-top:-4px;padding-top:3px;margin-bottom:-4px;padding-bottom:3px}.nav [class^="icon-"].icon-large,.nav [class*=" icon-"].icon-large{vertical-align:-25%}.nav-pills [class^="icon-"].icon-large,.nav-tabs [class^="icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large{line-height:.75em;margin-top:-7px;padding-top:5px;margin-bottom:-5px;padding-bottom:4px}.btn [class^="icon-"].pull-left,.btn [class*=" icon-"].pull-left,.btn [class^="icon-"].pull-right,.btn [class*=" icon-"].pull-right{vertical-align:inherit}.btn [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large{margin-top:-0.5em}a [class^="icon-"],a [class*=" icon-"]{cursor:pointer}ul.icons{text-indent:-1.5em;margin-left:3em}.icon-glass{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-music{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-search{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-envelope{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-heart{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-star{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-star-empty{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-user{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-film{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-th-large{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-th{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-th-list{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-ok{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-remove{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-zoom-in{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-zoom-out{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-off{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-signal{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-cog{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-trash{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-home{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-file{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-time{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-road{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-download-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-download{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-upload{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-inbox{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-play-circle{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-repeat{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-refresh{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-list-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-lock{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-flag{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-headphones{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-volume-off{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-volume-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-volume-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-qrcode{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-barcode{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-tag{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-tags{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-book{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-bookmark{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-print{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-camera{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-font{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-bold{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-italic{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-text-height{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-text-width{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-align-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-align-center{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-align-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-align-justify{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-list{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-indent-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-indent-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-facetime-video{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-picture{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-pencil{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-map-marker{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-adjust{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-tint{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-edit{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-share{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-check{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-move{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-step-backward{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-fast-backward{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-backward{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-play{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-pause{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-stop{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-forward{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-fast-forward{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-step-forward{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-eject{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-chevron-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-chevron-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-plus-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-minus-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-remove-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-ok-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-question-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-info-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-screenshot{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-remove-circle{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-ok-circle{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-ban-circle{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-arrow-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-arrow-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-arrow-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-arrow-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-share-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-resize-full{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-resize-small{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-plus{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-minus{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-asterisk{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-exclamation-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-gift{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-leaf{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-fire{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-eye-open{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-eye-close{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-warning-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-plane{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-calendar{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-random{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-comment{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-magnet{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-chevron-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-chevron-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-retweet{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-shopping-cart{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-folder-close{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-folder-open{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-resize-vertical{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-resize-horizontal{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-bar-chart{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-twitter-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-facebook-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-camera-retro{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-key{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-cogs{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-comments{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-thumbs-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-thumbs-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-star-half{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-heart-empty{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-signout{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-linkedin-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-pushpin{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-external-link{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-signin{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-trophy{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-github-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-upload-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-lemon{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-phone{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-check-empty{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-bookmark-empty{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-phone-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-twitter{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-facebook{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-github{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-unlock{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-credit-card{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-rss{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-hdd{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-bullhorn{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-bell{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-certificate{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-hand-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-hand-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-hand-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-hand-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-circle-arrow-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-circle-arrow-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-circle-arrow-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-circle-arrow-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-globe{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-wrench{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-tasks{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-filter{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-briefcase{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-fullscreen{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-group{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-link{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-cloud{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-beaker{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-cut{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-copy{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-paper-clip{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-save{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-sign-blank{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-reorder{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-list-ul{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-list-ol{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-strikethrough{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-underline{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-table{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-magic{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-truck{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-pinterest{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-pinterest-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-google-plus-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-google-plus{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-money{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-caret-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-caret-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-caret-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-caret-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-columns{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-sort{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-sort-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-sort-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-envelope-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-linkedin{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-undo{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-legal{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-dashboard{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-comment-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-comments-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-bolt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-sitemap{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-umbrella{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-paste{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-lightbulb{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-exchange{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-cloud-download{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-cloud-upload{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-user-md{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-stethoscope{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-suitcase{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-bell-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-coffee{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-food{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-file-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-building{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-hospital{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-ambulance{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-medkit{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-fighter-jet{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-beer{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-h-sign{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-plus-sign-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-double-angle-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-double-angle-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-double-angle-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-double-angle-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-angle-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-angle-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-angle-up{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-angle-down{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-desktop{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-laptop{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-tablet{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-mobile-phone{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-circle-blank{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-quote-left{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-quote-right{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-spinner{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-circle{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-reply{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-github-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-folder-close-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}.icon-folder-open-alt{*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '')}

data/vendor/assets/stylesheets/groundworkcss/form/_all.scss

@@ -0,0 +1,10 @@
+// ===================================
+//               Forms
+// ===================================
+
+
+
+
+// form components
+@import "forms";        // optional
+@import "tiles";        // optional

data/vendor/assets/stylesheets/groundworkcss/form/_forms.scss

@@ -0,0 +1,240 @@
+// =============================================
+//                   Forms
+//          Last Updated:2013-4-24
+// =============================================
+
+
+
+
+%fieldset {
+  border:1px solid $border-color;
+  padding:$gutter;
+}
+
+%legend {
+  font-weight:900;
+  color:darken($background-color, 35%);
+  margin-bottom:0;
+}
+
+%label {
+  display:block;
+  padding:0.4em 0.2em;
+}
+
+%field {
+  display:block;
+  width:100%;
+  margin:0;
+  padding:0.4em;
+  font-family:monospace;
+  line-height:1.5;
+  height:2.25em;
+  background:white;
+  border:1px solid $border-color;
+  @include rounded($radius);
+  &[size] {
+    height:auto;
+  }
+}
+
+%input {
+  @extend %field;
+  &[size] {
+    height:auto;
+  }
+  &[type=checkbox], &[type=radio] {
+    display:inline-block;
+    width:1em;
+    height:1em;
+    margin:0 0 0 0.2em;
+    background:white;
+    border:1px solid $border-color;
+    @include rounded($radius);
+  }
+}
+
+%textarea {
+  height:10em;
+}
+
+%error-block {
+  background:$error-background;
+  color:$error-color;
+  border-color:$error-border;
+}
+
+%error-block-prefix, %error-block-suffix {
+  color:lighten($error-color, 62%);;
+  background:$error-color;
+  border-color:$error-color;
+}
+
+%success-block {
+  background:$success-background;
+  color:$success-color;
+  border-color:$success-border;
+}
+
+%success-block-prefix, %success-block-suffix {
+  color:lighten($success-color, 62%);;
+  background:$success-color;
+  border-color:$success-color;
+}
+
+%select-wrap {
+  display:block;
+  color:gray;
+  background:white;
+  border:1px solid $border-color;
+  position:relative;
+  @include rounded($radius);
+  &:after {
+    content:'...';
+    display:block;
+    width:1.5em;
+    text-align:center;
+    height:100%;
+    position:absolute;
+    z-index:1;
+    font-size:1.5em;
+    line-height:1.25;
+    top:0;
+    right:0;
+    background:darken(white, 12.5%);
+  }
+}
+
+%custom-select {
+  -ms-appearance:none;
+  -o-appearance:none;
+  -moz-appearance:none;
+  -webkit-appearance:none;
+  appearance:none;
+  border:none;
+  background:none;
+  padding:0.4em;
+  font-family:monospace;
+  line-height:1.5;
+  height:2.25em;
+  padding-right:2.5em;
+  position:relative;
+  z-index:2;
+  &.unselected {
+    color:#999;
+  }
+}
+
+%radio-list {
+  list-style:none;
+  margin:0;
+  padding:0;
+}
+
+%prefix, %suffix {
+  display:block;
+  position:relative;
+  z-index:1;
+  width:100%;
+  overflow:hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  margin:0;
+  padding:0.4em;
+  font-family:monospace;
+  line-height:1.25;
+  height:2.25em;
+  text-align:center;
+  color:gray;
+  background:darken(white, 12.5%);
+  border:1px solid darken(white, 17.5%);
+}
+
+%prefix {
+  left:2px;
+  @include rounded($radius 0 0 $radius);
+}
+
+%suffix {
+  left:-2px;
+  @include rounded(0 $radius $radius 0);
+}
+
+@if $tags {
+  $elements: fieldset legend label input textarea;
+	@for $i from 1 through length($elements) {
+		$element: nth($elements, $i);
+		@if not index($tag-elements, $element) == false {
+			#{$element} {
+				@extend %#{$element};
+				@if $element == input or $element == textarea {
+					@extend %field;
+				}
+				@if $element == textarea {
+					@extend %textarea;
+				}
+			}
+		}
+	}
+
+  @if $classes {
+    .select-wrap {
+      @extend %select-wrap;
+      select {
+        @extend %custom-select;
+      }
+    }
+  }
+}
+
+@if $classes {
+  .error, .invalid {
+    input, select, textarea {
+      @extend %error-block;
+    }
+    .prefix, .suffix {
+      @extend %error-block-prefix;
+    }
+  }
+  .success, .valid {
+    input, select, textarea {
+      @extend %success-block;
+    }
+    .prefix, .suffix {
+      @extend %success-block-prefix;
+    }
+  }
+  .fieldset {
+    @extend %fieldset;
+  }
+  .legend {
+    @extend %legend;
+  }
+  .label {
+    @extend %label;
+  }
+  .input, .select, .textarea {
+    @extend %field;
+  }
+  .input {
+    @extend %input;
+  }
+  .textarea {
+    @extend %textarea;
+  }
+  .select-wrap {
+    @extend %select-wrap;
+    .select {
+      @extend %custom-select;
+    }
+  }
+  .radio-list {
+    @extend %radio-list;
+  }
+  .prefix {
+    @extend %prefix;
+  }
+  .suffix {
+    @extend %suffix;
+  }
+}