// Clearfix // Source: nicolasgallagher.com/micro-clearfix-hack/ // // For modern browsers // 1. The space content is one way to avoid an Opera bug when the // contenteditable attribute is included anywhere else in the document. // Otherwise it causes space to appear at the top and bottom of elements // that are clearfixed. // 2. The use of `table` rather than `block` is only necessary if using // `:before` to contain the top-margins of child elements. @mixin clearfix {

&:before,
  &:after {
  content: ' '; // 1
  display: table; // 2
}

&:after {
  clear: both;
}

}

@mixin vendor-prefix($name, $argument) {

-webkit-#{$name}: #{$argument};
-ms-#{$name}: #{$argument};
-moz-#{$name}: #{$argument};
-o-#{$name}: #{$argument};
#{$name}: #{$argument};

}

@mixin margin-top-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {

margin-top: capline-bu($bu, $font-size, $line-height);

}

@mixin margin-bottom-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {

margin-bottom: baseline-bu($bu, $font-size, $line-height);

}

@mixin padding-top-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {

padding-top: capline-bu($bu, $font-size, $line-height);

}

@mixin padding-bottom-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {

padding-bottom: baseline-bu($bu, $font-size, $line-height);

}

@mixin box-shadow($shadow) {

-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;

}

@mixin font-face($font-family, $svg-font-id, $filepath, $weight: normal, $style: normal) {

@font-face {
  font-family: $font-family;
  font-style: $style;
  font-weight: $weight;
  src: url('#{$filepath}.eot');
  src: url('#{$filepath}.eot?#iefix') format('embedded-opentype'), // alternative replace this line with: src: local('\263A'), // for smileyface syntax
    url('#{$filepath}.woff') format('woff'),
    url('#{$filepath}.ttf') format('truetype'),
    url('#{$filepath}.svg##{$svg-font-id}') format('svg');
}

}

@mixin linear-gradient($color1, $color2) {

background: $color1;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $color1), color-stop(1, $color2));
background: -webkit-linear-gradient(top, $color1, $color2);
background: -moz-linear-gradient(top, $color1, $color2);
background: -o-linear-gradient(top, $color1, $color2);
background: -ms-linear-gradient(top, $color1, $color2);
background: linear-gradient(top, $color1, $color2);
filter: unquote('"progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$color1}", endColorstr="#{$color2}",GradientType=0)"');

}

@mixin headline-variant($size) {

font-size: $size;
margin-top: $heading-margin-top - capline-pixels($size, $line-height-regular);
padding-bottom: $heading-margin-bottom - baseline-pixels($size, $line-height-regular);

&.underline, &.cluster {
  margin-top: 55px - capline-pixels($size, $line-height-regular);
}

}

@mixin price-variant($size) {

font-size: $size;
$font-size-cent: ceil($size * $price-cent-factor);

> sup {
  font-size: $font-size-cent;
  top: floor(capline-pixels($size, $line-height-regular)) - ceil(capline-pixels($font-size-cent, $line-height-regular));
}

}

@mixin emphasis-variant($color, $inactive: false) {

color: $color;

mark {
  color: $color-bright;
  background-color: $color;
}

}

@mixin table-row-variant($variant, $color, $color-background, $theme-background-color) {

.table {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      &.#{$variant} > th,
      &.#{$variant} > td,
      > th.#{$variant},
      > td.#{$variant} {
        @if $variant == 'brand' or $variant == 'inactive' {
          background: $color-background;
        } @else {
          background: fallback-rgba($color-background, $table-bgr-color-alpha, $theme-background-color);
        }
        color: $color;
      }
    }
  }
}

@if $variant != 'inactive' {
  .table-hover {
    > tbody > tr:hover {
      &.#{$variant} > th,
      &.#{$variant} > td,
      > th.#{$variant},
      > td.#{$variant} {
        color: hsv-darken($color, 7%, true);
        @if $variant == 'brand' {
          background-color: hsv-darken($color-background, 7%, true);
        } @else {
          background-color: fallback-rgba($color-background, $table-bgr-color-hover-alpha, $theme-background-color);
        }
      }
    }
  }
}

}

@mixin table-striped-variant($color-odd, $color-odd-bg) {

> tbody > tr:nth-child(odd),
  > tbody > tr.odd {
  > th,
  > td {
    background-color: $color-odd-bg;
    color: $color-odd;
  }
}

&.table-hover {
  > tbody > tr:nth-child(odd):hover {
    > th,
    > td {
      background-color: hsv-darken($color-odd-bg, 7%, true);
      color: hsv-darken($color-odd, 7%, true);
    }
  }
}

}

@mixin box-sizing($box-model) {

-webkit-box-sizing: $box-model;
-moz-box-sizing: $box-model;
box-sizing: $box-model;

}

@mixin border-top-radius($radius) {

border-top-left-radius: $radius;
border-top-right-radius: $radius;

}

@mixin border-right-radius($radius) {

border-top-right-radius: $radius;
border-bottom-right-radius: $radius;

}

@mixin border-bottom-radius($radius) {

border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;

}

@mixin border-left-radius($radius) {

border-top-left-radius: $radius;
border-bottom-left-radius: $radius;

}

@mixin button-variant($color-text, $color-background, $color-border) {

color: $color-text;
background-color: $color-background;
border-color: $color-border;

&.focus,
&:focus {
  color: $color-text;
}

&.hover,
&:hover {
  color: $color-text;
  background-color: hsv-darken($color-background, 7%, true);
  border-color: hsv-darken($color-border, 7%, true);
}

&.active,
&:active {
  color: $color-text;
  background-color: hsv-darken($color-background, 13.75%, true);
  border-color: hsv-darken($color-border, 15%, true);
}

&.disabled,
&[disabled] {
  &,
  &.focus,
  &:focus,
    &.hover,
    &:hover {
    color: hsv-lighten($font-color-regular, 50%, true);
    background: hsv-lighten($color-element-background, 5%, true);
    border-color: hsv-lighten($color-element-border, 14%, true);
  }
}

}

