Flat shadow LESS mixin

Flat-shadow-LESS-mixin.markdown

Flat shadow LESS mixin

A Pen by Mark Campbell on CodePen.

License.

index.html

	<div class="container">
  <div class="icon gf"></div>
  </div>

style.less

@import url(http://fonts.googleapis.com/css?family=Marck+Script);
body {
    -webkit-font-smoothing: antialiased;
    background: #333;
    overflow: hidden;
}
.container {
    width: 245px;
    margin: 180px auto;
}
div.icon {
    float: left;
    width: 245px;
    height: 245px;
    margin: 5px;
    display: block;
    background: rgb(150, 150, 150);
    font-family: "Marck Script",  sans-serif;
    text-align:center;
    font-size: 13em;
    font-weight: 500;
    line-height:.75;
    border-radius:15px;
    overflow:hidden;
  .longShadowBox(#2f2f2f,135deg, 100);
}
div.icon:after {
    top: 0px;
    color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding-top: 54.05px;
    box-sizing: border-box;
}
/*The shadow of the squares */
.icon:before {
    content: '';
    display: block;
    float: left;
    width: 136%;
    height: 136%;
    position: absolute;
    margin: 29%;
}
.gf:after {
   -webkit-font-smoothing: antialiased;
    content: "F";
    background: #dd473d;
  .longShadow(#a83027,135deg, 100);
}



//RULES
.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
}
.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius:    @radius;
	border-radius:         @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}
.gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
 	background-color: @startColor;
	background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(left, @startColor, @endColor);
	background-image: -moz-linear-gradient(left, @startColor, @endColor);
	background-image: -ms-linear-gradient(left, @startColor, @endColor);
	background-image: -o-linear-gradient(left, @startColor, @endColor);
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
//END RULES
//LONG SHADOW MIXINS
.longShadow(@color, @angle,@size, @spread: 100, @flag: 1, @tmp: '') when (@size > 0) {
  @turn: (@angle - 90);             
  @x: 1.5 * cos(@turn) * @size;  
  @y: 1.5 * sin(@turn) * @size;  
  @percent: round(@flag / @size * 100) * @spread;
  @shadowColor: fade(@color, @percent);
  @shadow: ~"@{x}px @{y}px 0px @{shadowColor}";
  @ends: ~"@{shadow}, @{tmp}";
  @shadowString: ~"@{ends} 0px 0px 1px #000";

  .longShadowLoop(@string, @index) when (@index < 1) {
    text-shadow: @string;
  }

  .longShadowLoop(@shadowString, @size - 1);
  .longShadow(@color,@angle, @size - 1, @spread, @flag + 1, @ends);
}

// Box-shadow
.longShadowBox(@color,@angle, @size, @spread: 1, @flag: 1, @tmp: '') when (@size > 0) {
  @turn: (@angle - 90);             
  @x: 1.5 * cos(@turn) * @size;  
  @y: 1.5 * sin(@turn) * @size; 
  @percent: round(@flag / @size * 100) * @spread;
  @shadowColor: fade(@color, @percent);
  @shadow: ~"@{x}px @{y}px 0 0 @{shadowColor}";
  @ends: ~"@{shadow}, @{tmp}";
  @shadowString: ~"@{ends} 0px 0px 0 0 #000";

  .longShadowLoop(@string, @index) when (@index < 1) {
    -webkit-box-shadow: @string;
       -moz-box-shadow: @string;
            box-shadow: @string;
  }

  .longShadowLoop(@shadowString, @size - 1);
  .longShadowBox(@color,@angle, @size - 1, @spread, @flag + 1, @ends);
}
//END LONG SHADOW MIXINS
//START LESS
html{
background:#333333;
}