moved stylesheets

This commit is contained in:
B Mathis 2009-11-05 21:34:41 -06:00
parent 145f81046b
commit f7700443ec
27 changed files with 1 additions and 2 deletions

View file

@ -0,0 +1,47 @@
!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"
// values for !horz: "left", "right
=border-corner-radius(!vert, !horz, !radius = !default_border_radius)
border-#{!vert}-#{!horz}-radius= !radius
-moz-border-radius-#{!vert}#{!horz}= !radius
-webkit-border-#{!vert}-#{!horz}-radius= !radius
=border-top-left-radius(!radius = !default_border_radius)
+border-corner-radius("top", "left", !radius)
=border-top-right-radius(!radius = !default_border_radius)
+border-corner-radius("top", "right", !radius)
=border-bottom-left-radius(!radius = !default_border_radius)
+border-corner-radius("bottom", "left", !radius)
=border-bottom-right-radius(!radius = !default_border_radius)
+border-corner-radius("bottom", "right", !radius)
// Round top corners by amount
=border-top-radius(!radius = !default_border_radius)
+border-top-left-radius(!radius)
+border-top-right-radius(!radius)
// Round right corners by amount
=border-right-radius(!radius = !default_border_radius)
+border-top-right-radius(!radius)
+border-bottom-right-radius(!radius)
// Round bottom corners by amount
=border-bottom-radius(!radius = !default_border_radius)
+border-bottom-left-radius(!radius)
+border-bottom-right-radius(!radius)
// Round left corners by amount
=border-left-radius(!radius = !default_border_radius)
+border-top-left-radius(!radius)
+border-bottom-left-radius(!radius)

View file

@ -0,0 +1,45 @@
=btn-border-color(!color)
border-color= darken(!color, 25)
=btn-text-shadow(!color)
!text_shadow = darken(!color, 25)
text-shadow= !text_shadow "1px 1px 1px"
=btn-style(!color)
!color1 = lighten(!color, 30)
!color2 = darken(!color, 20)
+h-linear-gradient(!color1, !color2)
background-color= !color
+btn-border-color(!color)
+btn-text-shadow(!color)
=btn-style-hover(!color)
!color = lighten(!color, 8)
!color1 = lighten(!color, 22)
!color2 = darken(!color, 38)
+h-linear-gradient(!color1, !color2)
background-color= !color
+btn-border-color(!color)
+btn-text-shadow(!color)
=btn-style-active(!color)
!color = darken(!color, 5)
!color1 = lighten(!color, 25)
!color2 = darken(!color, 35)
+h-linear-gradient(!color1, !color2)
background-color= !color
+btn-border-color(!color)
+btn-text-shadow(!color)
=btn-structure(!font_size, !border_width, !line_height = !font_size *1.2)
!v_padding = floor(!font_size/2.5)
!h_padding = floor(!font_size)
!v_padding_active = !v_padding - 1px
!h_padding_active = !h_padding - 1px
border-width= !border_width
font-size= !font_size
padding= !v_padding !h_padding
line-height= !line_height
&:active
border-width= !border_width + 1px
padding= !v_padding_active !h_padding_active

View file

@ -0,0 +1,24 @@
// based on compass clearfix
@import _hacks.sass
// Extends the element to enclose any floats it contains.
// This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.
// Recommendations include using this in conjunction with a width:
// http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
=clearfix
:overflow hidden
+has-layout
// Extends the element to enclose any floats it contains.
// This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.
// http://www.positioniseverything.net/easyclearing.html
=pie-clearfix
&:after
:content " "
:display block
:height 0
:clear both
:overflow hidden
:visibility hidden
+has-layout

View file

@ -0,0 +1,8 @@
!default_box_shadow_color = #333
!default_box_shadow_x_offset = 1px
!default_box_shadow_y_offset = 1px
!default_box_shadow_blur_radius = 8px
=easy-box-shadow(!color = !default_box_shadow_color, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset, !blur_radius = !default_box_shadow_blur_radius)
+box-shadow(!x_offset, !y_offset, !blur_radius, !color)

View file

@ -0,0 +1,16 @@
// based on compass float
@import modules/_clearfix.sass
// Available as alternate syntax with just +float
=float(!side = "left")
:display inline
:float= !side
// Implementation of float:left with fix for double-margin bug
=float-left
+float("left")
// Implementation of float:right with fix for double-margin bug
=float-right
+float("right")

View file

