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;
text-align: left;
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 {
display: flex;
font-size: 2rem;
padding: 1.5rem 1.5rem 1rem;
margin: -1.5rem -1.5rem 0;
background-color: transparent;
font-weight: 400;
color: inherit;
width: calc(100% + 3rem);
align-items: center;
text-shadow: var(--text-shadow);
margin: -1.5rem;
.svg-icon {
margin-left: auto;
@ -122,7 +130,7 @@ export default defineComponent({
}
&:hover, &:focus-visible, &.focus-visible, &:active {
background-color: transparent;
background-color: inherit;
}
}
@ -155,8 +163,7 @@ export default defineComponent({
transform: none;
}
.section__heading button {
padding-bottom: 1.5rem;
.section__heading, .section__heading button {
margin-bottom: -1.5rem;
}

4
src/scss/_placeholders.scss
View File

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