mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-04 05:08:25 -04:00
a9b7a0d887
When mode === 'dialog', sticky elements are stacked so we need to apply the box shadow to the top (when sticking to the bottom edge) and bottom (when sticking to the top edge) elements in the stack. From what I can see, we need the version of `nth-child` that supports targeting by selector. As of this date, support for this is only in Safari: https://caniuse.com/#feat=css-nth-child-of Until we can use this version of `nth-child`, we need to use JS to apply the styles.
159 lines
2.7 KiB
SCSS
159 lines
2.7 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|