CSS for device blocking

A bunch of updates to the device info:

* format as a table
* make the buttons green, because the old way was super confusing
* instead make the status indicator red/orange/green.
This commit is contained in:
Richard van der Hoff 2016-06-23 17:32:33 +01:00
parent 4bc4292ceb
commit 2ca9d87b95
2 changed files with 26 additions and 8 deletions

View file

@ -16,18 +16,18 @@ limitations under the License.
.mx_MemberDeviceInfo { .mx_MemberDeviceInfo {
font-size: 12px; font-size: 12px;
margin-top: 5px; display: table-row;
height: 17px;
} }
.mx_MemberDeviceInfo div { .mx_MemberDeviceInfo div {
display: inline; display: table-cell;
margin-right: 5px;
} }
.mx_MemberDeviceInfo_textButton { .mx_MemberDeviceInfo_textButton {
color: #fff; color: #fff;
height: 20px; background-color: #76cfa6;
border-radius: 20px; border-radius: 17px;
text-align: center; text-align: center;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
@ -35,10 +35,23 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
.mx_MemberDeviceInfo_verify { .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
color: #fff;
width: 17px;
border-radius: 17px;
text-align: center;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
background-color: #76cfa6; background-color: #76cfa6;
} }
.mx_MemberDeviceInfo_unverify { .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
background-color: #eca46f;
}
.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
background-color: #e55e5e; background-color: #e55e5e;
} }

View file

@ -72,3 +72,8 @@ limitations under the License.
margin-left: 8px; margin-left: 8px;
line-height: 23px; line-height: 23px;
} }
.mx_MemberInfo_devices {
display: table;
border-spacing: 5px;
}