Full Code of chriseppstein/sass-recipes for AI

Repository: chriseppstein/sass-recipes
Branch: master
Commit: 529f21ba20c7
Files: 37
Total size: 38.6 KB

Directory structure:
gitextract_o3gpowai/

├── .gitignore
├── .rvmrc
├── Gemfile
├── README.markdown
├── Rakefile
├── config.rb
├── css-arrow/
│   ├── _css-arrow.sass
│   ├── css-arrow-example.css
│   ├── css-arrow-example.html
│   └── css-arrow-example.sass
├── feedback-tab/
│   └── _feedback_tab.sass
├── file-field-mask/
│   ├── file-field-mask.css
│   ├── file-field-mask.haml
│   ├── file-field-mask.html
│   └── file-field-mask.scss
├── hover-visibility/
│   ├── hover-example.html
│   ├── hover-visibility.css
│   └── hover-visibility.sass
├── multi-line-button/
│   ├── _multi-line-button.sass
│   ├── multi-line-button.css
│   ├── multi-line-button.haml
│   ├── multi-line-button.html
│   └── multi-line-button.sass
├── progress-bar/
│   ├── simple_progress_bar.css
│   ├── simple_progress_bar.haml
│   ├── simple_progress_bar.html
│   └── simple_progress_bar.sass
├── search-input/
│   ├── _search-input.sass
│   ├── search-input.css
│   ├── search-input.haml
│   ├── search-input.html
│   └── search-input.sass
└── timing-functions/
    ├── _timing-functions.scss
    ├── timing-functions.css
    ├── timing-functions.haml
    ├── timing-functions.html
    └── timing-functions.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.sass-cache


================================================
FILE: .rvmrc
================================================
rvm ruby-1.9.2@sass-recipes --create


================================================
FILE: Gemfile
================================================
source "http://rubygems.org"

gem "rake"
gem "haml"
gem "compass"
gem "git"


================================================
FILE: README.markdown
================================================
This project is a collection of Sass snippets that you can use or learn from.

All contributions are entered into the **public domain** and the authors relinquish **all** copyrights.

## Open to All
Anyone who forks this project and submits a patch and pull request will be given commit access after the first patch is accepted.

## Have Fun

Think of this as a wiki that you can check out.

Generally useful recipes might be added to compass.

## Building
You can (re-)build the recipes by running:

  bundle install
  bundle exec rake 

## Adding Recipes to the Live Demo
After committing and pushing your changes to the master branch,
all html and css files will be transferred to/updated on the
github pages branch when you run:

    bundle exec rake pages

Afterwards, you'll be on the `gh-pages` branch where you can edit the index.html file to add links, etc and then push the update.

================================================
FILE: Rakefile
================================================
task :default do
  sh "compass compile"
  FileList.new('**/*.haml').each do |file|
    puts "Compiling #{file} to html"
    sh "haml #{file} #{file.sub(/haml/,'html')}"
  end
end

task :pages do
  require 'git'
  require 'fileutils'
  repo = Git.open('.')
  FileUtils.rm_rf "tmp"
  FileUtils.mkdir("tmp")
  (FileList.new('**/*.html')+FileList.new('**/*.css')).each do |file|
    FileUtils.mkdir_p(File.dirname("tmp/#{file}"))
    FileUtils.cp(file, "tmp/#{file}")
  end
  repo.branch("gh-pages").checkout
  FileUtils.rm_rf "recipes/*"
  (FileList.new('tmp/**/*.html')+FileList.new('tmp/**/*.css')).each do |file|
    FileUtils.mkdir_p(File.dirname("recipes/#{file[4..-1]}"))
    FileUtils.cp(file, "recipes/#{file[4..-1]}")
  end
  FileUtils.rm_rf("tmp")
  Dir["recipes/**/*"].each {|f| repo.add(f) }
  repo.status.deleted.each {|f, s| repo.remove(f)}
  message = ENV["MESSAGE"] || "Updated at #{Time.now.utc}"
  repo.commit(message)
end


================================================
FILE: config.rb
================================================
css_dir = "."
sass_dir = "."


================================================
FILE: css-arrow/_css-arrow.sass
================================================
// Based on [Nicolas Gallagher's Pure CSS speech bubbles][1]
// I've only implemented a simple triangle with border that you can mix in and position.
// Definitely can do with some optimization.
// Works only on elements with relative positioning and overflow not hidden.
//
// [1]: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
//
//

=arrow($direction, $bg-color, $border-color, $border-width, $top, $left, $width: 10px)
  position: relative
  &:before
    content: "\00a0"
    // reduce the damage in FF3.0:
    display: block
    position: absolute
    width: 0
    height: 0
    top: $top
    left: $left
    bottom: auto
    border-width: floor($width / 2)
    border-style: solid
    @if $direction == "south"
      border-color: $border-color transparent transparent transparent
    @if $direction == "north"
      border-color: transparent transparent $border-color transparent
    @if $direction == "east"
      border-color: transparent transparent transparent $border-color
    @if $direction == "west"
      border-color: transparent $border-color transparent transparent
  // creates the smaller  triangle
  &:after
    content: "\00a0"
    display: block
    position: absolute
    width: 0
    height: 0
    @if $direction == "south"
      top: $top - $border-width
    @else if $direction == "north"
      top: $top + $border-width
    @else
      top: $top
    @if $direction == "east"
      left: $left - $border-width
    @else if $direction == "west"
      left: $left + $border-width
    @else
      left: $left
    bottom: auto
    border-width: floor($width / 2)
    border-style: solid
    @if $direction == "south"
      border-color: $bg-color transparent transparent transparent
    @if $direction == "north"
      border-color: transparent transparent $bg-color transparent
    @if $direction == "east"
      border-color: transparent transparent transparent $bg-color
    @if $direction == "west"
      border-color: transparent $bg-color transparent transparent


================================================
FILE: css-arrow/css-arrow-example.css
================================================
/* line 3, css-arrow-example.sass */
body {
  font-family: "Helvetica Neue", Arial, san-serif;
  font-size: 12px;
}

/* line 7, css-arrow-example.sass */
.arrow {
  border: 1px solid #456eb9;
  background: #e7eff4;
  height: 100px;
  width: 500px;
  padding: 10px;
  margin-bottom: 10px;
}
/* line 18, css-arrow-example.sass */
.arrow.east {
  margin-right: 50px;
  position: relative;
}
/* line 12, _css-arrow.sass */
.arrow.east:before {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 520px;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: transparent transparent transparent #456eb9;
}
/* line 33, _css-arrow.sass */
.arrow.east:after {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 519px;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: transparent transparent transparent #e7eff4;
}
/* line 21, css-arrow-example.sass */
.arrow.south {
  margin-bottom: 50px;
  position: relative;
}
/* line 12, _css-arrow.sass */
.arrow.south:before {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 120px;
  left: 0;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: #456eb9 transparent transparent transparent;
}
/* line 33, _css-arrow.sass */
.arrow.south:after {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 119px;
  left: 0;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: #e7eff4 transparent transparent transparent;
}
/* line 24, css-arrow-example.sass */
.arrow.north {
  margin-top: -15px;
  position: relative;
}
/* line 12, _css-arrow.sass */
.arrow.north:before {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: -50px;
  left: 400px;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: transparent transparent #456eb9 transparent;
}
/* line 33, _css-arrow.sass */
.arrow.north:after {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: -49px;
  left: 400px;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: transparent transparent #e7eff4 transparent;
}
/* line 27, css-arrow-example.sass */
.arrow.west {
  margin-left: 50px;
  width: 450px;
  position: relative;
}
/* line 12, _css-arrow.sass */
.arrow.west:before {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: -50px;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: transparent #456eb9 transparent transparent;
}
/* line 33, _css-arrow.sass */
.arrow.west:after {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: -49px;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: transparent #e7eff4 transparent transparent;
}
/* line 31, css-arrow-example.sass */
.arrow.borderless {
  border: none;
  margin-right: 50px;
  position: relative;
}
/* line 12, _css-arrow.sass */
.arrow.borderless:before {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 520px;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: transparent transparent transparent #456eb9;
}
/* line 33, _css-arrow.sass */
.arrow.borderless:after {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 520px;
  bottom: auto;
  border-width: 25px;
  border-style: solid;
  border-color: transparent transparent transparent #e7eff4;
}

/* line 37, css-arrow-example.sass */
blockquote {
  border: 5px solid #333333;
  background: #cccccc;
  height: 90px;
  width: 490px;
  padding: 10px;
  margin-bottom: 30px;
  margin-left: 0;
  position: relative;
}
/* line 12, _css-arrow.sass */
blockquote:before {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 110px;
  left: 450px;
  bottom: auto;
  border-width: 15px;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
}
/* line 33, _css-arrow.sass */
blockquote:after {
  content: "\00a0";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 105px;
  left: 450px;
  bottom: auto;
  border-width: 15px;
  border-style: solid;
  border-color: #cccccc transparent transparent transparent;
}


================================================
FILE: css-arrow/css-arrow-example.html
================================================
<!DOCTYPE html>
<html>
<head>
  <title>CSS Arrow Sass Mixin Example</title>
  <link rel="stylesheet" href="css-arrow-example.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <h1>CSS Arrow Sass Mixin Example</h1>
  <div class="arrow east">
    <h2>East</h2>
    <p>This box should have an arrow facing east.</p>
  </div>
  <div class="arrow west">
    <h2>West</h2>
    <p>This box should have an arrow facing west.</p>
  </div>
  <div class="arrow south">
    <h2>South</h2>
    <p>This box should have an arrow facing south.</p>
  </div>
  <div class="arrow north">
    <h2>North</h2>
    <p>This box should have an arrow facing north.</p>
  </div>
  <div class="arrow borderless">
    <h2>Borderless</h2>
    <p>This box should have an arrow facing east, without a border.</p>
  </div>
  
  <blockquote>
    <h2>This is a wider border</h2>
    <p>This blockquote element should have a wider border and smaller arrow.</p>
  </blockquote>
  
</body>
</html>


================================================
FILE: css-arrow/css-arrow-example.sass
================================================
@import 'css-arrow'

body
  font-family: 'Helvetica Neue', Arial, san-serif
  font-size: 12px
  
.arrow
  $bg-color: #e7eff4
  $border-color: #456eb9
  $border-width: 1px
  $arrow-width: 50px
  border: $border-width solid $border-color
  background: $bg-color
  height: 100px
  width: 500px
  padding: 10px
  margin-bottom: 10px
  &.east
    margin-right: $arrow-width
    +arrow( 'east', $bg-color, $border-color, $border-width, 0, 520px, $arrow-width )
  &.south
    margin-bottom: $arrow-width
    +arrow( 'south', $bg-color, $border-color, $border-width, 120px, 0, $arrow-width )
  &.north
    margin-top: (($arrow-width/2) * -1) + 10px
    +arrow( 'north', $bg-color, $border-color, $border-width, -50px, 400px, $arrow-width )
  &.west
    margin-left: $arrow-width
    width: 500px - $arrow-width
    +arrow( 'west', $bg-color, $border-color, $border-width, 0, -50px, $arrow-width )
  &.borderless
    $border-width: 0px
    border: none
    margin-right: $arrow-width
    +arrow( 'east', $bg-color, $border-color, $border-width, 0, 520px, $arrow-width )
  
blockquote
  $bg-color: #ccc
  $border-color: #333
  $border-width: 5px
  $arrow-width: 30px
  border: $border-width solid $border-color
  background: $bg-color
  height: 90px
  width: 490px
  padding: 10px
  margin-bottom: $arrow-width
  margin-left: 0
  +arrow( 'south', $bg-color, $border-color, $border-width, 110px, 450px, $arrow-width )
  

================================================
FILE: feedback-tab/_feedback_tab.sass
================================================
=feedback-tab($color: red, $side: left, $feedback-border-color: darken($color, 10), $y-position: 250px, $feedback-text-img: "fbtxt.png")
  display: block
  padding: 5px
  background: $color
  border: 2px solid $feedback-border-color
  height: image-height($feedback-text-img)
  width: image-width($feedback-text-img)
  position: fixed
  top: $y-position
  #{$side}: 0px
  border-#{$side}: 0px
  span
    display: block
    +replace-text-with-dimensions($feedback-text-img)
  &:hover, &:active
    cursor: pointer
    width: image-width($feedback-text-img)
  &:hover
    background: lighten($color, 10)
    border-color: lighten($feedback-border-color, 10)
  &:active
    background: darken($color, 10)
    border-color: darken($feedback-border-color, 10)

================================================
FILE: file-field-mask/file-field-mask.css
================================================
/*Author Nick Treadway
License http://creativecommons.org/licenses/publicdomain/
Follow me http://twitter.com/nicktea
Date: Wed June 1 2011*/
ol { list-style-type: none; }
ol li.file { width: 100%; height: 50px; }
ol li.file label { float: left; line-height: 15px; margin: 10px; }
ol li.file input[type=file] { height: 35px; font-size: 20px; position: relative; text-align: left; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; z-index: 2; }
ol li.file #fake-file-field { background: url(../images/file-field-mask.png) no-repeat; position: absolute; left: 95px; top: 50px; height: 50px; font-size: 12px; width: 390px; z-index: 1; }
ol li.file #fake-file-field .input { height: 50px; left: 10px; overflow: hidden; position: relative; top: 5px; width: 280px; }


================================================
FILE: file-field-mask/file-field-mask.haml
================================================
!!! 5
%html
  %head
    %title File Field Mask
    %link{:rel => "stylesheet", :href => "file-field-mask.css"}
  %body
    %section#container
      %aside
        %p File Field Mask Demo - kill that unwanted standard look.
      %ol#demo
        %li.file
          %label File:
          #fake-file-field
            .input
          %input{:type => 'file'}           

