SCSS: Fix import ordering of the custom root folders

css/backoffice/README.md

@@ -7,6 +7,8 @@ This is a brief description of the SASS 7-1 system and how to use it.
 SCSS files are structured following the [7-1 pattern](https://sass-guidelin.es/#the-7-1-pattern). \
 @rveitch made a great summary with the following, which can also be found [here](https://gist.github.com/rveitch/84cea9650092119527bc).
 
+_Note: Folders with an * are customizations we made to the original 7-1 pattern to best fit our needs_  
+
 ```
 css/backoffice/
 |
@@ -42,11 +44,20 @@ css/backoffice/
 |   |– _forms.scss       # Forms
 |   ...                  # Etc…
 |
+|- *application/         # Elements that are not usable as a standalone (like componants and layouts are) and very application (the backoffice) specific
+|   |- display-block
+|   |- tabular-fields
+|   ...
+|
 |– pages/
 |   |– _home.scss        # Home specific styles
 |   |– _contact.scss     # Contact specific styles
 |   ...                  # Etc…
 |
+|- *blocks-integrations  # Specific rules for the integration of a block with another one, those kind of rules should never be in the block partial directly
+|   |- _panel-with-datatable.scss   # Changes the negative margins of the datatable so it overlaps the panel's original padding
+|   ...
+|
 |– themes/
 |   |– _theme.scss       # Default theme
 |   |– _admin.scss       # Admin theme
@@ -68,6 +79,8 @@ To avoid common errors, files should be imported in the final file in the follow
 - Base
 - Components
 - Layout
+- \*Application
 - Pages
+- \*Block integrations
 - Themes
 - Shame file

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

@@ -11,7 +11,7 @@
     padding: 5px;
     border-width: 1px 1px 0;
     border-style: groove groove none;
-    background: $ibo-body-background-color;
+    background: $ibo-color-white-200;
   }
 
   td {

css/backoffice/blocks-integrations/_all.scss

@@ -6,7 +6,9 @@
 @import "dashlet-within-dashboard";
 @import "add-to-dashboard";
 @import "caselog-entry-form-within-activity-panel";
-@import "panel-with-tab-container";
 @import "panel-with-datatable";
+@import "panel-with-tab-container";
+@import "panel-within-main-content";
+@import "panel-within-modal";
 @import "object-details-with-tab-container";
 @import "medallion-with-blocklist";

css/backoffice/blocks-integrations/_panel-with-tab-container.scss

@@ -19,7 +19,6 @@ $ibo-panel-with-tab-container--margin-x: -1 * $ibo-panel--body--padding-x !defau
       margin-top: $ibo-panel-with-tab-container--padding-top;
       margin-left: $ibo-panel-with-tab-container--margin-x;
       margin-right: $ibo-panel-with-tab-container--margin-x;
-      height: 80vh;
 
       > .ibo-tab-container--tab-container-list {
         height: 100%;

css/backoffice/layout/_all.scss

@@ -27,4 +27,3 @@
 @import "wizard-container/wizard-container";
 @import "object/object-details";
 @import "activity-panel/all";
-@import "blocks-integrations/all";

css/backoffice/main.scss

@@ -21,8 +21,9 @@
 @import "base/all";
 @import "components/all";
 @import "layout/all";
-@import "pages/all";
 @import "application/all";
+@import "pages/all";
+@import "blocks-integrations/all";
 @import "themes/all";
 @import "fallback";
 @import "shame";