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;