client/stylesheets/users.css
.user-list {
flex: 0 0;
flex-basis: 0;
display: flex;
flex-direction: column;
transition: flex-basis 0.25s, border-left-width 0s 0.25s;
overflow-y: hidden;
overflow-x: hidden;
}
.user-list.visible {
flex-basis: 250px;
transition: flex-basis 0.25s;
}
.user-list .toolbar {
flex: 0 0 48px;
background-color: #303f9f;
display: flex;
}
.user-list .users {
flex: 1 1 auto;
height: auto;
overflow-y: auto;
overflow-x: hidden;
background-color: #e8eaf6;
}
.user-list .users ul {
margin: 0;
padding: 5px 0;
width: 100%;
list-style-type: none;
}
.user-list .users li {
padding: 5px 25px;
position: relative;
}
.user-list .users li::after {
content: "";
position: absolute;
top: 0;
right: 25px;
height: 100%;
width: 20px;
background-image: linear-gradient(to right, rgba(232, 234, 236, 0), rgba(232, 234, 236, 1));
}
.user-list .users a {
color: inherit;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
display: inline-block;
}