@ -0,0 +1,15 @@
=linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop1 = 0, !color_stop1_pos = .3, !color_stop_2 = 0, !color_stop2_pos = .9)
!gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})"
//@if !color_stop1 != 0
// !gradient += "color-stop(#{!color_stop1_pos}, #{!color_stop1})"
background= "-webkit-gradient(linear, #{!gradient})"
background= "-moz-linear-gradient(#{!gradient})"
=h-linear-gradient(!color1, !color2)
+linear-gradient("left top", "left bottom", !color1, !color2)
=v-linear-gradient(!color1, !color2)
+linear-gradient("left top", "right top", !color1, !color2)
//=h-three-color-gradient(!color1, !color2, !color3, !color3_pos = .5)
// +linear-gradient("left top", "left bottom", !color1, !color2, !color3, !color3_pos)

View file

@ -0,0 +1,8 @@
// based on compass hacks
=has-layout
// This makes ie6 get layout
:display inline-block
// and this puts it back to block
&
:display block

View file

@ -0,0 +1,24 @@
!default_link_color ||= #165B94
!default_link_color_hover ||= #fff
!default_link_color_alt ||= #91D5F1
!default_link_color_hover_alt ||= #000
=link-color(!hover = true)
+link-color-style(!default_link_color, !default_link_color_hover, !default_link_color, !hover)
=link-color-alt(!hover = true)
+link-color-style(!default_link_color_alt, !default_link_color_hover_alt, !default_link_color_alt, !hover)
=link-color-heading(!link_color = "inherit", !hover_bg_color = #ccc)
+link-color-style(!link_color,)
=link-color-style(!color = !default_link_color, !color_hover = !default_link_color_hover, !link_hover_bg = !color, !hover = true)
color= !color
padding: 2px
margin: 0 -2px
+border-radius(3px)
@if !hover
&:hover
background-color= !link_hover_bg
color= !color_hover
text-decoration: none

View file

@ -0,0 +1,7 @@
=list-borders(!color1,!color2)
border-left= "1px solid" !color1
border-right= "1px solid" !color2
&.alpha
border-left: none
&.omega
border-right: 0

View file

@ -0,0 +1,18 @@
//**
Provides cross-browser css opacity.
@param !opacity
A number between 0 and 1, where 0 is transparent and 1 is opaque.
=opacity(!opacity)
:opacity= !opacity
:-moz-opacity= !opacity
:-khtml-opacity= !opacity
:-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")"
:filter= "alpha(opacity=" + round(!opacity*100) + ")"
// Make an element completely transparent.
=transparent
+opacity(0)
// Make an element completely opaque.
=opaque
+opacity(1)

View file

@ -0,0 +1,58 @@
// Borrowed from the blueprint reset
// Global reset rules.
// For more specific resets, use the reset mixins provided below
=global-reset
html, body
+reset
+nested-reset
// Reset all elements within some selector scope.To reset the selector itself,
// mixin the appropriate reset mixin for that element type as well. This could be
// useful if you want to style a part of your page in a dramatically different way.
=nested-reset
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
pre, a, abbr, acronym, address, code, del, dfn, em, img,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr
+reset
blockquote, q
+reset-quotation
th, td, caption
+reset-table-cell
table
+reset-table
a img
:border none
=reset-box-model
:margin 0
:padding 0
:border 0
=reset
+reset-box-model
:font
:weight inherit
:style inherit
:size 100%
:family inherit
:vertical-align baseline
=reset-quotation
+reset
:quotes "" ""
&:before,
&:after
:content ""
=reset-table-cell
+reset
:text-align left
:font-weight normal
:vertical-align middle
=reset-table
+reset
:border-collapse separate
:border-spacing 0
:vertical-align middle

View file

@ -0,0 +1,4 @@
=sprite-column-hover-row(!col, !row_hover=2, !width=!sprite_default_size, !height=!sprite_default_size, !margin=!sprite_default_margin)
+sprite-position(!col, 1, !width, !height, !margin)
&:hover
+sprite-position(!col, !row_hover, !width, !height, !margin)

View file

@ -0,0 +1,52 @@
//**
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")
a.twitter
+sprite-column(1)
a.facebook
+sprite-row(2)
...
!sprite_default_size ||= 32px
!sprite_default_margin ||= 0px
!sprite_image_default_width ||= !sprite_default_size
!sprite_image_default_height ||= !sprite_default_size
// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.
// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
+sprite-background(!img, !width, !height)
+sprite-position(!col, !row, !width, !height, !margin)
// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
=sprite-background(!img, !width = !sprite_default_size, !height = !width)
+sprite-background-rectangle(!img, !width, !height)
// Sets rules common for all sprites, assumes a rectangular region.
=sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height)
:background= image_url(!img) "no-repeat"
:width= !width
:height= !height
:overflow hidden
// Allows horizontal sprite positioning optimized for a single row of sprites.
=sprite-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin)
+sprite-position(!col, 1, !width, 0px, !margin)
// Allows vertical sprite positioning optimized for a single column of sprites.
=sprite-row(!row, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
+sprite-position(1, !row, 0px, !height, !margin)
// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
=sprite-position(!col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
!x = ((!col - 1) * -!width) - ((!col - 1) * !margin)
!y = ((!row - 1) * -!height) - ((!row - 1) * !margin)
:background-position= !x !y

View file

@ -0,0 +1,177 @@
!base_font_size ||= 14px
!base_font_size_small ||= 12px
!base_font_color ||= #333
!h6 = ceil(!base_font_size*1.3)
!h5 = ceil(!base_font_size*1.4)
!h4 = ceil(!base_font_size*1.7)
!h3 = ceil(!base_font_size*1.9)
!h2 = ceil(!base_font_size*2.2)
!h1 = ceil(!base_font_size*2.5)
=heading-font
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
=sans-font
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
=serif-font
font-family: Times, "Times New Roman" Georgia, serif
=fixed-font
font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
=general-typography(!font_size = !base_font_size)
+set-heading-sizes(!font_size)
+typography-defaults(!font_size)
=set-heading-sizes(!font_size = !base_font_size)
!h6 = ceil(!font_size*1.3)
!h5 = ceil(!font_size*1.4)
!h4 = ceil(!font_size*1.7)
!h3 = ceil(!font_size*1.9)
!h2 = ceil(!font_size*2.2)
!h1 = ceil(!font_size*2.5)
h1, h2, h3, h4
&:first-child
margin-top: 0
h1
font-size= !h1
margin-bottom= !font_size * .765
line-height= !h1 * 1.625
h2
font-size= !h2
margin-bottom= !font_size * .855
line-height= !h2 * 1.625
h3
font-size= !h3
margin-bottom= !font_size * .956
line-height= !h3 * 1.625
h4
font-size= !h4
margin-bottom= !font_size * 1.161
line-height= !h4 * 1.625
h5
font-size= !h5
margin-bottom= !font_size * 1.238
line-height= !h5 * 1.625
h6
font-size= !h6
margin-bottom= !font_size * 1.625
line-height= !h6 * 1.625
=typography-defaults(!font_size = !base_font_size)
body
line-height= ceil(!font_size * 1.625)
color= !base_font_color
p
+p-style(!font_size)
table
+table-style(!font_size)
ol
+ol-style(!font_size)
ul
+ul-style(!font_size)
dl
+dl-style(!font_size)
blockquote
+quote-style
q
font-style: italic
&:before
content: "\201C"
&:after
content: "\201D"
em, dfn
font-style: italic
strong, dfn
font-weight: bold
del
text-decoration: line-through
span.highlight, em.highlight, strong.highlight
background-color: #ff6
padding: 2px
margin: 0 -2px
abbr, acronym
border-bottom: 1px dotted
cursor: help
address
margin-top= !font_size * 1.625
font-style: italic
pre, code
margin= !font_size * 1.625 0
white-space: pre
pre, code, tt
+fixed-font
line-height= !font_size * 1.5
tt
display: block
margin= !font_size * 1.625 0
sub, sup
line-height: 0
hr
margin-bottom= !font_size * 1.625
small
font-size= floor(!font_size * .85)
big
font-size= floor(!font_size * 1.25)
=ol-style(!font_size = !base_font_size)
list-style: outside
margin= 0 0 !font_size * 1.625
li
list-style: decimal
ol
margin= 0 0 !font_size * 1.625
=ul-style(!font_size = !base_font_size)
list-style: outside
margin= 0 0 !font_size * 1.625
li ul
margin= 0 0 !font_size * 1.625
=dl-style(!font_size = !base_font_size)
margin= 0 0 !font_size * 1.625
dt
font-weight: bold
dd
margin-left= !font_size * 1.625
=quote-style(!font_size = !base_font_size)
padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4
&:before
content: "\201C"
font-size= !font_size * 3
margin= 0 0 0 -.625em
position: absolute
font-family: Times, Georgia, serif
color: #aaa
line-height: 0
> p
padding: 0
margin: 0
=p-style(!font_size = !base_font_size)
padding-bottom= !font_size * 0.8125
img
float: left
margin:
top= !font_size * .5
right= !font_size * .8125
bottom= !font_size* .8125
left= 0
padding: 0
&.right
margin:
right= 0
left= !font_size * .8125
=table-style(!font_size = !base_font_size)
margin= 0 0 !font_size * 1.625
border-collapse: collapse
th
font-weight: bold
tr, th, td
margin: 0
padding= 0 !font_size * 1.625 0 !font_size
tfoot
font-style: italic
caption
text-align: center