Convert the compass core framework to css-style property syntax.

This commit is contained in:
Chris Eppstein 2009-09-28 21:52:49 -07:00
parent 6e7f658f3b
commit e744c1e0db
26 changed files with 173 additions and 173 deletions

View File

@ -6,19 +6,19 @@
Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
=unobtrusive-logo(!size = 1em)
:font-family Monaco, Courier, "Lucida Sans Unicode", monospace
:font-size= !size
:color #888
font-family: Monaco, Courier, "Lucida Sans Unicode", monospace
font-size= !size
color: #888
.selector
:vertical-align middle
:font-size= 1.3em
vertical-align: middle
font-size= 1.3em
.brace
:vertical-align middle
:font bold 1.7em Georgia, "Times New Roman", serif
:color #CCC
:margin= 0 -0.2em
vertical-align: middle
font: bold 1.7em Georgia, "Times New Roman", serif
color: #CCC
margin= 0 -0.2em
.rule
:vertical-align middle
:margin= 0 -0.2em
vertical-align: middle
margin= 0 -0.2em

View File

@ -5,15 +5,15 @@
=sticky-footer(!footer_height, !root_selector = "#root", !root_footer_selector = "#root_footer", !footer_selector = "#footer")
html, body
:height 100%
height: 100%
#{!root_selector}
:min-height 100%
:height auto !important
:height 100%
:margin-bottom= -!footer_height
min-height: 100%
height: auto !important
height: 100%
margin-bottom= -!footer_height
#{!root_footer_selector}
:height= !footer_height
height= !footer_height
#{!footer_selector}
:clear both
:position relative
:height= !footer_height
clear: both
position: relative
height= !footer_height

View File

@ -1,3 +1,3 @@
@import links/hover_link.sass
@import links/link_colors.sass
@import links/unstyled_link.sass
@import links/unstyled_link.sass

View File

@ -6,13 +6,13 @@
@if !media == "print"
.noprint,
.no-print
:display none
display: none
#{elements_of_type("block")}
&.print-only
:display block
display: block
#{elements_of_type("inline")}
&.print-only
:display inline
display: inline
@else
.print-only
:display none
display: none

View File

@ -1 +1 @@
@import sprites/sprite_img.sass
@import sprites/sprite_img.sass

View File

@ -2,36 +2,36 @@
CSS3 columns for Mozilla, Webkit and the Future
=column-count(!n)
:-moz-column-count= !n
:-webkit-column-count= !n
:column-count= !n
-moz-column-count= !n
-webkit-column-count= !n
column-count= !n
=column-gap(!u)
:-moz-column-gap= !u
:-webkit-column-gap= !u
:column-gap= !u
-moz-column-gap= !u
-webkit-column-gap= !u
column-gap= !u
=column-width(!u)
:-moz-column-width= !u
:-webkit-column-width= !u
:column-width= !u
-moz-column-width= !u
-webkit-column-width= !u
column-width= !u
=column-rule-width(!w)
:-moz-column-rule-width= !w
:-webkit-column-rule-width= !w
:column-rule-width= !w
-moz-column-rule-width= !w
-webkit-column-rule-width= !w
column-rule-width= !w
=column-rule-style(!s)
:-moz-column-rule-style= !s
:-webkit-column-rule-style= !s
:column-rule-style= !s
-moz-column-rule-style= !s
-webkit-column-rule-style= !s
column-rule-style= !s
=column-rule-color(!c)
:-moz-column-rule-color= !c
:-webkit-column-rule-color= !c
:column-rule-color= !c
-moz-column-rule-color= !c
-webkit-column-rule-color= !c
column-rule-color= !c
=column-rule(!w, !s = "solid", !c = " ")
+column-rule-width(!w)
+column-rule-style(!s)
+column-rule-color(!c)
+column-rule-color(!c)

View File

