mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-06 17:11:55 +00:00
Move details styling into its own component.
This commit is contained in:
28
src/components/ui/Details.tsx
Normal file
28
src/components/ui/Details.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user