Display: Use @use instead of @import for SCSS code

assets/css/_tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

assets/css/app.scss

@@ -1,6 +1,5 @@
-@tailwind base;
+@use "./tailwind" as *;
-@tailwind components;
+@use "./scss" as *;
-@tailwind utilities;
 
 @import '~cropper/dist/cropper.css';
 //@import "~flag-icons/sass/flag-icons.scss";
@@ -8,7 +7,7 @@
 @import "~bootstrap-daterangepicker/daterangepicker.css";
 //@import '~jquery-ui/themes/base/all.css';
 
-@import "tinymce/skins/ui/oxide/skin.css";
+@import "~tinymce/skins/ui/oxide/skin.css";
 @import './editor_content.css';
 
 @layer utilities {
@@ -326,8 +325,6 @@
   }
 }
 
-@import "scss/index.scss";
-
 .field > small.p-error {
   @apply text-error;
 }
@@ -853,14 +850,6 @@ form .field {
   }
 }
 
-//@import 'primevue-md-light-indigo/theme.css';
-//@import '~primevue/resources/primevue.min.css';
-//@import '~primeflex/primeflex.css';
-//@import "~primeicons/primeicons.css";
-
-@import 'primeflex/core/_variables.scss';
-@import 'primeflex/core/_formlayout.scss';
-
 //@import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css";
 @import "~@fancyapps/fancybox/dist/jquery.fancybox.css";
 @import "~timepicker/jquery.timepicker.min.css";

assets/css/legacy/frameReadyLoader.scss

@@ -1,6 +1,6 @@
-@tailwind base;
+@use "../tailwind";
-@tailwind components;
+@use "../scss/settings/typography" as *;
-@tailwind utilities;
+@use "../scss/libs/mediaelementjs/styles" as *;
 
 @layer base {
   :root {
@@ -37,10 +37,6 @@
   }
 }
 
-@import "../scss/settings/typography";
-
-@import "../scss/libs/mediaelementjs/styles";
-
 body {
   @apply prose max-w-none space-y-4
     prose-h1:text-h1

assets/css/scss/atoms/_form.scss

@@ -55,13 +55,48 @@
 }
 
 .field {
+  @apply mb-4;
+
   > small {
-    @apply text-caption text-primary;
+    @apply text-caption text-primary mt-1;
   }
 
   &-group {
     @apply flex gap-4 flex-wrap mb-4 items-start;
   }
+
+  &.grid {
+    @apply mt-0;
+  }
+}
+
+.formgrid {
+  &.grid {
+    @apply mt-0;
+  }
+}
+
+.formgroup-inline {
+  @apply flex flex-wrap items-start;
+
+  .field,
+  .field-checkbox,
+  .field-radiobutton {
+    @apply mr-4;
+
+    > label {
+      @apply mr-2 mb-0;
+    }
+  }
+}
+
+.field-checkbox,
+.field-radiobutton {
+  @apply mb-4 flex items-center;
+
+  > label {
+    @apply ml-2 leading-none;
+  }
 }
 
 .p-error {

assets/css/scss/index.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 //@import 'variables';
 //@import 'base_theme';
 //
@@ -11,77 +12,77 @@
   }
 }
 
-@import "settings/typography";
+@include meta.load-css("settings/typography");
 
