_headings.scss

/*
 * This comes from the UXPL, and is modified for use.
 * The UXPL isn't available retroactively, so this shims
 * the headings from the UXPL with what we're using in
 * the platform to better sync things up in the meantime.
 * These are available to entire LMS.
 *
 * Once the UXPL is fitted retroactively (if ever then), this can be removed.
 */

$headings-count: 8;

$headings-font-weight-light:                200;
$headings-font-weight-normal:               400;
$headings-font-weight-bold:                 600;
$headings-base-font-family:                 inherit;
$headings-base-color:                       $gray-d2;

%reset-headings {
  margin: 0;
  font-weight: $headings-font-weight-normal;
  font-size: inherit;
  line-height: inherit;
  color: $headings-base-color;
}

%hd-1 {
  margin-bottom: 1.41575em;
  font-size: 2em;
  line-height: 1.4em;
}


%hd-2 {
  font-size: 1.5em;
  font-weight: $headings-font-weight-bold;
  line-height: 1.4em;
}


%hd-3 {
  margin-bottom: ($baseline / 2);
  font-size: 1.35em;
  font-weight: $headings-font-weight-normal;
  line-height: 1.4em;
}


%hd-4 {
  margin-bottom: ($baseline / 2);
  font-size: 1.25em;
  font-weight: $headings-font-weight-bold;
  line-height: 1.4em;
}


%hd-5 {
  margin-bottom: ($baseline / 2);
  font-size: 1.1em;
  font-weight: $headings-font-weight-bold;
  line-height: 1.4em;
}


%hd-6 {
  margin-bottom: ($baseline / 2);
  font-size: 1em;
  font-weight: $headings-font-weight-bold;
  line-height: 1.4em;
}

%hd-7 {
  margin-bottom: ($baseline / 4);
  font-size: 14px;
  font-weight: $headings-font-weight-bold;
  line-height: 1.6em;
  letter-spacing: 1px;
}

%hd-8 {
  margin-bottom: ($baseline / 8);
  font-size: 12px;
  font-weight: $headings-font-weight-bold;
  line-height: 1.5em;
  letter-spacing: 1px;
}

// let's make these classnames available to the entire LMS!

.hd-1,
.hd-2,
.hd-3,
.hd-4,
.hd-5,
.hd-6,
.hd-7,
.hd-8 {
  @extend %reset-headings;
}


// ----------------------------
// #CANNED
// ----------------------------
// canned heading classes
@for $i from 1 through $headings-count {
  .hd-#{$i} {
    @extend %hd-#{$i};
  }
}

// H3 was problematic in xblocks, we so we'll keep it as it was

.xblock .xblock {
  h2 {
    @extend %hd-2;

    font-weight: $headings-font-weight-bold;
    // override external modules and xblocks that use inline CSS
    text-transform: initial;

    &.discussion-module-title {
      margin-bottom: 0;
      display: inline-block;
    }
  }
}