app/assets/stylesheets/views/webauthn.scss

.webauthn__no-js {
  .js-enabled & {
    display: none;
  }
}

.webauthn__api-missing {
  display: none;

  .js-enabled & {
    display: block;
  }

  .js-enabled.webauthn-api-enabled & {
    display: none;
  }
}

.webauthn__api-required {
  display: none;

  .webauthn-api-enabled & {
    display: block;
  }
}

.webauthn-illustration {

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: govuk-spacing(6) auto 0 auto;
  padding: 0 govuk-spacing(9) 0 govuk-spacing(9);

  @include govuk-media-query($from: tablet) {
    margin: govuk-spacing(9) auto 0 auto;
    padding: 0;
  }

}
Prevent registration if WebAuthn is not supported This hides the "Register" button and shows an error that's specific to one of two ways a browser may not support WebAuthn: - JavaScript is disabled (there's no possible fallback for this). - WebAuthn API is not supported (e.g. on Internet Explorer). We could add a similar check for the API in the JS code to handle the button click, but hiding it seems like enough protection. In order to avoid elements flashing when the page loads, this uses a view macro to embed a script at the start of the body element, which is the same approach used for the "js-enabled" class flag [1]. Tested with Chrome and IE 11. [1]: https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/template.njk#L31 2021-05-13 14:52:32 +01:00			`.webauthn__no-js {`
			`.js-enabled & {`
			`display: none;`
			`}`
			`}`

			`.webauthn__api-missing {`
			`display: none;`

			`.js-enabled & {`
			`display: block;`
			`}`

			`.js-enabled.webauthn-api-enabled & {`
			`display: none;`
			`}`
			`}`

			`.webauthn__api-required {`
			`display: none;`

			`.webauthn-api-enabled & {`
			`display: block;`
			`}`
			`}`
Make image display smaller on mobile 2021-05-28 13:52:20 +01:00
			`.webauthn-illustration {`

Rewrite media queries to be mobile-first Also adds height: 100% which forces the SVG to scale, rather than just setting width which widens the viewbox. 2021-09-30 14:18:27 +01:00			`box-sizing: border-box;`
Give WebAuthn illustration a fixed size The browser uses the `width` and `height` attributes of the image tag to allocate space on the page for the image. If these aren’t provided then the browser will assume the image takes up no space, until it’s downloaded it and had a look at what the file’s dimensions are. This causes the layout of the page to jump once the image downloads. `149 × 150px` is the native size of the image. But we don’t want it to display at that size, so this commit also adds some extra CSS which keeps it looking the same, namely: - the full width of the 1/4 page column on desktop - the full width of the column minus a `40px` gutter either side on mobile (by using `box-sizing: border-box` the `40px` of padding is subtracted from the 100% width, rather than added to it) 2021-09-03 16:00:00 +01:00			`width: 100%;`
Rewrite media queries to be mobile-first Also adds height: 100% which forces the SVG to scale, rather than just setting width which widens the viewbox. 2021-09-30 14:18:27 +01:00			`height: 100%;`
			`margin: govuk-spacing(6) auto 0 auto;`
			`padding: 0 govuk-spacing(9) 0 govuk-spacing(9);`
Make image display smaller on mobile 2021-05-28 13:52:20 +01:00
Put media query after default CSS Specificity means that the media query will always override, but this is more obvious with the order this way around. 2021-09-30 15:07:22 +01:00			`@include govuk-media-query($from: tablet) {`
			`margin: govuk-spacing(9) auto 0 auto;`
			`padding: 0;`
			`}`

Make image display smaller on mobile 2021-05-28 13:52:20 +01:00			`}`