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

Changed style namespace

Browse Source 
no refs.
- changed style namespace from `ghp` to `gh-portal`
This commit is contained in:
Peter Zimon 2020-07-20 16:05:27 +02:00
parent eb8ad7b493
commit cfe6829538
5 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,13 +98,13 @@ export const GlobalStyles = `
letter-spacing: 0.2px; letter-spacing: 0.2px;
} }
.ghp-main-title { .gh-portal-main-title {
color: #333; color: #333;
} }
/* Global layout styles /* Global layout styles
/* ----------------------------------------------------- */ /* ----------------------------------------------------- */
.ghp-popup-container { .gh-portal-popup-container {
width: 100%; width: 100%;
letter-spacing: 0; letter-spacing: 0;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -124,13 +124,13 @@ export const GlobalStyles = `
position: relative; position: relative;
} }
.ghp-closeicon-container { .gh-portal-closeicon-container {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
} }
.ghp-closeicon { .gh-portal-closeicon {
width: 16px; width: 16px;
height: 16px; height: 16px;
color: #999; color: #999;
@ -138,7 +138,7 @@ export const GlobalStyles = `
padding: 12px; padding: 12px;
} }
.ghp-section { .gh-portal-section {
margin-bottom: 32px; margin-bottom: 32px;
} }
`; `;

12
ghost/portal/src/components/PopupModal.js
View File

@ -146,8 +146,8 @@ class PopupContent extends React.Component {
renderPopupClose() { renderPopupClose() {
return ( return (
<div className='ghp-closeicon-container'> <div className='gh-portal-closeicon-container'>
<CloseIcon className='ghp-closeicon' onClick = {() => this.context.onAction('closePopup')} /> <CloseIcon className='gh-portal-closeicon' onClick = {() => this.context.onAction('closePopup')} />
</div> </div>
); );
} }
@ -155,7 +155,7 @@ class PopupContent extends React.Component {
render() { render() {
const page = this.getCurrentPage(); const page = this.getCurrentPage();
return ( return (
<div className='ghp-popup-container' ref={this.container}> <div className='gh-portal-popup-container' ref={this.container}>
{this.renderPopupClose()} {this.renderPopupClose()}
{this.renderCurrentPage(page)} {this.renderCurrentPage(page)}
</div> </div>
@ -187,8 +187,8 @@ export default class PopupModal extends React.Component {
renderPopupClose() { renderPopupClose() {
return ( return (
<div className='ghp-closeicon-container'> <div className='gh-portal-closeicon-container'>
<CloseIcon className='ghp-closeicon' onClick = {() => this.context.onAction('closePopup')} /> <CloseIcon className='gh-portal-closeicon' onClick = {() => this.context.onAction('closePopup')} />
</div> </div>
); );
} }
@ -196,7 +196,7 @@ export default class PopupModal extends React.Component {
renderPopupContent() { renderPopupContent() {
const page = this.getCurrentPage(); const page = this.getCurrentPage();
return ( return (
<div className='ghp-popup-container'> <div className='gh-portal-popup-container'>
{this.renderPopupClose()} {this.renderPopupClose()}
{this.renderCurrentPage(page)} {this.renderCurrentPage(page)}
</div> </div>

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

@ -2,7 +2,7 @@ import React from 'react';
import getContrastColor from '../../utils/contrast-color'; import getContrastColor from '../../utils/contrast-color';
export const ActionButtonStyles = ` export const ActionButtonStyles = `
.ghp-btn { .gh-portal-btn {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 0 1.8rem; padding: 0 1.8rem;
@ -23,7 +23,7 @@ export const ActionButtonStyles = `
width: 100%; width: 100%;
} }
.ghp-btn:hover::before { .gh-portal-btn:hover::before {
position: absolute; position: absolute;
content: ""; content: "";
top: 0; top: 0;
@ -57,7 +57,7 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
function ActionButton({label, onClick, disabled, retry, brandColor, style}) { function ActionButton({label, onClick, disabled, retry, brandColor, style}) {
let Style = Styles({disabled, retry, brandColor, style}); let Style = Styles({disabled, retry, brandColor, style});
return ( return (
<button onClick={e => onClick(e)} style={Style.button} className="ghp-btn ghp-btn-primary" disabled={disabled}> <button onClick={e => onClick(e)} style={Style.button} className="gh-portal-btn gh-portal-btn-primary" disabled={disabled}>
{label} {label}
</button> </button>
); );

32
ghost/portal/src/components/common/Switch.js
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
export const SwitchStyles = ` export const SwitchStyles = `
.ghp-for-switch label, .gh-portal-for-switch label,
.ghp-for-switch .container { .gh-portal-for-switch .container {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -10,20 +10,20 @@ export const SwitchStyles = `
height: 28px !important; height: 28px !important;
} }
.ghp-for-switch label p, .gh-portal-for-switch label p,
.ghp-for-switch .container p { .gh-portal-for-switch .container p {
overflow: auto; overflow: auto;
color: #15171A; color: #15171A;
font-weight: normal; font-weight: normal;
} }
.ghp-for-switch input { .gh-portal-for-switch input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
.ghp-for-switch .input-toggle-component { .gh-portal-for-switch .input-toggle-component {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: 0; top: 0;
@ -39,12 +39,12 @@ export const SwitchStyles = `
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out; transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
} }
.ghp-for-switch label:hover input:not(:checked) + .input-toggle-component, .gh-portal-for-switch label:hover input:not(:checked) + .input-toggle-component,
.ghp-for-switch .container:hover input:not(:checked) + .input-toggle-component { .gh-portal-for-switch .container:hover input:not(:checked) + .input-toggle-component {
border-color: #c5d7e2; border-color: #c5d7e2;
} }
.ghp-for-switch .input-toggle-component:before { .gh-portal-for-switch .input-toggle-component:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 22px !important; height: 22px !important;
@ -57,39 +57,39 @@ export const SwitchStyles = `
border-radius: 999px; border-radius: 999px;
} }
.ghp-for-switch input:checked + .input-toggle-component { .gh-portal-for-switch input:checked + .input-toggle-component {
background: #a4d037; background: #a4d037;
border-color: transparent; border-color: transparent;
} }
.ghp-for-switch input:checked + .input-toggle-component:before { .gh-portal-for-switch input:checked + .input-toggle-component:before {
transform: translateX(22px); transform: translateX(22px);
} }
.ghp-for-switch .container { .gh-portal-for-switch .container {
width: 38px !important; width: 38px !important;
height: 22px !important; height: 22px !important;
} }
.ghp-for-switch.small .input-toggle-component { .gh-portal-for-switch.small .input-toggle-component {
width: 38px !important; width: 38px !important;
height: 22px !important; height: 22px !important;
} }
.ghp-for-switch.small .input-toggle-component:before { .gh-portal-for-switch.small .input-toggle-component:before {
height: 16px !important; height: 16px !important;
width: 16px !important; width: 16px !important;
box-shadow: 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.1); box-shadow: 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.1);
} }
.ghp-for-switch.small input:checked + .input-toggle-component:before { .gh-portal-for-switch.small input:checked + .input-toggle-component:before {
transform: translateX(16px); transform: translateX(16px);
} }
`; `;
function Switch({id, label, onToggle, checked = false}) { function Switch({id, label, onToggle, checked = false}) {
return ( return (
<div className="ghp-for-switch"> <div className="gh-portal-for-switch">
<label className="switch" htmlFor={id}> <label className="switch" htmlFor={id}>
<input <input
type="checkbox" type="checkbox"

10
ghost/portal/src/components/pages/AccountHomePage.js
View File

@ -7,7 +7,7 @@ import isPreviewMode from '../../utils/is-preview-mode';
const React = require('react'); const React = require('react');
export const AccountHomePageStyles = ` export const AccountHomePageStyles = `
.ghp-account-header { .gh-portal-account-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -61,9 +61,9 @@ const AccountFooter = ({onLogout, onSettings, brandColor}) => {
const UserHeader = ({member}) => { const UserHeader = ({member}) => {
const avatar = member.avatar_image; const avatar = member.avatar_image;
return ( return (
<div className='ghp-account-header'> <div className='gh-portal-account-header'>
<UserAvatar avatar={avatar} /> <UserAvatar avatar={avatar} />
<h2 className="ghp-main-title">Your Account</h2> <h2 className="gh-portal-main-title">Your Account</h2>
</div> </div>
); );
}; };
@ -107,7 +107,7 @@ class FreeAccountHomePage extends React.Component {
const {title: siteTitle} = this.context.site; const {title: siteTitle} = this.context.site;
return ( return (
<div className='ghp-section'> <div className='gh-portal-section'>
<div style={{textAlign: 'center', marginBottom: '24px', fontSize: '15px', lineHeight: '1.6em'}}> <div style={{textAlign: 'center', marginBottom: '24px', fontSize: '15px', lineHeight: '1.6em'}}>
Hey <span style={{fontWeight: '600'}}>{firstname || name || email}! </span> Hey <span style={{fontWeight: '600'}}>{firstname || name || email}! </span>
You are subscribed to free updates from <span style={{fontWeight: '600'}}>{siteTitle}</span>, but you don't have a paid subscription to unlock full access You are subscribed to free updates from <span style={{fontWeight: '600'}}>{siteTitle}</span>, but you don't have a paid subscription to unlock full access
@ -142,7 +142,7 @@ class PaidAccountHomePage extends React.Component {
const siteTitle = this.context.site.title; const siteTitle = this.context.site.title;
return ( return (
<div className='ghp-section'> <div className='gh-portal-section'>
<div style={{textAlign: 'center', marginBottom: '24px', fontSize: '15px'}}> <div style={{textAlign: 'center', marginBottom: '24px', fontSize: '15px'}}>
Hey <span style={{fontWeight: '600'}}>{firstname || name || email}! </span> Hey <span style={{fontWeight: '600'}}>{firstname || name || email}! </span>
You have an active <span style={{fontWeight: '600'}}>{siteTitle}</span> account with access to all areas. Get in touch if you have any problems or need some help getting things updated, and thanks for subscribing. You have an active <span style={{fontWeight: '600'}}>{siteTitle}</span> account with access to all areas. Get in touch if you have any problems or need some help getting things updated, and thanks for subscribing.