From 5034ee677b69f92c84fba5e10332a266f9c8f29d Mon Sep 17 00:00:00 2001 From: Pestov Date: Wed, 11 Sep 2013 13:29:36 +0400 Subject: [PATCH 1/4] Shade by LESS --- less/shade.less | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 less/shade.less diff --git a/less/shade.less b/less/shade.less new file mode 100644 index 0000000..b61c4c1 --- /dev/null +++ b/less/shade.less @@ -0,0 +1,43 @@ +/* ========================================================================== + Created by Ilya Pestov - @ilya_pestov + ========================================================================== */ + +.shade(@type, @color: #3498db, @depth: 20, @angle: 135deg, @long: true, @fade: false) { + @ang: (@angle - 90deg); + @x: 1.5px * cos(@ang); + @y: 1.5px * sin(@ang); + + .shade(@type, @color, @depth, @x, @y, @long, @fade, (lightness(@color)/@depth)/2, (alpha(@color)/@depth)); +} + +.shade(@type, @color, @depth, @x, @y, @long, @fade, @darken, @opacify) when (@long = true) { + .shade(@type, @color, @depth, @x, @y, @fade, 0, @opacify); +} +.shade(@type, @color, @depth, @x, @y, @long, @fade, @darken, @opacify) when (@long = false) { + .shade(@type, @color, @depth, @x, @y, @fade, @darken, @opacify); +} + + +.shade(@type, @color, @depth, @x, @y, @long, @darken, @opacify) when (@fade = true) { + .shade(@type, @color, @depth, @x, @y, @darken, @opacify); +} +.shade(@type, @color, @depth, @x, @y, @long, @darken, @opacify) when (@fade = false) { + .shade(@type, @color, @depth, @x, @y, @darken, 0); +} + +.shade(@type, @color, @depth, @x, @y, @darken, @opacify) { + @hue: hue(@color); + @sat: saturation(@color); + @lightness: lightness(@color); + .shade-recursive(@type, 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); +} + +.shade-recursive(@type, @i, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness) when (@i < @depth) and (@type = text) { + text-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify))); + .shade-recursive(@type, @i + 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); +} + +.shade-recursive(@type, @i, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness) when (@i < @depth) and (@type = box) { + box-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify))); + .shade-recursive(@type, @i + 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); +} \ No newline at end of file From 5b69ba79373403cc2c3d70ebe632992a4a00d86e Mon Sep 17 00:00:00 2001 From: Ilya Pestov Date: Wed, 11 Sep 2013 13:43:30 +0400 Subject: [PATCH 2/4] Update readme.md --- readme.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 90f92cf..cfd3c95 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,8 @@ -![Sassmatic Logo](http://darbybrown.com/img/shade.jpg) +![Sassmatic Logo](http://habr.habrastorage.org/post_images/b76/522/4fb/b765224fb1f54f4f20f971f33377da6a.png) The Ultimate Shadow Mixin -[Demo and Usage](http://codepen.io/hugo/full/xzjGB) \ No newline at end of file +[Demo and Usage SCSS CodePen](http://codepen.io/hugo/full/xzjGB) +[Demo and LESS-1.5.0](http://netcribe.com/MojoShade/) From 6f7523c3b3dbd00d5454580e28b4347cbcc3207b Mon Sep 17 00:00:00 2001 From: Ilya Pestov Date: Wed, 11 Sep 2013 13:47:21 +0400 Subject: [PATCH 3/4] Update readme.md --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index cfd3c95..44af2ec 100644 --- a/readme.md +++ b/readme.md @@ -5,4 +5,5 @@ The Ultimate Shadow Mixin [Demo and Usage SCSS CodePen](http://codepen.io/hugo/full/xzjGB) + [Demo and LESS-1.5.0](http://netcribe.com/MojoShade/) From b8372e9f12637d66c366fdeeb49f68daf6b0602f Mon Sep 17 00:00:00 2001 From: Ilya Pestov Date: Wed, 11 Sep 2013 13:48:36 +0400 Subject: [PATCH 4/4] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 44af2ec..276b2f2 100644 --- a/readme.md +++ b/readme.md @@ -6,4 +6,4 @@ The Ultimate Shadow Mixin [Demo and Usage SCSS CodePen](http://codepen.io/hugo/full/xzjGB) -[Demo and LESS-1.5.0](http://netcribe.com/MojoShade/) +[Demo LESS-1.5.0](http://netcribe.com/MojoShade/)