mirror of
https://github.com/less/less.js.git
synced 2026-01-22 13:48:03 -05:00
support transparent as a color but do not alter existing output of transparent and rgba()
This commit is contained in:
@@ -140,7 +140,6 @@
|
||||
'teal':'#008080',
|
||||
'thistle':'#d8bfd8',
|
||||
'tomato':'#ff6347',
|
||||
// 'transparent':'rgba(0,0,0,0)',
|
||||
'turquoise':'#40e0d0',
|
||||
'violet':'#ee82ee',
|
||||
'wheat':'#f5deb3',
|
||||
|
||||
@@ -657,12 +657,11 @@ less.Parser = function Parser(env) {
|
||||
var k;
|
||||
|
||||
if (k = $(/^[_A-Za-z-][_A-Za-z0-9-]*/)) {
|
||||
if (tree.colors.hasOwnProperty(k)) {
|
||||
// detect named color
|
||||
return new(tree.Color)(tree.colors[k].slice(1));
|
||||
} else {
|
||||
return new(tree.Keyword)(k);
|
||||
var color = tree.Color.fromKeyword(k);
|
||||
if (color) {
|
||||
return color;
|
||||
}
|
||||
return new(tree.Keyword)(k);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -22,6 +22,9 @@ tree.Color = function (rgb, a) {
|
||||
}
|
||||
this.alpha = typeof(a) === 'number' ? a : 1;
|
||||
};
|
||||
|
||||
var transparentKeyword = "transparent";
|
||||
|
||||
tree.Color.prototype = {
|
||||
type: "Color",
|
||||
eval: function () { return this; },
|
||||
@@ -38,6 +41,9 @@ tree.Color.prototype = {
|
||||
// which has better compatibility with older browsers.
|
||||
// Values are capped between `0` and `255`, rounded and zero-padded.
|
||||
if (this.alpha < 1.0) {
|
||||
if (this.alpha === 0 && this.isTransparentKeyword) {
|
||||
return transparentKeyword;
|
||||
}
|
||||
return "rgba(" + this.rgb.map(function (c) {
|
||||
return Math.round(c);
|
||||
}).concat(this.alpha).join(',' + (compress ? '' : ' ')) + ")";
|
||||
@@ -156,5 +162,17 @@ tree.Color.prototype = {
|
||||
}
|
||||
};
|
||||
|
||||
tree.Color.fromKeyword = function(keyword) {
|
||||
if (tree.colors.hasOwnProperty(keyword)) {
|
||||
// detect named color
|
||||
return new(tree.Color)(tree.colors[keyword].slice(1));
|
||||
}
|
||||
if (keyword === transparentKeyword) {
|
||||
var transparent = new(tree.Color)([0, 0, 0], 0);
|
||||
transparent.isTransparentKeyword = true;
|
||||
return transparent;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
})(require('../tree'));
|
||||
|
||||
@@ -102,11 +102,13 @@
|
||||
mix-0: #ffff00;
|
||||
mix-100: #ff0000;
|
||||
mix-weightless: #ff8000;
|
||||
mixt: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
#built-in .is-a {
|
||||
color: true;
|
||||
color1: true;
|
||||
color2: true;
|
||||
color3: true;
|
||||
keyword: true;
|
||||
number: true;
|
||||
string: true;
|
||||
@@ -117,6 +119,8 @@
|
||||
}
|
||||
#alpha {
|
||||
alpha: rgba(153, 94, 51, 0.6);
|
||||
alpha2: 0.5;
|
||||
alpha3: 0;
|
||||
}
|
||||
#blendmodes {
|
||||
multiply: #ed0000;
|
||||
|
||||
@@ -111,11 +111,13 @@
|
||||
mix-0: mix(#ff0000, #ffff00, 0);
|
||||
mix-100: mix(#ff0000, #ffff00, 100);
|
||||
mix-weightless: mix(#ff0000, #ffff00);
|
||||
mixt: mix(#ff0000, transparent);
|
||||
|
||||
.is-a {
|
||||
color: iscolor(#ddd);
|
||||
color1: iscolor(red);
|
||||
color2: iscolor(rgb(0, 0, 0));
|
||||
color3: iscolor(transparent);
|
||||
keyword: iskeyword(hello);
|
||||
number: isnumber(32);
|
||||
string: isstring("hello");
|
||||
@@ -128,6 +130,8 @@
|
||||
|
||||
#alpha {
|
||||
alpha: darken(hsla(25, 50%, 50%, 0.6), 10%);
|
||||
alpha2: alpha(rgba(3, 4, 5, 0.5));
|
||||
alpha3: alpha(transparent);
|
||||
}
|
||||
|
||||
#blendmodes {
|
||||
|
||||
Reference in New Issue
Block a user