================================================
FILE: file-field-mask/file-field-mask.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title>File Field Mask</title>
    <link href='file-field-mask.css' rel='stylesheet' />
  </head>
  <body>
    <section id='container'>
      <aside>
        <p>File Field Mask Demo - kill that unwanted standard look.</p>
      </aside>
      <ol id='demo'>
        <li class='file'>
          <label>File</label>
          <div id='fake-file-field'>
            <div class='input'></div>
          </div>
          <input type='file' />
        </li>
      </ol>
    </section>
  </body>
</html>


================================================
FILE: file-field-mask/file-field-mask.scss
================================================
/*Author Nick Treadway
License http://creativecommons.org/licenses/publicdomain/
Follow me http://twitter.com/nicktea
Date: Wed June 1 2011*/

ol {
  list-style-type: none;
  
  li.file {
   
    width: 100%;
    height: 50px;
    
    label {
      float: left;
      line-height: 15px;
      margin: 10px;}
    
    input[type=file]{
      height:35px;
      font-size:20px;
      position: relative;
      text-align: left;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      filter:alpha(opacity=0);
      opacity: 0;
      z-index: 2;}
    
    #fake-file-field {
      background: url(../images/file-field-mask.png) no-repeat;
      position: absolute;
      left: 95px;
      top: 50px;
      height: 50px;
      font-size: 12px;
      width: 390px;
      z-index: 1;
      .input {
        height: 50px;
        left: 10px;
        overflow: hidden;
        position: relative;
        top: 5px;
        width: 280px;}
    }
  }
}

================================================
FILE: hover-visibility/hover-example.html
================================================
<!DOCTYPE HTML>
<html>
  <head>
    <title>Hover Visibility Example</title>
    <link rel="stylesheet" href="hover-visibility.css" type="text/css" media="screen">
  </head>
  <body>
    <div class="container">
      <h1>A Container</h1>
      <p>This container has stuff that you can only see
         when you hover over it.</p>
      <div id="contained" class="within-container">
        You must be hovering.
        <a href="javascript:document.getElementById('contained').className = 'within-container sticky'">Click to stick.</a>
      </div>
    </div>
  </body>
</html>


================================================
FILE: hover-visibility/hover-visibility.css
================================================
/* line 14, hover-visibility.sass */
.container {
  width: 400px;
  border: 10px solid #777777;
  margin: 100px auto;
  text-align: center;
}

/* line 20, hover-visibility.sass */
.within-container {
  visibility: hidden;
  opacity: 0;
  -moz-transition-property: opacity visibility;
  -webkit-transition-property: opacity visibility;
  -o-transition-property: opacity visibility;
  transition-property: opacity visibility;
  -moz-transition-duration: 0.333s;
  -webkit-transition-duration: 0.333s;
  -o-transition-duration: 0.333s;
  transition-duration: 0.333s;
  -moz-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}
/* line 22, hover-visibility.sass */
.container:hover .within-container, .within-container.sticky {
  visibility: visible;
  opacity: 1;
}


================================================
FILE: hover-visibility/hover-visibility.sass
================================================
@import "compass/css3"

// Provides a nice visibility transition for a nested element
// with gracefull degradation.
=hover-visiblity-hidden($duration: 0.333s)
  visibility: hidden
  opacity: 0
  +transition(opacity visibility, $duration, ease)

=hover-visibility-visible
  visibility: visible
  opacity: 1

.container
  width: 400px
  border: 10px solid #777
  margin: 100px auto
  text-align: center

.within-container
  +hover-visiblity-hidden
  .container:hover &,
  &.sticky
    +hover-visibility-visible  


================================================
FILE: multi-line-button/_multi-line-button.sass
================================================
=multi-line-button($base-color)
  +background-clip('padding-box')
  border-width: 1px
  +border-radius(6px)
  border-style: solid
  color: white
  display: block
  margin: 0.2em auto
  padding: 12px 15px
  text-align: center
  text-decoration: none
  .title
    font-size: 24px
    font-weight: bold
    display: block
    +opacity(0.9)
  .subtitle
    font-size: 14px
    display: block
    margin-top: 4px
    +opacity(0.7)
  &:hover
    .title
      +opacity(1)
    .subtitle
      +opacity(0.8)
  &:active
    padding: 13px 15px 11px
  @if $base-color != none
    +color-multi-line-button($base-color)

=color-multi-line-button($base-color)
  $dark-color: darken($base-color, 10%)
  $light-color: lighten($base-color, 10%)
  $border-color: darken($base-color, 20%)
  $light-border-color: lighten($base-color, 0%)
  $highlight-color: transparentize(desaturate(lighten($base-color, 40%), 50%), 0.5)
  $shadow-color: darken($base-color, 15%)
  $text-shadow-color: darken($base-color, 15%)
  background-color: $base-color
  +linear-gradient(color-stops($light-color, $base-color, $dark-color))
  border-color: $border-color
  border-left-color: $light-border-color
  border-top-color: $light-border-color
  +box-shadow($highlight-color, 1px, 1px, 0, 0, inset)
  color: white
  +text-shadow($text-shadow-color, 0, 1px, 2px)
  &:hover, &:focus
    +linear-gradient(color-stops(lighten($light-color, 5%), lighten($base-color, 5%), $dark-color))
  &:active, &.depressed
    +linear-gradient(color-stops(desaturate(lighten($dark-color, 5%),10%), desaturate($base-color, 10%)))
    +box-shadow(none)
    border-color: $border-color
    

