Skip to content

Instantly share code, notes, and snippets.

@airen
Created August 20, 2014 03:21
Show Gist options
  • Save airen/862192bd554fdc572cfc to your computer and use it in GitHub Desktop.
Save airen/862192bd554fdc572cfc to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----
@mixin pseudo-elements($el,$el-width,$el-height){
@if $el == "before" or $el == "after"{
&:#{$el}{
content: "";
position: absolute;
width: $el-width;
height: $el-height;
@content;
}
}
@else {
@warn "`#{$el}` is not a valid pseudo-element.";
}
}
//use
.icon-toggle {
width: 1.56em;
height: 0.75em;
position: relative;
display: inline-block;
border-top: solid .125em #60666c;
@include pseudo-elements(before, 1.56em, .125em) {
background: #888c91;
top: .25em;
}
@include pseudo-elements(after, 1.56em, .125em) {
background: #afb3b5;
bottom: 0;
}
}
.icon-toggle {
width: 1.56em;
height: 0.75em;
position: relative;
display: inline-block;
border-top: solid .125em #60666c;
}
.icon-toggle:before {
content: "";
position: absolute;
width: 1.56em;
height: 0.125em;
background: #888c91;
top: .25em;
}
.icon-toggle:after {
content: "";
position: absolute;
width: 1.56em;
height: 0.125em;
background: #afb3b5;
bottom: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment