Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Refactored email-preview header styles

Browse source 
no issue

- adjusted centering behaviour to remove hardcoded fixed widths
- adjusted button styling to account for having more than 2 buttons in the button group
This commit is contained in:
Kevin Ansfield 2021-01-21 20:11:06 +00:00 • committed by Daniel Lockyer
parent 91d1a4edd0
commit 0f30260150
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ghost/admin/app/styles/layouts/preview-email.css
View file

@ -21,7 +21,7 @@
right: 0; right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
margin: 0; margin: 0;
padding: 18px 32px; padding: 18px 32px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
@ -35,8 +35,13 @@
} }
.gh-pe-header h2 { .gh-pe-header h2 {
width: calc(50vw - 200px);
margin: 0; margin: 0;
margin-right: auto;
flex: 1;
}
.gh-pe-header .gh-btn-group {
flex: 1;
} }
.gh-pe-header-border { .gh-pe-header-border {
@ -44,7 +49,8 @@
} }
.gh-pe-close { .gh-pe-close {
width: calc(50vw - 200px) margin-left: auto;
flex: 1;
} }
.modal-content .gh-pe-close button { .modal-content .gh-pe-close button {
@ -64,18 +70,19 @@
.gh-pe-btn-group button span { .gh-pe-btn-group button span {
border: 1px solid var(--whitegrey); border: 1px solid var(--whitegrey);
border-radius: 0;
} }
.gh-pe-btn-group button:first-of-type span { .gh-pe-btn-group button:first-of-type span {
border-right: none; border-right: none;
border-top-right-radius: 0; border-top-left-radius: 5px;
border-bottom-right-radius: 0; border-bottom-left-radius: 5px;
} }
.gh-pe-btn-group button:last-of-type span { .gh-pe-btn-group button:last-of-type span {
border-left: none; border-left: none;
border-top-left-radius: 0; border-top-right-radius: 5px;
border-bottom-left-radius: 0; border-bottom-right-radius: 5px;
} }
.fullscreen-modal-email-preview .gh-pe-desktop-container { .fullscreen-modal-email-preview .gh-pe-desktop-container {
@ -94,7 +101,7 @@
width: 100%; width: 100%;
padding: 0; padding: 0;
background: var(--white); background: var(--white);
box-shadow: box-shadow:
0 0 0 1px rgba(0,0,0,0.02), 0 0 0 1px rgba(0,0,0,0.02),
0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 6.7px 5.3px rgba(0, 0, 0, 0.028),
@ -153,7 +160,7 @@
border-radius: 40px; border-radius: 40px;
display: flex; display: flex;
background: var(--whitegrey-l2); background: var(--whitegrey-l2);
box-shadow: box-shadow:
0 0 0 1px rgba(0,0,0,0.02), 0 0 0 1px rgba(0,0,0,0.02),
0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 6.7px 5.3px rgba(0, 0, 0, 0.028),