Staffordshire University Components

Horizontal Rule: Triangles (LDN)

There are no notes for this item.

<p class="intro">This is a style primarily developed for the LDN skin, as the brand more heavily uses the triangle 'cutout' from the logo as a device.</p>
<p>It can be used on the left or right (or alternating corners) of a horizontal rule. Demo combinations follow:</p>

<h2 class="title  title--bg-magenta-ldn  h3"><span class="title__highlight">Single triangle</span></h2>

<h3 class="h6">above-left</h3>
<hr class="hr--tri-above-left" />

<h3 class="h6">below-left</h3>
<hr class="hr--tri-below-left" />

<h3 class="h6">above-right</h3>
<hr class="hr--tri-above-right" />

<h3 class="h6">below-right</h3>
<hr class="hr--tri-below-right" />

<h2 class="title  title--bg-magenta-ldn  h3"><span class="title__highlight">Dual Triangles</span></h2>

<h3 class="h6">above-left + below-right</h3>
<hr class="hr--tri-above-left  hr--tri-below-right" />

<h3 class="h6">above-right + below-left</h3>
<hr class="hr--tri-above-right  hr--tri-below-left" />
 
{% include '@hr--triangles' %}
  • Content: 
    $hr-tri-size: 1em;

hr {
  position: relative;
  // see base-elements in vars/_typography
}

.hr--primary {
  border-top-width: 2px;
  border-color: $primary;
}

// Spacing

.hr--compact {
  margin: $spacing-xl auto;
}

.hr--spaced {
  margin: $spacing-5xl auto;
}

.hr--invisible {
  border-color: transparent;
}

// Styled variants

[class*='hr--tri-'] {
  border-color: $primary;
  //border-width: 2px;

  &:before,
  &:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
  }
}

.hr--tri-above-left {
  &:before {
    bottom: 0;
    left: 0;
    border-width: $hr-tri-size 0 0 $hr-tri-size;
    border-color: transparent transparent transparent $primary;
  }
}

.hr--tri-below-left {
  &:before {
    top: 0;
    left: 0;
    border-width: $hr-tri-size $hr-tri-size 0 0;
    border-color: $primary transparent transparent transparent;
  }
}

.hr--tri-above-right {
  &:after {
    bottom: 0;
    right: 0;
    border-width: 0 0 $hr-tri-size $hr-tri-size;
    border-color: transparent transparent $primary transparent;
  }
}

.hr--tri-below-right {
  &:after {
    top: 0;
    right: 0;
    border-width: 0 $hr-tri-size $hr-tri-size 0;
    border-color: transparent $primary transparent transparent;
  }
}
  • URL: /components/raw/hr/_hr.scss
  • Filesystem Path: src/components/hr/_hr.scss
  • Size: 1.3 KB