bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'filter-bar-animation' into 'develop'

Browse source 
Filter bar tab indicator animation

See merge request soapbox-pub/soapbox-fe!954
This commit is contained in:
marcin mikołajczak 2022-01-06 18:17:04 +00:00
commit afa1ae2fc1
6 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/soapbox/components/filter_bar.js Normal file
View file

Binary file not shown.

BIN
app/soapbox/features/compose/components/search_results.js
View file

Binary file not shown.

BIN
app/soapbox/features/notifications/components/filter_bar.js
View file

Binary file not shown.

BIN
app/soapbox/features/search/components/filter_bar.js
View file

Binary file not shown.

BIN
app/soapbox/features/ui/components/reactions_modal.js
View file

Binary file not shown.

31
app/styles/ui.scss
View file

@ -636,10 +636,8 @@ article:last-child > .domain {
}
}
.notification__filter-bar,
.search__filter-bar,
.account__section-headline,
.reaction__filter-bar {
.filter-bar,
.account__section-headline {
border-bottom: 1px solid var(--brand-color--faint);
cursor: default;
display: flex;
@ -684,15 +682,30 @@ article:last-child > .domain {
background-color: var(--accent-color);
}
}
}
button .svg-icon {
width: 18px;
height: 18px;
margin: 0 auto;
.svg-icon {
width: 18px;
height: 18px;
margin: 0 auto;
}
}
}
.filter-bar {
position: relative;
&__active {
position: absolute;
height: 3px;
bottom: 0;
background-color: var(--accent-color);
}
}
.no-reduce-motion .filter-bar__active {
transition: all 0.3s;
}
.reaction__filter-bar {
overflow-x: auto;
overflow-y: hidden;