Skip to content

Instantly share code, notes, and snippets.

@koycarraway
Created July 31, 2014 17:22
Show Gist options
  • Save koycarraway/8ff3fdeee156dd1f8b81 to your computer and use it in GitHub Desktop.
Save koycarraway/8ff3fdeee156dd1f8b81 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<span class="icn-toggle"></span>
// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----
body {font-size: 2em;}
// _helpers.scss
%pseudos {
content: '';
position: absolute;
}
// _mixins.scss
@mixin p-el(
$el,
$el-width,
$el-height) {
@if $el == "before" or $el == "after" {
&:#{$el} {
@extend %pseudos;
width: $el-width;
height: $el-height;
@content;
}
}
@else {
@error "`#{$el}` is not a valid pseudo-element.";
}
}
// _ui.scss
.icn-toggle {
width: 1.56em;
height: 0.75em;
position: relative;
display: inline-block;
border-top: solid .125em #60666c;
@include p-el(before, 1.56em, .125em) {
background: #888c91;
top: .25em;
}
@include p-el(after, 1.56em, .125em) {
background: #afb3b5;
bottom: 0;
}
}
body {
font-size: 2em;
}
.icn-toggle:before, .icn-toggle:after {
content: '';
position: absolute;
}
.icn-toggle {
width: 1.56em;
height: 0.75em;
position: relative;
display: inline-block;
border-top: solid .125em #60666c;
}
.icn-toggle:before {
width: 1.56em;
height: 0.125em;
background: #888c91;
top: .25em;
}
.icn-toggle:after {
width: 1.56em;
height: 0.125em;
background: #afb3b5;
bottom: 0;
}
<span class="icn-toggle"></span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment