foundation/stylus/foundation/components/global.styl

You may also want to checkout:

//
// Global Foundation Mixins
//

$experimental ?= true;

// We use this to control border radius.
radius($radius=$global-radius) {
  if $radius is a 'unit' {
    if $experimental {
      -webkit-border-radius: $radius;
    }
    border-radius: $radius;
  }
}

// We use this to create equal side border radius on elements.
side-radius($side, $radius) {
  if $side == left {
    if $experimental {
      -moz-border-radius-bottomleft: $radius;
      -moz-border-radius-topleft: $radius;
      -webkit-border-bottom-left-radius: $radius;
      -webkit-border-top-left-radius: $radius;
    }
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
  } else if $side == right {
    if $experimental {
      -moz-border-radius-topright: $radius;
      -moz-border-radius-bottomright: $radius;
      -webkit-border-top-right-radius: $radius;
      -webkit-border-bottom-right-radius: $radius;
    }
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  } else if $side == top {
    if $experimental {
      -moz-border-radius-topright: $radius;
      -moz-border-radius-topleft: $radius;
      -webkit-border-top-right-radius: $radius;
      -webkit-border-top-left-radius: $radius;
    }
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
  } else if $side == bottom {
    if $experimental {
      -moz-border-radius-bottomright: $radius;
      -moz-border-radius-bottomleft: $radius;
      -webkit-border-bottom-right-radius: $radius;
      -webkit-border-bottom-left-radius: $radius;
    }
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
  }
}

