SCSS Refactor

qwadrox · Dec 19, 2024 · c844340 · c844340
1 parent acf5531
commit c844340
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 66 deletions.
diff --git a/apps/showcase/assets/styles/global.scss b/apps/showcase/assets/styles/global.scss
@@ -1,9 +1,9 @@
-@use './tailwind/main.css';
-@use './layout/layout.scss';
-@use 'primeicons/primeicons.css';
-@use 'quill/dist/quill.snow.css';
-@use './flags.css';
-@use '@docsearch/css/dist/style.css';
+@import './tailwind/main.css';
+@import './layout/layout.scss';
+@import 'primeicons/primeicons.css';
+@import 'quill/dist/quill.snow.css';
+@import './flags.css';
+@import '@docsearch/css/dist/style.css';
 
 body {
     visibility: hidden;

diff --git a/apps/showcase/assets/styles/layout/_doc.scss b/apps/showcase/assets/styles/layout/_doc.scss
@@ -1,5 +1,3 @@
-@use "mixins";
-
 @mixin mark() {
     border-radius: 6px;
     padding: 2px 6px;
@@ -54,7 +52,7 @@
             border-start-start-radius: 6px;
             white-space: nowrap;
             --p-focus-ring-offset: -1px;
-            @include mixins.focus-visible();
+            @include focus-visible();
 
             &:hover {
                 border-bottom-color: var(--hover-border-color);
@@ -99,13 +97,13 @@
         margin: 0;
 
         a {
-            @include mixins.doc-link();
+            @include doc-link();
         }
     }
 }
 
 .doc-link {
-    @include mixins.doc-link();
+    @include doc-link();
 }
 
 .doc-section-label {
@@ -121,7 +119,7 @@
         transition: outline-color 0.2s, border-color 0.2s, opacity 0.2s;
         outline-color: transparent;
         border-radius: 6px;
-        @include mixins.focus-visible();
+        @include focus-visible();
     }
 
     > .doc-section-label-badge {
@@ -152,7 +150,7 @@
         }
 
         a {
-            @include mixins.doc-link();
+            @include doc-link();
         }
     }
 
@@ -220,7 +218,7 @@
                 cursor: pointer;
                 user-select: none;
                 --p-focus-ring-offset: -1px;
-                @include mixins.focus-visible();
+                @include focus-visible();
             }
 
             &:hover {

diff --git a/apps/showcase/assets/styles/layout/_docsearch.scss b/apps/showcase/assets/styles/layout/_docsearch.scss
@@ -1,4 +1,3 @@
-@use "mixins";
 .DocSearch-Button {
     border-radius: 6px;
     border: 1px solid var(--border-color);

diff --git a/apps/showcase/assets/styles/layout/_footer.scss b/apps/showcase/assets/styles/layout/_footer.scss
@@ -1,5 +1,3 @@
-@use "mixins";
-
 .layout-footer {
     padding: 2rem 4rem;
     margin-top: 4rem;
@@ -18,11 +16,11 @@
         outline-color: transparent;
         border-radius: 6px;
 
-        @include mixins.focus-visible();
+        @include focus-visible();
 
         &:hover {
             text-decoration: underline;
         }
-        
+
     }
-}
+}
diff --git a/apps/showcase/assets/styles/layout/_sidebar.scss b/apps/showcase/assets/styles/layout/_sidebar.scss
@@ -1,5 +1,3 @@
-@use "mixins";
-
 .layout-sidebar {
     position: sticky;
     inset-inline-start: 0;
@@ -54,7 +52,7 @@
                 cursor: pointer;
                 user-select: none;
                 --p-focus-ring-offset: -1px;
-                @include mixins.focus-visible();
+                @include focus-visible();
 
                 .menu-icon {
                     width: 2rem;
@@ -128,7 +126,7 @@
                             outline-color: transparent;
                             position: relative;
                             --p-focus-ring-offset: -1px;
-                            @include mixins.focus-visible();
+                            @include focus-visible();
 
                             &:hover {
                                 border-inline-start-color: var(--hover-border-color);

diff --git a/apps/showcase/assets/styles/layout/_templates.scss b/apps/showcase/assets/styles/layout/_templates.scss
@@ -1,5 +1,3 @@
-@use "mixins";
-
 // TEMPLATE FEATURES ANIMATION
 .template-features-animation-card {
     &:hover &-order {
@@ -22,7 +20,7 @@
 }
 
 .template-features a {
-    @include mixins.doc-link();
+    @include doc-link();
 }
 
 @keyframes p-features-order-animation {

diff --git a/apps/showcase/assets/styles/layout/_topbar.scss b/apps/showcase/assets/styles/layout/_topbar.scss
@@ -1,5 +1,3 @@
-@use "mixins";
-
 .layout-topbar {
     position: fixed;
     top: 0;
@@ -32,7 +30,7 @@
     .layout-topbar-icon {
         transition: outline-color .2s;
         outline-color: transparent;
-        @include mixins.focus-visible();
+        @include focus-visible();
 
         svg {
             width: 120px;
@@ -87,7 +85,7 @@
             background-color: var(--card-background);
             cursor: pointer;
 
-            @include mixins.focus-visible();
+            @include focus-visible();
 
             &:hover {
                 border-color: var(--primary-color);

diff --git a/apps/showcase/assets/styles/layout/landing/_blocks.scss b/apps/showcase/assets/styles/layout/landing/_blocks.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .landing-blocks {
     * {
         box-sizing: content-box;
@@ -207,7 +205,7 @@
     }
 }
 
-@media screen and (max-width: variables.$landingBreakpointXL) {
+@media screen and (max-width: $landingBreakpointXL) {
     .landing-blocks .prime-blocks {
         margin: -24rem 0;
         transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg) scale(0.6);

diff --git a/apps/showcase/assets/styles/layout/landing/_footer.scss b/apps/showcase/assets/styles/layout/landing/_footer.scss
@@ -1,7 +1,5 @@
-@use "../mixins";
-
 .landing-footer {
     a {
-        @include mixins.focus-visible();
+        @include focus-visible();
     }
-}
+}
diff --git a/apps/showcase/assets/styles/layout/landing/_landing.scss b/apps/showcase/assets/styles/layout/landing/_landing.scss
@@ -1,10 +1,14 @@
-@use '../_mixins';
-@use '_main';
-@use '_hero';
-@use '_users';
-@use '_getstarted';
-@use '_themes';
-@use '_blocks';
-@use '_templates';
-@use '_features';
-@use '_footer';
+$landingBreakpointMD: 767px;
+$landingBreakpointLG: 991px;
+$landingBreakpointXL: 1199px;
+
+@import '../_mixins';
+@import './_main';
+@import './_hero';
+@import './_users';
+@import './_getstarted';
+@import './_themes';
+@import './_blocks';
+@import './_templates';
+@import './_features';
+@import './_footer';
diff --git a/apps/showcase/assets/styles/layout/landing/_main.scss b/apps/showcase/assets/styles/layout/landing/_main.scss
@@ -1,5 +1,3 @@
-@use "../mixins";
-
 .landing {
     scroll-behavior: smooth;
     padding-top: 4rem;
@@ -11,7 +9,7 @@
         background-color: var(--card-background);
         position: relative;
         z-index: 0;
-        
+
         &::before,
         &::after {
             content: "";
@@ -27,7 +25,7 @@
             opacity: 0;
             z-index: -1;
         }
-        
+
         &::after {
             animation: clippath 3s infinite -1.5s linear;
         }
@@ -50,9 +48,9 @@
         border-radius: 10px;
         font-weight: 600;
         padding: 1rem 1.5rem;
-        
+
         cursor: pointer;
-        @include mixins.focus-visible();
+        @include focus-visible();
 
         &:hover {
             background: var(--hover-background);
@@ -170,7 +168,7 @@
     100% {
         clip-path: inset(0 0 98% 0);
     }
-    
+
     25% {
         clip-path: inset(0 98% 0 0);
     }
@@ -180,4 +178,4 @@
     75% {
         clip-path: inset(0 0 0 98%);
     }
-}
+}
diff --git a/apps/showcase/assets/styles/layout/landing/_templates.scss b/apps/showcase/assets/styles/layout/landing/_templates.scss
@@ -1,5 +1,3 @@
-@use "variables";
-
 .landing-templates {
     overflow: hidden;
 
@@ -195,7 +193,7 @@
         }
     }
 }
-@media screen and (max-width: variables.$landingBreakpointXL) {
+@media screen and (max-width: $landingBreakpointXL) {
     .landing-templates {
         .templates {
             .template-block {
@@ -207,7 +205,7 @@
     }
 }
 
-@media screen and (max-width: variables.$landingBreakpointLG) {
+@media screen and (max-width: $landingBreakpointLG) {
     .landing-templates {
         .templates {
             transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
@@ -225,7 +223,7 @@
         }
     }
 }
-@media screen and (max-width: variables.$landingBreakpointMD) {
+@media screen and (max-width: $landingBreakpointMD) {
     .landing-templates {
         .templates {
             transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

diff --git a/apps/showcase/assets/styles/layout/layout.scss b/apps/showcase/assets/styles/layout/layout.scss
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset 'UTF-8';
 
 @import './variables/_variables';
 @import './_mixins';

diff --git a/apps/showcase/assets/styles/layout/variables/_variables.scss b/apps/showcase/assets/styles/layout/variables/_variables.scss
@@ -1,4 +1,4 @@
-@use 'landing/_light';
-@use 'landing/_dark';
-@use 'main/_light' as light2;
-@use 'main/_dark' as dark2;
+@import './landing/_light';
+@import './landing/_dark';
+@import './main/_light';
+@import './main/_dark';