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. Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
=unobtrusive-logo(!size = 1em) =unobtrusive-logo(!size = 1em)
:font-family Monaco, Courier, "Lucida Sans Unicode", monospace font-family: Monaco, Courier, "Lucida Sans Unicode", monospace
:font-size= !size font-size= !size
:color #888 color: #888
.selector .selector
:vertical-align middle vertical-align: middle
:font-size= 1.3em font-size= 1.3em
.brace .brace
:vertical-align middle vertical-align: middle
:font bold 1.7em Georgia, "Times New Roman", serif font: bold 1.7em Georgia, "Times New Roman", serif
:color #CCC color: #CCC
:margin= 0 -0.2em margin= 0 -0.2em
.rule .rule
:vertical-align middle vertical-align: middle
:margin= 0 -0.2em 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") =sticky-footer(!footer_height, !root_selector = "#root", !root_footer_selector = "#root_footer", !footer_selector = "#footer")
html, body html, body
:height 100% height: 100%
#{!root_selector} #{!root_selector}
:min-height 100% min-height: 100%
:height auto !important height: auto !important
:height 100% height: 100%
:margin-bottom= -!footer_height margin-bottom= -!footer_height
#{!root_footer_selector} #{!root_footer_selector}
:height= !footer_height height= !footer_height
#{!footer_selector} #{!footer_selector}
:clear both clear: both
:position relative position: relative
:height= !footer_height height= !footer_height

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,19 +1,19 @@
// Emits styles for a tag cloud // Emits styles for a tag cloud
=tag-cloud(!base_size = 1em) =tag-cloud(!base_size = 1em)
:font-size= !base_size font-size= !base_size
:line-height= 1.2 * !base_size line-height= 1.2 * !base_size
.xxs, .xs, .s, .l, .xl, .xxl .xxs, .xs, .s, .l, .xl, .xxl
:line-height= 1.2 * !base_size line-height= 1.2 * !base_size
.xxs .xxs
:font-size= !base_size / 2.0 font-size= !base_size / 2.0
.xs .xs
:font-size= 2.0 * !base_size / 3.0 font-size= 2.0 * !base_size / 3.0
.s .s
:font-size= 3.0 * !base_size / 4.0 font-size= 3.0 * !base_size / 4.0
.l .l
:font-size= 4.0 * !base_size / 3.0 font-size= 4.0 * !base_size / 3.0
.xl .xl
:font-size= 3.0 * !base_size / 2.0 font-size= 3.0 * !base_size / 2.0
.xxl .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 // a link that only has an underline when you hover over it
=hover-link =hover-link
:text-decoration none text-decoration: none
&:hover &:hover
:text-decoration underline text-decoration: underline

View File

@ -7,18 +7,18 @@
// +link-colors(#00c, #0cc, #c0c, #ccc, #cc0) // +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
=link-colors(!normal, !hover = false, !active = false, !visited = false, !focus = false) =link-colors(!normal, !hover = false, !active = false, !visited = false, !focus = false)
:color= !normal color= !normal
@if !visited @if !visited
&:visited &:visited
:color= !visited color= !visited
@if !focus @if !focus
&:focus &:focus
:color= !focus color= !focus
@if !hover @if !hover
&:hover &:hover
:color= !hover color= !hover
@if !active @if !active
&: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 // A link that looks and acts like the text it is contained within
=unstyled-link =unstyled-link
:color inherit color: inherit
:text-decoration inherit text-decoration: inherit
:cursor inherit cursor: inherit
&:active, &:focus &:active, &:focus
:outline none outline: none

View File

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

View File

