82 lines
1.9 KiB
SCSS
82 lines
1.9 KiB
SCSS
@import "variables";
|
|
|
|
.list-account {
|
|
transition: all .2s;
|
|
$actin-width: 50px;
|
|
|
|
&__action {
|
|
float: right;
|
|
width: $actin-width;
|
|
position: relative;
|
|
|
|
&--button {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 12px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
// outline: 1px solid greenyellow;
|
|
|
|
&:hover{
|
|
color: darken(#fff, 20);
|
|
}
|
|
|
|
// $add-color: rgb(167, 220, 255);
|
|
// $remove-color: rgb(255, 154, 196);
|
|
// &--add {
|
|
// color: $add-color;
|
|
// &:hover{
|
|
// color: darken($add-color, 20);
|
|
// }
|
|
// }
|
|
|
|
&--remove {
|
|
color: $font-link-primary;
|
|
&:hover{
|
|
color: var(--font-link-primary-lighter-40);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__account {
|
|
width: calc(100% - #{ $actin-width });
|
|
position: relative;
|
|
height: 50px;
|
|
|
|
|
|
&--avatar {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
$max-name-width: 190px;
|
|
&--display-name {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 60px;
|
|
color: white;
|
|
|
|
max-width: $max-name-width;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&--acct {
|
|
position: absolute;
|
|
top: 26px;
|
|
left: 60px;
|
|
color: $status-secondary-color;
|
|
|
|
max-width: $max-name-width;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
} |