style password checkbox

This commit is contained in:
Erica Wright 2017-10-23 10:36:07 -04:00
parent acbf9fc32f
commit 1e4d6646c6
No known key found for this signature in database
GPG Key ID: D9F2AF9D67D0AAB7
4 changed files with 51 additions and 6 deletions

View File

@ -4,11 +4,11 @@ module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id); const file = state.storage.getFileById(state.params.id);
const div = html` const div = html`
<div class="selectPassword"> <div class="selectPassword">
<div> <div id="addPasswordWrapper">
<input id="addPassword" type="checkbox" onchange=${togglePasswordInput}/> <input id="addPassword" type="checkbox" onchange=${togglePasswordInput}/>
<label for="addPassword">${state.translate( <label for="addPassword">
'requirePasswordCheckbox' <img src="/assets/check-16-blue.svg"/>
)}</label> ${state.translate('requirePasswordCheckbox')}</label>
</div> </div>
<form class="setPassword hidden" onsubmit=${setPassword}> <form class="setPassword hidden" onsubmit=${setPassword}>
<input id="unlock-input" <input id="unlock-input"

1
assets/check-16-blue.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#0A84FF " d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/></svg>

After

Width:  |  Height:  |  Size: 238 B

View File

@ -896,6 +896,50 @@ tbody {
margin-bottom: -5px; margin-bottom: -5px;
} }
#addPasswordWrapper {
height: 24px;
}
#addPassword {
position: absolute;
visibility: collapse;
}
#addPasswordWrapper label {
line-height: 20px;
cursor: pointer;
position: relative;
opacity: 0.6;
}
#addPassword:checked + label {
opacity: 1;
}
#addPasswordWrapper label::after {
content: '';
height: 20px;
width: 20px;
margin-right: 10px;
margin-left: 5px;
float: left;
border: 1px solid rgba(12, 12, 13, 0.3);
border-radius: 2px;
}
#addPassword:not(:checked) + label > img {
height: 0;
width: 0;
}
#addPassword:checked + label > img {
height: 20px;
width: 20px;
position: absolute;
left: -29px;
top: 2px;
}
@media (max-device-width: 992px), (max-width: 992px) { @media (max-device-width: 992px), (max-width: 992px) {
.popup .popuptext { .popup .popuptext {
left: auto; left: auto;

View File

@ -85,5 +85,5 @@ footerLinkPrivacy = Privacy
footerLinkTerms = Terms footerLinkTerms = Terms
footerLinkCookies = Cookies footerLinkCookies = Cookies
requirePasswordCheckbox = Require a password to download this file requirePasswordCheckbox = Require a password to download this file
addPasswordButton = Add Password addPasswordButton = Add password
incorrectPassword = Incorrect password. Try again? passwordTryAgain = Incorrect password. Try again.