N°4283 Centralize blocks spacing between each other in block-integration

css/backoffice/application/tabular-fields/_tabular-fields-selector.scss

@@ -32,5 +32,5 @@
 }
 
 #form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf {
-  margin-top: $ibo-panel--spacing-top;
+  margin-top: $ibo-spacing-600;
 }

css/backoffice/base/_base.scss

@@ -86,11 +86,4 @@ a{
 	&:active{
 		color: var(--ibo-hyperlink-color--on-active);
 	}
-}
-
-/* Input reset */
-/* - Standard spacing between label and input */
-select + label, label + select, label > select,
-input + label, label + input, label > input {
-  margin-left: 0.5rem;
 }

css/backoffice/blocks-integrations/_all.scss

@@ -3,17 +3,22 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-@import "dashlet-within-dashboard";
+@import "alert/all";
+@import "button/all";
+@import "collapsible-section/all";
+@import "datatable/all";
+@import "display-block/all";
+@import "field/all";
+@import "fieldset/all";
+@import "input/all";
+@import "panel/all";
+@import "pill/all";
+@import "dashlet/all";
 @import "add-to-dashboard";
 @import "caselog-entry-form-within-activity-panel";
-@import "datatable-within-panel";
 @import "tab-container-within-panel";
-@import "panel-within-main-content";
-@import "panel-within-modal";
 @import "object-details-with-tab-container";
 @import "medallion-with-blocklist";
-@import "input-within-datatable";
 @import "field-badge-within-datatable";
 @import "jquery-blockui-within-dialog";
-@import "jquery-blockui-within-datatable";
-@import "collapsible-section-within-caselog-list";
+@import "jquery-blockui-within-datatable";

css/backoffice/blocks-integrations/alert/_alert-with-blocks.scss

@@ -0,0 +1,16 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-alert--spacing-top--with-same-block: $ibo-spacing-200 !default;
+$ibo-alert--spacing-top--with-other-blocks: $ibo-spacing-500 !default;
+
+/* Spacing between alert blocks */
+.ibo-alert + .ibo-alert {
+	margin-top: $ibo-alert--spacing-top--with-same-block;
+}
+/* Spacing between an alert block and something else */
+.ibo-alert +  .ibo-block:not(.ibo-alert) {
+	margin-top: $ibo-alert--spacing-top--with-other-blocks;
+}

css/backoffice/blocks-integrations/alert/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "alert-with-blocks";

css/backoffice/blocks-integrations/button/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "button-with-button";
+@import "button-with-button-group";

css/backoffice/blocks-integrations/button/_button-with-button-group.scss

@@ -0,0 +1,13 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-button--spacing-left--with-button-group: $ibo-button--spacing-left--with-same-block !default;
+
+/* Reset siblings spacing */
+.ibo-button-group + .ibo-button-group,
+.ibo-button + .ibo-button-group,
+.ibo-button-group + .ibo-button{
+  margin-left: $ibo-button--spacing-left--with-button-group;
+}

css/backoffice/blocks-integrations/button/_button-with-button.scss

@@ -0,0 +1,10 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-button--spacing-left--with-same-block: $ibo-spacing-200 !default;
+
+.ibo-button + .ibo-button {
+  margin-left: $ibo-button--spacing-left--with-same-block;
+}

css/backoffice/blocks-integrations/collapsible-section/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "collapsible-section-with-blocks";
+@import "collapsible-section-within-caselog-list";

css/backoffice/blocks-integrations/collapsible-section/_collapsible-section-with-blocks.scss

@@ -0,0 +1,17 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-collapsible-section--spacing-top--with-same-block: $ibo-spacing-400 !default;
+$ibo-collapsible-section--spacing-top--with-other-blocks: $ibo-spacing-500 !default;
+
+/* Spacing between collapsible-section blocks */
+.ibo-collapsible-section + .ibo-collapsible-section {
+  margin-top: $ibo-collapsible-section--spacing-top--with-same-block;
+}
+
+/* Spacing between an alert block and something else */
+.ibo-collapsible-section + .ibo-block:not(.ibo-collapsible-section) {
+  margin-top: $ibo-collapsible-section--spacing-top--with-other-blocks;
+}

css/backoffice/blocks-integrations/dashlet/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "dashlet-within-dashboard";

css/backoffice/blocks-integrations/datatable/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "datatable-with-blocks";
+@import "datatable-within-panel";

css/backoffice/blocks-integrations/datatable/_datatable-with-blocks.scss

@@ -0,0 +1,10 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-datatable--spacing-top--with-other-blocks: $ibo-spacing-200 !default;
+
+.ibo-datatable + .ibo-block{
+  margin-top: $ibo-datatable--spacing-top--with-other-blocks;
+}

css/backoffice/blocks-integrations/display-block/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "display-block-with-blocks";

css/backoffice/blocks-integrations/display-block/_display-block-with-blocks.scss

@@ -0,0 +1,16 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-display-block--spacing-top--with-same-block: $ibo-spacing-600 !default;
+$ibo-display-block--spacing-top--with-other-block: $ibo-spacing-500 !default;
+
+
+.display_block + .display_block {
+  margin-top: $ibo-display-block--spacing-top--with-same-block;
+}
+
+.display_block + .ibo-block:not(.display_block) {
+  margin-top: $ibo-display-block--spacing-top--with-other-block;
+}

css/backoffice/blocks-integrations/field/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "field-with-field";

css/backoffice/blocks-integrations/field/_field-with-field.scss

@@ -0,0 +1,13 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+$ibo-field--spacing-top--with-same-block: $ibo-spacing-500 !default;
+
+.ibo-field + .ibo-field {
+  margin-top: $ibo-field--spacing-top--with-same-block;
+}
+
+.form_field + .form_field {
+  margin-top: $ibo-field--spacing-top--with-same-block;
+}

css/backoffice/blocks-integrations/fieldset/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "fieldset-with-fieldset";
+@import "fieldset-with-multicolumn";

css/backoffice/blocks-integrations/fieldset/_fieldset-with-fieldset.scss

@@ -0,0 +1,10 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-fieldset--spacing-left--with-fieldset: $ibo-spacing-800 !default;
+
+.ibo-fieldset + .ibo-fieldset:not(.ibo-column) {
+    margin-top: $ibo-fieldset--spacing-left--with-fieldset;
+}

css/backoffice/blocks-integrations/fieldset/_fieldset-with-multicolumn.scss

@@ -0,0 +1,11 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-fieldset--spacing-left--with-multicolumn: $ibo-spacing-800 !default;
+
+
+.ibo-multi-column + .ibo-fieldset {
+  margin-top: $ibo-fieldset--spacing-left--with-multicolumn;
+}

css/backoffice/blocks-integrations/input/_all.scss

@@ -0,0 +1,7 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "input-with-label";
+@import "input-within-datatable";

css/backoffice/blocks-integrations/input/_input-with-label.scss

@@ -0,0 +1,14 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-input--spacing-left--with-label: $ibo-spacing-300 !default;
+
+
+/* Input reset */
+/* - Standard spacing between label and input */
+select + label, label + select, label > select,
+input + label, label + input, label > input {
+  margin-left: $ibo-input--spacing-left--with-label;
+}

css/backoffice/blocks-integrations/panel/_all.scss

@@ -0,0 +1,8 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "panel-with-blocks";
+@import "panel-within-main-content";
+@import "panel-within-modal";

css/backoffice/blocks-integrations/panel/_panel-with-blocks.scss

@@ -0,0 +1,15 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+$ibo-panel--spacing-top--with-same-block: $ibo-spacing-600 !default;
+$ibo-panel--spacing-top--with-other-block: $ibo-spacing-500 !default;
+
+
+.ibo-panel + .ibo-panel {
+  margin-top: $ibo-panel--spacing-top--with-same-block;
+}
+
+.ibo-panel + .ibo-block:not(.ibo-panel) {
+  margin-top: $ibo-panel--spacing-top--with-other-block;
+}

css/backoffice/blocks-integrations/pill/_all.scss

@@ -0,0 +1,6 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+@import "pill-with-pill";

css/backoffice/blocks-integrations/pill/_pill-with-pill.scss

@@ -0,0 +1,11 @@
+/*
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-pill--spacing-left--with-same-block: $ibo-spacing-500 !default;
+
+
+.ibo-pill + .ibo-pill {
+  margin-left: $ibo-pill--spacing-left--with-same-block;
+}

css/backoffice/components/_alert.scss

@@ -4,8 +4,6 @@
  */
 
 /* SCSS variables */
-$ibo-alert--spacing-top--with-same-block: 6px !default;
-$ibo-alert--spacing-top--with-other-blocks: 16px !default;
 $ibo-alert--padding-y: 18px !default;
 $ibo-alert--padding-x: 20px !default;
 $ibo-alert--min-height: 30px !default;
@@ -116,15 +114,6 @@ $ibo-alert-colors: (
 	margin-top: $ibo-alert--body--margin-top;
 }
 
-/* Spacing between alert blocks */
-.ibo-alert + .ibo-alert {
-	margin-top: $ibo-alert--spacing-top--with-same-block;
-}
-/* Spacing between an alert block and something else */
-.ibo-alert + :not(.ibo-alert) {
-	margin-top: $ibo-alert--spacing-top--with-other-blocks;
-}
-
 .ibo-alert--action-button{
 	position: absolute;
 	cursor: pointer;

css/backoffice/components/_button-group.scss

@@ -63,11 +63,4 @@ $ibo-button-group--elements-separator--border-left: 1px solid transparent !defau
       }
     }
   }
-}
-
-/* Reset siblings spacing */
-.ibo-button-group + .ibo-button-group,
-.ibo-button + .ibo-button-group,
-.ibo-button-group + .ibo-button{
-  margin-left: $ibo-button--sibling-spacing;
 }

css/backoffice/components/_button.scss

@@ -3,7 +3,6 @@
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
-$ibo-button--sibling-spacing: 5px !default;
 $ibo-button--padding-y: 6px !default;
 $ibo-button--padding-x: 9px !default;
 $ibo-button--border: 0 !default;
@@ -475,10 +474,7 @@ $ibo-button-colors: (
   text-transform: uppercase;
   white-space: nowrap; /* To force sub elements to be on 1 line */
   @extend %ibo-font-ral-sembol-100;
-
-  & + .ibo-button {
-    margin-left: $ibo-button--sibling-spacing;
-	}
+  
 
   &.ibo-action-button {
     float: right;

css/backoffice/components/_collapsible-section.scss

@@ -4,7 +4,6 @@
  */
 
 /* SCSS variables */
-$ibo-collapsible-section--margin-top: 3rem !default;
 $ibo-collapsible-section--title--color: $ibo-panel--title--color !default;
 $ibo-collapsible-section--body--background-color: $ibo-panel--body--background-color !default;
 $ibo-collapsible-section--highlight--height: 8px !default;
@@ -22,9 +21,6 @@ $ibo-collapsible-section--body--border-color: $ibo-panel--base-border-color !def
 
 
 /* Rules */
-.ibo-collapsible-section {
-	margin: $ibo-collapsible-section--margin-top auto;
-}
 
 .ibo-collapsible-section--header {
 	display: flex;
@@ -64,6 +60,7 @@ $ibo-collapsible-section--body--border-color: $ibo-panel--base-border-color !def
 		}
 
 		.ibo-collapsible-section--action-button {
+      align-self: center;
 			&.ibo-collapsible-section--maximize-button, &.ibo-collapsible-section--minimize-button {
         color: $ibo-collapsible-section--maximize-minimize-button--color;
 				margin-right: $ibo-collapsible-section--maximize-minimize-button--right;

css/backoffice/components/_field.scss

@@ -4,7 +4,6 @@
  */
 
 /* SCSS variables */
-$ibo-field--sibling-spacing: 16px !default;
 $ibo-field--value--color: $ibo-color-grey-800 !default;
 
 $ibo-field--label--description--content: "?" !default;
@@ -69,10 +68,6 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
       }
     }
   }
-
-  & ~ .ibo-field {
-    margin-top: $ibo-field--sibling-spacing;
-  }
 }
 
 /* Large field = Label on top, value below */
@@ -255,6 +250,3 @@ $ibo-field--enable-bulk--checkbox--margin-left: 8px !default;
   margin-left: $ibo-field--enable-bulk--checkbox--margin-left;
 }
 
-.form_field ~ .form_field {
-    margin-top: $ibo-field--sibling-spacing;
- }

css/backoffice/components/_panel.scss

@@ -39,8 +39,6 @@ $ibo-panel-colors: (
 ) !default;
 
 /* - Specific variables for the block */
-$ibo-panel--spacing-top: 24px !default;
-
 $ibo-panel--highlight--width: 100% !default;
 $ibo-panel--highlight--height: 8px !default;
 $ibo-panel--highlight--background-color: 8px !default;
@@ -84,14 +82,12 @@ $ibo-panel--title--color: $ibo-color-grey-900 !default;
 $ibo-panel--subtitle--font-size--is-sticking: $ibo-font-size-100 !default;
 $ibo-panel--subtitle--color: $ibo-color-grey-800 !default;
 
-$ibo-panel--collapsible-toggler--margin-right: 8px !default;
+$ibo-panel--collapsible-toggler--margin-right: $ibo-spacing-300 !default;
 $ibo-panel--collapsible-toggler--font-size: $ibo-font-size-250 !default;
 $ibo-panel--collapsible-toggler--color: $ibo-color-grey-700 !default;
 
 /* Rules */
-.ibo-panel + .ibo-panel {
-  margin-top: $ibo-panel--spacing-top;
-}
+
 
 .ibo-panel {
   --ibo-main-color: map-get($ibo-panel-colors, 'neutral'); /* --ibo-main-color is to allow overload from custom dynamic value from the DM. The overload will be done through an additional CSS class of a particular DM class or DM attribute */

css/backoffice/components/_pill.scss

@@ -4,7 +4,7 @@
  */
 
 /* SCSS variables */
-$ibo-pill--margin: 4px 8px !default;
+$ibo-pill--margin-y: 4px !default;
 $ibo-pill--padding: 6px 10px !default;
 $ibo-pill--max-width: 240px !default;
 $ibo-pill--border-radius: $ibo-border-radius-300 !default;
@@ -84,7 +84,8 @@ $ibo-pill-states-colors: (
 
   @extend %ibo-fully-centered-content;
   max-width: $ibo-pill--max-width;
-  margin: $ibo-pill--margin;
+  margin-top: $ibo-pill--margin-y;
+  margin-bottom: $ibo-pill--margin-y;
   padding: $ibo-pill--padding;
   border-radius: $ibo-pill--border-radius;