A view styling improvements.

src/Squidex/app/features/api/pages/graphql/graphql-page.component.scss

@@ -1,7 +1,7 @@
 @import '_vars';
 @import '_mixins';
 
-:host /deep/ {
+::ng-deep {
     @import '~graphiql/graphiql';
 
     .graphiql-container {

src/Squidex/app/features/apps/pages/news-dialog.component.scss

@@ -1,7 +1,7 @@
 @import '_vars';
 @import '_mixins';
 
-:host /deep/ {
+::ng-deep {
     img {
         @include box-shadow(0, 4px, 20px, .2);
         width: 80%;

src/Squidex/app/features/apps/pages/onboarding-dialog.component.scss

@@ -19,7 +19,7 @@ p {
     max-width: 489px;
 }
 
-:host /deep/ .modal {
+::ng-deep .modal {
     &-content,
     &-dialog {
         min-height: $size-height;

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

@@ -6,7 +6,7 @@
     padding: 1rem;
 }
 
-:host /deep/ {
+::ng-deep {
     .search {
         .form-control {
             @include border-radius-right;

src/Squidex/app/features/content/pages/content/content-history-page.component.scss

@@ -1,7 +1,7 @@
 @import '_vars';
 @import '_mixins';
 
-:host /deep/ {
+::ng-deep {
     .user-ref {
         color: $color-title;
     }

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

@@ -1,7 +1,7 @@
 @import '_vars';
 @import '_mixins';
 
-:host /deep/ .search-form {
+::ng-deep .search-form {
     display: block;
 }
 

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

@@ -1,7 +1,7 @@
 @import '_vars';
 @import '_mixins';
 
-:host /deep/ {
+::ng-deep {
     .ui-separator {
         border-color: $color-border !important;
         font-size: 1.2rem;

src/Squidex/app/features/content/shared/contents-selector.component.scss

@@ -1,10 +1,10 @@
 @import '_vars';
 @import '_mixins';
 
-:host /deep/ .modal-body {
+::ng-deep .modal-body {
     background: $color-background;
 }
 
-:host /deep/ .modal-tabs {
+::ng-deep .modal-tabs {
     background: $color-dark-foreground;
 }

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

@@ -19,7 +19,7 @@
     }
 }
 
-:host /deep/ canvas {
+::ng-deep canvas {
     height: 12rem !important;
     margin-top: -1rem;
     margin-bottom: 0;

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

@@ -22,6 +22,10 @@
 
     <ng-container content>
         <div class="row no-gutters" *ngIf="step === 1">
+            <sqx-form-alert marginTop="0">
+                The selection of the trigger type cannot be changed later.
+            </sqx-form-alert>
+
             <div *ngFor="let triggerType of ruleTriggers | sqxKeys" class="col-12 col-md-6">
                 <div class="rule-element" (click)="selectTriggerType(triggerType)">
                     <sqx-rule-element [type]="triggerType" [isSmall]="false" [element]="ruleTriggers[triggerType]"></sqx-rule-element>
@@ -68,6 +72,10 @@
         </ng-container>
     
         <div class="row no-gutters" *ngIf="step === 3">
+            <sqx-form-alert marginTop="0">
+                The selection of the action type cannot be changed later.
+            </sqx-form-alert>
+
             <div *ngFor="let actionType of ruleActions | sqxKeys" class="col-12 col-md-6">
                 <div class="rule-element" (click)="selectActionType(actionType)">
                     <sqx-rule-element [type]="actionType" [isSmall]="false" [element]="ruleActions[actionType]"></sqx-rule-element>

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss

@@ -2,7 +2,7 @@
 @import '_mixins';
 
 .rule-element {
-    margin: .25rem;
+    padding-right: .25rem;
 }
 
 .wizard-title {

src/Squidex/app/features/schemas/pages/schema/field-wizard.component.scss

@@ -3,7 +3,7 @@
 
 $icon-size: 4.5rem;
 
-:host /deep/ .table-items-row-details-tab {
+::ng-deep .table-items-row-details-tab {
     padding: 1.5rem 1.75rem;
 }
 

src/Squidex/app/features/schemas/pages/schemas/schema-form.component.scss

@@ -8,7 +8,7 @@ $icon-size: 4.5rem;
     margin-left: -.5rem;
 }
 
-:host /deep/ .editor {
+::ng-deep .editor {
     height: 15rem !important;
     margin-bottom: .5rem;
     margin-top: 0;

src/Squidex/app/framework/angular/forms/code-editor.component.scss

@@ -3,7 +3,7 @@
 
 // sass-lint:disable class-name-format
 
-:host /deep/ {
+::ng-deep {
     .ace_editor {
         background: $color-dark-foreground;
         border: 1px solid $color-input;

src/Squidex/app/framework/angular/forms/color-picker.component.scss

@@ -1,7 +1,7 @@
 @import '_mixins';
 @import '_vars';
 
-:host /deep/ {
+::ng-deep {
     .color-picker {
         & {
             border-color: $color-border;

src/Squidex/app/framework/angular/forms/form-alert.component.ts

@@ -9,8 +9,15 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
     selector: 'sqx-form-alert',
+    styles: [`
+        :host {
+            display: block;
+            min-width: 100%;
+            max-width: 100%;
+        }
+    `],
     template: `
-        <div class="alert alert-hint mt-2 {{class}}">
+        <div class="alert alert-hint mt-{{marginTop}} mb-{{marginBottom}} {{class}}">
             <i class="icon-info-outline"></i> <ng-content></ng-content>
         </div>`,
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -18,4 +25,10 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 export class FormAlertComponent {
     @Input()
     public class: string;
+
+    @Input()
+    public marginTop = 2;
+
+    @Input()
+    public marginBottom = 4;
 }

src/Squidex/app/framework/angular/forms/json-editor.component.scss

@@ -3,7 +3,7 @@
 
 // sass-lint:disable class-name-format
 
-:host /deep/ {
+::ng-deep {
     .ace_editor {
         background: $color-dark-foreground;
         border: 1px solid $color-input;

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

@@ -44,7 +44,7 @@ $list-height: 2.375rem;
     padding: 0;
 }
 
-:host /deep/ {
+::ng-deep {
     .form-control {
         &.disabled,
         &:disabled {

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

@@ -1,7 +1,7 @@
 @import '_vars';
 @import '_mixins';
 
-:host /deep/ {
+::ng-deep {
     .search {
         .form-control {
             @include border-radius-right;

src/Squidex/app/shared/components/history-list.component.scss

@@ -1,7 +1,7 @@
 @import '_vars';
 @import '_mixins';
 
-:host /deep/ {
+::ng-deep {
     .user-ref {
         color: $color-title;
     }