mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 16:48:25 -04:00
b317bd7a0b
This makes its positioning consistent with the previous page in the one-off sending journey. It gives us more space to put information about the status of the letter above the preview of the letter.
117 lines
2.1 KiB
SCSS
117 lines
2.1 KiB
SCSS
// CSS adapted from
|
|
// https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling
|
|
|
|
.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;
|
|
}
|
|
|
|
.back-to-top-link {
|
|
|
|
position: absolute;
|
|
top: $gutter;
|
|
right: $gutter-half;
|
|
opacity: 0;
|
|
transition: opacity 0.1s ease-in-out;
|
|
|
|
@include ie-lte(8) {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.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 {
|
|
|
|
$vertical-padding: $gutter * 2 / 3;
|
|
|
|
transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
|
|
padding: $vertical-padding 0 $vertical-padding $gutter-half;
|
|
margin-top: -$vertical-padding;
|
|
|
|
.page-footer {
|
|
margin-bottom: 0;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.notification-status {
|
|
margin: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.content-fixed,
|
|
.content-fixed-onload {
|
|
|
|
position: fixed;
|
|
background: $white;
|
|
z-index: 100;
|
|
padding-right: $gutter-half;
|
|
|
|
.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;
|
|
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;
|
|
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;
|
|
}
|