Gradient support for list-style-image.
This commit is contained in:
parent
e0561d33f9
commit
133bf0a078
@ -32,3 +32,17 @@
|
|||||||
@if $experimental-support-for-svg { border-image: -svg($image) $rest; }
|
@if $experimental-support-for-svg { border-image: -svg($image) $rest; }
|
||||||
border-image: $image $rest;
|
border-image: $image $rest;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin list-style-image($image) {
|
||||||
|
@if $experimental-support-for-mozilla { list-style-image: -moz($image); }
|
||||||
|
@if $experimental-support-for-webkit { list-style-image: -webkit($image); }
|
||||||
|
@if $experimental-support-for-svg { list-style-image: -svg($image); }
|
||||||
|
list-style-image: $image ;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin list-style($value) {
|
||||||
|
@if $experimental-support-for-mozilla { list-style-image: -moz(-compass-list($value)); }
|
||||||
|
@if $experimental-support-for-webkit { list-style-image: -webkit(-compass-list($value)); }
|
||||||
|
@if $experimental-support-for-svg { list-style-image: -svg(-compass-list($value)); }
|
||||||
|
list-style-image: $value ;
|
||||||
|
}
|
||||||
|
@ -314,9 +314,14 @@ module Compass::SassExtensions::Functions::GradientSupport
|
|||||||
%w(webkit moz o ms svg).each do |prefix|
|
%w(webkit moz o ms svg).each do |prefix|
|
||||||
class_eval <<-RUBY, __FILE__, __LINE__ + 1
|
class_eval <<-RUBY, __FILE__, __LINE__ + 1
|
||||||
def _#{prefix}(*args)
|
def _#{prefix}(*args)
|
||||||
args.map!{|a| a.is_a?(List) ? a.values : a}.flatten!
|
List.new(*args.map! do |a|
|
||||||
List.new(*args.map!{|a| a.respond_to?(:to_#{prefix}) ? a.to_#{prefix} : a})
|
if a.is_a?(List)
|
||||||
end
|
a.class.new(*a.values.map{|v| v.respond_to?(:to_#{prefix}) ? v.to_#{prefix} : v})
|
||||||
|
else
|
||||||
|
a.respond_to?(:to_#{prefix}) ? a.to_#{prefix} : a
|
||||||
|
end
|
||||||
|
end)
|
||||||
|
end
|
||||||
RUBY
|
RUBY
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -25,6 +25,18 @@
|
|||||||
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 0%, #ff0000 100px) 100 stretch; }
|
border-image: radial-gradient(#00ff00 0%, #ff0000 100px) 100 stretch; }
|
||||||
|
|
||||||
|
.direct-list-image-with-gradient {
|
||||||
|
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: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
|
||||||
|
list-style-image: radial-gradient(#00ff00 0%, #ff0000 10px); }
|
||||||
|
|
||||||
|
.shorthand-list-image-with-gradient {
|
||||||
|
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 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
|
||||||
|
list-style-image: outside radial-gradient(#00ff00, #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));
|
||||||
|
@ -16,6 +16,13 @@ $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-with-gradient
|
||||||
|
+list-style-image(radial-gradient(lime, red 10px))
|
||||||
|
|
||||||
|
.shorthand-list-image-with-gradient
|
||||||
|
// Note: I haven't seen a browser render this correctly, but they should eventually.
|
||||||
|
+list-style(outside 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