SCSS: Fix rules from 108bc2fa

- Don't nest selectors when there is no need to
- Use SCSS variables instead of CSS3 variables in SCSS files, otherwise we can't use SCSS functions. CSS3 variables should be kept for the front-end manipulations

css/backoffice/components/_datatable.scss

@@ -8,9 +8,12 @@ $ibo-datatable--toolbar--padding-y: 0 !default;
 $ibo-datatable--toolbar--text-color: $ibo-color-grey-700 !default;
 $ibo-datatable--toolbar--elements-spacing: 1rem !default;
 $ibo-datatable--toolbar--table-spacing: 18px !default;
-$ibo-datatable-panel--table-spacing: 48px !default;
 
+$ibo-datatable-header--text-color: $ibo-base-variable--text-color !default;
+
+$ibo-datatable-panel--table-spacing: 48px !default;
 $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default;
+
 $ibo-datatable--selection-validation-buttons-toolbar--margin-top: 10px !default;
 $ibo-list-column--max-height: 150px !default;
 
@@ -24,12 +27,7 @@ $ibo-fieldsorter--selected--background-color: $ibo-color-blue-200 !default;
   --ibo-datatable-panel--table-spacing: #{$ibo-datatable-panel--table-spacing};
 }
 
-.ibo-datatable {
-  .ibo-datatable-header {
-    color: var(--ibo-body-text-color);
-  }
-}
-
+/* Rules */
 .ibo-datatable--toolbar {
   display: flex;
   justify-content: space-between;
@@ -59,6 +57,10 @@ $ibo-fieldsorter--selected--background-color: $ibo-color-blue-200 !default;
   }
 }
 
+.ibo-datatable-header {
+  color: $ibo-datatable-header--text-color;
+}
+
 /* TODO 3.0.0: The lines below need to be refactored / placed in the right places (integrations, dedicated block / page, ...) */
 .ibo-datatable-panel > .ibo-panel--body {
   padding: $ibo-datatable-panel--body--padding;

css/backoffice/components/_title.scss

@@ -19,10 +19,6 @@ $ibo-title--icon-background--size--must-zoomout: 66.67% !default;
 
   color: $ibo-title--text-color;
   padding: $ibo-title--padding-y $ibo-title--padding-x;
-
-  .ibo-title--text {
-    @extend %ibo-font-ral-sembol-300;
-  }
 }
 
 .ibo-title--icon {
@@ -58,6 +54,10 @@ $ibo-title--icon-background--size--must-zoomout: 66.67% !default;
   @extend %ibo-font-size-300;
 }
 
+.ibo-title--text {
+  @extend %ibo-font-ral-sembol-300;
+}
+
 .ibo-title--subtitle {
   margin-top: 2px;
   margin-bottom: 2px;

css/backoffice/utils/variables/_all.scss

@@ -9,3 +9,5 @@
 @import "elevation";
 @import "path";
 @import "typography";
+// Important: Keep this partial last as it includes variables from the previous partials
+@import "base";

css/backoffice/utils/variables/_base.scss

@@ -0,0 +1,9 @@
+/*!
+ * @copyright   Copyright (C) 2010-2021 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+// These are the base variables used throughout the backoffice, if you don't know what to use, these are probably good :)
+
+$ibo-base-variable--text-color: $ibo-color-grey-900 !default;
+$ibo-base-variable--border-radius: $ibo-border-radius-300 !default;;