mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-20 14:29:51 -04:00
aa22568c64
We weren’t calculating the height quite right; we were trying to compensate for something that should have been compensated for in the `stick-at-top-when-scrolling` code. Add the 5px to the shim there is required because we’re adding it to the element that the shim in replacing.
58 lines
1.1 KiB
SCSS
58 lines
1.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 {
|
|
|
|
overflow: hidden;
|
|
margin-left: -$gutter-half;
|
|
margin-top: -10px;
|
|
margin-bottom: 5px;
|
|
padding: 10px 0 0 $gutter-half;
|
|
position: relative;
|
|
top: 5px;
|
|
transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.content-fixed {
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
background: $white;
|
|
z-index: 100;
|
|
margin-top: 0;
|
|
padding-right: $gutter-half;
|
|
border-bottom: 1px solid $border-colour;
|
|
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
|
|
transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
|
|
|
|
.back-to-top-link {
|
|
opacity: 1;
|
|
transition: opacity 0.6s ease-in-out;
|
|
}
|
|
|
|
}
|
|
|
|
.shim {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|