Cleaned up popup modal styles

no refs.
- moved a couple of styles that are inside the iframe to CSS classes

ghost/portal/src/components/Frame.styles.js

@@ -6,8 +6,118 @@
 import {ActionButtonStyles} from './common/ActionButton';
 import {SwitchStyles} from './common/Switch';
 
+// Global styles
+export const GlobalStyles = `
+    
+    /* Layout utilities
+    /* ----------------------------------------------------- */
+    .flex { display: flex; }
+    .inline-flex { display: inline-flex; }
+    
+    .flex-auto {
+        flex: 1 1 auto;
+        min-width: 0; /* 1 */
+        min-height: 0; /* 1 */
+    }
+    
+    .flex-none { flex: none; }
+    
+    .flex-column  { flex-direction: column; }
+    .flex-row     { flex-direction: row; }
+    .flex-wrap    { flex-wrap: wrap; }
+    .flex-nowrap    { flex-wrap: nowrap; }
+    .flex-wrap-reverse    { flex-wrap: wrap-reverse; }
+    .flex-column-reverse  { flex-direction: column-reverse; }
+    .flex-row-reverse     { flex-direction: row-reverse; }
+    
+    .items-start    { align-items: flex-start; }
+    .items-end      { align-items: flex-end; }
+    .items-center   { align-items: center; }
+    .items-baseline { align-items: baseline; }
+    .items-stretch  { align-items: stretch; }
+    
+    .self-start    { align-self: flex-start; }
+    .self-end      { align-self: flex-end; }
+    .self-center   { align-self: center; }
+    .self-baseline { align-self: baseline; }
+    .self-stretch  { align-self: stretch; }
+    
+    .justify-start   { justify-content: flex-start; }
+    .justify-end     { justify-content: flex-end; }
+    .justify-center  { justify-content: center; }
+    .justify-between { justify-content: space-between; }
+    .justify-around  { justify-content: space-around; }
+    
+    .content-start   { align-content: flex-start; }
+    .content-end     { align-content: flex-end; }
+    .content-center  { align-content: center; }
+    .content-between { align-content: space-between; }
+    .content-around  { align-content: space-around; }
+    .content-stretch { align-content: stretch; }
+    
+    .order-0 { order: 0; }
+    .order-1 { order: 1; }
+    .order-2 { order: 2; }
+    .order-3 { order: 3; }
+    .order-4 { order: 4; }
+    .order-5 { order: 5; }
+    .order-6 { order: 6; }
+    .order-7 { order: 7; }
+    .order-8 { order: 8; }
+    .order-last { order: 99999; }
+    
+    .flex-grow-0 { flex-grow: 0; }
+    .flex-grow-1 { flex-grow: 1; }
+    
+    .flex-shrink-0 { flex-shrink: 0; }
+    .flex-shrink-1 { flex-shrink: 1; }
+
+    .static { position: static; }
+    .relative  { position: relative; }
+    .absolute  { position: absolute; }
+    .fixed  { position: fixed; }
+    .sticky  { position: sticky; }
+
+    /* Global styles
+    /* ----------------------------------------------------- */
+    .ghp-popup-container {
+        width: 100%;
+        letter-spacing: 0;
+        text-rendering: optimizeLegibility;
+        font-size: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        top: 0px;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        overflow: hidden;
+        padding-top: 32px;
+        padding-bottom: 32px;
+        text-align: left;
+        box-sizing: border-box;
+        position: relative;
+    }
+
+    .ghp-closeicon-container {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+    }
+
+    .ghp-closeicon {
+        width: 16px;
+        height: 16px;
+        color: #999;
+        cursor: pointer;
+        padding: 12px;
+    }
+`;
+
 // Append all styles as string which we want to pass to iframe
 const FrameStyle = 
+    GlobalStyles +
     SwitchStyles + 
     ActionButtonStyles;
 

ghost/portal/src/components/PopupModal.js

@@ -85,34 +85,6 @@ const StylesWrapper = ({member}) => {
             links: {
                 width: '600px'
             }
-        },
-        popup: {
-            container: {
-                width: '100%',
-                letterSpacing: '0',
-                textRendering: 'optimizeLegibility',
-                fontSize: '1.5rem',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'flex-start',
-                top: '0px',
-                bottom: '0px',
-                left: '0px',
-                right: '0px',
-                overflow: 'hidden',
-                paddingTop: '32px',
-                paddingBottom: '32px',
-                textAlign: 'left',
-                boxSizing: 'border-box',
-                position: 'relative'
-            },
-            closeIcon: {
-                width: '16px',
-                height: '16px',
-                color: '#999',
-                cursor: 'pointer',
-                padding: '12px'
-            }
         }
     };
 };
@@ -173,19 +145,17 @@ class PopupContent extends React.Component {
     }
 
     renderPopupClose() {
-        const Styles = StylesWrapper({});
         return (
-            <div style={{position: 'absolute', top: '8px', right: '8px'}}>
-                <CloseIcon style={Styles.popup.closeIcon} onClick = {() => this.context.onAction('closePopup')} />
+            <div className='ghp-closeicon-container'>
+                <CloseIcon className='ghp-closeicon' onClick = {() => this.context.onAction('closePopup')} />
             </div>
         );
     }
 
     render() {
         const page = this.getCurrentPage();
-        const Styles = StylesWrapper({});
         return (
-            <div style={Styles.popup.container} ref={this.container}>
+            <div className='ghp-popup-container' ref={this.container}>
                 {this.renderPopupClose()}
                 {this.renderCurrentPage(page)}
             </div>
@@ -216,19 +186,17 @@ export default class PopupModal extends React.Component {
     }
 
     renderPopupClose() {
-        const Styles = StylesWrapper({});
         return (
-            <div style={{position: 'absolute', top: '8px', right: '8px'}}>
-                <CloseIcon style={Styles.popup.closeIcon} onClick = {() => this.context.onAction('closePopup')} />
+            <div className='ghp-closeicon-container'>
+                <CloseIcon className='ghp-closeicon' onClick = {() => this.context.onAction('closePopup')} />
             </div>
         );
     }
 
     renderPopupContent() {
         const page = this.getCurrentPage();
-        const Styles = StylesWrapper({});
         return (
-            <div style={Styles.popup.container}>
+            <div className='ghp-popup-container'>
                 {this.renderPopupClose()}
                 {this.renderCurrentPage(page)}
             </div>