SCSS: mixins.scss

_mixins.scss

//----------------------------------------------------------------------------
// mixins.scss
//----------------------------------------------------------------------------

// ---------------------------------------------------------------------------
// CONVERTING PX TO EM

@function calc-em($target-px, $context) {
  @return ($target-px / $context) * 1em;
}

@mixin font-size($font-size: 16){
font-size : #{$font-size}px;
font-size : #{$font-size / 10}rem; }

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

// gradients

@mixin greygrad {
@include vertical($white, darken($greyLighter, 5%)); }

@mixin basegrad {
@include vertical($baseColor, darken($baseColor, 10%)); }

@mixin infograd {
@include vertical($infoColor, darken($infoColor, 10%)); }

@mixin inversegrad {
@include vertical($inversColor, darken($inversColor, 10%)); }

@mixin successgrad {
@include vertical($successColor, darken($successColor, 10%)); }

@mixin warninggrad {
@include vertical($warningColor, darken($warningColor, 10%)); }