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 {
width: 40rem;
background: #fff;
border-radius: 2rem;
padding: 2.4rem;
min-width: 36rem;
box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, 0.2);
.alert-header {
display: flex;
justify-content: flex-end;
.close-btn {
background: none;
border: none;
font-size: 2.4rem;
line-height: 1;
cursor: pointer;
color: #333;
}
}
.alert-content {
.primary-box {
background-color: #f3f6fb;
padding: 3rem;
border-radius: 1.2rem;
margin-bottom: 1.6rem;
.alert-message {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-weight: bold;
font-size: 1.6rem;
.icon {
font-size: 2.2rem;
}
}
}
.sub-message {
color: #d70000;
font-size: 1.4rem;
display: flex;
align-items: center;
.sub-icon {
margin-right: .6rem;
font-size: 1.6rem;
}
}
}
.alert-footer {
margin-top: 2.4rem;
display: flex;
justify-content: flex-end;
gap: 10px;
.confirm-btn {
padding: .8rem 2rem;
font-weight: bold;
border-radius: 3rem;
border: none;
cursor: pointer;
font-size: 1.4rem;
&.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: 2.4rem;
height: 2.4rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}