@ebay/skin/dist/drawer-dialog/drawer-dialog.css

Skin - CSS modules that represent the brand eBay

/*! DEPRECATED COMPONENT. Will be removed next major version */
:root {
    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
    --dialog-lightbox-max-width: 616px;
}
.drawer-dialog[role="dialog"] {
    background-color: var(--dialog-scrim-color-show);
    bottom: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    align-items: flex-end;
    overflow-y: auto;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    will-change: background-color;
    z-index: 100000;
}
.drawer-dialog[role="dialog"]:not([hidden]) {
    display: flex;
}

.drawer-dialog--no-mask[role="dialog"] {
    background-color: initial;
}

.drawer-dialog__header {
    display: flex;
    flex-shrink: 0;
    margin: var(--spacing-250) var(--spacing-200) 0;
    position: relative;
}
.drawer-dialog__header h1,
.drawer-dialog__header h2,
.drawer-dialog__header h3,
.drawer-dialog__header h4,
.drawer-dialog__header h5,
.drawer-dialog__header h6 {
    align-self: center;
    flex: 1 1 auto;
    margin: 0;
    overflow-wrap: anywhere;
}
.drawer-dialog__header > :last-child:not(:only-child) {
    margin-inline-start: var(--spacing-200);
}

.drawer-dialog__header .fake-link {
    align-self: flex-start;
    text-decoration: none;
}

.drawer-dialog__handle {
    background-color: initial;
    border: none;
    left: 0;
    margin: -11px auto;
    padding: 8px;
    position: relative;
    right: 0;
    top: 11px;
    z-index: 2;
}
.drawer-dialog__handle:after {
    background-color: var(--dialog-handle-color, var(--color-stroke-default));
    border-radius: 3px;
    content: "";
    display: block;
    height: 2px;
    width: 24px;
}

.drawer-dialog__main {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: auto;
    overflow: auto;
    padding: var(--spacing-200);
    position: relative;
}
.drawer-dialog__main > :first-child {
    margin-top: 0;
}
.drawer-dialog__main > :last-child {
    margin-bottom: 0;
}

.drawer-dialog__footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 16px;
    position: relative;
}
.drawer-dialog__footer > * {
    flex: 1;
}
.drawer-dialog__footer > :not(:first-child) {
    margin-left: 8px;
}
button.icon-btn.drawer-dialog__close {
    align-self: flex-start;
    border: 0;
    height: 32px;
    min-width: 32px;
    position: relative;
    width: 32px;
    z-index: 1;
}

.drawer-dialog__window {
    background-color: var(
        --dialog-window-background-color,
        var(--color-background-primary)
    );
    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    max-height: 50%;
    max-width: 100%;
    min-height: 55px;
    will-change: opacity, transform;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
}

.drawer-dialog__window--expanded {
    height: 95%;
    max-height: 95%;
}

.drawer-dialog__window--slide {
    transition: max-height 0.32s ease-out;
}
.drawer-dialog--hide.drawer-dialog--mask-fade,
.drawer-dialog--show.drawer-dialog--mask-fade {
    transition: background-color 0.16s ease-out;
}
.drawer-dialog--hide.drawer-dialog--mask-fade-slow,
.drawer-dialog--show.drawer-dialog--mask-fade-slow {
    transition: background-color 0.32s ease-out;
}
.drawer-dialog--hide .drawer-dialog__window--fade,
.drawer-dialog--show .drawer-dialog__window--fade {
    transition: opacity 0.16s ease-out;
}
.drawer-dialog--hide .drawer-dialog__window--slide,
.drawer-dialog--show .drawer-dialog__window--slide {
    transition: transform 0.32s ease-out;
}
.drawer-dialog--hide.drawer-dialog--show-init,
.drawer-dialog--hidedrawer-dialog--hide,
.drawer-dialog--show-init.drawer-dialog--show-init,
.drawer-dialog--show-initdrawer-dialog--hide {
    display: flex;
}
.drawer-dialog--hide.drawer-dialog--mask-fade,
.drawer-dialog--hide.drawer-dialog--mask-fade-slow,
.drawer-dialog--show-init.drawer-dialog--mask-fade,
.drawer-dialog--show-init.drawer-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-hide);
}
.drawer-dialog--hide .drawer-dialog__window--slide,
.drawer-dialog--show-init .drawer-dialog__window--slide {
    transform: translateY(100%);
}
.drawer-dialog--hide-init.drawer-dialog--hide-init,
.drawer-dialog--hide-init.drawer-dialog--show,
.drawer-dialog--show.drawer-dialog--hide-init,
.drawer-dialog--show.drawer-dialog--show {
    display: flex;
}
.drawer-dialog--hide-init.drawer-dialog--mask-fade,
.drawer-dialog--hide-init.drawer-dialog--mask-fade-slow,
.drawer-dialog--show.drawer-dialog--mask-fade,
.drawer-dialog--show.drawer-dialog--mask-fade-slow {
    background-color: var(--dialog-scrim-color-show);
}
.drawer-dialog--hide-init .drawer-dialog__window--fade,
.drawer-dialog--show .drawer-dialog__window--fade {
    opacity: 1;
}
.drawer-dialog--hide-init .drawer-dialog__window--slide,
.drawer-dialog--show .drawer-dialog__window--slide {
    transform: translateX(0);
}

.drawer-dialog__handle:focus:not(:focus-visible) {
    outline: none;
}