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

Updated switch and button styles

Browse Source 
no refs.
- applied namespace to switch and button styles
This commit is contained in:
Peter Zimon 2020-07-20 15:34:48 +02:00
parent 5021689e16
commit 81ea9427f2
2 changed files with 77 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import React from 'react';
import getContrastColor from '../../utils/contrast-color';
export const ActionButtonStyles = `
.gh-portal-btn {
.ghp-btn {
position: relative;
display: inline-block;
padding: 0 1.8rem;
@ -23,7 +23,7 @@ export const ActionButtonStyles = `
width: 100%;
}
.gh-portal-btn:hover::before {
.ghp-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="gh-portal-btn gh-portal-btn-primary" disabled={disabled}>
<button onClick={e => onClick(e)} style={Style.button} className="ghp-btn ghp-btn-primary" disabled={disabled}>
{label}
</button>
);

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

@ -1,95 +1,95 @@
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;
}
.ghp-for-switch label,
.ghp-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;
}
.ghp-for-switch label p,
.ghp-for-switch .container p {
overflow: auto;
color: #15171A;
font-weight: normal;
}
.for-switch input {
opacity: 0;
width: 0;
height: 0;
}
.ghp-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;
}
.ghp-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;
}
.ghp-for-switch label:hover input:not(:checked) + .input-toggle-component,
.ghp-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;
}
.ghp-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;
}
.ghp-for-switch input:checked + .input-toggle-component {
background: #a4d037;
border-color: transparent;
}
.for-switch input:checked + .input-toggle-component:before {
transform: translateX(22px);
}
.ghp-for-switch input:checked + .input-toggle-component:before {
transform: translateX(22px);
}
.for-switch .container {
width: 38px !important;
height: 22px !important;
}
.ghp-for-switch .container {
width: 38px !important;
height: 22px !important;
}
.for-switch.small .input-toggle-component {
width: 38px !important;
height: 22px !important;
}
.ghp-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);
}
.ghp-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);
}
.ghp-for-switch.small input:checked + .input-toggle-component:before {
transform: translateX(16px);
}
`;
function Switch({id, label, onToggle, checked = false}) {
return (
<div className="for-switch">
<div className="ghp-for-switch">
<label className="switch" htmlFor={id}>
<input
type="checkbox"