adaptive

functions

percent-size-from-size

@function percent-size-from-size($number-need-to-percent, $from-number) { ... }

Description

Return percent number from number

Parameters

NameDescriptionTypeDefault value
$number-need-to-percent

number which need convert to percent from $from-number

String or Number—
$from-number

number from what will count percent $number-need-to-percent

String or Number—

Example

percent-size-from-size(10, 100) // => 10

Used by

mixins

media-min-w

@mixin media-min-w($screen-size: null) { ... }

Description

Mixin create min-width media queries

Parameters

NameDescriptionTypeDefault value
$screen-size

size when media queries style will be enable

Stringnull

Example

.block {
  width: 40px;
  height: 40px;

  background-color: red;

  @include media-min-w(1024px) {
    background-color: blue;
  }
}

<div class="block"></div>

Throws

  • media-min-w screen-size cant be null

media-max-w

@mixin media-max-w($screen-size: null) { ... }

Description

Mixin create max-width media queries

Parameters

NameDescriptionTypeDefault value
$screen-size

size when media queries style will be enable

Stringnull

Example

.block {
  width: 40px;
  height: 40px;

  background-color: red;

  @include media-max-w(1200px) {
    background-color: blue;
  }
}

<div class="block"></div>

Throws

  • media-max-w screen-size cant be null

stretching-padding-height

@mixin stretching-padding-height($need-height: null, $parent-width: null, $dynamic-size-map: null, $is-mobile-first: true) { ... }

Description

Mixin return stretch height, with help padding-top

Parameters

NameDescriptionTypeDefault value
$need-height

needed height with out media-queries

Stringnull
$parent-width

parent element with

Stringnull
$dynamic-size-map

map with adaptive settings

Mapnull
$is-mobile-first

should use min-with on media-queries

Booleantrue

Example

* {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  padding: 0 20px;
}

.content {
  height: 40px;
  background-color: silver;

  text-transform: uppercase;
  text-align: center;
}

.row  {
  display: flex;
  align-items: flex-start;

  margin-left: -10px;
  margin-right: -10px;
}

%card-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 12px;
}

.card {
  position: relative;

  margin: 0 10px;
  background-color: red;

  &_with-calc {
    width: calc(13.16% - 5px);

    &:before {
      @extend %card-label;
      content: 'Calc';
    }

    .card__wrapper {
      width: 100%;
      @include stretching-padding-height(35px, 35px);
    }

  }

  &_with-out-calc {
    width: 11.27%;
    @include stretching-padding-height(32px, 284px);

    &:before {
      @extend %card-label;
      content: 'with out calc';
    }

  }

  &_with-adaptive {
    width: 11.27%;

    $break-point_md: 1024px;

    @include stretching-padding-height(32px, 284px,
            (
                    $break-point_md: (
                            need-height: 150px,
                            parent-width: 988px
                    )
            )
    );

    &:before {
      @extend %card-label;
      content: 'adaptive';
    }

  }

}

<div class="container">

  <div class="content">Content</div>

  <div class="row">

    <div class="card card_with-adaptive"></div>

    <div class="card card_with-calc">
      <div class="card__wrapper"></div>
    </div>

    <div class="card card_with-out-calc"></div>

  </div>

</div>

Throws

  • stretching-padding-height need-height cant be null

  • stretching-padding-height parent-width cant be null

Requires

animation

mixins

fade-in

@mixin fade-in($settings: (animation-duration: .5, additional-transition-values: ''), $settings.animation-duration: .5, $settings.additional-transition-values: '') { ... }

Description

Show element from fade-out, and add transition style for fade-in after fade-out

Parameters

NameDescriptionTypeDefault value
$settings

mixin settings

Map(animation-duration: .5, additional-transition-values: '')
$settings.animation-duration

fade in duration

Number.5
$settings.additional-transition-values

additional transition values

String''

Example

.player {
  position: relative;
  height: 200px;
  background:silver;

  .button {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);

    border-radius: 4px;
    background-color: black;
  }

  //button fade-in
  &_with-fade-in-btn {

    .button {
      @include fade-out();
    }

    &:hover .button {
      @include fade-in();
    }

  }

  //button fade-out
  &_with-fade-out-btn {

    .button {
      @include fade-in();
    }

    &:hover .button {
      @include fade-out();
    }

  }

  //button fade-in with rotate
  &_with-fade-in-rotate-btn {
    $map-with-additional-transition: (additional-transition-values: transform .5s 0s ease);

    .button {
      transform: rotate(45deg);
      @include fade-out($map-with-additional-transition);
    }

    &:hover .button {

      transform: rotate(0deg);
      @include fade-in($map-with-additional-transition);
    }

  }

}

