scss mixin

nk-mixin.scss

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin nk-phone {
  @media (max-width: #{$tablet-width - 1px}) {
    @content;
  }
}

/* makes nested animations without naming very easy.
 if there's an animation that is heavly connected
 to a specific component, you can define it
 INSIDE the class definition and it will be
 automatically names and rooted
 EXAMPLE:
 .some-element {
    animation: 10s linear infinite;

    @include animation-keyframes {
      from {
        background-position: 0% 0%;
      }
      to {
        background-position: 114.2857% 0%;
      }
    }
  } */
@mixin animation-keyframes {
  $animation-name: unique-id();
  animation-name: $animation-name;

  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin scrolling-shadows($background-color: $default-background-color, $shadow-intensity: 0.2, $shadow-color: $default-shadow-color, $cover-size: 40px, $shadow-size: 14px) {
    // Shadow covers
    background: linear-gradient($background-color 30%, rgba($background-color, 0)), linear-gradient(rgba($background-color, 0), $background-color 70%) 0 100%,
    radial-gradient(50% 0, farthest-side, rgba($shadow-color, $shadow-intensity), rgba($shadow-color, 0)), radial-gradient(50% 100%, farthest-side, rgba($shadow-color, $shadow-intensity), rgba($shadow-color, 0)) 0 100%;
    background: linear-gradient($background-color 30%, rgba($background-color, 0)), linear-gradient(rgba($background-color, 0), $background-color 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba($shadow-color, $shadow-intensity), rgba($shadow-color, 0));
    // also add button shadow:
    //radial-gradient(farthest-side at 50% 100%, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: $background-color;
    background-size: 100% $cover-size, 100% $cover-size, 100% $shadow-size, 100% $shadow-size;
    // Opera doesn't support this in the shorthand
    background-attachment: local, local, scroll, scroll;
}

@mixin nk-truncate() {
    overflow: hidden;

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

// give a tree structure based on class
@mixin nk-tree-structure($depth: 5, $givenSelector: '.rx-sidebar-row', $padding: 17px) {
    // this makes the nodes in the tree indent in without breaking the overall size of the item cell
    $tempSelector: '.angular-ui-tree-node';

    @for $i from 0 through $depth {
        $selector: selector-nest($tempSelector);
        $tempSelector: append($tempSelector, '.angular-ui-tree-node');

        #{$selector} {
            #{$givenSelector} {
                padding-left: $padding + 20 * $i;
            }
        }
    }
}

// add multi line trucation for webkit
@mixin nk-multi-line-truncate($number-of-lines-to-show: 2) {
    display: -webkit-box;

    -webkit-line-clamp: $number-of-lines-to-show;
    -webkit-box-orient: vertical;
}

// style the placeholder of an element for webkit
@mixin nk-placeholder($color: #C4C4CC) {
    &::-webkit-input-placeholder {
        color: $color;
        font: inherit;
    }
    &::-moz-placeholder {
        color: $color;
        font: inherit;
    }
    &:-ms-input-placeholder {
        color: $color;
        font: inherit;
    }
    &:-moz-placeholder {
        color: $color;
        font: inherit;
    }
    &::placeholder {
        color: $color;
        font: inherit;
    }
}

// how should focus look like (using after instead of outline)
@mixin nk-focus-style($size: -2px, $color: rgba(0,0,0, 0.3)) {
    &:focus {
        position: relative;

        &:after {
            position: absolute;
            top: $size;
            right: $size;
            bottom: $size;
            left: $size;

            display: block;

            border-radius: 5px;

            box-shadow: 0 0 3px $color;
            content: '';
        }
    }
}

// knows the angular ng-animate classes so you won't have to :-)
@mixin nk-ng-animate($enter-animation: rxfadeIn, $leave-animation: rxfadeOut, $duration: 200ms, $timing-function: ease-in-out) {
    -webkit-animation-duration: $duration;
            animation-duration: $duration;
    -webkit-animation-timing-function: $timing-function;
            animation-timing-function: $timing-function;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;

    &.ng-hide-remove,
    &.ng-move {
        -webkit-animation-name: $enter-animation;
                animation-name: $enter-animation;
    }

    &.ng-hide {
        -webkit-animation-name: $leave-animation;
                animation-name: $leave-animation;
    }

    &.ng-enter {
        -webkit-animation-name: $enter-animation;
                animation-name: $enter-animation;
        -webkit-animation-play-state: paused;
                animation-play-state: paused;
    }

    &.ng-enter.ng-enter-active {
        -webkit-animation-play-state: running;
                animation-play-state: running;
    }

    &.ng-leave {
        -webkit-animation-name: $leave-animation;
                animation-name: $leave-animation;
        -webkit-animation-play-state: paused;
                animation-play-state: paused;
    }

    &.ng-leave.ng-leave-active {
        -webkit-animation-play-state: running;
                animation-play-state: running;
    }
}

// should help us keep z-indexing simple
@mixin nk-layer($layer: 1) {
    @switch $layer {
        @when 1 {
            z-index: 100;
        }
        @when 2 {
            z-index: 200;
        }
        @when 3 {
            z-index: 300;
        }
        @when 4 {
            z-index: 400; // tooltips
        }
        @when 5 {
            z-index: 500; // popovers + contact cards
        }
    }
}

// EXAMPLE ON HOW TO DRAW PIXEL ART IN CSS
// Read the blog post here:
// http://una.im/sass-pixel-art
//

// Setting the colors we're syncing up with
$pixel-color-map: (
  'r' : #f00,
  'w': #fff,
  'k': #000,
  'o': transparent,
  't': #83401f,
  'p': #ffbc77,
  'b': #06f,
  'y': #ff0,
  'n': #ff8000,
  'g': #5ac528
);

// Size of the pixels
$pixel-size: 10px !default;

