* Migrated to bootstrap 4

* Permission dropdown brought back

src/Squidex.Domain.Apps.Entities/Apps/AppHistoryEventsCreator.cs

@@ -133,7 +133,7 @@ namespace Squidex.Domain.Apps.Entities.Apps
 
         protected override Task<HistoryEventToStore> CreateEventCoreAsync(Envelope<IEvent> @event)
         {
-            return this.DispatchFuncAsync(@event.Payload, @event.Headers, (HistoryEventToStore)null);
+            return this.DispatchFuncAsync(@event.Payload, (HistoryEventToStore)null);
         }
 
         private static string ClientName(AppClientRenamed @event)

src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html

@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Event Consumers (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Event Consumers (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 

src/Squidex/app/features/administration/pages/users/user-page.component.ts

@@ -31,7 +31,7 @@ export class UserPageComponent  implements OnInit {
 
     public userFormSubmitted = false;
     public userForm: FormGroup;
-    public userFormError? = '';
+    public userFormError = '';
 
     public isCurrentUser = false;
     public isNewMode = false;

src/Squidex/app/features/administration/pages/users/users-page.component.html

@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Users (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Users (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 
@@ -92,10 +92,10 @@
                 <div class="float-right pagination">
                     <span class="pagination-text">{{usersPager.itemFirst}}-{{usersPager.itemLast}} of {{usersPager.numberOfItems}}</span>
 
-                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!usersPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-secondary pagination-button" [disabled]="!usersPager.canGoPrev" (click)="goPrev()">
                         <i class="icon-angle-left"></i>
                     </button>
-                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!usersPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-secondary pagination-button" [disabled]="!usersPager.canGoNext" (click)="goNext()">
                         <i class="icon-angle-right"></i>
                     </button>
                 </div>

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

@@ -8,7 +8,7 @@
     </div>
 
     <div class="app card float-left" *ngFor="let app of apps" title="{{app.name}}">
-        <div class="card-block app-content">
+        <div class="card-body app-content">
             <h4 class="card-title app-title">{{app.name}}</h4>
 
             <a [routerLink]="['/app', app.name]">Edit</a>

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

@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 
@@ -57,10 +57,10 @@
                 <div class="float-right pagination">
                     <span class="pagination-text">{{assetsPager.itemFirst}}-{{assetsPager.itemLast}} of {{assetsPager.numberOfItems}}</span>
 
-                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-secondary pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()">
                         <i class="icon-angle-left"></i>
                     </button>
-                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-secondary pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()">
                         <i class="icon-angle-right"></i>
                     </button>
                 </div>

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

@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Contents (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Contents (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 
@@ -94,19 +94,19 @@
             <div class="selection" *ngIf="selectionCount > 0">
                 {{selectionCount}} items selected:
 
-                <button class="btn btn-link btn-default" (click)="publishSelected()" *ngIf="canPublish">
+                <button class="btn btn-link btn-secondary" (click)="publishSelected()" *ngIf="canPublish">
                     Publish
                 </button>
                 
-                <button class="btn btn-link btn-default" (click)="unpublishSelected()" *ngIf="canUnpublish">
+                <button class="btn btn-link btn-secondary" (click)="unpublishSelected()" *ngIf="canUnpublish">
                     Unublish
                 </button>
                 
-                <button class="btn btn-link btn-default" (click)="archiveSelected()" *ngIf="!isArchive">
+                <button class="btn btn-link btn-secondary" (click)="archiveSelected()" *ngIf="!isArchive">
                     Archive
                 </button>
                 
-                <button class="btn btn-link btn-default" (click)="restoreSelected()" *ngIf="isArchive">
+                <button class="btn btn-link btn-secondary" (click)="restoreSelected()" *ngIf="isArchive">
                     Restore
                 </button>
                 
@@ -156,10 +156,10 @@
                 <div class="float-right pagination">
                     <span class="pagination-text">{{contentsPager.itemFirst}}-{{contentsPager.itemLast}} of {{contentsPager.numberOfItems}}</span>
 
-                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!contentsPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-secondary pagination-button" [disabled]="!contentsPager.canGoPrev" (click)="goPrev()">
                         <i class="icon-angle-left"></i>
                     </button>
-                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!contentsPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-secondary pagination-button" [disabled]="!contentsPager.canGoNext" (click)="goNext()">
                         <i class="icon-angle-right"></i>
                     </button>
                 </div>

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

@@ -19,7 +19,7 @@
 </td>
 <td class="cell-actions" *ngIf="!isReadOnly">
     <div class="dropdown dropdown-options" *ngIf="content">
-        <button type="button" class="btn btn-link btn-decent" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async" #optionsButton>
+        <button type="button" class="btn btn-link btn-secondary" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async" #optionsButton>
             <i class="icon-dots"></i>
         </button>
         <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [sqxModalTarget]="optionsButton" @fade>

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

@@ -13,7 +13,7 @@
 
     <div class="clearfix">
         <a class="card card-href" [routerLink]="['schemas', { showDialog: true }]">
-            <div class="card-block">
+            <div class="card-body">
                 <div class="card-image">
                     <img src="/images/dashboard-schema.png" />
                 </div>
@@ -27,7 +27,7 @@
         </a>
 
         <a class="card card-href" href="/api/docs" target="_blank">
-            <div class="card-block">
+            <div class="card-body">
                 <div class="card-image">
                     <img src="/images/dashboard-api.png" />
                 </div>
@@ -41,7 +41,7 @@
         </a>
 
         <a class="card card-href" (click)="showForum()">
-            <div class="card-block">
+            <div class="card-body">
                 <div class="card-image">
                     <img src="/images/dashboard-feedback.png" />
                 </div>
@@ -55,7 +55,7 @@
         </a>
 
         <a class="card card-href" href="https://github.com/squidex/squidex" target="_blank">
-            <div class="card-block">
+            <div class="card-body">
                 <div class="card-image">
                     <img src="/images/dashboard-github.png" />
                 </div>
@@ -69,19 +69,19 @@
         </a>
 
         <div class="card card-lg">
-            <div class="card-block">
+            <div class="card-body">
                 <chart type="bar" [data]="chartCallsCount" [options]="chartOptions"></chart>
             </div>
         </div>
 
         <div class="card card-lg">
-            <div class="card-block">
+            <div class="card-body">
                 <chart type="bar" [data]="chartCallsPerformance" [options]="chartOptions"></chart>
             </div>
         </div>
 
         <div class="card card">
-            <div class="card-block">
+            <div class="card-body">
                 <div class="aggregation" *ngIf="callsCurrent >= 0">
                     <div class="aggregation-label">API calls this month</div>
                     <div class="aggregation-value">{{callsCurrent | sqxKNumber}}</div>
@@ -91,13 +91,13 @@
         </div>
 
         <div class="card card-lg">
-            <div class="card-block">
+            <div class="card-body">
                 <chart type="line" [data]="chartStorageCount" [options]="chartOptions"></chart>
             </div>
         </div>
 
         <div class="card card">
-            <div class="card-block">
+            <div class="card-body">
                 <div class="aggregation" *ngIf="assetsCurrent >= 0">
                     <div class="aggregation-label">Asset size today</div>
                     <div class="aggregation-value">{{assetsCurrent | sqxFileSize}}</div>
@@ -107,7 +107,7 @@
         </div>
 
         <div class="card card-lg">
-            <div class="card-block">
+            <div class="card-body">
                 <chart type="line" [data]="chartStorageSize" [options]="chartOptions"></chart>
             </div>
         </div>

src/Squidex/app/features/dashboard/pages/dashboard-page.component.scss

@@ -41,7 +41,7 @@
         width: 33rem;
     }
 
-    &-block {
+    &-body {
         min-height: 15.5rem;
     }
 

src/Squidex/app/features/rules/pages/events/rule-events-page.component.html

@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Events (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Events (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 
@@ -101,10 +101,10 @@
                 <div class="float-right pagination">
                     <span class="pagination-text">{{eventsPager.itemFirst}}-{{eventsPager.itemLast}} of {{eventsPager.numberOfItems}}</span>
 
-                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!eventsPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-secondary pagination-button" [disabled]="!eventsPager.canGoPrev" (click)="goPrev()">
                         <i class="icon-angle-left"></i>
                     </button>
-                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!eventsPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-secondary pagination-button" [disabled]="!eventsPager.canGoNext" (click)="goNext()">
                         <i class="icon-angle-right"></i>
                     </button>
                 </div>

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

@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 

src/Squidex/app/features/schemas/pages/schema/field.component.html

@@ -23,7 +23,7 @@
                     </button>
 
                     <div class="dropdown dropdown-options">
-                        <button type="button" class="btn btn-link btn-decent" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
+                        <button type="button" class="btn btn-link btn-secondary" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
                             <i class="icon-dots"></i>
                         </button>
                         <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [sqxModalTarget]="optionsButton" @fade>

src/Squidex/app/features/schemas/pages/schema/field.component.ts

@@ -45,7 +45,7 @@ export class FieldComponent implements OnInit {
     public showing = new EventEmitter();
 
     @Output()
-    public saving= new EventEmitter();
+    public saving = new EventEmitter();
 
     @Output()
     public enabling = new EventEmitter();

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -18,7 +18,7 @@
                 </div>
 
                <div class="dropdown dropdown-options">
-                    <button type="button" class="btn btn-link btn-decent" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async" #buttonOptions>
+                    <button type="button" class="btn btn-link btn-secondary" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async" #buttonOptions>
                         <i class="icon-dots"></i>
                     </button>
                     <div class="dropdown-menu" *sqxModalView="editOptionsDropdown" closeAlways="true" [sqxModalTarget]="buttonOptions" @fade>

src/Squidex/app/features/settings/pages/clients/client.component.html

@@ -11,7 +11,7 @@
 
                     <button type="submit" class="btn btn-primary" [disabled]="!renameForm.valid || !hasNewName">Save</button>
 
-                    <button class="btn btn-link btn-decent btn-cancel" (click)="cancelRename()">
+                    <button class="btn btn-link btn-secondary btn-cancel" (click)="cancelRename()">
                         <i class="icon-close"></i>
                     </button>
                 </form>
@@ -70,7 +70,9 @@
             Permission:
         </div>
         <div class="col">
-            <input readonly class="form-control" value="{{ctx.appName}}:{{client.id}}" #inputName />
+            <select class="form-control" [ngModel]="client.permission" (ngModelChange)="updating.emit($event)">
+                <option *ngFor="let permission of clientPermissions" [ngValue]="permission">{{permission}}</option>
+            </select>
         </div>
         <div class="col col-auto cell-actions">
         </div>

src/Squidex/app/features/settings/pages/patterns/pattern.component.html

@@ -37,7 +37,7 @@
                 <i class="icon-add"></i>
             </button>
 
-            <button type="reset" class="btn btn-link btn-decent" (click)="cancel()">
+            <button type="reset" class="btn btn-link btn-secondary" (click)="cancel()">
                 <i class="icon-close"></i>
             </button>
         </div>

src/Squidex/app/features/settings/pages/patterns/pattern.component.scss

@@ -2,8 +2,7 @@
 @import '_mixins';
 
 .col-options {
-    min-width: 7.5rem;
-    max-width: 7.5rem;
+    min-width: 6rem;
 }
 
 .col-name,

src/Squidex/app/features/settings/pages/plans/plans-page.component.html

@@ -4,7 +4,7 @@
     <div class="panel-header">
         <div class="panel-title-row">
             <div class="float-right">
-                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Plans (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-secondary" (click)="load(true)" title="Refresh Plans (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
 
@@ -32,13 +32,13 @@
 
                 <div class="clearfix">
                     <div class="card plan float-left" *ngFor="let plan of plans.plans">
-                        <div class="card-block plan-header text-center">
+                        <div class="card-body plan-header text-center">
                             <h4 class="card-title">{{plan.name}}</h4>
                             <h5 class="plan-price">{{plan.costs}}</h5>
 
                             <small class="text-muted">Per Month</small>
                         </div>
-                        <div class="card-block">
+                        <div class="card-body">
                             <div class="plan-fact">
                                 {{plan.maxApiCalls | sqxKNumber}} API Calls
                             </div>
@@ -49,7 +49,7 @@
                                 {{plan.maxContributors}} Contributors
                             </div>
                         </div>
-                        <div class="card-block">
+                        <div class="card-body">
                             <button *ngIf="plan.id === plans.currentPlanId" class="btn btn-block btn-link btn-success plan-selected">
                                 &#10003; Selected
                             </button>

src/Squidex/app/shared/components/app-form.component.ts

@@ -30,7 +30,7 @@ export class AppFormComponent {
     @Output()
     public cancelled = new EventEmitter();
 
-    public createFormError? = '';
+    public createFormError = '';
     public createFormSubmitted = false;
     public createForm =
         this.formBuilder.group({

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

@@ -2,7 +2,7 @@
      [dragData]="asset"
      (onDragStart)="onAssetDragStart($event)"
      (onDragEnd)="onAssetDragEnd($event)">
-    <div class="card-block">
+    <div class="card-body">
         <div class="file-preview" *ngIf="asset && progress == 0" @fade>
             <span class="file-type" *ngIf="asset.fileType">
                 {{asset.fileType}}

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

@@ -79,7 +79,7 @@
         }
     }
 
-    &-block {
+    &-body {
         position: relative;
     }
 

src/Squidex/app/shell/pages/home/home-page.component.html

@@ -1,6 +1,6 @@
 <div class="login-area">
     <div class="card">
-        <div class="card-block text-center">
+        <div class="card-body text-center">
             <img class="login-icon login-element" src="/images/logo-half.png" />
 
             <div>

src/Squidex/app/shell/pages/home/home-page.component.scss

@@ -6,7 +6,7 @@
         position: relative;
     }
 
-    &-block {
+    &-body {
         padding: 2rem 3rem;
     }
 }

src/Squidex/app/shell/pages/internal/internal-area.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar fixed-top navbar-inverse bg-primary bg-faded">
+<nav class="navbar fixed-top navbar-dark bg-primary bg-faded">
     <span class="navbar-brand" routerLink="/app">
         <i class="icon-logo"></i>
     </span>

src/Squidex/app/theme/_bootstrap-vars.scss

@@ -10,40 +10,22 @@ $font-size-h6:              1rem;
 
 $body-bg:                   $color-background;
 
-$brand-primary:             $color-theme-blue;
-$brand-success:             $color-theme-green;
-$brand-danger:              $color-theme-error;
-$brand-warning:             $color-theme-orange;
+$danger:                    $color-theme-error;
+$primary:                   $color-theme-blue;
+$secondary:                 $color-theme-secondary;
+$success:                   $color-theme-green;
+$warning:                   $color-theme-orange;
 
-$alert-success-bg:          $color-theme-green;
-$alert-success-border:      $color-theme-green;
-$alert-success-text:        #fff;
-
-$alert-info-bg:             $color-theme-blue;
-$alert-info-border:         $color-theme-blue;
-$alert-info-text:           #fff;
-
-$alert-warning-bg:          $color-theme-orange;
-$alert-warning-border:      $color-theme-orange;
-$alert-warning-text:        #fff;
-
-$alert-danger-bg:           $color-theme-error;
-$alert-danger-border:       $color-theme-error;
-$alert-danger-text:         #fff;
-
-$btn-secondary-bg:          $color-theme-secondary;
-$btn-secondary-border:      $color-theme-secondary;
+$alert-bg-level:            0;
+$alert-color-level:         -12.5;
 
 $input-bg-disabled:         $color-input-disabled;
 $input-border-color:        $color-input;
 $input-color-placeholder:   $color-text-decent;
 
-$badge-default-bg:          $color-badge-default-background;
-$badge-primary-bg:          $color-badge-primary-background;
-$badge-success-bg:          $color-badge-success-background;
-$badge-info-bg:             $color-badge-info-background;
-$badge-warning-bg:          $color-badge-warning-background;
-$badge-danger-bg:           $color-badge-danger-background;
+$btn-padding-y:             .5rem;
+
+$badge-bg-level: 2;
 
 $dropdown-border-color:     $color-border;
 

src/Squidex/app/theme/_bootstrap.scss

@@ -13,28 +13,34 @@
         padding: .3rem .6rem;
     }
 
-    &-default {
-        color: $color-badge-default-foreground;
-    }
-
     &-primary {
         color: $color-badge-primary-foreground;
+        background: $color-badge-primary-background;
+    }
+
+    &-secondary {
+        color: $color-badge-secondary-foreground;
+        background: $color-badge-secondary-background;
     }
 
     &-success {
         color: $color-badge-success-foreground;
+        background: $color-badge-success-background;
     }
 
     &-info {
         color: $color-badge-info-foreground;
+        background: $color-badge-info-background;
     }
 
     &-warning {
         color: $color-badge-warning-foreground;
+        background: $color-badge-warning-background;
     }
 
     &-danger {
         color: $color-badge-danger-foreground;
+        background: $color-badge-danger-background;
     }
 }
 
@@ -56,6 +62,7 @@
         & {
             font-weight: 400;
             font-size: 1.6rem;
+            padding-top: .25rem;
         }
 
         &:hover,
@@ -381,8 +388,12 @@ a {
             @include build-link-button($color-theme-green);
         }
 
-        &.btn-decent {
-            @include build-link-button($color-text-decent);
+        &.btn-info {
+            @include build-link-button($color-theme-info);
+        }
+
+        &.btn-warning {
+            @include build-link-button($color-theme-orange);
         }
     }
 }

src/Squidex/app/theme/_common.scss

@@ -20,6 +20,11 @@ body {
     color: $color-theme-blue-dark;
 }
 
+// Marker ref for history panel. Must be placed here, because element is created dynamically.
+.marker-ref {
+    font-weight: bolder;
+}
+
 // Common style for user email.
 .user-email {
     font-style: italic;

src/Squidex/app/theme/_forms.scss

@@ -12,6 +12,7 @@
 
         &:hover,
         &:focus {
+            @include box-shadow-colored(0, 0, .2rem, $color-theme-error);
             border-color: $color-theme-error-dark;
         }
     }

src/Squidex/app/theme/_lists.scss

@@ -160,13 +160,13 @@
         }
 
         &:hover {
-            color: $color-theme-blue-dark;
+            color: $color-theme-blue-dark !important;
         }
 
         &.active {
-            background: $color-theme-blue;
-            border-color: $color-theme-blue;
-            color: $color-dark-foreground;
+            background: $color-theme-blue !important;
+            border-color: $color-theme-blue !important;
+            color: $color-dark-foreground !important;
         }
     }
 

src/Squidex/app/theme/_mixins.scss

@@ -23,6 +23,7 @@
     & {
         color: $color;
         cursor: pointer;
+        border: 1px solid transparent;
     }
 
     &:focus {
@@ -217,12 +218,6 @@
             text-shadow: none;
 }
 
-@mixin box-shadow-colored($axis, $color) {
-    -webkit-box-shadow: 0 0 $axis $color; 
-       -moz-box-shadow: 0 0 $axis $color;  
-            box-shadow: 0 0 $axis $color;
-}
-
 @mixin box-shadow-none() {
     -webkit-box-shadow: none;
        -moz-box-shadow: none;

src/Squidex/app/theme/_vars.scss

@@ -11,7 +11,6 @@ $color-input:               #dbe4eb;
 $color-input-background:    #fff;
 $color-input-disabled:      #eef1f4;
 $color-input-border:        rgba(0, 0, 0, .15);
-
 $color-extern-google:           #d34836;
 $color-extern-google-icon:      #b02c1b;
 $color-extern-microsoft:        #004185;
@@ -72,8 +71,8 @@ $color-badge-info-foreground:       #43ccef;
 $color-badge-primary-background:    #cce1ff;
 $color-badge-primary-foreground:    #438cef;
 
-$color-badge-default-background:    #e6e6e6;
-$color-badge-default-foreground:    #999;
+$color-badge-secondary-background:  #e6e6e6;
+$color-badge-secondary-foreground:  #999;
 
 $color-table-background:    #fff;
 $color-table-footer:        #ecf2f6;

src/Squidex/package.json

@@ -15,19 +15,19 @@
     "build:clean": "rimraf wwwroot/build"
   },
   "dependencies": {
-    "@angular/animations": "5.1.3",
-    "@angular/common": "5.1.3",
-    "@angular/compiler": "5.1.3",
-    "@angular/core": "5.1.3",
-    "@angular/forms": "5.1.3",
-    "@angular/http": "5.1.3",
-    "@angular/platform-browser": "5.1.3",
-    "@angular/platform-browser-dynamic": "5.1.3",
-    "@angular/platform-server": "5.1.3",
-    "@angular/router": "5.1.3",
+    "@angular/animations": "5.2.1",
+    "@angular/common": "5.2.1",
+    "@angular/compiler": "5.2.1",
+    "@angular/core": "5.2.1",
+    "@angular/forms": "5.2.1",
+    "@angular/http": "5.2.1",
+    "@angular/platform-browser": "5.2.1",
+    "@angular/platform-browser-dynamic": "5.2.1",
+    "@angular/platform-server": "5.2.1",
+    "@angular/router": "5.2.1",
     "angular2-chartjs": "0.4.1",
     "babel-polyfill": "6.26.0",
-    "bootstrap": "4.0.0-alpha.6",
+    "bootstrap": "4.0.0",
     "core-js": "2.5.3",
     "graphiql": "0.11.11",
     "moment": "2.20.1",
@@ -39,13 +39,13 @@
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "rxjs": "5.5.6",
-    "zone.js": "0.8.19"
+    "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/compiler": "5.1.3",
-    "@angular/compiler-cli": "5.1.3",
-    "@ngtools/webpack": "1.9.3",
-    "@types/core-js": "0.9.44",
+    "@angular/compiler": "5.2.1",
+    "@angular/compiler-cli": "5.2.1",
+    "@ngtools/webpack": "1.9.5",
+    "@types/core-js": "0.9.45",
     "@types/jasmine": "2.5.45",
     "@types/mousetrap": "1.6",
     "@types/node": "8.5.2",
@@ -54,17 +54,17 @@
     "angular2-router-loader": "0.3.5",
     "angular2-template-loader": "0.6.2",
     "awesome-typescript-loader": "3.4.1",
-    "codelyzer": "4.0.2",
+    "codelyzer": "4.1.0",
     "cpx": "1.5.0",
-    "css-loader": "0.28.7",
+    "css-loader": "0.28.9",
     "exports-loader": "0.6.4",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.6",
-    "html-loader": "0.5.1",
+    "html-loader": "0.5.5",
     "html-webpack-plugin": "2.30.1",
     "ignore-loader": "^0.1.2",
     "istanbul-instrumenter-loader": "0.2.0",
-    "jasmine-core": "2.8.0",
+    "jasmine-core": "2.9.1",
     "karma": "2.0.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
@@ -85,13 +85,13 @@
     "sass-lint": "1.12.1",
     "sass-loader": "6.0.6",
     "style-loader": "0.19.1",
-    "tslint": "5.8.0",
+    "tslint": "5.9.1",
     "tslint-loader": "3.5.3",
     "typemoq": "2.1.0",
     "typescript": "2.5.3",
     "underscore": "1.8.3",
     "webpack": "3.10.0",
-    "webpack-dev-server": "2.9.7",
+    "webpack-dev-server": "2.11.1",
     "webpack-merge": "4.1.1"
   }
 }

src/Squidex/wwwroot/theme.html

@@ -50,7 +50,7 @@
                     </div>
 
                     <div class="bs-component">
-                        <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
+                        <nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
                             <button class="navbar-toggler navbar-toggler-right" type="button">
                                 <span class="navbar-toggler-icon"></span>
                             </button>
@@ -82,7 +82,7 @@
                     </div>
 
                     <div class="bs-component">
-                        <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
+                        <nav class="navbar navbar-toggleable-md navbar-dark bg-inverse">
                             <button class="navbar-toggler navbar-toggler-right" type="button">
                                 <span class="navbar-toggler-icon"></span>
                             </button>
@@ -134,7 +134,15 @@
                         <button type="button" class="btn btn-info">Info</button>
                         <button type="button" class="btn btn-warning">Warning</button>
                         <button type="button" class="btn btn-danger">Danger</button>
-                        <button type="button" class="btn btn-link">Link</button>
+                    </p>
+
+                    <p class="bs-component">
+                        <button type="button" class="btn btn-link btn-primary">Primary</button>
+                        <button type="button" class="btn btn-link btn-secondary">Secondary</button>
+                        <button type="button" class="btn btn-link btn-success">Success</button>
+                        <button type="button" class="btn btn-link btn-info">Info</button>
+                        <button type="button" class="btn btn-link btn-warning">Warning</button>
+                        <button type="button" class="btn btn-link btn-danger">Danger</button>
                     </p>
 
                     <p class="bs-component">
@@ -144,7 +152,6 @@
                         <button type="button" class="btn btn-info disabled">Info</button>
                         <button type="button" class="btn btn-warning disabled">Warning</button>
                         <button type="button" class="btn btn-danger disabled">Danger</button>
-                        <button type="button" class="btn btn-link disabled">Link</button>
                     </p>
 
                     <p class="bs-component">
@@ -590,20 +597,14 @@
 
                         <div class="form-group has-success">
                             <label class="form-control-label" for="inputSuccess1">Input with success</label>
-                            <input type="text" class="form-control form-control-success">
-                            <div class="form-control-feedback">Success! You've done it.</div>
+                            <input type="text" class="form-control is-valid">
+                            <div class="valid-feedback">Success! You've done it.</div>
                         </div>
 
                         <div class="form-group has-warning">
                             <label class="form-control-label" for="inputWarning1">Input with warning</label>
-                            <input type="text" class="form-control form-control-warning">
-                            <div class="form-control-feedback">Shucks, try again.</div>
-                        </div>
-
-                        <div class="form-group has-danger">
-                            <label class="form-control-label" for="inputDanger1">Input with danger</label>
-                            <input type="text" class="form-control form-control-danger">
-                            <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
+                            <input type="text" class="form-control is-invalid">
+                            <div class="invalid-feedback">Shucks, try again.</div>
                         </div>
 
                         <div class="form-group">
@@ -623,14 +624,18 @@
 
                         <div class="form-group">
                             <label class="control-label">Input addons</label>
-                            <div class="form-group">
-                                <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
-                                <div class="input-group">
-                                    <div class="input-group-addon">$</div>
-                                    <input type="text" class="form-control" placeholder="Amount">
-                                    <div class="input-group-addon">.00</div>
+                            
+                            <div class="input-group mb-3">
+                                <div class="input-group-prepend">
+                                    <span class="input-group-text">$</span>
                                 </div>
-                            </div>
+                                
+                                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+                                
+                                <div class="input-group-append">
+                                    <span class="input-group-text">.00</span>
+                                </div>
+                              </div>
                         </div>
                     </form>
 
@@ -916,20 +921,24 @@
             <div>
                 <h2>Badges</h2>
                 <div class="bs-component" style="margin-bottom: 40px;">
-                    <span class="badge badge-default">Default</span>
                     <span class="badge badge-primary">Primary</span>
+                    <span class="badge badge-secondary">Secondary</span>
                     <span class="badge badge-success">Success</span>
-                    <span class="badge badge-warning">Warning</span>
                     <span class="badge badge-danger">Danger</span>
+                    <span class="badge badge-warning">Warning</span>
                     <span class="badge badge-info">Info</span>
+                    <span class="badge badge-light">Light</span>
+                    <span class="badge badge-dark">Dark</span>
                 </div>
                 <div class="bs-component">
-                    <span class="badge badge-pill badge-default">Default</span>
                     <span class="badge badge-pill badge-primary">Primary</span>
+                    <span class="badge badge-pill badge-secondary">Secondary</span>
                     <span class="badge badge-pill badge-success">Success</span>
-                    <span class="badge badge-pill badge-warning">Warning</span>
                     <span class="badge badge-pill badge-danger">Danger</span>
+                    <span class="badge badge-pill badge-warning">Warning</span>
                     <span class="badge badge-pill badge-info">Info</span>
+                    <span class="badge badge-pill badge-light">Light</span>
+                    <span class="badge badge-pill badge-dark">Dark</span>
                 </div>
             </div>
         </div>
@@ -1093,41 +1102,41 @@
             <div class="row">
                 <div class="col-lg-4">
                     <div class="bs-component">
-                        <div class="card card-inverse card-primary text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card text-white bg-primary text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
                         </div>
-                        <div class="card card-inverse card-success text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card text-white bg-success text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
                         </div>
-                        <div class="card card-inverse card-info text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card text-white bg-info text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
                         </div>
-                        <div class="card card-inverse card-warning text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card text-white bg-warning text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
                         </div>
-                        <div class="card card-inverse card-danger text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card text-white bg-danger text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
@@ -1137,41 +1146,41 @@
                 </div>
                 <div class="col-lg-4">
                     <div class="bs-component">
-                        <div class="card card-outline-primary text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card border-primary text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
                         </div>
-                        <div class="card card-outline-success text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card border-success text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
                         </div>
-                        <div class="card card-outline-info text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card border-info text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
                         </div>
-                        <div class="card card-outline-warning text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card border-warning text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
                             </div>
                         </div>
-                        <div class="card card-outline-danger text-xs-center">
-                            <div class="card-block">
-                                <blockquote class="card-blockquote">
+                        <div class="card border-danger text-xs-center">
+                            <div class="card-body">
+                                <blockquote class="card-bodyquote">
                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                 </blockquote>
@@ -1184,14 +1193,14 @@
                     <div class="bs-component">
                         <div class="card">
                             <h3 class="card-header">Card header</h3>
-                            <div class="card-block">
+                            <div class="card-body">
                                 <h5 class="card-title">Special title treatment</h5>
                                 <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                             </div>
                             
                             <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
                             
-                            <div class="card-block">
+                            <div class="card-body">
                                 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                 <a href="#" class="card-link">Card link</a>
                                 <a href="#" class="card-link">Another link</a>