Skip to content

Instantly share code, notes, and snippets.

@Nazcange
Created February 13, 2014 16:51
Show Gist options
  • Save Nazcange/8978959 to your computer and use it in GitHub Desktop.
Save Nazcange/8978959 to your computer and use it in GitHub Desktop.
// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----
%fig-arrow{
position:absolute;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 12px solid #FFF;
}
.fig-wid-arrow,
.fig-wid-arrow-border {
@extend %fig-arrow;
top:-1px;
left:44%;
}
.fig-wid-arrow-border {
border-top-color: #ccc;
top: 0;
}
.fig-wid1-arrow,
.fig-wid1-arrow-border {
@extend %fig-arrow;
bottom:-4px;
left:50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #FFF;
}
.fig-wid1-arrow-border {
border-top-color: #ccc;
bottom: -5px;
left:50%;
}
.fig-wid2-arrow,
.fig-wid2-arrow-border {
@extend %fig-arrow;
top:-11px;
left:24%;
}
.fig-wid2-arrow-border {
@extend %fig-arrow;
border-bottom-color: #ccc;
top: -12px;
}
.fig-wid-citation-even {
.fig-wid-arrow,
.fig-wid-arrow-border {
left:67%;
}
}
.fig-elec-arrow,
.fig-elec-arrow-border {
@extend %fig-arrow;
top:-12px;
left: 0;
}
.fig-elec-arrow-border {
border-bottom-color: #ccc;
top: -13px;
}
.fig-wid-arrow,
.fig-wid-arrow-border, .fig-wid1-arrow,
.fig-wid1-arrow-border, .fig-wid2-arrow,
.fig-wid2-arrow-border, .fig-elec-arrow,
.fig-elec-arrow-border {
position: absolute;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 12px solid #FFF;
}
.fig-wid-arrow,
.fig-wid-arrow-border {
top: -1px;
left: 44%;
}
.fig-wid-arrow-border {
border-top-color: #ccc;
top: 0;
}
.fig-wid1-arrow,
.fig-wid1-arrow-border {
bottom: -4px;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #FFF;
}
.fig-wid1-arrow-border {
border-top-color: #ccc;
bottom: -5px;
left: 50%;
}
.fig-wid2-arrow,
.fig-wid2-arrow-border {
top: -11px;
left: 24%;
}
.fig-wid2-arrow-border {
border-bottom-color: #ccc;
top: -12px;
}
.fig-wid-citation-even .fig-wid-arrow,
.fig-wid-citation-even .fig-wid-arrow-border {
left: 67%;
}
.fig-elec-arrow,
.fig-elec-arrow-border {
top: -12px;
left: 0;
}
.fig-elec-arrow-border {
border-bottom-color: #ccc;
top: -13px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment