From c8443407282b73f81a2f1a9fb9a5550e89301456 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Thu, 19 Dec 2024 18:09:48 +0000 Subject: [PATCH] SCSS Refactor --- apps/showcase/assets/styles/global.scss | 12 +++++----- apps/showcase/assets/styles/layout/_doc.scss | 14 +++++------ .../assets/styles/layout/_docsearch.scss | 1 - .../assets/styles/layout/_footer.scss | 8 +++---- .../assets/styles/layout/_sidebar.scss | 6 ++--- .../assets/styles/layout/_templates.scss | 4 +--- .../assets/styles/layout/_topbar.scss | 6 ++--- .../assets/styles/layout/landing/_blocks.scss | 4 +--- .../assets/styles/layout/landing/_footer.scss | 6 ++--- .../styles/layout/landing/_landing.scss | 24 +++++++++++-------- .../assets/styles/layout/landing/_main.scss | 14 +++++------ .../styles/layout/landing/_templates.scss | 8 +++---- .../showcase/assets/styles/layout/layout.scss | 2 +- .../styles/layout/variables/_variables.scss | 8 +++---- 14 files changed, 51 insertions(+), 66 deletions(-) diff --git a/apps/showcase/assets/styles/global.scss b/apps/showcase/assets/styles/global.scss index b98fa0b9532..e217c7357c7 100644 --- 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 index fef58d4bdfe..f7261aeb3b1 100644 --- 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 index 23b21d2e54e..37f8e985e50 100644 --- 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 index 6544f346c81..1fe7448f4e1 100644 --- 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; } - + } -} \ No newline at end of file +} diff --git a/apps/showcase/assets/styles/layout/_sidebar.scss b/apps/showcase/assets/styles/layout/_sidebar.scss index 8778b1f3cac..6c4331552a7 100644 --- 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 index 978868004db..762d730b9f4 100644 --- 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 index aaeba4a022c..7c206a3138c 100644 --- 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 index 952fb01139c..1f792c33ffc 100644 --- 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 index 0d0d9528a2e..88c02a0e016 100644 --- 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(); } -} \ No newline at end of file +} diff --git a/apps/showcase/assets/styles/layout/landing/_landing.scss b/apps/showcase/assets/styles/layout/landing/_landing.scss index 068b0e7145c..a02515e118f 100644 --- 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 index a90ccc30f7d..80a08dec8da 100644 --- 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%); } -} \ No newline at end of file +} diff --git a/apps/showcase/assets/styles/layout/landing/_templates.scss b/apps/showcase/assets/styles/layout/landing/_templates.scss index b5f26efba00..6c57e031d3b 100644 --- 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 index 5499a32934d..c927358c559 100644 --- 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 index f1738147307..2bb63c6152b 100644 --- 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; \ No newline at end of file +@import './landing/_light'; +@import './landing/_dark'; +@import './main/_light'; +@import './main/_dark';