Skip to content

Instantly share code, notes, and snippets.

@alice-liu

alice-liu/SassMeister-input.scss

Created January 25, 2014 00:13
Show Gist options
  • Save alice-liu/8609541 to your computer and use it in GitHub Desktop.
Save alice-liu/8609541 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
$tooltip-arrow-width: 7px;
$tooltip-arrow-offset: $tooltip-arrow-width * 2;
$white: white;
$border-color: gray;
%adb-arrow {
position: absolute;
width: 0;
height: 0;
border: solid transparent;
content: "";
pointer-events: none;
}
@mixin _adb-border-arrow(
$side,
$secondary-side,
$arrow-width,
$arrow-border-width,
$arrow-offset,
$arrow-color,
$arrow-border-color
) {
$offsetting-side: if($side == top or $side == bottom, left, top);
&:before,
&:after {
@if $secondary-side == null {
// Centered
#{$offsetting-side}: 50%;
#{adb-opposite-side($offsetting-side)}: auto;
}
@else {
margin-#{$offsetting-side}: auto;
}
}
// arrow border
&:before {
#{adb-opposite-side($side)}: -1 * ($arrow-offset + $arrow-border-width + 1);
border-width: $arrow-width + $arrow-border-width;
border-#{$side}-color: $border-color;
@if $secondary-side == null {
margin-#{$offsetting-side}: -1 * ($arrow-width + $arrow-border-width);
}
@else {
#{$secondary-side}: $arrow-offset;
}
}
// arrow inside
&:after {
#{adb-opposite-side($side)}: -1 * ($arrow-offset - 1);
border-width: $arrow-width;
border-#{$side}-color: $arrow-color;
@if $secondary-side == null {
margin-#{$offsetting-side}: -1 * $arrow-width;
}
@else {
#{$secondary-side}: $arrow-offset + $arrow-border-width;
}
}
}
@mixin _adb-border-arrow-wrapper(
$side,
$secondary-side: null,
$arrow-width:1px,
$arrow-border-width:
$tooltip-arrow-width,
$arrow-offset: $tooltip-arrow-offset,
$arrow-color: $white,
$arrow-border-color: $border-color
) {
@include _adb-border-arrow(
$side,
$secondary-side,
$arrow-width,
$arrow-border-width,
$arrow-offset,
$arrow-color,
$arrow-border-color
);
}
.dialog {
// Includes arrow pointer
&.arrow {
&:before, &:after {
@extend %adb-arrow;
}
// Default is top placement
@include _adb-border-arrow-wrapper(top);
@each $side in bottom, left, right {
&[data-placement="#{$side}"] {
@include _adb-border-arrow-wrapper($side);
}
}
@each $side in top, bottom {
@each $secondary-side in left, right {
&[data-placement="#{$side}-#{$secondary-side}"] {
@include _adb-border-arrow-wrapper($side, $secondary-side);
}
}
}
@each $side in left, right {
@each $secondary-side in top, bottom {
&[data-placement="#{$side}-#{$secondary-side}"] {
@include _adb-border-arrow-wrapper($side, $secondary-side);
}
}
}
}
}
Raw
SassMeister-output.css
.dialog.arrow:before, .dialog.arrow:after {
position: absolute;
width: 0;
height: 0;
border: solid transparent;
content: "";
pointer-events: none;
}
.dialog.arrow:before, .dialog.arrow:after {
left: 50%;
adb-opposite-side(left): auto;
}
.dialog.arrow:before {
adb-opposite-side(top): -22px;
border-width: 8px;
border-top-color: gray;
margin-left: -8px;
}
.dialog.arrow:after {
adb-opposite-side(top): -13px;
border-width: 1px;
border-top-color: white;
margin-left: -1px;
}
.dialog.arrow[data-placement="bottom"]:before, .dialog.arrow[data-placement="bottom"]:after {
left: 50%;
adb-opposite-side(left): auto;
}
.dialog.arrow[data-placement="bottom"]:before {
adb-opposite-side(bottom): -22px;
border-width: 8px;
border-bottom-color: gray;
margin-left: -8px;
}
.dialog.arrow[data-placement="bottom"]:after {
adb-opposite-side(bottom): -13px;
border-width: 1px;
border-bottom-color: white;
margin-left: -1px;
}
.dialog.arrow[data-placement="left"]:before, .dialog.arrow[data-placement="left"]:after {
top: 50%;
adb-opposite-side(top): auto;
}
.dialog.arrow[data-placement="left"]:before {
adb-opposite-side(left): -22px;
border-width: 8px;
border-left-color: gray;
margin-top: -8px;
}
.dialog.arrow[data-placement="left"]:after {
adb-opposite-side(left): -13px;
border-width: 1px;
border-left-color: white;
margin-top: -1px;
}
.dialog.arrow[data-placement="right"]:before, .dialog.arrow[data-placement="right"]:after {
top: 50%;
adb-opposite-side(top): auto;
}
.dialog.arrow[data-placement="right"]:before {
adb-opposite-side(right): -22px;
border-width: 8px;
border-right-color: gray;
margin-top: -8px;
}
.dialog.arrow[data-placement="right"]:after {
adb-opposite-side(right): -13px;
border-width: 1px;
border-right-color: white;
margin-top: -1px;
}
.dialog.arrow[data-placement="top-left"]:before, .dialog.arrow[data-placement="top-left"]:after {
margin-left: auto;
}
.dialog.arrow[data-placement="top-left"]:before {
adb-opposite-side(top): -22px;
border-width: 8px;
border-top-color: gray;
left: 14px;
}
.dialog.arrow[data-placement="top-left"]:after {
adb-opposite-side(top): -13px;
border-width: 1px;
border-top-color: white;
left: 21px;
}
.dialog.arrow[data-placement="top-right"]:before, .dialog.arrow[data-placement="top-right"]:after {
margin-left: auto;
}
.dialog.arrow[data-placement="top-right"]:before {
adb-opposite-side(top): -22px;
border-width: 8px;
border-top-color: gray;
right: 14px;
}
.dialog.arrow[data-placement="top-right"]:after {
adb-opposite-side(top): -13px;
border-width: 1px;
border-top-color: white;
right: 21px;
}
.dialog.arrow[data-placement="bottom-left"]:before, .dialog.arrow[data-placement="bottom-left"]:after {
margin-left: auto;
}
.dialog.arrow[data-placement="bottom-left"]:before {
adb-opposite-side(bottom): -22px;
border-width: 8px;
border-bottom-color: gray;
left: 14px;
}
.dialog.arrow[data-placement="bottom-left"]:after {
adb-opposite-side(bottom): -13px;
border-width: 1px;
border-bottom-color: white;
left: 21px;
}
.dialog.arrow[data-placement="bottom-right"]:before, .dialog.arrow[data-placement="bottom-right"]:after {
margin-left: auto;
}
.dialog.arrow[data-placement="bottom-right"]:before {
adb-opposite-side(bottom): -22px;
border-width: 8px;
border-bottom-color: gray;
right: 14px;
}
.dialog.arrow[data-placement="bottom-right"]:after {
adb-opposite-side(bottom): -13px;
border-width: 1px;
border-bottom-color: white;
right: 21px;
}
.dialog.arrow[data-placement="left-top"]:before, .dialog.arrow[data-placement="left-top"]:after {
margin-top: auto;
}
.dialog.arrow[data-placement="left-top"]:before {
adb-opposite-side(left): -22px;
border-width: 8px;
border-left-color: gray;
top: 14px;
}
.dialog.arrow[data-placement="left-top"]:after {
adb-opposite-side(left): -13px;
border-width: 1px;
border-left-color: white;
top: 21px;
}
.dialog.arrow[data-placement="left-bottom"]:before, .dialog.arrow[data-placement="left-bottom"]:after {
margin-top: auto;
}
.dialog.arrow[data-placement="left-bottom"]:before {
adb-opposite-side(left): -22px;
border-width: 8px;
border-left-color: gray;
bottom: 14px;
}
.dialog.arrow[data-placement="left-bottom"]:after {
adb-opposite-side(left): -13px;
border-width: 1px;
border-left-color: white;
bottom: 21px;
}
.dialog.arrow[data-placement="right-top"]:before, .dialog.arrow[data-placement="right-top"]:after {
margin-top: auto;
}
.dialog.arrow[data-placement="right-top"]:before {
adb-opposite-side(right): -22px;
border-width: 8px;
border-right-color: gray;
top: 14px;
}
.dialog.arrow[data-placement="right-top"]:after {
adb-opposite-side(right): -13px;
border-width: 1px;
border-right-color: white;
top: 21px;
}
.dialog.arrow[data-placement="right-bottom"]:before, .dialog.arrow[data-placement="right-bottom"]:after {
margin-top: auto;
}
.dialog.arrow[data-placement="right-bottom"]:before {
adb-opposite-side(right): -22px;
border-width: 8px;
border-right-color: gray;
bottom: 14px;
}
.dialog.arrow[data-placement="right-bottom"]:after {
adb-opposite-side(right): -13px;
border-width: 1px;
border-right-color: white;
bottom: 21px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment