omii-ui
Version:
使用OMII开发的WebComponents库,样式采用bootstrap。可以作为标准的esmodule使用
7 lines (6 loc) • 6.3 kB
CSS
/*!
* Bootstrap v5.2.3 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/.popover{--oi-popover-zindex: 1070;--oi-popover-max-width: 276px;--oi-popover-font-size: .875rem;--oi-popover-bg: #fff;--oi-popover-border-width: 1px;--oi-popover-border-color: var(--oi-border-color-translucent);--oi-popover-border-radius: .5rem;--oi-popover-inner-border-radius:calc(.5rem - 1px);--oi-popover-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--oi-popover-header-padding-x: 1rem;--oi-popover-header-padding-y: .5rem;--oi-popover-header-font-size: 1rem;--oi-popover-header-color: ;--oi-popover-header-bg: #f0f0f0;--oi-popover-body-padding-x: 1rem;--oi-popover-body-padding-y: 1rem;--oi-popover-body-color: #212529;--oi-popover-arrow-width: 1rem;--oi-popover-arrow-height: .5rem;--oi-popover-arrow-border: var(--oi-popover-border-color);z-index:var(--oi-popover-zindex);display:block;max-width:var(--oi-popover-max-width);font-family:var(--oi-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--oi-popover-font-size);word-wrap:break-word;background-color:var(--oi-popover-bg);background-clip:padding-box;border:var(--oi-popover-border-width) solid var(--oi-popover-border-color);border-radius:var(--oi-popover-border-radius)}.popover .popover-arrow{display:block;width:var(--oi-popover-arrow-width);height:var(--oi-popover-arrow-height)}.popover .popover-arrow:before,.popover .popover-arrow:after{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.bs-popover-top>.popover-arrow,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow{bottom:calc(-1 * (var(--oi-popover-arrow-height)) - var(--oi-popover-border-width))}.bs-popover-top>.popover-arrow:before,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:before,.bs-popover-top>.popover-arrow:after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:after{border-width:var(--oi-popover-arrow-height) calc(var(--oi-popover-arrow-width) * .5) 0}.bs-popover-top>.popover-arrow:before,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:before{bottom:0;border-top-color:var(--oi-popover-arrow-border)}.bs-popover-top>.popover-arrow:after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:after{bottom:var(--oi-popover-border-width);border-top-color:var(--oi-popover-bg)}.bs-popover-end>.popover-arrow,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow{left:calc(-1 * (var(--oi-popover-arrow-height)) - var(--oi-popover-border-width));width:var(--oi-popover-arrow-height);height:var(--oi-popover-arrow-width)}.bs-popover-end>.popover-arrow:before,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:before,.bs-popover-end>.popover-arrow:after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after{border-width:calc(var(--oi-popover-arrow-width) * .5) var(--oi-popover-arrow-height) calc(var(--oi-popover-arrow-width) * .5) 0}.bs-popover-end>.popover-arrow:before,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:before{left:0;border-right-color:var(--oi-popover-arrow-border)}.bs-popover-end>.popover-arrow:after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after{left:var(--oi-popover-border-width);border-right-color:var(--oi-popover-bg)}.bs-popover-bottom>.popover-arrow,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow{top:calc(-1 * (var(--oi-popover-arrow-height)) - var(--oi-popover-border-width))}.bs-popover-bottom>.popover-arrow:before,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:before,.bs-popover-bottom>.popover-arrow:after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:after{border-width:0 calc(var(--oi-popover-arrow-width) * .5) var(--oi-popover-arrow-height)}.bs-popover-bottom>.popover-arrow:before,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:before{top:0;border-bottom-color:var(--oi-popover-arrow-border)}.bs-popover-bottom>.popover-arrow:after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:after{top:var(--oi-popover-border-width);border-bottom-color:var(--oi-popover-bg)}.bs-popover-bottom .popover-header:before,.bs-popover-auto[data-popper-placement^=bottom] .popover-header:before{position:absolute;top:0;left:50%;display:block;width:var(--oi-popover-arrow-width);margin-left:calc(-.5 * var(--oi-popover-arrow-width));content:"";border-bottom:var(--oi-popover-border-width) solid var(--oi-popover-header-bg)}.bs-popover-start>.popover-arrow,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow{right:calc(-1 * (var(--oi-popover-arrow-height)) - var(--oi-popover-border-width));width:var(--oi-popover-arrow-height);height:var(--oi-popover-arrow-width)}.bs-popover-start>.popover-arrow:before,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:before,.bs-popover-start>.popover-arrow:after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after{border-width:calc(var(--oi-popover-arrow-width) * .5) 0 calc(var(--oi-popover-arrow-width) * .5) var(--oi-popover-arrow-height)}.bs-popover-start>.popover-arrow:before,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:before{right:0;border-left-color:var(--oi-popover-arrow-border)}.bs-popover-start>.popover-arrow:after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after{right:var(--oi-popover-border-width);border-left-color:var(--oi-popover-bg)}.popover-header{padding:var(--oi-popover-header-padding-y) var(--oi-popover-header-padding-x);margin-bottom:0;font-size:var(--oi-popover-header-font-size);color:var(--oi-popover-header-color);background-color:var(--oi-popover-header-bg);border-bottom:var(--oi-popover-border-width) solid var(--oi-popover-border-color);border-top-left-radius:var(--oi-popover-inner-border-radius);border-top-right-radius:var(--oi-popover-inner-border-radius)}.popover-header:empty{display:none}.popover-body{padding:var(--oi-popover-body-padding-y) var(--oi-popover-body-padding-x);color:var(--oi-popover-body-color)}