kovtunos

// Button generator.
//
// Usage:
// @include button-variant(TEXT COLOR, BACKGROUND COLOR, BORDER COLOR);
// @include button-variant(TEXT COLOR, BACKGROUND COLOR);
%btn {
  margin: 0 .5em;
  transition: background-color ease .2s;
}

kovtunos

// Dotted underline border.
// https://jsfiddle.net/xandeadx/n16294kk/1/
//
// Usage:
// @include dotted-border;
// @include dotted-border(#bebebe, 3px);
// @include dotted-border(#bebebe, 1px, 3px);
@mixin dotted-border($color: #000, $dot-width: 1px, $separator-width: 1px) {
  background-image: linear-gradient(to right, $color $dot-width, transparent $dot-width);
  background-position: 0 bottom;

kovtunos

// Full width image banner.
//
// Usage:
// @include banner('../images/banner.jpg')
// @include banner('../images/banner.jpg', 700px)
// @include banner('../images/banner.jpg', 700px, center, center, #fff)
// @include banner('../images/banner.jpg', 700px, center, center, #fff, true)
// @include banner('../images/banner.jpg', 700px, center, center, #fff, false, rgba(255, 0, 0, .45))
@mixin banner($url, $height: 600px, $horizontal: center, $vertical: center, $fallback-color: null, $paralax: null, $overlay: null) {
  @if($overlay) {

kovtunos

// Center element.
// https://css-tricks.com/snippets/sass/centering-mixin/
//
// Usage:
// Arguments: horizontal, vertical
// Note: parent div should be in relative position.
//
// @include centered();
// @include centered(true, false);
// @include centered(false, true);

kovtunos

// Image circle.
//
// Usage:
// @include image-circle(125px)
// @include image-circle(125px, 5px, #bebebe)
@mixin image-circle($width, $border-width: null, $border-color: null) {
  margin: 0 auto;
  width: $width;

  img {

kovtunos

// Iconic font mapping.
//
// Usage:
// @include icon(a);
// @include icon(b);
@mixin icon($letter) {
  .icon {
    &.icon-#{$letter}::before {
      content: '#{$letter}';
    }

kovtunos

// Font size calculation.
@mixin font-size($size, $compute-line-height: false) {
  font-size: #{strip-unit($size)}px;
  font-size: rem($size);
  @if $compute-line-height == true {
    line-height: #{floor($line-height-base * $size)}px;
  }
}

kovtunos

// Clearfix.
// Works in IE6 and up.
// http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
//
// Usage: @extend %clearfix;
%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;

kovtunos

a {
  color: #fff;
  position: relative;
  text-decoration: none;

  &:hover {
    &::after {
      border: 1px solid #fff;
      bottom: -5px;
      content: '';

kovtunos

li {
  position: relative;
  
  &::before {
    @include triangle(12px, #fff, right);
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    position: absolute;