mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Styled scroll in servers list for home page

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-20 12:25:17 +01:00
parent 260a6c4940
commit 9e63c463ca
2 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/servers/ServersListGroup.scss
View file

@ -1,5 +1,6 @@
@import '../utils/base'; @import '../utils/base';
@import '../utils/mixins/vertical-align'; @import '../utils/mixins/vertical-align';
@import '../utils/mixins/thin-scroll';
.servers-list__list-group.servers-list__list-group { .servers-list__list-group.servers-list__list-group {
width: 100%; width: 100%;
@ -33,6 +34,8 @@
@media (min-width: $mdMin) { @media (min-width: $mdMin) {
max-height: 220px; max-height: 220px;
overflow-x: auto; overflow-x: auto;
@include thin-scroll();
} }
.servers-list__server-item { .servers-list__server-item {

16
src/utils/mixins/thin-scroll.scss Normal file
View file

@ -0,0 +1,16 @@
@mixin thin-scroll() {
/* Forefox scrollbar */
scrollbar-color: rgba(0, 0, 0, .2) #f5f5f5;
scrollbar-width: thin;
/* Chrome webkit scrollbar */
&::-webkit-scrollbar {
width: 6px;
background-color: #f5f5f5;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
border-radius: .5rem;
}
}