Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Exit this page: Add attached keyboard help text #3268

Closed
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
EtP button layout tweaks and fixes
Removes use of inline-block/inline-flex. These were redundant as
the EtP button container is either full-width (mobile) or floated
(tablet, desktop). In both situations, `display: block` is either
desirable or enforced by the browser due to the float.

Curiously, having the `@supports` query appear before the `@media`
query seemed to be the only reason styles were broken on IE—the
`@media` query was being ignored completely. Simply swapping them
around fixed the IE layout weirdness.
querkmachine committed Feb 9, 2023
commit fc974042c1e5df2a6949bf02b93d43c4a0f43a86
15 changes: 7 additions & 8 deletions src/govuk/components/exit-this-page/_index.scss
Original file line number Diff line number Diff line change
@@ -2,27 +2,26 @@

@include govuk-exports("govuk/component/exit-this-page") {
.govuk-exit-this-page {
@include govuk-responsive-padding(8, "bottom");
z-index: 1000;
top: 0;
left: 0;
width: 100%;
querkmachine marked this conversation as resolved.
Show resolved Hide resolved
@supports (position: sticky) {
@include govuk-responsive-padding(8, "bottom");
position: sticky;
}

@include govuk-media-query($from: tablet) {
display: inline-block;
display: inline-flex;
flex-direction: column;
right: 0;
left: auto;
width: auto;
float: right;
}

@supports (position: sticky) {
position: sticky;
}
}

.govuk-exit-this-page__button {
width: 100%;
margin-bottom: 0;
}

@@ -85,7 +84,7 @@
border-radius: 4px;
}

@include mq($from: tablet) {
@include govuk-media-query($from: tablet) {
display: block;
}
}