partial: migrate global styles

new-lamassu-admin/src/styling/global/index.js

@@ -1,72 +1,80 @@
 import { mainWidth } from 'src/styling/variables'
-
 import fonts from './fonts'
 
 const fill = '100%'
 
-export default {
-  '@global': {
-    ...fonts,
-    '#root': {
-      width: fill,
-      minHeight: fill
-    },
-    '.root-notifcenter-open': {
-      // for when notification center is open
-      overflowY: 'auto',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0
-    },
-    '.body-notifcenter-open': {
-      // for when notification center is open
-      overflow: 'hidden'
-    },
-    '.root-blur': {
-      filter: 'blur(1px)',
-      pointerEvents: 'none'
-    },
-    html: {
-      height: fill,
-      '@media screen and (max-height: 900px)': {
-        scrollbarGutter: 'stable'
-      }
-    },
-    body: {
-      width: mainWidth,
-      display: 'flex',
-      minHeight: fill,
-      '@media screen and (min-width: 1200px)': {
-        width: 'auto'
-      }
-    },
-    [`a::-moz-focus-inner,
-    'input[type="submit"]::-moz-focus-inner,
-    input[type="button"]::-moz-focus-inner`]: {
-      border: 0
-    },
-    [`a::-moz-focus-inner,
-      input[type="submit"]::-moz-focus-inner,
-      input[type="button"]::-moz-focus-inner`]: {
-      border: 0
-    },
-    [`a,
-    a:visited,
-    a:focus,
-    a:active,
-    a:hover`]: {
-      outline: '0 none'
-    },
-    'button::-moz-focus-inner': {
-      border: 0
-    },
-    // forcing styling onto inner container
-    '.ReactVirtualized__Grid__innerScrollContainer': {
-      overflow: 'inherit !important'
-    },
-    '.ReactVirtualized__Grid.ReactVirtualized__List': {
-      overflowY: 'overlay !important'
+export default `
+  ${fonts}
+  body {
+    font-size: 0.875rem;
+    width: ${mainWidth}px;
+    display: flex;
+    min-height: ${fill};
+    @media screen and (min-width: 1200px) {
+      width: auto;
     }
   }
-}
+  
+  html {
+    height: ${fill};
+    @media screen and (max-height: 900px) {
+      scrollbar-gutter: stable;
+    }
+  }
+  
+  #root {
+    width: ${fill};
+    minHeight: ${fill};
+  }
+  
+  .root-notifcenter-open {
+    // for when notification center is open
+    overflow-y: 'auto';
+    position: 'absolute';
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+  
+  .body-notifcenter-open {
+    // for when notification center is open
+    overflow: hidden;
+  }
+  
+  .root-blur {
+    filter: blur(1px);
+    pointer-events: none;
+  }
+  
+  a::-moz-focus-inner,
+  input[type="submit"]::-moz-focus-inner,
+  input[type="button"]::-moz-focus-inner {
+    border: 0;
+  }
+  
+  a::-moz-focus-inner,
+  input[type="submit"]::-moz-focus-inner,
+  input[type="button"]::-moz-focus-inner {
+    border: 0;
+  }
+  
+  a,
+  a:visited,
+  a:focus,
+  a:active,
+  a:hover {
+    outline: 0 none;
+  }
+  
+  button::-moz-focus-inner {
+    border: 0;
+  }
+  
+  // forcing styling onto inner container
+  .ReactVirtualized__Grid__innerScrollContainer {
+    overflow: inherit !important;
+  },
+  .ReactVirtualized__Grid.ReactVirtualized__List {
+    overflow-y: overlay !important;
+  }
+`