1@mixin css-arrow( 2 $vertical-direction, 3 $size, 4 $color, 5 $border-width, 6 $border-color, 7 $left: 50%, 8 $left-offset: 0px 9) { 10 & { 11 border: 1px solid $border-color; 12 } 13 14 &:after, 15 &:before { 16 @if ($vertical-direction == 'top') { 17 bottom: 100%; 18 } @else { 19 top: 100%; 20 } 21 border: solid transparent; 22 content: ' '; 23 height: 0; 24 width: 0; 25 position: absolute; 26 pointer-events: none; 27 } 28 29 &:after { 30 border-color: rgba($color, 0); 31 border-bottom-color: $color; 32 border-width: $size; 33 left: calc(#{$left} + #{$left-offset}); 34 margin-left: -$size; 35 } 36 &:before { 37 border-color: rgba($border-color, 0); 38 border-bottom-color: $border-color; 39 border-width: $size + round(1.41421356 * $border-width); 40 left: calc(#{$left} + #{$left-offset}); 41 margin-left: -($size + round(1.41421356 * $border-width)); 42 } 43 &:before, 44 &:after { 45 @if ($vertical-direction == 'bottom') { 46 transform: rotate(180deg); 47 } 48 } 49 50 @at-root .ember-basic-dropdown-content--left#{&} { 51 &:after, 52 &:before { 53 left: auto; 54 right: calc(#{$left} + #{$left-offset} - #{$size}); 55 } 56 } 57} 58 59@mixin css-top-arrow($size, $color, $border-width, $border-color, $left: 50%, $left-offset: 0px) { 60 @include css-arrow('top', $size, $color, $border-width, $border-color, $left, $left-offset); 61} 62@mixin css-bottom-arrow($size, $color, $border-width, $border-color, $left: 50%, $left-offset: 0px) { 63 @include css-arrow('bottom', $size, $color, $border-width, $border-color, $left, $left-offset); 64} 65 66@mixin vault-block { 67 &:not(:last-child) { 68 margin-bottom: (5/14) + 0rem; 69 } 70} 71