diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.scss b/apps/dafa-web/src/app/components/navigation/navigation.component.scss
index 69156a8..1d10f1b 100644
--- a/apps/dafa-web/src/app/components/navigation/navigation.component.scss
+++ b/apps/dafa-web/src/app/components/navigation/navigation.component.scss
@@ -1,21 +1,19 @@
@import 'mixins/list';
@import 'variables/breakpoints';
@import 'variables/colors';
-@import 'variables/gutters';
-@import 'variables/typography';
@import 'variables/navigation';
.navigation {
- background-color: $af__color-primary;
- border-bottom: 1px solid $af__color-background-dark-gray;
+ background-color: var(--digi--ui--color--background--profile);
+ border-bottom: 1px solid var(--digi--ui--color--background--off);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
- padding: 0 $af__gutter-m;
+ padding: 0 var(--digi--layout--gutter);
height: $dafa__navigation-height;
- @media (min-width: $af__breakpoint-m) {
+ @media (min-width: $digi--layout--breakpoint--m) {
height: $dafa__navigation-height-large;
}
@@ -29,7 +27,7 @@
height: $dafa__navigation-height / 2.5;
vertical-align: middle;
- @media (min-width: $af__breakpoint-m) {
+ @media (min-width: $digi--layout--breakpoint--m) {
height: $dafa__navigation-height-large / 2.5;
}
}
@@ -43,10 +41,10 @@
&__item {
display: flex;
align-items: center;
- border-left: 1px solid $af__color-background-dark-gray;
+ border-left: 1px solid var(--digi--ui--color--background--off);
&--no-link {
- padding: 0 $af__gutter-m;
+ padding: 0 var(--digi--layout--gutter);
flex-direction: column;
}
@@ -55,7 +53,7 @@
}
&:last-child {
- border-right: 1px solid $af__color-background-dark-gray;
+ border-right: 1px solid var(--digi--ui--color--background--off);
}
}
@@ -66,17 +64,17 @@
flex-direction: column;
align-items: center;
justify-content: center;
- font-size: $af__font-size-xs;
- color: $af__color-text-light;
+ font-size: --digi--typography--font-size--xs;
+ color: var(--digi--typography--color--text--light);
width: 7rem;
height: 100%;
- font-weight: $af__font-weight-normal;
+ font-weight: var(--digi--typography--font-weight);
text-decoration: none;
}
&__link {
&:hover {
- background-color: $af__color-interactive;
+ background-color: $digi--ui--color--primary-light;
}
&--active {
@@ -87,12 +85,12 @@
bottom: 0;
left: 0;
height: 5px;
- background-color: $af__color-secondary;
+ background-color: $digi--ui--color--secondary;
}
}
}
&__text {
- margin-top: $af__gutter-xs;
+ margin-top: var(--digi--layout--gutter--xs);
}
}
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
index 9b37abf..190f6d9 100644
--- a/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss
+++ b/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss
@@ -1,9 +1,7 @@
-@import 'variables/gutters';
-
@media print {
.navigation {
border-bottom-width: 0;
- padding: $af__gutter-m 0;
+ padding: var(--digi--layout--gutter) 0;
display: flex;
}
}
diff --git a/apps/dafa-web/src/app/components/sidebar/sidebar.component.scss b/apps/dafa-web/src/app/components/sidebar/sidebar.component.scss
index dd982a1..a3d2802 100644
--- a/apps/dafa-web/src/app/components/sidebar/sidebar.component.scss
+++ b/apps/dafa-web/src/app/components/sidebar/sidebar.component.scss
@@ -1,15 +1,12 @@
@import 'variables/colors';
-@import 'variables/gutters';
-@import 'variables/typography';
-@import 'mixins/link';
@import 'mixins/list';
.sidebar {
display: flex;
height: 100%;
flex-direction: column;
- background-color: $af__color-background-light-gray;
- border-right: 1px solid $af__color-background-dark-gray;
+ background-color: var(--digi--ui--color--background--secondary);
+ border-right: 1px solid var(--digi--ui--color--background--off);
&__list {
@include dafa__reset-list;
@@ -20,18 +17,18 @@
display: flex;
align-items: center;
width: 100%;
- padding: $af__gutter-s $af__gutter-m;
- border-bottom: 1px solid $af__color-background-dark-gray;
- color: $af__color-text !important;
+ padding: var(--digi--layout--gutter) var(--digi--layout--gutter);
+ border-bottom: 1px solid var(--digi--ui--color--background--off);
+ color: var(--digi--typography--color--text) !important;
text-decoration: none;
- font-weight: $af__font-weight-normal;
+ font-weight: var(--digi--typography--font-weight);
&:hover {
- background-color: $af__color-background-gray;
+ background-color: var(--digi--ui--color--background--tertiary);
}
&--active {
- font-weight: $af__font-weight-semi-bold;
+ font-weight: var(--digi--typography--font-weight--semibold);
&::before {
content: '';
@@ -40,7 +37,7 @@
right: 0;
bottom: 0;
width: 5px;
- background-color: $af__color-primary;
+ background-color: var(--digi--ui--color--primary);
}
}
}
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
index a9b9579..90b6913 100644
--- 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
@@ -1,6 +1,4 @@
-@import 'variables/border-radius';
@import 'variables/colors';
-@import 'variables/gutters';
.skip-to-content {
position: absolute;
@@ -12,10 +10,10 @@
overflow: hidden;
z-index: 1000;
text-align: center;
- padding: $af__gutter-xs $af__gutter-m;
+ padding: var(--digi--layout--gutter--xs) var(--digi--layout--gutter);
display: block;
- background-color: $dafa__color-pink;
- color: $af__color-text-light;
+ background-color: var(--digi--ui--color--complementary-alt);
+ color: var(--digi--typography--color--text--light);
&:focus {
position: fixed;
diff --git a/apps/dafa-web/src/app/pages/call-off/call-off.component.spec.ts b/apps/dafa-web/src/app/pages/call-off/call-off.component.spec.ts
index 1d163e8..c189e6e 100644
--- a/apps/dafa-web/src/app/pages/call-off/call-off.component.spec.ts
+++ b/apps/dafa-web/src/app/pages/call-off/call-off.component.spec.ts
@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { CallOffComponent } from './call-off.component';
describe('CallOffComponent', () => {
@@ -12,7 +10,7 @@ describe('CallOffComponent', () => {
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [CallOffComponent],
- imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+ imports: [RouterTestingModule],
}).compileComponents();
})
);
diff --git a/apps/dafa-web/src/app/pages/messages/messages.component.spec.ts b/apps/dafa-web/src/app/pages/messages/messages.component.spec.ts
index b7d99e7..10653f5 100644
--- a/apps/dafa-web/src/app/pages/messages/messages.component.spec.ts
+++ b/apps/dafa-web/src/app/pages/messages/messages.component.spec.ts
@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { MessagesComponent } from './messages.component';
describe('MessagesComponent', () => {
@@ -12,7 +10,7 @@ describe('MessagesComponent', () => {
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [MessagesComponent],
- imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+ imports: [RouterTestingModule],
}).compileComponents();
})
);
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
index 1f08c37..d86cccc 100644
--- 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
@@ -1,12 +1,10 @@
-
-
-
- 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
-
-
-
-
+
+
+ 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
+
+
+
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
index aa45972..e69de29 100644
--- 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
@@ -1,4 +0,0 @@
-.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
index c9269de..b58d3b7 100644
--- 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
@@ -1,8 +1,5 @@
-import { DigiNgIconArrowLeftModule } from '@af/digi-ng/_icon/icon-arrow-left';
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { PageNotFoundComponent } from './page-not-found.component';
describe('PageNotFoundComponent', () => {
@@ -13,7 +10,7 @@ describe('PageNotFoundComponent', () => {
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [PageNotFoundComponent],
- imports: [RouterTestingModule, DigiNgTypographyBaseModule, DigiNgIconArrowLeftModule, HorizontalCenterModule],
+ imports: [RouterTestingModule],
}).compileComponents();
})
);
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
index 5ab9aa1..29c6630 100644
--- 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
@@ -1,19 +1,11 @@
-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 { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { PageNotFoundComponent } from './page-not-found.component';
@NgModule({
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [PageNotFoundComponent],
- imports: [
- CommonModule,
- RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]),
- DigiNgTypographyBaseModule,
- DigiNgIconArrowLeftModule,
- HorizontalCenterModule,
- ],
+ imports: [CommonModule, RouterModule.forChild([{ path: '', component: PageNotFoundComponent }])],
})
export class PageNotFoundModule {}
diff --git a/apps/dafa-web/src/app/pages/participants/participants.component.html b/apps/dafa-web/src/app/pages/participants/participants.component.html
index f354dc2..78e7001 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.component.html
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.html
@@ -1 +1,8 @@
-
+
+ Mina deltagare
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna neque, interdum vel massa eget, condimentum
+ rutrum velit. Sed vitae ullamcorper sem. Aliquam malesuada nunc sed purus mollis scelerisque. Curabitur bibendum leo
+ quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
+
+
diff --git a/apps/dafa-web/src/app/pages/participants/participants.component.spec.ts b/apps/dafa-web/src/app/pages/participants/participants.component.spec.ts
index 954ec55..430192f 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.component.spec.ts
+++ b/apps/dafa-web/src/app/pages/participants/participants.component.spec.ts
@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { ParticipantsComponent } from './participants.component';
describe('ParticipantsComponent', () => {
@@ -12,7 +10,7 @@ describe('ParticipantsComponent', () => {
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ParticipantsComponent],
- imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+ imports: [RouterTestingModule],
}).compileComponents();
})
);
diff --git a/apps/dafa-web/src/app/pages/participants/participants.module.ts b/apps/dafa-web/src/app/pages/participants/participants.module.ts
index eaf4c43..bc30997 100644
--- a/apps/dafa-web/src/app/pages/participants/participants.module.ts
+++ b/apps/dafa-web/src/app/pages/participants/participants.module.ts
@@ -1,9 +1,10 @@
import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParticipantsComponent } from './participants.component';
@NgModule({
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [ParticipantsComponent],
imports: [CommonModule, RouterModule.forChild([{ path: '', component: ParticipantsComponent }])],
})
diff --git a/apps/dafa-web/src/app/pages/settings/settings.component.spec.ts b/apps/dafa-web/src/app/pages/settings/settings.component.spec.ts
index 0ae7c47..e52fe20 100644
--- a/apps/dafa-web/src/app/pages/settings/settings.component.spec.ts
+++ b/apps/dafa-web/src/app/pages/settings/settings.component.spec.ts
@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { SettingsComponent } from './settings.component';
describe('SettingsComponent', () => {
@@ -12,7 +10,7 @@ describe('SettingsComponent', () => {
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [SettingsComponent],
- imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+ imports: [RouterTestingModule],
}).compileComponents();
})
);
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
index 4fb2c2b..450853e 100644
--- a/apps/dafa-web/src/app/pages/start/start.component.spec.ts
+++ b/apps/dafa-web/src/app/pages/start/start.component.spec.ts
@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { StartComponent } from './start.component';
describe('StartComponent', () => {
@@ -12,7 +10,7 @@ describe('StartComponent', () => {
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [StartComponent],
- imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+ imports: [RouterTestingModule],
}).compileComponents();
})
);
diff --git a/apps/dafa-web/src/app/pages/statistics/statistics.component.spec.ts b/apps/dafa-web/src/app/pages/statistics/statistics.component.spec.ts
index de57812..d311ffb 100644
--- a/apps/dafa-web/src/app/pages/statistics/statistics.component.spec.ts
+++ b/apps/dafa-web/src/app/pages/statistics/statistics.component.spec.ts
@@ -1,7 +1,5 @@
-import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module';
import { StatisticsComponent } from './statistics.component';
describe('StatisticsComponent', () => {
@@ -12,7 +10,7 @@ describe('StatisticsComponent', () => {
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [StatisticsComponent],
- imports: [RouterTestingModule, DigiNgTypographyBaseModule, HorizontalCenterModule],
+ imports: [RouterTestingModule],
}).compileComponents();
})
);
diff --git a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.html b/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.html
deleted file mode 100644
index 9e6a2af..0000000
--- a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.scss b/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.scss
deleted file mode 100644
index a956795..0000000
--- a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import 'variables/breakpoints';
-@import 'variables/containers';
-@import 'variables/gutters';
-
-.horizontal-center {
- width: 100%;
- max-width: $af__breakpoint-xl;
- padding: 0 $af__gutter-m;
- margin: 0 auto;
-}
diff --git a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.spec.ts b/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.spec.ts
deleted file mode 100644
index d37f797..0000000
--- a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HorizontalCenterComponent } from './horizontal-center.component';
-
-describe('HorizontalCenterComponent', () => {
- let component: HorizontalCenterComponent;
- let fixture: ComponentFixture
;
-
- beforeEach(
- waitForAsync(() => {
- TestBed.configureTestingModule({
- declarations: [HorizontalCenterComponent],
- }).compileComponents();
- })
- );
-
- beforeEach(() => {
- fixture = TestBed.createComponent(HorizontalCenterComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.ts b/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.ts
deleted file mode 100644
index 085535a..0000000
--- a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
- selector: 'dafa-horizontal-center',
- templateUrl: './horizontal-center.component.html',
- styleUrls: ['./horizontal-center.component.scss', './horizontal-center.print.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HorizontalCenterComponent {}
diff --git a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.module.ts b/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.module.ts
deleted file mode 100644
index 0830df3..0000000
--- a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { DigiNgLayoutContainerModule } from '@af/digi-ng/_layout/layout-container';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { HorizontalCenterComponent } from './horizontal-center.component';
-
-@NgModule({
- declarations: [HorizontalCenterComponent],
- imports: [CommonModule, DigiNgLayoutContainerModule],
- exports: [HorizontalCenterComponent],
-})
-export class HorizontalCenterModule {}
diff --git a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.print.component.scss b/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.print.component.scss
deleted file mode 100644
index dbebd1d..0000000
--- a/apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.print.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@media print {
- .horizontal-center {
- padding: 0;
- }
-}
diff --git a/apps/dafa-web/src/app/shared/components/icon/icon.component.html b/apps/dafa-web/src/app/shared/components/icon/icon.component.html
index 8596f93..2622f64 100644
--- a/apps/dafa-web/src/app/shared/components/icon/icon.component.html
+++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.html
@@ -20,10 +20,10 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/apps/dafa-web/src/main.ts b/apps/dafa-web/src/main.ts
index d9a2e7e..47cef83 100644
--- a/apps/dafa-web/src/main.ts
+++ b/apps/dafa-web/src/main.ts
@@ -1,6 +1,6 @@
+import { defineCustomElements } from '@af/digi-core/loader';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
@@ -10,4 +10,6 @@ if (environment.production) {
platformBrowserDynamic()
.bootstrapModule(AppModule)
- .catch((err) => console.error(err));
+ .catch(err => console.error(err));
+
+defineCustomElements();
diff --git a/apps/dafa-web/src/styles/functions/_u.scss b/apps/dafa-web/src/styles/functions/_u.scss
deleted file mode 100644
index b441394..0000000
--- a/apps/dafa-web/src/styles/functions/_u.scss
+++ /dev/null
@@ -1 +0,0 @@
-@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
index df4a14f..c1ef6a8 100644
--- a/apps/dafa-web/src/styles/mixins/_a11y.scss
+++ b/apps/dafa-web/src/styles/mixins/_a11y.scss
@@ -1,5 +1,13 @@
-@import '~@af/sass/v2/a11y/mixins/a11y__sr-only';
-
-@mixin af__a11y-sr-only {
- @include a11y__sr-only;
+@mixin dafa__a11y-sr-only {
+ border: 0;
+ clip: rect(1px, 1px, 1px, 1px);
+ -webkit-clip-path: inset(50%);
+ clip-path: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ white-space: nowrap;
}
diff --git a/apps/dafa-web/src/styles/mixins/_button.scss b/apps/dafa-web/src/styles/mixins/_button.scss
deleted file mode 100644
index 9118568..0000000
--- a/apps/dafa-web/src/styles/mixins/_button.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@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/_form.scss b/apps/dafa-web/src/styles/mixins/_form.scss
deleted file mode 100644
index ed07470..0000000
--- a/apps/dafa-web/src/styles/mixins/_form.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@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
deleted file mode 100644
index b2a3179..0000000
--- a/apps/dafa-web/src/styles/mixins/_gutter.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@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/_link.scss b/apps/dafa-web/src/styles/mixins/_link.scss
deleted file mode 100644
index db6c540..0000000
--- a/apps/dafa-web/src/styles/mixins/_link.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@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/_ribbon.scss b/apps/dafa-web/src/styles/mixins/_ribbon.scss
deleted file mode 100644
index 921547f..0000000
--- a/apps/dafa-web/src/styles/mixins/_ribbon.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$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
deleted file mode 100644
index e9c3b61..0000000
--- a/apps/dafa-web/src/styles/mixins/_typography.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@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
deleted file mode 100644
index e1c07a5..0000000
--- a/apps/dafa-web/src/styles/mixins/ie11.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@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
index 6203319..0ae98cb 100644
--- a/apps/dafa-web/src/styles/styles.scss
+++ b/apps/dafa-web/src/styles/styles.scss
@@ -1,12 +1,9 @@
-@import 'variables/colors';
-@import 'variables/gutters';
-@import 'variables/typography';
+@import '~@af/digi-core/src/global/styles/digi';
@import 'mixins/a11y';
-@import 'mixins/button';
@import 'mixins/icon';
* {
- font-family: $af__font-family;
+ font-family: var(--digi--typography--font-family);
box-sizing: border-box;
::before,
@@ -17,36 +14,20 @@
body {
margin: 0;
- font-weight: $af__font-weight-normal;
-}
-
-button {
- @include dafa__base-button;
+ font-weight: var(--digi--typography--font-weight);
}
strong {
- font-weight: $af__font-weight-semi-bold;
-}
-
-.af__a11y-sr-only {
- @include af__a11y-sr-only;
+ font-weight: var(--digi--typography--font-weight--semibold);
}
.dafa {
- &__digi-ng-icon {
- @include dafa__digi-ng-icon;
-
- &--right-margin {
- margin-right: $af__gutter-s;
- }
- &--left-margin {
- margin-left: $af__gutter-m;
- }
+ &__a11y-sr-only {
+ @include dafa__a11y-sr-only;
}
- &__highlight-characters {
- background-color: transparent;
- font-weight: $af__font-weight-bold;
+ &__digi-icon {
+ display: inline-flex;
}
&__link {
@@ -54,24 +35,15 @@ strong {
align-items: center;
&--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;
+ gap: var(--digi--layout--gutter--xs);
+ }
+
+ &--ignore-visited:visited {
+ color: var(--digi--typography--color--link);
+
+ &:hover {
+ color: var(--digi--typography--color--link--active);
+ }
}
}
}
diff --git a/apps/dafa-web/src/styles/variables/_border-radius.scss b/apps/dafa-web/src/styles/variables/_border-radius.scss
deleted file mode 100644
index 48a1e71..0000000
--- a/apps/dafa-web/src/styles/variables/_border-radius.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@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
deleted file mode 100644
index 9683e01..0000000
--- a/apps/dafa-web/src/styles/variables/_box-shadow.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@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
index 588f624..32827c6 100644
--- a/apps/dafa-web/src/styles/variables/_breakpoints.scss
+++ b/apps/dafa-web/src/styles/variables/_breakpoints.scss
@@ -1,13 +1 @@
-@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
+@import '~@af/digi-core/src/global/styles/layout/variables/layout__variables';
diff --git a/apps/dafa-web/src/styles/variables/_colors.scss b/apps/dafa-web/src/styles/variables/_colors.scss
index 01ede79..26ad6d0 100644
--- a/apps/dafa-web/src/styles/variables/_colors.scss
+++ b/apps/dafa-web/src/styles/variables/_colors.scss
@@ -1,71 +1,6 @@
-@import '~@af/sass/v2/ui/variables/ui__colors';
-@import '~@af/sass/v2/typography/variables/typography__variables';
+@import '~@af/digi-core/src/global/styles/ui/variables/ui__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;
+// AF DIGI Variables
+$digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%);
// 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
deleted file mode 100644
index 3ddab1c..0000000
--- a/apps/dafa-web/src/styles/variables/_containers.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@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
deleted file mode 100644
index beacd76..0000000
--- a/apps/dafa-web/src/styles/variables/_form.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@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
deleted file mode 100644
index 1177564..0000000
--- a/apps/dafa-web/src/styles/variables/_gutters.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@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
deleted file mode 100644
index 3eeb82c..0000000
--- a/apps/dafa-web/src/styles/variables/_shadows.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@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
deleted file mode 100644
index 07833f1..0000000
--- a/apps/dafa-web/src/styles/variables/_typography.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@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 fd9dbb0..14a3b1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
"@af/auth": "^11.1.0",
"@af/digi-core": "^5.0.0",
"@af/digi-ng": "^12.1.0",
- "@af/sass": "^10.2.4",
"@angular/animations": "^11.2.0",
"@angular/common": "^11.2.0",
"@angular/compiler": "^11.2.0",
@@ -148,12 +147,6 @@
"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",
@@ -25174,11 +25167,6 @@
}
}
},
- "@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 928e3c2..639b583 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
"@af/auth": "^11.1.0",
"@af/digi-core": "^5.0.0",
"@af/digi-ng": "^12.1.0",
- "@af/sass": "^10.2.4",
"@angular/animations": "^11.2.0",
"@angular/common": "^11.2.0",
"@angular/compiler": "^11.2.0",