Style in action selector improved.

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

@@ -21,16 +21,18 @@
     </ng-container>
 
     <ng-container content>
-        <ng-container *ngIf="step === 1">        
+        <div class="row no-gutters" *ngIf="step === 1">
-            <span *ngFor="let trigger of ruleTriggers | sqxKeys" class="rule-element rule-element-{{trigger}}" (click)="selectTriggerType(trigger)">
+            <div *ngFor="let trigger of ruleTriggers | sqxKeys" class="col-12 col-md-6 col-lg-4">
-                <span class="rule-element-icon">
+                <div class="rule-element rule-element-{{trigger}} " (click)="selectTriggerType(trigger)">
-                    <i class="icon-trigger-{{trigger}}"></i>
+                    <span class="rule-element-icon">
-                </span>
+                        <i class="icon-trigger-{{trigger}}"></i>
-                <span class="rule-element-text">
+                    </span>
-                    {{ruleTriggers[trigger].name}}
+                    <span class="rule-element-text">
-                </span>
+                        {{ruleTriggers[trigger].name}}
-            </span>
+                    </span>
-        </ng-container>
+                </div>
+            </div>
+        </div>
         
         <ng-container *ngIf="step === 2 && schemas">
             <form [formGroup]="triggerForm.form" (submit)="saveTrigger()">  
@@ -54,16 +56,18 @@
             </form>
         </ng-container>
     
-        <ng-container *ngIf="step === 3">        
+        <div class="row no-gutters" *ngIf="step === 3">
-            <span *ngFor="let action of ruleActions | sqxKeys" class="rule-element rule-element-{{action}}" (click)="selectActionType(action)">
+            <div *ngFor="let action of ruleActions | sqxKeys" class="col-12 col-md-6 col-lg-4">
-                <span class="rule-element-icon">
+                <div class="rule-element rule-element-{{action}} " (click)="selectActionType(action)">
-                    <i class="icon-action-{{action}}"></i>
+                    <span class="rule-element-icon">
-                </span>
+                        <i class="icon-action-{{action}}"></i>
-                <span class="rule-element-text">
+                    </span>
-                    {{ruleActions[action].name}}
+                    <span class="rule-element-text">
-                </span>
+                            {{ruleActions[action].name}}
-            </span>
+                    </span>
-        </ng-container>
+                </div>
+            </div>
+        </div>
     
         <ng-container *ngIf="step === 4">
             <form [formGroup]="actionForm.form" (submit)="saveAction()">

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

@@ -2,5 +2,5 @@
 @import '_mixins';
 
 .rule-element {
-    margin-right: .5rem;
+    margin: .25rem;
 }

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

@@ -7,4 +7,8 @@ sqx-toggle {
 
 .rule-element {
     display: block;
+}
+
+h3 {
+    margin: 0;
 }

src/Squidex/app/theme/_rules.scss

@@ -38,12 +38,10 @@ $action-medium:           #00ab6c;
         @include transition(background-color .4s ease);
         color: $color-dark-foreground;
         cursor: pointer;
-        display: inline-block;
         line-height: 2.8rem;
         font-size: 1rem;
         font-weight: normal;
         padding-right: .8rem;
-        width: 15rem;
     }
 
     &-icon {