mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-08 10:28:57 -04:00
eaa72074db
This commit makes the ‘how to do placeholders’ box part of the tour, with the same blue background. It also adds some Javascript enhancement so that: - it responds to the contents of the message template - has a ‘show me’ link which inserts ‘Dear ((name))’ into the template contents textbox We’ve found that this has helped people understnad what placeholders are, and how to do them.
93 lines
1.3 KiB
SCSS
93 lines
1.3 KiB
SCSS
.textbox-highlight {
|
|
|
|
$tag-background: rgba($light-blue, 0.6);
|
|
|
|
&-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&-textbox {
|
|
resize: none;
|
|
z-index: 20;
|
|
background: none;
|
|
height: 200px;
|
|
}
|
|
|
|
&-textbox,
|
|
&-background,
|
|
&-foreground,
|
|
&-mask {
|
|
@include core-19;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&-background,
|
|
&-foreground,
|
|
&-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
color: transparent;
|
|
white-space: pre-wrap;
|
|
border: 2px solid transparent;
|
|
padding-bottom: $gutter;
|
|
}
|
|
|
|
&-background {
|
|
|
|
z-index: 10;
|
|
|
|
.tag {
|
|
background: $light-blue;
|
|
border-radius: 3px;
|
|
color: transparent;
|
|
display: inline;
|
|
}
|
|
|
|
}
|
|
|
|
&-mask {
|
|
|
|
z-index: 30;
|
|
|
|
.tag {
|
|
color: $white;
|
|
text-shadow: 0 1px 0 $light-blue, 0 -1px 0 $light-blue;
|
|
position: relative;
|
|
display: inline;
|
|
overflow: hidden;
|
|
}
|
|
|
|
}
|
|
|
|
&-foreground {
|
|
|
|
z-index: 40;
|
|
|
|
.tag {
|
|
color: transparent;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
display: inline;
|
|
box-shadow: inset 0.75em 0 0 0 $tag-background, inset -0.75em 0 0 0 $tag-background;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.textbox-help-link {
|
|
margin: 5px 0 0 0;
|
|
}
|
|
|
|
.textbox-right-aligned {
|
|
text-align: right;
|
|
}
|