@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 5.11 kB
CSS
.cdx-popover-floating-enter-active,.cdx-popover-floating-leave-active{transition-property:none;transition-duration:0s}.cdx-popover__backdrop--bottom-sheet{background-color:var(--background-color-backdrop-light, rgba(255, 255, 255, .65));display:flex;flex-direction:column;justify-content:flex-end;position:fixed;top:0;bottom:0;right:0;z-index:400;min-height:100%;width:100vw;height:100vh;height:-webkit-fill-available;height:100dvh}.cdx-popover__backdrop--no-backdrop{background-color:var(--background-color-transparent, transparent)}.cdx-popover{background-color:var(--background-color-base, #fff);display:flex;flex-direction:column;position:absolute;z-index:700;box-sizing:border-box;min-width:12rem;border:1px solid var(--border-color-base, #a2a9b1);border-radius:2px;padding:16px;box-shadow:0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06)),0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06))}.cdx-popover__header{display:flex;align-items:flex-start;flex-shrink:0;gap:8px;margin-bottom:8px}.cdx-popover__header__icon{flex-shrink:0;height:var(--line-height-small, 1.375rem)}.cdx-popover__header__title{font-size:var(--font-size-medium, 1rem);font-weight:700;line-height:var(--line-height-small, 1.375rem)}.cdx-popover__header__button-wrapper{display:flex;flex-direction:column;justify-content:center;height:var(--line-height-small, 1.375rem);margin-left:-8px;margin-right:auto}.cdx-popover__body{flex-grow:1;flex-shrink:1;overflow-y:auto;font-size:var(--font-size-medium, 1rem);line-height:var(--line-height-small, 1.375rem)}.cdx-popover__footer{flex-shrink:0;margin-top:16px}.cdx-popover__footer__actions{display:flex;flex-direction:row-reverse;gap:12px}@supports (-webkit-touch-callout: none) and (not (translate: none)){.cdx-popover__footer__actions .cdx-button:not(:last-child){margin-left:12px}}.cdx-popover__footer__actions--vertical{flex-direction:column;width:100%}.cdx-popover__footer__actions--vertical .cdx-button{max-width:none}@supports (-webkit-touch-callout: none) and (not (translate: none)){.cdx-popover__footer__actions--vertical .cdx-button:not(:last-child){margin-left:0;margin-bottom:12px}}@media (max-width: 640px){.cdx-popover__footer__actions{flex-direction:column;width:100%}.cdx-popover__footer__actions .cdx-button{max-width:none}@supports (-webkit-touch-callout: none) and (not (translate: none)){.cdx-popover__footer__actions .cdx-button:not(:last-child){margin-left:0;margin-bottom:12px}}}.cdx-popover__arrow{background-color:var(--background-color-base, #fff);position:absolute;width:1rem;height:1rem;border:1px solid var(--border-color-base, #a2a9b1);border-top-right-radius:2px;box-shadow:0 4px 4px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06)),0 0 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06));-webkit-clip-path:polygon(0 0,100% 0,0 100%);clip-path:polygon(0 0,100% 0,0 100%)}.cdx-popover--bottom-sheet{position:static;max-height:calc(100% - 8rem);max-height:90dvh;border-top:1px solid var(--border-color-base, #a2a9b1);border-left:0;border-bottom:0;border-right:0;border-radius:0;padding:0;padding-top:env(safe-area-inset-top,0);box-shadow:0 4px 8px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06)),0 0 16px 0 var(--box-shadow-color-alpha-base, rgba(0, 0, 0, .06))}.cdx-popover--bottom-sheet .cdx-popover__header{margin-bottom:0;padding:16px 24px}.cdx-popover--bottom-sheet .cdx-popover__header .cdx-popover__header__title{flex-grow:1}.cdx-popover--bottom-sheet .cdx-popover__body{min-height:0;padding:8px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.cdx-popover--bottom-sheet .cdx-popover__body--no-footer{padding-bottom:24px}.cdx-popover--bottom-sheet .cdx-popover__body>*:first-child{margin-top:0;padding-top:0}.cdx-popover--bottom-sheet .cdx-popover__body>*:last-child{margin-bottom:0;padding-bottom:0}.cdx-popover--bottom-sheet .cdx-popover__footer{margin-top:auto;padding:16px 24px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}.cdx-popover--dividers .cdx-popover__header{border-bottom:1px solid var(--border-color-subtle, #c8ccd1)}.cdx-popover--dividers .cdx-popover__footer{border-top:1px solid var(--border-color-subtle, #c8ccd1)}.cdx-popover-bottom-sheet-enter-active,.cdx-popover-bottom-sheet-leave-active{transition-duration:.25s;transition-timing-function:ease}.cdx-popover-bottom-sheet-enter-active{transition-property:opacity}.cdx-popover-bottom-sheet-enter-active .cdx-popover--bottom-sheet{transition-property:transform;transition-duration:.25s;transition-timing-function:ease}.cdx-popover-bottom-sheet-leave-active{transition-property:opacity}.cdx-popover-bottom-sheet-leave-active .cdx-popover--bottom-sheet{transition-property:transform;transition-duration:.25s;transition-timing-function:ease}.cdx-popover-bottom-sheet-enter-from{opacity:0}.cdx-popover-bottom-sheet-enter-from .cdx-popover--bottom-sheet{transform:translateY(100%)}.cdx-popover-bottom-sheet-leave-to{opacity:0}.cdx-popover-bottom-sheet-leave-to .cdx-popover--bottom-sheet{transform:translateY(100%)}.cdx-popover-focus-trap{position:absolute}.cdx-popover-focus-trap:focus{outline:0}