data8/_sass/inuitcss/objects/_objects.flag.scss

/* ==========================================================================
   #FLAG
   ========================================================================== */

/**
 * The flag object is a design pattern similar to the media object, however it
 * utilises `display: table[-cell];` to give us control over the vertical
 * alignments of the text and image.
 *
 * http://csswizardry.com/2013/05/the-flag-object/
 *
 * 1. Allows us to control vertical alignments.
 * 2. Force the object to be the full width of its parent. Combined with [1],
 *    this makes the object behave in a quasi-`display: block;` manner.
 * 3. Reset inherited `border-spacing` declarations.
 */

.o-flag {
  display: table; /* [1] */
  width: 100%; /* [2] */
  border-spacing: 0; /* [3] */
}

  /**
   * Items within a flag object. There should only ever be one of each.
   *
   * 1. Default to aligning content to their middles.
   */

  .o-flag__img,
  .o-flag__body {
    display: table-cell;
    vertical-align: middle; /* [1] */
  }

  /**
   * Flag images have a space between them and the body of the object.
   *
   * 1. Force `.flag__img` to take up as little space as possible:
   *    https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
   */

  .o-flag__img {
    width: 1px; /* [1] */
    padding-right: $inuit-global-spacing-unit;

    /**
     * 1. Fixes problem with images disappearing.
     *
     *    The direct child selector '>' needs to remain in order for nested flag
     *    objects to not inherit their parent’s formatting. In case the image tag
     *    is wrapped into another tag, e.g. an anchor for linking reasons, it will
     *    disappear. In that case try wrapping the whole o-flag__img object into
     *    an anchor tag.
     *
     *    E.g.:
     *
     *      <a href="/">
     *        <div class="o-flag__img">
     *          <img src="./link/to/image.jpg" alt="image alt text">
     *        </div>
     *      </a>
     */

    > img {
      max-width: none; /* [1] */
    }

  }

  /**
   * The container for the main content of the flag object.
   *
   * 1. Forces the `.flag__body` to take up all remaining space.
   */

  .o-flag__body {
    width: auto; /* [1] */

    &,
    > :last-child {
      margin-bottom: 0;
    }

  }





/* Size variants
   ========================================================================== */

.o-flag--flush {

  > .o-flag__img {
    padding-right: 0;
    padding-left:  0;
  }

}


.o-flag--tiny {

  > .o-flag__img {
    padding-right: $inuit-global-spacing-unit-tiny;
  }

  &.o-flag--reverse {

    > .o-flag__img {
      padding-right: 0;
      padding-left: $inuit-global-spacing-unit-tiny;
    }

  }

}


.o-flag--small {

  > .o-flag__img {
    padding-right: $inuit-global-spacing-unit-small;
  }

  &.o-flag--reverse {

    > .o-flag__img {
      padding-right: 0;
      padding-left: $inuit-global-spacing-unit-small;
    }

  }

}


.o-flag--large {

  > .o-flag__img {
    padding-right: $inuit-global-spacing-unit-large;
  }

  &.o-flag--reverse {

    > .o-flag__img {
      padding-right: 0;
      padding-left: $inuit-global-spacing-unit-large;
    }

  }

}


.o-flag--huge {

  > .o-flag__img {
    padding-right: $inuit-global-spacing-unit-huge;
  }

  &.o-flag--reverse {

    > .o-flag__img {
      padding-right: 0;
      padding-left: $inuit-global-spacing-unit-huge;
    }

  }

}





/* Reversed flag
   ========================================================================== */

/**
 * 1. Swap the rendered direction of the object…
 * 2. …and reset it.
 * 3. Reassign margins to the correct sides.
 */

.o-flag--reverse {
  direction: rtl; /* [1] */

  > .o-flag__img,
  > .o-flag__body {
    direction: ltr; /* [2] */
  }

  > .o-flag__img {
    padding-right: 0; /* [3] */
    padding-left: $inuit-global-spacing-unit; /* [3] */
  }

}





/* Alignment variants
   ========================================================================== */

/**
 * Vertically align the image- and body-content differently. Defaults to middle.
 */

.o-flag--top {

  > .o-flag__img,
  > .o-flag__body {
    vertical-align: top;
  }

}


.o-flag--bottom {

  > .o-flag__img,
  > .o-flag__body {
    vertical-align: bottom;
  }

}