@ -1,7 +1,7 @@
=inline-block
:display -moz-inline-box
:-moz-box-orient vertical
:display inline-block
:vertical-align middle
:#display inline
:#vertical-align auto
display: -moz-inline-box
-moz-box-orient: vertical
display: inline-block
vertical-align: middle
#display: inline
#vertical-align: auto

View File

@ -3,11 +3,11 @@
@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) + ")"
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

View File

@ -6,7 +6,7 @@
Recommendations include using this in conjunction with a width:
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
=clearfix
:overflow hidden
overflow: hidden
+has-layout
//**
@ -15,10 +15,10 @@
http://www.positioniseverything.net/easyclearing.html
=pie-clearfix
&:after
:content " "
:display block
:height 0
:clear both
:overflow hidden
:visibility hidden
content: " "
display: block
height: 0
clear: both
overflow: hidden
visibility: hidden
+has-layout

View File

@ -13,5 +13,5 @@
// Available as alternate syntax with just +float
=float(!side = "left")
:display inline
:float= !side
display: inline
float= !side

View File

@ -1,6 +1,6 @@
=has-layout
// This makes ie6 get layout
:display inline-block
display: inline-block
// and this puts it back to block
&
:display block
display: block

View File

@ -62,47 +62,47 @@
//Mixins partials
=reset-box-model
:margin 0
:padding 0
:border 0
:outline 0
margin: 0
padding: 0
border: 0
outline: 0
=reset-font
:font
:weight inherit
:style inherit
:size 100%
:family inherit
:vertical-align baseline
font:
weight: inherit
style: inherit
size: 100%
family: inherit
vertical-align: baseline
=reset-focus
:outline 0
outline: 0
=reset-body
:line-height 1em
:color = #000
:background #fff
line-height: 1em
color: #000
background: #fff
=reset-list-style
:list-style none
list-style: none
=reset-table
:border-collapse separate
:border-spacing 0
:vertical-align middle
border-collapse: separate
border-spacing: 0
vertical-align: middle
=reset-table-cell
:text-align left
:font-weight normal
:vertical-align middle
text-align: left
font-weight: normal
vertical-align: middle
=reset-quotation
:quotes "" ""
quotes: "" ""
&:before, &:after
:content ""
content: ""
=reset-image-anchor-border
:border none
border: none
=reset-html5
section, article, aside, header, footer, nav, dialog, figure
@ -115,7 +115,7 @@
Usage Example:
// Turn off the display for both of these classes
.unregistered-only, .registered-only
:display none
display: none
// Now turn only one of them back on depending on some other context.
body.registered
+reset-display(".registered-only")
@ -131,4 +131,4 @@
@if !important
display: block !important
@else
display: block
display: block

View File

@ -1,19 +1,19 @@
// Emits styles for a tag cloud
=tag-cloud(!base_size = 1em)
:font-size= !base_size
:line-height= 1.2 * !base_size
font-size= !base_size
line-height= 1.2 * !base_size
.xxs, .xs, .s, .l, .xl, .xxl
:line-height= 1.2 * !base_size
line-height= 1.2 * !base_size
.xxs
:font-size= !base_size / 2.0
font-size= !base_size / 2.0
.xs
:font-size= 2.0 * !base_size / 3.0
font-size= 2.0 * !base_size / 3.0
.s
:font-size= 3.0 * !base_size / 4.0
font-size= 3.0 * !base_size / 4.0
.l
:font-size= 4.0 * !base_size / 3.0
font-size= 4.0 * !base_size / 3.0
.xl
:font-size= 3.0 * !base_size / 2.0
font-size= 3.0 * !base_size / 2.0
.xxl
:font-size= 2.0 * !base_size
font-size= 2.0 * !base_size

View File

@ -1,5 +1,5 @@
// a link that only has an underline when you hover over it
=hover-link
:text-decoration none
text-decoration: none
&:hover
:text-decoration underline
text-decoration: underline

View File

@ -7,18 +7,18 @@
// +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
=link-colors(!normal, !hover = false, !active = false, !visited = false, !focus = false)
:color= !normal
color= !normal
@if !visited
&:visited
:color= !visited
color= !visited
@if !focus
&:focus
:color= !focus
color= !focus
@if !hover
&:hover
:color= !hover
color= !hover
@if !active
&:active
:color= !active
color= !active

View File

@ -1,7 +1,7 @@
// A link that looks and acts like the text it is contained within
=unstyled-link
:color inherit
:text-decoration inherit
:cursor inherit
color: inherit
text-decoration: inherit
cursor: inherit
&:active, &:focus
:outline none
outline: none

View File

@ -1,7 +1,7 @@
// Turn off the bullet for an element of a list
=no-bullet
:list-style-type none
:margin-left 0px
list-style-type: none
margin-left: 0px
// turns off the bullets for an entire list
=no-bullets
@ -13,9 +13,9 @@
// ul.pretty
// +pretty-bullets("my-icon.png", 5px, 7px)
=pretty-bullets(!bullet_icon, !width, !height, !line_height = 18px, !padding = 14px)
:margin-left 0
margin-left: 0
li
:padding-left= !padding
:background= image_url(!bullet_icon) "no-repeat" ((!padding - !width) / 2) ((!line_height - !height) / 2)
:list-style-type none
padding-left= !padding
background= image_url(!bullet_icon) "no-repeat" ((!padding - !width) / 2) ((!line_height - !height) / 2)
list-style-type: none

View File

@ -32,15 +32,15 @@
Used to implement +horizontal-list.
=horizontal-list-item(!padding = 4px)
+no-bullet
:white-space nowrap
white-space: nowrap
+float-left
:padding
:left= !padding
:right= !padding
padding:
left= !padding
right= !padding
&.first
:padding-left 0px
padding-left: 0px
&.last
:padding-right 0px
padding-right: 0px
//**
A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.

View File

@ -1,14 +1,14 @@
// makes a list inline.
=inline-list
:list-style-type none
:margin 0px
:padding 0px
:display inline
list-style-type: none
margin: 0px
padding: 0px
display: inline
li
:margin 0px
:padding 0px
:display inline
margin: 0px
padding: 0px
display: inline
// makes an inlin list that is comma delimited.
// use of this recipe is not recommended at this time due to browser support issues.
@ -23,7 +23,7 @@
+inline-list
li
&:after
:content ", "
content: ", "
&:last-child, &.last
&:after
:content ""
content: ""

View File

@ -32,10 +32,10 @@
// 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
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)
@ -49,4 +49,4 @@
=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
background-position= !x !y

View File

