# All files / config elevation.js

100% Statements 3/3
100% Branches 0/0
100% Functions 0/0
100% Lines 3/3

    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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    8920x
    20x

    20x

     const penumbraOpacity = 0.14;
    const umbraOpacity = 0.2;

    const elevations = {
      ios: {
        zero: {
          shadowColor: 'transparent',
          shadowOffset: { width: 0, height: 0 },
          shadowOpacity: 0.5,
          shadowRadius: 0,
        },
        one: {
          shadowColor: '#000',
          shadowOffset: { width: 1, height: 1 },
          shadowRadius: 2,
          shadowOpacity: 0.5,
        },
        two: {
          shadowColor: '#000',
          shadowOffset: { width: 2, height: 2 },
          shadowRadius: 3,
          shadowOpacity: 0.5,
        },
        three: {
          shadowColor: 'black',
          shadowOffset: { width: 0, height: 1 },
          shadowOpacity: 0.5,
          shadowRadius: 2,
        },
        four: {
          shadowColor: 'black',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.5,
          shadowRadius: 2,
        },
      },
      android: {
        zero: {
          elevation: 0,
        },
        one: {
          elevation: 1,
        },
        two: {
          elevation: 2,
        },
        three: {
          elevation: 3,
        },
        four: {
          elevation: 4,
        },
      },
      web: {
        zero: {
          boxShadow: `
            0 0px 0px 0px rgba(0, 0, 0, 0),
            0 0px 0px 0px rgba(0, 0, 0, 0)
          `,
        },
        one: {
          boxShadow: `
            0 2px 2px 0px rgba(0, 0, 0, ${penumbraOpacity}),
            0 3px 1px -2px rgba(0, 0, 0, ${umbraOpacity})
      `,
        },
        two: {
          boxShadow: `
            0 3px 4px 0px rgba(0, 0, 0, ${penumbraOpacity}),
            0 3px 3px -2px rgba(0, 0, 0, ${umbraOpacity})
          `,
        },
      },
      three: {
        boxShadow: `
          0 3px 4px 0px rgba(0, 0, 0, ${penumbraOpacity}),
          0 3px 3px -2px rgba(0, 0, 0, ${umbraOpacity})
        `,
      },
      four: {
        boxShadow: `
          0 4px 5px 0px rgba(0, 0, 0, ${penumbraOpacity}),
          0 1px 10px -2px rgba(0, 0, 0, ${umbraOpacity})
        `,
      },
    };

    export default elevations;