omii-ui
Version:
使用OMII开发的WebComponents库,样式采用bootstrap。可以作为标准的esmodule使用
7 lines (6 loc) • 5.93 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)
*/.modal{--oi-modal-zindex: 1055;--oi-modal-width: 500px;--oi-modal-padding: 1rem;--oi-modal-margin: .5rem;--oi-modal-color: ;--oi-modal-bg: #fff;--oi-modal-border-color: var(--oi-border-color-translucent);--oi-modal-border-width: 1px;--oi-modal-border-radius: .5rem;--oi-modal-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);--oi-modal-inner-border-radius:calc(.5rem - 1px);--oi-modal-header-padding-x: 1rem;--oi-modal-header-padding-y: 1rem;--oi-modal-header-padding: 1rem 1rem;--oi-modal-header-border-color: var(--oi-border-color);--oi-modal-header-border-width: 1px;--oi-modal-title-line-height: 1.5;--oi-modal-footer-gap: .5rem;--oi-modal-footer-bg: ;--oi-modal-footer-border-color: var(--oi-border-color);--oi-modal-footer-border-width: 1px;position:fixed;top:0;left:0;z-index:var(--oi-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--oi-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translateY(-50px)}@media (prefers-reduced-motion: reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - var(--oi-modal-margin) * 2)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--oi-modal-margin) * 2)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--oi-modal-color);pointer-events:auto;background-color:var(--oi-modal-bg);background-clip:padding-box;border:var(--oi-modal-border-width) solid var(--oi-modal-border-color);border-radius:var(--oi-modal-border-radius);outline:0}.modal-backdrop{--oi-backdrop-zindex: 1050;--oi-backdrop-bg: #000;--oi-backdrop-opacity: .5;position:fixed;top:0;left:0;z-index:var(--oi-backdrop-zindex);width:100vw;height:100vh;background-color:var(--oi-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--oi-backdrop-opacity)}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:var(--oi-modal-header-padding);border-bottom:var(--oi-modal-header-border-width) solid var(--oi-modal-header-border-color);border-top-left-radius:var(--oi-modal-inner-border-radius);border-top-right-radius:var(--oi-modal-inner-border-radius)}.modal-header .btn-close{padding:calc(var(--oi-modal-header-padding-y) * .5) calc(var(--oi-modal-header-padding-x) * .5);margin:calc(-.5 * var(--oi-modal-header-padding-y)) calc(-.5 * var(--oi-modal-header-padding-x)) calc(-.5 * var(--oi-modal-header-padding-y)) auto}.modal-title{margin-bottom:0;line-height:var(--oi-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--oi-modal-padding)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--oi-modal-padding) - var(--oi-modal-footer-gap) * .5);background-color:var(--oi-modal-footer-bg);border-top:var(--oi-modal-footer-border-width) solid var(--oi-modal-footer-border-color);border-bottom-right-radius:var(--oi-modal-inner-border-radius);border-bottom-left-radius:var(--oi-modal-inner-border-radius)}.modal-footer>*{margin:calc(var(--oi-modal-footer-gap) * .5)}@media (min-width: 576px){.modal{--oi-modal-margin: 1.75rem;--oi-modal-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)}.modal-dialog{max-width:var(--oi-modal-width);margin-right:auto;margin-left:auto}.modal-sm{--oi-modal-width: 300px}}@media (min-width: 992px){.modal-lg,.modal-xl{--oi-modal-width: 800px}}@media (min-width: 1200px){.modal-xl{--oi-modal-width: 1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-header,.modal-fullscreen .modal-footer{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}@media (max-width: 575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-header,.modal-fullscreen-sm-down .modal-footer{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}}@media (max-width: 767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-header,.modal-fullscreen-md-down .modal-footer{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}}@media (max-width: 991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-header,.modal-fullscreen-lg-down .modal-footer{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}}@media (max-width: 1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-header,.modal-fullscreen-xl-down .modal-footer{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}}@media (max-width: 1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-header,.modal-fullscreen-xxl-down .modal-footer{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}}