This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// expects a number from 0 to 100 | |
=opacity(!opacity) | |
:opacity= !opacity / 100 | |
:-moz-opacity= !opacity / 100 | |
:-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{!opacity})" | |
:filter= "alpha(opacity=#{!opacity})" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//** | |
Example use: | |
a | |
+sprite-bg("icons-32.png") | |
a.twitter | |
+sprite-column(1) | |
a.facebook | |
+sprite-column(2) | |
... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//** | |
Example 1: | |
a.twitter | |
+sprite-img("icons-32.png", 1) | |
a.facebook | |
+sprite-img("icons-32png", 2) | |
... | |
Example 2: | |
a | |
+sprite-background("icons-32.png") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!default_border_radius ||= 5px | |
// Round all borders by amount | |
=border-radius(!radius = !default_border_radius) | |
border-radius= !radius | |
-moz-border-radius= !radius | |
-webkit-border-radius= !radius | |
// Round radius at position by amount. | |
// values for !vert: "top", "bottom" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
=gradient(!type, !coords, !color_start, !color_end, !color_stop = false) | |
!gradient= "#{!coords}, from(#{!color_start}), to(#{!color_end})" | |
@if !color_stop | |
!gradient= !gradient + ", " + !color_stop | |
background: -webkit-gradient(#{!type}, #{!gradient}) | |
background: -moz-#{!type}-gradient(#{!gradient}) | |
//* | |
Creates a radial gradient | |
Usage example: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import compass/utilities.sass | |
@import compass/css3.sass | |
=gradient(!type, !webkit_coords, !moz_coords, !color_start, !color_end, !color_stop = false) | |
!webkit_gradient= "#{!webkit_coords}, from(#{!color_start}), to(#{!color_end})" | |
!moz_gradient = "#{!moz_coords}, #{!color_start}, #{!color_end}" | |
@if !color_stop | |
!webkit_gradient= !webkit_gradient + ", " + !color_stop | |
background-image: -webkit-gradient(#{!type}, #{!webkit_gradient}) | |
background: -moz-#{!type}-gradient(#{!moz_gradient}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.observe('dom:loaded', function() { | |
$$('a[rel^=toggle]').each(toggleLinkBehavior) | |
}); | |
function parseRel(key, rel){ | |
var keypos = rel.indexOf(key)+key.length+1; //find occurance of key | |
var keys = rel.slice(keypos).split(']')[0].strip(); //split at end of key segment and trip whitespace | |
return keys.split(','); //return keys as an array | |
} | |
function toggleLinkBehavior(el){ | |
el.toggle_ids = parseRel('toggle', el.readAttribute('rel')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Sass: | |
+linear-gradient(colors(#ddd, #aaa)) //assumes "top" | |
+linear-gradient(colors(#ddd, #aaa), "left") | |
+linear-gradient(colors(#ddd, #aaa), "top left") | |
+linear-gradient(colors(#ddd, #aaa), "top right") | |
// Color stops - I'm using default vertical gradients for simplicity | |
+linear-gradient(colors(#ddd, #ccc, #aaa)) | |
+linear-gradient(colors(#ddd, #ccc 20%, #aaa)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rebuild_site = lambda do |base, relative| | |
if relative && relative =~ /\.s[ac]ss/ | |
puts ">>> Change Detected to #{relative} : updating stylsheets <<<" | |
system "compass" | |
else | |
if !relative | |
puts ">>> Compiling <<<" | |
else | |
puts ">>> Change Detected to #{relative} <<<" | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
=clearfix | |
overflow: hidden | |
+has-layout | |
/* clears while allowing overflow (great for use with box shadows) | |
=pie-clearfix | |
&:after | |
content: " " | |
display: block | |
height: 0 |
OlderNewer