@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
8 lines • 5.09 kB
JavaScript
import{css as e}from"../../../node_modules/@lit/reactive-element/css-tag.js";import"../../../node_modules/lit/index.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const t=e`:host{position:fixed;inset:0;pointer-events:none;background:0 0;color:inherit;z-index:1000;isolation:isolate}dialog{display:block!important;position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;outline:0;overflow:hidden;background:0 0;color:currentColor;pointer-events:none}dialog::backdrop{display:none}.scrim{position:absolute;inset:0;background:var(--_enabled-container-color-modal,#000);opacity:0;pointer-events:none;z-index:0}dialog.standard .scrim{display:none!important}:host([open]) dialog.modal .scrim{opacity:var(--_enabled-container-opacity-modal, .32);pointer-events:auto}.container{position:absolute;inset-inline:0;bottom:0;width:100%;max-height:var(--_enabled-container-max-height-peek,40vh);background:var(--_enabled-container-color,#fff);color:inherit;display:flex;flex-direction:column;border-start-start-radius:var(--_enabled-container-shape-start-start,var(--_container-shape-start-start,28px));border-start-end-radius:var(--_enabled-container-shape-start-end,var(--_container-shape-start-end,28px));border-end-start-radius:var(--_enabled-container-shape-end-start,var(--_container-shape-end-start,0));border-end-end-radius:var(--_enabled-container-shape-end-end,var(--_container-shape-end-end,0));transition:border-radius .2s cubic-bezier(.2, 0, 0, 1);transform:translateY(100%);pointer-events:auto;z-index:1;will-change:transform;touch-action:pan-y}.host.dragged-upward .container,:host([dragged-upward]) .container{border-start-start-radius:var(--_dragged-container-shape-start-start,var(--_enabled-container-shape-start-start,var(--_container-shape-start-start,28px)));border-start-end-radius:var(--_dragged-container-shape-start-end,var(--_enabled-container-shape-start-end,var(--_container-shape-start-end,28px)));border-end-start-radius:var(--_dragged-container-shape-end-start,var(--_enabled-container-shape-start-start,var(--_container-shape-start-start,28px)));border-end-end-radius:var(--_dragged-container-shape-end-end,var(--_enabled-container-shape-start-end,var(--_container-shape-start-end,28px)))}@media (min-width:641px){.container{inset-inline:56px;max-width:640px;margin-inline:auto}dialog.detent-full .container{max-height:min(var(--_enabled-container-max-height-full,96vh),calc(100vh - 56px))}}dialog:not([open]){display:none!important}:host([open]) .container{transform:translateY(0)}dialog.detent-full .container{max-height:min(var(--_enabled-container-max-height-full,96vh),calc(100vh - 72px))}dialog.detent-peek .container{max-height:var(--_enabled-container-max-height-peek,40vh)}:host([touch-action=none]) .container{transition:border-radius .2s cubic-bezier(.2, 0, 0, 1)}.drag-handle{display:flex;justify-content:center;align-items:center;padding-block-start:var(--_drag-handle-container-block-leading-padding-space,22px);padding-block-end:var(--_drag-handle-container-block-trailing-padding-space,22px);flex-shrink:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.drag-handle-bar{width:var(--_drag-handle-width,32px);height:var(--_drag-handle-height,4px);border-radius:var(--_drag-handle-shape,2px);background:var(--_enabled-drag-handle-color,currentColor)}.drag-handle-hidden .drag-handle-bar{visibility:hidden}:host([touch-action=none]) .drag-handle{cursor:grabbing}.header{flex-shrink:0;padding-inline-start:var(--_header-container-inline-leading-padding-space,var(--_content-container-inline-leading-padding-space,24px));padding-inline-end:var(--_header-container-inline-trailing-padding-space,var(--_content-container-inline-trailing-padding-space,24px));padding-block-start:var(--_header-container-block-leading-padding-space,0px);padding-block-end:var(--_header-container-block-trailing-padding-space,16px)}.host:not(.has-header) .header{display:none}.content{flex:1 1 auto;overflow-y:auto;padding-inline-start:var(--_content-container-inline-leading-padding-space,24px);padding-inline-end:var(--_content-container-inline-trailing-padding-space,24px);padding-block-start:var(--_content-container-block-leading-padding-space,16px);padding-block-end:var(--_content-container-block-trailing-padding-space,24px);min-height:0}.host:not(.has-content) .content{display:none}dialog.detent-peek .content{display:none}.content,.drag-handle,.header{position:relative;z-index:1}.container>mdc-elevation{--mdc-elevation-level:var(--_enabled-container-elevation, 1);--mdc-elevation-shadow-color:var(--_container-shadow-color, rgba(0, 0, 0, 0.15));position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0}.focus-trap{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.focus-trap-first{inset-block-start:0;inset-inline-start:0}.focus-trap-last{inset-block-end:0;inset-inline-end:0}.focus-trap{outline:0}`;export{t as baseBottomSheetStyles};
//# sourceMappingURL=base-bottom-sheet.style.js.map