SU-SWS/stanford_profile_helper

View on GitHub
modules/stanford_profile_styles/lib/scss/component/paragraph/wysiwyg/_headings.scss

Summary

Maintainability
Test Coverage
@charset "UTF-8";

.su-wysiwyg-text {
  //
  // Headings overrides
  //
  h1 {
    @include modular-spacing('margin', 4 null 5 null);
  }

  h2 {
    @include modular-spacing('margin', null null 0 null);
    @include modular-spacing('padding', 2 null null null);
  }

  h3 {
    @include modular-spacing('margin', null null -1 null);
    @include modular-spacing('padding', 0 null null null);
  }

  h4 {
    @include modular-spacing('margin', null null -1 null);
    @include modular-spacing('padding', 0 null null null);
  }

  h5 {
    @include modular-spacing('margin', null null -1 null);
    @include modular-spacing('padding', -1 null null null);
  }

  h6 {
    @include modular-spacing('margin-bottom', -2);
  }

  h2,
  h3,
  h4,
  h5,
  h6 {

    &.text-align-center {
      @include margin(null auto);
    }

    &.text-align-left {
      @include margin(null auto null 0);
    }

    &.text-align-right {
      @include margin(null 0 null auto);
    }

    a {
      @include link-icon(caret-right, 0.65em, right);
      color: $su-color-bright-red;

      &.su-link--external {
        @include link-icon(arrow-up-right, 0.65em, topright);
        font-weight: $su-font-bold;

        &::after {
          background-color: $su-color-bright-red;
        }
      }

      &:active,
      &:focus,
      &:hover {
        color: $su-color-black;
        text-decoration: underline;
      }

      &::after {
        background-color: $su-color-bright-red;
      }
    }
  }

  // Overide the heading link icons for the new Localist widget replacing the old
  // Event calendar. This is to keep the whole card clickable.
  .localist-widget {
    h2,
    h3,
    h4,
    h5,
    h6 {


      a {
        &:active,
        &:focus,
        &:hover {
          color: $su-color-bright-blue;
          text-decoration: underline;
        }

        &::after {
          background-color: transparent;
          margin: inherit;
          height: inherit;
          width: inherit;
          display: inherit;
          mask: none;
          transition: none;

        }
      }
    }
  }
}