{"ast":null,"code":"import * as polished from 'polished';\nimport { createGlobalStyle, keyframes } from 'styled-components';\nimport vdlIcon from '!!css-loader!~/public/style/vdl-icon.css';\nexport { default as styled } from 'styled-components';\nexport * from 'styled-components';\nexport * from 'polished'; // rename conflict shorthands\n\nexport { borderRadius as borderRadiusShortHand, borderColor as borderColorShortHand } from 'polished';\nconst {\n  math,\n  size,\n  lighten,\n  darken,\n  normalize,\n  fontFace,\n  transitions,\n  border,\n  position\n} = polished; // sizes\n\nconst fontSize = '14px';\nexport const rem = pxval => polished.rem(pxval, fontSize);\nexport const em = (pxval, base) => polished.em(pxval, base || fontSize);\nexport const half = value => math(`(${value}) / 2`);\nexport const headerHeight = rem(60);\nexport const asideWidth = rem(260);\nexport const borderRadius = '4px';\nexport const progressSpinnerSize = '20px'; // colors\n\nexport const primaryColor = '#2932E1';\nexport const dangerColor = '#FF3912';\nexport const primaryFocusedColor = lighten(0.08, primaryColor);\nexport const primaryActiveColor = lighten(0.12, primaryColor);\nexport const dangerFocusedColor = lighten(0.08, dangerColor);\nexport const dangerActiveColor = lighten(0.12, dangerColor);\nexport const selectedColor = '#1A73E8';\nexport const lightColor = '#F4F5FC';\nexport const lightFocusedColor = darken(0.03, lightColor);\nexport const lightActiveColor = darken(0.06, lightColor);\nexport const textColor = '#333';\nexport const textLightColor = '#666';\nexport const textLighterColor = '#999';\nexport const textInvertColor = '#FFF';\nexport const bodyBackgroundColor = '#F4F4F4';\nexport const backgroundColor = '#FFF';\nexport const backgroundFocusedColor = '#F6F6F6';\nexport const borderColor = '#DDD';\nexport const borderFocusedColor = darken(0.15, borderColor);\nexport const navbarBackgroundColor = '#1527C2';\nexport const navbarHoverBackgroundColor = lighten(0.05, navbarBackgroundColor);\nexport const navbarHighlightColor = '#596cd6';\nexport const progressBarColor = '#FFF';\nexport const maskColor = 'rgba(255, 255, 255, 0.8)'; // transitions\n\nexport const duration = '75ms';\nexport const easing = 'ease-in'; // mixins\n\nexport const sameBorder = (width = '1px', type = 'solid', color = borderColor, radius) => {\n  if ('object' === typeof width) {\n    var _width$type, _width$color, _width$width;\n\n    type = (_width$type = width.type) !== null && _width$type !== void 0 ? _width$type : 'solid';\n    color = (_width$color = width.color) !== null && _width$color !== void 0 ? _width$color : borderColor;\n    radius = width.radius === true ? borderRadius : width.radius;\n    width = (_width$width = width.width) !== null && _width$width !== void 0 ? _width$width : '1px';\n  }\n\n  return Object.assign({}, border(width, type, color), radius ? {\n    borderRadius: radius === true ? borderRadius : radius\n  } : undefined);\n};\nexport const transitionProps = (props, args) => {\n  if ('string' === typeof props) {\n    props = [props];\n  }\n\n  if (!args) {\n    args = `${duration} ${easing}`;\n  }\n\n  return transitions(props, args);\n};\nconst spinner = keyframes([\"0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}\"]);\n// prettier-ignore\nexport const GlobalStyle = createGlobalStyle`\n    ${normalize}\n\n    ${fontFace({\n  fontFamily: 'vdl-icon',\n  fontFilePath: `${process.env.PUBLIC_PATH}/style/fonts/vdl-icon`,\n  fileFormats: ['ttf', 'woff', 'svg'],\n  fontWeight: 'normal',\n  fontStyle: 'normal',\n  fontDisplay: 'block'\n})}\n\n    ${vdlIcon.toString()}\n\n    html {\n        font-size: ${fontSize};\n        font-family: 'Merriweather Sans', Helvetica, Arial, sans-serif;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n    }\n\n    html,\n    body {\n        height: 100%;\n        background-color: ${bodyBackgroundColor};\n        color: ${textColor};\n    }\n\n    a {\n        text-decoration: none;\n        color: inherit;\n\n        &:visited {\n            color: currentColor;\n        }\n    }\n\n    * {\n        box-sizing: border-box;\n    }\n\n    #nprogress {\n        pointer-events: none;\n    }\n\n    #nprogress .bar {\n        background: ${progressBarColor};\n        z-index: 99999;\n        ${position('fixed', 0, null, null, 0)}\n        ${size('2px', '100%')}\n    }\n\n    #nprogress .peg {\n        display: block;\n        ${position('absolute', null, 0, null, null)}\n        ${size('100%', rem(100))}\n        box-shadow: 0 0 rem(10) ${progressBarColor}, 0 0 ${rem(5)} ${progressBarColor};\n        opacity: 1;\n        transform: rotate(3deg) translate(0px, -${rem(4)});\n    }\n\n    #nprogress .spinner {\n        display: block;\n        z-index: 99999;\n        ${position('fixed', progressSpinnerSize, progressSpinnerSize, null, null)}\n    }\n\n    #nprogress .spinner-icon {\n        ${size(`calc(${half(headerHeight)} - ${half(progressSpinnerSize)})`)}\n        box-sizing: border-box;\n\n        border: solid 2px transparent;\n        border-top-color: ${progressBarColor};\n        border-left-color: ${progressBarColor};\n        border-radius: 50%;\n\n        animation: ${spinner} 400ms linear infinite;\n    }\n\n    .nprogress-custom-parent {\n        overflow: hidden;\n        position: relative;\n    }\n\n    .nprogress-custom-parent #nprogress .spinner,\n    .nprogress-custom-parent #nprogress .bar {\n        position: absolute;\n    }\n`;","map":null,"metadata":{},"sourceType":"module"}