From c3a2133eaaa3d9043a8b37c6a03122aaaf3de096 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 3 Jul 2018 18:30:48 +0200
Subject: [PATCH] Style in action selector improved.

---
 .../pages/rules/rule-wizard.component.html    | 44 ++++++++++---------
 .../pages/rules/rule-wizard.component.scss    |  2 +-
 .../pages/rules/rules-page.component.scss     |  4 ++
 src/Squidex/app/theme/_rules.scss             |  2 -
 4 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html
index 52d82aa3e..d0b979c1f 100644
--- a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html
+++ b/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">        
-            <span *ngFor="let trigger of ruleTriggers | sqxKeys" class="rule-element rule-element-{{trigger}}" (click)="selectTriggerType(trigger)">
-                <span class="rule-element-icon">
-                    <i class="icon-trigger-{{trigger}}"></i>
-                </span>
-                <span class="rule-element-text">
-                    {{ruleTriggers[trigger].name}}
-                </span>
-            </span>
-        </ng-container>
+        <div class="row no-gutters" *ngIf="step === 1">
+            <div *ngFor="let trigger of ruleTriggers | sqxKeys" class="col-12 col-md-6 col-lg-4">
+                <div class="rule-element rule-element-{{trigger}} " (click)="selectTriggerType(trigger)">
+                    <span class="rule-element-icon">
+                        <i class="icon-trigger-{{trigger}}"></i>
+                    </span>
+                    <span class="rule-element-text">
+                        {{ruleTriggers[trigger].name}}
+                    </span>
+                </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">        
-            <span *ngFor="let action of ruleActions | sqxKeys" class="rule-element rule-element-{{action}}" (click)="selectActionType(action)">
-                <span class="rule-element-icon">
-                    <i class="icon-action-{{action}}"></i>
-                </span>
-                <span class="rule-element-text">
-                    {{ruleActions[action].name}}
-                </span>
-            </span>
-        </ng-container>
+        <div class="row no-gutters" *ngIf="step === 3">
+            <div *ngFor="let action of ruleActions | sqxKeys" class="col-12 col-md-6 col-lg-4">
+                <div class="rule-element rule-element-{{action}} " (click)="selectActionType(action)">
+                    <span class="rule-element-icon">
+                        <i class="icon-action-{{action}}"></i>
+                    </span>
+                    <span class="rule-element-text">
+                            {{ruleActions[action].name}}
+                    </span>
+                </div>
+            </div>
+        </div>
     
         <ng-container *ngIf="step === 4">
             <form [formGroup]="actionForm.form" (submit)="saveAction()">
diff --git a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss
index 524ddf08d..cdc25145f 100644
--- a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss
+++ b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss
@@ -2,5 +2,5 @@
 @import '_mixins';
 
 .rule-element {
-    margin-right: .5rem;
+    margin: .25rem;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/features/rules/pages/rules/rules-page.component.scss b/src/Squidex/app/features/rules/pages/rules/rules-page.component.scss
index ae822022f..e4dc92750 100644
--- a/src/Squidex/app/features/rules/pages/rules/rules-page.component.scss
+++ b/src/Squidex/app/features/rules/pages/rules/rules-page.component.scss
@@ -7,4 +7,8 @@ sqx-toggle {
 
 .rule-element {
     display: block;
+}
+
+h3 {
+    margin: 0;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/theme/_rules.scss b/src/Squidex/app/theme/_rules.scss
index bcc1c6f7c..bfdc931e0 100644
--- a/src/Squidex/app/theme/_rules.scss
+++ b/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 {