mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-04 06:58:26 -04:00
8a5e7a00dc
It makes them get out of alignment with other things in sticky footers. The problem of buttons getting too close to the bottom of the window can be fixed with some min-height on the container instead.
165 lines
2.8 KiB
SCSS
165 lines
2.8 KiB
SCSS
// CSS adapted from
|
|
// https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling
|
|
|
|
$sticky-padding: $gutter * 2 / 3;
|
|
|
|
.js-stick-at-top-when-scrolling,
|
|
.js-stick-at-bottom-when-scrolling {
|
|
|
|
overflow: hidden;
|
|
margin-left: -$gutter-half;
|
|
padding: 10px 0 0 $gutter-half;
|
|
position: relative;
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
|
|
legend {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.back-to-top-link {
|
|
position: absolute;
|
|
top: $gutter;
|
|
right: $gutter-half;
|
|
opacity: 0;
|
|
transition: opacity 0.1s ease-in-out;
|
|
}
|
|
|
|
}
|
|
|
|
.js-stick-at-top-when-scrolling {
|
|
|
|
margin-top: -10px;
|
|
margin-bottom: 5px;
|
|
top: 5px;
|
|
transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
|
|
|
|
}
|
|
|
|
.js-stick-at-bottom-when-scrolling {
|
|
|
|
transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
|
|
padding: $sticky-padding 0 $sticky-padding $gutter-half;
|
|
margin-top: -$sticky-padding;
|
|
min-height: 40px;
|
|
|
|
& + .js-stick-at-bottom-when-scrolling {
|
|
margin-top: ($sticky-padding * 2) * -1;
|
|
}
|
|
|
|
fieldset:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.page-footer {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.page-footer-delete-link-without-button {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.notification-status {
|
|
margin: 0;
|
|
}
|
|
|
|
.button-secondary {
|
|
margin-right: $gutter-half;
|
|
}
|
|
|
|
}
|
|
|
|
.content-fixed,
|
|
.content-fixed-onload {
|
|
|
|
position: fixed;
|
|
background: $white;
|
|
z-index: 100;
|
|
padding-right: $gutter-half;
|
|
margin-top: 0;
|
|
|
|
.back-to-top-link {
|
|
opacity: 1;
|
|
transition: opacity 0.6s ease-in-out;
|
|
}
|
|
|
|
}
|
|
|
|
.js-stick-at-top-when-scrolling.content-fixed,
|
|
.js-stick-at-top-when-scrolling.content-fixed-onload {
|
|
|
|
top: 0;
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
.js-stick-at-top-when-scrolling.content-fixed__top {
|
|
|
|
border-bottom: 1px solid $border-colour;
|
|
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
|
|
|
|
}
|
|
|
|
.js-stick-at-top-when-scrolling.content-fixed {
|
|
|
|
transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
|
|
|
|
}
|
|
|
|
.js-stick-at-bottom-when-scrolling.content-fixed,
|
|
.js-stick-at-bottom-when-scrolling.content-fixed-onload {
|
|
|
|
top: auto; // cancel `top: 0;` inherited from govuk-template
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
.js-stick-at-bottom-when-scrolling.content-fixed__bottom {
|
|
|
|
border-top: 1px solid $border-colour;
|
|
box-shadow: 0 -2px 0 0 rgba($border-colour, 0.2);
|
|
|
|
}
|
|
|
|
.js-stick-at-bottom-when-scrolling.content-fixed {
|
|
|
|
transition: background 0.6s ease-in-out;
|
|
|
|
}
|
|
|
|
.js-stick-at-bottom-when-scrolling-loaded.content-fixed-onload {
|
|
|
|
transition: none;
|
|
|
|
}
|
|
|
|
.shim {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.js-cancel {
|
|
|
|
display: inline-block;
|
|
padding: 10px 10px 5px 10px;
|
|
margin-top: -10px;
|
|
margin-right: -10px;
|
|
text-decoration: underline;
|
|
color: $govuk-blue;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $link-hover-colour;
|
|
}
|
|
|
|
&:focus,
|
|
&:active, {
|
|
background: $yellow;
|
|
color: $govuk-blue;
|
|
outline: none;
|
|
}
|
|
|
|
}
|