A17 SCSS Utilities

Description

Draws a keyline the full viewport width, breaking out of the container width.

SCSS Usage

@include keyline-full($position:top, $color:var(--border-primary))

Parameter	Required?	Value
`$position`	No	`top` or `bottom`, defaults to `top`
`$color`	No	Any CSS color, defaults to `var(--border-primary)`
`$width`	No	Any CSS size value, defaults to `1px`

And so, in SCSS:

_component.scss

.demo-keyline-full-1 {
  @include keyline-full();
}

.demo-keyline-full-2 {
  @include keyline-full(top, var(--border-tertiary));
}

.demo-keyline-full-3 {
  @include keyline-full(bottom, red);
}

.demo-keyline-full-4 {
  @include keyline-full(top, var(--border-primary), 4px);
}

Output

app.css

.demo-keyline-full-1 {
  position: relative;
}
.demo-keyline-full-1::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 100%;
  width: 100vw;
  margin-left: -50vw;
  border-top: 1px solid var(--border-primary);
  pointer-events: none;
}

.demo-keyline-full-2 {
  position: relative;
}
.demo-keyline-full-2::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 100%;
  width: 100vw;
  margin-left: -50vw;
  border-top: 1px solid var(--border-tertiary);
  pointer-events: none;
}

.demo-keyline-full-3 {
  position: relative;
}
.demo-keyline-full-3::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 100%;
  width: 100vw;
  margin-left: -50vw;
  border-top: 1px solid red;
  pointer-events: none;
}

.demo-keyline-full-4 {
  position: relative;
}
.demo-keyline-full-4::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 100%;
  width: 100vw;
  margin-left: -50vw;
  border-top: 4px solid var(--border-primary);
  pointer-events: none;
}

Demo

Using the above .demo-keyline-full-x classes above:

.demo-keyline-full-1

.demo-keyline-full-2

.demo-keyline-full-3

.demo-keyline-full-4

document.html

<div class="demo-keyline-full-1 mt-gutter py-gutter">
  <code>.demo-keyline-full-1</code>
</div>

<div class="demo-keyline-full-2 mt-gutter py-gutter">
  <code>.demo-keyline-full-2</code>
</div>

<div class="demo-keyline-full-3 mt-gutter py-gutter">
  <code>.demo-keyline-full-3</code>
</div>

<div class="demo-keyline-full-4 mt-gutter py-gutter">
  <code>.demo-keyline-full-4</code>
</div>