apostrophe/lib/modules/apostrophe-doc-type-manager/public/css/chooser.less

The Apostrophe Content Management System.

.apos-ui
{
  .apos-chooser-manage-view-wrapper
  {
    .apos-inline-block;
    float: right;
    width: 80%;
    .apos-table { padding-left: @apos-padding-2; }
  }

  .apos-chooser
  {
    position: fixed;
    .apos-inline-block;
    height: 100%;
    overflow: auto;
    width: 20%;
    background-color: @apos-light;
  }

  .apos-chooser-tabs-wrapper
  {
    position: fixed;
    .apos-inline-block;
    width: 80%;
    height: 100%;
  }

  .apos-chooser-choice
  {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid @apos-dark;
    padding: (@apos-padding-1 * 1.5) @apos-padding-1;
    @media @apos-breakpoint-desktop-xl { padding: @apos-padding-2; }
    background-color: @apos-mid;
    &:hover
    {
      background-color: @apos-primary;
      color: @apos-white;
      .apos-button { opacity: 1; }
    }
    &.apos-chooser-choice--removed .apos-text-normal
    {
      text-decoration: line-through;
    }
    img { width: 100%; }
  }

  .apos-chooser-choice--stacked {
    flex-direction: column;
    align-items: unset;
    .apos-chooser-controls {
      margin-bottom: 10px;
      .apos-button { opacity: 1; }
    }
  }

  .apos-chooser-limit-reached
  {
    position: fixed;
    width: 20%;
    background: @apos-gold;
    color: @apos-white;
    z-index: @apos-z-index-1;
    bottom: 0;
    display: none;
    padding: @apos-padding-3;
    text-align: center;
  }

  .apos-chooser-controls
  {
    margin-right: 10px;
    .apos-button
    {
      z-index: 1;
      opacity: 0.5;
    }
  }

  .apos-button--small.apos-chooser-controls {
    position: absolute;
    top: 5px;
    left: 5px;
  }

  .apos-chooser-choice:hover .apos-chooser-controls
  {
    display: block;
  }

  .apos-chooser-full
  {
    .apos-chooser-limit-reached { display: block; }
    .apos-field-input { display: none; }

  }

  [data-chooser][data-read-only="true"] .apos-chooser-controls {
    display: none;
  }
}

.apos-manage-pager { float: right; }