Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-25 02:31:59 -05:00
Code Issues Activity

Added small style hack to insert css inside iframe components

Browse source 
no issue

-  By default, CRA's webpack bundle combines and appends the main css at root level, so they are not applied inside any iframe.
- JSX Styles don't work for `:hover` and other similar selectors which is needed to style certain components like checkboxes
- This uses a hack where we append `<style> </style>` tag with all CSS inside the head of iframe dynamically as string
- We can create separate variables to keep styles grouped logically, and export them as one appended style string to apply styles in iframe.
This commit is contained in:
Rish 2020-05-01 16:03:07 +05:30
parent d4f604d091
commit a373239fcb
2 changed files with 106 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
ghost/portal/src/components/Frame.styles.js Normal file
View file

@ -0,0 +1,98 @@
/** By default, CRA's webpack bundle combines and appends the main css at root level, so they are not applied inside iframe
* This uses a hack where we append `<style> </style>` tag with all CSS inside the head of iframe dynamically, thus making it available easily
* We can create separate variables to keep styles grouped logically, and export them as one appeneded string
*/
export const SwitchStyle = `
/* Switch
/* ---------------------------------------------------------- */
.for-switch label,
.for-switch .container {
cursor: pointer;
position: relative;
display: inline-block;
width: 50px !important;
height: 28px !important;
}
.for-switch label p,
.for-switch .container p {
overflow: auto;
color: #15171A;
font-weight: normal;
}
.for-switch input {
opacity: 0;
width: 0;
height: 0;
}
.for-switch .input-toggle-component {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #e5eff5;
border: 1px solid #dae8f1;
transition: .3s;
width: 50px !important;
height: 28px !important;
border-radius: 999px;
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.for-switch label:hover input:not(:checked) + .input-toggle-component,
.for-switch .container:hover input:not(:checked) + .input-toggle-component {
border-color: #c5d7e2;
}
.for-switch .input-toggle-component:before {
position: absolute;
content: "";
height: 22px !important;
width: 22px !important;
left: 2px !important;
top: 2px !important;
background-color: white;
transition: .3s;
box-shadow: 0 0 1px rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.2);
border-radius: 999px;
}
.for-switch input:checked + .input-toggle-component {
background: #a4d037;
border-color: transparent;
}
.for-switch input:checked + .input-toggle-component:before {
transform: translateX(22px);
}
.for-switch .container {
width: 38px !important;
height: 22px !important;
}
.for-switch.small .input-toggle-component {
width: 38px !important;
height: 22px !important;
}
.for-switch.small .input-toggle-component:before {
height: 16px !important;
width: 16px !important;
box-shadow: 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.1);
}
.for-switch.small input:checked + .input-toggle-component:before {
transform: translateX(16px);
}
`;
// Append all styles as string which we want to pass to iframe
const FrameStyle = SwitchStyle;
export default FrameStyle;

9
ghost/portal/src/components/PopupModal.js
View file

@ -6,6 +6,7 @@ import MagicLinkPage from './pages/MagicLinkPage';
import LoadingPage from './pages/LoadingPage';
import {ReactComponent as CloseIcon} from '../images/icons/close.svg';
import {ParentContext} from './ParentContext';
import FrameStyle from './Frame.styles';
const React = require('react');
@ -129,6 +130,12 @@ export default class PopupModal extends React.Component {
}
}
renderFrameStyles() {
return (
<style dangerouslySetInnerHTML={{__html: FrameStyle}} />
);
}
renderFrameContainer() {
const page = this.context.page;
const frameStyle = {
@ -137,7 +144,7 @@ export default class PopupModal extends React.Component {
};
return (
<div style={Styles.modalContainer} onClick = {e => this.handlePopupClose(e)}>
<Frame style={frameStyle} title="membersjs-popup">
<Frame style={frameStyle} title="membersjs-popup" head={this.renderFrameStyles()}>
{this.renderPopupContent()}
</Frame>
</div>