4foot30

# This file lives at /docroot/themes/custom/THEME_NAME/THEME_NAME.breakpoints.yml

# Mobile portrait
THEME_NAME.xxs:
  label: xxs (Mobile portrait)
  mediaQuery: 'all and (min-width: 0) and (max-width: 479px)'
  weight: 0
  multipliers:
    - 1x
    - 2x

4foot30

javascript:for(var f%3Ddocument.forms,i%3Df.length%3Bi--%3B)f%5Bi%5D.setAttribute("novalidate","")%3B

4foot30

// Text alignment - like Bootstrap's text-left/text-right classes, but breakpoint-specific
// Usage: .text-right-sm, .text-left-md etc.
@mixin make-text-left($breakpoint) {
    .text-left-#{$breakpoint} {
        text-align: left !important;
    }
}
@mixin make-text-right($breakpoint) {
    .text-right-#{$breakpoint} {
        text-align: right !important;

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');

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

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

// 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

// 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

// 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

// 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);
    }