mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-30 12:18:19 -04:00
0971c0a3d8
The enhancedTextbox component has an element that sits in front of the textbox and draws the highlights over the text. This element has a 2px border so it's dimensions match those of the textbox. This border has a colour of 'transparent' by default, to hide it from view but this is overridden in high contrast modes to match the text colour. This adds some CSS targeting high contrast modes which sets it to match the colour of the background, making it invisible again.
82 lines
1.5 KiB
SCSS
82 lines
1.5 KiB
SCSS
.textbox-highlight {
|
|
|
|
$tag-background: rgba($light-blue, 0.6);
|
|
|
|
&-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&-textbox {
|
|
resize: none;
|
|
z-index: 20;
|
|
background: none;
|
|
}
|
|
|
|
&-textbox,
|
|
&-background,
|
|
&-foreground,
|
|
&-mask {
|
|
font-size: 19px;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
&-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
color: transparent;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
border: 2px solid transparent;
|
|
padding-bottom: govuk-spacing(3);
|
|
z-index: 10;
|
|
|
|
// transparent borders become visible in high contrast modes so set to match background
|
|
@media (-ms-high-contrast: active), (forced-colors: active) {
|
|
border-color: Canvas;
|
|
}
|
|
|
|
.placeholder,
|
|
.placeholder-conditional {
|
|
color: transparent;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.textbox-help-link {
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
.textbox-right-aligned {
|
|
text-align: right;
|
|
}
|
|
|
|
.extra-tracking .govuk-input {
|
|
@include core-19($tabular-numbers: true);
|
|
padding-left: 5px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.textbox-colour-preview {
|
|
@include media(desktop) {
|
|
width: 38px;
|
|
height: 38px;
|
|
margin-left: 5px;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 0 0 1px rgba($black, 0.2);
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
transition: background 0.3s ease-out;
|
|
}
|
|
}
|