From 52a67ca6d39de0c00029c2293912ed073c8e1982 Mon Sep 17 00:00:00 2001 From: Apostolos GALANOPOULOS Date: Mon, 4 Dec 2023 13:26:34 +0200 Subject: [PATCH] DEV: fixes for sonarqube errors and responsive design --- .stylelintrc.json | 3 +- .../wallet-layout-header.component.scss | 51 ++++---- .../wallet-layout.component.scss | 43 ++++--- .../home/components/home/home.component.html | 2 +- .../home/components/home/home.component.scss | 1 + .../home/components/home/home.component.ts | 5 +- .../components/home/home.component.scss | 7 +- .../components/home/home.component.ts | 49 +++++--- .../presentation-request.component.scss | 10 +- .../create-a-scenario.component.scss | 114 ++++++++++-------- .../components/home/home.component.html | 2 +- .../components/home/home.component.ts | 2 +- .../presentations-results.component.scss | 25 ++-- .../components/qr-code/qr-code.component.scss | 92 +++++++------- .../body-actions/body-actions.component.scss | 16 +-- .../elements/button/button.component.scss | 8 +- .../elements/editor/editor.component.scss | 30 ++--- .../radio-group/radio-group.component.scss | 30 ++--- src/custom-theme.scss | 39 +++--- src/layout-breakpoint.scss | 13 +- src/reset.scss | 8 +- src/styles.scss | 28 +++-- src/template.scss | 93 +++++++------- 23 files changed, 368 insertions(+), 303 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index d9b23d4..b64a131 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -41,7 +41,8 @@ "mixin", "return", "warn", - "while" + "while", + "use" ] } ] diff --git a/src/app/core/layout/wallet-layout/wallet-layout-header/wallet-layout-header.component.scss b/src/app/core/layout/wallet-layout/wallet-layout-header/wallet-layout-header.component.scss index 7d73887..8cf4936 100644 --- a/src/app/core/layout/wallet-layout/wallet-layout-header/wallet-layout-header.component.scss +++ b/src/app/core/layout/wallet-layout/wallet-layout-header/wallet-layout-header.component.scss @@ -1,34 +1,35 @@ @use '/src/template' as temp; @use '/src/layout-breakpoint' as points; + :host { - width: inherit; - height: 5rem; - border-bottom: 1px; - border-color: map-get(map-get(map-get(temp.$palette, general), divider), dark); - border-style: solid; - border-top: none; - display: flex; - align-items: center; - img { - left: temp.$left; - position: relative; - padding: temp.$spaceBasic; - cursor: pointer; - } + align-items: center; + border-bottom: 1px; + border-color: map-get(map-get(map-get(temp.$palette, general), divider), dark); + border-style: solid; + border-top: none; + display: flex; + height: 5rem; + width: inherit; - @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ img { - left: 3%; + cursor: pointer; + left: temp.$left; + padding: temp.$spaceBasic; + position: relative; } - } - @media (max-width: map-get(points.$breakpoints, sm)) { - img { - left: 3%; + @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ + img { + left: 3%; + } } - } - @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){ - img { - left: 15%; + @media (max-width: map-get(points.$breakpoints, sm)) { + img { + left: 3%; + } + } + @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){ + img { + left: 15%; + } } - } } diff --git a/src/app/core/layout/wallet-layout/wallet-layout.component.scss b/src/app/core/layout/wallet-layout/wallet-layout.component.scss index 6077b1d..8d1bf02 100644 --- a/src/app/core/layout/wallet-layout/wallet-layout.component.scss +++ b/src/app/core/layout/wallet-layout/wallet-layout.component.scss @@ -1,29 +1,32 @@ @use '/src/template' as temp; @use '/src/layout-breakpoint' as points; + :host { - width: 100vw; - height: 100vh; - display: flex; - flex-direction: column; - .body { - left: temp.$left; - position: relative; - width: fit-content; - } + display: flex; + flex-direction: column; + height: 100vh; + width: 100vw; - @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ .body { - left: 3%; + left: temp.$left; + position: relative; + width: fit-content; } - } - @media (max-width: map-get(points.$breakpoints, sm)) { - .body { - left: 3%; + @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ + .body { + left: 3%; + width: 92%; + } } - } - @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){ - .body { - left: 15%; + @media (max-width: map-get(points.$breakpoints, sm)) { + .body { + left: 3%; + width: 92%; + } + } + @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){ + .body { + left: 15%; + } } - } } diff --git a/src/app/features/home/components/home/home.component.html b/src/app/features/home/components/home/home.component.html index 61b85b8..2fca9ad 100644 --- a/src/app/features/home/components/home/home.component.html +++ b/src/app/features/home/components/home/home.component.html @@ -1,5 +1,5 @@ -
+
Choose an authentication method
diff --git a/src/app/features/home/components/home/home.component.scss b/src/app/features/home/components/home/home.component.scss index 015b4fd..0061172 100644 --- a/src/app/features/home/components/home/home.component.scss +++ b/src/app/features/home/components/home/home.component.scss @@ -1,4 +1,5 @@ @use '/src/template' as temp; + :host { .container { max-width: temp.$max-body-panel; diff --git a/src/app/features/home/components/home/home.component.ts b/src/app/features/home/components/home/home.component.ts index 20ec85b..dc2588b 100644 --- a/src/app/features/home/components/home/home.component.ts +++ b/src/app/features/home/components/home/home.component.ts @@ -47,7 +47,10 @@ export class HomeComponent implements OnInit { } else if (choose === 'OID4VP_CBOR_Selectable') { this.navPath = 'cbor-selectable/create'; } - this.actions.map((item) => item.disabled = false); + this.actions = [...this.actions].map((item) => { + item.disabled = false; + return item; + }); } submit () { if (this.navPath === '/presentation') { diff --git a/src/app/features/presentation-definition/components/home/home.component.scss b/src/app/features/presentation-definition/components/home/home.component.scss index b6a423b..8c618e9 100644 --- a/src/app/features/presentation-definition/components/home/home.component.scss +++ b/src/app/features/presentation-definition/components/home/home.component.scss @@ -1,8 +1,9 @@ @use '/src/template' as temp; + :host { .wrapper { - background-color: map-get(map-get(map-get(temp.$palette, general), bg), default); - padding: temp.$spaceBasic; - border-radius: 16px; + background-color: map-get(map-get(map-get(temp.$palette, general), bg), default); + border-radius: 16px; + padding: temp.$spaceBasic; } } diff --git a/src/app/features/presentation-definition/components/home/home.component.ts b/src/app/features/presentation-definition/components/home/home.component.ts index 02000eb..1ae59c6 100644 --- a/src/app/features/presentation-definition/components/home/home.component.ts +++ b/src/app/features/presentation-definition/components/home/home.component.ts @@ -1,11 +1,11 @@ -import { ChangeDetectionStrategy, Component, ChangeDetectorRef, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; +import { ChangeDetectionStrategy, Component, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +import { takeUntil, filter } from 'rxjs/operators'; import { PresentationDefinitionResponse } from '@core/models/presentation-definition-response'; import { DataService } from '@app/core/services/data.service'; import { NavigateService } from '@app/core/services/navigate.service'; import { PresentationDefinitionService } from '@app/core/services/presentation-definition.service'; import { NavigationEnd, Router } from '@angular/router'; -import { filter } from 'rxjs/operators'; import { BodyAction } from '@app/shared/elements/body-actions/models/BodyAction'; import { PRESENTATION_ACTIONS } from '@app/core/utils/pages-actions'; import { ActionCode } from '@app/shared/elements/body-actions/models/ActionCode'; @@ -16,9 +16,9 @@ import { ActionCode } from '@app/shared/elements/body-actions/models/ActionCode' styleUrls: ['./home.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class HomeComponent implements OnInit { - +export class HomeComponent implements OnInit, OnDestroy { + destroy$ = new Subject(); actions: BodyAction[] = PRESENTATION_ACTIONS; requestCode = ''; presentationDefinition$!: Observable; @@ -29,27 +29,28 @@ export class HomeComponent implements OnInit { private readonly navigateService: NavigateService, private readonly presentationDefinitionService: PresentationDefinitionService ) {} + ngOnDestroy (): void { + this.destroy$.next(''); + this.destroy$.complete(); + } ngOnInit (): void { + this.dataService.presentationDefinitionRequest$.subscribe((code) => { + this.requestCode = code; + this.disableNextButton(code); + }); this.router.events .pipe( - filter(event => event instanceof NavigationEnd ) + takeUntil(this.destroy$), + filter((event): event is NavigationEnd => event instanceof NavigationEnd) ) - .subscribe(() => { - if (this.router.url.indexOf('create') > 0) { + .subscribe((event) => { + if (event.url.includes('presentation/create')) { + this.actions = PRESENTATION_ACTIONS; + this.requestCode = ''; + this.disableNextButton(this.requestCode); this.changeDetectorRef.detectChanges(); } }); - this.dataService.presentationDefinitionRequest$.subscribe((code) => { - this.requestCode = code; - this.actions.map((item: BodyAction) => { - if (code && item.code == ActionCode.NEXT) { - item.disabled = false; - } else if(item.code == ActionCode.NEXT) { - item.disabled = true; - } - return item; - }); - }); } runActions (data: BodyAction) { @@ -74,6 +75,16 @@ export class HomeComponent implements OnInit { } } + private disableNextButton (code: string) { + [...this.actions].map((item: BodyAction) => { + if (code && item.code == ActionCode.NEXT) { + item.disabled = false; + } else if(item.code == ActionCode.NEXT) { + item.disabled = true; + } + return item; + }); + } private hideNextStep () { this.actions = this.actions.filter((item: BodyAction) => item.code !== ActionCode.NEXT); } diff --git a/src/app/features/presentation-definition/components/presentation-request/presentation-request.component.scss b/src/app/features/presentation-definition/components/presentation-request/presentation-request.component.scss index 1eee162..8743a54 100644 --- a/src/app/features/presentation-definition/components/presentation-request/presentation-request.component.scss +++ b/src/app/features/presentation-definition/components/presentation-request/presentation-request.component.scss @@ -1,13 +1,15 @@ @use '/src/template' as temp; + :host { vc-editor { - max-width: temp.$max-body-width; max-height: temp.$max-body-height; + max-width: temp.$max-body-width; min-height: temp.$min-body-height;; min-width: temp.$min-body-height;; } + .vc-box-display-error p { - color: map-get(map-get(temp.$palette, color), error); - font-style: italic; - } + color: map-get(map-get(temp.$palette, color), error); + font-style: italic; + } } diff --git a/src/app/features/siop-custom/components/create-a-scenario/create-a-scenario.component.scss b/src/app/features/siop-custom/components/create-a-scenario/create-a-scenario.component.scss index ec6db47..7738f9c 100644 --- a/src/app/features/siop-custom/components/create-a-scenario/create-a-scenario.component.scss +++ b/src/app/features/siop-custom/components/create-a-scenario/create-a-scenario.component.scss @@ -1,65 +1,73 @@ @use '/src/template' as temp; @use '/src//layout-breakpoint' as points; + :host { - max-width: 40rem; - ::ng-deep { - .mat-expansion-panel { - padding: 0 !important; - } + max-width: 40rem; + + ::ng-deep { + .mat-expansion-panel { + padding: 0 !important; + } - } - .mb { - margin-bottom: temp.$spaceBasic; - } - .creation { - display: flex; - flex-direction: column; - height: temp.$body-height; - overflow-y: auto; - .creation-header { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: baseline; - position: sticky; - top: 0; - z-index: 50; - background: temp.$backgroundDefault; - h3 { - letter-spacing: 0px; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 20px; - color: temp.$textDarkSecondary; - } - span { - color: temp.$textDarkSecondary; - padding-right: temp.$spaceBasic; - } - } - .controls { - display: flex; - flex-direction: row; } - .presentation-definition { - margin-top: 1rem; + + .mb { + margin-bottom: temp.$spaceBasic; } - } - @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ .creation { - width: temp.$body-width-xs; - height: 24.25rem; + display: flex; + flex-direction: column; + height: temp.$body-height; + overflow-y: auto; + + .creation-header { + align-items: baseline; + background: temp.$backgroundDefault; + display: flex; + flex-direction: row; + justify-content: space-between; + position: sticky; + top: 0; + z-index: 50; + + h3 { + color: temp.$textDarkSecondary; + font-size: 16px; + -webkit-font-smoothing: antialiased; + letter-spacing: 0; + line-height: 20px; + overflow-wrap: break-word; + text-decoration: none; + word-break: break-word; + } + + span { + color: temp.$textDarkSecondary; + padding-right: temp.$spaceBasic; + } + } + + .controls { + display: flex; + flex-direction: row; + } + + .presentation-definition { + margin-top: 1rem; + } } - } - @media (max-width: map-get(points.$breakpoints, sm)) { - .creation { - width: temp.$body-width-sm; - height: 24.25rem; + @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ + .creation { + height: 24.25rem; + width: temp.$body-width-xs; + } + } + @media (max-width: map-get(points.$breakpoints, sm)) { + .creation { + height: 24.25rem; + width: temp.$body-width-sm; + } } - } } diff --git a/src/app/features/siop-custom/components/home/home.component.html b/src/app/features/siop-custom/components/home/home.component.html index 83ccdfa..7d452d8 100644 --- a/src/app/features/siop-custom/components/home/home.component.html +++ b/src/app/features/siop-custom/components/home/home.component.html @@ -1,5 +1,5 @@ -
+
OID4VP + CBOR selectable
diff --git a/src/app/features/siop-custom/components/home/home.component.ts b/src/app/features/siop-custom/components/home/home.component.ts index f51292d..501e596 100644 --- a/src/app/features/siop-custom/components/home/home.component.ts +++ b/src/app/features/siop-custom/components/home/home.component.ts @@ -28,7 +28,7 @@ export class HomeComponent implements OnInit { .subscribe((event) => { this.isCreatePage = event.url.includes('verifiable') ? false : true; if (this.isCreatePage) { - this.actions =CBOR_ACTIONS; + this.actions = CBOR_ACTIONS; } }); } diff --git a/src/app/features/verifiable-credential/components/presentations-results/presentations-results.component.scss b/src/app/features/verifiable-credential/components/presentations-results/presentations-results.component.scss index cf7c92f..f9bf2a0 100644 --- a/src/app/features/verifiable-credential/components/presentations-results/presentations-results.component.scss +++ b/src/app/features/verifiable-credential/components/presentations-results/presentations-results.component.scss @@ -1,15 +1,18 @@ @use '/src/template' as temp; + :host { - .show-result { - display: flex; - flex-direction: row; - width: 100%; - h6 { - margin: 4px 2px; - color: temp.$textDarkSecondary; + .show-result { + display: flex; + flex-direction: row; + width: 100%; + + h6 { + color: temp.$textDarkSecondary; + margin: 4px 2px; + } + + .id-token { + margin-right: 1rem; + } } - .id-token { - margin-right: 1rem; - } - } } diff --git a/src/app/features/verifiable-credential/components/qr-code/qr-code.component.scss b/src/app/features/verifiable-credential/components/qr-code/qr-code.component.scss index c4a3ec9..9580480 100644 --- a/src/app/features/verifiable-credential/components/qr-code/qr-code.component.scss +++ b/src/app/features/verifiable-credential/components/qr-code/qr-code.component.scss @@ -1,64 +1,70 @@ @use '/src/template' as temp; @use '/src/layout-breakpoint' as points; + :host { .vc-verifiable-credential { - align-items: center; - display: flex; - flex-direction: column; - min-width: temp.$min-body-width; + align-items: center; + display: flex; + flex-direction: column; + min-width: temp.$min-body-width; .body { - align-items: center; - display: flex; - flex-direction: row; - justify-content: center; - width: 100%; + align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + .qr-code { - -webkit-box-pack: center; - display: flex; - justify-content: center; - padding: temp.$spaceBasic; - max-height: -moz-fit-content; - height: fit-content; - max-height: temp.$body-height; - overflow-y: auto; - width: 100%; + -webkit-box-pack: center; + display: flex; + height: fit-content; + justify-content: center; + max-height: temp.$body-height; + overflow-y: auto; + padding: temp.$spaceBasic; + width: 100%; } + .qr-info { - display: flex; - flex-direction: column; - justify-content: baseline; - p { - color: temp.$textDarkSecondary; - } - span { - cursor: pointer; - color: temp.$textDarkPrimary; - } + display: flex; + flex-direction: column; + justify-content: baseline; + + p { + color: temp.$textDarkSecondary; + } + + span { + color: temp.$textDarkPrimary; + cursor: pointer; + } } } } @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ - .vc-verifiable-credential { - width: temp.$body-width-xs; - min-width: temp.$body-width-xs; - .body { - flex-direction: column; + .vc-verifiable-credential { + min-width: temp.$body-width-xs; + width: temp.$body-width-xs; + + .body { + flex-direction: column; + } } - } } @media (max-width: map-get(points.$breakpoints, sm)) { - .vc-verifiable-credential { - width: temp.$body-width-sm; - min-width: temp.$body-width-sm; - .body { - flex-direction: column; + .vc-verifiable-credential { + min-width: temp.$body-width-sm; + width: temp.$body-width-sm; + + .body { + flex-direction: column; + } } - } } @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){ - .vc-verifiable-credential { - width: temp.$body-width-md; - } + .vc-verifiable-credential { + width: temp.$body-width-md; + } } } diff --git a/src/app/shared/elements/body-actions/body-actions.component.scss b/src/app/shared/elements/body-actions/body-actions.component.scss index 37d013c..3073338 100644 --- a/src/app/shared/elements/body-actions/body-actions.component.scss +++ b/src/app/shared/elements/body-actions/body-actions.component.scss @@ -1,11 +1,13 @@ @use '/src/template' as temp; + :host { - .container { - display: flex; - justify-content: flex-end; - margin-top: map-get(temp.$space, top); - .vc-button { - margin-left: map-get(temp.$space, left); + .container { + display: flex; + justify-content: flex-end; + margin-top: map-get(temp.$space, top); + + .vc-button { + margin-left: map-get(temp.$space, left); + } } - } } diff --git a/src/app/shared/elements/button/button.component.scss b/src/app/shared/elements/button/button.component.scss index f651ffe..d65e6ca 100644 --- a/src/app/shared/elements/button/button.component.scss +++ b/src/app/shared/elements/button/button.component.scss @@ -1,4 +1,5 @@ @use '/src/template' as temp; + :host { button { &:disabled { @@ -10,13 +11,12 @@ border: 0; border-radius: 16px; - color: hsl(0, 0%, 99%); + color: hsl(0deg 0% 99%); cursor: pointer; font-size: 16px; height: 48px; padding: 1rem; transition: background 225ms ease-in-out 0s; - -webkit-user-select: none; user-select: none; width: fit-content; @@ -26,11 +26,11 @@ &.secondary { background: temp.$backgroundPaper; - color: rgb(0 0 0); border: 1px; + border-color: temp.$dividerDark; border-radius: 1em; border-style: solid; - border-color: temp.$dividerDark; + color: rgb(0 0 0); } } diff --git a/src/app/shared/elements/editor/editor.component.scss b/src/app/shared/elements/editor/editor.component.scss index 4a12bcf..9f9ae64 100644 --- a/src/app/shared/elements/editor/editor.component.scss +++ b/src/app/shared/elements/editor/editor.component.scss @@ -1,5 +1,6 @@ @use '/src/template' as temp; @use '/src/layout-breakpoint' as points; + :host { .vc-container-editor { background-color: temp.$backgroundPaper; @@ -8,8 +9,7 @@ max-width: inherit; min-height: inherit; min-width: inherit; - overflow-y: auto; - overflow-x: auto; + overflow: auto auto; padding: 16px; position: relative; width: temp.$body-width; @@ -20,21 +20,21 @@ width: 100%; } } - @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ - .vc-container-editor { - width: temp.$body-width-xs; - min-width: temp.$body-width-xs - } + @media (max-width: map-get(points.$breakpoints, xs)) { + .vc-container-editor { + min-width: 90%; + width: 90%; + } } - @media (max-width: map-get(points.$breakpoints, sm)) { - .vc-container-editor { - width: temp.$body-width-sm; - min-width: temp.$body-width-sm; - } + @media (max-width: map-get(points.$breakpoints, sm)) and (min-width: map-get(points.$breakpoints, xs1)) { + .vc-container-editor { + min-width: temp.$body-width-sm; + width: temp.$body-width-sm; + } } @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){ - .vc-container-editor { - width: temp.$body-width-md; - } + .vc-container-editor { + width: temp.$body-width-md; + } } } diff --git a/src/app/shared/elements/radio-group/radio-group.component.scss b/src/app/shared/elements/radio-group/radio-group.component.scss index 06e8a1e..88538a2 100644 --- a/src/app/shared/elements/radio-group/radio-group.component.scss +++ b/src/app/shared/elements/radio-group/radio-group.component.scss @@ -1,11 +1,12 @@ @use '/src/template' as temp; @use '/src/layout-breakpoint' as points; + :host { .container { display: flex; flex-direction: column; - position: relative; min-width: temp.$min-body-width; + position: relative; .radio-group { align-items: flex-start; @@ -13,25 +14,26 @@ flex-direction: column; margin: 15px 0; } + .radio-button { margin: 5px; } } - @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ - .container { - width: temp.$body-width-xs; - min-width: temp.$body-width-xs; - } + @media (max-width: map-get(points.$breakpoints, xs)) { + .container { + min-width: temp.$body-width-xs; + width: temp.$body-width-xs; + } } - @media (max-width: map-get(points.$breakpoints, sm)) { - .container { - width: temp.$body-width-sm; - min-width: temp.$body-width-sm; - } + @media (max-width: map-get(points.$breakpoints, sm)) and (min-width: map-get(points.$breakpoints, xs1)) { + .container { + min-width: temp.$body-width-sm; + width: temp.$body-width-sm; + } } @media (max-width: map-get(points.$breakpoints, md)) and (min-width: map-get(points.$breakpoints, sm)){ - .container { - width: temp.$body-width-md; - } + .container { + width: temp.$body-width-md; + } } } diff --git a/src/custom-theme.scss b/src/custom-theme.scss index 9912727..2f8e900 100644 --- a/src/custom-theme.scss +++ b/src/custom-theme.scss @@ -2,12 +2,13 @@ // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming @use '@angular/material' as mat; + // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! -@include mat.core(); +@include mat.core; // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker @@ -21,11 +22,11 @@ $verifier-ui-warn: mat.define-palette(mat.$red-palette); // Create the theme object. A theme consists of configurations for individual // theming systems such as "color" or "typography". $verifier-ui-theme: mat.define-light-theme(( - color: ( - primary: $verifier-ui-primary, - accent: $verifier-ui-accent, - warn: $verifier-ui-warn, - ) + color: ( + primary: $verifier-ui-primary, + accent: $verifier-ui-accent, + warn: $verifier-ui-warn, + ) )); // Include theme styles for core and each component used in your app. @@ -34,18 +35,18 @@ $verifier-ui-theme: mat.define-light-theme(( @include mat.all-component-themes($verifier-ui-theme); .mat-mdc-radio-button.mat-primary { - --mdc-radio-disabled-selected-icon-color: #000; - --mdc-radio-disabled-unselected-icon-color: #000; - --mdc-radio-unselected-focus-icon-color: #212121; - --mdc-radio-unselected-hover-icon-color: #212121; - --mdc-radio-unselected-icon-color: rgba(0, 0, 0, 0.54); - --mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.54); - --mdc-radio-selected-focus-icon-color: #2A5ED9; - --mdc-radio-selected-hover-icon-color: #2A5ED9; - --mdc-radio-selected-icon-color: #2A5ED9; - --mdc-radio-selected-pressed-icon-color: #2A5ED9; - --mat-mdc-radio-ripple-color: #000; - --mat-mdc-radio-checked-ripple-color: #2A5ED9; + --mdc-radio-disabled-selected-icon-color: #000; + --mdc-radio-disabled-unselected-icon-color: #000; + --mdc-radio-unselected-focus-icon-color: #212121; + --mdc-radio-unselected-hover-icon-color: #212121; + --mdc-radio-unselected-icon-color: rgb(0 0 0 / 54%); + --mdc-radio-unselected-pressed-icon-color: rgb(0 0 0 / 54%); + --mdc-radio-selected-focus-icon-color: #2A5ED9; + --mdc-radio-selected-hover-icon-color: #2A5ED9; + --mdc-radio-selected-icon-color: #2A5ED9; + --mdc-radio-selected-pressed-icon-color: #2A5ED9; + --mat-mdc-radio-ripple-color: #000; + --mat-mdc-radio-checked-ripple-color: #2A5ED9; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +body { font-family: Roboto, "Helvetica Neue", sans-serif; margin: 0; } diff --git a/src/layout-breakpoint.scss b/src/layout-breakpoint.scss index 0706ac3..1451167 100644 --- a/src/layout-breakpoint.scss +++ b/src/layout-breakpoint.scss @@ -1,8 +1,9 @@ $breakpoints: ( - xs: 425, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px + xs: 360px, + xs1: 361px, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px ); diff --git a/src/reset.scss b/src/reset.scss index 75219c8..424f12c 100644 --- a/src/reset.scss +++ b/src/reset.scss @@ -1,11 +1,13 @@ @use '/src/template' as temp; + .ͼe { - // color: #9af3b1 !important; + // color: #9af3b1 !important; } + .mdc-list-item__primary-text { - color: temp.$textDarkSecondary !important; + color: temp.$textDarkSecondary !important; } .mdc-list-item__secondary-text { - color: temp.$textDarkPrimary !important; + color: temp.$textDarkPrimary !important; } diff --git a/src/styles.scss b/src/styles.scss index 6023e68..fd504b8 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,11 +1,15 @@ /* You can add global styles to this file, and also import other style files */ @use 'template' as temp; +@use '/src/layout-breakpoint' as points; + html { - height: 100vh; - width: 100vw; + height: 100vh; + width: 100vw; } + body { background: map-get(map-get(map-get(temp.$palette, general), bg), paper); + // color: rgb(255 255 255); height: inherit; overflow-x: hidden; @@ -15,14 +19,24 @@ body { main { height: 100vh; margin: 0; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; padding: 0; width: 100vw; } .bg-panel { - background-color: temp.$backgroundDefault; - padding: 1.5rem; - border-radius: 16px; + background-color: temp.$backgroundDefault; + border-radius: 16px; + padding: 1.5rem; } + +// @media (max-width: map-get(points.$breakpoints, xs)) and (min-width: map-get(points.$breakpoints, sm)){ +// .container-responsive { +// width: temp.$body-width-xs !important; +// } +// } +// @media (max-width: map-get(points.$breakpoints, sm)) { +// .container-responsive { +// width: temp.$body-width-sm !important; +// } +// } diff --git a/src/template.scss b/src/template.scss index e84ded1..b687d9d 100644 --- a/src/template.scss +++ b/src/template.scss @@ -1,82 +1,85 @@ $palette: ( - color: ( - primary:#2A5ED9, - secondary: #D6D9F9, - success: #55953B, - warning: #F39626, - error: #DA2C27, - info: #8145BD - ), - general: ( - bg: ( - default: hsl(0, 0%, 92%), - paper: hsl(0, 0%, 100%) + color: ( + primary:#2A5ED9, + secondary: #D6D9F9, + success: #55953B, + warning: #F39626, + error: #DA2C27, + info: #8145BD ), - text: ( - primary: ( - dark: hsl(0, 0%, 13%) - ), - secondary: ( - dark: hsl(0, 0%, 44%), - light: hsl(0, 0%, 99%), - ), - disabled: ( - dark: hsl(0, 0%, 60%), - light: hsl(0, 0%, 98%), - ) - ), - divider: ( - dark: hsl(0, 0%, 84%), + general: ( + bg: ( + default: hsl(0deg 0% 92%), + paper: hsl(0deg 0% 100%) + ), + text: ( + primary: ( + dark: hsl(0deg 0% 13%) + ), + secondary: ( + dark: hsl(0deg 0% 44%), + light: hsl(0deg 0% 99%), + ), + disabled: ( + dark: hsl(0deg 0% 60%), + light: hsl(0deg 0% 98%), + ) + ), + divider: ( + dark: hsl(0deg 0% 84%), + ) ) - ) ); $spaceBasic: 1.5rem; $space: ( - top: 2rem, - right: 2rem, - left: 2rem, - bottom: 2rem + top: 2rem, + right: 2rem, + left: 2rem, + bottom: 2rem ); - $backgroundDefault: map-get(map-get(map-get($palette, general), bg), default); $backgroundPaper: map-get(map-get(map-get($palette, general), bg), paper); $textDarkSecondary: map-get(map-get(map-get(map-get($palette, general), text), secondary), dark); $textDarkPrimary: map-get(map-get(map-get(map-get($palette, general), text), primary), dark); $dividerDark: map-get(map-get(map-get($palette, general), divider), dark); - $left: 31%; $max-body-panel: 34.375em; $max-body-width: 31.25rem; $max-body-height: 31.25rem; $min-body-width: 21.875rem; $min-body-height: 21.875rem; - $body-height: 34.25rem; $body-width: 35rem; -$body-width-xs: 10rem; +$body-width-xs: 18rem; $body-width-sm: 19rem; $body-width-md: 23rem; h1, h2, h3, h4, h5, h6 { - color: map-get(map-get(map-get(map-get($palette, general), text), primary), dark); - font-weight: 500; - margin: $spaceBasic 0; + color: map-get(map-get(map-get(map-get($palette, general), text), primary), dark); + font-weight: 500; + margin: $spaceBasic 0; } + h1 { - font-size: 6em; + font-size: 6em; } + h2 { - font-size: 3.75em; + font-size: 3.75em; } + h3 { - font-size: 3em; + font-size: 3em; } + h4 { - font-size: 1.875em; + font-size: 1.875em; } + h5 { - font-size: 1.5em; + font-size: 1.5em; } + h6 { - font-size: 1.25em; + font-size: 1.25em; }