@desnoth/vue2-popup/dist/vue2Popup.css

A simple Vue popup component with self state

.popup-root[data-v-1f0b77d6]{position:relative;height:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:inherit;flex-flow:inherit;-webkit-box-pack:inherit;-ms-flex-pack:inherit;justify-content:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;max-width:100%;width:inherit}.popup-root .popup-box[data-v-1f0b77d6]{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background-color:#fff;-webkit-box-shadow:0 0 20px rgba(10,10,10,.2);box-shadow:0 0 20px rgba(10,10,10,.2);height:auto;border-radius:5px;min-height:30px;min-width:50px;width:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;z-index:10011}.popup-root .popup-box.outside[data-v-1f0b77d6]{position:fixed}.popup-root .popup-box .centerContent[data-v-1f0b77d6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;text-align:center}.popup-root .popup-box:not(.noTriangle):not(.outside).center[data-v-1f0b77d6]{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.popup-root .popup-box.right[data-v-1f0b77d6]:not(.outside){right:0}.popup-root .popup-box.top[data-v-1f0b77d6]:not(.outside){top:none;bottom:calc(100% + 15px)}.popup-root .popup-box.bottom[data-v-1f0b77d6]:not(.outside){bottom:none;top:calc(100% + 15px)}.popup-root .popup-box.noTriangle[data-v-1f0b77d6]{top:calc(100% + 2px);width:100%}.popup-root .popup-box div.popup-wrapper[data-v-1f0b77d6]{display:-webkit-box;display:-ms-flexbox;display:flex;max-height:100%;width:100%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;white-space:nowrap;border-radius:5px;overflow-y:hidden;z-index:1000}.popup-root .popup-box.scroll .popup-wrapper[data-v-1f0b77d6]{overflow-y:scroll}.popup-root .popup-box div.header[data-v-1f0b77d6]{-ms-flex-flow:column wrap;flex-flow:column wrap;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;height:40px;padding-left:10px;font-weight:700;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-bottom:1px solid #e6e6e6}.popup-root .popup-box div.content[data-v-1f0b77d6],.popup-root .popup-box div.header[data-v-1f0b77d6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal}.popup-root .popup-box div.content[data-v-1f0b77d6]{-ms-flex-flow:column wrap;flex-flow:column wrap;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;padding:10px}.popup-root .popup-box div.footer[data-v-1f0b77d6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:5px;height:50px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.popup-root .popup-box .triangle[data-v-1f0b77d6]{position:absolute;z-index:10009;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:13px solid #fff;-webkit-filter:drop-shadow(0 6px 4px rgba(50,50,50,.1));filter:drop-shadow(0 6px 4px rgba(50,50,50,.1))}.popup-root .popup-box .triangle.left[data-v-1f0b77d6]{left:10px}.popup-root .popup-box .triangle.bottom[data-v-1f0b77d6]{bottom:100%;border-bottom:13px solid #fff;border-top:13px solid transparent;-webkit-filter:drop-shadow(0 -6px 4px rgba(50,50,50,.1));filter:drop-shadow(0 -6px 4px rgba(50,50,50,.1))}.popup-root .popup-box .triangle.top[data-v-1f0b77d6]{top:100%}.popup-root .popup-box .triangle.right[data-v-1f0b77d6]{right:10px}.popup-root .popup-box .triangle.center[data-v-1f0b77d6]{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.popup-root .popup-box.dark[data-v-1f0b77d6]{background-color:#3c3c3c}.popup-root .popup-box.dark.triangle[data-v-1f0b77d6]{border-left:13px solid transparent;border-right:13px solid transparent;border-top:13px solid #3c3c3c}.popup-root .popup-box.dark.triangle.bottom[data-v-1f0b77d6]{border-bottom:13px solid #3c3c3c;border-top:13px solid transparent}.popup-root .button-popup[data-v-1f0b77d6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:inherit;flex-flow:inherit;-webkit-box-pack:inherit;-ms-flex-pack:inherit;justify-content:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;position:unset;height:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}