@web-atoms/core/dist/web/services/PopupWindow.global.css.map

Web Atoms Core

{"version":3,"sources":["../../../src/web/services/PopupWindow.global.css"],"names":[],"mappings":"AAAA","file":"PopupWindow.global.css","sourcesContent":["[data-popup-window=popup-window] {\n    position: absolute;\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background-color: canvas;\n    color: canvastext;\n    box-shadow: 0 0 20px 1px rgba(0 0 0 / 75%);\n\n    display: grid;\n    align-items: stretch;\n    justify-items: stretch;\n    grid-template-rows: auto auto 1fr auto;\n    grid-template-columns: auto 1fr auto;\n    opacity: 0;\n    transition: opacity 0.3s cubic-bezier(0.55, 0.09, 0.97, 0.32) ;\n    overflow: hidden;\n\n    &[not-ready] {\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n    }\n\n    [data-window-modal-background=background] {\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n    }\n\n    &[data-no-width=true] {\n        max-width: 95%;\n        min-width: 300px;\n    }\n    &[data-no-height=true] {\n        max-height: 95%;\n        min-height: 100px;\n    }\n\n    &[data-maximize=true] {\n        width: 90%;\n        height: 90%;\n    }\n\n    &[data-ready=true] {\n        opacity: 1;\n    }\n    &[data-dragging=true] {\n        opacity: 0.5;\n    }\n    & > [data-window-element=icon] {\n        grid-row: 1;\n        grid-column: 1;\n        z-index: 2;\n    }\n    & > [data-window-element=title] {\n        grid-row: 1;\n        grid-column: 2;\n        font-size: medium;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        cursor: move;\n        padding: var(--spacing, 5px);\n        color: var(--accent-text-color, #424242);\n        z-index: 2;\n    }\n    & > [data-window-element=close] {\n        grid-row: 1;\n        grid-column: 3;\n        color: white;\n        background-color: red;\n        border-radius: 9999px;\n        border: none;\n        outline: none;\n        /* padding: 5px; */\n        font-family: monospace;\n        height: 20px;\n        width: 20px;\n        margin: 5px;\n        cursor: pointer;\n        text-transform: capitalize;\n        z-index: 2;\n    }\n    & > [data-window-element=action-bar] {\n        grid-row: 1;\n        grid-column: 1 / span 3;\n        align-self: stretch;\n        justify-self: stretch;\n        background-color: var(--accent-color, rgba(211, 211, 211, 0.2));\n        border-top-left-radius: 5px;\n        border-top-right-radius: 5px;\n        z-index: 1;\n    }\n    & > [data-window-element=header] {\n        margin-top: 5px;\n        grid-row: 2;\n        grid-column: 1 / span 3;\n    }\n    & > [data-window-element=content] {\n        margin-top: 5px;\n        grid-row: 3;\n        grid-column: 1 / span 3;\n        position: relative;\n        overflow: auto;\n        padding: var(--spacing-medium, 7px);\n        &[data-maximize=true] {\n            width: 90vw;\n            height: 90vh;\n        }\n    }\n    & > [data-window-element=footer] {\n        margin-top: 5px;\n        grid-row: 4;\n        grid-column: 1 / span 3;\n        padding-top: 5px;\n        padding-bottom: 5px;\n        background-color: var(--command-bar-color, #80808025);\n\n        & > button, & > * > button {\n            border-radius: 9999px;\n            padding: 5px;\n            padding-left: 20px;\n            padding-right: 20px;\n            border-width: 1px;\n            border-color: transparent;\n            margin: 5px;\n            margin-left: 10px;\n        }            \n    }    \n}\n\nbody > div[data-popup-window=popup-window], body > div[data-window-modal-background] {\n    position: fixed;\n}\n\n[data-confirm-popup=confirm-popup] {\n    & >[data-window-element=content] > [data-element=details] {\n        margin-top: 5px;\n        overflow: auto;\n        max-width: 80vw;\n        max-height: 50vh;\n    }\n    & > [data-window-element=footer] {\n\n        & > .yes {\n            background-color: #01af01;\n            color: white;\n        }\n        & > .no {\n            background-color: red;\n            color: white;\n        }\n        & > .cancel {\n            background-color: gray;\n            color: white;\n        }\n    }\n}"]}