Merge pull request #1071 from openmsupply/pre-build-B-1.0.12

Pre build b 1.0.12

Author: CarlosNZ

semantic/src/site/globals/site.overrides

@@ -72,11 +72,16 @@ a:hover {
   justify-content: center;
 }
 
-.flex-row-space_between {
+.flex-row-space-between {
   .flex-row();
   justify-content: space-between;
 }
 
+.flex-row-space_evenly {
+  .flex-row();
+  justify-content: space-evenly;
+}
+
 .flex-row-start {
   .flex-row();
   justify-content: flex-start;
@@ -97,8 +102,18 @@ a:hover {
   align-items: center;
 }
 
-.flex-row-space_between-center {
-  .flex-row-space_between();
+.flex-row-space-between-center {
+  .flex-row-space-between();
+  align-items: center;
+}
+
+.flex-row-space-between-center-wrap {
+  .flex-row-space-between-center();
+  flex-wrap: wrap;
+}
+
+.flex-row-space_evenly-center {
+  .flex-row-space_evenly();
   align-items: center;
 }
 
@@ -121,6 +136,12 @@ a:hover {
   .flex-row-start-center;
   flex-wrap: wrap;
 }
+
+.flex-row-end {
+  .flex-row();
+  width: 100%;
+  justify-content: flex-end;
+}
 .flex-column {
   display: flex;
   flex-direction: column;
@@ -174,6 +195,30 @@ a:hover {
   margin: 0px !important;
 }
 
+.full-width-container {
+  width: 100%;
+}
+
+.text-block-width {
+  max-width: 800px;
+}
+
+.right-margin-space-10 {
+  margin-right: 10px !important;
+}
+
+.left-margin-space-10 {
+  margin-left: 10px !important;
+}
+
+.flex-gap-10 {
+  gap: 10px;
+}
+
+.flex-gap-20 {
+  gap: 20px;
+}
+
 /*--------------------------------
    Login page
 ---------------------------------*/
@@ -1603,18 +1648,27 @@ a:hover {
 .io-wrapper {
   .flex-row();
   align-items: stretch;
-  margin: 2px;
+  margin: 2px 2px 8px;
+  min-height: 25px;
   .io-component {
     flex-grow: 1;
     margin: 0px;
-    text-align: center;
-    white-space: nowrap;
-    border: 2px solid @indicatorColor;
+    border: 2px solid @surfacesLight;
     border-radius: @borderRadius;
     font-size: 12px;
     padding: 2px;
     padding-left: 10px;
     padding-right: 10px;
+    line-height: 1.4285em // resets height set by Modal;;
+  }
+
+  .ui.checkbox {
+    vertical-align: middle;
+  }
+
+  .io-component-negative {
+    .io-component();
+    border: 1px solid @surfacesDark;
   }
 
   input,
@@ -1624,18 +1678,24 @@ a:hover {
     padding: 0px !important;
     font-size: 12px !important;
     width: none !important;
-    min-width: 200px;
   }
 
   .key {
     border-end-end-radius: 0px;
     border-start-end-radius: 0px;
-    background-color: @indicatorColor;
+    background-color: @surfacesLight;
     a {
       text-decoration: underline;
     }
   }
 
+  .key-negative {
+    .key();
+    background-color: @headersInteractiveMed;
+    border: 1px solid @headersInteractiveMed;
+    color: white;
+  }
+
   .value {
     border-start-start-radius: 0px !important;
     border-end-start-radius: 0px !important;
@@ -1646,7 +1706,7 @@ a:hover {
 
 .from-existing-dropdown {
   font-size: 12px !important;
-  border: 2px solid @indicatorColor !important;
+  border: 1px solid @surfacesDark !important;
   border-radius: @borderRadius !important;
   margin: 2px !important;
 }
@@ -1661,7 +1721,7 @@ a:hover {
 .longer {
   input,
   textarea {
-    min-width: 600px !important;
+    min-width: 500px !important;
   }
 }
 .long {
@@ -1693,7 +1753,15 @@ a:hover {
   width: @applicationListWidth;
   .template-builder-info-bar {
     .flex-row();
-    justify-content: center;
+    justify-content: flex-end;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+  .template-builder-content {
+    .flex-column-center();
+    background-color: @surfacesWhite;
+    padding: 20px 2rem 30px;
+    margin-top: 20px;
   }
   .template-builder-tabs {
     .flex-row();
@@ -1714,7 +1782,7 @@ a:hover {
   margin: 3px;
   padding: 20px;
   border-radius: @borderRadius;
-  background: @surfacesWhite;
+  background: @surfacesLight;
   p {
     font-size: @slightlySmallerText;
     margin-top: 10px;
@@ -1734,15 +1802,30 @@ a:hover {
   }
 }
 
+.page-controller {
+  background-color: @surfacesLight;
+  width: fit-content;
+  padding: 10px;
+  border: 1px solid @surfacesMed;
+  border-radius: @borderRadius;
+  margin: 15px;
+}
+
+.filter-joins {
+  .ui.label {
+    margin-right: 7px;
+    margin-bottom: 7px;
+  }
+}
+
 .builder-page-elements-wrapper {
   background: white;
   padding: 10px;
-  margin: 10px;
+  min-width: 900px;
   .element-config-options-container {
     .flex-row();
     align-items: flex-start;
     justify-content: flex-end;
-    width: 100px;
     margin-right: 30px;
     margin: 5px;
   }
@@ -1752,15 +1835,17 @@ a:hover {
 }
 
 .evaluation-container {
+  width: 100%;
   border-radius: @borderRadius;
   border: 1px solid @indicatorColor;
   padding: 2px;
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
   margin: 2px;
   background-color: @surfacesWhite;
   .evaluation-container-title {
-    .flex-row-center-center();
+    .flex-row-start-center();
+    white-space: nowrap;
   }
   .evaluation-container-content {
     .flex-row() !important;
@@ -1770,29 +1855,58 @@ a:hover {
 }
 
 .config-modal {
-  width: 90% !important;
+  min-width: 700px !important;
+  max-width: 90% !important;
+  width: fit-content !important;
+  border-radius: @borderRadius !important;
 
   .config-modal-container {
     .flex-column-center-center();
-    padding: 10px;
+    padding: 0 0 10px 0;
+    border-radius: @borderRadius !important;
   }
   .config-modal-info {
     background-color: @surfacesWhite !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .config-modal-header {
+    .flex-row-center-center();
+    gap: 50px;
+    background-color: @surfacesLight;
+    width: 100%;
+    margin-top: 0;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-top-left-radius: @borderRadius;
+    border-top-right-radius: @borderRadius;
   }
 }
 
+.alert-success {
+  position: absolute !important;
+  bottom: 60px;
+  left: 20px;
+  width: fit-content !important;
+  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12),
+    0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+}
+
 .object-properties-container {
   .flex-column-start-center();
   margin-left: 30px;
+  max-width: 500px;
 }
 .evaluator-operator-container {
   .flex-column-start-stretch();
   background: rgba(0, 0, 0, 0.03);
   padding: 5px;
   margin: 2px;
   border-radius: @borderRadius;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  background-color: rgba(50, 252, 50, 0.01);
+  border: 1px solid @surfacesMed;
 }
 
 .config-container {
@@ -1805,7 +1919,12 @@ a:hover {
 
 .config-container-alternate {
   .config-container();
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: @surfacesLight;
+}
+
+.config-container-outline {
+  .config-container();
+  border: 1px solid @surfacesMed;
 }
 
 /*******************************