mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-19 05:53:51 -04:00
784f577c4d
It’s noticeable when clicking from row to row in the spreadsheet that the page jumps around a fair bit on load because there are a couple of Javascript-powered components. This commit makes sure: - the radio select component doesn’t change height when rendering for the first time - the scrollable table doesn’t show parts of the table that should be hidden by overflow for a fraction of second before all the JS has run - the right-hand shadow on horizontally scrollable tables doesn’t fade in on initial page load but shows at 100% opacity immediately
60 lines
856 B
SCSS
60 lines
856 B
SCSS
.radio-select {
|
|
|
|
min-height: 39px;
|
|
|
|
&-column {
|
|
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
.multiple-choice {
|
|
margin-right: 5px;
|
|
padding-right: 10px;
|
|
padding-left: 54px - 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.js-reset-button,
|
|
.js-category-button {
|
|
|
|
background: none;
|
|
text-decoration: underline;
|
|
color: $link-colour;
|
|
border: none;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: auto;
|
|
padding: 7px 20px 7px 10px;
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $link-hover-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.js-reset-button-block {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 20px 20px $gutter 57px;
|
|
}
|
|
|
|
.js-enabled & {
|
|
|
|
overflow: visible;
|
|
|
|
.multiple-choice {
|
|
display: none;
|
|
}
|
|
|
|
.js-multiple-choice {
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
|
|
}
|