PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

align badges with design

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
res/css/structures/_RoomSubList.scss
View file

@ -28,6 +28,7 @@ limitations under the License.
.mx_RoomSubList_labelContainer { .mx_RoomSubList_labelContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
margin: 8px 19px 0 0; margin: 8px 19px 0 0;
} }
@ -56,14 +57,12 @@ limitations under the License.
} }
.mx_RoomSubList_badge { .mx_RoomSubList_badge {
height: 18px; flex: 0 1 content;
border-radius: 9px; border-radius: 8px;
color: $accent-fg-color; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
vertical-align: middle; padding: 0 5px;
line-height: 18px;
padding: 0 4px;
background-color: $accent-color; background-color: $accent-color;
} }
@ -92,18 +91,6 @@ limitations under the License.
background-color: $warning-color; 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 { .mx_RoomSubList_chevron {
left: 0px; left: 0px;
pointer-events: none; pointer-events: none;

30
res/css/views/rooms/_RoomTile.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
height: 40px; height: 40px;
margin: 0; margin: 0;
padding: 2px 12px; padding: 2px 10px;
position: relative; position: relative;
background-color: $secondary-accent-color; background-color: $secondary-accent-color;
} }
@ -88,43 +88,17 @@ limitations under the License.
padding: 0px 4px 0px 4px; padding: 0px 4px 0px 4px;
z-index: 3; 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 { .mx_RoomTile_badge {
flex: 0 1 content; flex: 0 1 content;
min-width: 15px;
border-radius: 8px; border-radius: 8px;
color: $accent-fg-color; color: $accent-fg-color;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
text-align: center; padding: 0 5px;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
} }
.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_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge { .mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {