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

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-btn-group">
<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|}}
<button type="button" class="gh-btn gh-email-design-color {{color.class}}" {{on "click" (fn this.setCurrentColor color.value) }}></button>
{{/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
/* -------------------------------------------------------- */
.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 {
display: block;
opacity: 0;
@ -1746,28 +1766,17 @@ p.gh-members-import-errordetail:first-of-type {
margin: 0;
border: 0;
border-radius: 999px;
transition: all .1s ease-in-out;
transition: all .15s 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;
transition: all .1s ease-in-out;
transition: all .15s ease-in-out;
transition-delay: .05s;
}
@ -1779,6 +1788,26 @@ p.gh-members-import-errordetail:first-of-type {
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 {
background: transparent;
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 {
background: var(--white-30) !important;
border: 1px solid var(--lightgrey);
background: conic-gradient(yellow, red, magenta, blue, aqua, lime, yellow) !important;
border: none;
}
.gh-email-design-color.custom svg {
width: 10px;
height: 10px;
color: var(--black);
color: var(--white);
}
.gh-email-design-alignment {