Make .status CSS rules more specific to fix onboarding text (#1547)
FREEBIE
This commit is contained in:
parent
b64f2969fd
commit
c2fa61d0b4
3 changed files with 18 additions and 17 deletions
|
@ -391,23 +391,24 @@ li.entry .error-icon-container {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
// There's a p.status used in the onboarding screen, so this needs to be more specific
|
||||||
|
span.status {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}
|
}
|
||||||
.sent .status {
|
.sent span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include color-svg('../images/check.svg', black);
|
@include color-svg('../images/check.svg', black);
|
||||||
}
|
}
|
||||||
.delivered .status {
|
.delivered span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include color-svg('../images/double-check.svg', black);
|
@include color-svg('../images/double-check.svg', black);
|
||||||
}
|
}
|
||||||
.read .status {
|
.read span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include color-svg('../images/double-check.svg', $blue);
|
@include color-svg('../images/double-check.svg', $blue);
|
||||||
}
|
}
|
||||||
.pending .status {
|
.pending span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: none;
|
background: none;
|
||||||
&:before { content: '...'; }
|
&:before { content: '...'; }
|
||||||
|
|
|
@ -125,15 +125,15 @@ $text-dark_l2: darken($text-dark, 30%);
|
||||||
@include color-svg('../images/verified-check.svg', $text-dark);
|
@include color-svg('../images/verified-check.svg', $text-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.sent .status {
|
.sent span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include color-svg('../images/check.svg', white);
|
@include color-svg('../images/check.svg', white);
|
||||||
}
|
}
|
||||||
.delivered .status {
|
.delivered span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include color-svg('../images/double-check.svg', white);
|
@include color-svg('../images/double-check.svg', white);
|
||||||
}
|
}
|
||||||
.read .status {
|
.read span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include color-svg('../images/double-check.svg', $blue);
|
@include color-svg('../images/double-check.svg', $blue);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1393,32 +1393,32 @@ li.entry .error-icon-container {
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
white-space: nowrap; }
|
white-space: nowrap; }
|
||||||
|
|
||||||
.status {
|
span.status {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px; }
|
height: 18px; }
|
||||||
|
|
||||||
.sent .status {
|
.sent span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-mask: url("../images/check.svg") no-repeat center;
|
-webkit-mask: url("../images/check.svg") no-repeat center;
|
||||||
-webkit-mask-size: 100%;
|
-webkit-mask-size: 100%;
|
||||||
background-color: black; }
|
background-color: black; }
|
||||||
|
|
||||||
.delivered .status {
|
.delivered span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-mask: url("../images/double-check.svg") no-repeat center;
|
-webkit-mask: url("../images/double-check.svg") no-repeat center;
|
||||||
-webkit-mask-size: 100%;
|
-webkit-mask-size: 100%;
|
||||||
background-color: black; }
|
background-color: black; }
|
||||||
|
|
||||||
.read .status {
|
.read span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-mask: url("../images/double-check.svg") no-repeat center;
|
-webkit-mask: url("../images/double-check.svg") no-repeat center;
|
||||||
-webkit-mask-size: 100%;
|
-webkit-mask-size: 100%;
|
||||||
background-color: #2090ea; }
|
background-color: #2090ea; }
|
||||||
|
|
||||||
.pending .status {
|
.pending span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: none; }
|
background: none; }
|
||||||
.pending .status:before {
|
.pending span.status:before {
|
||||||
content: '...'; }
|
content: '...'; }
|
||||||
|
|
||||||
.message-container,
|
.message-container,
|
||||||
|
@ -2347,17 +2347,17 @@ li.entry .error-icon-container {
|
||||||
-webkit-mask: url("../images/verified-check.svg") no-repeat center;
|
-webkit-mask: url("../images/verified-check.svg") no-repeat center;
|
||||||
-webkit-mask-size: 100%;
|
-webkit-mask-size: 100%;
|
||||||
background-color: #CCCCCC; }
|
background-color: #CCCCCC; }
|
||||||
.android-dark .sent .status {
|
.android-dark .sent span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-mask: url("../images/check.svg") no-repeat center;
|
-webkit-mask: url("../images/check.svg") no-repeat center;
|
||||||
-webkit-mask-size: 100%;
|
-webkit-mask-size: 100%;
|
||||||
background-color: white; }
|
background-color: white; }
|
||||||
.android-dark .delivered .status {
|
.android-dark .delivered span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-mask: url("../images/double-check.svg") no-repeat center;
|
-webkit-mask: url("../images/double-check.svg") no-repeat center;
|
||||||
-webkit-mask-size: 100%;
|
-webkit-mask-size: 100%;
|
||||||
background-color: white; }
|
background-color: white; }
|
||||||
.android-dark .read .status {
|
.android-dark .read span.status {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-mask: url("../images/double-check.svg") no-repeat center;
|
-webkit-mask: url("../images/double-check.svg") no-repeat center;
|
||||||
-webkit-mask-size: 100%;
|
-webkit-mask-size: 100%;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue