migrate sass

xmmedia · Nov 25, 2024 · 1e67773 · 1e67773
1 parent 1ba4bb0
commit 1e67773
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 44 deletions.
diff --git a/.idea/Starter - Symfony 4.iml b/.idea/Starter - Symfony 4.iml
diff --git a/public/css/admin.scss b/public/css/admin.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @tailwind base;
 @tailwind components;
 
@@ -6,7 +7,7 @@
 
 $header-height: 3.72rem;
 
-@import "common/common";
+@include meta.load-css("common/common");
 
 // global styles on the most common elements
 html {
@@ -23,25 +24,25 @@ body {
 }
 
 // load common styles
-@import "common/forms",
-    "common/radios",
-    "common/alerts",
-    "common/headings",
-    "common/modal",
-    "common/button_pair",
-    "common/loading";
+@include meta.load-css("common/forms");
+@include meta.load-css("common/radios");
+@include meta.load-css("common/alerts");
+@include meta.load-css("common/headings");
+@include meta.load-css("common/modal");
+@include meta.load-css("common/button_pair");
+@include meta.load-css("common/loading");
 
 // admin only styles
-@import "admin/content",
-    "admin/headings",
-    "admin/buttons",
-    "admin/header",
-    "admin/forms",
-    "admin/record_list",
-    "admin/record_view",
-    "admin/sidebar_nav",
-    "admin/sidebar_nav_submenu",
-    "admin/dashboard",
-    "admin/password";
+@include meta.load-css("admin/content");
+@include meta.load-css("admin/headings");
+@include meta.load-css("admin/buttons");
+@include meta.load-css("admin/header");
+@include meta.load-css("admin/forms");
+@include meta.load-css("admin/record_list");
+@include meta.load-css("admin/record_view");
+@include meta.load-css("admin/sidebar_nav");
+@include meta.load-css("admin/sidebar_nav_submenu");
+@include meta.load-css("admin/dashboard");
+@include meta.load-css("admin/password");
 
 @tailwind utilities;
diff --git a/public/css/admin/_header.scss b/public/css/admin/_header.scss
@@ -1,14 +1,18 @@
+:root {
+    --header-height: 3.72rem;
+}
+
 .header-wrap {
     @apply flex flex-col md:flex-row justify-between items-end md:items-center py-2 md:py-0 bg-gray-100 border-b border-gray-300;
-    min-height: $header-height + 3.5;
+    min-height: calc(var(--header-height) + 3.5rem);
     @screen xs {
-        min-height: $header-height;
+        min-height: var(--header-height);
     }
 }
 
 .header-wrap-small {
     @apply flex lg:hidden justify-between items-center relative z-10 pt-4 text-white bg-black border-b border-gray-400;
-    height: $header-height;
+    height: var(--header-height);
 
     a {
         @apply text-white;

diff --git a/public/css/admin/_sidebar_nav_submenu.scss b/public/css/admin/_sidebar_nav_submenu.scss
@@ -1,6 +1,6 @@
 .sidebar_nav-submenu-wrap {
     @apply fixed top-0 left-0 right-0 z-0 w-40 h-full opacity-0 invisible text-left bg-gray-800;
-    margin-top: $header-height;
+    margin-top: var(--header-height);
     @screen lg {
         @apply w-64 mt-0;
     }
@@ -14,7 +14,7 @@
 }
 .sidebar_nav-submenu_header {
     @apply text-lg font-extralight border-b border-gray-600;
-    min-height: $header-height;
+    min-height: var(--header-height);
     padding: 1.25rem 0 1rem 1rem;
     @screen lg {
         @apply text-2xl;

diff --git a/public/css/common/_common.scss b/public/css/common/_common.scss
@@ -1,6 +1,3 @@
-/* this file is for public and private/admin pages */
-@import "media";
-
 a, .button-link {
     @apply text-blue-500 text-left no-underline transition-default;
     &:hover, &:active {

diff --git a/public/css/user.scss b/public/css/user.scss
@@ -1,32 +1,33 @@
+@use "sass:meta";
 @tailwind base;
 @tailwind components;
 
 @import '../../node_modules/vue-multiselect/dist/vue-multiselect.css';
 
-@import "common/common";
+@include meta.load-css("common/common");
 
 // global styles on the most common elements
 html {
     @apply font-sans leading-normal text-gray-800;
 }
 
 // common styles
-@import "common/alerts",
-    "common/content_alignment",
-    "common/content",
-    "common/headings",
-    "common/forms",
-    "common/radios",
-    "common/modal",
-    "common/embed",
-    "common/loading";
+@include meta.load-css("common/alerts");
+@include meta.load-css("common/content_alignment");
+@include meta.load-css("common/content");
+@include meta.load-css("common/headings");
+@include meta.load-css("common/forms");
+@include meta.load-css("common/radios");
+@include meta.load-css("common/modal");
+@include meta.load-css("common/embed");
+@include meta.load-css("common/loading");
 
 // public only styles
-@import "user/buttons",
-    "user/headings",
-    "user/header",
-    "user/footer",
-    "user/forms";
+@include meta.load-css("user/buttons");
+@include meta.load-css("user/headings");
+@include meta.load-css("user/header");
+@include meta.load-css("user/footer");
+@include meta.load-css("user/forms");
 
 // page specific
 //@import ;

diff --git a/public/css/user/_header.scss b/public/css/user/_header.scss
@@ -1,3 +1,5 @@
+@use "../common/media";
+
 .header_nav-nav {
     @apply flex justify-center divide-x divide-gray-500 list-none pl-0;
     a {