varun-r-mallya/wona.github.com
1
0
Fork 0
mirror of https://github.com/WatchOutNewsAgency/wona.github.com.git synced 2026-01-01 01:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved layout flexibility

Browse Source
This commit is contained in:
B Mathis
2010-03-10 13:59:18 -06:00
parent 33bca7246e
commit 42251dddca
27 changed files with 124 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
stylesheets/library/_border_radius.sass
View File

@ -1,47 +0,0 @@
!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)

45
stylesheets/library/_button_style.sass
View File

@ -1,45 +0,0 @@
=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

24
stylesheets/library/_clearfix.sass
View File

@ -1,24 +0,0 @@
// 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

12
stylesheets/library/_easy_box_shadow.sass
View File

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

15
stylesheets/library/_gradient.sass
View File

@ -1,15 +0,0 @@
=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)

8
stylesheets/library/_hacks.sass
View File

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

18
stylesheets/library/_opacity.sass
View File

@ -1,18 +0,0 @@
//**
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)

4
stylesheets/library/_sprite_hover.sass
View File

@ -1,4 +0,0 @@
=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)

52
stylesheets/library/_sprite_img.sass
View File

@ -1,52 +0,0 @@
//**
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

16
stylesheets/library/_typography.sass
View File

@ -2,12 +2,12 @@
!small ||= floor(!base_font_size * .85)
!big ||= floor(!base_font_size * 1.25)
!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)
!h6 = ceil(!base_font_size*1)
!h5 = ceil(!base_font_size*1)
!h4 = ceil(!base_font_size*1.2)
!h3 = ceil(!base_font_size*1.8)
!h2 = ceil(!base_font_size*2.8)
!h1 = ceil(!base_font_size*3.2)
=heading-font
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
@ -29,8 +29,8 @@
!h5 = ceil(!font_size*1)
!h4 = ceil(!font_size*1.2)
!h3 = ceil(!font_size*1.8)
!h2 = ceil(!font_size*3)
!h1 = ceil(!font_size*3.5)
!h2 = ceil(!font_size*2.8)
!h1 = ceil(!font_size*3.2)
h1, h2, h3, h4
&:first-child
margin-top: 0