notifications-admin/app/assets/stylesheets/components/message.scss

@mixin separator {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: $gutter;
  position: relative;

  &:before {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    bottom: 1px;
    right: 7px;
    width: 9px;
    height: 9px;
    margin: auto 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border: solid;
    border-width: 2px 2px 0 0;
    border-color: $secondary-text-colour;
  }
}

.message {

  &-name {
    @include bold-24;
    margin: 0;

    a {
      margin-bottom: -$gutter;
      padding-bottom: $gutter;

      &:hover {
        color: $link-hover-colour;

        .message-name-separator {
          &:before {
            border-color: $link-hover-colour;
          }
        }

      }

      &:focus {
        // Use box shadow instead of outline to avoid buggy outline
        // rendering in Firefox
        outline: none;
        box-shadow: 0 0 0 3px $yellow;
      }

      .message-name-separator {

        margin-right: -2px;
        margin-left: -2px;

        &:before {
          border-color: $link-colour;
        }
      }
    }

    &-separator {
      @include separator;
    }

  }

  &-type {
    color: $secondary-text-colour;
    margin: 0 0 $gutter-two-thirds 0;
    pointer-events: none;
  }

}

#template-list {

  margin-top: $gutter;

  &.top-gutter-5px {
    margin-top: 5px;
  }

}

.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;
          }

          &.template-list-folder:first-child {
            background-position: 0 2px;
            padding-left: 0;
            text-indent: 40px;
          }

        }

      }

    }

  }

  &-folder {

    display: inline;
    padding-left: 40px;
    background-image: file-url('folder-blue-bold.svg');
    background-repeat: no-repeat;
    background-size: auto 20px;
    background-position: 0px 4px;

    &:hover {
      background-image: file-url('folder-blue-bold-hover.svg');
    }

  }

  &-template {
    a {
      display: inline;
    }
  }

  &-empty {
    color: $secondary-text-colour;
    padding: $gutter-half 0 $gutter-one-third 0;
  }

  &-selected-counter {
    color: $secondary-text-colour;
    margin: $gutter-half 0;

    @include media(tablet) {
      position: absolute;
      right: 0;
      top: $gutter - 1px;
      margin: 0;
    }

    .content-fixed & {
      right: $gutter-half;
    }

  }

}

.folder-heading {

  .grid-row & {
    margin: $gutter-half 0 20px 0;
    word-wrap: break-word;
  }

  a,
  &-folder,
  &-subfolder {

    display: inline;
    vertical-align: top;
    background-repeat: no-repeat;
    background-size: auto 20px;
    background-position: 0px 4px;
    min-height: 30px;

  }

  &-folder {
    padding: 0 0 0 40px;
    background-image: file-url('folder-black-bold.svg');
  }

  &-folder-truncated {
    width: 0;
    padding: 0 0 0 30px;
    white-space: nowrap;
    overflow: hidden;
  }

  &-folder-root-truncated {
    max-width: 1.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  a {

    display: inline-block;
    vertical-align: top;

    &.folder-heading-folder {

      display: inline;
      background-image: file-url('folder-blue-bold.svg');
      background-position: 0px 4px;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        background-image: file-url('folder-blue-bold-hover.svg');
      }

    }

    &.folder-heading-folder-truncated {
      display: inline-block;
      background-position: 0px 2px;
    }

    &:hover {
      color: $link-hover-colour;
    }

  }

  &-separator {
    @include separator;
  }

  &-manage-link {
    display: block;
    text-align: right;
    padding: $gutter-two-thirds 0 0 0;
    position: relative;
    top: -6px;
  }

}