Skip to content
Snippets Groups Projects
Commit 12b04a98 authored by insert's avatar insert
Browse files

Move details styling into its own component.

parent e0b9567c
No related merge requests found
import styled from "styled-components";
export default styled.details`
summary {
outline: none;
list-style: none;
transition: .2s opacity;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
flex-shrink: 0;
transition: .2s ease transform;
}
}
&:not([open]) {
summary {
opacity: .7;
}
summary svg {
transform: rotateZ(-90deg);
}
}
`;
......@@ -23,6 +23,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
const ref = useRef<HTMLTextAreaElement>();
useEffect(() => {
if (isTouchscreenDevice) return;
autoFocus && ref.current.focus();
}, [value]);
......
......@@ -39,33 +39,6 @@
}
}
details {
summary {
outline: none;
list-style: none;
transition: .2s opacity;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
flex-shrink: 0;
transition: .2s ease transform;
}
}
&:not([open]) {
summary {
opacity: .7;
}
summary svg {
transform: rotateZ(-90deg);
}
}
}
&[data-empty="true"] {
img {
height: 120px;
......
......@@ -14,6 +14,7 @@ import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regu
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { TextReact } from "../../lib/i18n";
import { Children } from "../../types/Preact";
import Details from "../../components/ui/Details";
export default function Friends() {
const { openScreen } = useIntermediate();
......@@ -112,7 +113,7 @@ export default function Friends() {
if (list.length === 0) return;
return (
<details open>
<Details open>
<summary>
<Overline className={styles.overline} type="subtle">
<ChevronDown size={20} />
......@@ -122,7 +123,7 @@ export default function Friends() {
</Overline>
</summary>
{ list.map(x => <Friend key={x._id} user={x} />) }
</details>
</Details>
)
})
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment