arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added some digi-core components and removed some old/unused css

Browse Source
This commit is contained in:
Erik Tiekstra
2021-03-23 15:47:53 +01:00
committed by Erik Tiekstra
parent 507a61a2ef
commit f7537671f3
49 changed files with 106 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular.json
View File

@@ -51,7 +51,7 @@
"assets": ["apps/dafa-web/src/assets"],
"styles": ["apps/dafa-web/src/styles/styles.scss"],
"stylePreprocessorOptions": {
"includePaths": ["node_modules/@af/sass", "apps/dafa-web/src/styles"]
"includePaths": ["apps/dafa-web/src/styles"]
},
"scripts": []
},

2
apps/dafa-web/src/app/app.component.html
View File

@@ -8,9 +8,7 @@
<main id="dafa-main-content" class="dafa__main">
<dafa-sidebar class="dafa__sidebar"></dafa-sidebar>
<div class="dafa__content">
<digi-ng-typography-base>
<router-outlet></router-outlet>
</digi-ng-typography-base>
</div>
</main>
</div>

5
apps/dafa-web/src/app/app.component.scss
View File

@@ -1,4 +1,3 @@
@import 'variables/gutters';
@import 'variables/navigation';
@import 'variables/breakpoints';
@@ -13,13 +12,13 @@
grid-area: sidebar;
height: calc(100vh - #{$dafa__navigation-height} - 1px);
@media (min-width: $af__breakpoint-m) {
@media (min-width: $digi--layout--breakpoint--m) {
height: calc(100vh - #{$dafa__navigation-height-large} - 1px);
}
}
&__content {
grid-area: content;
padding: $af__gutter-l;
padding: 1.25rem 1.5rem;
}
}

4
apps/dafa-web/src/app/components/navigation/navigation.component.html
View File

@@ -5,7 +5,7 @@
</a>
</div>
<ul class="navigation__list dafa__hide-on-print">
<!-- <li class="navigation__item">
<li class="navigation__item">
<a
class="navigation__link"
[routerLink]="['/']"
@@ -15,7 +15,7 @@
<dafa-icon [icon]="iconType.HOME" size="l"></dafa-icon>
<span class="navigation__text">Startsida</span>
</a>
</li> -->
</li>
<li class="navigation__item" *ngIf="user">
<div class="navigation__no-link">
<dafa-icon [icon]="iconType.USER" size="l"></dafa-icon>

30
apps/dafa-web/src/app/components/navigation/navigation.component.scss
View File

@@ -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);
}
}

4
apps/dafa-web/src/app/components/navigation/navigation.print.component.scss
View File

@@ -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;
}
}

21
apps/dafa-web/src/app/components/sidebar/sidebar.component.scss
View File

@@ -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);
}
}
}

8
apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss
View File

@@ -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;

4
apps/dafa-web/src/app/pages/call-off/call-off.component.spec.ts
View File

@@ -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();
})
);

4
apps/dafa-web/src/app/pages/messages/messages.component.spec.ts
View File

@@ -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();
})
);

12
apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html
View File

@@ -1,12 +1,10 @@
<digi-ng-typography-base [afCompressed]="true">
<dafa-horizontal-center>
<digi-typography>
<section class="page-not-found">
<h1 class="heading">Oj då! Vi kan inte hitta sidan.</h1>
<h1>Oj då! Vi kan inte hitta sidan.</h1>
<p>Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.</p>
<a class="dafa__link dafa__link--with-icon" routerLink="/">
<digi-ng-icon-arrow-left class="dafa__digi-ng-icon" aria-hidden="true"></digi-ng-icon-arrow-left>
<a class="dafa__link dafa__link--with-icon dafa__link--ignore-visited" routerLink="/">
<digi-icon-arrow-left class="dafa__digi-icon"></digi-icon-arrow-left>
Gå tillbaka till startsidan
</a>
</section>
</dafa-horizontal-center>
</digi-ng-typography-base>
</digi-typography>

4
apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss
View File

@@ -1,4 +0,0 @@
.page-not-found {
text-align: center;
padding: 5rem;
}

5
apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts
View File

@@ -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();
})
);

14
apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts
View File

@@ -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 {}

9
apps/dafa-web/src/app/pages/participants/participants.component.html
View File

@@ -1 +1,8 @@
<section class="participants">Mina deltagare funkar!</section>
<digi-typography>
<h1>Mina deltagare</h1>
<p>
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.
</p>
</digi-typography>

4
apps/dafa-web/src/app/pages/participants/participants.component.spec.ts
View File

@@ -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();
})
);

3
apps/dafa-web/src/app/pages/participants/participants.module.ts
View File

@@ -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 }])],
})

4
apps/dafa-web/src/app/pages/settings/settings.component.spec.ts
View File

@@ -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();
})
);

4
apps/dafa-web/src/app/pages/start/start.component.spec.ts
View File

@@ -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();
})
);

4
apps/dafa-web/src/app/pages/statistics/statistics.component.spec.ts
View File

@@ -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();
})
);

3
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.html
View File

@@ -1,3 +0,0 @@
<div class="horizontal-center">
<ng-content></ng-content>
</div>

10
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.scss
View File

@@ -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;
}

25
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.spec.ts
View File

@@ -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<HorizontalCenterComponent>;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [HorizontalCenterComponent],
}).compileComponents();
})
);
beforeEach(() => {
fixture = TestBed.createComponent(HorizontalCenterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

9
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.component.ts
View File

@@ -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 {}

11
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.module.ts
View File

@@ -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 {}

5
apps/dafa-web/src/app/shared/components/horizontal-center/horizontal-center.print.component.scss
View File

@@ -1,5 +0,0 @@
@media print {
.horizontal-center {
padding: 0;
}
}

12
apps/dafa-web/src/app/shared/components/icon/icon.component.html
View File

@@ -20,10 +20,10 @@
</digi-ng-icon-custom>
<ng-template #DigiNgIcon>
<digi-ng-icon-user-alt *ngIf="icon === iconType.USER" [ngClass]="iconClass"></digi-ng-icon-user-alt>
<digi-ng-icon-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-ng-icon-users-solid>
<digi-ng-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-ng-icon-bell>
<digi-ng-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-ng-icon-calendar-alt>
<digi-ng-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-ng-icon-envelope-filled>
<digi-ng-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-ng-icon-sokkandidat>
<digi-icon-user-alt *ngIf="icon === iconType.USER" [ngClass]="iconClass"></digi-icon-user-alt>
<digi-icon-users-solid *ngIf="icon === iconType.USERS" [ngClass]="iconClass"></digi-icon-users-solid>
<digi-icon-bell *ngIf="icon === iconType.BELL" [ngClass]="iconClass"></digi-icon-bell>
<digi-icon-calendar-alt *ngIf="icon === iconType.CALENDAR" [ngClass]="iconClass"></digi-icon-calendar-alt>
<digi-icon-envelope-filled *ngIf="icon === iconType.ENVELOPE" [ngClass]="iconClass"></digi-icon-envelope-filled>
<digi-icon-sokkandidat *ngIf="icon === iconType.SOK_KANDIDAT" [ngClass]="iconClass"></digi-icon-sokkandidat>
</ng-template>

6
apps/dafa-web/src/main.ts
View File

@@ -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();

1
apps/dafa-web/src/styles/functions/_u.scss
View File

@@ -1 +0,0 @@
@import '~@af/sass/v2/layout/functions/u';

16
apps/dafa-web/src/styles/mixins/_a11y.scss
View File

@@ -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;
}

49
apps/dafa-web/src/styles/mixins/_button.scss
View File

@@ -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;
}
}

65
apps/dafa-web/src/styles/mixins/_form.scss
View File

@@ -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;
}
}
}

8
apps/dafa-web/src/styles/mixins/_gutter.scss
View File

@@ -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;
}

20
apps/dafa-web/src/styles/mixins/_link.scss
View File

@@ -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;
}

7
apps/dafa-web/src/styles/mixins/_ribbon.scss
View File

@@ -1,7 +0,0 @@
$ribbon-position: 0.5rem;
@mixin dafa__ribbon-wrapper {
position: absolute;
top: $ribbon-position * 2;
right: -$ribbon-position;
}

23
apps/dafa-web/src/styles/mixins/_typography.scss
View File

@@ -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);
}
}
}

5
apps/dafa-web/src/styles/mixins/ie11.scss
View File

@@ -1,5 +0,0 @@
@mixin ie11 {
@media all and (-ms-high-contrast: none) {
@content;
}
}

56
apps/dafa-web/src/styles/styles.scss
View File

@@ -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;
}
}
gap: var(--digi--layout--gutter--xs);
}
// @af/digi-ng overrides
.digi-ng-typography-icon-text__icon {
display: inline-flex;
}
&--ignore-visited:visited {
color: var(--digi--typography--color--link);
@media print {
* {
color: $af__color-text-dark !important;
}
.dafa {
&__hide-on-print {
display: none !important;
&:hover {
color: var(--digi--typography--color--link--active);
}
}
}
}

3
apps/dafa-web/src/styles/variables/_border-radius.scss
View File

@@ -1,3 +0,0 @@
@import '~@af/sass/v2/ui/variables/ui__borders';
$af__border-radius: $ui__border-radius--rounded;

5
apps/dafa-web/src/styles/variables/_box-shadow.scss
View File

@@ -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;

14
apps/dafa-web/src/styles/variables/_breakpoints.scss
View File

@@ -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';

71
apps/dafa-web/src/styles/variables/_colors.scss
View File

@@ -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;

10
apps/dafa-web/src/styles/variables/_containers.scss
View File

@@ -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

9
apps/dafa-web/src/styles/variables/_form.scss
View File

@@ -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

14
apps/dafa-web/src/styles/variables/_gutters.scss
View File

@@ -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

4
apps/dafa-web/src/styles/variables/_shadows.scss
View File

@@ -1,4 +0,0 @@
@import '~@af/sass/v2/ui/variables/ui__shadows';
// AF variables
$af__shadow-base: $ui__shadow--shadow-base-outline;

28
apps/dafa-web/src/styles/variables/_typography.scss
View File

@@ -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;

12
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",