bulma/sass/components/media.scss

@import "../utilities/mixins";

$media-border-color: bulmaRgba($border, 0.5) !default; // TODO
$media-border-size: 1px !default;
$media-spacing: 1rem !default;
$media-spacing-large: 1.5rem !default;
$media-content-spacing: 0.75rem !default;
$media-level-1-spacing: 0.75rem !default;
$media-level-1-content-spacing: 0.5rem !default;
$media-level-2-spacing: 0.5rem !default;

:root {
  @include register-vars(
    (
      media-border-color: #{$media-border-color},
      media-border-size: #{$media-border-size},
      media-spacing: #{$media-spacing},
      media-spacing-large: #{$media-spacing-large},
      media-content-spacing: #{$media-content-spacing},
      media-level-1-spacing: #{$media-level-1-spacing},
      media-level-1-content-spacing: #{$media-level-1-content-spacing},
      media-level-2-spacing: #{$media-level-2-spacing},
    )
  );
}

.#{$class-prefix}media {
  align-items: flex-start;
  display: flex;
  text-align: inherit;

  .#{$class-prefix}content:not(:last-child) {
    margin-bottom: getVar("media-content-spacing");
  }

  .#{$class-prefix}media {
    border-top-color: getVar("media-border-color");
    border-top-style: solid;
    border-top-width: getVar("media-border-size");
    display: flex;
    padding-top: getVar("media-level-1-spacing");

    .#{$class-prefix}content:not(:last-child),
    .#{$class-prefix}control:not(:last-child) {
      margin-bottom: getVar("media-level-1-content-spacing");
    }

    .#{$class-prefix}media {
      padding-top: getVar("media-level-2-spacing");

      & + .#{$class-prefix}media {
        margin-top: getVar("media-level-2-spacing");
      }
    }
  }

  & + .#{$class-prefix}media {
    border-top-color: getVar("media-border-color");
    border-top-style: solid;
    border-top-width: getVar("media-border-size");
    margin-top: getVar("media-spacing");
    padding-top: getVar("media-spacing");
  }

  // Sizes
  &.is-large {
    & + .#{$class-prefix}media {
      margin-top: getVar("media-spacing-large");
      padding-top: getVar("media-spacing-large");
    }
  }
}

.#{$class-prefix}media-left,
.#{$class-prefix}media-right {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
}

.#{$class-prefix}media-left {
  @include ltr-property("margin", getVar("media-spacing"));
}

.#{$class-prefix}media-right {
  @include ltr-property("margin", getVar("media-spacing"), false);
}

.#{$class-prefix}media-content {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  text-align: inherit;
}

@include mobile {
  .#{$class-prefix}media-content {
    overflow-x: auto;
  }
}