cloud-ui.vusion
Version:
Vusion Cloud UI
91 lines (90 loc) • 1.72 kB
CSS
.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;
}