moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Timeline tab animations

This commit is contained in:
Alex Gleason 2020-06-06 19:29:22 -05:00
parent a1abddd110
commit 109b043153
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/styles/components/columns.scss
View File

@ -369,6 +369,11 @@
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
&--sub { &--sub {
font-size: 14px; font-size: 14px;
@ -382,8 +387,23 @@
&.active { &.active {
color: var(--primary-text-color); color: var(--primary-text-color);
border-radius: 10px;
&::before {
height: 100%;
opacity: 1;
}
}
&::before {
content: '';
display: block;
position: absolute;
width: 100%;
background-color: var(--brand-color-faint); background-color: var(--brand-color-faint);
filter: var(--accent-filter);
border-radius: 10px;
transition: 0.2s;
opacity: 0;
} }
@media screen and (max-width: $nav-breakpoint-2) { @media screen and (max-width: $nav-breakpoint-2) {
@ -400,6 +420,22 @@
} }
} }
&:hover .btn.grouped {
&::before {
height: 70% !important;
opacity: 0 !important;
}
&:hover::before {
height: 100% !important;
opacity: 1 !important;
}
&:hover {
color: var(--primary-text-color);
}
}
& > .column-header__back-button { & > .column-header__back-button {
color: var(--highlight-text-color); color: var(--highlight-text-color);
} }