Блог

Я всеми способами пытаюсь создать пользовательский диалог углового материала с пользовательским заголовком, используя некоторые css/scss и фреймворк tailwindcss. Желаемый эффект будет таким, как показано на рисунке ниже.

желаемый эффект

После многих попыток я застрял на следующем результате:

влияние тока

У меня возникли проблемы с заполнением белой части под заголовком и значком материала желтым цветом фона. Ниже приведен мой html/css код:

код:

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

У кого-нибудь есть какие-либо идеи о том, как я могу заполнить это пустое место под заголовком ??
Спасибо всем вам