scinote-web/app/assets/stylesheets/protocols/protocol.scss

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

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

.content-pane.protocols-show {
  --container-margin: 20px;
  background-color: $color-alto;
  min-height: calc(100vh - var(--navbar-height) - var(--container-margin));
  overflow: hidden;
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .title-row h1 {
    max-width: 100%;
  }

  .content-header {
    padding: 0 1.5rem;
    align-self: stretch;
  }

  .protocol-breadcrumbs {
    padding: .75em 0;
  }

  .protocol-position-container {
    background-color: $color-white;
    border-radius: 2px;
    box-shadow: $flyout-shadow;
    margin: var(--container-margin) 0;
    padding: 10px 10px 10px 26px;
    width: 900px;
  }

  .dropdown-menu {
    z-index: 102;
  }

  .dropdown-backdrop {
    z-index: 101;
  }

  .protocol-section {
    margin: 16px 0;

    &.protocol-steps-section {
      margin-left: 0;
    }

    .protocol-section-caret {
      align-items: center;
      color: var(--sn-black);
      display: inline-flex;
      gap: .5rem;
      padding: .5rem;
      text-decoration: none;

      .fas {
        margin-right: 5px;
      }

      &:not(.collapsed) .sn-icon {
        @include rotate(90deg);
      }
    }

    .protocol-section-title {
      display: inline-block;

      h2 {
        display: inline-block;
        margin: 10px 0;
      }

      .protocol-code {
        color: $color-volcano;
        margin-left: .5em;
      }

    }

    .protocol-section-header {
      align-items: center;
      display: flex;
      flex-wrap: wrap;

      .actions-block {
        display: flex;
        flex-grow: 1;
        justify-content: flex-end;
        padding: 0 25px;

        .btn {
          margin-left: .25em;
        }

        .caret {
          margin-left: 25px;
        }

        button,
        a {
          margin-right: 5px;
        }
      }
    }

    .protocol-details {
      padding-left: 2.5rem;
    }
  }

  .protocol-details {
    .protocol-metadata {
      margin-bottom: 2em;

      .data-block {
        display: flex;
        gap: .5rem;
        margin-bottom: 16px;
      }

      .authors-data {
        align-items: center;
        display: flex;
        margin-top: -12px;
        min-height: 36px;

        .authors-list {
          flex-basis: calc(100% - 90px);
          flex-grow: 1;
          line-height: 32px;
          margin-left: 8px;
          font-weight: bold;
        }

        * {
          flex-shrink: 0;
        }

        .sci-inline-edit__view,
        textarea {
          padding-left: 10px;

          &::placeholder {
            font-weight: normal;
          }
        }

        .sci-inline-edit__view.blank {
          font-weight: normal;

          &:hover {
            border: $border-default;
          }
        }
      }

      .keywords-data {
        align-items: center;
        display: flex;
        margin-top: -12px;
        min-height: 36px;

        .keywords-list {
          flex-basis: calc(100% - 90px);
          flex-grow: 1;
          margin-left: .5em;

          .dropdown-selector-container {
            padding-right: 10px;
            margin-left: 0;

            .input-field {
              margin-left: 0;
            }

            &:not(.disabled) {
              &:not(.active) {
                .input-field {
                  border-color: transparent;

                  &:hover {
                    border: 1px solid $color-alto;
                  }
                }
              }

              &.active {
                .input-field {
                  border: 1px solid $brand-focus;
                }
              }
            }

            &.disabled {
              .input-field,
              .input-field:hover,
              .input-field:active {
                border-color: transparent;
              }
            }
          }
        }

        * {
          flex-shrink: 0;
        }
      }
    }
  }

  .protocol-description {
    margin-bottom: 2em;

    .data-block {
      img {
        border-radius: 50%;
        height: 24px;
        width: 24px;
      }
    }

    .fas.block-icon {
      margin-right: 6px;

      &.fa-graduation-cap,
      &.fa-font {
        margin-right: 10px;
      }
    }
  }

  .protocol-step-actions {
    margin-left: -6px;
    margin-top: 2em;
  }

  .publish-modal {
    .modal-body {
      @include font-button;
    }

    .sci-input-container {
      margin-bottom: 1em;
    }

    textarea {
      min-height: 64px;
    }

    .modal-footer {
      margin-top: -25px;
    }
  }
}


.protocol-content {
  .protocol-name {
    font-size: 1.7em;
    font-weight: bold;
    margin-bottom: 32px;
    margin-top: 28px;
  }

  .repository-new-step {
    margin-left: 1.5em;
  }
}

#protocol-description-container {
  overflow-x: auto;
}

.delete-steps-modal {
  .btn {
    float: initial;
  }
}