diff options
Diffstat (limited to 'source/stylesheets/library')
| -rw-r--r-- | source/stylesheets/library/_border_radius.sass | 47 | ||||
| -rw-r--r-- | source/stylesheets/library/_box_shadow.sass | 10 | ||||
| -rw-r--r-- | source/stylesheets/library/_button_style.sass | 45 | ||||
| -rw-r--r-- | source/stylesheets/library/_clearfix.sass | 24 | ||||
| -rw-r--r-- | source/stylesheets/library/_float.sass | 16 | ||||
| -rw-r--r-- | source/stylesheets/library/_gradient.sass | 15 | ||||
| -rw-r--r-- | source/stylesheets/library/_hacks.sass | 8 | ||||
| -rw-r--r-- | source/stylesheets/library/_link_colors.sass | 24 | ||||
| -rw-r--r-- | source/stylesheets/library/_list_borders.sass | 7 | ||||
| -rw-r--r-- | source/stylesheets/library/_opacity.sass | 18 | ||||
| -rw-r--r-- | source/stylesheets/library/_reset.sass | 58 | ||||
| -rw-r--r-- | source/stylesheets/library/_sprite_hover.sass | 4 | ||||
| -rw-r--r-- | source/stylesheets/library/_sprite_img.sass | 52 | ||||
| -rw-r--r-- | source/stylesheets/library/_typography.sass | 67 |
14 files changed, 395 insertions, 0 deletions
diff --git a/source/stylesheets/library/_border_radius.sass b/source/stylesheets/library/_border_radius.sass new file mode 100644 index 00000000..475b66d5 --- /dev/null +++ b/source/stylesheets/library/_border_radius.sass @@ -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)
\ No newline at end of file diff --git a/source/stylesheets/library/_box_shadow.sass b/source/stylesheets/library/_box_shadow.sass new file mode 100644 index 00000000..728a8942 --- /dev/null +++ b/source/stylesheets/library/_box_shadow.sass @@ -0,0 +1,10 @@ +!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, !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 + -webkit-box-shadow= !x_offset !y_offset !blur_radius !color + -moz-box-shadow= !x_offset !y_offset !blur_radius !color +
\ No newline at end of file diff --git a/source/stylesheets/library/_button_style.sass b/source/stylesheets/library/_button_style.sass new file mode 100644 index 00000000..2b68d5db --- /dev/null +++ b/source/stylesheets/library/_button_style.sass @@ -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
\ No newline at end of file diff --git a/source/stylesheets/library/_clearfix.sass b/source/stylesheets/library/_clearfix.sass new file mode 100644 index 00000000..29548fe0 --- /dev/null +++ b/source/stylesheets/library/_clearfix.sass @@ -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
\ No newline at end of file diff --git a/source/stylesheets/library/_float.sass b/source/stylesheets/library/_float.sass new file mode 100644 index 00000000..b459e81f --- /dev/null +++ b/source/stylesheets/library/_float.sass @@ -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")
\ No newline at end of file diff --git a/source/stylesheets/library/_gradient.sass b/source/stylesheets/library/_gradient.sass new file mode 100644 index 00000000..31c498e0 --- /dev/null +++ b/source/stylesheets/library/_gradient.sass @@ -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)
\ No newline at end of file diff --git a/source/stylesheets/library/_hacks.sass b/source/stylesheets/library/_hacks.sass new file mode 100644 index 00000000..33b442b6 --- /dev/null +++ b/source/stylesheets/library/_hacks.sass @@ -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
\ No newline at end of file diff --git a/source/stylesheets/library/_link_colors.sass b/source/stylesheets/library/_link_colors.sass new file mode 100644 index 00000000..546c436e --- /dev/null +++ b/source/stylesheets/library/_link_colors.sass @@ -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
\ No newline at end of file diff --git a/source/stylesheets/library/_list_borders.sass b/source/stylesheets/library/_list_borders.sass new file mode 100644 index 00000000..b4fe6dbb --- /dev/null +++ b/source/stylesheets/library/_list_borders.sass @@ -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
\ No newline at end of file diff --git a/source/stylesheets/library/_opacity.sass b/source/stylesheets/library/_opacity.sass new file mode 100644 index 00000000..f8d2a056 --- /dev/null +++ b/source/stylesheets/library/_opacity.sass @@ -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) diff --git a/source/stylesheets/library/_reset.sass b/source/stylesheets/library/_reset.sass new file mode 100644 index 00000000..af4fe754 --- /dev/null +++ b/source/stylesheets/library/_reset.sass @@ -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 diff --git a/source/stylesheets/library/_sprite_hover.sass b/source/stylesheets/library/_sprite_hover.sass new file mode 100644 index 00000000..13c644f6 --- /dev/null +++ b/source/stylesheets/library/_sprite_hover.sass @@ -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)
\ No newline at end of file diff --git a/source/stylesheets/library/_sprite_img.sass b/source/stylesheets/library/_sprite_img.sass new file mode 100644 index 00000000..dadac12b --- /dev/null +++ b/source/stylesheets/library/_sprite_img.sass @@ -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
\ No newline at end of file diff --git a/source/stylesheets/library/_typography.sass b/source/stylesheets/library/_typography.sass new file mode 100644 index 00000000..8b2c67c9 --- /dev/null +++ b/source/stylesheets/library/_typography.sass @@ -0,0 +1,67 @@ +!base_font_size ||= 14px +!base_font_size_small ||= 12px +!h6 ||= !base_font_size +!h5 ||= ceil(!h6*1.1) +!h4 ||= ceil(!h5*1.1) +!h3 ||= ceil(!h4*1.2) +!h2 ||= ceil(!h3*1.25) +!h1 ||= ceil(!h2*1.255) + +=set-heading-sizes(!font_size = !base_font_size) + !h6 = !font_size + !h5 = ceil(!h6*1.1) + !h4 = ceil(!h5*1.1) + !h3 = ceil(!h4*1.2) + !h2 = ceil(!h3*1.25) + !h1 = ceil(!h2*1.255) + h1, h2, h3, h4 + &:first-child + margin-top: 0 + h1 + font-size= !h1 + margin-bottom= !h2/2 + line-height= !h1 * 1.2 + h2 + font-size= !h2 + margin= !h2/2 0 !h2/2 + line-height= !h2 * 1.2 + h3 + font-size= !h3 + margin= !h2/2 0 !h2/2 + line-height= !h3 * 1.2 + h4 + font-size= !h4 + margin= !h4/2 0 !h4/2 + line-height= !h4 * 1.2 + h5 + font-size= !h5 + margin= !h4/2 0 !h4/2 + line-height= !h5 * 1.2 + h6 + font-size= !h6 + margin= !h4/2 0 !h4/2 + line-height= !h6 * 1.2 + +=typography-defaults(!font_size = !base_font_size) + line-height= ceil(!font_size * 1.5) + p + padding-bottom= !font_size * 2 + h1,h2,h3,h4,h5,h6 + font-weight: bold + em + font-style: italic + strong + font-weight: bold + span.highlight, em.highlight, strong.highlight + background-color: #ff6 + padding: 2px + margin: 0 -2px + ul, ol, dl + list-style: inside + margin= 0 0 (!font_size) + li + padding: 0 0 2px + small + font-size= floor(!font_size * .85) + big + font-size= floor(!font_size * 1.25)
\ No newline at end of file |