Gradients in content too
This commit is contained in:
parent
6c166bee0d
commit
a0f5b5a6ae
@ -40,5 +40,13 @@
|
|||||||
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
|
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
|
||||||
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
|
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
|
||||||
@if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }
|
@if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }
|
||||||
list-style-image: $value ;
|
list-style-image: $value ;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin content($value) {
|
||||||
|
$value: -compass-list($value);
|
||||||
|
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
|
||||||
|
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); }
|
||||||
|
@if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); }
|
||||||
|
content: $value ;
|
||||||
}
|
}
|
||||||
|
@ -43,6 +43,15 @@
|
|||||||
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 0%, #ff0000 10px); }
|
list-style-image: outside radial-gradient(#00ff00 0%, #ff0000 10px); }
|
||||||
|
|
||||||
|
.content-plain {
|
||||||
|
content: "asdf"; }
|
||||||
|
|
||||||
|
.content-with-gradient {
|
||||||
|
content: -moz-radial-gradient(#00ff00, #ff0000 10px);
|
||||||
|
content: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000));
|
||||||
|
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
|
||||||
|
content: 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);
|
||||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
@ -29,6 +29,12 @@ $experimental-support-for-svg: true
|
|||||||
// Note: I haven't seen a browser render this correctly, but they should eventually.
|
// Note: I haven't seen a browser render this correctly, but they should eventually.
|
||||||
+list-style(outside radial-gradient(lime, red 10px))
|
+list-style(outside radial-gradient(lime, red 10px))
|
||||||
|
|
||||||
|
.content-plain
|
||||||
|
+content("asdf")
|
||||||
|
|
||||||
|
.content-with-gradient
|
||||||
|
+content(radial-gradient(lime, red 10px))
|
||||||
|
|
||||||
$experimental-support-for-svg: false
|
$experimental-support-for-svg: false
|
||||||
|
|
||||||
.bg-linear-gradient-no-position
|
.bg-linear-gradient-no-position
|
||||||
|
Loading…
Reference in New Issue
Block a user