Permalink
Browse files

Merge pull request #207 from slang800/gradients

Gradients
  • Loading branch information...
2 parents ac9913f + 626921d commit 760f9f822c7253f69695af09e8dad5b13c515736 @slang800 slang800 committed Jul 30, 2013
View
@@ -16,19 +16,6 @@ replace(expr, str, val)
expr
/*
- * Normalize gradient points.
- */
-
-grad-point(pos)
- if length(pos) == 1
- return left pos if pos in (top bottom)
- return pos top if pos in (left right)
- else if pos[0] in (top bottom)
- pos[1] pos[0]
- else
- pos
-
-/*
* Implicit color stop position.
*/
@@ -77,13 +64,6 @@ join-stops(stops, translate)
unquote(str)
/*
- * Legacy Webkit color stop.
- */
-
-webkit-stop(color, pos)
- 'color-stop(%d, %s)' % (pos / 100 color)
-
-/*
* Standard color stop.
*/
@@ -105,35 +85,18 @@ std-stop(color, pos)
linear-gradient(start, stops...)
error('color stops required') unless length(stops)
- prop = current-property[0]
- val = current-property[1]
-
- if start is a 'color'
- unshift(stops, start)
- start = top
+ // if current-property
+ // if start is a 'color'
+ // unshift(stops, start)
+ // start = top
+ // if start[0] is a 'unit'
+ // if has-canvas
+ // img = linear-gradient-image(start, stops)
+ // add-property(prop, replace(val, '__CALL__', img))
+ // start = start[1]
stops = normalize-stops(stops)
-
- // gradient image
- if start[0] is a 'unit'
- if has-canvas
- img = linear-gradient-image(start, stops)
- add-property(prop, replace(val, '__CALL__', img))
- start = start[1]
-
- // legacy webkit
- end = grad-point(opposite-position(start))
- webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(start) end join-stops(stops, webkit-stop))
- add-property(prop, replace(val, '__CALL__', webkit-legacy))
-
- // vendor prefixed
stops = join-stops(stops, std-stop)
- for prefix in vendor-prefixes
- unless prefix == official
- gradient = '-%s-linear-gradient(%s, %s)' % (prefix start stops)
- add-property(prop, replace(val, '__CALL__', gradient))
-
- // standard
'linear-gradient(%s, %s)' % (start stops)
/*
View
@@ -45,24 +45,27 @@ literal-join(string, literals)
return result
/*
- * Replacing one value with another
+ * Prepend matched argument with given prefix
+ * set strict to false to check as “begin with”
*/
-replace-args(args,argument,val)
+prepend-args(args, prefix, argument, strict = true)
result = ()
// Checking if there are values divided by comma
if is-comma-list(args)
for subargs in args
subresult = ()
for arg in subargs
- arg = unquote(val) if arg == argument
+ if (arg == argument and strict) or (match('^'+s('%s',argument),''+arg) and !strict)
+ arg = s('%s%s',unquote(prefix),arg)
push(subresult, arg)
subresult = literal-join(' ', subresult) if length(subresult) > 1
push(result, subresult)
result = literal-join(', ', result)
else
for arg in args
- arg = unquote(val) if arg == argument
+ if (arg == argument and strict) or (match('^'+s('%s',argument),''+arg) and !strict)
+ arg = s('%s%s',unquote(prefix),arg)
push(result, arg)
return result
@@ -72,7 +75,7 @@ replace-args(args,argument,val)
* or those which should be ignored.
*/
-vendor(prop, args, only = null, ignore = null)
+vendor(prop, args, only = null, ignore = null, vendor-property = true)
for prefix in vendor-prefixes
unless (only and !(prefix in only)) or (ignore and prefix in ignore)
if official == prefix
@@ -81,8 +84,14 @@ vendor(prop, args, only = null, ignore = null)
newargs = args
// Adjusting the args if needed
if prop in ('transition' 'transition-property')
- newargs = replace-args(args, transform, '-' + prefix + '-transform')
- {'-' + prefix + '-' + prop}: newargs
+ newargs = prepend-args(args, '-' + prefix + '-', transform)
+ if prop in ('border-image' 'background' 'background-image' 'cursor' 'list-style' 'list-style-image')
+ newargs = prepend-args(args, '-' + prefix + '-', linear-gradient, false)
+ newprop = prop
+ newprop = '-' + prefix + '-' + prop if vendor-property
+ // TODO: make the adjustments for differences
+ // between the official syntax and vendor ones
+ {newprop}: newargs
/*
* Vendorize the given value.
@@ -578,4 +587,38 @@ placeholder()
pair()
else if pair is not null && pair[0] is not null
{pair[0]}: type(pair[1]) == 'string' ? s(pair[1]) : pair[1]
-input-placeholder = placeholder
+input-placeholder = placeholder
+
+/*
+ * Vendor background support (gradients).
+ */
+
+background()
+ if match('-gradient\(', ''+arguments)
+ vendor('background', arguments, vendor-property: false)
+ else
+ background arguments
+
+background-image()
+ if match('-gradient\(', ''+arguments)
+ vendor('background-image', arguments, vendor-property: false)
+ else
+ background-image arguments
+
+cursor()
+ if match('-gradient\(', ''+arguments)
+ vendor('cursor', arguments, vendor-property: false)
+ else
+ cursor arguments
+
+list-style()
+ if match('-gradient\(', ''+arguments)
+ vendor('list-style', arguments, vendor-property: false)
+ else
+ list-style arguments
+
+list-style-image()
+ if match('-gradient\(', ''+arguments)
+ vendor('list-style-image', arguments, vendor-property: false)
+ else
+ list-style-image arguments
@@ -1,56 +1,76 @@
body {
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
- background: -webkit-linear-gradient(top, #fff 0, #000 100%);
- background: -moz-linear-gradient(top, #fff 0, #000 100%);
- background: -o-linear-gradient(top, #fff 0, #000 100%);
- background: -ms-linear-gradient(top, #fff 0, #000 100%);
- background: linear-gradient(top, #fff 0, #000 100%);
+ background: -webkit-linear-gradient(#fff, #000 100%);
+ background: -moz-linear-gradient(#fff, #000 100%);
+ background: -o-linear-gradient(#fff, #000 100%);
+ background: -ms-linear-gradient(#fff, #000 100%);
+ background: linear-gradient(#fff, #000 100%);
}
body {
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
background: -webkit-linear-gradient(top, #fff 0, #000 100%);
background: -moz-linear-gradient(top, #fff 0, #000 100%);
background: -o-linear-gradient(top, #fff 0, #000 100%);
background: -ms-linear-gradient(top, #fff 0, #000 100%);
background: linear-gradient(top, #fff 0, #000 100%);
}
body {
- background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #fff), color-stop(0.25, #f00), color-stop(0.5, #00f), color-stop(1, #000));
background: -webkit-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
background: -moz-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
background: -o-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
background: -ms-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
background: linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
}
body {
- background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.8, #000));
background: -webkit-linear-gradient(bottom right, #fff 0, #000 80%);
background: -moz-linear-gradient(bottom right, #fff 0, #000 80%);
background: -o-linear-gradient(bottom right, #fff 0, #000 80%);
background: -ms-linear-gradient(bottom right, #fff 0, #000 80%);
background: linear-gradient(bottom right, #fff 0, #000 80%);
}
body {
- background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.8, #000));
background: -webkit-linear-gradient(right bottom, #fff 0, #000 80%);
background: -moz-linear-gradient(right bottom, #fff 0, #000 80%);
background: -o-linear-gradient(right bottom, #fff 0, #000 80%);
background: -ms-linear-gradient(right bottom, #fff 0, #000 80%);
background: linear-gradient(right bottom, #fff 0, #000 80%);
}
body {
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
background: -webkit-linear-gradient(top, #fff 0, #000 100%);
background: -moz-linear-gradient(top, #fff 0, #000 100%);
background: -ms-linear-gradient(top, #fff 0, #000 100%);
background: -o-linear-gradient(top, #fff 0, #000 100%);
background: linear-gradient(top, #fff 0, #000 100%);
}
body {
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)), #fff;
background: -webkit-linear-gradient(top, #fff 0, #000 100%), #fff;
background: -moz-linear-gradient(top, #fff 0, #000 100%), #fff;
background: -ms-linear-gradient(top, #fff 0, #000 100%), #fff;
background: -o-linear-gradient(top, #fff 0, #000 100%), #fff;
background: linear-gradient(top, #fff 0, #000 100%), #fff;
}
+body {
+ -webkit-border-image: -webkit-linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
+ -moz-border-image: -moz-linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
+ -o-border-image: -o-linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
+ border-image: linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
+}
+body {
+ cursor: -webkit-linear-gradient(40deg, #f00 0, #0f0 100%);
+ cursor: -moz-linear-gradient(40deg, #f00 0, #0f0 100%);
+ cursor: -ms-linear-gradient(40deg, #f00 0, #0f0 100%);
+ cursor: -o-linear-gradient(40deg, #f00 0, #0f0 100%);
+ cursor: linear-gradient(40deg, #f00 0, #0f0 100%);
+}
+body {
+ list-style: -webkit-linear-gradient(40deg, #f00 0, #0f0 100%);
+ list-style: -moz-linear-gradient(40deg, #f00 0, #0f0 100%);
+ list-style: -ms-linear-gradient(40deg, #f00 0, #0f0 100%);
+ list-style: -o-linear-gradient(40deg, #f00 0, #0f0 100%);
+ list-style: linear-gradient(40deg, #f00 0, #0f0 100%);
+}
+body {
+ list-style-image: -webkit-linear-gradient(40deg, #f00 0, #0f0 100%);
+ list-style-image: -moz-linear-gradient(40deg, #f00 0, #0f0 100%);
+ list-style-image: -ms-linear-gradient(40deg, #f00 0, #0f0 100%);
+ list-style-image: -o-linear-gradient(40deg, #f00 0, #0f0 100%);
+ list-style-image: linear-gradient(40deg, #f00 0, #0f0 100%);
+}
@@ -1,4 +1,5 @@
+@import 'nib/vendor'
@import 'nib/gradients'
body
@@ -22,4 +23,18 @@ body
background: linear-gradient(top, white, black)
body
- background: linear-gradient(top, white, black), white
+ background: linear-gradient(top, white, black), white
+
+body
+ border-image: linear-gradient(top, #fff, #000) 20% stretch stretch;
+
+gradient-var = linear-gradient(40deg, red, lime)
+
+body
+ cursor: gradient-var
+
+body
+ list-style: gradient-var
+
+body
+ list-style-image: gradient-var
@@ -0,0 +1,28 @@
+.test1 {
+ background: -webkit-linear-gradient(top, #fff 0, #000 100%), -webkit-linear-gradient(bottom, #000 0, #fff 100%);
+ background: -moz-linear-gradient(top, #fff 0, #000 100%), -moz-linear-gradient(bottom, #000 0, #fff 100%);
+ background: -o-linear-gradient(top, #fff 0, #000 100%), -o-linear-gradient(bottom, #000 0, #fff 100%);
+ background: -ms-linear-gradient(top, #fff 0, #000 100%), -ms-linear-gradient(bottom, #000 0, #fff 100%);
+ background: linear-gradient(top, #fff 0, #000 100%), linear-gradient(bottom, #000 0, #fff 100%);
+}
+.test2 {
+ background: #fff -webkit-linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, -webkit-linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+ background: #fff -moz-linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, -moz-linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+ background: #fff -o-linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, -o-linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+ background: #fff -ms-linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, -ms-linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+ background: #fff linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+}
+.test3 {
+ background-image: -webkit-linear-gradient(top, #fff 0, #000 100%), url("a.png"), -webkit-linear-gradient(bottom, #000 0, #fff 100%);
+ background-image: -moz-linear-gradient(top, #fff 0, #000 100%), url("a.png"), -moz-linear-gradient(bottom, #000 0, #fff 100%);
+ background-image: -o-linear-gradient(top, #fff 0, #000 100%), url("a.png"), -o-linear-gradient(bottom, #000 0, #fff 100%);
+ background-image: -ms-linear-gradient(top, #fff 0, #000 100%), url("a.png"), -ms-linear-gradient(bottom, #000 0, #fff 100%);
+ background-image: linear-gradient(top, #fff 0, #000 100%), url("a.png"), linear-gradient(bottom, #000 0, #fff 100%);
+}
+.test4 {
+ background: -webkit-linear-gradient(bottom, #000 0, #fff 100%), -webkit-linear-gradient(top, #fff 0, #000 100%);
+ background: -moz-linear-gradient(bottom, #000 0, #fff 100%), -moz-linear-gradient(top, #fff 0, #000 100%);
+ background: -o-linear-gradient(bottom, #000 0, #fff 100%), -o-linear-gradient(top, #fff 0, #000 100%);
+ background: -ms-linear-gradient(bottom, #000 0, #fff 100%), -ms-linear-gradient(top, #fff 0, #000 100%);
+ background: linear-gradient(bottom, #000 0, #fff 100%), linear-gradient(top, #fff 0, #000 100%);
+}
@@ -0,0 +1,23 @@
+
+@import 'nib/vendor'
+@import 'nib/gradients'
+
+.test1
+ background: linear-gradient(top, white, black),
+ linear-gradient(bottom, black, white)
+
+.test2
+ background: #fff \
+ linear-gradient(top, black, white) 0 0 no-repeat,
+ linear-gradient(bottom, black, white) 10px bottom repeat-y
+
+.test3
+ background-image: linear-gradient(top, white, black),
+ url(a.png),
+ linear-gradient(bottom, black, white)
+
+gradient1 = linear-gradient(top, white, black)
+gradient2 = linear-gradient(bottom, black, white)
+
+.test4
+ background: gradient2, gradient1
View
@@ -1,5 +1,6 @@
@import 'nib/vendor'
+@import 'nib/gradients'
vendor-prefixes = webkit moz official

0 comments on commit 760f9f8

Please sign in to comment.