feat(desktop): sticky diff headers
This commit is contained in:
parent
71fd5966ad
commit
0ccb26df94
3 changed files with 53 additions and 30 deletions
|
|
@ -12,9 +12,6 @@
|
|||
align-items: flex-start;
|
||||
gap: 0px;
|
||||
align-self: stretch;
|
||||
border: 1px solid var(--border-weak-base);
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
overflow: clip;
|
||||
|
||||
[data-slot="accordion-header"] {
|
||||
|
|
@ -36,7 +33,7 @@
|
|||
user-select: none;
|
||||
|
||||
background-color: var(--surface-base);
|
||||
border-bottom: 1px solid var(--border-weak-base);
|
||||
border: 1px solid var(--border-weak-base);
|
||||
overflow: clip;
|
||||
color: var(--text-strong);
|
||||
transition: background-color 0.15s ease;
|
||||
|
|
@ -62,11 +59,19 @@
|
|||
}
|
||||
|
||||
&[data-expanded] {
|
||||
border: 1px solid var(--border-weak-base);
|
||||
border-bottom: 1px solid var(--border-weak-base);
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 8px;
|
||||
|
||||
[data-slot="accordion-trigger"] {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
[data-slot="accordion-content"] {
|
||||
border: 1px solid var(--border-weak-base);
|
||||
border-top: none;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
[data-slot="accordion-item"]:has(+ &) {
|
||||
&[data-closed] {
|
||||
|
|
@ -81,18 +86,23 @@
|
|||
}
|
||||
|
||||
& + [data-slot="accordion-item"] {
|
||||
border-top: 1px solid var(--border-weak-base);
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
margin-top: 8px;
|
||||
|
||||
[data-slot="accordion-trigger"] {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-closed] + &[data-closed] {
|
||||
[data-slot="accordion-trigger"] {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
border-top: 1px solid var(--border-weak-base);
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
|
||||
&[data-closed] {
|
||||
[data-slot="accordion-trigger"] {
|
||||
|
|
@ -104,8 +114,6 @@
|
|||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
|
||||
&[data-closed] {
|
||||
[data-slot="accordion-trigger"] {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
--background-weak: var(--smoke-light-3);
|
||||
--background-strong: var(--smoke-light-1);
|
||||
--background-stronger: #fcfcfc;
|
||||
--surface-base: var(--smoke-light-alpha-2);
|
||||
--surface-base: var(--smoke-light-3);
|
||||
--base: var(--smoke-light-alpha-2);
|
||||
--surface-base-hover: #0500000f;
|
||||
--surface-base-active: var(--smoke-light-alpha-3);
|
||||
|
|
@ -317,7 +317,7 @@
|
|||
--background-weak: #1b1818;
|
||||
--background-strong: #151313;
|
||||
--background-stronger: #191515;
|
||||
--surface-base: var(--smoke-dark-alpha-2);
|
||||
--surface-base: var(--smoke-dark-3);
|
||||
--base: var(--smoke-dark-alpha-2);
|
||||
--surface-base-hover: #e0b7b716;
|
||||
--surface-base-active: var(--smoke-dark-alpha-3);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue