mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-26 16:48:29 -04:00
32c36bf70b
Currently if there’s nothing in a folder you just get an empty page. This looks a bit broken, or like the page hasn’t finished loading. This commit adds a message to the page to show that it’s intentionally blank. The message is contextual based on type of template, because there might be templates in the current folder, even if you can’t see them at the moment (because you’re filtering).
125 lines
1.8 KiB
SCSS
125 lines
1.8 KiB
SCSS
.message {
|
|
|
|
&-name {
|
|
@include bold-24;
|
|
margin: 0;
|
|
|
|
a {
|
|
display: block;
|
|
margin-bottom: -$gutter;
|
|
padding-bottom: $gutter;
|
|
}
|
|
|
|
}
|
|
|
|
&-type {
|
|
color: $secondary-text-colour;
|
|
margin: 0 0 $gutter-two-thirds 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
}
|
|
|
|
#template-list {
|
|
margin-top: $gutter;
|
|
}
|
|
|
|
.template-list {
|
|
|
|
&-item {
|
|
|
|
&-with-checkbox {
|
|
|
|
position: relative;
|
|
padding-left: $gutter * 2;
|
|
|
|
.multiple-choice {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-folder {
|
|
|
|
a {
|
|
text-indent: 40px;
|
|
background-image: file-url('folder-blue-bold.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: auto 20px;
|
|
background-position: 0px 2px;
|
|
}
|
|
|
|
}
|
|
|
|
&-empty {
|
|
color: $secondary-text-colour;
|
|
padding: $gutter-half 0 $gutter-one-third 0;
|
|
}
|
|
|
|
}
|
|
|
|
.folder-heading {
|
|
|
|
.column-main>.grid-row:first-child &.heading-medium {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
|
|
a:first-child,
|
|
&-folder {
|
|
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 5px 0 0 60px;
|
|
background-repeat: no-repeat;
|
|
background-size: 38px auto;
|
|
background-position: 0 1px;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
padding-top: 5px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
&:first-child {
|
|
background-image: file-url('folder-blue.svg');
|
|
max-width: 33%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
}
|
|
|
|
&-folder {
|
|
|
|
padding-left: 0;
|
|
|
|
&:first-child {
|
|
background-image: file-url('folder-black.svg');
|
|
padding-left: $gutter * 2;
|
|
}
|
|
|
|
}
|
|
|
|
&-separator {
|
|
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
color: $secondary-text-colour;
|
|
padding: 5px 4px 0 5px;
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
|
|
}
|