| 1 | {"version":3,"file":"breakpoints.js","sources":["../src/style/breakpoints.js"],"sourcesContent":["import { css } from 'styled-components'\nimport { GU } from './constants'\n\n// These breakpoints values represent minimum screen sizes.\nconst BREAKPOINTS = {\n min: 360,\n small: 360,\n medium: 96 * GU,\n large: 144 * GU,\n}\n\n// CSS breakpoints\nconst breakpoint = (name, styles) => css`\n @media (min-width: ${BREAKPOINTS[name]}px) {\n ${styles};\n }\n`\n\nexport { BREAKPOINTS, breakpoint }\n"],"names":["BREAKPOINTS","min","small","medium","GU","large","breakpoint","name","styles","css"],"mappings":";;;;;;;;;;IAIMA,WAAW,GAAG;AAClBC,EAAAA,GAAG,EAAE,GADa;AAElBC,EAAAA,KAAK,EAAE,GAFW;AAGlBC,EAAAA,MAAM,EAAE,KAAKC,YAHK;AAIlBC,EAAAA,KAAK,EAAE,MAAMD;AAJK;;IAQdE,UAAU,GAAG,SAAbA,UAAa,CAACC,IAAD,EAAOC,MAAP;AAAA,SAAkBC,WAAlB,uCACIT,WAAW,CAACO,IAAD,CADf,EAEbC,MAFa;AAAA;;;;;"} |