File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.alert-wrap {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
.alert-box {
background: #fff;
border-radius: 20px;
padding: 24px;
min-width: 360px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
.alert-header {
display: flex;
justify-content: flex-end;
.close-btn {
background: none;
border: none;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: #333;
}
}
.alert-content {
.primary-box {
background-color: #f3f6fb;
padding: 16px;
border-radius: 12px;
margin-bottom: 16px;
.alert-message {
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
font-size: 16px;
.icon {
font-size: 22px;
}
}
}
.sub-message {
color: #d70000;
font-size: 14px;
display: flex;
align-items: center;
.sub-icon {
margin-right: 6px;
font-size: 16px;
}
}
}
.alert-footer {
margin-top: 24px;
display: flex;
justify-content: flex-end;
gap: 10px;
.confirm-btn {
padding: 8px 20px;
font-weight: bold;
border-radius: 30px;
border: none;
cursor: pointer;
font-size: 14px;
&.black {
background-color: #000;
color: #fff;
&:hover {
background-color: #222;
}
}
&.gray {
background-color: #ddd;
color: #333;
&:hover {
background-color: #ccc;
}
}
}
}
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}