//class with mod
<!--player_with-fade-in-btn-->
<!--player_with-fade-out-btn-->
<!--player_with-fade-in-rotate-btn-->

<div class="player player_with-fade-in-btn" >
  <div class="button" ></div>
</div>

Requires

fade-out

@mixin fade-out($settings: (animation-duration: .5, additional-transition-values: ''), $settings.animation-duration: .5, $settings.additional-transition-values: '') { ... }

Description

Hide element to opacity: 0, and hide element before fade-in

Parameters

NameDescriptionTypeDefault value
$settings

mixin settings

Map(animation-duration: .5, additional-transition-values: '')
$settings.animation-duration

fade out duration

Number.5
$settings.additional-transition-values

additional transition values

String''

Example

.modal-trigger {
  height: 20px;

  text-align: center;

  background-color: silver;
}

.modal {
  position: fixed;
  top: 40px;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: rgba(0,0,0,.5);

  $map-with-additional-transition: (additional-transition-values: transform .5s 0s ease);

  //modal-state-for-open
  &_for-open {
    @include fade-out();
  }

  //modal-state-for-closed
  &_for-closed {
    @include fade-in();
  }

  //modal-state-for-open-with-rotate
  &_for-open-with-rotate {
    transform: skewX(100deg);
    @include fade-out($map-with-additional-transition);
  }

  //modal fade-in
  &_open {
    @include fade-in();
  }

  &_open-with-rotate {
    @include fade-in();
  }

  //modal fade-out
  &_closed {
    @include fade-out();
  }

  //modal fade-in with rotate
  &_open-with-rotate {
    transform: skewX(0deg);
    @include fade-in($map-with-additional-transition);
  }

}

//class with mod
<!--modal_for-open, inJs: modal_open-->
<!--modal_for-close, inJs: modal_close-->
<!--modal_for-open-with-rotate, inJs: modal_open-with-rotate-->

<div class="modal modal_for-open" ></div>
<div class="modal-trigger" onclick="document.querySelector('.modal').classList.toggle('modal_open')">open/close</div>

Requires

slide-in-down

@mixin slide-in-down($settings: (animation-duration: .5, has-fade-effect: false, additional-transition-values: ''), $settings.animation-duration: .5, $settings.has-fade-effect: false, $settings.additional-transform-values: '') { ... }

Description

Slide element down

Parameters

NameDescriptionTypeDefault value
$settings

mixin settings

Map(animation-duration: .5, has-fade-effect: false, additional-transition-values: '')
$settings.animation-duration

slide-in and fade-in duration

Number.5
$settings.has-fade-effect

should add fade effect

Booleanfalse
$settings.additional-transform-values

additional transition values

String''

Example

.dd {
  margin: 40px auto;
  width: 300px;
  height: 40px * 3;
  overflow: hidden;

  &__wrapper {
    position: relative;
  }

  &__active-item-wrapper {
    position: relative;
  }

  &_open-down &__list {
    @include slide-in-down()
  }

  &__list-item {
    height: 40px;
    background-color: silver;
    outline: 1px solid beige;
  }

  &__list {
    @include slide-out-y() {
      bottom: 0;
    }
  }

  &_with-fade & {

    &__list {
      @include slide-out-y((has-fade-effect: true)) {
        bottom: 0;
      }
    }

  }

  &_with-fade-out-delay & {

    &__list {
      @include slide-out-y((has-fade-effect: true, has-fade-out-delay: true)) {
        bottom: 0;
      }
    }

  }

  &_with-fade#{&}_open-down &, &_with-fade-out-delay#{&}_open-down & {

    &__list {
      @include slide-in-down((has-fade-effect: true));
    }

  }

}

//class with mod
<!--dd_with-fade-out-delay-->
<!--dd_with-fade-->

<div class="dd dd_with-fade-out-delay" onclick="document.querySelector('.dd').classList.toggle('dd_open-down')">

  <div class="dd__wrapper">

    <div class="dd__list">
      <div class="dd__list-item">2</div>
      <div class="dd__list-item">3</div>
    </div>

    <div class="dd__active-item-wrapper">
      <div class="dd__list-item">1</div>
    </div>

  </div>

</div>

Requires

slide-in-up

@mixin slide-in-up($settings: (animation-duration: .5, has-fade-effect: false, additional-transition-values: ''), $settings.animation-duration: .5, $settings.has-fade-effect: false, $settings.additional-transform-values: '') { ... }

