-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update landing page to use design system
- Loading branch information
Showing
21 changed files
with
152 additions
and
467 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 0 additions & 16 deletions
16
apps/cde-ui/src/app/components/header/header.component.html
This file was deleted.
Oops, something went wrong.
123 changes: 0 additions & 123 deletions
123
apps/cde-ui/src/app/components/header/header.component.scss
This file was deleted.
Oops, something went wrong.
21 changes: 0 additions & 21 deletions
21
apps/cde-ui/src/app/components/header/header.component.spec.ts
This file was deleted.
Oops, something went wrong.
47 changes: 0 additions & 47 deletions
47
apps/cde-ui/src/app/components/header/header.component.theme.scss
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
6 changes: 3 additions & 3 deletions
6
apps/cde-ui/src/app/components/visual-card/visual-card.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,9 @@ | ||
@for (card of cardData(); track card.label) { | ||
<a [routerLink]="card.route" class="visual-card cta-flat" rel="noopener noreferrer"> | ||
<img [attr.src]="card.image" [alt]="card.alt" /> | ||
<div class="label"> | ||
<button class="label" mat-flat-button hraCallToActionButton hraSecondaryButton> | ||
{{ card.label }} | ||
<mat-icon iconPositionEnd> east </mat-icon> | ||
</div> | ||
<mat-icon class="material-symbols-rounded" iconPositionEnd>arrow_right_alt</mat-icon> | ||
</button> | ||
</a> | ||
} |
78 changes: 24 additions & 54 deletions
78
apps/cde-ui/src/app/components/visual-card/visual-card.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,87 +1,57 @@ | ||
// @use '../../../styles/cta' as cta; | ||
|
||
:host { | ||
display: flex; | ||
flex-wrap: wrap; | ||
gap: 2.5rem; | ||
column-gap: 1.75rem; | ||
justify-content: center; | ||
margin: 0 auto; | ||
width: min-content; | ||
|
||
@media (min-width: 768px) { | ||
margin: 0; | ||
width: auto; | ||
} | ||
|
||
@media (min-width: 1280px) { | ||
justify-content: space-between; | ||
} | ||
|
||
.visual-card { | ||
@media (min-width: 1012px) { | ||
width: 24.5rem; | ||
height: 24.5rem; | ||
} | ||
|
||
@media (min-width: 1920px) { | ||
width: 30.5rem; | ||
height: 30.5rem; | ||
} | ||
|
||
border-radius: 1rem; | ||
overflow: hidden; | ||
box-shadow: 0px 5px 1rem 0px rgba(32, 30, 61, 0.24); | ||
box-shadow: 0px 5px 1rem 0px rgb(from var(--sys-shadow) r g b / 0.24); | ||
outline-offset: 0; | ||
cursor: pointer; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
font-family: Metropolis; | ||
width: 17.5rem; | ||
height: 17.5rem; | ||
|
||
&:hover { | ||
box-shadow: 0px 5px 1rem 5px rgba(32, 30, 61, 0.24); | ||
box-shadow: 0px 5px 1rem 5px rgb(from var(--sys-shadow) r g b / 0.24); | ||
} | ||
|
||
// &:focus-visible .label { | ||
// @include cta.flatFocus(); | ||
// } | ||
|
||
img { | ||
width: 100%; | ||
object-fit: contain; | ||
} | ||
|
||
.label { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
margin: auto auto; | ||
font-size: 0.75rem; | ||
line-height: 1.125rem; | ||
} | ||
|
||
mat-icon { | ||
vertical-align: middle; | ||
height: 1rem; | ||
width: 1rem; | ||
font-size: 1rem; | ||
margin-left: 0.5rem; | ||
} | ||
} | ||
|
||
@media (min-width: 768px) { | ||
justify-content: space-between; | ||
} | ||
|
||
@media (min-width: 1012px) { | ||
.visual-card { | ||
width: 24.5rem; | ||
height: 24.5rem; | ||
|
||
.label { | ||
font-size: 1rem; | ||
line-height: 1.5rem; | ||
} | ||
|
||
mat-icon { | ||
height: 1.5rem; | ||
width: 1.5rem; | ||
font-size: 1.5rem; | ||
margin-left: 0.75rem; | ||
} | ||
} | ||
} | ||
|
||
@media (min-width: 1280px) { | ||
column-gap: 2rem; | ||
} | ||
|
||
@media (min-width: 1920px) { | ||
.visual-card { | ||
width: 30.5rem; | ||
height: 30.5rem; | ||
margin-left: 0.25rem; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.