UNPKG

cloud-ui.vusion

Version:
186 lines (159 loc) 3.14 kB
.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; }