From efdcda263854ef5af20e9690fe45ddbfa03d88fd Mon Sep 17 00:00:00 2001 From: "Elain T." Date: Thu, 19 Dec 2024 22:46:43 +0800 Subject: [PATCH] style(daffio): enforce stylelint configurations (#3364) --- .stylelintrc | 1 - apps/daffio/.eslintrc.js | 20 +-- apps/daffio/package.json | 6 +- apps/daffio/src/app/app.component.scss | 0 apps/daffio/src/app/app.component.ts | 1 - .../home-callout-platforms.component.scss | 7 +- .../home-callout-pwa.component.scss | 15 +- .../home-hero/home-hero.component.scss | 23 ++- .../home/view/home-view.component.scss | 2 +- .../component/not-found.component.scss | 4 +- .../support/component/support.component.scss | 25 ++- .../feature-comparison-theme.scss | 32 ++-- .../feature-comparison.component.html | 58 +++---- .../feature-comparison.component.scss | 92 +++++----- .../why-pwa-examples.component.scss | 15 +- .../why-pwa-hero/why-pwa-hero.component.scss | 2 +- .../why-pwa-overview.component.scss | 16 +- .../why-pwa-solution.component.scss | 38 ++--- .../why-pwa-stats.component.scss | 14 +- .../app/core/footer/footer/footer-theme.scss | 2 +- .../simple-footer/simple-footer-theme.scss | 2 +- .../sub-footer/sub-footer.component.scss | 54 +++--- .../components/header/header.component.scss | 158 +++++++++--------- .../app/core/nav/header/header.component.scss | 13 -- .../app/core/nav/header/header.component.ts | 1 - .../app/core/nav/sidebar-body/component.scss | 2 +- .../sidebar-footer/sidebar-footer-theme.scss | 2 +- .../sidebar-footer.component.scss | 2 +- .../sidebar-viewport.component.scss | 2 +- .../app/core/template/template.component.scss | 0 .../app/core/template/template.component.ts | 1 - .../device/iphone/iphone.component.html | 2 +- .../device/iphone/iphone.component.scss | 24 ++- .../api-list-section-theme.scss | 4 +- .../api-list-section.component.scss | 18 +- .../components/api-list/api-list-theme.scss | 4 +- .../api-package/api-package-theme.scss | 4 +- .../api-list-page.component.scss | 2 +- .../doc-viewer/doc-viewer.component.scss | 2 +- .../table-of-contents-theme.scss | 4 +- .../table-of-contents.component.scss | 6 +- .../component-overview.component.scss | 2 +- .../pages/overview/overview.component.scss | 2 +- .../package-cards.component.scss | 2 +- .../src/app/newsletter/newsletter-theme.scss | 2 +- .../app/newsletter/newsletter.component.html | 12 +- .../app/newsletter/newsletter.component.scss | 88 +++++----- apps/daffio/src/scss/styles.scss | 14 +- .../src/scss/type-descriptors/_mixins.scss | 1 + 49 files changed, 383 insertions(+), 420 deletions(-) delete mode 100644 apps/daffio/src/app/app.component.scss delete mode 100644 apps/daffio/src/app/core/nav/header/header.component.scss delete mode 100644 apps/daffio/src/app/core/template/template.component.scss diff --git a/.stylelintrc b/.stylelintrc index 85a070e2bf..938cdbcc55 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -4,7 +4,6 @@ "@stylistic/stylelint-plugin" ], "extends": "stylelint-config-recommended-scss", - "rules": { "color-hex-length": "long", "color-no-invalid-hex": true, diff --git a/apps/daffio/.eslintrc.js b/apps/daffio/.eslintrc.js index 66a4a74173..a2b8ae2366 100644 --- a/apps/daffio/.eslintrc.js +++ b/apps/daffio/.eslintrc.js @@ -1,7 +1,9 @@ module.exports = { extends: '../../.eslintrc.js', ignorePatterns: [ - '!**/*' + 'src/test.ts', + 'src/polyfills.ts', + 'node_modules/**/*' ], overrides: [ { @@ -11,15 +13,11 @@ module.exports = { parserOptions: { project: [ 'apps/daffio/tsconfig.app.json', - 'apps/daffio/tsconfig.spec.json', + 'apps/daffio/tsconfig.spec.json' ], createDefaultProgram: true }, rules: { - // TODO: Remove once the rule is added to the global eslint config - '@angular-eslint/prefer-on-push-component-change-detection': [ - 'error' - ], '@angular-eslint/component-class-suffix': [ 'error', { @@ -53,16 +51,6 @@ module.exports = { }], } }, - { - files: [ - '*.spec.ts' - ], - rules: { - '@angular-eslint/prefer-on-push-component-change-detection': [ - 0 - ], - } - }, { files: [ '*.html' diff --git a/apps/daffio/package.json b/apps/daffio/package.json index c5fb76fda8..64b411b44f 100644 --- a/apps/daffio/package.json +++ b/apps/daffio/package.json @@ -17,8 +17,10 @@ "scripts": { "build": "ng build daffio --configuration production", "test": "ng test daffio --watch=false --browsers=ChromeHeadless", - "lint": "cd ../.. && ng lint daffio", - "lint:fix": "npm run lint -- --fix", + "lint": "ng lint daffio && npm run lint:scss", + "lint:scss": "stylelint '**/*.scss'", + "lint:fix": "ng lint daffio --fix", + "lint:scss:fix": "ng run lint:scss -- --fix", "dev:ssr": "ng run daffio:serve-ssr", "serve:ssr": "node ../../dist/apps/daffio/server/server.mjs" }, diff --git a/apps/daffio/src/app/app.component.scss b/apps/daffio/src/app/app.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/daffio/src/app/app.component.ts b/apps/daffio/src/app/app.component.ts index 05688260d4..b4dc0b4c11 100644 --- a/apps/daffio/src/app/app.component.ts +++ b/apps/daffio/src/app/app.component.ts @@ -6,7 +6,6 @@ import { @Component({ selector: 'daffio-app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.scss b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.scss index fa19294600..1de86f5dab 100644 --- a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.scss +++ b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.scss @@ -1,6 +1,5 @@ @use 'utilities' as daff; -/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */ .daffio-home-callout-platforms { &__logos { display: grid; @@ -11,8 +10,8 @@ @include daff.breakpoint(mobile) { grid-template-columns: 144px 144px; - grid-template-areas: 'magento shopify'; - grid-gap: 48px; + grid-template-areas: 'magento shopify'; + grid-gap: 48px; } } @@ -33,4 +32,4 @@ } } } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.component.scss b/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.component.scss index e7b41c0de8..1ec3c7c700 100644 --- a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.component.scss +++ b/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.component.scss @@ -1,6 +1,5 @@ @use 'utilities' as daff; -/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */ .daffio-home-callout-pwa { &__body { display: grid; @@ -11,7 +10,7 @@ grid-gap: 48px; } - &__card-grid { + &__card-grid { grid-area: card-grid; display: grid; grid-template-columns: 1fr; @@ -21,7 +20,7 @@ 'c' 'd'; grid-gap: 16px; - + @include daff.breakpoint(tablet) { grid-template-columns: 1fr 1fr; grid-template-areas: @@ -34,23 +33,23 @@ &:first-child { grid-area: a; } - + &:nth-child(2) { grid-area: b; } - + &:nth-child(3) { grid-area: c; } - + &:last-child { grid-area: d; } } } - + &__button { grid-area: button; justify-self: center; } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/content/home/components/home-hero/home-hero.component.scss b/apps/daffio/src/app/content/home/components/home-hero/home-hero.component.scss index b480e5e6d7..8c4c7f3a65 100644 --- a/apps/daffio/src/app/content/home/components/home-hero/home-hero.component.scss +++ b/apps/daffio/src/app/content/home/components/home-hero/home-hero.component.scss @@ -13,29 +13,28 @@ } } -/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */ .daffio-home-hero { &__grid { - display: grid; - grid-template-columns: 1fr; + display: grid; + grid-template-columns: 1fr; grid-template-areas: 'content'; position: relative; - @include daff.breakpoint(big-tablet) { - grid-template-columns: 560px 1fr; + @include daff.breakpoint(big-tablet) { + grid-template-columns: 560px 1fr; grid-template-areas: 'content illustration'; - grid-gap: 48px; - } + grid-gap: 48px; + } - @include daff.breakpoint(small-laptop) { + @include daff.breakpoint(small-laptop) { grid-template-columns: 560px 1fr; grid-template-areas: 'content illustration'; - grid-gap: 48px; - } - } + grid-gap: 48px; + } + } &__content { grid-area: content; @@ -65,4 +64,4 @@ flex-wrap: wrap; gap: 8px; } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/content/home/view/home-view.component.scss b/apps/daffio/src/app/content/home/view/home-view.component.scss index 0ea51ab936..9cd72ccdf5 100644 --- a/apps/daffio/src/app/content/home/view/home-view.component.scss +++ b/apps/daffio/src/app/content/home/view/home-view.component.scss @@ -1,4 +1,4 @@ :host { display: block; overflow: hidden; -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/content/not-found/component/not-found.component.scss b/apps/daffio/src/app/content/not-found/component/not-found.component.scss index 73c5c67dfe..4016c7c54f 100644 --- a/apps/daffio/src/app/content/not-found/component/not-found.component.scss +++ b/apps/daffio/src/app/content/not-found/component/not-found.component.scss @@ -1,3 +1,3 @@ .daffio-not-found { - text-align: center; -} \ No newline at end of file + text-align: center; +} diff --git a/apps/daffio/src/app/content/support/component/support.component.scss b/apps/daffio/src/app/content/support/component/support.component.scss index 14597064ea..dbc8a04079 100644 --- a/apps/daffio/src/app/content/support/component/support.component.scss +++ b/apps/daffio/src/app/content/support/component/support.component.scss @@ -1,18 +1,17 @@ @use 'utilities' as daff; -/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */ .daffio-support { - &__body { - text-align: center; - } + &__body { + text-align: center; + } - &__actions { - display: inline-grid; - grid-template-columns: 1fr; - grid-gap: 16px; + &__actions { + display: inline-grid; + grid-template-columns: 1fr; + grid-gap: 16px; - @include daff.breakpoint(tablet) { - grid-template-columns: 1fr 1fr; - } - } -} \ No newline at end of file + @include daff.breakpoint(tablet) { + grid-template-columns: 1fr 1fr; + } + } +} diff --git a/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison-theme.scss b/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison-theme.scss index 4eff16dde0..43c2bf9430 100644 --- a/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison-theme.scss +++ b/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison-theme.scss @@ -1,20 +1,20 @@ @use 'sass:map'; @use 'theme' as daff-theme; -@mixin daffio-feature-comparison-theme($theme){ - $secondary: map.get($theme, secondary); - $base: daff-theme.daff-map-deep-get($theme, "core.base"); - $base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast"); - - .feature-comparison { - background: $base; - box-shadow: 0 0 30px 0 rgba($base-contrast, 0.05); - - > * { - &:nth-child(4n-2) { - background: daff-theme.daff-color($secondary); - color: daff-theme.daff-text-contrast(daff-theme.daff-color($secondary)); - } - } - } +@mixin daffio-feature-comparison-theme($theme) { + $secondary: map.get($theme, secondary); + $base: daff-theme.daff-map-deep-get($theme, 'core.base'); + $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); + + .daffio-feature-comparison { + background: $base; + box-shadow: 0 0 30px 0 rgba($base-contrast, 0.05); + + > * { + &:nth-child(4n-2) { + background: daff-theme.daff-color($secondary); + color: daff-theme.daff-text-contrast(daff-theme.daff-color($secondary)); + } + } + } } diff --git a/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.html b/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.html index 6a6c90386d..3170a32ec3 100644 --- a/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.html +++ b/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.html @@ -1,36 +1,36 @@ -
-
Features
-
PWA
-
Native App
-
Website
+
+
Features
+
PWA
+
Native App
+
Website
-
Offline Capability
-
-
-
+
Offline Capability
+
+
+
-
Push Notifications
-
-
-
+
Push Notifications
+
+
+
-
Home Screen Access
-
-
-
+
Home Screen Access
+
+
+
-
No Installation Required
-
-
-
+
No Installation Required
+
+
+
-
No Updates Required
-
-
-
+
No Updates Required
+
+
+
-
Searchable and Linkable
-
-
-
+
Searchable and Linkable
+
+
+
\ No newline at end of file diff --git a/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss b/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss index 000de79d03..04d7dc2d93 100644 --- a/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss +++ b/apps/daffio/src/app/content/why-pwa/components/feature-comparison/feature-comparison.component.scss @@ -1,51 +1,51 @@ @use 'utilities' as daff; @mixin comparison-cell { - display: flex; - justify-content: center; - text-align: center; + display: flex; + justify-content: center; + text-align: center; } -.feature-comparison { - border-radius: 10px; - display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr; - - &__header { - @include comparison-cell(); - @include daff.embolden(); - align-items: flex-start; - font-size: 0.75rem; - padding: 15px 5px; - text-transform: uppercase; - - @include daff.breakpoint(tablet) { - padding: 25px 5px; - font-size: daff.$small-font-size; - } - } - - &__cell { - @include comparison-cell(); - align-items: center; - font-size: daff.$small-font-size; - padding: 10px 15px; - - @include daff.breakpoint(tablet) { - font-size: 1rem; - padding: 15px 25px; - } - } - - > * { - &:nth-child(4n+1) { - justify-content: flex-start; - text-align: left; - } - - &:first-child { - justify-content: center; - text-align: center; - } - } -} \ No newline at end of file +.daffio-feature-comparison { + border-radius: 10px; + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + + &__header { + @include comparison-cell(); + @include daff.embolden(); + align-items: flex-start; + font-size: 0.75rem; + padding: 15px 5px; + text-transform: uppercase; + + @include daff.breakpoint(tablet) { + padding: 25px 5px; + font-size: daff.$small-font-size; + } + } + + &__cell { + @include comparison-cell(); + align-items: center; + font-size: daff.$small-font-size; + padding: 10px 15px; + + @include daff.breakpoint(tablet) { + font-size: 1rem; + padding: 15px 25px; + } + } + + >* { + &:nth-child(4n+1) { + justify-content: flex-start; + text-align: left; + } + + &:first-child { + justify-content: center; + text-align: center; + } + } +} diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.component.scss b/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.component.scss index 3d07f9eb3a..24e78de2d9 100644 --- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.component.scss +++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-examples/why-pwa-examples.component.scss @@ -1,15 +1,14 @@ @use 'utilities' as daff; -/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */ .daffio-why-pwa-examples { &__card-grid { - display: grid; - grid-template-columns: 1fr; - grid-gap: 24px; + display: grid; + grid-template-columns: 1fr; + grid-gap: 24px; - @include daff.breakpoint(big-tablet) { - grid-template-columns: 1fr 1fr 1fr; + @include daff.breakpoint(big-tablet) { + grid-template-columns: 1fr 1fr 1fr; grid-gap: 24px; - } + } } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.component.scss b/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.component.scss index 8b45d5d1cd..7db9631659 100644 --- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.component.scss +++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.component.scss @@ -2,4 +2,4 @@ &__body { text-align: center; } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.component.scss b/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.component.scss index 2041f771a9..184607b540 100644 --- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.component.scss +++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-overview/why-pwa-overview.component.scss @@ -3,19 +3,19 @@ .daffio-why-pwa-overview { &__card-grid { display: grid; - grid-template-columns: 1fr; + grid-template-columns: 1fr; grid-gap: 16px; - @include daff.breakpoint(mobile) { - grid-template-columns: 1fr 1fr; - } + @include daff.breakpoint(mobile) { + grid-template-columns: 1fr 1fr; + } - @include daff.breakpoint(tablet) { - grid-template-columns: 1fr 1fr 1fr 1fr; - } + @include daff.breakpoint(tablet) { + grid-template-columns: 1fr 1fr 1fr 1fr; + } fa-icon { font-size: 1.5rem; } } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.component.scss b/apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.component.scss index ead6464c56..e1f45166f5 100644 --- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.component.scss +++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-solution/why-pwa-solution.component.scss @@ -2,25 +2,25 @@ .daffio-why-pwa-solution { &__grid { - display: grid; - grid-template-columns: 1fr; - grid-template-areas: - 'feature-comparison' - 'list'; - grid-gap: 48px; - align-items: center; + display: grid; + grid-template-columns: 1fr; + grid-template-areas: + 'feature-comparison' + 'list'; + grid-gap: 48px; + align-items: center; - @include daff.breakpoint(big-tablet) { - grid-template-columns: 2fr 1fr; - grid-template-areas: 'feature-comparison list'; - } - } + @include daff.breakpoint(big-tablet) { + grid-template-columns: 2fr 1fr; + grid-template-areas: 'feature-comparison list'; + } + } - &__feature-comparison { - grid-area: feature-comparison; - } + &__feature-comparison { + grid-area: feature-comparison; + } - &__list { - grid-area: list; - } -} \ No newline at end of file + &__list { + grid-area: list; + } +} diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.component.scss b/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.component.scss index 722b240347..5d2ded7aff 100644 --- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.component.scss +++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-stats/why-pwa-stats.component.scss @@ -2,16 +2,16 @@ .daffio-why-pwa-stats { &__card-grid { - display: grid; - grid-template-columns: 1fr; - grid-gap: 24px; + display: grid; + grid-template-columns: 1fr; + grid-gap: 24px; - @include daff.breakpoint(big-tablet) { - grid-template-columns: 1fr 1fr; - } + @include daff.breakpoint(big-tablet) { + grid-template-columns: 1fr 1fr; + } fa-icon { font-size: 1.5rem; } } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/core/footer/footer/footer-theme.scss b/apps/daffio/src/app/core/footer/footer/footer-theme.scss index 66485c3dd6..1a2a92ea20 100644 --- a/apps/daffio/src/app/core/footer/footer/footer-theme.scss +++ b/apps/daffio/src/app/core/footer/footer/footer-theme.scss @@ -17,7 +17,7 @@ &__link, &__social-link { color: daff-theme.daff-text-contrast($base); - transition: color 0.3s; + transition: color 300ms; &:hover { color: daff-theme.daff-illuminate($base-contrast, $neutral, 3); diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss b/apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss index c84a20af37..0f2aad6e03 100644 --- a/apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss +++ b/apps/daffio/src/app/core/footer/simple-footer/simple-footer-theme.scss @@ -14,7 +14,7 @@ &__link { color: daff-theme.daff-text-contrast($base); - transition: color 0.3s; + transition: color 300ms; &:hover { color: daff-theme.daff-illuminate($base-contrast, $neutral, 3); diff --git a/apps/daffio/src/app/core/footer/sub-footer/sub-footer.component.scss b/apps/daffio/src/app/core/footer/sub-footer/sub-footer.component.scss index 9b5fc41691..2fe2f40844 100644 --- a/apps/daffio/src/app/core/footer/sub-footer/sub-footer.component.scss +++ b/apps/daffio/src/app/core/footer/sub-footer/sub-footer.component.scss @@ -1,35 +1,35 @@ @use 'utilities' as daff; -/* autoprefixer grid: autoplace */ /* stylelint-disable-line scss/comment-no-loud */ +/* stylelint-disable-line scss/comment-no-loud */ .daffio-sub-footer { - display: block; + display: block; - &__body { - text-align: center; - } + &__body { + text-align: center; + } - &__actions { - display: inline-grid; - grid-template-columns: 1fr; - grid-template-areas: - 'repo' - 'discord'; - grid-gap: 16px; - - @include daff.breakpoint(tablet) { - grid-template-columns: 1fr 1fr; - grid-template-areas: 'repo discord'; - grid-gap: 16px; - } + &__actions { + display: inline-grid; + grid-template-columns: 1fr; + grid-template-areas: + 'repo' + 'discord'; + grid-gap: 16px; - > * { - &:nth-child(1) { - grid-area: repo; - } + @include daff.breakpoint(tablet) { + grid-template-columns: 1fr 1fr; + grid-template-areas: 'repo discord'; + grid-gap: 16px; + } - &:nth-child(2) { - grid-area: discord; - } - } - } + >* { + &:nth-child(1) { + grid-area: repo; + } + + &:nth-child(2) { + grid-area: discord; + } + } + } } diff --git a/apps/daffio/src/app/core/header/components/header/header.component.scss b/apps/daffio/src/app/core/header/components/header/header.component.scss index cb84629abb..f2006fd66d 100644 --- a/apps/daffio/src/app/core/header/components/header/header.component.scss +++ b/apps/daffio/src/app/core/header/components/header/header.component.scss @@ -1,85 +1,85 @@ @use 'utilities' as daff; :host { - $root: '.daffio-header'; - display: block; - - ::ng-deep { - .daffio-header-item { - display: none; - - @include daff.breakpoint(big-tablet) { - display: block; - color: currentColor; - font-size: daff.$normal-font-size; - font-weight: 500; - line-height: 64px; - padding: 0 1rem; - position: relative; - text-decoration: none; - } - } - } + $root: '.daffio-header'; + display: block; + + ::ng-deep { + .daffio-header-item { + display: none; + + @include daff.breakpoint(big-tablet) { + display: block; + color: currentColor; + font-size: daff.$normal-font-size; + font-weight: 500; + line-height: 64px; + padding: 0 1rem; + position: relative; + text-decoration: none; + } + } + } } .daffio-header { - &__navbar { - justify-content: space-between; - padding: 0 24px; - } - - &__left, - &__right { - display: flex; - align-items: center; - } - - &__left { - gap: 32px; - } - - &__theme-toggle { - margin-right: 0.25rem; - - @include daff.breakpoint(big-tablet) { - margin-right: 0; - } - } - - &__menu { - margin: 0; - padding: 0; - - @include daff.breakpoint(big-tablet) { - display: flex; - align-items: center; - gap: 16px; - } - } - - &__button { - display: none; - - @include daff.breakpoint(big-tablet) { - display: flex; - margin-left: 1rem; - } - } - - &__logo { - width: 128px; - - @include daff.breakpoint(mobile) { - width: 160px; - } - } - - &__bars { - display: flex; - margin-right: -0.8125rem; - - @include daff.breakpoint(big-tablet) { - display: none; - } - } -} \ No newline at end of file + &__navbar { + justify-content: space-between; + padding: 0 24px; + } + + &__left, + &__right { + display: flex; + align-items: center; + } + + &__left { + gap: 32px; + } + + &__theme-toggle { + margin-right: 0.25rem; + + @include daff.breakpoint(big-tablet) { + margin-right: 0; + } + } + + &__menu { + margin: 0; + padding: 0; + + @include daff.breakpoint(big-tablet) { + display: flex; + align-items: center; + gap: 16px; + } + } + + &__button { + display: none; + + @include daff.breakpoint(big-tablet) { + display: flex; + margin-left: 1rem; + } + } + + &__logo { + width: 128px; + + @include daff.breakpoint(mobile) { + width: 160px; + } + } + + &__bars { + display: flex; + margin-right: -0.8125rem; + + @include daff.breakpoint(big-tablet) { + display: none; + } + } +} diff --git a/apps/daffio/src/app/core/nav/header/header.component.scss b/apps/daffio/src/app/core/nav/header/header.component.scss deleted file mode 100644 index 15c87c66e1..0000000000 --- a/apps/daffio/src/app/core/nav/header/header.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -// @use 'utilities' as daff; - -// .daffio-header { -// padding: 0 24px; - -// @include daff.breakpoint(mobile) { -// padding: 0 48px; -// } - -// @include daff.breakpoint(small-laptop) { -// padding: 0; -// } -// } diff --git a/apps/daffio/src/app/core/nav/header/header.component.ts b/apps/daffio/src/app/core/nav/header/header.component.ts index 79fb6827cf..7a07d66f76 100644 --- a/apps/daffio/src/app/core/nav/header/header.component.ts +++ b/apps/daffio/src/app/core/nav/header/header.component.ts @@ -35,7 +35,6 @@ import { DaffioNavLink } from '../link/type'; @Component({ selector: 'daffio-nav-header-container', templateUrl: './header.component.html', - styleUrls: ['./header.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ diff --git a/apps/daffio/src/app/core/nav/sidebar-body/component.scss b/apps/daffio/src/app/core/nav/sidebar-body/component.scss index a9233a7f48..cd42da5c54 100644 --- a/apps/daffio/src/app/core/nav/sidebar-body/component.scss +++ b/apps/daffio/src/app/core/nav/sidebar-body/component.scss @@ -1,4 +1,4 @@ :host { display: block; margin: 16px 0 0; -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss index 61765b9e2b..53eeb93da6 100644 --- a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss +++ b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer-theme.scss @@ -14,4 +14,4 @@ background: daff-theme.daff-illuminate($base, $neutral, 3); } } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss index 09002cc534..5e8c60e8a1 100644 --- a/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss +++ b/apps/daffio/src/app/core/sidebar/components/sidebar-footer/sidebar-footer.component.scss @@ -7,4 +7,4 @@ padding: 16px; text-align: center; text-decoration: none; -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss index 80dc188579..45755d756d 100644 --- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss +++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss @@ -5,4 +5,4 @@ .daffio-sidebar { border-right: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1); -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/core/template/template.component.scss b/apps/daffio/src/app/core/template/template.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/daffio/src/app/core/template/template.component.ts b/apps/daffio/src/app/core/template/template.component.ts index f08a3c5d79..3baf395327 100644 --- a/apps/daffio/src/app/core/template/template.component.ts +++ b/apps/daffio/src/app/core/template/template.component.ts @@ -7,7 +7,6 @@ import { DaffioRouterNamedViewsEnum } from '../router/named-views/models/named-v @Component({ templateUrl: './template.component.html', - styleUrls: ['./template.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TemplateComponent { diff --git a/apps/daffio/src/app/design/device/iphone/iphone.component.html b/apps/daffio/src/app/design/device/iphone/iphone.component.html index 34490dc433..6f9bf9bd18 100644 --- a/apps/daffio/src/app/design/device/iphone/iphone.component.html +++ b/apps/daffio/src/app/design/device/iphone/iphone.component.html @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/apps/daffio/src/app/design/device/iphone/iphone.component.scss b/apps/daffio/src/app/design/device/iphone/iphone.component.scss index 6b751db808..b23b6386f6 100644 --- a/apps/daffio/src/app/design/device/iphone/iphone.component.scss +++ b/apps/daffio/src/app/design/device/iphone/iphone.component.scss @@ -1,20 +1,18 @@ // @import 'theme'; // @use 'utilities' as *; -// $phoneColor: daff-map-deep-get($theme, "core.base"); +// $phoneColor: daff-map-deep-get($theme, 'core.base'); // $phoneShadow: daff-illuminate($phoneColor, $daff-neutral, 3); // .iphone { -// background: $phoneColor; -// box-shadow: -// inset 0 -5px 15px rgba($phoneShadow, 0.2), -// 0 2px 5px 0 rgba($phoneShadow, 0.1), -// 0 0 25px 10px rgba($phoneShadow, 0.15); -// border-radius: 10%/5%; -// padding: 24% 2.75%; +// background: $phoneColor; +// box-shadow: inset 0 -5px 15px rgba($phoneShadow, 0.2), +// 0 2px 5px 0 rgba($phoneShadow, 0.1), 0 0 25px 10px rgba($phoneShadow, 0.15); +// border-radius: 10%/5%; +// padding: 24% 2.75%; -// > * { -// display: block; -// width: 100%; -// } -// } \ No newline at end of file +// > * { +// display: block; +// width: 100%; +// } +// } diff --git a/apps/daffio/src/app/docs/api/components/api-list-section/api-list-section-theme.scss b/apps/daffio/src/app/docs/api/components/api-list-section/api-list-section-theme.scss index 5f9ee79184..d7d957173b 100644 --- a/apps/daffio/src/app/docs/api/components/api-list-section/api-list-section-theme.scss +++ b/apps/daffio/src/app/docs/api/components/api-list-section/api-list-section-theme.scss @@ -2,8 +2,8 @@ @mixin daffio-api-list-section-theme($theme) { $neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral'); - $base: daff-theme.daff-map-deep-get($theme, "core.base"); - $base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast"); + $base: daff-theme.daff-map-deep-get($theme, 'core.base'); + $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); .daffio-api-list-section { &__item { diff --git a/apps/daffio/src/app/docs/api/components/api-list-section/api-list-section.component.scss b/apps/daffio/src/app/docs/api/components/api-list-section/api-list-section.component.scss index 16baa26dd9..269df43931 100644 --- a/apps/daffio/src/app/docs/api/components/api-list-section/api-list-section.component.scss +++ b/apps/daffio/src/app/docs/api/components/api-list-section/api-list-section.component.scss @@ -4,17 +4,17 @@ $api-list-section-item-border-radius: 4px; :host { - display: grid; - grid-template-columns: 1fr; - grid-gap: 8px 24px; + display: grid; + grid-template-columns: 1fr; + grid-gap: 8px 24px; - @include daff.breakpoint(tablet) { - grid-template-columns: repeat(2, 1fr); - } + @include daff.breakpoint(tablet) { + grid-template-columns: repeat(2, 1fr); + } - @include daff.breakpoint(small-laptop) { - grid-template-columns: repeat(3, 1fr); - } + @include daff.breakpoint(small-laptop) { + grid-template-columns: repeat(3, 1fr); + } a { text-decoration: none; diff --git a/apps/daffio/src/app/docs/api/components/api-list/api-list-theme.scss b/apps/daffio/src/app/docs/api/components/api-list/api-list-theme.scss index a0eb9cfb46..7bf84e6fa9 100644 --- a/apps/daffio/src/app/docs/api/components/api-list/api-list-theme.scss +++ b/apps/daffio/src/app/docs/api/components/api-list/api-list-theme.scss @@ -2,8 +2,8 @@ @mixin daffio-api-list-theme($theme) { $neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral'); - $base: daff-theme.daff-map-deep-get($theme, "core.base"); - $base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast"); + $base: daff-theme.daff-map-deep-get($theme, 'core.base'); + $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); .daffio-api-list { &__package-name { diff --git a/apps/daffio/src/app/docs/api/components/api-package/api-package-theme.scss b/apps/daffio/src/app/docs/api/components/api-package/api-package-theme.scss index 9e71846015..c2831971a3 100644 --- a/apps/daffio/src/app/docs/api/components/api-package/api-package-theme.scss +++ b/apps/daffio/src/app/docs/api/components/api-package/api-package-theme.scss @@ -2,8 +2,8 @@ @mixin daffio-api-package-theme($theme) { $neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral'); - $base: daff-theme.daff-map-deep-get($theme, "core.base"); - $base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast"); + $base: daff-theme.daff-map-deep-get($theme, 'core.base'); + $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); .daffio-api-package { &__subpackage-name { diff --git a/apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.scss b/apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.scss index dcdfabdbc9..749d6ba76d 100644 --- a/apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.scss +++ b/apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.scss @@ -14,4 +14,4 @@ @include daff.headline-xl(); margin-bottom: 48px; } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss index 38db73ffdb..5f74c17492 100644 --- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss +++ b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss @@ -21,7 +21,7 @@ padding: 48px 0; } } - + &__title { @include daff.headline-xl(); margin-bottom: 48px; diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents-theme.scss b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents-theme.scss index 20d52b263e..3a00471272 100644 --- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents-theme.scss +++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents-theme.scss @@ -2,8 +2,8 @@ @mixin daffio-table-of-contents-theme($theme) { $neutral: daff-theme.daff-map-deep-get($theme, 'core.neutral'); - $base: daff-theme.daff-map-deep-get($theme, "core.base"); - $base-contrast: daff-theme.daff-map-deep-get($theme, "core.base-contrast"); + $base: daff-theme.daff-map-deep-get($theme, 'core.base'); + $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); .daffio-table-of-contents { &__item { diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss index 8f9be9634d..869f710204 100644 --- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss +++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss @@ -35,13 +35,13 @@ &--level-2 { padding: 0; } - + &--level-3 { padding: 0 0 0 16px; } - + &--level-4 { padding: 0 0 0 32px; } } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.scss b/apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.scss index 43a0009c74..e6491cb5b4 100644 --- a/apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.scss +++ b/apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.scss @@ -23,4 +23,4 @@ grid-template-columns: repeat(3, 1fr); } } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/docs/design/pages/overview/overview.component.scss b/apps/daffio/src/app/docs/design/pages/overview/overview.component.scss index f4afd667be..4410d31edb 100644 --- a/apps/daffio/src/app/docs/design/pages/overview/overview.component.scss +++ b/apps/daffio/src/app/docs/design/pages/overview/overview.component.scss @@ -17,4 +17,4 @@ margin: 0 0 32px; padding: 0; } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/docs/packages/components/package-cards/package-cards.component.scss b/apps/daffio/src/app/docs/packages/components/package-cards/package-cards.component.scss index 2f621b236a..2eb79f2df9 100644 --- a/apps/daffio/src/app/docs/packages/components/package-cards/package-cards.component.scss +++ b/apps/daffio/src/app/docs/packages/components/package-cards/package-cards.component.scss @@ -18,4 +18,4 @@ @include daff.breakpoint(small-laptop) { grid-template-columns: repeat(4, 1fr); } -} \ No newline at end of file +} diff --git a/apps/daffio/src/app/newsletter/newsletter-theme.scss b/apps/daffio/src/app/newsletter/newsletter-theme.scss index b354488e89..4cb0cbae1c 100644 --- a/apps/daffio/src/app/newsletter/newsletter-theme.scss +++ b/apps/daffio/src/app/newsletter/newsletter-theme.scss @@ -5,7 +5,7 @@ $base: daff-theme.daff-map-deep-get($theme, 'core.base'); $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); - .newsletter { + .daffio-newsletter { &__input { border-color: daff-theme.daff-color($neutral, 30); } diff --git a/apps/daffio/src/app/newsletter/newsletter.component.html b/apps/daffio/src/app/newsletter/newsletter.component.html index cd943dad93..ecd28453f5 100644 --- a/apps/daffio/src/app/newsletter/newsletter.component.html +++ b/apps/daffio/src/app/newsletter/newsletter.component.html @@ -1,8 +1,8 @@ -