initial commit, the cv is usable in italian, has a side menu that shows the language...

[curriculum.git] / css / source / _tools.scss

// Usage:
// @include px-rem(property, value, value, ecc);
// @include px-rem(margin, 20, auto);
@mixin px-rem($property, $values...) {
    $max: length($values);
    $pxValues: '';
    $remValues: '';

    $base-font: strip-units($em-base);

    @for $i from 1 through $max {
        $value: strip-units(nth($values, $i));

        @if $value == auto or $value == inherit or $value == 0 {
            $pxValues: #{$pxValues + $value};
        } @else {
            $pxValues: #{$pxValues + $value}px;
        }

        @if $i < $max {
            $pxValues: #{$pxValues + " "};
        }
    }

    @for $i from 1 through $max {
        $value: strip-units(nth($values, $i));
        @if $value == auto or $value == inherit or $value == 0 {
            $remValues: #{$remValues + $value};
        } @else {
            $remValues: #{$remValues + $value / $base-font}rem;
        }
        @if $i < $max {
            $remValues: #{$remValues + " "};
        }
    }

    #{$property}: $pxValues;
    #{$property}: $remValues;
}

// Usage:
// @include headings([1, 6]){
//    [...]
// }
@mixin headings($from: 1, $to: 6){
    @for $i from $from through $to{
      h#{$i}{
        @content
      }
    }
}

/// Given a font size in pixels, reproduces that font size in rems.
/// @access public
/// @param {Length} $size - Font size
/// @example scss - Usage
///   .foo {
///     @include font-size(16px);
///   }
/// @example css - Result
///   .foo {
///     font-size: 16px;
///     font-size: 1rem;
///   }
@mixin font-size($size) {
  @if unitless($size) {
    $size: $size * 1px;
  }

  font-size: $size;
  font-size: ($size / $em-base) * 1rem;
}

/// Horizontally centers block elements
/// @access public
/// @example scss - Usage
///   .foo {
///     @include center-block;
///   }
/// @example css - Result
///   .foo {
///     display: block;
///     margin-left: auto;
///     margin-right: auto;
///   }
@mixin center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/// Vertically centers block elements with known height.
/// @access public
/// @param {Length} $height - Element's height
/// @example scss - Usage
///   .foo {
///     @include center-h(42px);
///   }
/// @example css - Result
///   .foo {
///     position: absolute;
///     top: 50%;
///     height: 42px;
///     margin-top: -21px;
///   }
@mixin center-h($height) {
    position: absolute;
    top: 50%;
    height: $height;
    margin-top: -($height / 2);
}

// box-shadow
// top and left are  the anchor point from where to start moving the shadow
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
    @if unitless($top) or unitless($left) or unitless($blur) {
        $top: $top * 1px;
        $left: $left * 1px;
        $blur: $blur * 1px;
    }
    @if $inset {
        -webkit-box-shadow:inset $top $left $blur $color;
        -moz-box-shadow:inset $top $left $blur $color;
        box-shadow:inset $top $left $blur $color;
    } @else {
        -webkit-box-shadow: $top $left $blur $color;
        -moz-box-shadow: $top $left $blur $color;
        box-shadow: $top $left $blur $color;
    }
}

/// text shadow
/// @access public
/// @param {String} $rgb - rgb color
/// @param {Float} $opacity - opacity
/// @param {Int} $h - h-shadow
/// @param {Int} $v - v-shadow
/// @param {Float} $blur - blur-radius
/// @example scss - Usage
///   .foo {
///     @include text-shadow("0,0,0", 0.5, 1, 1, 5 );
///   }
/// @example css - Result
///   .foo {
///     text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 5px;
///   }
@mixin text-shadow($opacity, $h, $v, $blur, $rgb: #000000) {
    @if unitless($h) or unitless($v) or unitless($blur) {
        $h: $h * 1px;
        $v: $v * 1px;
        $blur: $blur * 1px;
    }
    text-shadow: $h $v $blur rgba($rgb, $opacity);
}

// truncate text with an ellipsis
@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: pre;
}

// create a circular "thing" out of any item
// needs to be originally square
@mixin circle($size, $color, $display) {
    @if unitless($size) {
        $size: $size * 1px;
    }
    display: $display;
    line-height: $size;
    width: $size;
    height: $size;
    background: $color;
    -webkit-border-radius: $size/2;
    -moz-border-radius: $size/2;
    border-radius: $size/2;
}

@mixin cover($w: inherit, $h: inherit) {
    // Chrome, Safari
    object-fit: cover;
    height: $h;
    width: $w;
    // Firefox
    @-moz-document url-prefix() {
        & {
            object-fit: cover;
            height: $h;
            width: $w;
        }
    }
}
// border radius bourbon style
@mixin border-radius($value) {
    border-radius: $value;
    background-clip: padding-box;
}
// columns mixin to arrange stuff into columns
@mixin columns($colcount: 0, $colgap: 50px) {
    -moz-column-count: $colcount;
    -moz-column-gap: $colgap;
    -webkit-column-count: $colcount;
    -webkit-column-gap: $colgap;
    column-count: $colcount;
    column-gap: $colgap;
}
// Vertical/Horizontal Menu Mixin
// Originally derived from http://sachagreif.com/useful-sass-mixins/
@mixin navigation-list ($horiz:false) {
    $display: block;
    @if $horiz == true {
        $display: inline-block;
    }
    ul {
        list-style-type:none;
        padding:0;
        margin:0;
        overflow:hidden;
        display: block;

        li {
            display:$display;
            &:last-child {
                margin-right:0px;
            }
            a {
                display:block;
            }
        }
    } 
}