scinote-web/app/assets/stylesheets/shared/content_pane.scss

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

.content-pane {
  --content-header-size: 9.5em;
  background-color: $color-white;
  margin: 20px 0;
  padding: 25px 20px;

  &.flexible {
    margin: 0;
    padding: 0 1em;
  }

  .content-header {
    &.sticky-header {
      background: $color-white;
      position: sticky;
      position: -webkit-sticky;
      top: var(--navbar-height);
      z-index: 10;
    }

    .title-row {
      align-items: center;
      background: $color-white;
      border-bottom: $border-tertiary;
      display: flex;
      height: 4em;
      margin-left: -2em;
      padding: 0 2em;
      width: calc(100% + 4em);

      h1 {
        align-items: center;
        display: flex;
        flex-grow: 1;
        margin: 0;
      }

      .name-readonly-placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .header-actions {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        margin-left: auto;
      }

      .view-switch {
        margin-left: auto;

        .caret {
          margin: 8px 0 8px 8px;
        }

        &.open {
          .caret {
            transform: rotateX(180deg);
          }
        }

        .dropdown-menu {
          @include font-button;
          min-width: 190px;

          .divider-label {
            @include font-small;
            color: $color-silver-chalice;
            padding: .25em 1em;
          }

          .divider {
            margin: 0;
          }

          li {
            cursor: pointer;
            padding: .5em 1em;
            white-space: nowrap;

            .button-icon {
              margin-right: .5em;
            }

            &:hover:not(.divider-label) {
              background: $color-concrete;
            }

            .btn {
              height: 36px;
            }

            a {
              display: inline-block;
              margin: -1em;
              padding: .5em 1em;
              width: calc(100% + 2em);

              &.selected::after {
                @include font-awesome;
                content: $font-fas-check;
                margin-left: auto;
                position: absolute;
                right: 1em;
              }
            }
          }
        }

        .cards-switch {
          &.active::after {
            @include font-awesome;
            content: "\f00c";
            position: absolute;
            right: 1em;
          }
        }
      }

      .sort-menu {
        display: inline-block;

        #sortMenu {
          background: $color-white;

          &:focus,
          &:active {
            box-shadow: none;
          }

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

        .dropdown-menu {
          @include font-button;
          min-width: 200px;
          padding: .5em 0;

          a {
            border-radius: unset;
            cursor: pointer;
            padding: .5em 1em;
            text-align: left;

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

            &.selected::after {
              @include font-awesome;
              content: $font-fas-check;
              margin-left: auto;
              position: absolute;
              right: 1em;
            }
          }

          .fa-stack {
            width: 2em;
          }
        }
      }
    }

    .toolbar-row {
      background: $color-white;
      border-bottom: $border-tertiary;
      margin-left: -2em;
      padding: 1em 0;
      padding-left: 2em;
      width: calc(100% + 4em);
    }
  }

  &[data-toolbar-visible="false"] {
    --content-header-size: 5em;

    .toolbar-row {
      display: none;
    }
  }
}