ghost/core/client/assets/sass/modules/mixins.scss

// ------------------------------------------------------------
// Mixins
//
// Mixins defined here are very general and used in mul
//
// * baseline()
// * clearfix()
// * tab-focus()
// * triangle()
// * set-triangle-color()
// * circular-image()
// ------------------------------------------------------------


//
// 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 #{set-triangle-color($direction, "left", $color)};
        border-right: $size solid #{set-triangle-color($direction, "right", $color)};
        border-top: $verticalSize solid #{set-triangle-color($direction, "top", $color)};
    }

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

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

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


//
// Utility function to return the relevant colour depending on what type of arrow it is
// --------------------------------------------------

@function set-triangle-color($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";
    }
}


//
// Reusable styles for creating a circular image which is cropped properly, with the image inside it
// Example: @circular-image(35px);
// --------------------------------------------------

@mixin circular-image($widthandheight: 20px) {
    @content;
    width: $widthandheight;
    height: $widthandheight;
    border-radius: $widthandheight;
    background-size: cover;
    background-position: center center;
    position: relative;

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}