spaCy/website/assets/css/_mixins.sass

//- 💫 CSS > 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


// 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

@function scroll-shadow-gradient($scroll-gradient-direction, $scroll-shadow-background)
    @return linear-gradient(to #{$scroll-gradient-direction}, rgba($scroll-shadow-background, 1) 50%, rgba($scroll-shadow-background, 0) 100%)

@mixin scroll-shadow-base($scroll-shadow-color, $scroll-shadow-intensity: 0.2)
    background: radial-gradient(ellipse at 0 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, rgba(0,0,0,0) 75%) 0 center, radial-gradient(ellipse at 100% 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, transparent 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
    background-repeat: no-repeat

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

    @if $scroll-shadow-side == both
        background-image: scroll-shadow-gradient(left, $scroll-shadow-background), scroll-shadow-gradient(right, $scroll-shadow-background)
        background-position: 100% 0, 0 0
        background-size: 20px 100%, 20px 100%
    @else
        background-image: scroll-shadow-gradient($scroll-gradient-direction, $scroll-shadow-background)
        background-size: 20px 100%

// Full vertical scroll shadows
// adapted from: https://codepen.io/laustdeleuran/pen/DBaAu

@mixin scroll-shadow($background-color, $shadow-color, $shadow-offset: 0, $shadow-intensity: 0.4, $cover-size: 40px, $shadow-size: 15px)
    background: linear-gradient($background-color 30%, rgba($background-color,0)) 0 $shadow-offset, linear-gradient(rgba($background-color,0), $background-color 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 $shadow-offset, radial-gradient(50% 100%,farthest-side, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 100%

    background: linear-gradient($background-color 30%, rgba($background-color,0)) 0 $shadow-offset, linear-gradient(rgba($background-color,0), $background-color 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) -20px $shadow-offset, radial-gradient(farthest-side at 50% 100%, rgba($shadow-color, $shadow-intensity), rgba($shadow-color,0)) 0 100%
    background-repeat: no-repeat
    background-color: $background-color
    background-size: 100% $cover-size, 100% $cover-size, 100% $shadow-size, 100% $shadow-size
    background-attachment: local, local, scroll, scroll