scinote-web/app/assets/stylesheets/my_modules/status_flow.scss

// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorFormat
// scss-lint:disable ImportantRule

.content-pane.my-modules-protocols-index {
  .status-flow-dropdown {
    .dropdown-toggle {
      border: 0;
      color: $color-white;
      padding: .5rem .5rem .5rem 1rem;
      text-align: left;
      width: 100%;

      &.btn-not-started {
        @include not-started;
      }

      .caret {
        margin: 8px 0;
      }
    }

    &.open .dropdown-menu{
      align-items: center;
      display: grid;
      grid-template-columns: minmax(0, auto) 12px minmax(0, auto);
      padding: .5em 0 0;

      li {
        display: contents;

        > * {
          cursor: pointer;
          line-height: 2em;
          padding: .5em 1em;
        }

        &:hover > *{
          background: $color-concrete;
        }

        &.disabled {
          pointer-events: none;

          .status-name {
            background: $color-alto !important;
          }
        }
      }

      .fa-long-arrow-alt-right {
        color: $color-silver-chalice;
        padding: 1.5em 0;
        z-index: 1;
      }

      .status-container {
        display: flex;
      }

      .status-name {
        border-radius: $border-radius-tag;
        color: $color-white;
        display: inline-block;
        font-weight: bold;
        line-height: 1em;
        max-width: 100%;
        overflow: hidden;
        padding: .5em;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .btn-not-started {
        @include not-started;
      }

      .error-message {
        @include font-small;
        color: $color-silver-chalice;
        grid-column: span 3;
        line-height: 1em;
        padding: 0em 1em .5em;

        &:empty {
          display: none;
        }

        &.permission-error {
          padding: .5em 1em;
        }
      }

      #viewTaskFlow {
        border-top: $border-default;
        cursor: pointer;
        display: list-item;
        grid-column: span 3;
        line-height: 2em;
        margin-top: .5em;
        padding: .5em 1em;
      }
    }
  }
}


#statusFlowModal {
  .status-flow {
    padding: 2em;

    .status-container {
      align-items: center;
      display: grid;
      grid-template-columns: 1fr min-content 1fr;
      grid-template-rows: 28px;
      justify-content: space-around;
      position: relative;

      .current-status {
        @include font-small;
        justify-self: end;

        .fas {
          margin: 0 .5em;
        }
      }

      .status-block {
        @include font-button;
        border-radius: $border-radius-tag;
        color: $color-white;
        font-weight: bold;
        line-height: 1em;
        padding: .5em;
        white-space: nowrap;

        &.btn-not-started {
          @include not-started;
        }
      }

      .status-comment {
        @include font-small;
        color: $color-silver-chalice;
        padding-left: .5em;
      }
    }

    .connector {
      background: $color-black;
      height: 2em;
      margin: 0 auto;
      position: relative;
      width: 2px;

      &:before,
      &:after {
        border-left: .2em solid transparent;
        border-right: .2em solid transparent;
        content: '';
        display: block;
        margin-left: -.1em;
        position: absolute;
      }

      &:before {
        border-top: .2em solid $color-black;
        top: 0;
      }

      &:after {
        border-bottom: .2em solid $color-black;
        bottom: 0;
      }
    }
  }
}