Convert the compass core framework to css-style property syntax.
This commit is contained in:
parent
6e7f658f3b
commit
e744c1e0db
@ -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
|
||||
|
||||
|
||||
|
||||
|
@ -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
|
||||
|
@ -1,3 +1,3 @@
|
||||
@import links/hover_link.sass
|
||||
@import links/link_colors.sass
|
||||
@import links/unstyled_link.sass
|
||||
@import links/unstyled_link.sass
|
||||
|
@ -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
|
||||
|
@ -1 +1 @@
|
||||
@import sprites/sprite_img.sass
|
||||
@import sprites/sprite_img.sass
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -13,5 +13,5 @@
|
||||
|
||||
// Available as alternate syntax with just +float
|
||||
=float(!side = "left")
|
||||
:display inline
|
||||
:float= !side
|
||||
display: inline
|
||||
float= !side
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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.
|
||||
|
@ -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: ""
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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; }
|
||||
|
Loading…
Reference in New Issue
Block a user