diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index 21501452a..a2f148fc3 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -58,14 +58,6 @@ p, box-shadow: none !important; } -.govuk-checkboxes__label::after { - top: 13px; - left: 9px; - width: 22px; - height: 11px; -} - -.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before, .multiple-choice [type="radio"]:focus + label::before { box-shadow: 0 0 0 3px color("blue-40v"); } @@ -97,10 +89,6 @@ td.table-empty-message { font-family: family("sans"); } -.govuk-inset-text { - border-color: color("blue-40v"); -} - .usa-dark-background .pill-item__label { color: white; text-decoration: none !important; @@ -374,3 +362,97 @@ td.table-empty-message { details form { box-sizing:border-box; } + +// Textbox highlight + +.textbox-highlight { + + &-wrapper { + position: relative; + } + + &-textbox { + resize: none; + z-index: 20; + background: none; + } + + &-textbox, + &-background, + &-foreground, + &-mask { + font-size: units(2); + 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: units(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 { + background-color: #fff; + position: relative; + &:after { + content: ""; + background-color: color("yellow-20v"); + border: 1px solid color("yellow-20v"); + display: block; + position: absolute; + top: 0; + left: 5px; + right: 6px; + height: 100%; + border-radius: 7px; + } + } + + } +} + +.textbox-help-link { + margin: 10px 0 0 0; +} + +.textbox-right-aligned { + text-align: right; +} + +.extra-tracking .usa-input { + font-size: units(2); + padding-left: 5px; + letter-spacing: 0.04em; +} + +// .textbox-colour-preview { +// @include govuk-media-query($from: desktop) { +// width: 38px; +// height: 38px; +// margin-left: 5px; +// border-radius: 50%; +// box-shadow: inset 0 0 0 1px rgba(govuk-colour("black"), 0.2); +// display: inline-block; +// vertical-align: top; +// transition: background 0.3s ease-out; +// } +// } \ No newline at end of file diff --git a/app/templates/components/components/alert/template.njk b/app/templates/components/components/alert/template.njk index ba9d9b415..85d40a785 100644 --- a/app/templates/components/components/alert/template.njk +++ b/app/templates/components/components/alert/template.njk @@ -1,17 +1,18 @@ -{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%} - - - -
- Lorem ipsum dolor sit amet, - consectetur adipiscing - elit, sed do eiusmod. + {{params.text}}
+ {{params.text}} +
+