alerts: Prevent icons from spilling out of alerts.

Fixes #16911.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2020-12-28 14:33:26 -08:00
committed by Tim Abbott
parent 2ba22d273a
commit 93101c953f

View File

@@ -155,10 +155,8 @@ $alert-error-red: hsl(0, 80%, 40%);
position: relative;
/* gives room for the error icon. */
padding-left: 50px;
padding-top: 10px;
padding-bottom: 10px;
/* gives room for the error icon and the exit button. */
padding: 10px 50px;
text-shadow: none;
@@ -167,17 +165,24 @@ $alert-error-red: hsl(0, 80%, 40%);
box-shadow: 0 0 2px $alert-red;
&::before {
position: absolute;
top: 10px;
left: 12px;
float: left;
margin-left: -38px;
font-family: FontAwesome;
font-size: 1.3em;
line-height: 1;
overflow: hidden;
content: "\f071";
color: hsl(16, 60%, 55%);
}
&::after {
clear: both;
content: "";
display: table;
}
&.alert-error {
color: $alert-error-red;
border: 1px solid $alert-error-red;
@@ -189,17 +194,18 @@ $alert-error-red: hsl(0, 80%, 40%);
}
.exit {
position: absolute;
top: 10px;
right: 0;
float: right;
margin: -10px -50px -10px 0;
padding: 10px;
font-size: 2.5em;
font-weight: 300;
line-height: 1ex;
overflow: hidden;
cursor: pointer;
&::after {
padding: 10px;
content: "\d7";
}
}