Description

Slide element up

Parameters

NameDescriptionTypeDefault value
$settings

mixin settings

Map(animation-duration: .5, has-fade-effect: false, additional-transition-values: '')
$settings.animation-duration

slide-in and fade-in duration

Number.5
$settings.has-fade-effect

should add fade effect

Booleanfalse
$settings.additional-transform-values

additional transition values

String''

Example

.dd {
  margin: 40px auto;
  width: 300px;
  height: 40px * 3;
  overflow: hidden;

  &__wrapper {
    position: relative;
  }

  &__active-item-wrapper {
    position: relative;
  }

  &_open-up &__list {
    @include slide-in-down()
  }

  &__list-item {
    height: 40px;
    background-color: silver;
    outline: 1px solid beige;
  }

  &__list {
    @include slide-out-y() {
      bottom: 0;
    }
  }

  &_with-fade & {

    &__list {
      @include slide-out-y((has-fade-effect: true)) {
        bottom: 0;
      }
    }

  }

  &_with-fade-out-delay & {

    &__list {
      @include slide-out-y((has-fade-effect: true, has-fade-out-delay: true)) {
        bottom: 0;
      }
    }

  }

  &_with-fade#{&}_open-up &, &_with-fade-out-delay#{&}_open-up & {

    &__list {
      @include slide-in-down((has-fade-effect: true));
    }

  }

}

//class with mod
<!--dd_with-fade-out-delay-->
<!--dd_with-fade-->

<div class="dd dd_with-fade-out-delay" onclick="document.querySelector('.dd').classList.toggle('dd_open-up')">

  <div class="dd__wrapper">

    <div class="dd__list">
      <div class="dd__list-item">2</div>
      <div class="dd__list-item">3</div>
    </div>

    <div class="dd__active-item-wrapper">
      <div class="dd__list-item">1</div>
    </div>

  </div>

</div>

Requires

slide-out-y

@mixin slide-out-y($settings: (animation-duration: .5, has-fade-effect: false, has-fade-out-delay: false, fade-out-delay: $settings.animation-duration, additional-transition-values: ''), $animation-duration: .5, $has-fade-effect: false, $has-fade-out-delay: false, $fade-out-delay: $settings.animation-duration, $additional-transform-values: '') { ... }

Description

Hide element, before slide-in-up or slide-in-down

Parameters

NameDescriptionTypeDefault value
$settings

mixin settings

Map(animation-duration: .5, has-fade-effect: false, has-fade-out-delay: false, fade-out-delay: $settings.animation-duration, additional-transition-values: '')
$animation-duration

slide-in and fade-in duration

Number.5
$has-fade-effect

should add fade effect

Booleanfalse
$has-fade-out-delay

if true, element will hide, only after slide-down-out

Booleanfalse
$fade-out-delay

props for update fade-out delay after slide-down-out

Number$settings.animation-duration
$additional-transform-values

additional transition values

String''

Example

.dd {
  margin: 40px auto;
  width: 300px;
  height: 40px * 3;
  overflow: hidden;

  &__wrapper {
    position: relative;
  }

  &__active-item-wrapper {
    position: relative;
  }

  &_open-down &__list {
    @include slide-in-down()
  }

  &__list-item {
    height: 40px;
    background-color: silver;
    outline: 1px solid beige;
  }

  &__list {
    @include slide-out-y() {
      bottom: 0;
    }
  }

  &_with-fade & {

    &__list {
      @include slide-out-y((has-fade-effect: true)) {
        bottom: 0;
      }
    }

  }

  &_with-fade-out-delay & {

    &__list {
      @include slide-out-y((has-fade-effect: true, has-fade-out-delay: true)) {
        bottom: 0;
      }
    }

  }

  &_with-fade#{&}_open-down &, &_with-fade-out-delay#{&}_open-down & {

    &__list {
      @include slide-in-down((has-fade-effect: true));
    }

  }

}

//class with mod
<!--dd_with-fade-out-delay-->
<!--dd_with-fade-->

<div class="dd dd_with-fade-out-delay" onclick="document.querySelector('.dd').classList.toggle('dd_open-down')">

  <div class="dd__wrapper">

    <div class="dd__list">
      <div class="dd__list-item">2</div>
      <div class="dd__list-item">3</div>
    </div>

    <div class="dd__active-item-wrapper">
      <div class="dd__list-item">1</div>
    </div>

  </div>

</div>

Requires

