Apply new design to highlighted tags and add toggle mechanic

This commit is contained in:
Michael Telatynski 2019-12-19 16:54:30 +00:00
parent a13ee490e8
commit 1c31fd3413
2 changed files with 16 additions and 17 deletions

View file

@ -68,7 +68,7 @@ limitations under the License.
}
.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
height: 40px;
padding: 5px 0 4px 0;
padding: 10px 0 9px 0;
}
.mx_TagPanel .mx_TagTile {
@ -82,21 +82,15 @@ limitations under the License.
// opacity: 1;
}
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
.mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
content: '';
height: 56px;
background-color: $accent-color;
border-radius: 40px;
/* In case this is a "initial" avatar */
display: block;
height: 40px;
width: 40px;
}
.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
border: 3px solid $accent-color;
height: 40px;
width: 40px;
box-sizing: border-box;
width: 5px;
position: absolute;
left: -15px;
border-radius: 0 2px 2px 0;
top: -8px; // (56 - 40)/2
}
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {