tqt/Ghost-Admin
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Code Issues 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 328e5b29c7
commit 071c9a9636
2 changed files with 42 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/components/modal-members-modal-settings.hbs
View file

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

44
app/styles/layouts/portal-settings.css
View file

@ -102,25 +102,55 @@
}
.gh-portal-settings .input-color input {
position: relative;
height: 30px;
width: 102px;
padding: 3px 4px 3px 44px;
font-size: 1.3rem;
}
.gh-portal-settings .input-color .color-box {
height: 28px;
width: 28px;
}
.gh-portal-settings .input-color::after {
top: 5px;
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;
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 {