mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-14 23:08:07 -04:00
c006b8748c
Implements: https://github.com/alphagov/notifications-utils/pull/51 Copies the same regex. Adds some CSS to display conditional placeholders differently to normal placeholders (vertical rather that curved right-hand edge).
41 lines
1.1 KiB
SCSS
41 lines
1.1 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 9px 0 0 0 $white, inset -9px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
|
|
|
|
.sms-message-wrapper & {
|
|
box-shadow: inset 9px 0 0 0 $panel-colour, inset -9px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.placeholder-no-brackets {
|
|
@extend %placeholder;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
border-radius: 1px;
|
|
box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 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 9px 0 0 0 $white, inset -17px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
|
|
|
|
.sms-message-wrapper & {
|
|
box-shadow: inset 9px 0 0 0 $panel-colour, inset -17px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
|
|
}
|
|
|
|
}
|