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

Updated color swatches in email design settings

Browse source 
Refs https://github.com/TryGhost/Team/issues/2830
This commit is contained in:
Sanne de Vries 2023-03-28 18:50:39 +02:00
parent 986aa38903
commit fe7d0620a5
2 changed files with 46 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/modals/newsletters/components/color-picker.hbs
View file

@ -1,7 +1,7 @@
<div class="gh-email-design-color-picker"> <div class="gh-email-design-color-picker">
<div class="gh-btn-group"> <div class="gh-btn-group">
<p>{{this.currentColorObject.name}}</p> <p>{{this.currentColorObject.name}}</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 custom"></button>
{{#each this.availablePresetColors as |color|}} {{#each this.availablePresetColors as |color|}}
<button type="button" class="gh-btn gh-email-design-color {{color.class}}" {{on "click" (fn this.setCurrentColor color.value) }}></button> <button type="button" class="gh-btn gh-email-design-color {{color.class}}" {{on "click" (fn this.setCurrentColor color.value) }}></button>
{{/each}} {{/each}}

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

@ -1736,6 +1736,26 @@ p.gh-members-import-errordetail:first-of-type {
/* Email newsletter design settings /* Email newsletter design settings
/* -------------------------------------------------------- */ /* -------------------------------------------------------- */
.gh-email-design-color-picker .gh-btn-group {
vertical-align: middle;
}
.gh-email-design-color-picker .gh-btn-group p {
opacity: 1;
margin: 0;
color: var(--midgrey);
font-size: 1.2rem;
font-weight: 500;
transition: all .15s ease-in-out;
transition-delay: .05s;
}
.gh-email-design-color-picker .gh-btn-group:hover p {
opacity: 0;
transition: all .15s ease-in-out;
transition-delay: .05s;
}
.gh-btn-group .gh-email-design-color { .gh-btn-group .gh-email-design-color {
display: block; display: block;
opacity: 0; opacity: 0;
@ -1746,28 +1766,17 @@ p.gh-members-import-errordetail:first-of-type {
margin: 0; margin: 0;
border: 0; border: 0;
border-radius: 999px; border-radius: 999px;
transition: all .1s ease-in-out; transition: all .15s ease-in-out;
transition-delay: .05s; 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 { .gh-btn-group:hover .gh-email-design-color {
opacity: 1; opacity: 1;
width: 22px; width: 22px;
height: 22px; height: 22px;
margin: 0 0 0 5px; margin: 0 0 0 5px;
border: 1px solid transparent; border: 1px solid transparent;
transition: all .1s ease-in-out; transition: all .15s ease-in-out;
transition-delay: .05s; transition-delay: .05s;
} }
@ -1779,6 +1788,26 @@ p.gh-members-import-errordetail:first-of-type {
border: 1px solid transparent; border: 1px solid transparent;
} }
.gh-email-design-color.gh-btn-group-selected::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
opacity: 0;
border: 2px solid var(--green);
border-radius: 999px;
transition: all .15s ease-in-out;
transition-delay: .05s;
}
.gh-btn-group:hover .gh-email-design-color.gh-btn-group-selected::before {
opacity: 1;
transition: all .15s ease-in-out;
transition-delay: .05s;
}
.gh-btn-group .gh-email-design-color.transparent { .gh-btn-group .gh-email-design-color.transparent {
background: transparent; background: transparent;
border: 1px solid var(--lightgrey); border: 1px solid var(--lightgrey);
@ -1811,14 +1840,14 @@ p.gh-members-import-errordetail:first-of-type {
} }
.gh-btn-group .gh-email-design-color.custom { .gh-btn-group .gh-email-design-color.custom {
background: var(--white-30) !important; background: conic-gradient(yellow, red, magenta, blue, aqua, lime, yellow) !important;
border: 1px solid var(--lightgrey); border: none;
} }
.gh-email-design-color.custom svg { .gh-email-design-color.custom svg {
width: 10px; width: 10px;
height: 10px; height: 10px;
color: var(--black); color: var(--white);
} }
.gh-email-design-alignment { .gh-email-design-alignment {