mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
51 lines
2.1 KiB
HTML
51 lines
2.1 KiB
HTML
|
|
<div class="success">
|
|
<div class="success__icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none"><path fill-rule="evenodd" fill="#393a37" d="m12 1c-6.075 0-11 4.925-11 11s4.925 11 11 11 11-4.925 11-11-4.925-11-11-11zm4.768 9.14c.0878-.1004.1546-.21726.1966-.34383.0419-.12657.0581-.26026.0477-.39319-.0105-.13293-.0475-.26242-.1087-.38085-.0613-.11844-.1456-.22342-.2481-.30879-.1024-.08536-.2209-.14938-.3484-.18828s-.2616-.0519-.3942-.03823c-.1327.01366-.2612.05372-.3782.1178-.1169.06409-.2198.15091-.3027.25537l-4.3 5.159-2.225-2.226c-.1886-.1822-.4412-.283-.7034-.2807s-.51301.1075-.69842.2929-.29058.4362-.29285.6984c-.00228.2622.09851.5148.28067.7034l3 3c.0983.0982.2159.1748.3454.2251.1295.0502.2681.0729.4069.0665.1387-.0063.2747-.0414.3991-.1032.1244-.0617.2347-.1487.3236-.2554z" clip-rule="evenodd"></path></svg>
|
|
</div>
|
|
<div class="success__title">lorem ipsum dolor sit amet</div>
|
|
<div class="success__close"><svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 20 20" height="20"><path fill="#393a37" d="m15.8333 5.34166-1.175-1.175-4.6583 4.65834-4.65833-4.65834-1.175 1.175 4.65833 4.65834-4.65833 4.6583 1.175 1.175 4.65833-4.6583 4.6583 4.6583 1.175-1.175-4.6583-4.6583z"></path></svg></div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by andrew-demchenk0 - Tags: alert, green, success, card, close, alert message, success message */
|
|
.success {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
width: 320px;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: start;
|
|
background: #84D65A;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 0px 5px -3px #111;
|
|
}
|
|
|
|
.success__icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
transform: translateY(-2px);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.success__icon path {
|
|
fill: #393A37;
|
|
}
|
|
|
|
.success__title {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #393A37;
|
|
}
|
|
|
|
.success__close {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.success__close path {
|
|
fill: #393A37;
|
|
}
|
|
</style>
|