[BUGFIX] Fix position of carets in accordions in install tool

Resolves: #80507
Releases: master
Change-Id: I5494a9a61829d6245fa2410c3bafe8c6bc4a9043
Reviewed-on: https://review.typo3.org/52206


Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>

Build/Resources/Public/Sass/install.scss

@@ -129,9 +129,40 @@ h1:first-child {
     }
 }
 
+.caret {
+    border: 0;
+    padding-left: 10px;
+
+    &:after {
+        position: relative;
+        top: -8px;
+        left: -10px;
+        content: $fa-var-caret-down;
+        font-family: FontAwesome;
+    }
+}
+
 .collapsed .caret {
-    transition: all 0.25s ease-in-out;
-    transform: rotate(-90deg);
+    &:after {
+        content: $fa-var-caret-right;
+        font-family: FontAwesome;
+    }
+}
+
+.panel-heading {
+    position: relative;
+
+    .panel-checkbox {
+        margin: 0;
+        position: absolute;
+        left: 1em;
+        top: 50%;
+        transform: translate(0, -50%);
+    }
+
+    .panel-checkbox + .panel-title {
+        padding-left: 18px;
+    }
 }
 
 a[data-toggle="collapse"] {

typo3/sysext/install/Resources/Private/Partials/Action/Tool/UpgradeAnalysis/PanelItem.html

@@ -2,7 +2,7 @@
     <div class="panel panel-default upgrade_analysis_item_to_filter"
          data-item-tags="{fileArray.tagList}" id="heading{issueNumber}">
         <div class="panel-heading" role="tab">
-            <input type="checkbox" class="t3js-upgradeanalysis-ignore pull-left" data-filepath="{fileArray.filepath}" title="ignore this document"/>
+            <input type="checkbox" class="t3js-upgradeanalysis-ignore panel-checkbox" data-filepath="{fileArray.filepath}" title="ignore this document"/>
             <h3 class="panel-title">
                 <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{issueNumber}" aria-expanded="true" aria-controls="collapse{issueNumber}" class="collapsed">
                     <span class="caret"></span>