Files
portfolio-admin/src/app/shared/confirm-dialog/confirm-dialog.scss
T

87 lines
1.6 KiB
SCSS

.confirm-dialog {
padding: 24px;
background: var(--eerie-black-2, #1e1e1e);
border: 1px solid var(--jet, #383838);
border-radius: 14px;
color: var(--white-1, #fff);
min-width: 320px;
max-width: 420px;
}
.confirm-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
h3 {
margin: 0;
font-size: 1.15rem;
color: var(--white-1, #fff);
}
}
.warn-icon {
color: #ff6b6b;
font-size: 1.2rem;
}
.confirm-message {
margin: 0 0 20px;
font-size: 0.92rem;
line-height: 1.5;
color: var(--white-2, #ddd);
}
.confirm-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.btn {
padding: 8px 18px;
border: none;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
&:active {
transform: scale(0.97);
}
}
.btn-cancel {
background: rgba(255, 255, 255, 0.06);
color: var(--light-gray-70, #aaa);
border: 1px solid rgba(255, 255, 255, 0.1);
&:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--white-1, #fff);
}
}
.btn-warn {
background: rgba(255, 70, 70, 0.15);
color: #ff6b6b;
border: 1px solid rgba(255, 70, 70, 0.25);
&:hover {
background: rgba(255, 70, 70, 0.25);
color: #ff4444;
}
}
.btn-primary {
background: rgba(227, 179, 65, 0.15);
color: var(--orange-yellow-crayola, #e3b341);
border: 1px solid rgba(227, 179, 65, 0.25);
&:hover {
background: rgba(227, 179, 65, 0.25);
}
}