anthonymidili/Bullhorn

/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *
 *= require trix
*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/

@import "trix/dist/trix";

.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  max-width: 100% !important;
}

.trix-img-max img {
  max-width: 300px !important;
}

trix-toolbar button.trix-button {
  background: var(--off-white);
}

.attachment-gallery {
  @extend .center-all;
  display: inline-flex;
}

.trix-content {
  video, audio, embed, iframe, img {
    max-height: 600px;
    object-fit: contain;
  }
  audio {
    width: 98%;
  }
}

.attachment {
  width: 100%;
  padding: 5px;
  margin-bottom: 15px;
  text-align: center;
}

// Edit box.
trix-editor {
  // Button to remove.
  .attachment__toolbar{
    top: 5px;
  }
  // Line-up items in a row.
  & > div {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  // Set item container size.
  figure[contenteditable] {
    display: grid;
    margin: 5px;
    border: 2px solid black;
    border-radius: 15px;
    text-align: center;
    width: 200px;
    height: 200px;
    overflow: hidden;
    padding: 0;
    
    video, audio, embed, iframe, img, figcaption {
      width: 100%;
      height: 100%;
      overflow: hidden;
      object-fit: cover;
    }
  }
}

.photo {
  @extend .center;
  padding-bottom: 10px;
}

.img-thumbnail {
  overflow: hidden;
}