Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A Pen by Richie Arnold.
<a class="icon--menu" href="">Menu</a><br>
<a class="icon--menu--right" href="">Menu</a><br>
<a class="icon--menu--blank" href=""></a>
@mixin menu--icon($pos : right, $border : true){
position:relative;
@if $border == true {
padding: 0.5em;
}
@if $pos == right {
padding-right: 2.75em;
}
@if $pos == left {
padding-left: 2.75em;
}
display: inline-block;
@if $border == true{
border: solid 1px #ccc;
}
border-radius: 3px;
margin: 1em;
&:after{
box-sizing: border-box;
content: "";
width: 1.5em;
border-top: solid (.0625 * 3) *1em #000;
border-bottom: solid (.0625 * 3) *1em #000;
position: absolute;
@if $pos == right {
right: 0.5em;
}
@if $pos == left{
left: 0.5em;
}
height: (.0625 * 15) *1em;
}
&:before{
box-sizing: border-box;
content: "";
width: 1.5em;
border-top: solid (.0625 * 3) *1em #000;
border-bottom: solid (.0625 * 3) *1em #000;
position: absolute;
@if $pos == right {
right: 0.5em;
}
@if $pos == left{
left: 0.5em;
}
height: (.0625 * 15) *1em;
margin-top: (.0625 * 6) *1em;
}
}
.icon--menu{
@include menu--icon(left);
}
.icon--menu--right{
@include menu--icon(right);
}
.icon--menu--blank{
@include menu--icon(false, false);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment