General

functions

calc-column-width

@function calc-column-width($cols: $base-col-number) { ... }

Description

Calculates column width from base columns number and then outputs percentage.

Output

.test {
  width: 10%;
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

Total number of columns.

Number$base-col-number

Example

.test {
  width: calc-column-width(10);
}

Used by

Author

  • Ivan Ruzevic

calc-dynamic-size

@function calc-dynamic-size($min-size, $max-size, $min-width, $max-width) { ... }

Description

Calculate dynamic sizes using linear function for calculations.

Output

.test {
  font-size: calc(0.1374 * 100vw + -64.74809px);
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$min-size

Minimal size after after responsiveness.

Size none
$max-size

Maximal size after after responsiveness.

Size none
$min-width

Minimal breakpoint to stop corrections.

Size none
$max-width

Max breakpoint to stop corrections.

Size none

Example

.test {
  font-size: calc-dynamic-size(10px, 100px, mobile, desktop);
}

Requires

Author

  • Ivan Ruzevic

calc-grid-width

@function calc-grid-width($cols: $base-col-number) { ... }

Description

Calculates grid width from base columns number and then outputs percentage.

Output

.test {
  width: 83.33333%;
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

Total number of columns.

Number$base-col-number

Example

.test {
  width: calc-grid-width(10);
}

Used by

Author

  • Ivan Ruzevic

em

@function em($pixels, $context) { ... }

Description

Transforms the pixel value to em value.

If context is not provided, it will be pulled from the $base-font-size.

Output

.test {
  font-size: 20px;

  &__subelement {
     font-size: 0.5em;
  }

  &__second-subelement {
     font-size: 0.25em;
  }
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pixels

The pixel value that should be converted to em.

Number none
$context

The relative context. Defaults to relative element with font-size defined.

Number none

Example

.test {
  font-size: 20px;

  &__subelement {
     font-size: em(10px); // Will be 0.5em.
  }

  &__second-subelement {
     font-size: em(10, 40); // Will be 0.25em.
  }
}

Requires

Author

  • Denis Zoljom

global-config

@function global-config($key) { ... }

Description

Function returns global config variable from Eightshift-frontend-libs setup. It expects $global-config key to be available. If the key is not available there is no warning nor error, just null returned.

Map

$globalConfig: (
  useRemBaseSize: true,
);

Output

.test {
  width: 2rem;
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

Key from global manifest config.

String none

Example

.test {
  @if (global-config(useRemBaseSize)) {
			width: 2rem;
    ...
  }
}

Throws

  • ERROR: $global-config variable doesnt exist!

Requires

Author

  • Karlo Volf

global-settings

@function global-settings($keys) { ... }

Description

Function returns global_settings variable from Eightshift-frontend-libs setup. It expects $$global-variables key to be available.

Map

$globalVariables: (
  containers: (
    default: "1330px"
  ),
);

Output

.test {
  width: 1330px;
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$keys

Map keys from global settings.

String none

Example

.test {
  width: global-settings(containers, default);
}

Throws

  • ERROR: $global-settings variable doesnt exist!

Requires

Author

  • Ivan Ruzevic

line-height

@function line-height($pixels, $context) { ... }

Description

Transforms the line-height to relative value.

If context is not provided, it will be pulled from the $base-font-size. Line height will be specified without any unit.

Output


// $base-font-size = 20.

.test {
  &__subelement {
     line-height: 1;
  }

  &__second-subelement {
     line-height: 1.19;
  }
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pixels

The pixel value that should be converted to relative value.

Number none
$context

The relative context. Defaults to $base-font-size.

Number none

Example

.test {
  font-size: 20px;

  &__subelement {
     font-size: line-height(20);
  }

  &__second-subelement {
     font-size: line-height(38, 32);
  }
}

Requires

Author

  • Denis Zoljom

map-get-deep

@function map-get-deep($map, $keys) { ... }

Description

Returns an item from map that is nested multiple times.

Map

$map: (
  test2: (
    test1: (
      test: 50%,
    ),
  ),
);

Output

.test {
  width: 50%;
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to search.

String none
$keys

List all keys to find.

String none

Example

.test {
  width: map-get-deep($map, test2, test1, test);
}

Throws

  • ERROR: Specified index does not exist in map #{$map}, with value: #{$key}

Used by

Author

  • Ivan Ruzevic

map-get-strict

@function map-get-strict($map, $key) { ... }

Description

Returns an item from map. Function behaves the same as native map-get() but it adds additional error handling when trying to get undefined keys.

Map

$map: (
  test: 50%,
);

Output

.test {
  width: 50%;
}

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to search.

String none
$key

Map key to find.

String none

Example

/* All good */
.test {
  width: map-get-strict($map, test);
}

/* Throws error on build */
.test {
  width: map-get-strict($map, nonexistentKey);
}

Throws

  • ERROR: Specified index does not exist in map #{$map}, with value: #{$key}

Used by

Author

  • Ivan Ruzevic

map-reverse

@function map-reverse($map) { ... }

Description

Returns an the same map only flipped in reverse.

Map

$map: (
  test: 50%,
  test2: 30%,
  test3: 20%,
);

Output

$map: (
  test3: 20%,
  test2: 30%,
  test: 50%,
);

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to flip.

String none

Example

$test: map-reverse($map);

Used by

Author

  • Ivan Ruzevic

strip-unit

@function strip-unit($number) { ... }

Description

Strips the unit from the passed value

Output

$width: 960px;
$unitless-width: strip-unit($width); // 960

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

The number to remove unit from.

Number none

Used by

Author

mixins

box-sizing

@mixin box-sizing($border-box: border-box) { ... }

Description

Outputs box sizing value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$border-box

Value to apply to box-sizing

Stringborder-box

Example

.test {
  @include box-sizing;
}

Output

.test {
  box-sizing: border-box;
}

Author

  • Ivan Ruzevic

column-offset-modifiers

@mixin column-offset-modifiers($cols: $base-col-number, $wrapper, $selector: margin-left) { ... }

Description

Mixin that takes calc-column-width mixin and creates modifier classes from it. Used by flex grid.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

Total number of columns.

String$base-col-number
$wrapper

Wrap output item with additional markup.

String none
$selector

HTML valid selector. Define offset type used. Default: .

Stringmargin-left

Example

.test {
  @include column-offset-modifiers;
}
.test {
  @include column-offset-modifiers($wrapper: '.item');
}

Output

.test--1 {
  margin-left: 100%;
}

.test--2 {
  margin-left: 50%;
}
.test--1 .item {
  margin-left: 100%;
}
.test--2 .item {
  margin-left: 50%;
}

Requires

Author

  • Ivan Ruzevic

flex-column-width-modifiers

@mixin flex-column-width-modifiers($cols: $base-col-number, $wrapper) { ... }

Description

Mixin that takes flex-column-width mixin and creates modifier classes from it. Used for flex grid with columns.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

Total number of columns

String$base-col-number
$wrapper

Wrap output item with additional markup

String none

Example

.test {
  @include column-width-modifiers;
}
.test {
  @include column-width-modifiers($wrapper: '.item');
}

Output

.test--1 {
  flex: 0 0 100%;
  max-width: 100%;
}
.test--2 {
  flex: 0 0 50%;
  max-width: 50%;
}
.test--1 .item {
  flex: 0 0 100%;
  max-width: 100%;
}
.test--2. item {
  flex: 0 0 50%;
  max-width: 50%;
}

Requires

flex-column-width

@mixin flex-column-width($cols: $base-col-number) { ... }

Description

Mixin that creates flex width for column.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

Total number of columns

String$base-col-number

Example

.test {
  @include flex-column-width;
}

Output

.test {
  flex: 0 0 100%;
  max-width: 100%;
}

Requires

Used by

flex-grid-width-modifiers

@mixin flex-grid-width-modifiers($cols: $base-col-number, $wrapper) { ... }

Description

Mixin that takes flex-grid-width mixing and creates modifier classes from it. Used for flex grid.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

Total number of columns.

String$base-col-number
$wrapper

Wrap output item with additional markup.

String none

Example

.test {
  @include flex-grid-width-modifiers;
}
.test {
  @include flex-grid-width-modifiers($wrapper: '.item');
}

Output

.test--1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}
.test--2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}
.test--1 .item {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}
.test--2 .item {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

Requires

flex-grid-width

@mixin flex-grid-width($cols: $base-col-number) { ... }

Description

Mixin that creates flex width of one column based on the column number.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

Total number of columns

String$base-col-number

Example

.test {
  @include flex-grid-width;
}

Output

.test {
  flex: 0 0 100%;
  max-width: 100%;
}

Requires

Used by

flex-horizontal-align-modifiers

@mixin flex-horizontal-align-modifiers() { ... }

Description

Mixin that creates flex horizontal align modifiers.

Parameters

None.

Example

.test {
  @include flex-horizontal-align-modifiers;
}

Output

.test--left {
  justify-content: flex-start;
}
.test--center {
  justify-content: center;
}
.test--right {
  justify-content: flex-end;
}

flex-vertical-align-modifiers

@mixin flex-vertical-align-modifiers() { ... }

Description

Mixin that creates flex vertical align modifiers.

Parameters

None.

Example

.test {
  @include flex-vertical-align-modifiers;
}

Output

.test--top {
  align-self: flex-start;
}
.test--center {
  align-self: center;
}
.test--bottom {
  align-self: flex-end;
}

flex-container

@mixin flex-container($layout, $gutter, $col-count, $horizontal, $vertical, $order) { ... }

Description

Mixin that creates flex grid. It should be applied to the container element that will act as grid row. All of the child elements will act as grid columns.

Parameters to configure:

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$layout

Column width relative to the number of columns. If defined as a number, all columns will be the same width, and if set as a list, width will be set sequentially for each item.

String none
$gutter

Spacing between each item.

String none
$col-count

Max number of columns.

String none
$horizontal

Horizontal alignment of the items. Uses values for justify-content property.

String none
$vertical

Vertical alignment of the items. Uses values for align-items property.

String none
$order

List of item order overrides.

String none

font-face

@mixin font-face($name, $path, $weight: 400, $style: normal, $exts: woff2 woff) { ... }

Description

Mixin that creates @font-face definitions. This mixin should ideally be included in a separate SCSS partial and relatively 'early' in SCSS structure.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name of the font family.

String none
$path

Path to the font variation file (relative to the public/ folder)

String none
$weight

Weight of the font variation.

Number400
$style

Style of the font variation.

Stringnormal
$exts

File extensions of the font files.

Stringwoff2 woff

Example

@include font-face('FontName', 'FontName-Regular');
@include font-face('FontName', 'FontName-Bold', 700);
@include font-face('FontName2', 'FontName2', 500, normal, woff);

Output

  @font-face {
    font-family: "FontName";
    font-weight: 400;
    font-style: normal;
    src: url("FontName-Regular.woff2") format("woff2"), url("FontName-Regular.woff") format("woff");
    font-display: swap;
  }

  @font-face {
    font-family: "FontName";
    font-weight: 700;
    font-style: normal;
    src: url("FontName-Bold.woff2") format("woff2"), url("FontName-Bold.woff") format("woff");
    font-display: swap;
  }

  @font-face {
    font-family: "FontName2";
    font-weight: 500;
    font-style: normal;
    src: url("FontName2.woff") format("woff");
    font-display: swap;
  }

font-smoothing

@mixin font-smoothing($type) { ... }

Description

Mixin that creates font smoothing options.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

Type of font smoothing. Default: antialiased.

String none

Example

.test {
  @include font-smoothing;
}

Output

.test {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

for-each-attribute

@mixin for-each-attribute($map) { ... }

Description

This mixin is meant to be used mostly as a helper in other mixins.

It can be used as separating commonly used attributes and their values in a map that you can later reuse by simply calling this mixin with $map as a parameter.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map that you want to spread.

Map none

Example

$map: (
  display: inline-block,
  margin-left: 10px,
  transform: scale(3),
  padding: 300px,
);

.first-class {
  @include for-each-attribute($map);
}

.second-class {
  @include for-each-attribute($map);
}

Output

.first-class {
  display: inline-block;
  margin-left: 10px;
  transform: scale(3);
  padding: 300px;
}

.second-class {
  display: inline-block;
  margin-left: 10px;
  transform: scale(3);
  padding: 300px;
}

Used by

Author

  • Karlo Volf

grid-offset-modifiers

@mixin grid-offset-modifiers($cols, $wrapper, $selector) { ... }

Description

Mixin that takes calc-grid-width mixin and creates modifier classes from it. Used by flex grid.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$cols

Total number of columns. Default: $base-col-number.

String none
$wrapper

Wrap output item with additional markup.

String none
$selector

HTML valid selector. Define offset type used. Default: margin-left.

String none

Example

.test {
  @include grid-offset-modifiers;
}
.test {
  @include grid-offset-modifiers($wrapper: '.item');
}

Output

.test--1 {
  margin-left: 8.33333%;
}
.test--2 {
  margin-left: 16.66667%;
}
.test--1 .item {
  margin-left: 8.33333%;
}
.test--2 .item {
  margin-left: 16.66667%;
}

Requires

inline-font-colors

@mixin inline-font-colors($colors) { ... }

Description

Mixin that will create a Gutenberg specific inline color class. This enables coloring parts of the words.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$colors

Map of the colors that need to be passed.

Map none

Example

$heading: (
    colors: (
       primary: global-settings(colors, primary),
       gulf: global-settings(colors, gulf),
    )
);

.heading {
    @include inline-font-colors(map-get-strict($heading, colors));
}

Output

  .heading .has-primary-color {
      color: #011751;
  }
  .heading .has-gulf-color {
      color: #FFC660;
  }

Author

  • Denis Ċ½oljom

custom-bullets

@mixin custom-bullets($bullet-color, $bullet-size, $bullet-spacing) { ... }

Description

Mixin that creates custom bullet list style.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$bullet-color

Set bullet custom color. Default: $base-primary-color.

String none
$bullet-size

Set bullet custom size. Default: 10px.

String none
$bullet-spacing

Set bullet custom spacing. Default: 25px.

String none

Example

.test {
  @include custom-bullets;
}

Output

.test {
  list-style: none;
  position: relative;
  padding-left: 25px;
}
.test::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  background-color: #D8262C;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
}

modifiers-deep

@mixin modifiers-deep($map, $selector, $wrapper) { ... }

Description

Mixin that will output modifier classes for specific selector from map key.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to search for.

String none
$selector

HTML valid selector.

String none
$wrapper

Wrap output item with additional markup

Map: $test: ( test: ( black: $base-black-color, white: $base-white-color, primary: $base-primary-color, ) );

String none

Example

.test {
  @include modifiers-deep($test, test, color);
}

Output

.test--black {
  color: #000000;
}
.test--white {
  color: #FFFFFF;
}
.test--primary {
  color: #D8262C;
}

Requires

modifiers-range

@mixin modifiers-range($map, $selector) { ... }

Description

Mixin that will output modifier classes for specific number range from map key.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to search for.

String none
$selector

HTML valid selector.

Map: $test: ( test: ( min: 0, max: 300, step: 10, ), );

String none

Example

.test {
  @include modifiers-range($test, test, padding-top);
}

Output

.test--0 {
  padding-top: 0px;
}
.test--10 {
  padding-top: 10px;
}
.test--20 {
  padding-top: 20px;
}
.test--30 {
  padding-top: 30px;
}

Requires

modifiers

@mixin modifiers($map, $selector, $wrapper) { ... }

Description

Mixin will output modifiers classes for specific selector.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to search for.

String none
$selector

a valid HTML selector.

String none
$wrapper

Wrap output item with additional markup

Map: $test: ( black: $base-black-color, white: $base-white-color, primary: $base-primary-color, );

String none

Example

.test {
  @include modifiers($test, color);
}

Output

.test--black {
  color: #000000;
}
.test--white {
  color: #FFFFFF;
}
.test--primary {
  color: #D8262C;
}

placeholder

@mixin placeholder() { ... }

Description

Mixin that creates input specific selectors. Used to customise placeholders in different browsers.

Parameters

None.

Example

.test {
  @include placeholder {
    color: $base-black-color;
  };
}

Output

.test::-webkit-input-placeholder {
  color: #000000;
}
.test:-moz-placeholder {
  color: #000000;
}
.test::-moz-placeholder {
  color: #000000;
}
.test:-ms-input-placeholder {
  color: #000000;
}

responsive-modifiers

@mixin responsive-modifiers($map, $key) { ... }

Description

Mixin that creates output modifiers for specific map key, with provided media breakpoints. Selectors must be valid html selectors. It operates the same way as "responsive" mixin, except it will output modifier classes. Also supports multiple nested maps as a key.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to search for.

String none
$key

Map key to find.

Map: $test: ( sizes: ( mobile: ( default: ( font-size: 64px, line-height: 0.92, ), big: ( font-size: 42px, line-height: 1.12, ), ), tablet: ( default: ( font-size: 115px, line-height: 0.92, ), big: ( font-size: 90px, line-height: 1, ), ), ) );

String none

Example

.test {
  @include responsive-modifiers($test, sizes);
}

Output

.test--default {
  font-size: 64px;
  line-height: 0.92;
}
.test--big {
  font-size: 42px;
  line-height: 1.12;
}
\@media (min-width: 768px) {
  .test--default {
    font-size: 115px;
    line-height: 0.92;
  }
  .test--big {
    font-size: 90px;
    line-height: 1;
  }
}

Throws

  • ERROR: Responsive Map modifierMap items are not map please check: #{$map} with key: #{modifierMap}

  • ERROR: Responsive Map breakpointMap items are not map please check: #{$map} with key: #{breakpointMap}

Requires

responsive-visibility-selectors

@mixin responsive-visibility-selectors($breakpoints) { ... }

Description

Mixin that will output provided contend wrapped in responsive selectors from $media-blender breakpoints map. Unlike responsive-selectors mixing this one will wrap first and last item in a separate breakpoint. Responsive configuration is Desktop First!!! Used for setting up responsiveness visibility for a selector.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoints

Map from media-blender breakpoints.

Map: $media-breakpoints: ( small: 0 543, mobile: 544 767, tablet: 768 991, desktop: 992 1199, large: 1200 ) !default;

String none

Example

.test {
  @include responsive-selectors-visibility {
    width: 10%;
  }
}

Output

\@media (min-width: 1200px) {
  .test-large {
    display: none;
  }
}
\@media (min-width: 992px) and (max-width: 1199px) {
  .test-desktop {
    display: none;
  }
}
\@media (min-width: 768px) and (max-width: 991px) {
  .test-tablet {
    display: none;
  }
}
\@media (min-width: 544px) and (max-width: 767px) {
  .test-mobile {
    display: none;
  }
}
\@media (max-width: 543px) {
  .test-small {
    display: none;
  }
}

Requires

responsive-selectors

@mixin responsive-selectors($breakpoints) { ... }

Description

Mixin that will output provided contend wrapped in responsive selectors from $media-blender breakpoints map. Responsive configuration is Desktop First!!!

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoints

Map from media-blender breakpoints.

Map: $media-breakpoints: ( small: 0 543, mobile: 544 767, tablet: 768 991, desktop: 992 1199, large: 1200 ) !default;

String none

Example

.test {
  @include responsive-selectors {
    width: 10%;
  }
}

Output

.test-large {
  width: 10%;
}
\@media (max-width: 1199px) {
  .test-desktop {
    width: 10%;
  }
}
\@media (max-width: 991px) {
  .test-tablet {
    width: 10%;
  }
}
\@media (max-width: 767px) {
  .test-mobile {
    width: 10%;
  }
}
\@media (max-width: 543px) {
  .test-small {
    width: 10%;
  }
}

Requires

responsive

@mixin responsive($map, $key) { ... }

Description

Mixin that creates output for specific map key or from map that is nested multiple times, with provided media breakpoints. Selectors must be valid html selectors. Also supports multiple nested maps as a key.

Map

$test: (
  test: (
    mobile: (
      font-size: 64px,
      line-height: 0.92,
    ),
    tablet: (
      font-size: 42px,
      line-height: 1.12,
    ),
  )
);

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to search for.

String none
$key

Map key to find.

String none

Example

.test {
  @include responsive($test, test);
}
.test {
  @include responsive($test, test2, test1);
}

Output

.test {
  font-size: 64px;
  line-height: 0.92;
}
\@media (min-width: 768px) {
  .test {
    font-size: 42px;
    line-height: 1.12;
  }
}

Throws

  • ERROR: Responsive Map breakpointMap items are not map please check: #{$map} with key: #{breakpointMap}

Requires

stretch

@mixin stretch($top, $right, $bottom, $left, $position) { ... }

Description

Mixin that creates output used for definition of positions.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$top

Top Position. Default: 0.

String none
$right

Right Position. Default: 0.

String none
$bottom

Bottom Position. Default: 0.

String none
$left

Left Position. Default: 0.

String none
$position

Position type. Default: absolute.

String none

Example

.test {
  @include stretch(20px, 30px, 40px, 30%, fixed);
}

Output

.test {
  position: fixed;
  top: 20px;
  right: 30px;
  bottom: 40px;
  left: 30%;
}

text-align-modifiers

@mixin text-align-modifiers() { ... }

Description

Mixin that create text align modifiers.

Parameters

None.

Example

.test {
  @include text-align-modifiers;
}

Output

.test--left {
  text-align: left;
}
.test--center {
  text-align: center;
}
.test--right {
  text-align: right;
}

underline-text

@mixin underline-text($thickness: 10%, $duration: .5s, $timing-function: cubic-bezier(0.79, 0.01, 0.22, 0.99), $color: currentColor, $wrapper: false, $element: .underline-text, $state: hover) { ... }

Description

This mixin has 2 possible way of using it.

Example 1

Include the mixin in the class you want to hover over. Text you want to underline needs to have attached class .underline-text or you can send your custom class name via parameter $element.

Also, you have to set the $wrapper parameter to true.

Example 2

Just include mixin in whichever element you want. In this case, the parameter $wrapper should stay unchanged(value: false).

Other parameters are optional and they allow you customize your transition.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$thickness

Thickness of the line in percentage. Percentage refers to the font size.

Percentage10%
$duration

How long animation lasts.

Seconds.5s
$timing-function

Execution speed function.

Timing-functioncubic-bezier(0.79, 0.01, 0.22, 0.99)
$color

Color of the line.

HexcurrentColor
$wrapper

If wrapper is used as hover reference.

Booleanfalse
$element

Element on which you want underline.

String.underline-text
$state

The state in which it becomes underline element.

Stringhover

Example

.test {
  @include underline-text();
}

.test2 {
  @include underline-text(5%, .7s, ease-in, #132031, true, ".link", hover);
}

.test3 {
  @include underline-text($timing-function: ease, $color: #000000, $wrapper: true, $element: ".target-text");
}

Output

 .test {
   display: inline;
   transition: background-size 0.5s cubic-bezier(0.79, 0.01, 0.22, 0.99) 0s, background-position 0s step-end 0.5s;
   text-decoration: none;
   background-image: linear-gradient(transparent 90%, currentColor 90%, currentColor 100%);
   background-repeat: no-repeat;
   background-position-y: bottom;
   background-size: 0% 100%;

   &:hover {
     background-position-x: right;
     background-position-y: bottom;
     background-size: 100% 100%;
   }
 }

 .test2 {
   text-decoration: none;

   .link {
     display: inline;
     transition: background-size 0.7s ease-in 0s, background-position 0s step-end 0.7s;
     text-decoration: none;
     background-image: linear-gradient(transparent 95%, #132031 95%, #132031 100%);
     background-repeat: no-repeat;
     background-position-y: bottom;
     background-size: 0% 100%;
   }

   &:hover .link {
     background-position-x: right;
     background-position-y: bottom;
     background-size: 100% 100%;
   }
 }

 .test3 {
   text-decoration: none;

   .target-text {
     display: inline;
     transition: background-size 0.5s ease 0s, background-position 0s step-end 0.5s;
     text-decoration: none;
     background-image: linear-gradient(transparent 90%, #000000 90%, #000000 100%);
     background-repeat: no-repeat;
     background-position-y: bottom;
     background-size: 0% 100%;
   }

   &:hover .target-text {
     background-position-x: right;
     background-position-y: bottom;
     background-size: 100% 100%;
   }
 }

Requires

Author

  • Karlo Volf

underline

@mixin underline($thickness: 2px, $duration: .3s, $timing-function: cubic-bezier(.79, .01, .22, .99), $color: currentColor, $breakpoint: 1080px) { ... }

Description

Mixin that will underline blocks elements. Each parameter is optional. Breakpoint is manually added with last parameter.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$thickness

Thickness of the line.

Pixel2px
$duration

How long animation lasts.

Seconds.3s
$timing-function

Execution speed function.

Timing-functioncubic-bezier(.79, .01, .22, .99)
$color

Color of the line.

HexcurrentColor
$breakpoint

Minimum width of the device. Classic media query.

Pixel1080px

Example

.test {
  @include underline();
}

.test2 {
  @include underline(4px, 0.5s, ease-in, #132031, 300px);
}

.test3 {
  @include underline($timing-function: ease, $color: #000000);
}

Output

.test {
  position: relative;

  &:hover {
    text-decoration: none;
  }

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.79, 0.01, 0.22, 0.99) 0s, transform-origin 0s step-end 0.3s;
    background-color: currentColor;
  }

  @media (min-width: 1080px) {
    &:hover::after {
      content: '';
      transform: scaleX(1);
      transform-origin: right center;
    }
  }
}

.test2 {
  position: relative;

  &:hover {
    text-decoration: none;
  }

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s ease-in 0s, transform-origin 0s step-end 0.5s;
    background-color: #132031;
  }

  @media (min-width: 300px) {
    &:hover::after {
      content: '';
      transform: scaleX(1);
      transform-origin: right center;
    }
  }
}

.test3 {
  position: relative;

  &:hover {
    text-decoration: none;
  }

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease 0s, transform-origin 0s step-end 0.3s;
    background-color: #000000;
  }

  @media (min-width: 1080px) {
    &:hover::after {
      content: '';
      transform: scaleX(1);
      transform-origin: right center;
    }
  }
}

Author

  • Karlo Volf

placeholders

absolute-center

%absolute-center { ... }

Description

Absolutely positions an element and centers it.

Output

.test {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

Example

.test {
  @extend %absolute-center;
}

Author

  • Ivan Grginov

bg-image

%bg-image { ... }

Description

Placeholder that is used to set size of element background image to cover.

Output

.test {
  background: {
    size: cover;
    position: center;
    repeat: no-repeat;
  }
}

Example

.test {
  @extend %bg-image;
}

Author

  • Ivan Ruzevic

button-reset

%button-reset { ... }

Description

Placeholder that is used to reset browser default styles.

Output

.test {
  padding: 0;
  border: 0;
  appearance: none;
  font-family: inherit;
}

Example

.test {
  @extend %button-reset;
}

Author

  • Ivan Ruzevic

clearfix

%clearfix { ... }

Description

Placeholder that is used to add clearfix after floating divs.

Output

.test {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

Example

.test {
  @extend %clearfix;
}

Author

  • Ivan Ruzevic

dl-reset

%dl-reset { ... }

Description

Placeholder that is used to reset browser default styles for dl.

Output

.test {
  padding: 0;
  margin: 0;
}

Example

.test {
  @extend %dl-reset;
}

Author

  • Ivan Ruzevic

heading-reset

%heading-reset { ... }

Description

Placeholder that is used to reset browser default styles for heading.

Output

.test {
  padding: 0;
  margin: 0;
}

Example

.test {
  @extend %heading-reset;
}

Author

  • Ivan Ruzevic

input-reset

%input-reset { ... }

Description

Placeholder that is used to reset browser default styles for inputs.

Output

.test {
  padding: 0;
  border: none;
  appearance: none;
}

Example

.test {
  @extend %input-reset;
}

Author

  • Ivan Ruzevic

list-reset

%list-reset { ... }

Description

Placeholder that is used to reset browser default styles for lists.

Output

.test {
  padding: 0;
  margin: 0;
  list-style: none;
}

Example

.test {
  @extend %list-reset;
}

Author

  • Ivan Ruzevic

paragraph-reset

%paragraph-reset { ... }

Description

Placeholder that is used to reset browser default styles for paragraph.

Output

.test {
  padding: 0;
  margin: 0;
}

Example

.test {
  @extend %paragraph-reset;
}

Author

  • Ivan Ruzevic

site-padding-correction

%site-padding-correction { ... }

Description

Placeholder that is used to add default negative margin on containers. Used to move grid containers back to right place.

Output

.test {
  margin-left: -25px;
  margin-right: -25px;
}

Example

.test {
  @extend %site-padding-correction;
}

Author

  • Ivan Ruzevic

site-padding

%site-padding { ... }

Description

Placeholder that is used to add default padding on containers.

Output

.test {
  padding-left: 25px;
  padding-right: 25px;
}

Example

.test {
  @extend %site-padding;
}

Author

  • Ivan Ruzevic

visually-hidden

%visually-hidden { ... }

Description

Hide information visually but keep it available to screen reader and other assistive technology. Documentation

Output

.test {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Example

.test {
  @extend %visually-hidden;
}

Author

  • Ivan Grginov