|
@@ -218,11 +218,21 @@
|
|
|
transform-origin: 0 3.75em;
|
|
transform-origin: 0 3.75em;
|
|
|
border-radius: 0 7.5em 7.5em 0;
|
|
border-radius: 0 7.5em 7.5em 0;
|
|
|
}
|
|
}
|
|
|
|
|
+ /* Clip ONLY the success tick (do not clip the ring sweep masks) */
|
|
|
|
|
+ .${PREFIX}icon .${PREFIX}success-mark {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 0;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ z-index: 3;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.${PREFIX}icon .${PREFIX}success-line-tip,
|
|
.${PREFIX}icon .${PREFIX}success-line-tip,
|
|
|
.${PREFIX}icon .${PREFIX}success-line-long {
|
|
.${PREFIX}icon .${PREFIX}success-line-long {
|
|
|
display: block;
|
|
display: block;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- z-index: 2;
|
|
|
|
|
|
|
+ z-index: 1; /* inside success-mark; keep above its clipping bg */
|
|
|
height: 0.3125em;
|
|
height: 0.3125em;
|
|
|
border-radius: 0.125em;
|
|
border-radius: 0.125em;
|
|
|
background-color: currentColor;
|
|
background-color: currentColor;
|
|
@@ -286,7 +296,7 @@
|
|
|
}
|
|
}
|
|
|
65% {
|
|
65% {
|
|
|
top: 3.375em;
|
|
top: 3.375em;
|
|
|
- right: 2.875em;x
|
|
|
|
|
|
|
+ right: 2.875em;
|
|
|
width: 0;
|
|
width: 0;
|
|
|
}
|
|
}
|
|
|
84% {
|
|
84% {
|
|
@@ -530,13 +540,14 @@
|
|
|
if (type === 'success') {
|
|
if (type === 'success') {
|
|
|
// SweetAlert2-compatible DOM structure (circle + tick) for exact style parity
|
|
// SweetAlert2-compatible DOM structure (circle + tick) for exact style parity
|
|
|
// <div class="...success-circular-line-left"></div>
|
|
// <div class="...success-circular-line-left"></div>
|
|
|
- // <span class="...success-line-tip"></span>
|
|
|
|
|
- // <span class="...success-line-long"></span>
|
|
|
|
|
|
|
+ // <div class="...success-mark"><span class="...success-line-tip"></span><span class="...success-line-long"></span></div>
|
|
|
// <div class="...success-ring"></div>
|
|
// <div class="...success-ring"></div>
|
|
|
// <div class="...success-fix"></div>
|
|
// <div class="...success-fix"></div>
|
|
|
// <div class="...success-circular-line-right"></div>
|
|
// <div class="...success-circular-line-right"></div>
|
|
|
const left = document.createElement('div');
|
|
const left = document.createElement('div');
|
|
|
left.className = `${PREFIX}success-circular-line-left`;
|
|
left.className = `${PREFIX}success-circular-line-left`;
|
|
|
|
|
+ const mark = document.createElement('div');
|
|
|
|
|
+ mark.className = `${PREFIX}success-mark`;
|
|
|
const tip = document.createElement('span');
|
|
const tip = document.createElement('span');
|
|
|
tip.className = `${PREFIX}success-line-tip`;
|
|
tip.className = `${PREFIX}success-line-tip`;
|
|
|
const long = document.createElement('span');
|
|
const long = document.createElement('span');
|
|
@@ -548,8 +559,9 @@
|
|
|
const right = document.createElement('div');
|
|
const right = document.createElement('div');
|
|
|
right.className = `${PREFIX}success-circular-line-right`;
|
|
right.className = `${PREFIX}success-circular-line-right`;
|
|
|
icon.appendChild(left);
|
|
icon.appendChild(left);
|
|
|
- icon.appendChild(tip);
|
|
|
|
|
- icon.appendChild(long);
|
|
|
|
|
|
|
+ mark.appendChild(tip);
|
|
|
|
|
+ mark.appendChild(long);
|
|
|
|
|
+ icon.appendChild(mark);
|
|
|
icon.appendChild(ring);
|
|
icon.appendChild(ring);
|
|
|
icon.appendChild(fix);
|
|
icon.appendChild(fix);
|
|
|
icon.appendChild(right);
|
|
icon.appendChild(right);
|