Mixins

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

@include screen($size) {...}

Properties

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);
  }
}

Properties

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;
  }
}

Properties

Name	Description	Type	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;
    }
  }
}

Properties

Name	Description	Type	Required	Default value
`$horizontal`	content centered horizontally	bool		true
`$content`	content class	string		&__content

Last update:	()
Message	feat(enhance): init responsive view
Committer:	gydavid
Version history

UI Kit

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

Properties

Clearfix@include clearfix

Text ellipsis@include text-overflow

Word wrap@include word-wrap

Embossed border@include embossed-border

Properties

Triangle@include triangle($direction)

Properties

Center content@include center-content

Properties

Related components