// 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; | |
} | |
} | |
} |