@ -1,20 +1,20 @@
=alternating-rows-and-columns(!even_row_color, !odd_row_color, !dark_intersection, !header_color = #FFF, !footer_color = #FFF)
th
:background-color= !header_color
background-color= !header_color
&.even
:background-color= !header_color - !dark_intersection
background-color= !header_color - !dark_intersection
tr.odd
td
:background-color= !odd_row_color
background-color= !odd_row_color
&.even
:background-color= !odd_row_color - !dark_intersection
background-color= !odd_row_color - !dark_intersection
tr.even
td
:background-color= !even_row_color
background-color= !even_row_color
&.even
:background-color= !even_row_color - !dark_intersection
background-color= !even_row_color - !dark_intersection
tfoot
th, td
:background-color= !footer_color
background-color= !footer_color
&.even
:background-color= !footer_color - !dark_intersection
background-color= !footer_color - !dark_intersection

View File

@ -1,27 +1,27 @@
=outer-table-borders(!width = 2px, !color = black)
:border= !width "solid" !color
border= !width "solid" !color
thead
th
:border-bottom= !width "solid" !color
border-bottom= !width "solid" !color
tfoot
th, td
:border-top= !width "solid" !color
border-top= !width "solid" !color
th
&:first-child
:border-right= !width "solid" !color
border-right= !width "solid" !color
=inner-table-borders(!width = 2px, !color = black)
th, td
:border
:right= !width "solid" !color
:bottom= !width "solid" !color
:left-width 0px
:top-width 0px
border:
right= !width "solid" !color
bottom= !width "solid" !color
left-width: 0px
top-width: 0px
&:last-child,
&.last
:border-right-width 0px
border-right-width: 0px
tbody, tfoot
tr:last-child,
tr.last
th, td
:border-bottom-width 0px
border-bottom-width: 0px

View File

@ -1,9 +1,9 @@
=table-scaffolding
th
:text-align center
:font-weight bold
text-align: center
font-weight: bold
td,
th
:padding 2px
padding: 2px
&.numeric
:text-align right
text-align: right

View File

@ -1,3 +1,3 @@
// When remembering whether or not there's a hyphen in white-space is too hard
=nowrap
:white-space nowrap
white-space: nowrap

View File

@ -9,9 +9,9 @@
@param y
the y position of the background image.
=replace-text( !img, !x = 50%, !y = 50% )
:text-indent -9999em
:overflow hidden
:background
:image= image_url(!img)
:repeat no-repeat
:position= !x !y
text-indent: -9999em
overflow: hidden
background:
image= image_url(!img)
repeat: no-repeat
position= !x !y

View File

@ -21,7 +21,7 @@ table, caption, tbody, tfoot, thead, tr, th, td {
body {
line-height: 1em;
color: black;
color: #000;
background: #fff; }
ol, ul {
@ -57,4 +57,4 @@ body.registered address.registered-only, body.registered blockquote.registered-o
body.unregistered a.unregistered-only, body.unregistered abbr.unregistered-only, body.unregistered acronym.unregistered-only, body.unregistered b.unregistered-only, body.unregistered basefont.unregistered-only, body.unregistered bdo.unregistered-only, body.unregistered big.unregistered-only, body.unregistered br.unregistered-only, body.unregistered cite.unregistered-only, body.unregistered code.unregistered-only, body.unregistered dfn.unregistered-only, body.unregistered em.unregistered-only, body.unregistered font.unregistered-only, body.unregistered i.unregistered-only, body.unregistered img.unregistered-only, body.unregistered input.unregistered-only, body.unregistered kbd.unregistered-only, body.unregistered label.unregistered-only, body.unregistered q.unregistered-only, body.unregistered s.unregistered-only, body.unregistered samp.unregistered-only, body.unregistered select.unregistered-only, body.unregistered small.unregistered-only, body.unregistered span.unregistered-only, body.unregistered strike.unregistered-only, body.unregistered strong.unregistered-only, body.unregistered sub.unregistered-only, body.unregistered sup.unregistered-only, body.unregistered textarea.unregistered-only, body.unregistered tt.unregistered-only, body.unregistered u.unregistered-only, body.unregistered var.unregistered-only {
display: inline; }
body.unregistered address.unregistered-only, body.unregistered blockquote.unregistered-only, body.unregistered center.unregistered-only, body.unregistered dir.unregistered-only, body.unregistered div.unregistered-only, body.unregistered dd.unregistered-only, body.unregistered dl.unregistered-only, body.unregistered dt.unregistered-only, body.unregistered fieldset.unregistered-only, body.unregistered form.unregistered-only, body.unregistered frameset.unregistered-only, body.unregistered h1.unregistered-only, body.unregistered h2.unregistered-only, body.unregistered h3.unregistered-only, body.unregistered h4.unregistered-only, body.unregistered h5.unregistered-only, body.unregistered h6.unregistered-only, body.unregistered hr.unregistered-only, body.unregistered isindex.unregistered-only, body.unregistered menu.unregistered-only, body.unregistered noframes.unregistered-only, body.unregistered noscript.unregistered-only, body.unregistered ol.unregistered-only, body.unregistered p.unregistered-only, body.unregistered pre.unregistered-only, body.unregistered ul.unregistered-only {
display: block; }
display: block; }