mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-09 07:51:21 -04:00
4b74493b0d
Also does a tiny bit more tweaking of the vertical position to get it looking aligned correct.
60 lines
1.5 KiB
SCSS
60 lines
1.5 KiB
SCSS
%placeholder,
|
|
.placeholder {
|
|
|
|
display: inline;
|
|
background: $yellow;
|
|
color: $text-colour;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
border-radius: 20px;
|
|
box-shadow: inset 0.47em 0 0 0 $white, inset -0.47em 0 0 0 $white, inset 0 -0.15em 0 0 $white, inset 0 0.15em 0 0 $white;
|
|
|
|
.sms-message-wrapper & {
|
|
box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.47em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.placeholder-no-brackets {
|
|
@extend %placeholder;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
border-radius: 1px;
|
|
box-shadow: inset 0 -0.1em 0 0 $white, inset 0 0.1em 0 0 $white;
|
|
}
|
|
|
|
.placeholder-conditional {
|
|
|
|
@extend %placeholder;
|
|
border-radius: 0;
|
|
border-top-left-radius: 20px;
|
|
border-bottom-left-radius: 20px;
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
box-shadow: inset 0.47em 0 0 0 $white, inset -0.89em 0 0 0 $white, inset 0 -0.16em 0 0 $white, inset 0 0.16em 0 0 $white;
|
|
|
|
.sms-message-wrapper & {
|
|
box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.89em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.placeholder-redacted {
|
|
|
|
background: currentColor;
|
|
padding: 0 0.5em;
|
|
opacity: 0.8;
|
|
box-shadow: inset 0 -0.35em 0 0 $white;
|
|
position: relative;
|
|
top: 0.1em;
|
|
|
|
.sms-message-wrapper & {
|
|
box-shadow: inset 0 -0.35em 0 0 $panel-colour;
|
|
}
|
|
|
|
*:focus + p & {
|
|
box-shadow: inset 0 -0.35em 0 0 $yellow;
|
|
}
|
|
|
|
}
|