mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-05 14:00:51 -04:00
be83ea36ea
Change the HTML & CSS for user-list-item's to support their content being split into 2 columns of a grid instead of the edit link being positioned absolutely. Also includes: 1. removes `<div>`s from `<ul>` (non-valid HTML) 2. split action link out from permissions list 3. split summary of folder permissions out from permissions list 4. introduces a class for blocks of text that appear when there are no items. 5. fixes tests broken by changes to HTML
89 lines
1.5 KiB
SCSS
89 lines
1.5 KiB
SCSS
$item-top-padding: govuk-spacing(3);
|
|
|
|
.user-list {
|
|
|
|
@include core-19;
|
|
margin-bottom: govuk-spacing(6);
|
|
|
|
&-item {
|
|
|
|
padding: govuk-spacing(3) 0px;
|
|
border-top: 1px solid $border-colour;
|
|
|
|
&-heading {
|
|
|
|
padding-right: govuk-spacing(3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: $secondary-text-colour; // So the ellipsis is grey
|
|
|
|
.heading-small {
|
|
color: $black;
|
|
}
|
|
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: 1px solid $border-colour;
|
|
}
|
|
|
|
& :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&-blank {
|
|
|
|
margin-bottom: govuk-spacing(3);
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-edit-link {
|
|
|
|
position: relative;
|
|
display: block;
|
|
margin: govuk-spacing(3) 0 govuk-spacing(3);
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
float: right;
|
|
margin: 0;
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
top: -1 * govuk-spacing(3) - 1;
|
|
right: 0;
|
|
bottom: -1 * govuk-spacing(3);
|
|
left: -1 * govuk-spacing(3);
|
|
|
|
background: transparent;
|
|
}
|
|
|
|
&:active:before,
|
|
&:focus:before {
|
|
border-color: $yellow;
|
|
border-style: solid;
|
|
border-width: 15px 3px;
|
|
right: -3px;
|
|
left: -3px;
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
border-width: 15px 3px 15px 15px;
|
|
left: -15px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|