slide-in-right

@mixin slide-in-right($settings: (animation-duration: .5, has-fade-effect: false, additional-transition-values: ''), $settings.animation-duration: .5, $settings.has-fade-effect: false, $settings.additional-transform-values: '') { ... }

Description

Slide element to right, from slide-out-x

Parameters

NameDescriptionTypeDefault value
$settings

mixin settings

Map(animation-duration: .5, has-fade-effect: false, additional-transition-values: '')
$settings.animation-duration

slide-in and fade-in duration

Number.5
$settings.has-fade-effect

should add fade effect

Booleanfalse
$settings.additional-transform-values

additional transition values

String''

Example

.open-trigger {
  margin: auto;

  width: 100px;
  height: 20px;

  color: white;
  text-align: center;

  background-color: black;
}

.side-bar {
  position: fixed;
  top: 0;
  bottom: 0;

  width: 300px;
  background-color: black;

  //side-bar is hidden on start
  @include slide-out-x() {
    right: 100%;
  }

  &_open-right {
    @include slide-in-right();
  }

  &_with-fade {
    @include slide-out-x((has-fade-effect: true)) {
      right: 100%;
    }
  }

  &_with-fade-out-delay {
    @include slide-out-x((has-fade-effect: true, has-fade-out-delay: true)) {
      right: 100%;
    }
  }

  &_with-fade#{&}_open-right, &_with-fade-out-delay#{&}_open-right {
    @include slide-in-right((has-fade-effect: true));
  }

}

//class with mod
<!--side-bar_with-fade-->
<!--side-bar_with-fade-out-delay-->

<div class="side-bar"></div>
<div class="open-trigger" onclick="document.querySelector('.side-bar').classList.toggle('side-bar_open-right')">Close/Open</div>

Requires

slide-in-left

@mixin slide-in-left($settings: (animation-duration: .5, has-fade-effect: false, additional-transition-values: ''), $settings.animation-duration: .5, $settings.has-fade-effect: false, $settings.additional-transform-values: '') { ... }

Description

Slide element to right, from slide-out-x

Parameters

NameDescriptionTypeDefault value
$settings

mixin settings

Map(animation-duration: .5, has-fade-effect: false, additional-transition-values: '')
$settings.animation-duration

slide-in and fade-in duration

Number.5
$settings.has-fade-effect

should add fade effect

Booleanfalse
$settings.additional-transform-values

additional transition values

String''

Example

.open-trigger {
  margin: auto;

  width: 100px;
  height: 20px;

  color: white;
  text-align: center;

  background-color: black;
}

.side-bar {
  position: fixed;
  top: 0;
  bottom: 0;

  width: 300px;
  background-color: black;

  //side-bar is hidden on start
  @include slide-out-x() {
    left: 100%;
  }

  &_open-left {
    @include slide-in-left();
  }

  &_with-fade {
    @include slide-out-x((has-fade-effect: true)) {
      left: 100%;
    }
  }

  &_with-fade-out-delay {
    @include slide-out-x((has-fade-effect: true, has-fade-out-delay: true)) {
      left: 100%;
    }
  }

  &_with-fade#{&}_open-left, &_with-fade-out-delay#{&}_open-left {
    @include slide-in-left((has-fade-effect: true));
  }

}

//class with mod
<!--side-bar_with-fade-->
<!--side-bar_with-fade-out-delay-->

<div class="side-bar"></div>
<div class="open-trigger" onclick="document.querySelector('.side-bar').classList.toggle('side-bar_open-left')">Close/Open</div>

Requires

slide-out-x

@mixin slide-out-x($animation-duration: .5, $has-fade-effect: false, $has-fade-out-delay: false, $fade-out-delay: $animation-duration, $additional-transform-values: '') { ... }

Description

Hide element, before slide-in-right or slide-in-left

Parameters

NameDescriptionTypeDefault value
$animation-duration

slide-in and fade-in duration

Number.5
$has-fade-effect

should add fade effect

Booleanfalse
$has-fade-out-delay

if true, element will hide, only after slide-down-out

Booleanfalse
$fade-out-delay

props for update fade-out delay after slide-down-out

Number$animation-duration
$additional-transform-values

additional transition values

String''

Example

.open-trigger {
  margin: auto;

  width: 100px;
  height: 20px;

  color: white;
  text-align: center;

  background-color: black;
}

