Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Gradients #207

Merged
merged 7 commits into from

3 participants

Sean Lang Roman Komarov ven
Sean Lang
Collaborator

A small chunk of #192

ven vendethiel commented on the diff
lib/nib/vendor.styl
((7 lines not shown))
*/
-replace-args(args,argument,val)
+prepend-args(args, prefix, argument, strict = true)

I feel bad for having those :(

Sean Lang Collaborator

in what sense?

I think these should be handled at the language level

Sean Lang Collaborator

ah, yeah... that'd be nice :P

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Sean Lang slang800 merged commit 760f9f8 into from
Sean Lang slang800 deleted the branch
Roman Komarov

It would be nice to cherry-pick this fix too, 'cause right now gradients would be broken for people who use nib only using @import, without JS part, and the fix makes the use() function from the latest Stylus' releases to apply the logic for fixing gradients right inside of .styl file.

Sean Lang
Collaborator

Yep, that'll be merged before the next release... I'm gonna work on merging #192 in small chunks till it's all done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 30, 2013
  1. Roman Komarov Sean Lang

    Removed legacy webkit support; commented out the canvas generated lin…

    kizu authored slang800 committed
    …ear gradient; prepared the linear gradient to be available in vendor-prefixed properties like border-image; actually fixes #14; fixes #71
  2. Roman Komarov Sean Lang

    Applying linear-gradient to border-image; fixes #19

    kizu authored slang800 committed
  3. Roman Komarov Sean Lang

    Removed the legacy webkit gradients from tests

    kizu authored slang800 committed
  4. Roman Komarov Sean Lang

    Moved whole logic from the gradient function to the vendor ones, rewr…

    kizu authored slang800 committed
    …iting the background, background-image etc. Fixes #67
  5. Roman Komarov Sean Lang

    Added some tests

    kizu authored slang800 committed
  6. Roman Komarov Sean Lang

    Fixed tests after rebase

    kizu authored slang800 committed
  7. Sean Lang
This page is out of date. Refresh to see the latest.
55 lib/nib/gradients.styl
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)
/*
59 lib/nib/vendor.styl
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)

I feel bad for having those :(

Sean Lang Collaborator

in what sense?

I think these should be handled at the language level

Sean Lang Collaborator

ah, yeah... that'd be nice :P

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
44 test/cases/linear-gradient.css
View
@@ -1,13 +1,11 @@
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%);
@@ -15,7 +13,6 @@ body {
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%);
@@ -23,7 +20,6 @@ body {
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%);
@@ -31,7 +27,6 @@ body {
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%);
@@ -39,7 +34,6 @@ body {
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%);
@@ -47,10 +41,36 @@ body {
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%);
+}
17 test/cases/linear-gradient.styl
View
@@ -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
28 test/cases/multiple-gradients.css
View
@@ -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%);
+}
23 test/cases/multiple-gradients.styl
View
@@ -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
1  test/cases/vendor.styl
View
@@ -1,5 +1,6 @@
@import 'nib/vendor'
+@import 'nib/gradients'
vendor-prefixes = webkit moz official
Something went wrong with that request. Please try again.