scss/_markup-mixins.scss

// reset for list
%listreset {
	margin: 0;
	padding: 0;
	list-style: none;
}

// img full width
%img-full-width {
	width:100%;
	height:auto;
	display: block;
}

// arrow align-top
%align-top{
	display: inline-block;
	vertical-align: top;
}

// arrow align-middle
%align-middle{
	display: inline-block;
	vertical-align: middle;
}

// arrow align-bottom
%align-bottom{
	display: inline-block;
	vertical-align: bottom;
}

@mixin hide-text() {
	font: #{0/0} a;
	color: transparent;
	border: 0;
}

// reset for before
@mixin before($before-top, $before-right, $before-bottom, $before-left){
	position:absolute;
	content:"";
	top:$before-top;
	right:$before-right;
	bottom:$before-bottom;
	left:$before-left;
}

// reset for after
@mixin after($after-top, $after-right, $after-bottom, $after-left){
	position:absolute;
	content:"";
	top:$after-top;
	right:$after-right;
	bottom:$after-bottom;
	left:$after-left;
}

// link color
@mixin link-color($color) {
	color: $color;
	&:hover, &:active, &:focus {
		color: lighten($color, 25%);
		text-decoration: none;
	}
}

// custom font mixin
@mixin fontface ($fontfamily, $filename, $fontweight: normal, $fontstyle: normal) {
	font-family: $fontfamily;
	src:url('../fonts/#{$filename}.eot');
	src:url('../fonts/#{$filename}.eot?#iefix') format('embedded-opentype'),
		url('../fonts/#{$filename}.woff') format('woff'),
		url('../fonts/#{$filename}.ttf') format('truetype'),
		url('../fonts/#{$filename}.svg#{$filename}') format('svg');
	font-weight: $fontweight;
	font-style: $fontstyle;
}

@mixin arrow-lazy($direction: top, $size: 10px, $color: #ccc, $center: 50%, $margin: -1px, $pseudo: before){
	position: relative;
	border-color: $color;
	
	&:#{$pseudo} {
		position: absolute;
		content: "";
		width: 0;
		height: 0;
		border-color: $color;

		@if $direction == "right" {
			top: $center;
			left: 100%;
			margin-left: $margin;
			margin-top: $size * -1;
			border-top: $size solid transparent;
			border-bottom: $size solid transparent;
			border-left: $size solid $color;
			border-left-color: inherit;
		} @else if $direction == "down" {
			top: 100%;
			left: $center;
			margin-top: $margin;
			margin-left: $size * -1;
			border-left: $size solid transparent;
			border-right: $size solid transparent;
			border-top: $size solid $color;
			border-top-color: inherit;
		} @else if $direction == "left" {
			top: $center;
			right: 100%;
			margin-right: $margin;
			margin-top: $size * -1;
			border-top: $size solid transparent;
			border-bottom: $size solid transparent; 
			border-right:$size solid $color;
			border-right-color: inherit;
		} @else {
			bottom: 100%;
			left: $center;
			margin-bottom: $margin;
			margin-left: $size * -1;
			border-left: $size solid transparent;
			border-right: $size solid transparent;
			border-bottom: $size solid $color;
			border-bottom-color: inherit;
		}
	}
}