.side-bar {

  $animation-in-duration: 1;
  $animation-out-duration: 1;
  $additional-transform-values: '';
  $has-fade-effect: true;
  $has-fade-out-delay: true;

  position: fixed;
  top: 0;
  bottom: 0;

  width: 300px;
  background-color: black;

  //side-bar is hidden on start
  @include slide-out-x() {
    right: 100%;
  }

  &_open {
    @include slide-in-right();
  }

  &_with-fade {
    @include slide-out-x($animation-out-duration, $has-fade-effect) {
      right: 100%;
    }
  }

  &_with-fade-out-delay {
    @include slide-out-x($animation-out-duration, $has-fade-effect, $has-fade-out-delay) {
      right: 100%;
    }
  }

  &_with-fade#{&}_open, &_with-fade-out-delay#{&}_open {
    @include slide-in-right($animation-in-duration, $has-fade-effect);
  }

}
//side-bar_with-fade
//side-bar_with-fade-out-delay
<div class="side-bar side-bar_with-fade-out-delay"></div>
<div class="open-trigger" onclick="document.querySelector('.side-bar').classList.toggle('side-bar_open')">Close/Open</div>

Requires

center-inside-relative

mixins

absolute-center

@mixin absolute-center($axis: both, $first-size: 0, $height: 0) { ... }

Description

Mixin that aligns inside a relative block, using absolute coordinates and negative margins

Parameters

NameDescriptionTypeDefault value
$axis

centering axis

Stringboth
$first-size

with or height

Number0
$height

block height

Number0

Example

$block-width: 50px;
$block-height: 50px;

.relative-block {
  position: relative;
  height: 400px;
  background-color: silver;
}

.center-block {
  width: $block-width;
  height: $block-height;

  font-size: 10px;
  line-height: $block-height;
  text-align: center;
  color: white;

  background-color: black;
  border-radius: 50%;

  //centring for x and y inside relative block
  &_relative-center-both {
    @include absolute-center(both, $block-width, $block-height);
  }

  //centring for y inside relative block
  &_relative-center-y {
    @include absolute-center(y, $block-height);
  }

  //centring for x inside relative block
  &_relative-center-x {
    @include absolute-center(x, $block-width);
  }

}

<div class="relative-block">
  <div class="center-block center-block_relative-center-both">XY</div>
  <div class="center-block center-block_relative-center-x">X</div>
  <div class="center-block center-block_relative-center-y">Y</div>
</div>

transform-center

@mixin transform-center($axis: both, $additionalTransform: '') { ... }

Description

Mixin that aligns inside a relative block, using transform: translate methods

Parameters

NameDescriptionTypeDefault value
$axis

centering axis

Stringboth
$additionalTransform

transform values that will be add to center translate values

String''

Example

.relative-block {
  position: relative;
  height: 400px;
  background-color: silver;
}

.center-block {
  $block-width: 50px;
  $block-height: 50px;

  width: $block-width;
  height: $block-height;

  font-size: 10px;
  line-height: $block-height;
  text-align: center;
  color: white;

  background-color: black;
  border-radius: 50%;


  //centring for x and y inside relative block
  &_transform-center-both {
    @include transform-center();
  }

  //centring for y inside relative block
  &_transform-center-y {
    @include transform-center(y);
  }

  //centring for x inside relative block
  &_transform-center-x {
    @include transform-center(x);
  }

  //centring for x and y inside relative block, and rotate to 45deg
  &_transform-center-both-rotate-45 {
    @include transform-center(both, rotate(45deg));
  }

}

<div class="relative-block">
  <div class="center-block center-block_transform-center-both">XY</div>
  <div class="center-block center-block_transform-center-x">X</div>
  <div class="center-block center-block_transform-center-y">Y</div>
</div>

helpers

functions

if-else

@function if-else($conditional, $if-true, $else) { ... }

Description

Return result relative conditional

Parameters

NameDescriptionTypeDefault value
$conditional

conditional

Boolean—
$if-true

will returned if conditional === true

Any—
$else

will returned if conditional !== true

Any—

Example

$media-queries-value: if-else($is-mobile-first == true, min-width, max-width);

Used by

get-map-prop-or-default

@function get-map-prop-or-default($map, $search-key, $default-value: '') { ... }

Description

Return map value by key-name or default value if key not founded

Parameters

NameDescriptionTypeDefault value
$map

map with props

Map—
$search-key

key which will search in map

Any—
$default-value

will returned if key dont found in map

Any''

Example

$fade-in-duration: get-map-prop-or-default($settings, animation-duration, .5);

Used by

keyframes

mixins

keyframes-rotate-360-z

@mixin keyframes-rotate-360-z() { ... }

