Iterate to match design on Zeplin

This commit is contained in:
Michael Telatynski 2019-12-19 20:53:34 +00:00
parent b2249d0561
commit d9ea9b4ad3
5 changed files with 30 additions and 34 deletions

View file

@ -26,11 +26,15 @@ limitations under the License.
.mx_CustomRoomTagPanel_scroller {
max-height: inherit;
display: flex;
flex-direction: column;
align-items: center;
}
.mx_CustomRoomTagPanel .mx_AccessibleButton {
margin: 9px auto;
width: 40px;
position: relative;
}
.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
@ -39,7 +43,13 @@ limitations under the License.
height: 40px;
}
.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
border: 3px solid $warning-color;
border-radius: 40px;
.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before {
content: '';
height: 56px;
background-color: $accent-color-alt;
width: 5px;
position: absolute;
left: -15px;
border-radius: 0 3px 3px 0;
top: -8px; // (56 - 40)/2
}

View file

@ -87,7 +87,7 @@ limitations under the License.
height: 40px;
width: 40px;
border-radius: 20px;
background-color: $button-primary-fg-color;
background-color: $tagpanel-button-color;
opacity: 0.11;
position: relative;
/* overwrite mx_RoleButton inline-block */
@ -96,7 +96,7 @@ limitations under the License.
&::before {
mask-image: url('$(res)/img/feather-customised/plus.svg');
mask-position: center;
background-color: $tagpanel-bg-color;
background-color: $button-primary-fg-color;
mask-repeat: no-repeat;
content: '';
position: absolute;