style update for list of previously uploaded files

templates/multiFileField.hamlet

@@ -1,9 +1,9 @@
 $newline never
 $forall FileUploadInfo{..} <- fileInfos
-  <div .file-checkbox__container :fuiChecked:.file-checkbox__container--checked>
+  <div .file-container :fuiChecked:.file-container--checked>
-    <label .file-checkbox__label.reactive-label.btn for=#{fuiHtmlId}>#{fuiTitle}
+    <label .file-container__label.btn for=#{fuiHtmlId}>#{fuiTitle}
     <div .checkbox>
-      <input .file-checkbox.js-file-checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{toPathPiece fuiId} type="checkbox">
+      <input .file-container__checkbox.js-file-checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{toPathPiece fuiId} type="checkbox">
       <label for=#{fuiHtmlId}>
 
 $# new files

templates/multiFileField.lucius

@@ -22,3 +22,34 @@
   margin-top: 10px;
   font-weight: 600;
 }
+
+.file-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  &.file-container--checked {
+
+    &::after {
+      content: none;
+    }
+
+    .file-container__label {
+      opacity: 1;
+    }
+  }
+
+  &::after {
+    /* TODO: get this from .msg-file */
+    content: '(wird entfernt)';
+    margin-left: 12px;
+  }
+
+  .checkbox {
+    margin-left: 12px;
+  }
+}
+
+.file-container__label {
+  opacity: 0.4;
+}

templates/standalone/inputs.julius

@@ -72,7 +72,7 @@
     // adds eventlistener(s)
     function addListener(container) {
       input.addEventListener('change', function(event) {
-        container.classList.toggle('file-checkbox__container--checked', this.checked);
+        container.classList.toggle('file-container--checked', this.checked);
       });
     }
 
@@ -80,18 +80,11 @@
     function setup() {
       var cont = input.parentNode;
       while (cont !== document.body) {
-        if (cont.classList.contains('file-checkbox__container')) {
+        if (cont.matches('.file-container')) {
           break;
         }
         cont = cont.parentNode;
       }
-
-      // take care of properly moving elements
-      if (input.parentNode.classList.contains('checkbox')) {
-        input.parentNode.classList.add('file-checkbox__checkbox');
-      } else {
-        input.classList.add('file-checkbox__checkbox');
-      }
       addListener(cont);
     }
     setup();