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

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

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

.content-pane.protocols-show {
  background-color: $color-alto;
  margin: 0 -16px;
  min-height: calc(100vh - var(--navbar-height));
  overflow: hidden;
  padding: 0 0 10px;
  width: calc(100% + 31px);

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

  .content-header {
    padding: 0 2em;
  }

  .protocol-position-container {
    background-color: $color-white;
    box-shadow: $flyout-shadow;
    margin: 20px auto;
    max-width: 900px;
    padding: 10px 10px 10px 26px;
  }

  .protocol-section {
    margin: 16px 0 16px -20px;

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

    .protocol-section-caret {
      color: $color-volcano;
      display: inline-block;
      padding: .5em;
      text-decoration: none;

      .fas {
        margin-right: 5px;
      }

      &:not(.collapsed) .fas {
        @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;

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

        .caret {
          margin-left: 25px;
        }
      }
    }

    .protocol-details {
      padding-left: 20px;
    }
  }
  .details-container {
    .protocol-metadata {
      margin-bottom: 2em;

      .data-block {
        margin-bottom: 16px;
      }

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

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

        * {
          flex-shrink: 0;
        }
      }

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

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

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

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

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

            &.active {
              .input-field {
                border: 1px solid $color-alto;
              }
            }
          }
        }

        * {
          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;
    }
  }
}


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

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

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