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

Only emit extra property values for list images when required.

Browse Source
This commit is contained in:
Chris Eppstein 2010-11-14 17:49:19 -08:00
parent cb0c3775cf
commit 6c166bee0d
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frameworks/compass/stylesheets/compass/css3/_images.scss
View File

@ -29,15 +29,16 @@
} }
@mixin list-style-image($image) { @mixin list-style-image($image) {
@if $experimental-support-for-mozilla { list-style-image: -moz($image); } @if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
@if $experimental-support-for-webkit { list-style-image: -webkit($image); } @if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
@if $experimental-support-for-svg { list-style-image: -svg($image); } @if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); }
list-style-image: $image ; list-style-image: $image ;
} }
@mixin list-style($value) { @mixin list-style($value) {
@if $experimental-support-for-mozilla { list-style-image: -moz(-compass-list($value)); } $value: -compass-list($value);
@if $experimental-support-for-webkit { list-style-image: -webkit(-compass-list($value)); } @if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
@if $experimental-support-for-svg { list-style-image: -svg(-compass-list($value)); } @if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
list-style-image: $value ; @if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }
list-style-image: $value ;
} }

8
test/fixtures/stylesheets/compass/css/gradients.css vendored
View File

@ -25,6 +25,12 @@
border-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDBmZjAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmYwMDAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 100 stretch; border-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDBmZjAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmYwMDAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 100 stretch;
border-image: radial-gradient(#00ff00, #ff0000 100px) 100 stretch; } border-image: radial-gradient(#00ff00, #ff0000 100px) 100 stretch; }
.direct-list-image-plain {
list-style-image: url('/images/4x6.png?busted=true'); }
.shorthand-list-image-plain {
list-style-image: outside url("/images/4x6.png?busted=true"); }
.direct-list-image-with-gradient { .direct-list-image-with-gradient {
list-style-image: -moz-radial-gradient(#00ff00, #ff0000 10px); list-style-image: -moz-radial-gradient(#00ff00, #ff0000 10px);
list-style-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000)); list-style-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000));
@ -35,7 +41,7 @@
list-style-image: outside -moz-radial-gradient(#00ff00, #ff0000 10px); list-style-image: outside -moz-radial-gradient(#00ff00, #ff0000 10px);
list-style-image: outside -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000)); list-style-image: outside -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000));
list-style-image: outside url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); list-style-image: outside url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
list-style-image: outside radial-gradient(#00ff00, #ff0000 10px); } list-style-image: outside radial-gradient(#00ff00 0%, #ff0000 10px); }
.bg-linear-gradient-no-position { .bg-linear-gradient-no-position {
background-image: -moz-linear-gradient(#dddddd, #aaaaaa); background-image: -moz-linear-gradient(#dddddd, #aaaaaa);

6
test/fixtures/stylesheets/compass/sass/gradients.sass vendored
View File

@ -16,6 +16,12 @@ $experimental-support-for-svg: true
.border-image-gradient .border-image-gradient
+border-image(radial-gradient(#0f0,#f00 100px) 100 stretch) +border-image(radial-gradient(#0f0,#f00 100px) 100 stretch)
.direct-list-image-plain
+list-style-image(image-url("4x6.png"))
.shorthand-list-image-plain
+list-style(outside image-url("4x6.png"))
.direct-list-image-with-gradient .direct-list-image-with-gradient
+list-style-image(radial-gradient(lime, red 10px)) +list-style-image(radial-gradient(lime, red 10px))