# All files / src/_styles shadows.ts

100% Statements 14/14
91.66% Branches 11/12
100% Functions 1/1
100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    2670x

    70x

    70x
    363x
    619x

    363x
    363x
    363x
    363x

    363x
    363x
    363x
    363x

    363x

     import { css } from 'styled-components'
    import { Placement } from '../_utils/placement'

    const base = 8

    export function getShadow(
      Istrength: number = 0,
      placement: Placement = 'center'
    ) {
      const blur = base * strength
      const distance = blur / 4
      const opacity = (blur * 2) / 100
      const spread = -1 * (distance / 2)

      const xDelta = placement.match('(left|right)') ? distance : 0
      const yDelta = placement.match('(top|bottom)') ? distance : 0
      const xMagnitude = placement.match('left') ? -1 : 1
      const yMagnitude = placement.match('top') ? -1 : 1

      return css`
        box-shadow: ${`${xMagnitude * xDelta}px ${
          yMagnitude * yDelta
        }px ${blur}px ${spread}px hsla(200, 10%, 15%, ${opacity})`};
      `
    }