Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Added transitions to newsletter color pickers

Browse source 
Refs https://github.com/TryGhost/Team/issues/2830
This commit is contained in:
Sanne de Vries 2023-03-28 12:39:33 +02:00
parent 2e2b3c7c0f
commit 4cebceb0d8
2 changed files with 50 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
View file

@ -123,9 +123,10 @@
<label class="modal-fullsettings-title">Background color</label>
<div class="gh-email-design-color-picker">
<div class="gh-btn-group">
<button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
<button type="button" title="White" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
<p>White</p>
<button type="button" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" class="gh-btn gh-email-design-color black"></button>
<button type="button" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
</div>
</div>
</GhFormGroup>
@ -134,10 +135,11 @@
<label class="modal-fullsettings-title">Border color</label>
<div class="gh-email-design-color-picker">
<div class="gh-btn-group">
<button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
<button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
<button type="button" title="Transparent" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
<p>Transparent</p>
<button type="button" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" class="gh-btn gh-email-design-color accent"></button>
<button type="button" class="gh-btn gh-email-design-color black"></button>
<button type="button" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
</div>
</div>
</GhFormGroup>
@ -179,9 +181,10 @@
<label class="modal-fullsettings-title">Heading color</label>
<div class="gh-email-design-color-picker">
<div class="gh-btn-group">
<button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
<button type="button" title="Auto"class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
<p>Auto</p>
<button type="button" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
<button type="button" class="gh-btn gh-email-design-color accent"></button>
<button type="button" class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
</div>
</div>
</GhFormGroup>

50
ghost/admin/app/styles/layouts/members.css
View file

@ -1737,30 +1737,54 @@ p.gh-members-import-errordetail:first-of-type {
/* -------------------------------------------------------- */
.gh-btn-group .gh-email-design-color {
display: none;
display: block;
opacity: 0;
position: relative;
z-index: 2;
width: 0;
height: 0;
margin: 0;
border: 0;
border-radius: 999px;
transition: all .1s ease-in-out;
transition-delay: .05s;
}
.gh-email-design-color-picker .gh-btn-group {
vertical-align: middle;
}
.gh-email-design-color-picker .gh-btn-group p {
margin: 0;
color: var(--midgrey);
font-size: 1.2rem;
font-weight: 500;
}
.gh-btn-group:hover .gh-email-design-color {
opacity: 1;
width: 22px;
height: 22px;
margin: 0 0 0 5px;
border: 1px solid transparent;
border-radius: 999px;
}
.gh-btn-group:hover .gh-email-design-color {
display: block;
transition: all .1s ease-in-out;
transition-delay: .05s;
}
.gh-email-design-color.gh-btn-group-selected {
display: block;
opacity: 1;
width: 22px;
height: 22px;
margin: 0 0 0 5px;
border: 1px solid transparent;
}
.gh-email-design-color.transparent {
.gh-btn-group .gh-email-design-color.transparent {
background: transparent;
border: 1px solid var(--lightgrey);
}
.gh-email-design-color.transparent::before {
.gh-email-design-color.transparent::after {
content: "";
position: absolute;
top: 3px;
@ -1773,20 +1797,20 @@ p.gh-members-import-errordetail:first-of-type {
transform-origin: left;
}
.gh-email-design-color.white {
.gh-btn-group .gh-email-design-color.white {
background: var(--white) !important;
border: 1px solid var(--lightgrey-l1);
}
.gh-email-design-color.black {
.gh-btn-group .gh-email-design-color.black {
background: var(--black) !important;
}
.gh-email-design-color.accent {
.gh-btn-group .gh-email-design-color.accent {
background: var(--accent-color) !important;
}
.gh-email-design-color.custom {
.gh-btn-group .gh-email-design-color.custom {
background: var(--white-30) !important;
border: 1px solid var(--lightgrey);
}