Apply lipstick to hidden image design

This commit is contained in:
Travis Ralston 2019-10-01 17:00:01 -06:00
parent daef5f7574
commit 4b0596b6b7
5 changed files with 71 additions and 38 deletions

View file

@ -19,21 +19,6 @@ limitations under the License.
margin-right: 34px;
}
.mx_MImageBody_hidden {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
text-align: center;
border: 1px dashed $input-border-color;
// To center the text in the middle of the frame
display: flex;
align-items: center;
justify-content: center;
}
.mx_MImageBody_thumbnail {
position: absolute;
width: 100%;
@ -74,3 +59,36 @@ limitations under the License.
color: $imagebody-giflabel-color;
pointer-events: none;
}
.mx_HiddenImagePlaceholder {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
// To center the text in the middle of the frame
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
background-color: $header-panel-bg-color;
.mx_HiddenImagePlaceholder_button {
color: $accent-color;
img {
margin-right: 8px;
}
span {
vertical-align: text-bottom;
}
}
}
.mx_EventTile:hover .mx_HiddenImagePlaceholder {
background-color: $primary-bg-color;
}