moved stylesheets
This commit is contained in:
parent
145f81046b
commit
f7700443ec
27 changed files with 1 additions and 2 deletions
47
stylesheets/library/_border_radius.sass
Normal file
47
stylesheets/library/_border_radius.sass
Normal 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)
|
45
stylesheets/library/_button_style.sass
Normal file
45
stylesheets/library/_button_style.sass
Normal 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
|
24
stylesheets/library/_clearfix.sass
Normal file
24
stylesheets/library/_clearfix.sass
Normal 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
|
8
stylesheets/library/_easy_box_shadow.sass
Normal file
8
stylesheets/library/_easy_box_shadow.sass
Normal 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)
|
||||
|
16
stylesheets/library/_float.sass
Normal file
16
stylesheets/library/_float.sass
Normal 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")
|
15
stylesheets/library/_gradient.sass
Normal file
15
stylesheets/library/_gradient.sass
Normal 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)
|
8
stylesheets/library/_hacks.sass
Normal file
8
stylesheets/library/_hacks.sass
Normal 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
|
24
stylesheets/library/_link_colors.sass
Normal file
24
stylesheets/library/_link_colors.sass
Normal 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
|
7
stylesheets/library/_list_borders.sass
Normal file
7
stylesheets/library/_list_borders.sass
Normal 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
|
18
stylesheets/library/_opacity.sass
Normal file
18
stylesheets/library/_opacity.sass
Normal 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)
|
58
stylesheets/library/_reset.sass
Normal file
58
stylesheets/library/_reset.sass
Normal 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
|
4
stylesheets/library/_sprite_hover.sass
Normal file
4
stylesheets/library/_sprite_hover.sass
Normal 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)
|
52
stylesheets/library/_sprite_img.sass
Normal file
52
stylesheets/library/_sprite_img.sass
Normal 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
|
177
stylesheets/library/_typography.sass
Normal file
177
stylesheets/library/_typography.sass
Normal 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
|
Loading…
Add table
Add a link
Reference in a new issue