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
================================================
CSS Arrow Sass Mixin Example
CSS Arrow Sass Mixin Example
East
This box should have an arrow facing east.
West
This box should have an arrow facing west.
South
This box should have an arrow facing south.
North
This box should have an arrow facing north.
Borderless
This box should have an arrow facing east, without a border.
This is a wider border
This blockquote element should have a wider border and smaller arrow.
================================================
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
================================================
File Field Mask
================================================
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
================================================
Hover Visibility Example
A Container
This container has stuff that you can only see
when you hover over it.
================================================
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
================================================
Multi-Line Button
The buttons below look amazing on Firefox and Safari and decent on Internet Explorer 6-8.
Start Free Trial
30-days free! Signup in 60 seconds
Start Free Trial
30-days free! Signup in 60 seconds
Start Free Trial
30-days free! Signup in 60 seconds
Start Free Trial
30-days free! Signup in 60 seconds
================================================
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
================================================
================================================
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
================================================
Search Input
The search box below should look similar on Firefox, Safari, and other browsers that support CSS3.
================================================
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
================================================
Timing Functions
The box below will animate from a 100px square to a 200px square using 2 different cubic-bezier timing functions
================================================
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()); }