UNPKG

cloud-ui.vusion

Version:
91 lines (90 loc) 1.72 kB
.root { box-sizing: border-box; position: fixed; z-index: 1040; top: 10px; left: 10px; width: 320px; } .root[role="top-center"], .root[role="bottom-center"] { left: 50%; transform: translateX(-50%); } .root[role="bottom-center"], .root[role="bottom-left"], .root[role="bottom-right"] { top: auto; bottom: 10px; } .root[role="top-right"], .root[role="bottom-right"] { left: auto; right: 10px; } .root[role="top-left"], .root[role="bottom-left"] { left: 10px; right: auto; } .root[role="top-left"], .root[role="top-center"], .root[role="top-right"] { top: 10px; bottom: auto; } .root[role="static"] { position: static; width: auto; } .item { margin-bottom: 10px; padding: 15px; background: #444; color: white; border: 1px solid #444; border-radius: 3px; position: relative; } .item[role="info"] { background: #00c0ef; color: white; border: 1px solid #00acd6; } .item[role="success"] { background: #00a65a; color: white; border: 1px solid #008d4c; } .item[role="warning"] { background: #f39c12; color: white; border: 1px solid #e08e0b; } .item[role="error"] { background: #dd4b39; color: white; border: 1px solid #d73925; } .close { position: absolute; color: inherit; opacity: 0.7; top: 15px; right: 10px; } .close::before { icon-font: url("../u-icon.vue/icons/close.svg"); } .message { display: inline-block; padding-right: 15px; } .root[size="auto"] { width: auto; } .root[size="small"] { width: 280px; } .root[size="normal"] { width: 320px; } .root[size="large"] { width: 360px; } .root[size="huge"] { width: 480px; }