Ghost/ghost/admin/assets/sass/modules/mixins.scss

//
// Mixins
// --------------------------------------------------


// Baseline margin
@mixin baseline {
    margin: 1.6em 0;
}


// Fix for clearing float-based overflows
@mixin clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}


// WebKit-style focus
// From Bootstrap
@mixin tab-focus() {
    // Default
    outline: thin dotted;
    // WebKit
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}


// Simple SCSS mixin to create CSS triangles
// Example: @include css-triangle (10px, #fff, "up");
@mixin triangle($size: 20px, $color: #000, $direction: "down", $type: "normal") {
    $verticalSize: $size;
    width: 0;
    height: 0;

    @if $type == "shallow" {
      $verticalSize: floor($size * $popover_triangle_shallow_multiplier);
    }

    @if $direction == "down" {
        border-left: $size solid #{setTriangleColor($direction, "left", $color)};
        border-right: $size solid #{setTriangleColor($direction, "right", $color)};
        border-top: $verticalSize solid #{setTriangleColor($direction, "top", $color)};
    }

    @if $direction == "up" {
        border-left: $size solid #{setTriangleColor($direction, "left", $color)};
        border-right: $size solid #{setTriangleColor($direction, "right", $color)};
        border-bottom: $verticalSize solid #{setTriangleColor($direction, "bottom", $color)};
    }

    @if $direction == "left" {
        border-right: $verticalSize solid #{setTriangleColor($direction, "right", $color)};
        border-top: $size solid #{setTriangleColor($direction, "top", $color)};
        border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
    }

    @if $direction == "right" {
        border-left: $verticalSize solid #{setTriangleColor($direction, "left", $color)};
        border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
        border-top: $size solid #{setTriangleColor($direction, "top", $color)};
    }
}


// Utility function to return the relevant colour depending on what type of arrow it is
@function setTriangleColor($direction, $side, $color) {
    @if $direction == "left" and $side == "right"
    or  $direction == "right" and $side == "left"
    or $direction == "down" and $side == "top"
    or $direction == "up" and $side == "bottom" {
        @return $color
    } @else {
        @return "transparent";
    }
}