-@import "atoms/form";
+@include meta.load-css("atoms/form");
-@import "atoms/autocomplete";
+@include meta.load-css("atoms/autocomplete");
-@import "atoms/avatar";
+@include meta.load-css("atoms/avatar");
-@import "atoms/buttons";
+@include meta.load-css("atoms/buttons");
-@import "atoms/calendar";
+@include meta.load-css("atoms/calendar");
-@import "atoms/checkbox";
+@include meta.load-css("atoms/checkbox");
-@import "atoms/color_picker";
+@include meta.load-css("atoms/color_picker");
-@import "atoms/divider";
+@include meta.load-css("atoms/divider");
-@import "atoms/dropdown";
+@include meta.load-css("atoms/dropdown");
-@import "atoms/fieldset";
+@include meta.load-css("atoms/fieldset");
-@import "atoms/inline_message";
+@include meta.load-css("atoms/inline_message");
-@import "atoms/inputgroup";
+@include meta.load-css("atoms/inputgroup");
-@import "atoms/input_switch";
+@include meta.load-css("atoms/input_switch");
-@import "atoms/input_text";
+@include meta.load-css("atoms/input_text");
-@import "atoms/messages";
+@include meta.load-css("atoms/messages");
-@import "atoms/overlay";
+@include meta.load-css("atoms/overlay");
-@import "atoms/password";
+@include meta.load-css("atoms/password");
-@import "atoms/platform_logo";
+@include meta.load-css("atoms/platform_logo");
-@import "atoms/progressbar";
+@include meta.load-css("atoms/progressbar");
-@import "atoms/radio";
+@include meta.load-css("atoms/radio");
-@import "atoms/skeleton";
+@include meta.load-css("atoms/skeleton");
-@import "atoms/tags";
+@include meta.load-css("atoms/tags");
-@import "atoms/toast";
+@include meta.load-css("atoms/toast");
-@import "atoms/wysiwyg";
+@include meta.load-css("atoms/wysiwyg");
 
-@import "molecules/chip";
+@include meta.load-css("molecules/chip");
-@import "molecules/course_tool";
+@include meta.load-css("molecules/course_tool");
-@import "molecules/datepicker";
+@include meta.load-css("molecules/datepicker");
-@import "molecules/empty_state";
+@include meta.load-css("molecules/empty_state");
-@import "molecules/teacher_bar";
+@include meta.load-css("molecules/teacher_bar");
-@import "molecules/toolbar";
+@include meta.load-css("molecules/toolbar");
-@import "molecules/legacy_panel";
+@include meta.load-css("molecules/legacy_panel");
 
-@import "organisms/cards";
+@include meta.load-css("organisms/cards");
-@import "organisms/course_card";
+@include meta.load-css("organisms/course_card");
-@import "organisms/datatable";
+@include meta.load-css("organisms/datatable");
-@import "organisms/dataview";
+@include meta.load-css("organisms/dataview");
-@import "organisms/external_logins";
+@include meta.load-css("organisms/external_logins");
-@import "organisms/modals";
+@include meta.load-css("organisms/modals");
-@import "organisms/menu";
+@include meta.load-css("organisms/menu");
-@import "organisms/sidebar";
+@include meta.load-css("organisms/sidebar");
-@import "organisms/section_header";
+@include meta.load-css("organisms/section_header");
-@import "organisms/tables";
+@include meta.load-css("organisms/tables");
-@import "organisms/install";
+@include meta.load-css("organisms/install");
 
-@import "components/badges";
+@include meta.load-css("components/badges");
 //@import 'announcement';
 
-@import "layout/topbar";
+@include meta.load-css("layout/topbar");
-@import "layout/breadcrumb";
+@include meta.load-css("layout/breadcrumb");
-@import 'layout/main_container';
+@include meta.load-css('layout/main_container');
 
-@import "admin_index";
+@include meta.load-css("admin_index");
-@import "calendar";
+@include meta.load-css("calendar");
-@import "course_home";
+@include meta.load-css("course_home");
 
-@import "documents";
+@include meta.load-css("documents");
 
-@import 'login';
+@include meta.load-css('login');
 
-@import 'forums';
+@include meta.load-css('forums');
-@import 'exercise';
+@include meta.load-css('exercise');
-@import 'catalog_course';
+@include meta.load-css('catalog_course');
-@import 'catalog_session';
+@include meta.load-css('catalog_session');
 //@import 'jqueryui';
-@import 'lp';
+@include meta.load-css('lp');
-@import "messages";
+@include meta.load-css("messages");
-@import "userreluser";
+@include meta.load-css("userreluser");
-@import 'social';
+@include meta.load-css('social');
-@import 'skill';
+@include meta.load-css('skill');
 
-@import "libs/mediaelementjs/styles";
+@include meta.load-css("libs/mediaelementjs/styles");