Skip to content

Instantly share code, notes, and snippets.

@juanfernandes
Created December 1, 2015 10:59
Show Gist options
  • Save juanfernandes/9aa07a110cf6907ae88e to your computer and use it in GitHub Desktop.
Save juanfernandes/9aa07a110cf6907ae88e to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="foo">
Lorem ipsum dolor sit amet <br />
Lorem ipsum dolor sit amet
</div>
<div class="bar">
Lorem ipsum dolor sit amet <br />
Lorem ipsum dolor sit amet
</div>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$color-primary: red;
$color-secondary: #BADA55;
// Mixin for generating solid-colour, pure CSS arrows pointing out from elements.
//
// Pass in mandatory edge, location, and colour information.
// Optionally specify a size (small, medium, large, <value>) and an offset
// (<value>) which moves the arrow in from an edge by <value>.
//
// .simple-usage {
// @include arrow(top, right, red);
// }
//
// .complex-usage {
// // Create a 50px yellow arrow that sits 5% in from the top right of a box.
// @include arrow(top, right, yellow, 50px, 5%);
// }
@mixin arrow($edge, $location, $color, $size: 20px, $offset: 0) {
// If an offset has been defined, let’s use it.
@if ($offset != 0) {
$offset: $offset;
}
// Map keyword sizes to actual numbers. Use passed0in value if defined.
@if ($size == 'small') {
$size: 10px;
} @elseif ($size == 'medium') {
$size: 15px;
} @elseif ($size == 'large') {
$size: 20px;
} @else {
$size: $size;
}
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative; /* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
&:before {
content: "";
position: absolute;
z-index: 1; /* [1] */
border: $size solid transparent; /* [2] */
margin: 0; /* [3] */
top: auto; /* [3] */
right: auto; /* [3] */
bottom: auto; /* [3] */
left: auto; /* [3] */
@if ($edge == 'top') {
bottom: 100%;
border-bottom-color: $color;
@if ($location == 'left') {
left: $offset;
}
@if ($location == 'middle') {
left: 50%;
margin-left: -$size;
}
@if ($location == 'right') {
right: $offset;
}
}
@if ($edge == 'right') {
left: 100%;
border-left-color: $color;
@if ($location == 'top') {
top: $offset;
}
@if ($location == 'middle') {
top: 50%;
margin-top: -$size;
}
@if ($location == 'bottom') {
bottom: $offset;
}
}
@if ($edge == 'bottom') {
top: 100%;
border-top-color: $color;
@if ($location == 'left') {
left: $offset;
}
@if ($location == 'middle') {
left: 50%;
margin-left: -$size;
}
@if ($location == 'right') {
right: $offset;
}
}
@if ($edge == 'left') {
right: 100%;
border-right-color: $color;
@if ($location == 'top') {
top: $offset;
}
@if ($location == 'middle') {
top: 50%;
margin-top: -$size;
}
@if ($location == 'bottom') {
bottom: $offset;
}
}
}
}
html {
padding: 1.5em;
}
.foo {
padding: 1em;
background-color: $color-primary;
@include arrow(bottom, left, $color-primary, small, 10px);
@media screen and (min-width: 30em) {
@include arrow(top, right, $color-primary, small, 10px);
}
@media screen and (min-width: 45em) {
@include arrow(left, middle, $color-primary, medium);
}
@media screen and (min-width: 64em) {
@include arrow(bottom, middle, $color-primary, large);
}
}
.bar {
padding: 1em;
background-color: $color-secondary;
@include arrow(top, right, $color-secondary, small, 10px);
@media screen and (min-width: 30em) {
@include arrow(bottom, left, $color-secondary, small, 10px);
}
@media screen and (min-width: 45em) {
@include arrow(right, middle, $color-secondary, medium);
}
@media screen and (min-width: 64em) {
@include arrow(bottom, middle, $color-secondary, large);
}
}
@charset "UTF-8";
html {
padding: 1.5em;
}
.foo {
padding: 1em;
background-color: red;
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative;
/* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
}
.foo:before {
content: "";
position: absolute;
z-index: 1;
/* [1] */
border: 10px solid transparent;
/* [2] */
margin: 0;
/* [3] */
top: auto;
/* [3] */
right: auto;
/* [3] */
bottom: auto;
/* [3] */
left: auto;
/* [3] */
top: 100%;
border-top-color: red;
left: 10px;
}
@media screen and (min-width: 30em) {
.foo {
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative;
/* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
}
.foo:before {
content: "";
position: absolute;
z-index: 1;
/* [1] */
border: 10px solid transparent;
/* [2] */
margin: 0;
/* [3] */
top: auto;
/* [3] */
right: auto;
/* [3] */
bottom: auto;
/* [3] */
left: auto;
/* [3] */
bottom: 100%;
border-bottom-color: red;
right: 10px;
}
}
@media screen and (min-width: 45em) {
.foo {
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative;
/* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
}
.foo:before {
content: "";
position: absolute;
z-index: 1;
/* [1] */
border: 15px solid transparent;
/* [2] */
margin: 0;
/* [3] */
top: auto;
/* [3] */
right: auto;
/* [3] */
bottom: auto;
/* [3] */
left: auto;
/* [3] */
right: 100%;
border-right-color: red;
top: 50%;
margin-top: -15px;
}
}
@media screen and (min-width: 64em) {
.foo {
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative;
/* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
}
.foo:before {
content: "";
position: absolute;
z-index: 1;
/* [1] */
border: 20px solid transparent;
/* [2] */
margin: 0;
/* [3] */
top: auto;
/* [3] */
right: auto;
/* [3] */
bottom: auto;
/* [3] */
left: auto;
/* [3] */
top: 100%;
border-top-color: red;
left: 50%;
margin-left: -20px;
}
}
.bar {
padding: 1em;
background-color: #BADA55;
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative;
/* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
}
.bar:before {
content: "";
position: absolute;
z-index: 1;
/* [1] */
border: 10px solid transparent;
/* [2] */
margin: 0;
/* [3] */
top: auto;
/* [3] */
right: auto;
/* [3] */
bottom: auto;
/* [3] */
left: auto;
/* [3] */
bottom: 100%;
border-bottom-color: #BADA55;
right: 10px;
}
@media screen and (min-width: 30em) {
.bar {
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative;
/* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
}
.bar:before {
content: "";
position: absolute;
z-index: 1;
/* [1] */
border: 10px solid transparent;
/* [2] */
margin: 0;
/* [3] */
top: auto;
/* [3] */
right: auto;
/* [3] */
bottom: auto;
/* [3] */
left: auto;
/* [3] */
top: 100%;
border-top-color: #BADA55;
left: 10px;
}
}
@media screen and (min-width: 45em) {
.bar {
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative;
/* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
}
.bar:before {
content: "";
position: absolute;
z-index: 1;
/* [1] */
border: 15px solid transparent;
/* [2] */
margin: 0;
/* [3] */
top: auto;
/* [3] */
right: auto;
/* [3] */
bottom: auto;
/* [3] */
left: auto;
/* [3] */
left: 100%;
border-left-color: #BADA55;
top: 50%;
margin-top: -15px;
}
}
@media screen and (min-width: 64em) {
.bar {
/**
* Host element styles.
*
* 1. Host element needs relative positioning.
*/
position: relative;
/* [1] */
/**
* This is where the magic happens. Pure CSS arrows.
*
* 1. Ensure it sits above the host element.
* 2. Use borders to create the arrow effect.
* 3. Defensively reset a bunch of things so we can have different arrows
* across multiple breakpoints. This produces a lot of redundancy *if*
* we have multiple responsive arrows, but it’s the most simple and
* robust way of managing things. I’d rather have clarity than terseness
* in a situation like this.
*/
}
.bar:before {
content: "";
position: absolute;
z-index: 1;
/* [1] */
border: 20px solid transparent;
/* [2] */
margin: 0;
/* [3] */
top: auto;
/* [3] */
right: auto;
/* [3] */
bottom: auto;
/* [3] */
left: auto;
/* [3] */
top: 100%;
border-top-color: #BADA55;
left: 50%;
margin-left: -20px;
}
}
<div class="foo">
Lorem ipsum dolor sit amet <br />
Lorem ipsum dolor sit amet
</div>
<div class="bar">
Lorem ipsum dolor sit amet <br />
Lorem ipsum dolor sit amet
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment