mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-02 07:27:35 -04:00
085f5f9b22
You’ll quite often be landing half way down this page. So the context afforded by being able to see the phone number gives you some reassurance that you’ve landed in the right place.
76 lines
1.3 KiB
SCSS
76 lines
1.3 KiB
SCSS
$tail-angle: 20deg;
|
|
|
|
.sms-message-wrapper {
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 464px;
|
|
box-sizing: border-box;
|
|
padding: $gutter-half $gutter-half $gutter-half $gutter-half;
|
|
background: $panel-colour;
|
|
border: 1px solid $panel-colour;
|
|
border-radius: 5px;
|
|
white-space: normal;
|
|
margin: 0 0 $gutter 0;
|
|
clear: both;
|
|
word-wrap: break-word;
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -5px;
|
|
right: -20px;
|
|
border: 10px solid transparent;
|
|
border-left-width: 13px;
|
|
border-right-width: 13px;
|
|
border-bottom-color: $panel-colour;
|
|
border-left-color: $panel-colour;
|
|
transform: rotate($tail-angle);
|
|
}
|
|
|
|
}
|
|
|
|
.sms-message-inbound {
|
|
|
|
.sms-message-wrapper {
|
|
|
|
&:after {
|
|
border-left-color: transparent;
|
|
border-bottom-color: $panel-colour;
|
|
border-right-color: $panel-colour;
|
|
right: auto;
|
|
left: -20px;
|
|
transform: rotate(-$tail-angle);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.sms-message-recipient {
|
|
@include copy-19;
|
|
color: $secondary-text-colour;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
.sms-message-status {
|
|
@include core-16;
|
|
color: $secondary-text-colour;
|
|
margin: -20px $gutter-half 20px $gutter-half;
|
|
}
|
|
|
|
.sms-message-status-outbound {
|
|
text-align: right;
|
|
}
|
|
|
|
.sms-message-row {
|
|
|
|
&:focus {
|
|
outline: none;
|
|
padding-top: 120px;
|
|
margin-top: -120px;
|
|
}
|
|
|
|
}
|