Jason Zimdars
139 lines
3.0 KiB
CSS
139 lines
3.0 KiB
CSS
:root {
|
|
--tray-size: max(20dvw, 18rem);
|
|
}
|
|
|
|
.tray {
|
|
--height: calc(2.57lh + var(--block-space));
|
|
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-radius: 0.5em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
inline-size: var(--tray-size);
|
|
justify-content: end;
|
|
padding: var(--block-space-half) var(--inline-space);
|
|
position: fixed;
|
|
z-index: 2;
|
|
|
|
.tray__item {
|
|
--offset: calc((var(--position) - 1) * (var(--block-space) * -1));
|
|
--position: 1;
|
|
--scale: calc(1 - var(--position) / 30);
|
|
--z: calc(6 - var(--position));
|
|
|
|
inset: auto 0 0;
|
|
inline-size: var(--tray-size);
|
|
outline: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
scale: var(--scale);
|
|
transform: translateY(var(--offset));
|
|
transform-origin: center;
|
|
transition: scale 0.2s ease-out, transform 0.2s ease-out;
|
|
z-index: var(--z);
|
|
|
|
&:nth-child(1) { --position: 1; }
|
|
&:nth-child(2) { --position: 2; }
|
|
&:nth-child(3) { --position: 3; }
|
|
&:nth-child(4) { --position: 4; }
|
|
&:nth-child(5) { --position: 5; }
|
|
&:nth-child(6) { --position: 6; }
|
|
|
|
.tray[open] & {
|
|
--offset: calc((100% + var(--block-space-half)) * (var(--position) * -1));
|
|
--scale: 1;
|
|
|
|
margin-block-end: calc(var(--block-space) * -1);
|
|
pointer-events: unset;
|
|
}
|
|
|
|
.tray:has(.tray__item:only-child) & {
|
|
pointer-events: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tray__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--inline-space-half);
|
|
opacity: 0;
|
|
scale: calc(1 - 1 / 30);
|
|
transform: translateY(100%);
|
|
transition: opacity 0.2s ease-out, scale 0.2s ease-out, transform 0.2s ease-out;
|
|
|
|
.tray[open] & {
|
|
opacity: 1;
|
|
scale: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.tray:not(:has(.tray__item)) & {
|
|
opacity: 1;
|
|
scale: 1;
|
|
transform: none;
|
|
transition: none;
|
|
|
|
.tray__all_action {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tray__expander {
|
|
--hover-size: 0;
|
|
--outline-size: 0;
|
|
|
|
background-color: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
inset: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 6;
|
|
|
|
.tray[open] &,
|
|
.tray:not(:has(.tray__item)) &,
|
|
.tray:has(.tray__item:only-child) & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tray__item-meta {
|
|
font-size: var(--text-x-small);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tray__overflow {
|
|
--border-radius: 0.2em;
|
|
--hover-size: 0;
|
|
--offset: calc((var(--position) - 1) * (var(--block-space) * -1));
|
|
--position: 7;
|
|
--scale: calc(1 - var(--position) / 30);
|
|
--z: calc(6 - var(--position));
|
|
|
|
block-size: var(--height);
|
|
display: none;
|
|
inset: auto 0.1ch 0 auto;
|
|
inline-size: var(--tray-size);
|
|
pointer-events: none;
|
|
position: absolute;
|
|
scale: var(--scale);
|
|
transform: translateY(var(--offset));
|
|
transform-origin: center;
|
|
transition: scale 0.2s ease-out, transform 0.2s ease-out;
|
|
z-index: var(--z);
|
|
|
|
.tray:has(.tray__item:nth-child(7)) & {
|
|
display: flex;
|
|
}
|
|
|
|
.tray[open] & {
|
|
--offset: calc((100% + var(--block-space-half)) * (var(--position) * -1));
|
|
--scale: 1;
|
|
|
|
margin-block-end: calc(var(--block-space-half) * -1);
|
|
pointer-events: unset;
|
|
}
|
|
} |