mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-30 22:34:01 -05:00
More improvements
This commit is contained in:
Sodbileg Gansukh
parent
b5e638588a
commit
c62bafd8dd
11 changed files with 100 additions and 20 deletions
|
|
@ -41,6 +41,7 @@ const Form: React.FC<FormProps> = ({
|
|||
if (marginBottom) {
|
||||
classes = clsx(
|
||||
classes,
|
||||
(margins === 'xs' && 'mb-4'),
|
||||
(margins === 'sm' && 'mb-7'),
|
||||
(margins === 'md' && 'mb-10'),
|
||||
(margins === 'lg' && 'mb-12')
|
||||
|
|
@ -50,6 +51,7 @@ const Form: React.FC<FormProps> = ({
|
|||
if (marginTop) {
|
||||
classes = clsx(
|
||||
classes,
|
||||
(margins === 'xs' && 'mt-4'),
|
||||
(margins === 'sm' && 'mt-7'),
|
||||
(margins === 'md' && 'mt-10'),
|
||||
(margins === 'lg' && 'mt-12')
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ const Modal: React.FC<ModalProps> = ({
|
|||
|
||||
const buttons: ButtonProps[] = [];
|
||||
|
||||
let contentClasses;
|
||||
let contentClasses = '[&_p]:text-pretty';
|
||||
|
||||
const removeModal = () => {
|
||||
confirmIfDirty(dirty, () => {
|
||||
|
|
@ -196,7 +196,7 @@ const Modal: React.FC<ModalProps> = ({
|
|||
align === 'center' && 'mx-auto',
|
||||
align === 'left' && 'mr-auto',
|
||||
align === 'right' && 'ml-auto',
|
||||
size !== 'bleed' && 'rounded',
|
||||
size !== 'bleed' && 'rounded-xl',
|
||||
formSheet ? 'shadow-md' : 'shadow-xl',
|
||||
(animate && !formSheet && !animationFinished && align === 'center') && 'animate-modal-in',
|
||||
(animate && !formSheet && !animationFinished && align === 'right') && 'animate-modal-in-from-right',
|
||||
|
|
@ -342,6 +342,7 @@ const Modal: React.FC<ModalProps> = ({
|
|||
);
|
||||
|
||||
contentClasses = clsx(
|
||||
contentClasses,
|
||||
paddingClasses,
|
||||
'py-0'
|
||||
);
|
||||
|
|
|
|||
|
|
@ -83,7 +83,9 @@ const AddNewsletterModal: React.FC<RoutingModalProps> = () => {
|
|||
}}
|
||||
>
|
||||
<Form
|
||||
gap='sm'
|
||||
marginBottom={false}
|
||||
margins='sm'
|
||||
marginTop
|
||||
>
|
||||
<TextField
|
||||
|
|
|
|||
|
|
@ -220,7 +220,6 @@ const InviteUserModal = NiceModal.create(() => {
|
|||
id='role'
|
||||
options={allowedRoleOptions}
|
||||
selectedOption={role}
|
||||
separator={true}
|
||||
title="Role"
|
||||
onSelect={(value) => {
|
||||
setRole(value as RoleType);
|
||||
|
|
|
|||
|
|
@ -194,6 +194,7 @@ const AddRecommendationModal: React.FC<RoutingModalProps & AddRecommendationModa
|
|||
<p className="mt-4">You can recommend <strong>any site</strong> your audience will find valuable, not just those published on Ghost.</p>
|
||||
<Form
|
||||
marginBottom={false}
|
||||
margins='xs'
|
||||
marginTop
|
||||
>
|
||||
<TextField
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@
|
|||
<div class="modal-footer">
|
||||
{{#if (eq this.state 'INIT')}}
|
||||
<button class="gh-btn" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
|
||||
<span>Close</span>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
@disabled={{false}}
|
||||
@update={{this.updateExpiry}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
<span class="ember-power-select-status-icon"></span>
|
||||
</span>
|
||||
{{#if (eq this.expiryAt "custom")}}
|
||||
<GhDatePicker
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
<div class="modal-body">
|
||||
<p>
|
||||
Hey there! It looks like you didn't save the changes you made.
|
||||
<br>
|
||||
Save before you go!
|
||||
</p>
|
||||
|
||||
<p>Save before you go!</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
--epm-animation-modal-out: var(--epm-animation-modal-out-duration) ease-out
|
||||
var(--epm-animation-modal-out-delay) forwards epm-modal-out;
|
||||
--epm-backdrop-opacity: 0.6;
|
||||
--epm-backdrop-background: #15171A;
|
||||
--epm-backdrop-background: #626d7933;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
|
@ -67,8 +67,9 @@
|
|||
align-items: unset;
|
||||
}
|
||||
|
||||
.epm-modal-container,
|
||||
.epm-modal-container.background-blur {
|
||||
backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.epm-animating .epm-modal-container {
|
||||
|
|
@ -169,7 +170,7 @@
|
|||
padding: 32px;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
|
||||
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
|
||||
|
|
@ -186,8 +187,8 @@
|
|||
|
||||
.modal-content .close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
z-index: 9999;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -208,12 +209,12 @@
|
|||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
margin-bottom: 22px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.modal-header h1 {
|
||||
display: inline-block;
|
||||
margin: -5px 25px 0 0;
|
||||
margin: -5px 32px 0 0;
|
||||
font-size: 2.4rem;
|
||||
line-height: 1.25em;
|
||||
font-weight: 700;
|
||||
|
|
@ -254,6 +255,11 @@
|
|||
font-size: 1.4rem;
|
||||
line-height: 1.5em;
|
||||
color: var(--black);
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.modal-body label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal-body .gh-input {
|
||||
|
|
@ -266,11 +272,64 @@
|
|||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.modal-body .gh-input,
|
||||
.modal-body select,
|
||||
.modal-body .gh-date-time-picker-date,
|
||||
.modal-body .gh-date-time-picker-time,
|
||||
.modal-body .ember-power-select-multiple-trigger {
|
||||
min-height: 38px;
|
||||
padding: 4px 12px;
|
||||
font-size: 1.4rem;
|
||||
color: var(--black);
|
||||
background-color: var(--grey-150);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
transition-property: color, background-color,border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(.4,0,.2,1);
|
||||
transition-duration: .15s;
|
||||
}
|
||||
|
||||
.modal-body .gh-input:hover,
|
||||
.modal-body select:hover,
|
||||
.modal-body .gh-date-time-picker-date:hover,
|
||||
.modal-body .gh-date-time-picker-time:hover,
|
||||
.modal-body .ember-power-select-multiple-trigger:hover {
|
||||
background-color: var(--grey-100);
|
||||
}
|
||||
|
||||
.modal-body .gh-input:focus,
|
||||
.modal-body .gh-input:focus-visible,
|
||||
.modal-body .ember-basic-dropdown-trigger[aria-expanded=true] .gh-date-time-picker-date,
|
||||
.modal-body .gh-date-time-picker-time:focus-within {
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--green);
|
||||
box-shadow: 0 0 0 2px rgba(48,207,67,.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-body .gh-select .ember-power-select-status-icon {
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
margin-top: -5px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-color: var(--black);
|
||||
}
|
||||
|
||||
.modal-body .for-checkbox .input-toggle-component {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.modal-body .gh-input-group .gh-input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.modal-body .gh-input-group .gh-btn {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -282,12 +341,25 @@
|
|||
}
|
||||
|
||||
.modal-footer .gh-btn {
|
||||
min-width: 100px;
|
||||
min-width: auto;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
transition: all .15s cubic-bezier(.4,0,.2,1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.modal-footer .gh-btn:not(^="gh-btn-") {
|
||||
border-color: var(--grey-300);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.modal-footer .gh-btn:not(:first-child) {
|
||||
margin-left: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.modal-footer .gh-btn:hover {
|
||||
border-color: var(--black);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.modal-footer-hint {
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
left: 0;
|
||||
z-index: 50;
|
||||
height: 100vh;
|
||||
background: #15171A;
|
||||
opacity: 0.6;
|
||||
background: #626d7933;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.fullscreen-modal {
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
padding: 32px;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border-radius: 4px;
|
||||
border-radius: 12px;
|
||||
box-shadow:
|
||||
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
|
||||
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
|
||||
|
|
|
|||
|
|
@ -116,17 +116,20 @@ fieldset[disabled] .gh-btn {
|
|||
color: #fff;
|
||||
fill: #fff;
|
||||
background: var(--green);
|
||||
border-color: var(--green);
|
||||
}
|
||||
|
||||
.gh-btn-green:hover {
|
||||
color: #fff !important;
|
||||
background: color-mod(var(--green) l(-4%)) !important;
|
||||
border-color: color-mod(var(--green) l(-4%)) !important;
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-green:active,
|
||||
.gh-btn-green:focus {
|
||||
background: color-mod(var(--green) l(-7%)) !important;
|
||||
border-color: color-mod(var(--green) l(-7%)) !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -713,4 +716,4 @@ Usage: CTA buttons grouped together horizontally.
|
|||
margin: 0 !important;
|
||||
border-radius: 999px !important;
|
||||
border: 1px solid var(--main-bg-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue