github/less.js
1
1
Fork 0
mirror of https://github.com/less/less.js.git synced 2026-05-01 03:00:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

optional relative amounts for color functions, see#975

Browse Source
This commit is contained in:
Bass Jobsen
2015-03-15 00:12:47 +01:00
parent c4fa45f3b9
commit 622a521b11
3 changed files with 60 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
lib/less/functions/color.js
View File

@@ -141,7 +141,7 @@ colorFunctions = {
return new Dimension(luminance * color.alpha * 100, '%');
},
saturate: function (color, amount) {
saturate: function (color, amount, method) {
// filter: saturate(3.2);
// should be kept as is, so check for color
if (!color.rgb) {
@@ -149,42 +149,72 @@ colorFunctions = {
}
var hsl = color.toHSL();
hsl.s += amount.value / 100;
if (typeof method !== "undefined" && method.value === "relative") {
hsl.s += hsl.s * amount.value / 100;
}
else {
hsl.s += amount.value / 100;
}
hsl.s = clamp(hsl.s);
return hsla(hsl);
},
desaturate: function (color, amount) {
desaturate: function (color, amount, method) {
var hsl = color.toHSL();
hsl.s -= amount.value / 100;
if (typeof method !== "undefined" && method.value === "relative") {
hsl.s -= hsl.s * amount.value / 100;
}
else {
hsl.s -= amount.value / 100;
}
hsl.s = clamp(hsl.s);
return hsla(hsl);
},
lighten: function (color, amount) {
lighten: function (color, amount, method) {
var hsl = color.toHSL();
hsl.l += amount.value / 100;
if (typeof method !== "undefined" && method.value === "relative") {
hsl.l += hsl.l * amount.value / 100;
}
else {
hsl.l += amount.value / 100;
}
hsl.l = clamp(hsl.l);
return hsla(hsl);
},
darken: function (color, amount) {
darken: function (color, amount, method) {
var hsl = color.toHSL();
hsl.l -= amount.value / 100;
if (typeof method !== "undefined" && method.value === "relative") {
hsl.l -= hsl.l * amount.value / 100;
}
else {
hsl.l -= amount.value / 100;
}
hsl.l = clamp(hsl.l);
return hsla(hsl);
},
fadein: function (color, amount) {
fadein: function (color, amount, method) {
var hsl = color.toHSL();
hsl.a += amount.value / 100;
if (typeof method !== "undefined" && method.value === "relative") {
hsl.a += hsl.a * amount.value / 100;
}
else {
hsl.a += amount.value / 100;
}
hsl.a = clamp(hsl.a);
return hsla(hsl);
},
fadeout: function (color, amount) {
fadeout: function (color, amount, method) {
var hsl = color.toHSL();
hsl.a -= amount.value / 100;
if (typeof method !== "undefined" && method.value === "relative") {
hsl.a -= hsl.a * amount.value / 100;
}
else {
hsl.a -= amount.value / 100;
}
hsl.a = clamp(hsl.a);
return hsla(hsl);
},

8
test/css/functions.css
View File

@@ -9,9 +9,13 @@
#built-in {
escaped: -Some::weird(#thing, y);
lighten: #ffcccc;
lighten-relative: #ff6666;
darken: #330000;
darken-relative: #990000;
saturate: #203c31;
saturate-relative: #28342f;
desaturate: #29332f;
desaturate-relative: #233930;
greyscale: #2e2e2e;
hsl-clamp: #ffffff;
spin-p: #bf6a40;
@@ -118,6 +122,10 @@
shade-negative: #868686;
fade-out: rgba(255, 0, 0, 0.95);
fade-in: rgba(255, 0, 0, 0.95);
fade-out-relative: rgba(255, 0, 0, 0.95);
fade-in-relative: rgba(255, 0, 0, 0.945);
fade-out2: rgba(255, 0, 0, 0);
fade-out2-relative: rgba(255, 0, 0, 0.25);
hsv: #4d2926;
hsva: rgba(77, 40, 38, 0.2);
mix: #ff3300;

12
test/less/functions.less
View File

@@ -13,9 +13,13 @@
@r: 32;
escaped: e("-Some::weird(#thing, y)");
lighten: lighten(#ff0000, 40%);
lighten-relative: lighten(#ff0000, 40%, relative);
darken: darken(#ff0000, 40%);
darken-relative: darken(#ff0000, 40%, relative);
saturate: saturate(#29332f, 20%);
saturate-relative: saturate(#29332f, 20%, relative);
desaturate: desaturate(#203c31, 20%);
desaturate-relative: desaturate(#203c31, 20%, relative);
greyscale: greyscale(#203c31);
hsl-clamp: hsl(380, 150%, 150%);
spin-p: spin(hsl(340, 50%, 50%), 40);
@@ -124,9 +128,13 @@
shade-percent: shade(#777777, 13%);
shade-negative: shade(#777777, -13%);
fade-out: fadeOut(red, 5%); // support fadeOut and fadeout
fade-out: fadeout(red, 5%); // support fadeOut and fadeout
fade-in: fadein(fadeout(red, 10%), 5%);
fade-out-relative: fadeout(red, 5%,relative);
fade-in-relative: fadein(fadeout(red, 10%, relative), 5%, relative);
fade-out2: fadeout(fadeout(red, 50%), 50%);
fade-out2-relative: fadeout(fadeout(red, 50%, relative), 50%, relative);
hsv: hsv(5, 50%, 30%);
hsva: hsva(3, 50%, 30%, 0.2);