aurora-utilities 1.2.0

@mixin clearfix()

Always clear floats.

Examples

scss Usage 
.clearfix {
  @include clearfix;
}
css compiled 
.clearfix {
  *zoom: 1;
}

.clearfix:after, .clearfix:before {
  content: ' ';
  display: table;
}

.clearfix:after {
  clear: both;
}
html 
<div class="clearfix">
  <div style="float:left; height: 200px; width: 300px;"></div>
</div>

@mixin full-width()

Extend an element to the edge of the viewport when the parent has a fixed width.

Examples

scss Usage 
.full-width {
  @include full-width;
}
css compiled 
.full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}
html 
<div class="full-width-parent">
  <div class="full-width"></div>
</div>

@mixin screen-reader-text()

Visually hides text, but text is still available for screen readers. Text is not focusable.

Examples

scss Usage 
.screen-reader-text {
  @include screen-reader-text;
}
css compiled 
.screen-reader-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
html 
<button type="button" class="button button--close">
  <span class="screen-reader-text">Close</span>
</button>

@mixin screen-reader-text-focusable()

Visually hides text, but it’s still available for screen readers, and is still focusable.

Examples

scss Usage 
.screen-reader-text {
  @include screen-reader-text-focusable;
}
css compiled 
.screen-reader-text:focus {
  border: auto;
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
html 
<button type="button" class="button screen-reader-text screen-reader-focusable">Close</button>

@mixin image-as-background()

Centers a background image, and makes sure it covers its container.

Examples

scss Usage 
.image-as-background {
  @include image-as-background
}
css compiled 
.image-as-background {
  background-position: center;
  background-size: cover;
}
html 
<div class="image-as-background" style="background-image: url(https://picsum.photos/1125/750/?image=1022);"></div>

@mixin size()

Declare the element height and width.

Parameters

$width: (Number)

The element width.

$height: $width (Number)

The element height.

Examples

scss Usage 
.size {
  @include size(rem(150), rem(50));
}
css compiled 
.size {
  height: 3.125rem;
  width: 9.375rem;
}
html 
<div class="size"></div>
scss Usage 
.size--one-parameter {
  @include size(50px);
}
css compiled 
.size--one-parameter {
  height: 50px;
  width: 50px;
}
html 
<div class="size size--one-parameter"></div>

Used By

@mixin aspect-ratio()

@mixin aspect-ratio()

Set an aspect ratio on an element.

Parameters

$width: (Number)

The width ratio, this value should be unitless.

$height: (Number)

The height ratio, this value should be unitless.

$el-width: (Number)

The element width.

Examples

scss Usage for 3:2 ratio 
.ratio {
  @include aspect-ratio(3, 2, 50%);
}
css compiled 
.ratio {
  height: 0;
  width: 50%;
  padding-top: 33.33333%;
}
html 
<div class="ratio"></div>
scss Usage for 16:9 ratio 
.ratio--16-9 {
  @include aspect-ratio(16, 9, 50%);
}
css compiled 
.ratio--16-9 {
  height: 0;
  width: 50%;
  padding-top: 28.125%;
}
html 
<div class="ratio ratio--16-9"></div>

Requires

@mixin size()