@ -32,15 +32,15 @@
Used to implement +horizontal-list. Used to implement +horizontal-list.
=horizontal-list-item(!padding = 4px) =horizontal-list-item(!padding = 4px)
+no-bullet +no-bullet
:white-space nowrap white-space: nowrap
+float-left +float-left
:padding padding:
:left= !padding left= !padding
:right= !padding right= !padding
&.first &.first
:padding-left 0px padding-left: 0px
&.last &.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. 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. // makes a list inline.
=inline-list =inline-list
:list-style-type none list-style-type: none
:margin 0px margin: 0px
:padding 0px padding: 0px
:display inline display: inline
li li
:margin 0px margin: 0px
:padding 0px padding: 0px
:display inline display: inline
// makes an inlin list that is comma delimited. // makes an inlin list that is comma delimited.
// use of this recipe is not recommended at this time due to browser support issues. // use of this recipe is not recommended at this time due to browser support issues.
@ -23,7 +23,7 @@
+inline-list +inline-list
li li
&:after &:after
:content ", " content: ", "
&:last-child, &.last &:last-child, &.last
&:after &:after
:content "" content: ""

View File

@ -32,10 +32,10 @@
// Sets rules common for all sprites, assumes a rectangular region. // Sets rules common for all sprites, assumes a rectangular region.
=sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height) =sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height)
:background= image_url(!img) "no-repeat" background= image_url(!img) "no-repeat"
:width= !width width= !width
:height= !height height= !height
:overflow hidden overflow: hidden
// Allows horizontal sprite positioning optimized for a single row of sprites. // Allows horizontal sprite positioning optimized for a single row of sprites.
=sprite-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin) =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) =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) !x = ((!col - 1) * -!width) - ((!col - 1) * !margin)
!y = ((!row - 1) * -!height) - ((!row - 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) =alternating-rows-and-columns(!even_row_color, !odd_row_color, !dark_intersection, !header_color = #FFF, !footer_color = #FFF)
th th
:background-color= !header_color background-color= !header_color
&.even &.even
:background-color= !header_color - !dark_intersection background-color= !header_color - !dark_intersection
tr.odd tr.odd
td td
:background-color= !odd_row_color background-color= !odd_row_color
&.even &.even
:background-color= !odd_row_color - !dark_intersection background-color= !odd_row_color - !dark_intersection
tr.even tr.even
td td
:background-color= !even_row_color background-color= !even_row_color
&.even &.even
:background-color= !even_row_color - !dark_intersection background-color= !even_row_color - !dark_intersection
tfoot tfoot
th, td th, td
:background-color= !footer_color background-color= !footer_color
&.even &.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) =outer-table-borders(!width = 2px, !color = black)
:border= !width "solid" !color border= !width "solid" !color
thead thead
th th
:border-bottom= !width "solid" !color border-bottom= !width "solid" !color
tfoot tfoot
th, td th, td
:border-top= !width "solid" !color border-top= !width "solid" !color
th th
&:first-child &:first-child
:border-right= !width "solid" !color border-right= !width "solid" !color
=inner-table-borders(!width = 2px, !color = black) =inner-table-borders(!width = 2px, !color = black)
th, td th, td
:border border:
:right= !width "solid" !color right= !width "solid" !color
:bottom= !width "solid" !color bottom= !width "solid" !color
:left-width 0px left-width: 0px
:top-width 0px top-width: 0px
&:last-child, &:last-child,
&.last &.last
:border-right-width 0px border-right-width: 0px
tbody, tfoot tbody, tfoot
tr:last-child, tr:last-child,
tr.last tr.last
th, td th, td
:border-bottom-width 0px border-bottom-width: 0px

View File

@ -1,9 +1,9 @@
=table-scaffolding =table-scaffolding
th th
:text-align center text-align: center
:font-weight bold font-weight: bold
td, td,
th th
:padding 2px padding: 2px
&.numeric &.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 // When remembering whether or not there's a hyphen in white-space is too hard
=nowrap =nowrap
:white-space nowrap white-space: nowrap

View File

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

View File

@ -21,7 +21,7 @@ table, caption, tbody, tfoot, thead, tr, th, td {
body { body {
line-height: 1em; line-height: 1em;
color: black; color: #000;
background: #fff; } background: #fff; }
ol, ul { ol, ul {