align badges with design

This commit is contained in:
Bruno Windels 2018-11-05 10:35:38 +01:00
parent 1d77a67683
commit 010f077092
2 changed files with 6 additions and 45 deletions

View file

@ -28,6 +28,7 @@ limitations under the License.
.mx_RoomSubList_labelContainer {
display: flex;
flex-direction: row;
align-items: center;
flex: 0 0 auto;
margin: 8px 19px 0 0;
}
@ -56,14 +57,12 @@ limitations under the License.
}
.mx_RoomSubList_badge {
height: 18px;
border-radius: 9px;
flex: 0 1 content;
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
font-size: 12px;
vertical-align: middle;
line-height: 18px;
padding: 0 4px;
padding: 0 5px;
background-color: $accent-color;
}
@ -92,18 +91,6 @@ limitations under the License.
background-color: $warning-color;
}
/* This is the bottom of the speech bubble */
.mx_RoomSubList_badgeHighlight:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
}
.mx_RoomSubList_chevron {
left: 0px;
pointer-events: none;

View file

@ -21,7 +21,7 @@ limitations under the License.
cursor: pointer;
height: 40px;
margin: 0;
padding: 2px 12px;
padding: 2px 10px;
position: relative;
background-color: $secondary-accent-color;
}
@ -88,43 +88,17 @@ limitations under the License.
padding: 0px 4px 0px 4px;
z-index: 3;
}
/* Hide the bottom of speech bubble */
.mx_RoomTile_highlight .mx_RoomTile_badge:after {
display: none;
}
}
/* This is the bottom of the speech bubble */
.mx_RoomTile_highlight .mx_RoomTile_badge:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
}
.mx_RoomTile_badge {
flex: 0 1 content;
min-width: 15px;
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
font-size: 12px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
padding: 0 5px;
}
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed .mx_RoomTile_badge {
letter-spacing: 0.1em;
opacity: 1;
}
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {