mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +03:00
Distributed CSS in JS styles to components
no refs. - moved switch and action button styles to their respective components to tidy up the style structure
This commit is contained in:
Peter Zimon
parent
d0b9ff40f3
commit
2b49f6d08a
@ -3,130 +3,12 @@
|
|||||||
* We can create separate variables to keep styles grouped logically, and export them as one appeneded string
|
* We can create separate variables to keep styles grouped logically, and export them as one appeneded string
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const SwitchStyle = `
|
import {ActionButtonStyles} from './common/ActionButton';
|
||||||
/* Switch
|
import {SwitchStyles} from './common/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);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
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
|
// Append all styles as string which we want to pass to iframe
|
||||||
const FrameStyle = SwitchStyle + ButtonStyles;
|
const FrameStyle =
|
||||||
|
SwitchStyles +
|
||||||
|
ActionButtonStyles;
|
||||||
|
|
||||||
export default FrameStyle;
|
export default FrameStyle;
|
||||||
@ -1,6 +1,40 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import getContrastColor from '../../utils/contrast-color';
|
import getContrastColor from '../../utils/contrast-color';
|
||||||
|
|
||||||
|
export const ActionButtonStyles = `
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
const Styles = ({brandColor, retry, disabled, style = {}}) => {
|
const Styles = ({brandColor, retry, disabled, style = {}}) => {
|
||||||
let backgroundColor = (brandColor || '#3eb0ef');
|
let backgroundColor = (brandColor || '#3eb0ef');
|
||||||
if (retry) {
|
if (retry) {
|
||||||
|
|||||||
@ -1,5 +1,92 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
export const SwitchStyles = `
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
function Switch({id, label, onToggle, checked = false}) {
|
function Switch({id, label, onToggle, checked = false}) {
|
||||||
return (
|
return (
|
||||||
<div className="for-switch">
|
<div className="for-switch">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user