Description

Rotate element 360deg right by z axis

Parameters

None.

Example

//include animation keyframe with need duration in common sass file
//@include keyframes-rotate-360-z(right);
//@include keyframes-rotate-360-z(left);


//animation name like mixin name with duration, but with out 'keyframes-'
.preloader {
  display: inline-block;

  margin: 40px;

  width: 40px;
  height: 40px;
  background-color: red;

  &_rotate-z-right {
    animation: rotate-360-z_right 1.5s linear infinite;
  }

  &_rotate-z-left {
    animation: rotate-360-z_left 1.5s linear infinite;
  }

}

<div class="preloader preloader_rotate-z-right"></div>
<div class="preloader preloader_rotate-z-left"></div>

Throws

  • mixin keyframes-rotate-360-z must have duration, right or left

Requires

keyframes-rotate-360-x

@mixin keyframes-rotate-360-x() { ... }

Description

Rotate element 360deg right by x axis

Parameters

None.

Example

//include animation keyframe with need duration in common sass file
//@include keyframes-rotate-360-x(right);
//@include keyframes-rotate-360-x(left);


//animation name like mixin name with duration, but with out 'keyframes-'
.preloader {
  display: inline-block;

  margin: 40px;

  width: 40px;
  height: 40px;
  background-color: red;

  &_rotate-x-right {
    animation: rotate-360-x_right 1.5s linear infinite;
  }

  &_rotate-x-left {
    animation: rotate-360-x_left 1.5s linear infinite;
  }

}

<div class="preloader preloader_rotate-x-right"></div>
<div class="preloader preloader_rotate-x-left"></div>

Throws

  • mixin keyframes-rotate-360-x must have duration, right or left

Requires

keyframes-rotate-360-y

@mixin keyframes-rotate-360-y() { ... }

Description

Rotate element 360deg forward by y axis

Parameters

None.

Example

//include animation keyframe with need duration in common sass file
//@include keyframes-rotate-360-y(forward);
//@include keyframes-rotate-360-y(backward);


//animation name like mixin name with duration, but with out 'keyframes-'
.preloader {
  display: inline-block;

  margin: 40px;

  width: 40px;
  height: 40px;
  background-color: red;

  &_rotate-y-forward {
    animation: rotate-360-y_forward 1.5s linear infinite;
  }

  &_rotate-y-backward {
    animation: rotate-360-y_backward 1.5s linear infinite;
  }

}

<div class="preloader preloader_rotate-y-forward"></div>
<div class="preloader preloader_rotate-y-backward"></div>

Throws

  • mixin keyframes-rotate-360-y must have duration, forward or backward

Requires

text

mixins

ellipsis

@mixin ellipsis() { ... }

Description

Show only first row of text, and add ellipsis, if string not contain in first row

Parameters

None.

Example

<div class="ellipsis-wrapper">
    <span class="my-class" >String longer that container</span>
</div>

.ellipsis-wrapper {
  width: 35px;
}

.my-class {
  font-family: "Arial", sans-serif;
  font-size: 14px;

  @include addEllipsis()
}

.ellipsis-wrapper span with my-class // Stri...
.ellipsis-wrapper span with out my-class // String
                                         // longer
                                         // that
                                         // container

z-layer

mixins

upp-to-z-layer

@mixin upp-to-z-layer($position-value: absolute, $offset-x: 0, $offset-y: 0) { ... }

Description

Mixin up element to Z layer

Parameters

NameDescriptionTypeDefault value
$position-value

with which position element will be raised

Stringabsolute
$offset-x

which offset will be from x sides

String0
$offset-y

which offset will be from y sides

String0

Example

.relative-block {
  position: relative;
  width: 400px;
  height: 400px;

  background-color: silver;

  &__z-layer-absolute {
    background-color: rgba(0, 82, 246, 0.4);
    @include upp-to-z-layer() {
      z-index: 1;
    };
  }

  &__z-layer-absolute-with-offset {
    background-color: rgba(0,0,0,.5);
    @include upp-to-z-layer(absolute, 10px, 10px) {
      z-index: 2;
    };
  }

  &__z-layer-fixed {
    background-color: rgba(0,0,0,.5);
    @include upp-to-z-layer(fixed, 100px, 100px) {
      z-index: 2;
    };
  }

}
<div class="relative-block">

  <div class="relative-block__z-layer-absolute"></div>
  <div class="relative-block__z-layer-absolute-with-offset"></div>
  <div class="relative-block__z-layer-fixed"></div>

</div>