Z-index mini framework

app/assets/stylesheets/_z-index.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+
+@function above($element) {
+  @return $element + 1;
+}
+
+@function below($element) {
+  @return $element - 1;
+}
+
+// z-index values from libraries
+$navbar-static-top: 1000;
+$mui-tooltip-popper: 1500;
+
+$base: 0;
+
+// z-index values can be accessed with map-get($z-index, {element})
+$z-index: (
+  'sidebar-container': above($base),
+  'footer': above(above($base)),
+  'show-sidebar': below($navbar-static-top),
+  'body-nav': 1201,
+  'ck-body-wrapper': $mui-tooltip-popper,
+);

app/assets/stylesheets/course/layout.scss

@@ -124,7 +124,7 @@ $sidebar-margin-side: 1.5rem;
   #show-sidebar {
     border: 0;
     position: absolute;
-    z-index: 999;
+    z-index: map-get($z-index, 'show-sidebar');
   }
 
   #full-sidebar {

app/assets/stylesheets/layout.scss

@@ -2,6 +2,7 @@
 @import 'bootstrap';
 
 @import 'variables';
+@import 'z-index';
 @import 'bootstrap-datetimepicker';
 @import 'bootstrap-select';
 @import 'tokenfield-typeahead';

client/app/lib/components/core/fields/CKEditor.css → client/app/lib/components/core/fields/CKEditor.scss

@@ -1,7 +1,8 @@
 /* Below are needed to ensure ckeditor popup (eg link)
 is rendered properly in MUI dialog */
+@import 'z-index';
 
 .ck-body-wrapper {
   position: absolute;
-  z-index: 1500;
+  z-index: map-get($z-index, 'ck-body-wrapper');
 }

client/app/lib/components/core/fields/CKEditorRichText.tsx

@@ -7,7 +7,7 @@ import { cyan } from '@mui/material/colors';
 
 import axios from 'lib/axios';
 
-import './CKEditor.css';
+import './CKEditor.scss';
 
 interface Props {
   inputId: string;

client/app/lib/components/core/layouts/layout.scss

@@ -1,14 +1,16 @@
+@import 'z-index';
+
 body {
   padding-top: 60px;
 
   & > nav {
-    z-index: 1201 !important;
+    z-index: map-get($z-index, 'body-nav');
   }
 }
 
 .sidebarContainer {
   & > div {
-    z-index: 1;
+    z-index: map-get($z-index, 'sidebar-container');
 
     @media (min-width: 600px) {
       flex-basis: 33.33333%;
@@ -29,7 +31,7 @@ body {
 
 footer {
   background-color: #ffffff;
-  z-index: 2;
+  z-index: map-get($z-index, 'footer');
 }
 
 img {

client/webpack.common.js

@@ -4,6 +4,10 @@ const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const Dotenv = require('dotenv-webpack');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
+const styleLoader = 'style-loader';
+const cssLoader = 'css-loader';
+const sassLoader = 'sass-loader';
+
 module.exports = {
   entry: {
     coursemology: [
@@ -76,41 +80,65 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: [styleLoader, cssLoader],
         include: [
           resolve(__dirname, 'node_modules/rc-slider/assets'),
           resolve(
             __dirname,
             'node_modules/react-image-crop/dist/ReactCrop.css',
           ),
-          resolve(__dirname, 'app/lib/components/core/fields/CKEditor.css'),
         ],
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
+        use: [styleLoader, cssLoader, 'postcss-loader'],
         include: [resolve(__dirname, 'app/theme/index.css')],
       },
       {
         test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
+        use: [styleLoader, cssLoader, sassLoader],
         include: [resolve(__dirname, 'app/lib/styles')],
         exclude: /node_modules/,
       },
       {
         test: /\.scss$/,
         use: [
-          'style-loader',
+          styleLoader,
           {
-            loader: 'css-loader',
+            loader: cssLoader,
             options: {
               importLoaders: 1,
               modules: {
                 localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
               },
             },
           },
-          'sass-loader',
+          sassLoader,
+        ],
+        exclude: [
+          /node_modules/,
+          resolve(__dirname, 'app/lib/styles'),
+          resolve(__dirname, 'app/lib/components/core/layouts/layout.scss'),
+          resolve(__dirname, 'app/lib/components/core/fields/CKEditor.scss'),
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          styleLoader,
+          cssLoader,
+          {
+            loader: sassLoader,
+            options: {
+              sassOptions: {
+                includePaths: [join(__dirname, '..', 'app/assets/stylesheets')],
+              },
+            },
+          },
+        ],
+        include: [
+          resolve(__dirname, 'app/lib/components/core/layouts/layout.scss'),
+          resolve(__dirname, 'app/lib/components/core/fields/CKEditor.scss'),
         ],
         exclude: [/node_modules/, resolve(__dirname, 'app/lib/styles')],
       },