Improve Sheets component
This commit is contained in:
parent
3ae94b01f4
commit
ba68ffb31b
|
@ -5,7 +5,6 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
background: var(--codex-background-backdrop);
|
||||
display: none;
|
||||
backdrop-filter: blur(2px);
|
||||
display: block;
|
||||
z-index: 10;
|
||||
|
|
|
@ -50,7 +50,7 @@ export function Menu({
|
|||
onClose,
|
||||
onOpen,
|
||||
items,
|
||||
className,
|
||||
className = "",
|
||||
version = "",
|
||||
}: Props) {
|
||||
useEffect(() => {
|
||||
|
|
|
@ -2,6 +2,7 @@ import { ReactElement } from "react";
|
|||
import { Backdrop } from "../Backdrop/Backdrop";
|
||||
import "./sheets.css";
|
||||
import { attributes } from "../utils/attributes";
|
||||
import { classnames } from "../utils/classnames";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
|
@ -15,7 +16,12 @@ export function Sheets({ open, onClose, children }: Props) {
|
|||
const attr = attributes({ "aria-expanded": open });
|
||||
|
||||
return (
|
||||
<div className="sheets-container">
|
||||
<div
|
||||
className={classnames(
|
||||
["sheets-container"],
|
||||
["sheets-container--open", open]
|
||||
)}
|
||||
>
|
||||
<Backdrop onClose={onClose} open={open} className={"sheets-backdrop"} />
|
||||
|
||||
<div className="sheets" {...attr}>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.sheets {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
transition: transform 0.25s;
|
||||
background-color: var(--codex-background-secondary);
|
||||
z-index: 2;
|
||||
|
@ -7,7 +7,16 @@
|
|||
}
|
||||
|
||||
.sheets-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.sheets-container--open {
|
||||
/* z-index: 0; */
|
||||
}
|
||||
|
||||
.sheets-backdrop {
|
||||
|
@ -20,7 +29,7 @@
|
|||
height: 100%;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
transform: translatex(300px);
|
||||
transform: translatex(1300px);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
@ -36,7 +45,7 @@
|
|||
height: auto;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
transform: translatey(1000px);
|
||||
transform: translatey(1300px);
|
||||
left: 0;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
|
|
@ -7,9 +7,9 @@ const meta = {
|
|||
title: "Overlays/Sheets",
|
||||
component: Sheets,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
inlineStories: false,
|
||||
layout: "fullscreen",
|
||||
},
|
||||
|
||||
tags: ["autodocs"],
|
||||
argTypes: {},
|
||||
args: {
|
||||
|
@ -30,7 +30,7 @@ const DefaultTemplate = (props: { onClose: () => void }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: "2rem" }}>
|
||||
<div style={{ padding: "6rem", position: "relative", overflow: "hidden" }}>
|
||||
<button onClick={onClick}>Make Sheets</button>
|
||||
|
||||
<Sheets open={open} onClose={onClose}>
|
||||
|
|
Loading…
Reference in New Issue