Mixins

Media queries@mixin screen($size, $dir: up) 

@include screen($size) {...}
Name Description Type Required Default value
$size breakpoint's name string -
$dir direction string up
$size Value
x-small 480px
small 1024px
topnav 1150px
medium 1280px
large 1600px
$dir
up
down

Clearfix@include clearfix

It's a wrapper for a floated elements

@mixin clearfix() {
  &:before,
  &:after {
    content: ' '; // 1
    display: table; // 2
  }

  &:after {
    clear: both;
  }
}

Text ellipsis@include text-overflow

the element must have width

@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Word wrap@include word-wrap 

@mixin word-wrap {
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
}

Embossed border@include embossed-border

'left' means white border (box shadow) is on the left

@mixin embossed-border($direction: left) {
  @if $direction == left {
    border-right: 1px solid rgba($color-black, .1);
    box-shadow: inset -1px 0 0 0 rgba($color-white, .1);
  } @else if $direction == right {
  border-left: 1px solid rgba($color-black, .1);
    box-shadow: -1px 0 0 0 rgba($color-white, .1);
  } @else if $direction == bottom {
  border-bottom: 1px solid rgba($color-black, .1);
    box-shadow: 0 1px 0 0 rgba($color-white, .05);
  }
}
Name Description Type Required Default value
$direction border direction string left
$direction
left
right
bottom

Triangle@include triangle($direction) 

@mixin triangle($direction, $color: currentcolor, $size: 1em, $wide: 1.5) {
  @if not index(top right bottom left, $direction) {
    @error "Direction must be either `top`, `right`, `bottom` or `left`.";
  }

  width: 0;
  height: 0;
  content: '';

  @if $direction == top {
    border-bottom: ($size * $wide) solid $color;
  } @else if $direction == bottom {
    border-top: ($size * $wide) solid $color;
  } @else if $direction == left {
    border-right: ($size * $wide) solid $color;
  } @else if $direction == right {
    border-left: ($size * $wide) solid $color;
  }

  $perpendicular-borders: $size solid transparent;

  @if $direction == top or $direction == bottom {
    border-left: $perpendicular-borders;
    border-right: $perpendicular-borders;
  } @else if $direction == right or $direction == left {
    border-bottom: $perpendicular-borders;
    border-top: $perpendicular-borders;
  }
}
Name Description Type Required Default value
$direction triangle direction string -
$color triangle color color currentcolor
$size triangle size length 1em
$wide triangle wideness length 1.5
$direction
top
bottom
left
right

Center content@include center-content 

@mixin center-content($horizontal:true, $content:'&__content') {
  font-size: 0;

  @if $horizontal {
    text-align: center;
  }

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  #{$content} {
    display: inline-block;
    font-size: typo('body', 'size');
    vertical-align: middle;

    @if $horizontal {
      text-align: left;
    }
  }
}
Name Description Type Required Default value
$horizontal content centered horizontally bool true
$content content class string &__content

Related components

UtilityMedia

Last update

Message feat(components): use stylelint rules
Date:
()
Committer: rudywaltz
Component history