@mixin badge-variant($color, $font-color: null) {

background-color: $color;
color: $font-color;

}

@mixin opacity($value) {

-moz-opacity: $value;
-khtml-opacity: $value;
opacity: $value;
$opacity-ie: ($opacity * 100);
-ms-filter: unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity-ie})');
filter: unquote('alpha(opacity=#{$opacity-ie})');

}

@mixin input-decoration-variant($background-color, $border-color, $theme-background-color) {

$calculated-border-color: hsv-darken($border-color, 15%, true);

.form-input {
  background-color: fallback-rgba($background-color, .05, $theme-background-color);
  border-color: $calculated-border-color;

  &.hover,
  &:hover {
    background-color: fallback-rgba($background-color, .1, $theme-background-color);
    border-color: hsv-darken($calculated-border-color, 7%, true);
  }

  &.focus,
  &:focus {
    background-color: $color-bright;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($calculated-border-color, 20%);
  }

  &.active,
  &:active {
    background-color: fallback-rgba($background-color, .15, $theme-background-color);
    border-color: hsv-darken($calculated-border-color, 15%, true);
  }
}

}

@mixin placeholder($color) {

&::-webkit-input-placeholder { color: $color; } // Safari, Chrome, Opera 15+
&:-moz-placeholder { color: $color; } // FF 4-18
&::-moz-placeholder { color: $color; } // FF 19+
&:-ms-input-placeholder { color: $color; } // IE10+

}

@mixin transition($transition, $type: '') {

-webkit-transition#{$type}: $transition;
-moz-transition#{$type}: $transition;
-ms-transition#{$type}: $transition;
-o-transition#{$type}: $transition;
transition#{$type}: $transition;

}

@mixin user-select($value) {

-webkit-user-select: $value;
-khtml-user-select: $value;
-moz-user-select: $value;
-o-user-select: $value;
user-select: $value;

}

@mixin pagination-variant($width, $height, $gutter) {

> li {
  > a,
  > span {
    width: $width;
    height: $height;
    margin: 0 ($gutter / 2);
  }
}

}

@mixin notification-variant($background-color, $border-color, $font-color: $font-color-regular) {

$calculated-border-color: hsv-darken($border-color, 15%, true);
$calculated-bgr-color: fallback-rgba($background-color, .05, $background-color-regular);

background-color: $calculated-bgr-color;
// background-color: rgba($background-color, .05); since alpha is to low
border-color: $calculated-border-color;
color: $font-color;

> .notification-badge {
  background-color: $font-color;
  color: $calculated-bgr-color;
}

> .close {
  &.focus,
  &:focus {
    color: hsv-darken($font-color, 21%, true); // -21%
  }

  &.hover,
  &:hover {
    color: hsv-darken($font-color, 7%, true); // -7%
  }

  &.active,
  &:active {
    color: hsv-darken($font-color, 15%, true); // -15%
  }
}

}

@mixin ellipsis() {

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

}

@mixin content-list-item-variant($name, $font-color, $background-color) {

.content-list-item-#{$name} {
  color: $font-color;
  background-color: $background-color;
}

a.content-list-item-#{$name} {
  color: $font-color;

  // focus = browser default - so not defined

  &.hover,
  &:hover {
    background-color: hsv-darken($background-color, 7%, true);
  }

  &.active,
  &:active {
    background-color: hsv-darken($background-color, 15%, true);
  }
}

}

@mixin tab-focus() {

// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;

}

@mixin form-control-focus($bgr-color, $color: $input-border-color-focus) {

$color-rgba: rgba(red($color), green($color), blue($color), .6);

&.focus,
&:focus {
  background-color: $bgr-color;
  border-color: $color;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba;
}

}

@mixin color-variant($name, $color, $saturation: false) {

.bg-#{$name} { background-color: $color; }

@if ($saturation) {
  .bg-#{$name}-25 { background-color: fallback-rgba($color, .25, $background-color-regular); }
  .bg-#{$name}-50 { background-color: fallback-rgba($color, .5, $background-color-regular); }
  .bg-#{$name}-75 { background-color: fallback-rgba($color, .75, $background-color-regular); }
}

}

@mixin container-fixed($offset: 0) {

// default
@if $grid-large-container-width {
  @media screen and (min-width: #{$grid-large-min}px) and (max-width: #{$grid-large-max}px) {
    width: (($grid-large-container-width + 1) * 1px) + $offset;
  }
}
// down-sizing
@if $grid-medium-container-width {
  @media screen and (max-width: #{$grid-medium-max}px) {
    width: (($grid-medium-container-width + 1) * 1px) + $offset;
  }
}
@if $grid-small-container-width {
  @media screen and (max-width: #{$grid-small-max}px) {
    width: (($grid-small-container-width + 1) * 1px) + $offset;
  }
}
@if $grid-extra-small-container-width {
  @media screen and (max-width: #{$grid-extra-small-max}px) {
    width: (($grid-extra-small-container-width + 1) * 1px) + $offset;
  }
}
// up-sizing
@if $grid-extra-large-container-width {
  @media screen and (min-width: #{$grid-extra-large-min}px) {
    width: (($grid-extra-large-container-width + 1) * 1px) + $offset;
  }
}

}