From d1dfa095bbe3ec272ba1e727613f22978c3aa138 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 11 Jan 2021 10:15:11 -0500
Subject: [PATCH] Afform - use core flex styles

---
 css/civicrm.css                                   | 3 +++
 ext/afform/admin/ang/afGuiEditor.css              | 9 ---------
 ext/afform/admin/ang/afGuiEditor/afGuiEditor.html | 6 +++---
 ext/afform/admin/ang/afGuiEditor/afGuiEntity.html | 2 +-
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index 519289821c..b4d3a785a2 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -36,6 +36,9 @@
 .crm-container .crm-flex-box > .crm-flex-4 {
   flex: 4;
 }
+.crm-container .crm-flex-box > .crm-flex-5 {
+  flex: 5;
+}
 
 .crm-container .crm-draggable {
   cursor: move;
diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css
index 3cc94c35b1..ccacca1d67 100644
--- a/ext/afform/admin/ang/afGuiEditor.css
+++ b/ext/afform/admin/ang/afGuiEditor.css
@@ -1,14 +1,8 @@
-#afGuiEditor {
-  display: flex;
-}
-
 #afGuiEditor #afGuiEditor-palette {
-  flex: 1;
   margin-right: 5px;
 }
 
 #afGuiEditor #afGuiEditor-canvas {
-  flex: 1.5;
   margin-left: 5px;
 }
 
@@ -42,12 +36,9 @@
 }
 
 #afGuiEditor .af-gui-columns {
-  display: flex;
   position: relative;
-  flex-wrap: wrap;
 }
 #afGuiEditor .af-gui-columns > * {
-  flex: 1;
   min-width: 200px;
 }
 
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.html b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.html
index 49a4208b1d..acd32c0056 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.html
@@ -1,4 +1,4 @@
-<div id="afGuiEditor">
-  <div id="afGuiEditor-palette" ng-include="'~/afGuiEditor/afGuiEditorPalette.html'"></div>
-  <div id="afGuiEditor-canvas" ng-include="'~/afGuiEditor/afGuiEditorCanvas.html'"></div>
+<div id="afGuiEditor" class="crm-flex-box">
+  <div id="afGuiEditor-palette" class="crm-flex-3" ng-include="'~/afGuiEditor/afGuiEditorPalette.html'"></div>
+  <div id="afGuiEditor-canvas" class="crm-flex-5" ng-include="'~/afGuiEditor/afGuiEditorCanvas.html'"></div>
 </div>
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
index 833f31be72..f7c8e82357 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
@@ -1,4 +1,4 @@
-<div class="af-gui-columns">
+<div class="af-gui-columns crm-flex-box">
   <fieldset class="af-gui-entity-values">
     <legend>{{:: ts('Values:') }}</legend>
     <div class="form-inline" ng-if="getMeta().fields[fieldName]" ng-repeat="(fieldName, value) in $ctrl.entity.data">
-- 
2.25.1