Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make sidebar section headers sticky

Browse Source
This commit is contained in:
James Lyne 2022-01-13 01:35:44 +00:00
parent b39db090f5
commit cc39b3c0c9
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/sidebar/SidebarSection.vue
View File

@ -100,19 +100,27 @@ export default defineComponent({
user-select: none; user-select: none;
text-align: left; text-align: left;
align-items: center; align-items: center;
margin: 0; position: sticky;
top: -0.2rem;
background-color: inherit;
z-index: 10;
border-radius: inherit;
margin: -1.5rem -1.5rem 0;
&, button {
padding: 1.5rem;
}
button { button {
display: flex; display: flex;
font-size: 2rem; font-size: 2rem;
padding: 1.5rem 1.5rem 1rem;
margin: -1.5rem -1.5rem 0;
background-color: transparent; background-color: transparent;
font-weight: 400; font-weight: 400;
color: inherit; color: inherit;
width: calc(100% + 3rem); width: calc(100% + 3rem);
align-items: center; align-items: center;
text-shadow: var(--text-shadow); text-shadow: var(--text-shadow);
margin: -1.5rem;
.svg-icon { .svg-icon {
margin-left: auto; margin-left: auto;
@ -122,7 +130,7 @@ export default defineComponent({
} }
&:hover, &:focus-visible, &.focus-visible, &:active { &:hover, &:focus-visible, &.focus-visible, &:active {
background-color: transparent; background-color: inherit;
} }
} }
@ -155,8 +163,7 @@ export default defineComponent({
transform: none; transform: none;
} }
.section__heading button { .section__heading, .section__heading button {
padding-bottom: 1.5rem;
margin-bottom: -1.5rem; margin-bottom: -1.5rem;
} }

4
src/scss/_placeholders.scss
View File

@ -54,8 +54,4 @@
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
position: relative; position: relative;
h2:first-child {
margin-top: 0;
}
} }