TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-20 17:32:15 +03:00
Code Issues Projects Releases Wiki Activity

Added global style for main action button

Browse Source 
no refs.
This commit is contained in:
Peter Zimon 2020-07-17 14:52:55 +02:00
parent a52afa8c2a
commit d0b9ff40f3
2 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ghost/portal/src/components/Frame.styles.js
View File

@ -1,4 +1,4 @@
/** By default, CRA's webpack bundle combines and appends the main css at root level, so they are not applied inside iframe
/** By default, CRAs 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
*/
@ -92,7 +92,41 @@ export const SwitchStyle = `
}
`;
export const ButtonStyles = `
.gh-portal-btn {
position: relative;
display: inline-block;
padding: 0 1.8rem;
height: 44px;
border: 0;
font-size: 1.5rem;
line-height: 42px;
font-weight: 500;
letter-spacing: 0.2px;
text-align: center;
text-decoration: none;
white-space: nowrap;
border-radius: 5px;
cursor: pointer;
transition: .4s ease;
box-shadow: none;
user-select: none;
width: 100%;
}
.gh-portal-btn:hover::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.08);
border-radius: 5px;
}
`;
// Append all styles as string which we want to pass to iframe
const FrameStyle = SwitchStyle;
const FrameStyle = SwitchStyle + ButtonStyles;
export default FrameStyle;

19
ghost/portal/src/components/common/ActionButton.js
View File

@ -13,25 +13,8 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
const textColor = getContrastColor(backgroundColor);
return {
button: {
display: 'inline-block',
padding: '0 1.8rem',
height: '44px',
border: '0',
fontSize: '1.5rem',
lineHeight: '42px',
fontWeight: '500',
letterSpacing: '0.2px',
textAlign: 'center',
textDecoration: 'none',
whiteSpace: 'nowrap',
borderRadius: '5px',
cursor: 'pointer',
transition: '.4s ease',
color: textColor,
backgroundColor,
boxShadow: 'none',
userSelect: 'none',
width: '100%',
...(style.button || {}) // Override any custom style
}
};
@ -40,7 +23,7 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
function ActionButton({label, onClick, disabled, retry, brandColor, style}) {
let Style = Styles({disabled, retry, brandColor, style});
return (
<button onClick={e => onClick(e)} style={Style.button} disabled={disabled}>
<button onClick={e => onClick(e)} style={Style.button} className="gh-portal-btn gh-portal-btn-primary" disabled={disabled}>
{label}
</button>
);