- Resources & Tools
-Thank you for using and showing some ♥ for Nx.
- -Here are some links to help you get started.
--
-
- - - Nx video course - - -
- - - Nx video tutorial - - -
- - - Interactive tutorial - - -
- - - - Nx Cloud - - -
Next Steps
-Here are some things you can do with Nx.
-
-
Add UI library
--# Generate UI lib -ng g @nrwl/angular:lib ui ++diff --git a/apps/dafa-web/src/app/app.component.scss b/apps/dafa-web/src/app/app.component.scss index f222adf..e69de29 100644 --- a/apps/dafa-web/src/app/app.component.scss +++ b/apps/dafa-web/src/app/app.component.scss @@ -1,133 +0,0 @@ -/* - * Remove template code below - */ -:host { - display: block; - font-family: sans-serif; - min-width: 300px; - max-width: 600px; - margin: 50px auto; -} - -.gutter-left { - margin-left: 9px; -} - -.col-span-2 { - grid-column: span 2; -} - -.flex { - display: flex; - align-items: center; - justify-content: center; -} - -header { - background-color: #143055; - color: white; - padding: 5px; - border-radius: 3px; -} - -main { - padding: 0 36px; -} - -p { - text-align: center; -} - -h1 { - text-align: center; - margin-left: 18px; - font-size: 24px; -} - -h2 { - text-align: center; - font-size: 20px; - margin: 40px 0 10px 0; -} - -.resources { - text-align: center; - list-style: none; - padding: 0; - display: grid; - grid-gap: 9px; - grid-template-columns: 1fr 1fr; -} - -.resource { - color: #0094ba; - height: 36px; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 3px 9px; - text-decoration: none; -} - -.resource:hover { - background-color: rgba(68, 138, 255, 0.04); -} - -pre { - padding: 9px; - border-radius: 4px; - background-color: black; - color: #eee; -} - -details { - border-radius: 4px; - color: #333; - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0.12); - padding: 3px 9px; - margin-bottom: 9px; -} - -summary { - cursor: pointer; - outline: none; - height: 36px; - line-height: 36px; -} - -.github-star-container { - margin-top: 12px; - line-height: 20px; -} - -.github-star-container a { - display: flex; - align-items: center; - text-decoration: none; - color: #333; -} - -.github-star-badge { - color: #24292e; - display: flex; - align-items: center; - font-size: 12px; - padding: 3px 10px; - border: 1px solid rgba(27, 31, 35, 0.2); - border-radius: 3px; - background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%); - margin-left: 4px; - font-weight: 600; -} - -.github-star-badge:hover { - background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%); - border-color: rgba(27, 31, 35, 0.35); - background-position: -0.5em; -} -.github-star-badge .material-icons { - height: 16px; - width: 16px; - margin-right: 4px; -} diff --git a/apps/dafa-web/src/app/app.component.spec.ts b/apps/dafa-web/src/app/app.component.spec.ts index 6fe2037..059bb54 100644 --- a/apps/dafa-web/src/app/app.component.spec.ts +++ b/apps/dafa-web/src/app/app.component.spec.ts @@ -13,19 +13,4 @@ describe('AppComponent', () => { const app = fixture.componentInstance; expect(app).toBeTruthy(); }); - - it(`should have as title 'dafa-web'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('dafa-web'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain( - 'Welcome to dafa-web!' - ); - }); }); diff --git a/apps/dafa-web/src/app/app.component.ts b/apps/dafa-web/src/app/app.component.ts index 382df7b..48a13e6 100644 --- a/apps/dafa-web/src/app/app.component.ts +++ b/apps/dafa-web/src/app/app.component.ts @@ -1,10 +1,30 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { filter } from 'rxjs/operators'; +import { UnsubscribeDirective } from './directives/unsubscribe.directive'; @Component({ - selector: 'app-root', + selector: 'dafa-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent { - title = 'dafa-web'; +export class AppComponent extends UnsubscribeDirective { + path = ''; + + constructor(private router: Router) { + super(); + super.unsubscribeOnDestroy( + this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { + const url = this.router.url; + this.path = url.split('/')[1].split('?')[0] || ''; + }) + ); + } + + get appClass(): string { + let defaultClass = `dafa dafa--${this.path.length ? this.path : 'home'}`; + + return defaultClass; + } } diff --git a/apps/dafa-web/src/app/app.module.ts b/apps/dafa-web/src/app/app.module.ts index 7bcb9e9..f0f5a08 100644 --- a/apps/dafa-web/src/app/app.module.ts +++ b/apps/dafa-web/src/app/app.module.ts @@ -1,11 +1,14 @@ +import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; - +import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { NavigationModule } from './components/navigation/navigation.module'; +import { SkipToContentModule } from './components/skip-to-content/skip-to-content.module'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule], + imports: [BrowserModule, HttpClientModule, AppRoutingModule, SkipToContentModule, NavigationModule], providers: [], bootstrap: [AppComponent], }) diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.html b/apps/dafa-web/src/app/components/navigation/navigation.component.html new file mode 100644 index 0000000..5beb4de --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.html @@ -0,0 +1,20 @@ +-# Add a component -ng g @nrwl/angular:component xyz --project ui - - --View dependency graph
-nx dep-graph--- +Run affected commands
--# see what's been affected by changes -ng affected:dep-graph +-+ -# run tests for current changes -ng affected:test - -# run e2e tests for current changes -ng affected:e2e -+ + ++ + + +diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.scss b/apps/dafa-web/src/app/components/navigation/navigation.component.scss new file mode 100644 index 0000000..d18a8d7 --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.scss @@ -0,0 +1,116 @@ +@import 'mixins/list'; +@import 'variables/border-radius'; +@import 'variables/breakpoints'; +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; + +$navigation-height: 2.5rem; +$navigation-height-large: 4rem; + +.navigation { + background-color: white; + border-bottom: 1px solid $af__color-background-gray; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 $af__gutter-m; + + @media (max-width: $af__breakpoint-s-below) { + flex-direction: column; + } + + &__logo-wrapper { + height: 100%; + display: flex; + align-items: center; + } + + &__logo { + height: $navigation-height / 2; + vertical-align: middle; + + @media (min-width: $af__breakpoint-m) { + height: $navigation-height-large / 2; + } + } + + &__list { + @include dafa__reset-list; + display: flex; + } + + &__item { + display: flex; + align-items: center; + border-left: 1px solid $af__color-background-gray; + + &--no-link { + padding: 0 $af__gutter-m; + flex-direction: column; + } + + &:first-child { + margin-left: 0; + } + + &:last-child { + border-right: 1px solid $af__color-background-gray; + } + } + + &__link, + &__no-link { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: $af__font-size-xs; + color: $af__color-text; + width: 7rem; + height: $navigation-height; + font-weight: $af__font-weight-normal; + text-decoration: none; + + @media (min-width: $af__breakpoint-m) { + height: $navigation-height-large; + } + } + + &__link { + &:hover { + background-color: $af__color-background-gray; + } + + &--active { + &::after { + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 5px; + background-color: $af__color-primary; + } + } + } + + &__text { + margin-top: $af__gutter-xxs; + } + + &__news { + display: flex; + gap: $af__gutter-xs; + padding: $af__gutter-xs $af__gutter-s; + background-color: $af__color-complementary-alt; + color: $af__color-text-light; + border-radius: $af__border-radius; + + &:hover { + background-color: darken($af__color-complementary-alt, 10%); + } + } +} diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts b/apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts new file mode 100644 index 0000000..6b707df --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { NavigationComponent } from './navigation.component'; + +describe('NavigationComponent', () => { + let component: NavigationComponent; + let fixture: ComponentFixture; + + beforeEach( + waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [NavigationComponent], + }).compileComponents(); + }) + ); + + beforeEach(() => { + fixture = TestBed.createComponent(NavigationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.ts b/apps/dafa-web/src/app/components/navigation/navigation.component.ts new file mode 100644 index 0000000..a13cd27 --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IconType } from '@dafa-enums/icon-type.enum'; + +@Component({ + selector: 'dafa-navigation', + templateUrl: './navigation.component.html', + styleUrls: ['./navigation.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NavigationComponent { + iconType = IconType; +} diff --git a/apps/dafa-web/src/app/components/navigation/navigation.module.ts b/apps/dafa-web/src/app/components/navigation/navigation.module.ts new file mode 100644 index 0000000..a228ce8 --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { NavigationComponent } from './navigation.component'; + +@NgModule({ + declarations: [NavigationComponent], + imports: [CommonModule, RouterModule], + exports: [NavigationComponent], +}) +export class NavigationModule {} diff --git a/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss b/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss new file mode 100644 index 0000000..9b37abf --- /dev/null +++ b/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss @@ -0,0 +1,9 @@ +@import 'variables/gutters'; + +@media print { + .navigation { + border-bottom-width: 0; + padding: $af__gutter-m 0; + display: flex; + } +} diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html new file mode 100644 index 0000000..96bb2d5 --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html @@ -0,0 +1 @@ +Gå till sidans innehåll diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss new file mode 100644 index 0000000..a9b9579 --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss @@ -0,0 +1,31 @@ +@import 'variables/border-radius'; +@import 'variables/colors'; +@import 'variables/gutters'; + +.skip-to-content { + position: absolute; + top: -1000px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + overflow: hidden; + z-index: 1000; + text-align: center; + padding: $af__gutter-xs $af__gutter-m; + display: block; + background-color: $dafa__color-pink; + color: $af__color-text-light; + + &:focus { + position: fixed; + top: 0; + width: auto; + height: auto; + text-decoration: none; + } + + &:hover { + text-decoration: underline; + } +} diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts new file mode 100644 index 0000000..0d342d5 --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { SkipToContentComponent } from './skip-to-content.component'; + + +describe('SkipToContentComponent', () => { + let component: SkipToContentComponent; + let fixture: ComponentFixture ; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [SkipToContentComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SkipToContentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts new file mode 100644 index 0000000..da5f63f --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts @@ -0,0 +1,29 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { UnsubscribeDirective } from '@dafa-directives/unsubscribe.directive'; +import { filter } from 'rxjs/operators'; + +@Component({ + selector: 'dafa-skip-to-content', + templateUrl: './skip-to-content.component.html', + styleUrls: ['./skip-to-content.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SkipToContentComponent extends UnsubscribeDirective { + @Input() mainContentId: string; + skipLinkPath: string; + + constructor(private router: Router, private changeDetectorRef: ChangeDetectorRef) { + super(); + super.unsubscribeOnDestroy( + this.router.events.pipe(filter((event: any) => event instanceof NavigationEnd)).subscribe(({ url }) => { + const mainContentId = `#${this.mainContentId}`; + // Check if the current URL already includes the mainContentId. + const existsInUrl: boolean = url.substring(url.length - mainContentId.length, url.length) === mainContentId; + + this.skipLinkPath = existsInUrl ? url : `${url}${mainContentId}`; + this.changeDetectorRef.markForCheck(); + }) + ); + } +} diff --git a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts new file mode 100644 index 0000000..98c05b6 --- /dev/null +++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts @@ -0,0 +1,10 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { SkipToContentComponent } from './skip-to-content.component'; + +@NgModule({ + declarations: [SkipToContentComponent], + imports: [CommonModule], + exports: [SkipToContentComponent], +}) +export class SkipToContentModule {} diff --git a/apps/dafa-web/src/app/data/contants/.gitkeep b/apps/dafa-web/src/app/data/contants/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/app/data/enums/icon-size.enum.ts b/apps/dafa-web/src/app/data/enums/icon-size.enum.ts new file mode 100644 index 0000000..4cbf748 --- /dev/null +++ b/apps/dafa-web/src/app/data/enums/icon-size.enum.ts @@ -0,0 +1,6 @@ +export enum IconSize { + S = 's', + M = 'm', + L = 'l', + XL = 'xl', +} diff --git a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts new file mode 100644 index 0000000..94a8f05 --- /dev/null +++ b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts @@ -0,0 +1,4 @@ +export enum IconType { + HOME = 'home', + USER = 'user', +} diff --git a/apps/dafa-web/src/app/data/models/.gitkeep b/apps/dafa-web/src/app/data/models/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/app/directives/unsubscribe.directive.ts b/apps/dafa-web/src/app/directives/unsubscribe.directive.ts new file mode 100644 index 0000000..69a0555 --- /dev/null +++ b/apps/dafa-web/src/app/directives/unsubscribe.directive.ts @@ -0,0 +1,15 @@ +import { Directive, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs'; + +@Directive() +export class UnsubscribeDirective implements OnDestroy { + private subscriptions: Subscription[] = []; + + ngOnDestroy(): void { + this.subscriptions.forEach(sub => sub.unsubscribe()); + } + + unsubscribeOnDestroy(...sub: Subscription[]): void { + this.subscriptions.push(...sub); + } +} diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html new file mode 100644 index 0000000..69725b9 --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html @@ -0,0 +1,10 @@ + + diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss new file mode 100644 index 0000000..aa45972 --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss @@ -0,0 +1,4 @@ +.page-not-found { + text-align: center; + padding: 5rem; +} diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 0000000..fd91f6e --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { PageNotFoundComponent } from './page-not-found.component'; + + +describe('PageNotFoundComponent', () => { + let component: PageNotFoundComponent; + let fixture: ComponentFixture+ +Oj då! Vi kan inte hitta sidan.
+Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.
+ + + Gå tillbaka till startsidan + +; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ PageNotFoundComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PageNotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts new file mode 100644 index 0000000..7025798 --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts @@ -0,0 +1,9 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'dafa-page-not-found', + templateUrl: './page-not-found.component.html', + styleUrls: ['./page-not-found.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PageNotFoundComponent {} diff --git a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts new file mode 100644 index 0000000..e520f4a --- /dev/null +++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts @@ -0,0 +1,17 @@ +import { DigiNgIconArrowLeftModule } from '@af/digi-ng/_icon/icon-arrow-left'; +import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { PageNotFoundComponent } from './page-not-found.component'; + +@NgModule({ + declarations: [PageNotFoundComponent], + imports: [ + CommonModule, + RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]), + DigiNgTypographyBaseModule, + DigiNgIconArrowLeftModule, + ], +}) +export class PageNotFoundModule {} diff --git a/apps/dafa-web/src/app/pages/start/start.component.html b/apps/dafa-web/src/app/pages/start/start.component.html new file mode 100644 index 0000000..40b1c25 --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.component.html @@ -0,0 +1,3 @@ + + diff --git a/apps/dafa-web/src/app/pages/start/start.component.scss b/apps/dafa-web/src/app/pages/start/start.component.scss new file mode 100644 index 0000000..19f2ff8 --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.component.scss @@ -0,0 +1,101 @@ +@import 'variables/breakpoints'; +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; +@import 'mixins/ie11'; +@import 'mixins/typography'; + +.start { + &__header { + position: relative; + width: 100%; + margin: $af__gutter-goliath 0; + } + + &__heading { + position: absolute; + margin: 0; + bottom: $af__gutter-xxl; + left: -$af__gutter-m; + background-color: $af__color-primary; + color: $af__color-text-light; + padding: $af__gutter-m $af__gutter-xxl; + } + + &__intro { + max-width: 700px; + } + + &__subheading { + font-size: $af__font-size-h1 !important; + margin: $af__gutter-xxl 0 !important; + @include dafa__typography-ornament; + } + + &__background-image { + width: 100%; + height: 200px; + object-fit: cover; + object-position: center 33%; + + @media (min-width: $af__breakpoint-m) { + height: 250px; + } + + @media (min-width: $af__breakpoint-l) { + height: 290px; + } + + @media (min-width: $af__breakpoint-xl) { + height: 320px; + } + } + + &__cta-wrapper { + background-color: $af__color-background-alt-tertiary; + margin: $af__gutter-xxl 0; + padding: $af__gutter-xxl; + } + + &__cta { + display: flex; + gap: $af__gutter-xl; + } + + &__puff { + width: calc(100% / 3); + + @include ie11 { + &:not(:first-child) { + margin-left: $af__gutter-xl; + } + } + } + + &__footer { + margin-top: $af__gutter-goliath; + background-color: $af__color-background-light-gray; + padding: $af__gutter-xxl 0 $af__gutter-goliath; + } + + &__footer-heading { + margin-top: 0 !important; + margin-bottom: $af__gutter-l !important; + } + + &__card-wrapper { + display: flex; + align-content: stretch; + gap: $af__gutter-xxl; + } + + &__card { + max-width: 400px; + flex-basis: 100%; + } + + &__card-link { + display: inline-block; + margin-top: $af__gutter-l; + } +} diff --git a/apps/dafa-web/src/app/pages/start/start.component.spec.ts b/apps/dafa-web/src/app/pages/start/start.component.spec.ts new file mode 100644 index 0000000..19ff144 --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { StartComponent } from './start.component'; + +describe('StartComponent', () => { + let component: StartComponent; + let fixture: ComponentFixtureStart funkar! +; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [StartComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/pages/start/start.component.ts b/apps/dafa-web/src/app/pages/start/start.component.ts new file mode 100644 index 0000000..39f1c3c --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.component.ts @@ -0,0 +1,11 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'dafa-start', + templateUrl: './start.component.html', + styleUrls: ['./start.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class StartComponent { + constructor() {} +} diff --git a/apps/dafa-web/src/app/pages/start/start.module.ts b/apps/dafa-web/src/app/pages/start/start.module.ts new file mode 100644 index 0000000..2275f2e --- /dev/null +++ b/apps/dafa-web/src/app/pages/start/start.module.ts @@ -0,0 +1,11 @@ +import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { StartComponent } from './start.component'; + +@NgModule({ + declarations: [StartComponent], + imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]), DigiNgTypographyBaseModule], +}) +export class StartModule {} diff --git a/apps/dafa-web/src/app/services/.gitkeep b/apps/dafa-web/src/app/services/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/app/shared/components/.gitkeep b/apps/dafa-web/src/app/shared/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/app/utils/.gitkeep b/apps/dafa-web/src/app/utils/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/dafa-web/src/assets/favicon.png b/apps/dafa-web/src/assets/favicon.png new file mode 100644 index 0000000..3cd2e98 Binary files /dev/null and b/apps/dafa-web/src/assets/favicon.png differ diff --git a/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.png b/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.png new file mode 100644 index 0000000..946614f Binary files /dev/null and b/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.png differ diff --git a/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg b/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg new file mode 100644 index 0000000..ab684c2 --- /dev/null +++ b/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg @@ -0,0 +1,17 @@ + diff --git a/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.png b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.png new file mode 100644 index 0000000..8b26148 Binary files /dev/null and b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.png differ diff --git a/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg new file mode 100644 index 0000000..3fec471 --- /dev/null +++ b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg @@ -0,0 +1,17 @@ + diff --git a/apps/dafa-web/src/favicon.ico b/apps/dafa-web/src/favicon.ico deleted file mode 100644 index 317ebcb..0000000 Binary files a/apps/dafa-web/src/favicon.ico and /dev/null differ diff --git a/apps/dafa-web/src/index.html b/apps/dafa-web/src/index.html index b4e1407..9d49e6a 100644 --- a/apps/dafa-web/src/index.html +++ b/apps/dafa-web/src/index.html @@ -2,12 +2,12 @@ - DafaWeb +FA Mina Sidor - + - + diff --git a/apps/dafa-web/src/styles.scss b/apps/dafa-web/src/styles.scss deleted file mode 100644 index 90d4ee0..0000000 --- a/apps/dafa-web/src/styles.scss +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ diff --git a/apps/dafa-web/src/styles/functions/_u.scss b/apps/dafa-web/src/styles/functions/_u.scss new file mode 100644 index 0000000..b441394 --- /dev/null +++ b/apps/dafa-web/src/styles/functions/_u.scss @@ -0,0 +1 @@ +@import '~@af/sass/v2/layout/functions/u'; diff --git a/apps/dafa-web/src/styles/mixins/_a11y.scss b/apps/dafa-web/src/styles/mixins/_a11y.scss new file mode 100644 index 0000000..df4a14f --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_a11y.scss @@ -0,0 +1,5 @@ +@import '~@af/sass/v2/a11y/mixins/a11y__sr-only'; + +@mixin af__a11y-sr-only { + @include a11y__sr-only; +} diff --git a/apps/dafa-web/src/styles/mixins/_button.scss b/apps/dafa-web/src/styles/mixins/_button.scss new file mode 100644 index 0000000..9118568 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_button.scss @@ -0,0 +1,49 @@ +@import 'variables/colors'; +@import 'variables/gutters'; + +@mixin dafa__base-button { + position: relative; + border-width: 0; + background-color: transparent; + display: inline-flex; + align-items: center; + justify-content: center; + white-space: nowrap; + cursor: pointer; + font-size: 0.875rem; + padding: $af__gutter-xs $af__gutter-m; +} + +@mixin dafa__link-as-button { + text-decoration: none !important; // Needs important to override style from default anchor tag. + + &:hover { + text-decoration: none !important; // Needs important to override style from default anchor tag. + } +} + +@mixin dafa__white-button-with-border { + @include dafa__base-button; + background-color: $af__color-background-white; + color: $af__color-primary !important; // Needs important to override style from default anchor tag. + border: 1px solid $af__color-primary; + border-radius: 5px; + + &:hover { + background-color: #f1f8fe; + color: $af__color-primary !important; // Needs important to override style from default anchor tag. + } +} + +@mixin dafa__button-as-link($dark: false) { + background-color: transparent; + border-width: 0; + padding: 0; + margin: 0; + color: if($dark, $dafa__color-link-light, $af__color-link); + + &:hover { + color: if($dark, $dafa__color-link-light-active, $af__color-link-active); + text-decoration: underline; + } +} diff --git a/apps/dafa-web/src/styles/mixins/_flex.scss b/apps/dafa-web/src/styles/mixins/_flex.scss new file mode 100644 index 0000000..22fd661 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_flex.scss @@ -0,0 +1,5 @@ +@mixin dafa__flex-center { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/apps/dafa-web/src/styles/mixins/_form.scss b/apps/dafa-web/src/styles/mixins/_form.scss new file mode 100644 index 0000000..ed07470 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_form.scss @@ -0,0 +1,65 @@ +@import '~@af/sass/v2/form/mixins/form__checkbox'; +@import '~@af/sass/v2/form/mixins/form__checkbox-check'; +@import '~@af/sass/v2/form/mixins/form__checkbox-base'; +@import '~@af/sass/v2/form/mixins/form__form-field--focus'; +@import '~@af/sass/v2/form/mixins/form__form-field--disabled'; +@import '~@af/sass/v2/form/mixins/form__select-input'; +@import '~@af/sass/v2/form/mixins/form__select-arrow'; +@import '~@af/sass/v2/form/mixins/form__radiobutton'; +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; + +@mixin af__form-checkbox($secondary: false, $disabled: false) { + @include form__checkbox($secondary, $disabled); +} + +@mixin af__form-checkbox-check($disabled: false) { + @include form__checkbox-check($disabled); +} + +@mixin af__form-checkbox-base { + @include form__checkbox-base; +} + +@mixin af__form-field-focus { + @include form__form-field--focus; +} + +@mixin af__form-field-disabled { + @include form__form-field--disabled; +} + +@mixin af__form-select-input { + @include form__select-input; +} + +@mixin af__form-select-arrow($disabled: false) { + @include form__select-arrow($disabled); +} + +@mixin af__form-radiobutton { + @include form__radiobutton; +} + +@mixin dafa__fieldset-reset($legendAsHeading: true) { + margin: 0; + padding: 0; + border-width: 0; + + legend { + position: relative; + text-align: left; + + @if $legendAsHeading { + width: 100%; + display: flex; + align-items: center; + padding-bottom: $af__gutter-xs; + margin: 0; + font-weight: $af__font-weight-bold; + font-size: $af__font-size-s; + border-bottom: 1px solid $af__color-border-light; + } + } +} diff --git a/apps/dafa-web/src/styles/mixins/_gutter.scss b/apps/dafa-web/src/styles/mixins/_gutter.scss new file mode 100644 index 0000000..b2a3179 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_gutter.scss @@ -0,0 +1,8 @@ +@import 'variables/gutters'; + +@mixin dafa__option-gutter-reset { + line-height: unset; + height: auto; + padding-top: $af__gutter-xs; + padding-bottom: $af__gutter-xs; +} diff --git a/apps/dafa-web/src/styles/mixins/_icon.scss b/apps/dafa-web/src/styles/mixins/_icon.scss new file mode 100644 index 0000000..540ccd8 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_icon.scss @@ -0,0 +1,7 @@ +@mixin dafa__digi-ng-icon($width: 1em) { + display: inline-flex; + justify-content: center; + align-items: center; + width: $width; + max-height: $width; +} diff --git a/apps/dafa-web/src/styles/mixins/_link.scss b/apps/dafa-web/src/styles/mixins/_link.scss new file mode 100644 index 0000000..db6c540 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_link.scss @@ -0,0 +1,20 @@ +@import 'variables/colors'; + +@mixin dafa__link-style($with-hover: true) { + padding: 0; + cursor: pointer; + color: $af__color-link; + text-align: left; + white-space: normal; + + @if $with-hover { + &:hover { + @include dafa__link-hover-style(); + } + } +} + +@mixin dafa__link-hover-style { + color: $af__color-link-active; + text-decoration: underline; +} diff --git a/apps/dafa-web/src/styles/mixins/_list.scss b/apps/dafa-web/src/styles/mixins/_list.scss new file mode 100644 index 0000000..f4f299b --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_list.scss @@ -0,0 +1,5 @@ +@mixin dafa__reset-list { + list-style: none; + padding: 0; + margin: 0; +} diff --git a/apps/dafa-web/src/styles/mixins/_ribbon.scss b/apps/dafa-web/src/styles/mixins/_ribbon.scss new file mode 100644 index 0000000..921547f --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_ribbon.scss @@ -0,0 +1,7 @@ +$ribbon-position: 0.5rem; + +@mixin dafa__ribbon-wrapper { + position: absolute; + top: $ribbon-position * 2; + right: -$ribbon-position; +} diff --git a/apps/dafa-web/src/styles/mixins/_typography.scss b/apps/dafa-web/src/styles/mixins/_typography.scss new file mode 100644 index 0000000..e9c3b61 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_typography.scss @@ -0,0 +1,23 @@ +@import '~@af/sass/v2/typography/mixins/typography__text'; +@import 'functions/u'; + +@mixin af__typography-text { + @include typography__text($compressed: true, $unthemable: true); +} + +@mixin dafa__typography-ornament { + &::after { + content: ''; + display: block; + margin-top: u(6); + height: u(1.4); + max-width: u(38); + background: $ui__color--primary; + + @media (min-width: $layout__breakpoint--l) { + height: u(2); + width: 100%; + max-width: u(44); + } + } +} diff --git a/apps/dafa-web/src/styles/mixins/ie11.scss b/apps/dafa-web/src/styles/mixins/ie11.scss new file mode 100644 index 0000000..e1c07a5 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/ie11.scss @@ -0,0 +1,5 @@ +@mixin ie11 { + @media all and (-ms-high-contrast: none) { + @content; + } +} diff --git a/apps/dafa-web/src/styles/styles.scss b/apps/dafa-web/src/styles/styles.scss new file mode 100644 index 0000000..74ddf49 --- /dev/null +++ b/apps/dafa-web/src/styles/styles.scss @@ -0,0 +1,76 @@ +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; +@import 'mixins/a11y'; +@import 'mixins/button'; +@import 'mixins/icon'; + +* { + font-family: $af__font-family; + box-sizing: border-box; + + ::before, + ::after { + box-sizing: border-box; + } +} + +body { + margin: 0; + font-weight: $af__font-weight-normal; +} + +button { + @include dafa__base-button; +} + +strong { + font-weight: $af__font-weight-semi-bold; +} + +.af__a11y-sr-only { + @include af__a11y-sr-only; +} + +.dafa { + &__digi-ng-icon { + @include dafa__digi-ng-icon; + + &--right-margin { + margin-right: $af__gutter-s; + } + &--left-margin { + margin-left: $af__gutter-m; + } + } + + &__highlight-characters { + background-color: transparent; + font-weight: $af__font-weight-bold; + } + + &__link { + display: inline-flex; + + &--with-icon { + gap: $af__gutter-xs; + } + } +} + +// @af/digi-ng overrides +.digi-ng-typography-icon-text__icon { + display: inline-flex; +} + +@media print { + * { + color: $af__color-text-dark !important; + } + + .dafa { + &__hide-on-print { + display: none !important; + } + } +} diff --git a/apps/dafa-web/src/styles/variables/_border-radius.scss b/apps/dafa-web/src/styles/variables/_border-radius.scss new file mode 100644 index 0000000..48a1e71 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_border-radius.scss @@ -0,0 +1,3 @@ +@import '~@af/sass/v2/ui/variables/ui__borders'; + +$af__border-radius: $ui__border-radius--rounded; diff --git a/apps/dafa-web/src/styles/variables/_box-shadow.scss b/apps/dafa-web/src/styles/variables/_box-shadow.scss new file mode 100644 index 0000000..9683e01 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_box-shadow.scss @@ -0,0 +1,5 @@ +@import '~@af/sass/v2/ui/variables/ui__variables'; +@import '~@af/sass/v2/ui/variables/ui__shadows'; + +$af__box-shadow: $ui__box-shadow--elevated; +$af__box-shadow-interactive-focus-outline: $ui__shadow--interactive-focus-outline; diff --git a/apps/dafa-web/src/styles/variables/_breakpoints.scss b/apps/dafa-web/src/styles/variables/_breakpoints.scss new file mode 100644 index 0000000..588f624 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_breakpoints.scss @@ -0,0 +1,13 @@ +@import '~@af/sass/v2/layout/variables/layout__variables'; + +// AF variables +$af__breakpoint-s: $layout__breakpoint--s; // 576px +$af__breakpoint-s-below: $af__breakpoint-s - 1; // 575px +$af__breakpoint-m: $layout__breakpoint--m; // 768px +$af__breakpoint-m-below: $af__breakpoint-m - 1; // 767px +$af__breakpoint-l: $layout__breakpoint--l; // 992px +$af__breakpoint-l-below: $af__breakpoint-l - 1; // 991px +$af__breakpoint-xl: $layout__breakpoint--xl; // 1200px +$af__breakpoint-xl-below: $af__breakpoint-xl - 1; // 1199px + +// Local variables diff --git a/apps/dafa-web/src/styles/variables/_colors.scss b/apps/dafa-web/src/styles/variables/_colors.scss new file mode 100644 index 0000000..01ede79 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_colors.scss @@ -0,0 +1,71 @@ +@import '~@af/sass/v2/ui/variables/ui__colors'; +@import '~@af/sass/v2/typography/variables/typography__variables'; + +// AF variables +$af__color-primary: $ui__color--primary; +$af__color-secondary: $ui__color--secondary; +$af__color-complementary: $ui__color--complementary; +$af__color-complementary-alt: $ui__color--complementary-alt; +$af__color-interactive: $ui__color--interactive; +$af__color--background-alt-secondary: $ui__color--background-alt-secondary; + +$af__color-info: $ui__color--informative; +$af__color-success: $ui__color--success; +$af__color-danger: $ui__color--danger; +$af__color-warning: $ui__color--warning; + +$af__color-approved: $ui__color--approved; +$af__color-action-needed: $ui__color--action-needed; +$af__color-denied: $ui__color--denied; +$af__color-missing: $ui__color--missing; + +$af__color-text-light: $typography__color--text-light; +$af__color-text-dimmed: $typography__color--text-dimmed; +$af__color-text-dimmed-alt: $typography__color--text-dimmed-alt; +$af__color-text: $typography__color--text; +$af__color-text-dark: $typography__color--text-dark; +$af__color-text-disabled: $typography__color--text-disabled; + +$af__color-link: $typography__color--link; +$af__color-link-active: $typography__color--link-active; +$af__color-link-visited: $typography__color--link-visited; + +$af__color-background-white: $ui__color--background; +$af__color-background-light-gray: $ui__color--background-alt; +$af__color-background-gray: $ui__color--background-alt-secondary; +$af__color-background-dark-gray: $ui__color--background-off; +$af__color-background-dark: $ui__color--background-dark; +$af__color-background-alt-tertiary: $ui__color--background-alt-tertiary; + +$af__color-border: $ui__color--border; +$af__color-border-dark: $ui__color--border-dark; +$af__color-border-light: $ui__color--border-light; +$af__color-separator: $ui__color--separator; +$af__color-background-warning: $ui__color--yellow-light; + +$af__color-disabled: $ui__color--disabled; + +// Local variables +$dafa__color-pink: #d43372; +$dafa__color-primary-20: #ccccde; +$dafa__color-link-light: $af__color-text-light; +$dafa__color-link-light-active: darken($af__color-text-light, 10%); + +$dafa__color-fub: #666666; +$dafa__color-fub-dark: darken($dafa__color-fub, 30%); +$dafa__color-fub-text: $af__color-text-light; +$dafa__color-aub: #1616b2; +$dafa__color-aub-dark: darken($dafa__color-aub, 30%); +$dafa__color-aub-text: $af__color-text-light; +$dafa__color-aub-test: #058470; +$dafa__color-aub-test-dark: darken($dafa__color-aub-test, 30%); +$dafa__color-aub-test-text: $af__color-text-light; +$dafa__color-folkhogskola: #d43372; +$dafa__color-folkhogskola-dark: darken($dafa__color-folkhogskola, 30%); +$dafa__color-folkhogskola-text: $af__color-text-light; +$dafa__color-rek: #fddc41; +$dafa__color-rek-dark: darken($dafa__color-rek, 30%); +$dafa__color-rek-text: $af__color-text-dark; +$dafa__color-anstalt: #e21c50; +$dafa__color-anstalt-dark: darken($dafa__color-anstalt, 30%); +$dafa__color-anstalt-text: $af__color-text-light; diff --git a/apps/dafa-web/src/styles/variables/_containers.scss b/apps/dafa-web/src/styles/variables/_containers.scss new file mode 100644 index 0000000..3ddab1c --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_containers.scss @@ -0,0 +1,10 @@ +@import '~@af/sass/v2/layout/variables/layout__variables'; + +// AF variables +$af__container-width-xs: $layout__container--width-xs; +$af__container-width-s: $layout__container--width-s; +$af__container-width-m: $layout__container--width-m; +$af__container-width-l: $layout__container--width-l; +$af__container-width-xl: $layout__container--width-xl; + +// Local variables diff --git a/apps/dafa-web/src/styles/variables/_form.scss b/apps/dafa-web/src/styles/variables/_form.scss new file mode 100644 index 0000000..beacd76 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_form.scss @@ -0,0 +1,9 @@ +@import '~@af/sass/v2/ui/variables/ui__variables'; + +// AF variables +$af__form-input-height: $ui__input-height; +$af__form-input-height-s: $ui__input-height--s; +$af__form-input-height-l: $ui__input-height--l; +$af__form-input-border: $ui__input-border; // 1px solid $ui__color--border + +// Local variables diff --git a/apps/dafa-web/src/styles/variables/_gutters.scss b/apps/dafa-web/src/styles/variables/_gutters.scss new file mode 100644 index 0000000..1177564 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_gutters.scss @@ -0,0 +1,14 @@ +@import '~@af/sass/v2/layout/variables/layout__variables'; +@import '~@af/sass/v2/layout/functions/u'; + +// AF variables +$af__gutter-goliath: u(15); // 75px +$af__gutter-xxl: u(7); // 35px +$af__gutter-xl: u(5); // 25px +$af__gutter-l: $layout__gutter--l; // 20px +$af__gutter-m: $layout__gutter; // 15px +$af__gutter-s: $layout__gutter--s; // 10px +$af__gutter-xs: $layout__gutter--xs; // 5px +$af__gutter-xxs: $layout__gutter--xxs; // 2.5px + +// Local variables diff --git a/apps/dafa-web/src/styles/variables/_shadows.scss b/apps/dafa-web/src/styles/variables/_shadows.scss new file mode 100644 index 0000000..3eeb82c --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_shadows.scss @@ -0,0 +1,4 @@ +@import '~@af/sass/v2/ui/variables/ui__shadows'; + +// AF variables +$af__shadow-base: $ui__shadow--shadow-base-outline; diff --git a/apps/dafa-web/src/styles/variables/_typography.scss b/apps/dafa-web/src/styles/variables/_typography.scss new file mode 100644 index 0000000..07833f1 --- /dev/null +++ b/apps/dafa-web/src/styles/variables/_typography.scss @@ -0,0 +1,28 @@ +@import '~@af/sass/v2/typography/variables/typography__variables'; + +// AF variables +$af__font-weight-normal: $typography__font-weight; // 400 +$af__font-weight-semi-bold: $typography__font-weight--semibold; // 600 +$af__font-weight-bold: $typography__font-weight--bold; // 700 + +$af__font-family: $typography__font-family; // 'Open sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +$af__font-size: $typography__font-size; // 1rem +$af__font-size-xs: $typography__font-size--xs; // .875rem +$af__font-size-s: $typography__font-size--s; // .9375rem +$af__font-size-m: $typography__font-size--m; // 1.25rem +$af__font-size-heading: $typography__font-size--heading; // 1.125rem +$af__font-size-h1: $typography__font-size--h1; // 1.75rem +$af__font-size-h2: $typography__font-size--h2; // 1.375rem +$af__font-size-h3: $typography__font-size--h3; // 1.125rem +$af__font-size-desktop: $typography__font-size-desktop; // 1.125rem +$af__font-size-desktop-xs: $typography__font-size-desktop--xs; // .9375rem +$af__font-size-desktop-s: $typography__font-size-desktop--s; // 1rem +$af__font-size-desktop-heading: $typography__font-size-desktop--heading; // 1.375rem +$af__font-size-desktop-h1: $typography__font-size-desktop--h1; // 2.5rem +$af__font-size-desktop-h2: $typography__font-size-desktop--h2; // 1.75rem +$af__font-size-desktop-h3: $typography__font-size-desktop--h3; // 1.375rem +$af__font-size-desktop-compressed: $typography__font-size-desktop--compressed; // 1rem +$af__font-size-desktop-h1-compressed: $typography__font-size-desktop--h1-compressed; // 1.75rem + +// Local variables +$dafa__font-size-h1: 1.5rem; diff --git a/package-lock.json b/package-lock.json index 8a57945..211b162 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@af/digi-ng": "^11.3.4", + "@af/sass": "^10.2.4", "@angular/animations": "^11.2.0", "@angular/common": "^11.2.0", "@angular/compiler": "^11.2.0", @@ -107,6 +108,12 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "license": "0BSD" }, + "node_modules/@af/sass": { + "version": "10.2.4", + "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/@af/sass/-/sass-10.2.4.tgz", + "integrity": "sha512-Ok1Je9QGnFHVN/txTS56oTpdkE9uqzfXwoEeIfqc+g7ehZ2aprdVPULtLKO6ePM8ltLsuqPxFQK0CYj44+sHxg==", + "license": "MIT" + }, "node_modules/@angular-devkit/architect": { "version": "0.1100.7", "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.7.tgz", @@ -25095,6 +25102,11 @@ } } }, + "@af/sass": { + "version": "10.2.4", + "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/@af/sass/-/sass-10.2.4.tgz", + "integrity": "sha512-Ok1Je9QGnFHVN/txTS56oTpdkE9uqzfXwoEeIfqc+g7ehZ2aprdVPULtLKO6ePM8ltLsuqPxFQK0CYj44+sHxg==" + }, "@angular-devkit/architect": { "version": "0.1100.7", "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.7.tgz", diff --git a/package.json b/package.json index 1c14017..f8bda9b 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "private": true, "dependencies": { "@af/digi-ng": "^11.3.4", + "@af/sass": "^10.2.4", "@angular/animations": "^11.2.0", "@angular/common": "^11.2.0", "@angular/compiler": "^11.2.0", diff --git a/tsconfig.base.json b/tsconfig.base.json index 11253ac..698fe87 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -14,7 +14,17 @@ "skipLibCheck": true, "skipDefaultLibCheck": true, "baseUrl": ".", - "paths": {} + "paths": { + "@dafa-assets/*": ["apps/dafa-web/src/assets/*"], + "@dafa-shared/*": ["apps/dafa-web/src/app/shared/*"], + "@dafa-models/*": ["apps/dafa-web/src/app/data/models/*"], + "@dafa-constants/*": ["apps/dafa-web/src/app/data/constants/*"], + "@dafa-directives/*": ["apps/dafa-web/src/app/directives/*"], + "@dafa-enums/*": ["apps/dafa-web/src/app/data/enums/*"], + "@dafa-services/*": ["apps/dafa-web/src/app/services/*"], + "@dafa-utils/*": ["apps/dafa-web/src/app/utils/*"], + "@dafa-environment": ["apps/dafa-web/src/environments/environment"] + } }, "exclude": ["node_modules", "tmp"] } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..ffcbb94 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "./tsconfig.base.json" +}
+