// We can control whether or not we have inset shadows edges.
inset-shadow($active=true) {
  if $experimental {
    -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
  }
  box-shadow: $shiny-edge-size $shiny-edge-color inset;

  if $active { &:active {
    if $experimental {
      -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
    }
    box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
}

// We use this to add transitions to elements
single-transition($property=all, $speed=300ms, $ease=ease-out) {
  if $experimental {
    -webkit-transition: $property $speed $ease;
    -moz-transition: $property $speed $ease;
  }
  transition: $property $speed $ease;
}

// We use this to add box-sizing across browser prefixes
box-sizing($type=border-box) {
  if $experimental {
    -moz-box-sizing: $type;
    -webkit-box-sizing: $type;
  }
  box-sizing: $type;
}

// We use this to create equilateral triangles
css-triangle($triangle-size, $triangle-color, $triangle-direction) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: inset $triangle-size;
  if ($triangle-direction == top) {
    border-color: $triangle-color transparent transparent transparent;
    border-top-style: solid;
  }
  if ($triangle-direction == bottom) {
    border-color: transparent transparent $triangle-color transparent;
    border-bottom-style: solid;
  }
  if ($triangle-direction == left) {
    border-color: transparent transparent transparent $triangle-color;
    border-left-style: solid;
  }
  if ($triangle-direction == right) {
    border-color: transparent $triangle-color transparent transparent;
    border-right-style: solid;
  }
}

// We use this to do clear floats
clearfix() {
  *zoom:1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}


// We use this to add a glowing effect to block elements
block-glowing-effect($selector=focus, $fade-time=300ms, $glowing-effect-color=fade-out($primary-color, .25)) {
  if $experimental {
    -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
    -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
  }
  transition: box-shadow $fade-time, border-color $fade-time ease-in-out;

  &:{$selector} {
    if $experimental {
      -webkit-box-shadow: 0 0 5px $glowing-effect-color;
      -moz-box-shadow: 0 0 5px $glowing-effect-color;
    }
    box-shadow: 0 0 5px $glowing-effect-color;
    border-color: $glowing-effect-color;
  }
}

//
// Foundation Variables
//

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with brower-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it effect the grid breakpoints,
// set $em-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size ?= 100%;

// $base-line-height is 24px while $base-font-size is 16px
$base-line-height ?= 150%;

// This is the default html and body font-size for the base em value.
$em-base ?= 16px;

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
emCalc($pxWidth) {
  return 1em * ($pxWidth / $em-base);
}

// Maybe you want to create rems and pixels
// @function remCalc($pxWidth) {
//   @return $pxWidth / $em-base * 1rem;
// }

// We use these to control various global styles
$body-bg ?= #fff;
$body-font-color ?= #222;
$body-font-family ?= "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$body-font-weight ?= normal;
$body-font-style ?= normal;

// We use this to control font-smoothing
$font-smoothing ?= subpixel-antialiased;

// We use these to control text direction settings
$text-direction ?= ltr;

// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
$default-float ?= left;
$opposite-direction ?= right;
if $text-direction == ltr {
  $default-float = left;
  $opposite-direction = right;
} else {
  $default-float = right;
  $opposite-direction = left;
}

// We use these as default colors throughout
$primary-color ?= #2ba6cb;
$secondary-color ?= #e9e9e9;
$alert-color ?= #c60f13;
$success-color ?= #5da423;

// We use these to make sure border radius matches unless we want it different.
$global-radius ?= 3px;
$global-rounded ?= 1000px;

// We use these to control inset shadow shiny edges and depressions.
$shiny-edge-size ?= 0 1px 0;
$shiny-edge-color ?= rgba(#fff, .5);
$shiny-edge-active-color ?= rgba(#000, .2);

// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes ?= true;
$include-print-styles ?= true;
$include-html-global-classes ?= $include-html-classes;

// Media Queries
$small-screen ?= 768px;
$medium-screen ?= 1280px;
$large-screen ?= 1440px;

$screen ?= "only screen";
$small ?= "only screen and (min-width: " + $small-screen + ")";
$medium ?= "only screen and (min-width: " + $medium-screen + ")";
$large ?= "only screen and (min-width: " + $large-screen + ")";
$landscape ?= "only screen and (orientation: landscape)";
$portrait ?= "only screen and (orientation: portrait)";

//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
$cursor-crosshair-value ?= crosshair;
$cursor-default-value ?= default;
$cursor-pointer-value ?= pointer;
$cursor-help-value ?= help;
$cursor-text-value ?= text;


if $include-html-global-classes {

  // Set box-sizing globally to handle padding and border widths
  *,
  *:before,
  *:after {
    box-sizing(border-box);
  }

  html,
  body { font-size: $base-font-size; }

  // Default body styles
  body {
    background: $body-bg;
    color: $body-font-color;
    padding: 0;
    margin: 0;
    font-family: $body-font-family;
    font-weight: $body-font-weight;
    font-style: $body-font-style;
    line-height: 1; // Set to $base-line-height to take on browser default of 150%
    position: relative;
    cursor: $cursor-default-value;
  }

a:hover { cursor: $cursor-pointer-value; }

  // Override outline from normalize, we don't like it
  a:focus { outline: none; }

  // Grid Defaults to get images and embeds to work properly
  img,
  object,
  embed { max-width: 100%; height: auto; }

  object,
  embed { height: 100%; }
  img { -ms-interpolation-mode: bicubic; }

  #map_canvas,
  .map_canvas {
    img,
    embed,
    object { max-width: none !important;
    }
  }

  // Miscellaneous useful HTML classes
  .left         { float: left !important; }
  .right        { float: right !important; }
  .text-left    { text-align: left !important; }
  .text-right   { text-align: right !important; }
  .text-center  { text-align: center !important; }
  .text-justify { text-align: justify !important; }
  .hide         { display: none; }

  // Font smoothing
  // Antialiased font smoothing works best for light text on a dark background.
  // Apply to single elements instead of globally to body.
  // Note this only applies to webkit-based desktop browsers on the Mac.
  .antialiased { -webkit-font-smoothing: antialiased; }

  // Get rid of gap under images by making them display: inline-block; by default
  img {
    display: inline-block;
    vertical-align: middle;
  }

  //
  // Global resets for forms
  //

  // Make sure textarea takes on height automatically
  textarea { height: auto; min-height: 50px; }

  // Make select elements 100% width by default
  select { width: 100%; }

}