spaCy/website/assets/css/_mixins.sass

//- ----------------------------------
//- 💫 MIXINS
//- ----------------------------------

//  Helper for position
//  $position    - valid position value (static, absolute, fixed, relative)
//  $pos-y       - position direction Y (top, bottom)
//  $pos-x       - position direction X (left, right)
//  $pos-y-value - value of position Y direction
//  $pos-x-value - value of position X direction

@mixin position($position, $pos-y, $pos-x, $pos-y-value, $pos-x-value)
    position: $position
    #{$pos-y}: $pos-y-value
    #{$pos-x}: $pos-x-value


//  Helper for width and height
//  $width  - width of element
//  $height - height of element (default: $width)

@mixin size($width, $height: $width)
    width: $width
    height: $height


//- Responsive Breakpoint utility

@mixin breakpoint($limit, $size)
    $breakpoints-max: ( xs: map-get($breakpoints, sm) - 1, sm: map-get($breakpoints, md) - 1, md: map-get($breakpoints, lg) - 1 )

    @if $limit == "min"
        @media(min-width: #{map-get($breakpoints, $size)})
            @content

    @else if $limit == "max"
        @media(max-width: #{map-get($breakpoints-max, $size)})
            @content


//  Triangle pointing down
//  $triangle-size - width of the triangle

@mixin triangle-down($triangle-size)
    @include size(0)
    border-color: transparent
    border-style: solid
    border-top-color: inherit
    border-width: $triangle-size $triangle-size 0 $triangle-size
    content: ""


// Scroll shadows for reponsive tables
// adapted from David Bushell, http://codepen.io/dbushell/pen/wGaamR
// $scroll-shadow-color      - color of shadow
// $scroll-shadow-side       - side to cover shadow (left or right)
// $scroll-shadow-background - original background color to match

@mixin scroll-shadow-base($scroll-shadow-color)
    background: radial-gradient(left, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 100% center
    background-attachment: scroll, scroll
    background-repeat: no-repeat
    background-size: 10px 100%, 10px 100%

@mixin scroll-shadow-cover($scroll-shadow-side, $scroll-shadow-background)
    $scroll-gradient-direction: right !default

    @if $scroll-shadow-side == right
        $scroll-gradient-direction: left
        background-position: 100% 0

    background-image: linear-gradient(to #{$scroll-gradient-direction}, rgba($scroll-shadow-background, 1) 50%, rgba($scroll-shadow-background, 0) 100%)
    background-repeat: no-repeat
    background-size: 20px 100%