position of toggle button improved (differentation between twig and vue) + fix fa-eye-slash in vue component

This commit is contained in:
2022-03-09 12:10:33 +01:00
parent c611f35cd6
commit 3d1ded8b1c
3 changed files with 11 additions and 6 deletions

View File

@@ -2,7 +2,6 @@
display: flex;
position: relative;
margin-right: 20px
// margin-left 20px;
}
.toggle-container {
@@ -17,6 +16,11 @@
.toggle{
position: absolute;
right: 4px;
&-twig {
position: absolute;
right: -25px;
bottom: 20px;
}
}
.blur {

View File

@@ -2,18 +2,19 @@ require('./blur.scss');
document.querySelectorAll('.confidential').forEach(function (el) {
let i = document.createElement('i');
const classes = ['fa', 'fa-eye', 'toggle'];
const classes = ['fa', 'fa-eye-slash', 'toggle-twig'];
i.classList.add(...classes);
el.appendChild(i);
const toggleBlur = function(e) {
for (let child of el.children) {
if (!child.classList.contains('toggle')) {
if (!child.classList.contains('toggle-twig')) {
child.classList.toggle('blur');
}
}
i.classList.toggle('fa-eye');
i.classList.toggle('fa-eye-slash');
i.classList.toggle('fa-eye');
}
i.addEventListener('click', toggleBlur);
toggleBlur();
});
});