Make .status CSS rules more specific to fix onboarding text (#1547)

FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-10-06 17:04:39 -07:00 committed by GitHub
parent b64f2969fd
commit c2fa61d0b4
3 changed files with 18 additions and 17 deletions

View file

@ -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: '...'; }

View file

@ -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);
} }

View file

@ -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%;