Style fixes.

src/Squidex/app/features/assets/pages/assets-page.component.html

@@ -53,30 +53,35 @@
 
     <ng-container sidebar>    
         <div class="sidebar-section">
-            <a class="row sidebar-item" (click)="resetTags()" [class.active]="assetsState.isTagSelectionEmpty()">
+            <a class="sidebar-item" (click)="resetTags()" [class.active]="assetsState.isTagSelectionEmpty()">
+                <div class="row">
                     <div class="col">
                         All tags
                     </div>
+                </div>
             </a>
         </div>
         
         <div class="sidebar-section">
             <h3>Tags</h3>
     
-            <a class="row sidebar-item" *ngFor="let tag of assetsState.tags | async" (click)="toggleTag(tag.name)" [class.active]="assetsState.isTagSelected(tag.name)">
+            <a class="sidebar-item" *ngFor="let tag of assetsState.tags | async" (click)="toggleTag(tag.name)" [class.active]="assetsState.isTagSelected(tag.name)">
+                <div class="row">
                     <div class="col">
                         {{tag.name}}
                     </div>
                     <div class="col col-auto">
                         {{tag.count}}
                     </div>
+                </div>
             </a>
         </div>
 
         <div class="sidebar-section">
             <h3>Saved queries</h3>
 
-            <a class="row sidebar-item" *ngFor="let query of queries.queries | async" (click)="search(query.filter)" [class.active]="isSelectedQuery(query.filter)">
+            <a class="sidebar-item" *ngFor="let query of queries.queries | async" (click)="search(query.filter)" [class.active]="isSelectedQuery(query.filter)">
+                <div class="row">
                     <div class="col truncate">
                         {{query.name}}
                     </div>
@@ -85,6 +90,7 @@
                             <i class="icon-close"></i>
                         </a>
                     </div>
+                </div>
             </a>
         </div>
     </ng-container>

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -35,6 +35,7 @@
                     <button type="button" class="btn btn-outline-secondary" (click)="dropdown.toggle()" [disabled]="schema.isSingleton && !content.isPending" 
                         [class.active]="dropdown.isOpen | async" #optionsButton>
                         <sqx-content-status
+                            [alignMiddle]="false"
                             [status]="content.status"
                             [scheduledTo]="content.scheduleJob?.status"
                             [scheduledAt]="content.scheduleJob?.dueTime"

src/Squidex/app/features/content/shared/array-editor.component.html

@@ -1,4 +1,4 @@
-<div class="container" *ngIf="arrayControl.controls.length > 0">
+<div class="array-container" *ngIf="arrayControl.controls.length > 0">
     <div class="item" *ngFor="let itemForm of arrayControl.controls; let i = index">
         <sqx-array-item
             [form]="form"

src/Squidex/app/features/content/shared/array-editor.component.scss

@@ -1,7 +1,7 @@
 @import '_vars';
 @import '_mixins';
 
-.container {
+.array-container {
     background: $color-border;
     padding: 1rem;
     position: relative;

src/Squidex/app/features/content/shared/assets-editor.component.scss

@@ -45,12 +45,10 @@
         @include border-radius;
         @include flex-box;
         @include truncate;
-        border: 2px dashed $color-border;
+        border: 2px dashed darken($color-border, 10%);
-        height: 2.5rem;
-        font-size: 1.2rem;
         font-weight: normal;
         text-align: center;
-        padding: 0 2rem;
+        padding: 5px 2rem;
         color: darken($color-border, 30%);
         cursor: pointer;
     }

src/Squidex/app/features/content/shared/content-status.component.html

@@ -1,17 +1,17 @@
-<span *ngIf="!scheduledTo">
+<ng-container *ngIf="!scheduledTo">
-    <span class="content-status content-status-{{displayStatus | lowercase}} mr-1" #statusIcon>
+    <span class="content-status content-status-{{displayStatus | lowercase}} mr-1" [class.middle]="alignMiddle" #statusIcon>
         <i class="icon-circle"></i>
     </span>
 
     <sqx-tooltip [target]="statusIcon">{{displayStatus}}</sqx-tooltip>
-</span>
+</ng-container>
 
-<span *ngIf="scheduledTo">
+<ng-container *ngIf="scheduledTo">
-    <span class="content-status content-status-{{scheduledTo | lowercase}} mr-1" #statusIcon>
+    <span class="content-status content-status-{{scheduledTo | lowercase}} mr-1" [class.middle]="alignMiddle" #statusIcon>
         <i class="icon-clock"></i>
     </span>
 
     <sqx-tooltip position="topRight" [target]="statusIcon">Will be set to '{{scheduledTo}}' at {{scheduledAt | sqxFullDateTime}}</sqx-tooltip>
-</span>
+</ng-container>
 
 <span class="content-status-label" *ngIf="showLabel">{{displayStatus}}</span>

src/Squidex/app/features/content/shared/content-status.component.scss

@@ -2,10 +2,6 @@
 @import '_mixins';
 
 .content-status {
-    & {
-        vertical-align: middle;
-    }
-
     &-published {
         color: $color-theme-green;
     }
@@ -36,3 +32,7 @@
         padding: .75rem;
     }
 }
+
+.middle {
+    vertical-align: middle;
+}

src/Squidex/app/features/content/shared/content-status.component.ts

@@ -31,6 +31,9 @@ export class ContentStatusComponent {
     @Input()
     public showLabel = false;
 
+    @Input()
+    public alignMiddle = true;
+
     public get displayStatus() {
         return !!this.isPending ? 'Pending' : this.status;
     }

src/Squidex/app/features/content/shared/references-editor.component.scss

@@ -26,7 +26,7 @@
     & {
         @include transition(border-color .4s ease);
         @include border-radius;
-        border: 2px dashed $color-border;
+        border: 2px dashed darken($color-border, 10%);
         font-size: 1.2rem;
         font-weight: normal;
         text-align: center;

src/Squidex/app/shared/components/asset.component.html

@@ -86,12 +86,12 @@
 
 <ng-template #listTemplate>
     <div class="table-items-row" [class.selectable]="isSelectable" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)">
-        <div class="left-border" [class.selected]="isSelected" ></div>
+        <div class="left-border" [class.hidden]="!isSelectable" [class.selected]="isSelected" ></div>
 
-        <div *ngIf="asset && asset.isImage && progress === 0" class="image" @fade>
+        <div *ngIf="asset && asset.isImage && progress === 0" class="image" [class.image-left]="!isSelectable" @fade>
             <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg2" layoutKey="asset-small">
         </div>
-        <div *ngIf="asset && !asset.isImage && progress === 0" class="image image-padded" @fade>
+        <div *ngIf="asset && !asset.isImage && progress === 0" class="image image-padded" [class.image-left]="!isSelectable" @fade>
             <img class="icon" [attr.src]="asset | sqxFileIcon">
         </div>
 

src/Squidex/app/shared/components/asset.component.scss

@@ -216,6 +216,10 @@ $list-height: 2.375rem;
         padding: 1rem;
     }
 
+    .image-left {
+        left: 0;
+    }
+
     .icon {
         max-width: 100%;
     }

src/Squidex/app/shared/components/assets-selector.component.scss

@@ -8,8 +8,10 @@
         }
 
         .tags {
+            & {
                 @include border-radius-left;
                 border-right: 0;
+            }
 
             &:focus,
             &.focus {

src/Squidex/app/theme/_bootstrap.scss

@@ -373,7 +373,7 @@ a {
     &-group {
         .btn-toggle {
             & {
-                border: 1px solid $color-border;
+                border: 1px solid $color-theme-secondary;
                 background: $color-dark-foreground;
             }
 

src/Squidex/app/theme/_panels.scss

@@ -283,7 +283,7 @@
 
     &-section {
         border-top: 1px solid $color-border;
-        padding: 1rem;
+        padding: 15px;
     }
 
     &-item {