Merge branch '58-design-output-selectbox' into 'develop'

Resolve "Design output selectbox"

Closes #58

See merge request !51

src/app/search/components/output/output-by-category.component.css

@@ -14,7 +14,7 @@
 }
 
 .selectbox button:hover {
-    background-color: #F8F9FA;
+    background-color: #ECECEC;
 }
 
 .selectbox button:focus {

src/app/search/components/output/output-by-category.component.html

 <p class="mb-3"><em>{{ categoryLabel }}</em></p>
 <div class="row mb-1">
     <div class="col pr-1">
-        <button (click)="selectAll()" [disabled]="isAllSelected" class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Select All</button>
+        <button (click)="selectAll()" [disabled]="isAllSelected"
+            class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Select All</button>
     </div>
     <div class="col pl-1">
-        <button (click)="unselectAll()" [disabled]="isAllUnselected" class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Unselect All</button>
+        <button (click)="unselectAll()" [disabled]="isAllUnselected"
+            class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Unselect All</button>
     </div>
 </div>
-<div class="selectbox py-1">
-    <button *ngFor="let attribute of getAttributeListSortedByDisplay()" class="btn btn-block text-left py-0 m-0"
-        (click)="toggleSelection(attribute.id)">
-        <div *ngIf="isSelected(attribute.id); then selected else unselected"></div>
-        {{ attribute.form_label }}
-    </button>
-</div>
-
-<ng-template #selected>
-    <span class="fa-stack fa-1x">
-        <i class="far fa-square fa-stack-1x text-secondary"></i>
-        <i class="fas fa-check fa-stack-1x anis-color"></i>
-    </span>
-</ng-template>
-<ng-template #unselected>
-    <span class="fa-stack fa-1x">
-        <i class="far fa-square fa-stack-1x text-secondary"></i>
-    </span>
-</ng-template>
\ No newline at end of file
+<div class="selectbox p-0">
+    <div *ngFor="let attribute of getAttributeListSortedByDisplay()">
+        <div *ngIf="isSelected(attribute.id)">
+            <button class="btn btn-block text-left py-1 m-0 rounded-0"
+                (click)="toggleSelection(attribute.id)">
+                <i class="fas fa-fw fa-check-square anis-color"></i> {{ attribute.form_label }}
+            </button>
+        </div>
+        <div *ngIf="!isSelected(attribute.id)">
+            <button class="btn btn-block text-left py-1 m-0 rounded-0" (click)="toggleSelection(attribute.id)">
+                <i class="far fa-fw fa-square text-secondary"></i> {{ attribute.form_label }}
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file