cloud-ui.vusion
Version:
Vusion Cloud UI
186 lines (159 loc) • 3.14 kB
CSS
.root {
display: inline-block;
}
.reference {
/* position: relative; */
}
.body {
display: block;
visibility: visible;
position: absolute;
line-height: 1.5;
background-color: white;
z-index: 1065;
/* min-width: 130px; */
}
.arrow,
.arrow::after {
display: block;
width: 0;
height: 0;
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.body[x-placement^="top"] {
padding: 5px 0 8px;
}
.body[x-placement^="right"] {
padding: 0 5px 0 8px;
}
.body[x-placement^="bottom"] {
padding: 8px 0 5px;
}
.body[x-placement^="left"] {
padding: 0 8px 0 5px;
}
.body[x-placement^="top"] .arrow {
bottom: 3px;
border-width: 6px 6px 0;
/* border-top-color:hsla(0, 0%, 85%, .5); */
&::after {
content: '';
bottom: 1px;
margin-left: -6px;
border-bottom-width: 0;
border-top-color: white;
}
}
.body[x-placement="top"] .arrow {
left: 50%;
margin-left: -6px;
}
.body[x-placement="top-start"] .arrow {
left: 16px;
}
.body[x-placement="top-end"] .arrow {
right: 16px;
}
.body[x-placement^="right"] .arrow {
left: 3px;
border-width: 6px 6px 6px 0;
/* border-right-color:hsla(0, 0%, 85%, .5); */
&::after {
content: '';
left: 1px;
bottom: -6px;
border-left-width: 0;
border-right-color: white;
}
}
.body[x-placement="right"] .arrow {
top: 50%;
margin-top: -6px;
}
.body[x-placement="right-start"] .arrow {
top: 8px;
}
.body[x-placement="right-end"] .arrow {
bottom: 8px;
}
.body[x-placement^="left"] .arrow {
right: 3px;
border-width: 6px 0 6px 6px;
/* border-left-color:hsla(0, 0%, 85%, .5); */
&::after {
content: '';
right: 1px;
bottom: -6px;
border-right-width: 0;
border-left-color: white;
}
}
.body[x-placement="left"] .arrow {
top: 50%;
margin-top: -6px;
}
.body[x-placement="left-start"] .arrow {
top: 8px;
}
.body[x-placement="left-end"] .arrow {
bottom: 8px;
}
.body[x-placement^="bottom"] .arrow {
top: 3px;
border-width: 0 6px 6px;
/* border-bottom-color:hsla(0, 0%, 85%, .5); */
&::after {
content: '';
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: white;
}
}
.body[x-placement="bottom"] .arrow {
left: 50%;
margin-left: -6px;
}
.body[x-placement="bottom-start"] .arrow {
left: 16px;
}
.body[x-placement="bottom-end"] .arrow {
right: 16px;
}
.wrap {
width: 100%;
border-radius: 2px;
white-space: nowrap;
box-sizing: border-box;
box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.title {
padding: 8px 16px;
position: relative;
}
.title::after {
content: '';
display: block;
position: absolute;
left: 8px;
right: 8px;
bottom: 0;
background: #e9eaec;
height: 1px;
}
.content {
padding: 8px 16px;
}
.message {
padding: 8px 16px;
}
.linkGroup {
text-align: right;
padding: 8px 16px;
}
.linkitem {
margin-right: 10px;
}