Sha256: 9c211195d194516272b6633e3f5ed8628e61f14b5a5d9327808aef139469424b

Contents?: true

Size: 1.11 KB

Versions: 55

Compression:

Stored size: 1.11 KB

Contents

////
/// @group helpers/accessibility
////

/// Focused text
///
/// Provides an outline to clearly indicate when the target element is focused.
/// Used for interactive text-based elements.
///
/// @access public

@mixin govuk-focused-text {
  // When colours are overridden, for example when users have a dark mode,
  // backgrounds and box-shadows disappear, so we need to ensure there's a
  // transparent outline which will be set to a visible colour.

  // Since Internet Explorer 8 does not support box-shadow, we want to force the
  // user-agent outlines
  @include _govuk-not-ie8 {
    outline: $govuk-focus-width solid transparent;
  }
  color: $govuk-focus-text-colour;
  background-color: $govuk-focus-colour;
  box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
  // When link is focussed, hide the default underline since the
  // box shadow adds the "underline"
  text-decoration: none;

  // When a focused box is broken by e.g. a line break, ensure that the
  // box-shadow is applied to each fragment independently.
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

Version data entries

55 entries across 55 versions & 4 rubygems

Version Path
govuk_tech_docs-3.5.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_tech_docs-3.4.5 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.3.1 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.3.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.2.4 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.2.3 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.2.2 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.2.1 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.2.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.1.1 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.1.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-37.0.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-36.1.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-36.0.3 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-36.0.2 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-36.0.1 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-36.0.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-35.23.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-35.22.0 node_modules/govuk-frontend/govuk/helpers/_focused.scss
govuk_publishing_components-35.21.4 node_modules/govuk-frontend/govuk/helpers/_focused.scss