utility-belt.scss

/*
* UtilityBelt - a starter kit for any SASS project
* By @dmtintner & @hackingui
* Documentation and examples - hackingui.com/front-end/10-best-scss-utilities/
* V1.2.0
*/

/*
## Triangle
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 8px, $color: #222) {
    content: '';
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    @if ($direction == 'up') {
        border-bottom: $size solid $color;
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: none;
    } @else if ($direction == 'down') {
        border-top: $size solid $color;
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-bottom: none;
    } @else if ($direction == 'left') {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        border-left: none;
    } @else if ($direction == 'right') {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        border-right: none;
    }
}

/*
* Currency
*/
%currency {
    position: relative;
    &:before {
        content: '$';
        position: relative;
        left: 0;
    }
}

.USD %currency:before {
    content: '$';
}

.EUR %currency:before {
    content: '\20AC';
}

// must escape the html entities for each currency symbol
.ILS %currency:before {
    content: '\20AA';
}

.GBP %currency:before {
    content: '\00A3';
}

/*
* Clearfix
*/
%clearfix {
    *zoom: 1;
    &:after {
        content: '';
        display: table;
        line-height: 0;
        clear: both;
    }
}

/*
* Respond To
*/
// Breakpoints for each query
$smartphone: 568px;
//iphone 5
$tabletPortrait: 767px;
$tabletLandscape: 1024px;
$desktop: 1174px;
$largeScreen: 1400px;
$mediumDesktop: 1200px;
@mixin respondTo($media) {
    @if $media == smartphone {
        @media (max-width: $smartphone) {
            @content;
        }
    } @else if $media == tablet {
        @media (min-width: $tabletPortrait) and (max-width: $tabletLandscape) {
            @content;
        }
    } @else if $media == smallScreen {
        @media (max-width: $desktop) {
            @content;
        }
    } @else if $media == desktop {
        @media (min-width: $desktop) {
            @content;
        }
    } @else if $media == mediumDesktop {
        @media (max-width: $mediumDesktop) {
            @content;
        }
    } @else if $media == largeScreen {
        @media (max-width: $largeScreen) {
            @content;
        }
    }
}

/*
* Ghost Vertical Align
*/
@mixin ghostVerticalAlign($pseudoEl: before) {
    &:#{$pseudoEl} {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: .1px;
    }
}

%vertical-align {
    @include ghostVerticalAlign();
}

/*
* Truncate Text
the mixin is used for shortening long captions
overflowing text is replaced by "..."
*/
@mixin truncateText($overflow: ellipsis) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: $overflow; // values are: clip, ellipsis, or a string
}

@keyframes alertMe {
    from {
        border-width: 3px;
        border-color: gold;
    }
    to {
        border-width: 0;
        border-color: rgba(gold, .1);
    }
}

@mixin alerted() {
    &:before {
        content: '';
        position: absolute;
        top: 6px;
        right: 6px;
        height: 8px;
        width: 8px;
        border-radius: 10px;
        background-color: gold;
    }
    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        width: 20px;
        border-radius: 20px;
        background-color: transparent;
        border: solid gold;
        border-width: 2px; // animates
        box-sizing: border-box;
        animation: alertMe 1000ms infinite ease 0ms;
    }
}

/*
* Resize Sprite - for resizing only a single image from a sprite
*
* params: $map = $<name>-sprites (ex. $icon-sprites)
*         $sprite = file name w/o file type ending (ex. globe)
          $percent = number (ex. 50)
*
* (if compass CSS3 mixins not included, uncomment the background-size row and comment the @include version)
*/
@mixin resize-sprite($sprite, $percent) {
    $width: map-get($sprite, 'width');
    $height: map-get($sprite, 'height');
    $total_width: map-get($sprite, 'total_width');
    $total_height: map-get($sprite, 'total_height');
    $offset_x: ceil(map-get($sprite, 'offset_x')*($percent/100));
    $offset_y: ceil(map-get($sprite, 'offset_y')*($percent/100));
    .app-sprite-#{map-get($sprite, 'name')} {
        background-size: ceil($total_width * ($percent/100)) ceil($total_height * ($percent/100));
        width: ceil($width*($percent/100));
        height: ceil($height*($percent/100));
        background-position: $offset_x $offset_y;
    }
}

/*
* Resizes all images in a given sprite
* mixin courtesy of Wilker Lúcio https://gist.github.com/wilkerlucio/6442309
* params: $only = if you want to list specific files instead of regenerating every image (ex. globe, checkmark)
*/
@mixin resize-sprite-set($sprite-set, $percent) {
    @each $name, $sprite in $sprite-set {

    }
}
/*
## Text-align justify
For perfectly aligned grids that don't rely on floating elements and difficult calculations

- http://www.barrelny.com/blog/text-align-justify-and-rwd/ */
%justify {
    text-align: justify;
    &:after {
        // adds a false last line to the content so justify is applied
        content: '';
        display: inline-block;
        width: 100%;
    }
}

/*
## Placeholder Color - for styling input placeholders in every browser
*/
@mixin placeholderColor($color) {
    &::-webkit-input-placeholder {
        -webkit-transition: color 200ms;
        color: $color;
    }
    &:-moz-placeholder {
        //Firefox 18-
        -moz-transition: color 200ms;
        color: $color;
    }
    &::-moz-placeholder {
        -moz-transition: color 200ms;
        color: $color;
    }
    &:-ms-input-placeholder {
        color: $color;
    }
}

%customScrollBar {
    &::-webkit-scrollbar {
        width: 11px;
    }

    &::-webkit-scrollbar-button {
        display: none;
    }

    &::-webkit-scrollbar-track {

    }

    &::-webkit-scrollbar-thumb {
        border-left: 8px solid;
        border-color: #7A8CA2;
    }
}