TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-29 07:09:48 +03:00
Code Issues Projects Releases Wiki Activity

Added color picker to Portal settings

Browse Source 
no refs.
- added CSS color picker for accent color Portal settings. Note: sync between the input field and the color picker is to be done
This commit is contained in:
Peter Zimon 2020-08-26 16:00:17 +02:00
parent 5ee36f7737
commit 20bcfd4839
2 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ghost/admin/app/components/modal-members-modal-settings.hbs
View File

@ -114,10 +114,13 @@
@value={{accentColor}} @value={{accentColor}}
data-test-input="accentColor" data-test-input="accentColor"
/> />
<div class="color-picker-horizontal-divider"></div>
<div <div
class="color-box" class="color-box-container"
style={{this.backgroundStyle}} style={{this.backgroundStyle}}
></div> >
<input type="color" name="accent-color" class="color-picker" value="#ffffff" >
</div>
</div> </div>
<GhErrorMessage <GhErrorMessage
@errors={{settings.errors}} @errors={{settings.errors}}

44
ghost/admin/app/styles/layouts/portal-settings.css
View File

@ -102,25 +102,55 @@
} }
.gh-portal-settings .input-color input { .gh-portal-settings .input-color input {
position: relative;
height: 30px; height: 30px;
width: 102px; width: 102px;
padding: 3px 4px 3px 44px; padding: 3px 4px 3px 44px;
font-size: 1.3rem; font-size: 1.3rem;
} }
.gh-portal-settings .input-color .color-box {
height: 28px;
width: 28px;
}
.gh-portal-settings .input-color::after { .gh-portal-settings .input-color::after {
top: 5px; top: 5px;
left: 34px; left: 34px;
} }
.gh-portal-settings .input-color input:focus + .color-box { .gh-portal-settings .color-picker-horizontal-divider {
position: absolute;
display: block;
content: "";
width: 1px;
top: 0;
left: 29px;
bottom: 0;
background: color-mod(var(--lightgrey) l(-5%) s(-10%));
}
.gh-portal-settings .input-color input:focus + .color-picker-horizontal-divider {
top: 2px;
bottom: 2px;
}
.gh-portal-settings .color-box-container {
height: 26px; height: 26px;
width: 28px; width: 26px;
position: absolute;
overflow: hidden;
top: 2px;
left: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.gh-portal-settings .color-box-container .color-picker {
position: absolute;
top: -3px;
left: -3px;
border: none;
outline: none;
padding: 0;
margin: 0;
width: 34px;
height: 34px;
} }
.gh-portal-settings .gh-select svg { .gh-portal-settings .gh-select svg {