Article Media

Mixins

image

@mixin image() { ... }@mixin image() { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
 }
Description

image styles

Parameters

None.

standard

@mixin standard() { ... }@mixin standard() { 
  aspect-ratio: 16 / 9;

  img {
    @include top-border-radius;
  }
 }
Description

sets the aspect ratio and top border radius for the standard layout

Parameters

None.

Requires

landscape

@mixin landscape() { ... }@mixin landscape() { 
  aspect-ratio: 4 / 3;
  width: unit.rem(120px);
  height: unit.rem(90px);
  @include full-border-radius;

  img {
    @include full-border-radius;
  }
 }
Description

sets the aspect ratio and border radius for the landscape layout

Parameters

None.

Requires

landscape-condensed

@mixin landscape-condensed() { ... }@mixin landscape-condensed() { 
  aspect-ratio: 1 / 1;
  width: unit.rem(60px);
  height: unit.rem(60px);
  border-radius: border.get('br02');

  img {
    @include full-border-radius;
  }
 }
Description

sets the aspect ratio and border radius for the landscape condensed layout

Parameters

None.

Requires

full-border-radius

@mixin full-border-radius() { ... }@mixin full-border-radius() { 
  border-radius: border.get('br02');
 }
Description

mixin for the full border radius

Parameters

None.

Requires
Used by

top-border-radius

@mixin top-border-radius() { ... }@mixin top-border-radius() { 
  border-top-left-radius: border.get('br02');
  border-top-right-radius: border.get('br02');
 }
Description

mixin for the top border radius

Parameters

None.

Requires
Used by