4foot30

// Give a block a slanted border
// Adapted from @omgmog's https://blog.omgmog.net/post/some-approaches-for-creating-diagonal-section-separators-for-your-website/
// Default to 30px high right-aligned white triangle on top edge
// See the comments after this mixin for diagrams of the positioning options
.diagonal-border(@opposite: 30px, @edge: 'top', @alignment: 'right', @colour: '#fff', @inset: false, @element: before) {
    // Set relative positioning so you can use absolute positioning on the triangle
    position: relative;
    // Set polygon points for the triangles - outside the block
    .setPoints() when (@edge = 'top') and (@alignment = 'left') and (@inset = false) {
        @points: '0,0, 1,1, 0,1';

4foot30

//
//
// ***** Classes to pull or push an element into the gutter(s) of its container *****
//
//
// .gutter-push-XX
// Push the right edge of an element out
// into the right gutter of its container

// .gutter-push-double-XX

4foot30

//
//
// ***** Apply fluid widths to containers (simulate .container-fluid) *****
//
//
.make-fluid(@breakpoint){
    .fluid-@{breakpoint}{
        width: auto;
    }
}

4foot30

// Extended version of Bootstrap's img-retina mixin
// - adds @3x support
// - lets you limit the application of the image by queries other than dpi/pixel-ratio
// - lets you specify a single-parameter background size, like background-size: cover;
.img-retina-extended(@file-1x; @file-2x; @file-3x; @width-1x; @height-1x: 'not-set'; @query1: 'min-width'; @queryValue1: 0px) {
    // @1x
    @media only screen and (~"@{query1}: @{queryValue1}") {
        background-image: url("@{file-1x}");
        .img-retina-bg-size(@width-1x; @height-1x);
    }

4foot30

// Define an extra-small breakpoint
@screen-xxs:             0px;
@screen-xxs-min:         @screen-xxs;
@screen-xss-max:         (@screen-xs-min - 1);

// Define an extra-large breakpoint
@screen-xl:             1600px;
@screen-xl-min:         @screen-xl;
@screen-lg-max:         (@screen-xl-min - 1);

4foot30

// Complements Bootstrap's hidden/visible classes, but working between 0 and 479px
.visible-xxs {
  .responsive-invisibility();
}
.visible-xxs-block,
.visible-xxs-inline,
.visible-xxs-inline-block {
    display: none !important;
}
.hidden-xxs {

4foot30

// Floating - like Bootstrap's pull-left/pullright classes, but breakpoint-specific
// Usage: .pull-right-sm, .pull-left-md etc.
.make-pull-left(@breakpoint) {
    .pull-left-@{breakpoint} {
        float: left !important;
    }
}
.make-pull-right(@breakpoint) {
    .pull-right-@{breakpoint} {
        float: right !important;

4foot30

a {
    // Default underlining always looks terrible - use a bottom border instead
    color: @link-color;
    text-decoration: none;
    border-bottom: @underline-height solid transparent;
    .transition(~"color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease");
    &:hover, &:focus {
        color: @link-color-hover;
        text-decoration: none;
        border-bottom: @underline-height solid @link-color-hover;

4foot30

// Add arrows to element
// Inner arrow is the main arrow colour, outer arrow drawn underneath forms
// the border/stroke around the inner arrow.
// Arrows default to colours and sizes that match Bootstrap's .btn-default
.arrow--left(@style:                            'default',
             @size:                             'base',
             @inner-arrow-color:                color(~'@{btn-@{style}-bg}'),
             @outer-arrow-color:                color(~'@{btn-@{style}-border}'),
             @inner-arrow-color-hover:          darken(@inner-arrow-color, 10%),
             @outer-arrow-color-hover:          darken(@outer-arrow-color, 12%),

4foot30

    var cleanCSS    = require('gulp-clean-css'),
    concat          = require('gulp-concat'),
    gulp            = require('gulp'),
    autoprefixer    = require('gulp-autoprefixer'),
    gzip            = require('gulp-gzip'),
    sass            = require('gulp-sass'),
    rename          = require('gulp-rename'),
    uglify          = require('gulp-uglify'),
    watch           = require('gulp-watch');