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

@import "constants";
@import "mixins";

.content-pane.my-modules-protocols-index {
  .status-flow-dropdown {
    .dropdown-toggle {
      color: $color-white;
      text-align: left;
      width: 15em;

      .caret {
        margin: 8px 0;
      }
    }

    .dropdown-menu > li {
      line-height: 35px;
    }
  }
}


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

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

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

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

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

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