// Mario pixel art matrices!
$pixel-art:(
  mushroom: (
    (o o o o o k k k k k k o o o o o)
    (o o o k k r r r r w w k k o o o)
    (o o k w w r r r r w w w w k o o)
    (o k w w r r r r r r w w w w k o)
    (o k w r r w w w w r r w w w k o)
    (k r r r w w w w w w r r r r r k)
    (k r r r w w w w w w r r w w r k)
    (k w r r w w w w w w r w w w w k)
    (k w w r r w w w w r r w w w w k)
    (k w w r r r r r r r r r w w r k)
    (k w r r k k k k k k k k r r r k)
    (o k k k w w k w w k w w k k k o)
    (o o k w w w k w w k w w w k o o)
    (o o k w w w w w w w w w w k o o)
    (o o o k w w w w w w w w k o o o)
    (o o o o k k k k k k k k o o o o)
  ),

  mario: (
    (o o o r r r r r r o o o o)
    (o o r r r r r r r r r r o)
    (o o t t t p p p k p o o o)
    (o t p t p p p p k p p p o)
    (o t p t t p p p p k p p p)
    (o t t p p p p p k k k k o)
    (o o o p p p p p p p p o o)
    (o o r r b r r r r o o o o)
    (o r r r b r r b r r r r o)
    (r r r r b b b b r r r r o)
    (p p r b y b b y b r p p o)
    (p p p b b b b b b p p p o)
    (p p b b b b b b b b p p o)
    (o o b b b o o b b b o o o)
    (o t t t o o o o t t t o o)
    (t t t t o o o o t t t t o)
  ),
  star: (
    (o o o o o o o k k o o o o o o o)
    (o o o o o o k y y k o o o o o o)
    (o o o o o o k y y k o o o o o o)
    (o o o o o k y y y y k o o o o o)
    (k k k k k k y y y y k k k k k k)
    (k y y y y y y y y y y y y y y k)
    (o k y y y y k y y k y y y y k o)
    (o o k y y y k y y k y y y k o o)
    (o o o k y y k y y k y y k o o o)
    (o o o k y y y y y y y y k o o o)
    (o o k y y y y y y y y y y k o o)
    (o o k y y y y y y y y y y k o o)
    (o k y y y y y k k y y y y y k o)
    (o k y y y k k o o k k y y y k o)
    (k y y k k o o o o o o k k y y k)
    (k k k o o o o o o o o o o k k k)
  ),
  flower: (
    (o o o k k k k k k k k k k o o o)
    (o k k k n n n n n n n n k k k o)
    (k k n n n y y y y y y n n n k k)
    (k n n y y y k w w k y y y n n k)
    (k n n y y y k y y k y y y n n k)
    (k n n n n y y y y y y n n n n k)
    (k k n n n n n n n n n n n n k k)
    (o k k k n n n n n n n n k k k o)
    (o o o k k k k k k k k k k o o o)
    (o k k o o o k g g k o o o k k o)
    (k g g k k o k g g k o k k g g k)
    (k g g g g k k g g k k g g g g k)
    (k g g g g g k g g k g g g g g k)
    (o k g g g g k g g k g g g g k o)
    (o o k k g g g g g g g g k k o o)
    (o o o o k k k k k k k k o o o o)
  ),
  chance: (
    (o t t t t t t t t t t t t t t o)
    (t p p p p p p p p p p p p p p k)
    (t p k p p p p p p p p p p k p k)
    (t p p p p t t t t t p p p p p k)
    (t p p p t t k k k t t p p p p k)
    (t p p p t t k p p t t k p p p k)
    (t p p p t t k p p t t k p p p k)
    (t p p p p k k p t t t k p p p k)
    (t p p p p p p t t k k k p p p k)
    (t p p p p p p t t k p p p p p k)
    (t p p p p p p p k k p p p p p k)
    (t p p p p p p t t p p p p p p k)
    (t p p p p p p t t k p p p p p k)
    (t p k p p p p p k k p p p k p k)
    (t p p p p p p p p p p p p p p k)
    (k k k k k k k k k k k k k k k k)
  ),
  boo: (
    (o o o o o k k k k k o o o o o o)
    (o o o k k w w w w w k k o o o o)
    (o o k w w w w w w w w w k o o o)
    (o k w w w w w w w w w w w k o o)
    (o k w k w k w w w w w w w w k o)
    (k w w k w k w w w w k k k w w k)
    (k w w k w k w w w k w w k w w k)
    (k w w w w w w w w w w w k w k o)
    (k w r w r w r w w w w k w w w k)
    (k w r r r r r w w w w w w w w k)
    (k w r r r r r w w w w w w w w k)
    (o k w r r r r r w w w w w w w k)
    (o k w r w r w r w w w w w w k o)
    (o o k w w w w w w w w w w k o o)
    (o o o k k w w w w w w k k o o o)
    (o o o o o k k k k k k o o o o o)
  ),
);

// Function to read the matrix and pixelize it!
@function pixelize($matrix, $size){
    $l: length($matrix); // length of the entire
    $sh: ''; // shadows list
    $i: $l; // length of the line

    // read through the length of the matrix and decide on the box shadow color and position
    @for $i from 1 through $l{
      $row: nth($matrix,$i); //

      @for $j from 1 through length($row){
          $item: nth($row,$j);

          @if map-has-key($pixel-color-map, $item) {
            $sh:  $sh + ($j*$size) + ' ' + ($i*$size) + ' ' + map-get($pixel-color-map, $item);
          } @else {
            @warn 'there is no color specified in "$pixel-color-map" for: "#{$item}"';
          }

        @if not ($j == length($row) and $i == $l) {
          $sh: $sh + ',';
        }
      }
    }

    @return unquote($sh);
}

// Mixin to style each item
@mixin style-item($matrix, $size){
  position: relative; // pixels stack next to each other

  // set width & height of icon based on size of pixels
  width:($size * length(nth($matrix,1)));
  height:($size * length($matrix));

  &:after{
    content: '';

    // position everything from the top left corner
    position: absolute;
    top: (-$size);
    left: (-$size);
    width: $size;
    height: $size;

    // this is where we make the stitch
    box-shadow: pixelize($matrix,$size);
  }
}