================================================
FILE: multi-line-button/multi-line-button.css
================================================
/* line 14, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* line 17, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
body {
  line-height: 1;
  color: black;
  background: white;
}

/* line 19, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 21, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}

/* line 23, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 25, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: "" "";
}
/* line 96, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
}

/* line 27, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 6, multi-line-button.sass */
body {
  font-family: "Trebuchet MS", "Lucida Grande", Helvetica, Arial, sans-serif;
  padding: 30px;
  text-align: center;
}

/* line 11, multi-line-button.sass */
p {
  margin: 1em 0;
}

/* line 14, multi-line-button.sass */
a.multi-line-button {
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  -o-background-clip: padding-box;
  -ms-background-clip: padding-box;
  -khtml-background-clip: padding-box;
  background-clip: padding-box;
  border-width: 1px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  border-style: solid;
  color: white;
  display: block;
  margin: 0.2em auto;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  background-color: #60a3d8;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #89bbe2), color-stop(50%, #60a3d8), color-stop(100%, #378bce));
  background-image: -moz-linear-gradient(top, #89bbe2 0%, #60a3d8 50%, #378bce 100%);
  background-image: linear-gradient(top, #89bbe2 0%, #60a3d8 50%, #378bce 100%);
  border-color: #2970a9;
  border-left-color: #60a3d8;
  border-top-color: #60a3d8;
  -moz-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  -o-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  color: white;
  text-shadow: #2e7ebd 0 1px 2px;
}
/* line 12, _multi-line-button.sass */
a.multi-line-button .title {
  font-size: 24px;
  font-weight: bold;
  display: block;
  opacity: 0.9;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}
/* line 17, _multi-line-button.sass */
a.multi-line-button .subtitle {
  font-size: 14px;
  display: block;
  margin-top: 4px;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
/* line 23, _multi-line-button.sass */
a.multi-line-button:hover .title {
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
/* line 25, _multi-line-button.sass */
a.multi-line-button:hover .subtitle {
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
/* line 27, _multi-line-button.sass */
a.multi-line-button:active {
  padding: 13px 15px 11px;
}
/* line 48, _multi-line-button.sass */
a.multi-line-button:hover, a.multi-line-button:focus {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #9dc7e7), color-stop(50%, #74afdd), color-stop(100%, #378bce));
  background-image: -moz-linear-gradient(top, #9dc7e7 0%, #74afdd 50%, #378bce 100%);
  background-image: linear-gradient(top, #9dc7e7 0%, #74afdd 50%, #378bce 100%);
}
/* line 50, _multi-line-button.sass */
a.multi-line-button:active, a.multi-line-button.depressed {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5796c8), color-stop(100%, #6aa2ce));
  background-image: -moz-linear-gradient(top, #5796c8 0%, #6aa2ce 100%);
  background-image: linear-gradient(top, #5796c8 0%, #6aa2ce 100%);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border-color: #2970a9;
}
/* line 16, multi-line-button.sass */
a.multi-line-button.green {
  background-color: #63bb4a;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #83c96f), color-stop(50%, #63bb4a), color-stop(100%, #4e9939));
  background-image: -moz-linear-gradient(top, #83c96f 0%, #63bb4a 50%, #4e9939 100%);
  background-image: linear-gradient(top, #83c96f 0%, #63bb4a 50%, #4e9939 100%);
  border-color: #3b742b;
  border-left-color: #63bb4a;
  border-top-color: #63bb4a;
  -moz-box-shadow: rgba(233, 233, 233, 0.5) 1px 1px 0 0 inset;
  -webkit-box-shadow: rgba(233, 233, 233, 0.5) 1px 1px 0 0 inset;
  -o-box-shadow: rgba(233, 233, 233, 0.5) 1px 1px 0 0 inset;
  box-shadow: rgba(233, 233, 233, 0.5) 1px 1px 0 0 inset;
  color: white;
  text-shadow: #458632 0 1px 2px;
}
/* line 48, _multi-line-button.sass */
a.multi-line-button.green:hover, a.multi-line-button.green:focus {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #93d082), color-stop(50%, #73c25d), color-stop(100%, #4e9939));
  background-image: -moz-linear-gradient(top, #93d082 0%, #73c25d 50%, #4e9939 100%);
  background-image: linear-gradient(top, #93d082 0%, #73c25d 50%, #4e9939 100%);
}
/* line 50, _multi-line-button.sass */
a.multi-line-button.green:active, a.multi-line-button.green.depressed {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5f9f4c), color-stop(100%, #6aaf56));
  background-image: -moz-linear-gradient(top, #5f9f4c 0%, #6aaf56 100%);
  background-image: linear-gradient(top, #5f9f4c 0%, #6aaf56 100%);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border-color: #3b742b;
}
/* line 18, multi-line-button.sass */
a.multi-line-button.red {
  background-color: #bf4040;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #cc6666), color-stop(50%, #bf4040), color-stop(100%, #993333));
  background-image: -moz-linear-gradient(top, #cc6666 0%, #bf4040 50%, #993333 100%);
  background-image: linear-gradient(top, #cc6666 0%, #bf4040 50%, #993333 100%);
  border-color: #732626;
  border-left-color: #bf4040;
  border-top-color: #bf4040;
  -moz-box-shadow: rgba(230, 230, 230, 0.5) 1px 1px 0 0 inset;
  -webkit-box-shadow: rgba(230, 230, 230, 0.5) 1px 1px 0 0 inset;
  -o-box-shadow: rgba(230, 230, 230, 0.5) 1px 1px 0 0 inset;
  box-shadow: rgba(230, 230, 230, 0.5) 1px 1px 0 0 inset;
  color: white;
  text-shadow: #862d2d 0 1px 2px;
}
/* line 48, _multi-line-button.sass */
a.multi-line-button.red:hover, a.multi-line-button.red:focus {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #d27979), color-stop(50%, #c55353), color-stop(100%, #993333));
  background-image: -moz-linear-gradient(top, #d27979 0%, #c55353 50%, #993333 100%);
  background-image: linear-gradient(top, #d27979 0%, #c55353 50%, #993333 100%);
}
/* line 50, _multi-line-button.sass */
a.multi-line-button.red:active, a.multi-line-button.red.depressed {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #a04545), color-stop(100%, #b24d4d));
  background-image: -moz-linear-gradient(top, #a04545 0%, #b24d4d 100%);
  background-image: linear-gradient(top, #a04545 0%, #b24d4d 100%);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border-color: #732626;
}
/* line 20, multi-line-button.sass */
a.multi-line-button.orange {
  background-color: #d98026;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #e19951), color-stop(50%, #d98026), color-stop(100%, #ae661e));
  background-image: -moz-linear-gradient(top, #e19951 0%, #d98026 50%, #ae661e 100%);
  background-image: linear-gradient(top, #e19951 0%, #d98026 50%, #ae661e 100%);
  border-color: #824d17;
  border-left-color: #d98026;
  border-top-color: #d98026;
  -moz-box-shadow: rgba(235, 230, 224, 0.5) 1px 1px 0 0 inset;
  -webkit-box-shadow: rgba(235, 230, 224, 0.5) 1px 1px 0 0 inset;
  -o-box-shadow: rgba(235, 230, 224, 0.5) 1px 1px 0 0 inset;
  box-shadow: rgba(235, 230, 224, 0.5) 1px 1px 0 0 inset;
  color: white;
  text-shadow: #985a1b 0 1px 2px;
}
/* line 48, _multi-line-button.sass */
a.multi-line-button.orange:hover, a.multi-line-button.orange:focus {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #e4a667), color-stop(50%, #dd8d3c), color-stop(100%, #ae661e));
  background-image: -moz-linear-gradient(top, #e4a667 0%, #dd8d3c 50%, #ae661e 100%);
  background-image: linear-gradient(top, #e4a667 0%, #dd8d3c 50%, #ae661e 100%);
}
/* line 50, _multi-line-button.sass */
a.multi-line-button.orange:active, a.multi-line-button.orange.depressed {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b8732e), color-stop(100%, #cc8033));
  background-image: -moz-linear-gradient(top, #b8732e 0%, #cc8033 100%);
  background-image: linear-gradient(top, #b8732e 0%, #cc8033 100%);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border-color: #824d17;
}


================================================
FILE: multi-line-button/multi-line-button.haml
================================================
!!! 5
%html
  %head
    %title Multi-Line Button
    %link(rel="stylesheet" href="multi-line-button.css")/
  %body
    %p
      The buttons below look amazing on Firefox and Safari and decent on Internet Explorer 6-8.
    %p
      %a.multi-line-button{:href=>"#", :style=>"width:14em"}
        %span.title Start Free Trial
        %span.subtitle 30-days free! Signup in 60 seconds
    %p
      %a.multi-line-button.green{:href=>"#", :style=>"width:14em"}
        %span.title Start Free Trial
        %span.subtitle 30-days free! Signup in 60 seconds
    %p
      %a.multi-line-button.red{:href=>"#", :style=>"width:14em"}
        %span.title Start Free Trial
        %span.subtitle 30-days free! Signup in 60 seconds
    %p
      %a.multi-line-button.orange{:href=>"#", :style=>"width:14em"}
        %span.title Start Free Trial
        %span.subtitle 30-days free! Signup in 60 seconds

================================================
FILE: multi-line-button/multi-line-button.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title>Multi-Line Button</title>
    <link href='multi-line-button.css' rel='stylesheet' />
  </head>
  <body>
    <p>
      The buttons below look amazing on Firefox and Safari and decent on Internet Explorer 6-8.
    </p>
    <p>
      <a class='multi-line-button' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a>
    </p>
    <p>
      <a class='multi-line-button green' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a>
    </p>
    <p>
      <a class='multi-line-button red' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a>
    </p>
    <p>
      <a class='multi-line-button orange' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a>
    </p>
  </body>
</html>


================================================
FILE: multi-line-button/multi-line-button.sass
================================================
@import compass
@import multi-line-button

+global-reset

body
  font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif
  padding: 30px
  text-align: center

p
  margin: 1em 0

a.multi-line-button
  +multi-line-button(#60a3d8)
  &.green
    +color-multi-line-button(#63bb4a)
  &.red
    +color-multi-line-button(#bf4040)
  &.orange
    +color-multi-line-button(#d98026)


================================================
FILE: progress-bar/simple_progress_bar.css
================================================
/* line 4, simple_progress_bar.sass */
.bar {
  border: 1px solid #666666;
  margin-top: 0.25em;
}

/* line 7, simple_progress_bar.sass */
.fill {
  height: 1.333em;
  background: #a9c13b;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #a9c13b), color-stop(100%, #535f1d));
  background-image: -moz-linear-gradient(top, #a9c13b 0%, #535f1d 100%);
  background-image: linear-gradient(top, #a9c13b 0%, #535f1d 100%);
}

/* line 11, simple_progress_bar.sass */
.bar, .fill {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
}


================================================
FILE: progress-bar/simple_progress_bar.haml
================================================
!!! 5
%head
  %link(rel="stylesheet" href="simple_progress_bar.css")
%body
  - percent_full = 0.55
  .bar
    .fill{:style => "width: #{(percent_full*100).round}%"}


================================================
FILE: progress-bar/simple_progress_bar.html
================================================
<!DOCTYPE html>
<head>
  <link href='simple_progress_bar.css' rel='stylesheet' />
</head>
<body>
  <div class='bar'>
    <div class='fill' style='width: 55%'></div>
  </div>
</body>


================================================
FILE: progress-bar/simple_progress_bar.sass
================================================
@import compass/css3
$bar-fill-color: #A9C13B

.bar
  border: 1px solid #666
  margin-top: 0.25em
.fill
  height: 1.333em
  background: $bar-fill-color
  +linear-gradient(color-stops($bar-fill-color, darken($bar-fill-color, 25%)))
.bar, .fill
  +border-radius(3px)


================================================
FILE: search-input/_search-input.sass
================================================
=search-input($font-size: 11px)
  font-size: $font-size
  +border-radius(100px)
  border: 1px solid #ccc
  border-top-color: #999
  border-left-color: #b0b0b0
  border-right-color: #bbb
  background: white image-url('search.png') 4px center no-repeat
  +box-shadow(rgba(black, 0.2), 0, 1px, 0, inset)
  width: 180px
  padding: 2px 8px 2px 20px

================================================
FILE: search-input/search-input.css
================================================
/* line 4, search-input.sass */
input[type=search], input.search {
  font-size: 11px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  -ms-border-radius: 100px;
  -khtml-border-radius: 100px;
  border-radius: 100px;
  border: 1px solid #cccccc;
  border-top-color: #999999;
  border-left-color: #b0b0b0;
  border-right-color: #bbbbbb;
  background: white url('/images/search.png?1287280523') 4px center no-repeat;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;
  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 inset;
  width: 180px;
  padding: 2px 8px 2px 20px;
}


================================================
FILE: search-input/search-input.haml
================================================
!!! 5
%html
  %head
    %title Search Input
    %link(rel="stylesheet" href="search-input.css")/
  %body
    %p
      The search box below should look similar on Firefox, Safari, and other browsers that support CSS3.
    %form
      %input(type="search" name="q" results=0)/

================================================
FILE: search-input/search-input.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title>Search Input</title>
    <link href='search-input.css' rel='stylesheet' />
  </head>
  <body>
    <p>
      The search box below should look similar on Firefox, Safari, and other browsers that support CSS3.
    </p>
    <form>
      <input name='q' results='0' type='search' />
    </form>
  </body>
</html>


================================================
FILE: search-input/search-input.sass
================================================
@import compass
@import search-input

input[type=search], input.search
  +search-input


================================================
FILE: timing-functions/_timing-functions.scss
================================================
@function linear() {
  @return cubic-bezier(0.250, 0.250, 0.750, 0.750); }

@function ease() {
  @return cubic-bezier(0.250, 0.100, 0.250, 1.000); }

@function ease-in() {
  @return cubic-bezier(0.420, 0.000, 1.000, 1.000); }
@function ease-in-quad() {
  @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
@function ease-in-cubic() {
  @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }
@function ease-in-quart() {
  @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }
@function ease-in-quint() {
  @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }
@function ease-in-sine() {
  @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }
@function ease-in-expo() {
  @return cubic-bezier(0.950, 0.050, 0.795, 0.035); }
@function ease-in-circ() {
  @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }

@function ease-out() {
  @return cubic-bezier(0.000, 0.000, 0.580, 1.000); }
@function ease-out-quad() {
  @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }
@function ease-out-cubic() {
  @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }
@function ease-out-quart() {
  @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }
@function ease-out-quint() {
  @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }
@function ease-out-sine() {
  @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }
@function ease-out-expo() {
  @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }
@function ease-out-circ() {
  @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }

@function ease-in-out() {
  @return cubic-bezier(0.420, 0.000, 0.580, 1.000); }
@function ease-in-out-quad() {
  @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }
@function ease-in-out-cubic() {
  @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }
@function ease-in-out-quart() {
  @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }
@function ease-in-out-quint() {
  @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }
@function ease-in-out-sine() {
  @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }
@function ease-in-out-expo() {
  @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }
@function ease-in-out-circ() {
  @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }

================================================
FILE: timing-functions/timing-functions.css
================================================
/* line 4, timing-functions.scss */
.animatable, .ease-out-expo-animation, .ease-in-expo-animation {
  width: 100px;
  height: 100px;
  -moz-transition-property: height, width;
  -webkit-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
/* line 9, timing-functions.scss */
.active .animatable, .active .ease-out-expo-animation, .active .ease-in-expo-animation {
  width: 200px;
  height: 200px;
}

/* line 13, timing-functions.scss */
.box {
  position: absolute;
  top: 200px;
  background: red;
}

/* line 18, timing-functions.scss */
.ease-out-expo-animation {
  left: 0;
  -moz-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* line 23, timing-functions.scss */
.ease-in-expo-animation {
  left: 240px;
  -moz-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  -webkit-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  -o-transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}


================================================
FILE: timing-functions/timing-functions.haml
================================================
!!! 5
%html
  %head
    %title Timing Functions
    %link(rel="stylesheet" href="timing-functions.css")/
    :javascript
      var isOn = false;
      setInterval(function() {
        document.getElementById("container").className = (isOn) ? "" : "active";
        isOn = !isOn;
      }, 2000);
  %body
    %p
      The box below will animate from a 100px square to a 200px square using 2 different cubic-bezier timing functions
        
    %img{ :src => "expo-ease-out.jpg" }
    %img{ :src => "expo-ease-in.jpg" }
    
    #container
      .box.ease-out-expo-animation
      .box.ease-in-expo-animation

================================================
FILE: timing-functions/timing-functions.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title>Timing Functions</title>
    <link href='timing-functions.css' rel='stylesheet' />
    <script type='text/javascript'>
      //<![CDATA[
        var isOn = false;
        setInterval(function() {
          document.getElementById("container").className = (isOn) ? "" : "active";
          isOn = !isOn;
        }, 2000);
      //]]>
    </script>
  </head>
  <body>
    <p>
      The box below will animate from a 100px square to a 200px square using 2 different cubic-bezier timing functions
    </p>
    <img src='expo-ease-out.jpg' />
    <img src='expo-ease-in.jpg' />
    <div id='container'>
      <div class='box ease-out-expo-animation'></div>
      <div class='box ease-in-expo-animation'></div>
    </div>
  </body>
</html>


================================================
FILE: timing-functions/timing-functions.scss
================================================
@import "compass";
@import "timing-functions";

.animatable {
  width: 100px;
  height: 100px;
  @include transition-property("height, width");
  @include transition-duration(1s); 
  .active & {
    width: 200px;
    height: 200px; } }

.box {
  position: absolute;
  top: 200px;
  background: red; }
  
.ease-out-expo-animation {
  @extend .animatable;
  left: 0;
  @include transition-timing-function(ease-out-expo()); }

.ease-in-expo-animation {
  @extend .animatable;
  left: 240px;
  @include transition-timing-function(ease-in-expo()); }