github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgrade some examples that were generating deprecation warnings.

Browse Source
This commit is contained in:
Chris Eppstein 2011-01-03 10:30:01 -08:00
parent 136954561f
commit 7b5aabd21a
6 changed files with 47 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/blueprint_plugins/src/link_icons.scss
View File

@ -10,4 +10,4 @@ body {
// Not all links have a url structure that can be detected, // Not all links have a url structure that can be detected,
// So you can set them explicitly yourself like so: // So you can set them explicitly yourself like so:
a#this-is-a-pdf-link { a#this-is-a-pdf-link {
@include link-icon(unquote("pdf.png")); } } @include link-icon("pdf.png"); } }

2
examples/blueprint_semantic/src/screen.scss
View File

@ -9,7 +9,7 @@ body.blueprint {
.container { .container {
@include container; } @include container; }
.showgrid { .showgrid {
background: inline_image(unquote("grid.png")); } background: inline_image("grid.png"); }
hr { hr {
@include colruler; } @include colruler; }
hr.space { hr.space {

2
examples/compass/src/sticky_footer.scss
View File

@ -1,7 +1,7 @@
@import "compass/reset"; @import "compass/reset";
@import "compass/layout"; @import "compass/layout";
@include sticky-footer(72px, unquote("#layout"), unquote("#layout_footer"), unquote("#footer")); @include sticky-footer(72px, "#layout", "#layout_footer", "#footer");
#header { #header {
background: #999999; background: #999999;

2
examples/compass/src/utilities.scss
View File

@ -57,7 +57,7 @@ h2 {
ul.comma-delimited { ul.comma-delimited {
@include comma-delimited-list; } @include comma-delimited-list; }
ol.pretty { ol.pretty {
@include pretty-bullets(unquote("blue_arrow.gif"), 5px, 7px, 18px); } } @include pretty-bullets("blue_arrow.gif", 5px, 7px, 18px); } }
#tables { #tables {
@include column(16); @include column(16);

60
examples/css3/src/gradients.scss
View File

@ -11,76 +11,76 @@ thead th {
@include text-shadow(white); } @include text-shadow(white); }
th.linear { th.linear {
@include linear-gradient(color-stops(white, red 50%, yellow 75%, lime)); } @include background-image(linear-gradient(white, red 50%, yellow 75%, lime)); }
th.radial { th.radial {
@include radial-gradient(color-stops(white, red 20px, yellow 30px, lime 40px)); } @include background-image(radial-gradient(white, red 20px, yellow 30px, lime 40px)); }
tr.default { tr.default {
td.linear { td.linear {
@include linear-gradient(color-stops(#cc0000, #0000cc)); } @include background-image(linear-gradient(#cc0000, #0000cc)); }
td.radial { td.radial {
@include radial-gradient(color-stops(#cc0000, #0000cc)); } @include background-image(radial-gradient(#cc0000, #0000cc)); }
td.linear-code:before { td.linear-code:before {
content: "+linear-gradient(color-stops(#c00, #00c))"; } content: "+background-image(linear-gradient(#c00, #00c))"; }
td.radial-code:before { td.radial-code:before {
content: "+radial-gradient(color-stops(#c00, #00c))"; } } content: "+background-image(radial-gradient(#c00, #00c))"; } }
tr.top-left { tr.top-left {
td.linear { td.linear {
@include linear-gradient(color-stops(#cc0000, #0000cc), unquote("top left")); } @include background-image(linear-gradient(top left, #cc0000, #0000cc)); }
td.radial { td.radial {
@include radial-gradient(color-stops(#cc0000, #0000cc), unquote("top left")); } @include background-image(radial-gradient(top left, #cc0000, #0000cc)); }
td.linear-code:before { td.linear-code:before {
content: '+linear-gradient(color-stops(#c00, #00c), "top left")'; } content: '+background-image(linear-gradient(top left, #c00, #00c))'; }
td.radial-code:before { td.radial-code:before {
content: '+radial-gradient(color-stops(#c00, #00c), "top left")'; } } content: '+background-image(radial-gradient(top left, #c00, #00c))'; } }
tr.bottom-right { tr.bottom-right {
td.linear { td.linear {
@include linear-gradient(color-stops(#cc0000, #0000cc), unquote("bottom right")); } @include background-image(linear-gradient(bottom right, #cc0000, #0000cc)); }
td.radial { td.radial {
@include radial-gradient(color-stops(#cc0000, #0000cc), unquote("bottom right")); } @include background-image(radial-gradient(bottom right, #cc0000, #0000cc)); }
td.linear-code:before { td.linear-code:before {
content: '+linear-gradient(color-stops(#c00, #00c), "bottom right")'; } content: '+background-image(linear-gradient(bottom right, #c00, #00c))'; }
td.radial-code:before { td.radial-code:before {
content: '+radial-gradient(color-stops(#c00, #00c), "bottom right")'; } } content: '+background-image(radial-gradient(bottom right, #c00, #00c))'; } }
tr.three-color { tr.three-color {
td.linear { td.linear {
@include linear-gradient(color-stops(#cc0000, white, #0000cc)); } @include background-image(linear-gradient(#cc0000, white, #0000cc)); }
td.radial { td.radial {
@include radial-gradient(color-stops(#cc0000, white, #0000cc 50px)); } @include background-image(radial-gradient(#cc0000, white, #0000cc 50px)); }
td.linear-code:before { td.linear-code:before {
content: "+linear-gradient(color-stops(#c00, #fff, #00c))"; } content: "+background-image(linear-gradient(#c00, #fff, #00c))"; }
td.radial-code:before { td.radial-code:before {
content: "+radial-gradient(color-stops(#c00, #fff, #00c 50px))"; } } content: "+background-image(radial-gradient(#c00, #fff, #00c 50px))"; } }
tr.four-color { tr.four-color {
td.linear { td.linear {
@include linear-gradient(color-stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc)); } @include background-image(linear-gradient(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc)); }
td.radial { td.radial {
@include radial-gradient(color-stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc 50px)); } @include background-image(radial-gradient(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc 50px)); }
td.linear-code:before { td.linear-code:before {
content: "+linear-gradient(color-stops(#c00, #0c0 25%, #0cc 75%, #00c))"; } content: "+background-image(linear-gradient(#c00, #0c0 25%, #0cc 75%, #00c))"; }
td.radial-code:before { td.radial-code:before {
content: "+radial-gradient(color-stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"; } } content: "+background-image(radial-gradient(#c00, #0c0 25%, #0cc 75%, #00c 50px))"; } }
tr.filled-in { tr.filled-in {
td.linear { td.linear {
@include linear-gradient(color-stops(#cc0000 33%, #0000cc 66%)); } @include background-image(linear-gradient(#cc0000 33%, #0000cc 66%)); }
td.radial { td.radial {
@include radial-gradient(color-stops(#cc0000 25px, #0000cc 75px)); } @include background-image(radial-gradient(#cc0000 25px, #0000cc 75px)); }
td.linear-code:before { td.linear-code:before {
content: "+linear-gradient(color-stops(#c00 33%, #00c 66%))"; } content: "+background-image(linear-gradient(#c00 33%, #00c 66%))"; }
td.radial-code:before { td.radial-code:before {
content: "+radial-gradient(color-stops(#c00 25px, #00c 75px))"; } } content: "+background-image(radial-gradient(#c00 25px, #00c 75px))"; } }
tr.with-bg { tr.with-bg {
td.linear { td.linear {
@include linear-gradient(color-stops(#cc0000 33%, #0000cc 66%), top, image-url("button_bg.png")); } @include background-image(image-url("button_bg.png"), linear-gradient(top, #c00 33%, #00c 66%)); }
td.radial { td.radial {
@include radial-gradient(color-stops(#cc0000 25px, #0000cc 75px), center center, image-url("button_bg.png")); } @include background-image(image-url("button_bg.png"), radial-gradient(center center, #c00 25px, #00c 75px)); }
td.linear-code:before { td.linear-code:before {
content: "+linear-gradient(color-stops(#cc0000 33%, #0000cc 66%), top, image-url(\"button_bg.png\"))"; } content: "+background-image(image-url(\"button_bg.png\"), linear-gradient(top, #c00 33%, #00c 66%))"; }
td.radial-code:before { td.radial-code:before {
content: "+radial-gradient(color-stops(#cc0000 25px, #0000cc 75px), center center, image-url(\"button_bg.png\"))"; } } content: "+background-image(image-url(\"button_bg.png\"), radial-gradient(center center, #c00 25px, #00c 75px))"; } }

32
examples/css3/src/main.scss
View File

@ -26,14 +26,14 @@ h1 {
min-width: $min_width; min-width: $min_width;
border: 4px solid #{$border_color}; border: 4px solid #{$border_color};
@include border-radius(0.667em); @include border-radius(0.667em);
@include box-shadow(darken($border_color, 40), 5px, 5px, 2px); @include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px);
margin-bottom: 1em; margin-bottom: 1em;
h2 { h2 {
margin: 0.5em 0 1em; margin: 0.5em 0 1em;
text-align: center; } } text-align: center; } }
.inset { .inset {
@include box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset); @include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset);
} }
.gutter { .gutter {
@ -44,7 +44,7 @@ h1 {
content: " "; } content: " "; }
.example { .example {
@include linear-gradient(color_stops(white, #cccccc)); @include background-image(linear-gradient(white, #cccccc));
pre { pre {
padding: 1em; padding: 1em;
margin: 1em; margin: 1em;
@ -76,39 +76,33 @@ h1 {
#gradients { #gradients {
.horizontal { .horizontal {
@include linear-gradient(color_stops(#d92626, #2626d9), left); } @include background-image(left, linear-gradient(#d92626, #2626d9)); }
.vertical { .vertical {
@include linear-gradient(color_stops(#d92626, #2626d9)); } @include background-image(linear-gradient(#d92626, #2626d9)); }
.diagonal { .diagonal {
@include linear-gradient(color_stops(#d92626, #2626d9), unquote("right top")); } @include background-image(linear-gradient(right top, #d92626, #2626d9)); }
.radial { .radial {
/* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */ /* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
@include radial-gradient(color_stops(#d92626 10px, #2626d9 150px)); @include background-image(radial-gradient(#d92626 10px, #2626d9 150px));
// +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9) // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
// background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px) // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
// background-color: #2626d9 // background-color: #2626d9
} }
.radial-1 { .radial-1 {
// A default radial gradient: // A default radial gradient:
/* +radial-gradient(color_stops(#ddd, #aaa)) */ @include background-image(radial-gradient(#dddddd, #aaaaaa)); }
@include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
.radial-2 { .radial-2 {
// A centered gradient // A centered gradient
/* +radial-gradient(color_stops(#ddd, #aaa)) */ @include background-image(radial-gradient(#dddddd, #aaaaaa)); }
@include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
.radial-3 { .radial-3 {
// A centered radial gradient at the top // A centered radial gradient at the top
/* +radial-gradient(color_stops(#ddd, #aaa), "top center") */ @include background-image(radial-gradient(top center, #dddddd, #aaaaaa)); }
@include radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")); }
.radial-4 { .radial-4 {
// A centered radial gradient with fixed color stops // A centered radial gradient with fixed color stops
/* +radial-gradient(color_stops(#ddd 20px, #aaa 50px)) */ @include background-image(radial-gradient(#dddddd 20px, #aaaaaa 50px)); }
@include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px)); }
.radial-5 { .radial-5 {
// A centered gradient with several color stops // A centered gradient with several color stops
/* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00)) */ @include background-image(radial-gradient(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
@include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
.radial-6 { .radial-6 {
// A centered gradient with color stops // A centered gradient with color stops
/* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c)) */ @include background-image(radial-gradient(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }
@include radial-gradient(color_stops(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }