apostrophe/lib/modules/apostrophe-images/public/css/grid-item.less

The Apostrophe Content Management System.

// grid item
.apos-ui .apos-manage-grid-view
.apos-manage-grid-piece
{
  position: relative;
  .apos-inline-block(top);

  margin: 2px 2px ~'calc(0.75em + 2px)';
  padding: 8px 8px 0;
  background-color: @apos-light;
  width: 100%;
  box-shadow: 0 2px 8px 0 rgba(21,22,22,0.0);
  overflow: hidden;

  .apos-manage-grid-select
  {
    .apos-inline-block(top);
  }

  // thumbnail
  .apos-manage-grid-image
  {
    position: relative;
    width: 100%;
    height: auto;

    @supports(display: grid) {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px;
    }

    img{
      width: 100%;

      @supports(display: grid) {
        width: auto;
        max-width: 100%;
        max-height: 120px;
        @media @apos-breakpoint-desktop-xl {
          max-height: 200px;
        }
      }
    }

    .apos-image-screen
    {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,0.5);
      opacity: 0;
      .apos-transition(opacity);
    }
  }
  // label
  .apos-manage-grid-piece-label
  {
    display: block;
    padding: @apos-padding-2 @apos-padding-2;
    padding-left: 28px;  // room for checkbox
    background-color: @apos-light;
    color: @apos-black;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .apos-transition();
  }
  // checkbox
  .apos-field-input-checkbox-indicator
  {
    position: absolute;
    bottom: 18px;
    left: 8px;
    border-color: @apos-mid;
    background-color: @apos-light;

    .apos-transition();
  }
  input:checked + .apos-field-input-checkbox-indicator,
  {
    border-width: 1;
  }

  // border
  &::before
  {
    position: absolute;
    top: 0;
    left: 0;
    width: ~'calc(100%)';  // add the border width
    height: ~'calc(100%)';
    border: 2px solid transparent;
    content: "";
    .apos-transition();
  }


  // Controls
  .apos-manage-grid-piece-controls
  {
    .apos-center-vertical(absolute);

    width: 100%;
    text-align: center;
    opacity: 0;

    .apos-button
    {
      padding: @apos-padding-1 @apos-padding-2*0.75;

      i
      {
        color: @apos-green;
        margin-left: @apos-margin-1;
      }
    }

    .apos-transition;
  }


  &:hover
  {
    cursor: pointer;
    box-shadow: 0 2px 8px 0 rgba(21,22,22,0.30);

    .apos-manage-grid-piece-controls
    {
      opacity: 1;
    }
    .apos-image-screen
    {
      opacity: 0.5;
    }
    // border
    &::before
    {
      border: 2px solid @apos-green;
    }
  }

  // Focused
  &.apos-focus
  {
    &::before
    {
      border: 2px solid @apos-green;
    }

    .apos-field-input-checkbox-indicator
    {
      background: @apos-green;
      border-color: @apos-green;
      border-width: 1;
    }
  }

  .apos-transition();
}

// full state
.apos-chooser-full .apos-manage-grid-piece:not(.apos-focus):hover
{
  cursor: not-allowed;
  .apos-field-input-checkbox-indicator:hover { cursor: not-allowed; }
  &::before { border: 2px solid @apos-gold; }
}