Add conditional placeholder detection

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).
This commit is contained in:
Chris Hill-Scott
2016-07-12 12:48:09 +01:00
parent d380eaf060
commit c006b8748c
4 changed files with 23 additions and 5 deletions

View File

@@ -22,3 +22,19 @@
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;
}
}