I've been exploring different approaches to create a customized angular material dialog with a unique header using CSS/SCSS and the TailwindCSS framework. I am aiming for a specific visual effect, similar to what is shown in the figure below.
desired-effect
However, despite numerous attempts, I have only managed to achieve the following result:
current-effect
My main challenge lies in filling the white area beneath the header and applying a yellow background color to the material icon. Below is a snippet of my HTML/CSS code:
CODE:
<div class="w-full bg-gray-50 dark:bg-gray-900">
<div class="edit-dialog-header">
<div class="edit-dialog-header-title pl-5 pr-10 pt-4 uppercase w-max" fxLayout="row" fxLayoutAlign="start">
<div class="font-bold">Dialog title</div>
<span class="edit-dialog-button-exit">
<button class="p-1" [mat-dialog-close]
matTooltip="Close"
mat-icon-button>
<mat-icon>close</mat-icon>
</button>
</span>
</div>
<div class="edit-dialog-header-subtitle pl-5 pr-5 uppercase">Dialog subtitle</div>
<div class="grid justify-items-center edit-dialog-header-footer">
<mat-icon class="material-icons-round badge w-10 h-10">link</mat-icon>
</div>
</div>
<div> Some Content ... </div>
</div>
.mat-dialog-container {
padding: 0px;
position: relative;
}
.mat-dialog-content {
margin: 20px;
}
.edit-dialog-header {
background-color: #929aa0;
.edit-dialog-header-footer {
background: #ffffff;
background: linear-gradient(0deg, #ffffff 50%, rgba(146, 154, 160, 1) 50%);
mat-icon {
font-size: 20px;
}
}
.edit-dialog-header-title, .edit-dialog-header-subtitle {
color: #fbfbfd;
}
.edit-dialog-header-title {
font-size: x-large;
}
.edit-dialog-header-subtitle {
font-size: medium;
font-weight: normal;
}
.edit-dialog-button-exit {
button {
position: absolute;
top: 0;
right: 0;
border: none;
background-color: #929aa0;
mat-icon {
color: #fbfbfd;
}
}
}
}
.badge {
font-weight: bold;
color: #fbfbfd;
background: #929aa0;
border-radius: 50%;
padding: 5px;
line-height: 50px;
vertical-align: middle;
text-align: center;
}
Is there anyone out there who has some insights on how I can address the issue of the white space below the header? Your input would be greatly appreciated. Thank you!