mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-06 06:20:53 -04:00
4b305376f7
Being able to see how many things you have selected gives you positive feedback that reinforces that what you’ve done has been recognised. It helps you understand the implications of your actions (ie you see ‘3 selected’ before you press the ‘Move’ button). And it gives you an escape hatch the get out of the state you’re in by providing the ‘Clear’ button. We also found in prototyping that having a ‘Nothing selected’ message helps draws people’s attention to the checkboxes when they first encounter the folders feature. This commit implements the counter and the cancel button. It tries to follow the existing patterns for this module.
183 lines
2.8 KiB
SCSS
183 lines
2.8 KiB
SCSS
.message {
|
|
|
|
&-name {
|
|
@include bold-24;
|
|
margin: 0;
|
|
|
|
a {
|
|
display: inline;
|
|
margin-bottom: -$gutter;
|
|
padding-bottom: $gutter;
|
|
|
|
&:focus {
|
|
|
|
// Use box shadow instead of outline to avoid buggy outline
|
|
// rendering in Firefox
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px $yellow;
|
|
|
|
@include ie-lte(8) {
|
|
// Box shadow is not supported in IE8
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
&-separator {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
color: $secondary-text-colour;
|
|
padding: 0 4px 0 5px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
}
|
|
|
|
&-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;
|
|
}
|
|
|
|
}
|
|
|
|
&-hidden-by-default {
|
|
display: none;
|
|
}
|
|
|
|
&-without-ancestors {
|
|
|
|
.message-name {
|
|
|
|
a {
|
|
display: block;
|
|
|
|
&:first-child {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-folder {
|
|
|
|
a:first-child {
|
|
|
|
display: inline-block;
|
|
text-indent: 40px;
|
|
background-image: file-url('folder-blue-bold.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: auto 20px;
|
|
background-position: 0px 2px;
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('folder-blue-bold.png');
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-empty {
|
|
color: $secondary-text-colour;
|
|
padding: $gutter-half 0 $gutter-one-third 0;
|
|
}
|
|
|
|
&-selected-counter {
|
|
position: absolute;
|
|
right: $gutter-half;
|
|
top: $gutter - 1px;
|
|
color: $secondary-text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.folder-heading {
|
|
|
|
.column-main>.grid-row:first-child &.heading-medium {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
|
|
a,
|
|
&-folder,
|
|
&-subfolder {
|
|
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 5px 0 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 38px auto;
|
|
background-position: 0 1px;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
padding-top: 5px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
&.folder-heading-folder {
|
|
|
|
padding: 5px 0 0 60px;
|
|
background-image: file-url('folder-blue.svg');
|
|
max-width: 33%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('folder-blue.png');
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-separator {
|
|
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
color: $secondary-text-colour;
|
|
padding: 5px 4px 0 5px;
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
&-manage-link {
|
|
display: block;
|
|
text-align: right;
|
|
padding: ($gutter - 2px) 0 0 0;
|
|
}
|
|
|
|
}
|