mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 11:22:19 +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
|
||||
*/
|
||||
|
||||
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);
|
||||
}
|
||||
`;
|
||||
|
||||
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;
|
||||
}
|
||||
`;
|
||||
import {ActionButtonStyles} from './common/ActionButton';
|
||||
import {SwitchStyles} from './common/Switch';
|
||||
|
||||
// Append all styles as string which we want to pass to iframe
|
||||
const FrameStyle = SwitchStyle + ButtonStyles;
|
||||
const FrameStyle =
|
||||
SwitchStyles +
|
||||
ActionButtonStyles;
|
||||
|
||||
export default FrameStyle;
|
||||
@ -1,6 +1,40 @@
|
||||
import React from 'react';
|
||||
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 = {}}) => {
|
||||
let backgroundColor = (brandColor || '#3eb0ef');
|
||||
if (retry) {
|
||||
|
||||
@ -1,5 +1,92 @@
|
||||
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}) {
|
||||
return (
|
||||
<div className="for-switch">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user