Created
January 25, 2014 00:13
-
-
Save alice-liu/8609541 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // 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); | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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