apostrophe/lib/modules/apostrophe-images-widgets/public/css/slideshow-item.less

The Apostrophe Content Management System.

.apos-slideshow
{
  .apos-slideshow-item
  {
    display: none;

    width: 100%;
    height: auto;

    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    // .apos-center-vertical;

    &.apos-current
    {
      display: block;
    }
    img
    {
      // a11y problem: visibility: hidden removes it from screen readers,
      // making the alt attribute unavailable. But, we need to take up
      // the height naturally, so we can't just do apos-visually-hide.
      // Consider other approaches, such as opacity: 0 with styles that
      // allow clicks through.
      visibility: hidden;
      width: 100%;
      height: auto;
    }
  }
  &.apos-slideshow--aspect-ratio
  {
    .apos-slideshow-item.apos-slideshow-item--svg
    {
      background-position: center;
      img
      {
        // We will crop and take up space via the slideshow item div inline styles.
        // Use a mixin that hides it visually but not for a11y.
        .apos-visually-hide;
      }
    }
  }
}