quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

collapsible button width fix

Browse source
This commit is contained in:
Xanazf 2024-10-18 01:54:20 +03:00
parent 87955bdda3
commit 1545e59dc9
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
1 changed files with 17 additions and 18 deletions

35
src/styles/docs/collapsible.css
View file

@ -1,64 +1,63 @@
[data-scope='collapsible'][data-part='root'] { [data-scope="collapsible"][data-part="root"] {
--height: max-content;
padding: 0.673rem; padding: 0.673rem;
background-color: hsl(var(--white) 40 50 / 0.1); background-color: hsl(var(--white) 40 50 / 0.1);
border-radius: 0.618rem; border-radius: 0.618rem;
} }
[data-scope='collapsible'][data-part='content'] { [data-scope="collapsible"][data-part="content"] {
transition: all 250ms;
padding: 0; padding: 0;
margin-left: 0; margin: 0;
transition: all 300ms;
} }
[data-scope='collapsible'][data-part='content'][data-state='open'] { [data-scope="collapsible"][data-part="content"][data-state="open"] {
animation: slideDown 250ms;
display: flex; display: flex;
gap: 1.272rem; gap: 1.272rem;
flex-direction: column; flex-direction: column;
padding: 0.618em; padding: 0.618em;
margin-left: 22px; margin-left: 22px;
animation: slideDown 300ms;
& p { & p {
margin-block: 0; margin-block: 0;
} }
} }
[data-scope='collapsible'][data-part='content'][data-state='closed'] { [data-scope="collapsible"][data-part="content"][data-state="closed"] {
animation: slideUp 200ms; animation: slideUp 300ms;
padding: 0;
margin-left: 0;
& svg { & svg {
animation: rotateOut90 250ms; animation: rotateOut90 300ms;
} }
} }
[data-scope='collapsible'][data-part='trigger'] { [data-scope="collapsible"][data-part="trigger"] {
all: unset; all: unset;
width: calc(100% - 0.618rem * 2);
cursor: pointer; cursor: pointer;
font-size: 1.117rem; font-size: 1.117rem;
font-weight: 500; font-weight: 500;
display: flex; display: flex;
gap: 0.272rem; gap: 0.272rem;
align-items: center; align-items: center;
justify-content: space-between;
padding: 0.618rem; padding: 0.618rem;
border-radius: 0.618rem; border-radius: 0.618rem;
& p {
margin-block: 0;
}
&:hover { &:hover {
background-color: hsl(var(--white) 40 50 / 0.1); background-color: hsl(var(--white) 40 50 / 0.1);
} }
&[data-state='open'] { &[data-state="open"] {
& svg { & svg {
animation: rotateIn90 250ms forwards; animation: rotateIn90 250ms forwards;
} }
} }
&[data-state='closed'] { &[data-state="closed"] {
& svg { & svg {
animation: rotateOut90 250ms forwards; animation: rotateOut90 250ms forwards;
} }