mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-29 22:01:49 +03:00
Changed style namespace
no refs. - changed style namespace from `ghp` to `gh-portal`
This commit is contained in:
parent
eb8ad7b493
commit
cfe6829538
@ -98,13 +98,13 @@ export const GlobalStyles = `
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.ghp-main-title {
|
||||
.gh-portal-main-title {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Global layout styles
|
||||
/* ----------------------------------------------------- */
|
||||
.ghp-popup-container {
|
||||
.gh-portal-popup-container {
|
||||
width: 100%;
|
||||
letter-spacing: 0;
|
||||
text-rendering: optimizeLegibility;
|
||||
@ -124,13 +124,13 @@ export const GlobalStyles = `
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ghp-closeicon-container {
|
||||
.gh-portal-closeicon-container {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.ghp-closeicon {
|
||||
.gh-portal-closeicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #999;
|
||||
@ -138,7 +138,7 @@ export const GlobalStyles = `
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.ghp-section {
|
||||
.gh-portal-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
`;
|
||||
|
@ -146,8 +146,8 @@ class PopupContent extends React.Component {
|
||||
|
||||
renderPopupClose() {
|
||||
return (
|
||||
<div className='ghp-closeicon-container'>
|
||||
<CloseIcon className='ghp-closeicon' onClick = {() => this.context.onAction('closePopup')} />
|
||||
<div className='gh-portal-closeicon-container'>
|
||||
<CloseIcon className='gh-portal-closeicon' onClick = {() => this.context.onAction('closePopup')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -155,7 +155,7 @@ class PopupContent extends React.Component {
|
||||
render() {
|
||||
const page = this.getCurrentPage();
|
||||
return (
|
||||
<div className='ghp-popup-container' ref={this.container}>
|
||||
<div className='gh-portal-popup-container' ref={this.container}>
|
||||
{this.renderPopupClose()}
|
||||
{this.renderCurrentPage(page)}
|
||||
</div>
|
||||
@ -187,8 +187,8 @@ export default class PopupModal extends React.Component {
|
||||
|
||||
renderPopupClose() {
|
||||
return (
|
||||
<div className='ghp-closeicon-container'>
|
||||
<CloseIcon className='ghp-closeicon' onClick = {() => this.context.onAction('closePopup')} />
|
||||
<div className='gh-portal-closeicon-container'>
|
||||
<CloseIcon className='gh-portal-closeicon' onClick = {() => this.context.onAction('closePopup')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -196,7 +196,7 @@ export default class PopupModal extends React.Component {
|
||||
renderPopupContent() {
|
||||
const page = this.getCurrentPage();
|
||||
return (
|
||||
<div className='ghp-popup-container'>
|
||||
<div className='gh-portal-popup-container'>
|
||||
{this.renderPopupClose()}
|
||||
{this.renderCurrentPage(page)}
|
||||
</div>
|
||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import getContrastColor from '../../utils/contrast-color';
|
||||
|
||||
export const ActionButtonStyles = `
|
||||
.ghp-btn {
|
||||
.gh-portal-btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 1.8rem;
|
||||
@ -23,7 +23,7 @@ export const ActionButtonStyles = `
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ghp-btn:hover::before {
|
||||
.gh-portal-btn:hover::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
@ -57,7 +57,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} 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}
|
||||
</button>
|
||||
);
|
||||
|
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
|
||||
export const SwitchStyles = `
|
||||
.ghp-for-switch label,
|
||||
.ghp-for-switch .container {
|
||||
.gh-portal-for-switch label,
|
||||
.gh-portal-for-switch .container {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -10,20 +10,20 @@ export const SwitchStyles = `
|
||||
height: 28px !important;
|
||||
}
|
||||
|
||||
.ghp-for-switch label p,
|
||||
.ghp-for-switch .container p {
|
||||
.gh-portal-for-switch label p,
|
||||
.gh-portal-for-switch .container p {
|
||||
overflow: auto;
|
||||
color: #15171A;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ghp-for-switch input {
|
||||
.gh-portal-for-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.ghp-for-switch .input-toggle-component {
|
||||
.gh-portal-for-switch .input-toggle-component {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
@ -39,12 +39,12 @@ export const SwitchStyles = `
|
||||
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,
|
||||
.ghp-for-switch .container:hover input:not(:checked) + .input-toggle-component {
|
||||
.gh-portal-for-switch label:hover input:not(:checked) + .input-toggle-component,
|
||||
.gh-portal-for-switch .container:hover input:not(:checked) + .input-toggle-component {
|
||||
border-color: #c5d7e2;
|
||||
}
|
||||
|
||||
.ghp-for-switch .input-toggle-component:before {
|
||||
.gh-portal-for-switch .input-toggle-component:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 22px !important;
|
||||
@ -57,39 +57,39 @@ export const SwitchStyles = `
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.ghp-for-switch input:checked + .input-toggle-component {
|
||||
.gh-portal-for-switch input:checked + .input-toggle-component {
|
||||
background: #a4d037;
|
||||
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);
|
||||
}
|
||||
|
||||
.ghp-for-switch .container {
|
||||
.gh-portal-for-switch .container {
|
||||
width: 38px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
.ghp-for-switch.small .input-toggle-component {
|
||||
.gh-portal-for-switch.small .input-toggle-component {
|
||||
width: 38px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
.ghp-for-switch.small .input-toggle-component:before {
|
||||
.gh-portal-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);
|
||||
}
|
||||
|
||||
.ghp-for-switch.small input:checked + .input-toggle-component:before {
|
||||
.gh-portal-for-switch.small input:checked + .input-toggle-component:before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
`;
|
||||
|
||||
function Switch({id, label, onToggle, checked = false}) {
|
||||
return (
|
||||
<div className="ghp-for-switch">
|
||||
<div className="gh-portal-for-switch">
|
||||
<label className="switch" htmlFor={id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
|
@ -7,7 +7,7 @@ import isPreviewMode from '../../utils/is-preview-mode';
|
||||
const React = require('react');
|
||||
|
||||
export const AccountHomePageStyles = `
|
||||
.ghp-account-header {
|
||||
.gh-portal-account-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -61,9 +61,9 @@ const AccountFooter = ({onLogout, onSettings, brandColor}) => {
|
||||
const UserHeader = ({member}) => {
|
||||
const avatar = member.avatar_image;
|
||||
return (
|
||||
<div className='ghp-account-header'>
|
||||
<div className='gh-portal-account-header'>
|
||||
<UserAvatar avatar={avatar} />
|
||||
<h2 className="ghp-main-title">Your Account</h2>
|
||||
<h2 className="gh-portal-main-title">Your Account</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -107,7 +107,7 @@ class FreeAccountHomePage extends React.Component {
|
||||
const {title: siteTitle} = this.context.site;
|
||||
|
||||
return (
|
||||
<div className='ghp-section'>
|
||||
<div className='gh-portal-section'>
|
||||
<div style={{textAlign: 'center', marginBottom: '24px', fontSize: '15px', lineHeight: '1.6em'}}>
|
||||
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
|
||||
@ -142,7 +142,7 @@ class PaidAccountHomePage extends React.Component {
|
||||
const siteTitle = this.context.site.title;
|
||||
|
||||
return (
|
||||
<div className='ghp-section'>
|
||||
<div className='gh-portal-section'>
|
||||
<div style={{textAlign: 'center', marginBottom: '24px', fontSize: '15px'}}>
|
||||
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.
|
||||
|
Loading…
Reference in New Issue
Block a user