gaf-mobile/app/styles/libs/mixins.less

GAF mobile Web site

@import (reference) '../themes/variables';

/* LESS Mixins */

/* 1. Convert a button element to look like an inline text link
   2. Generic container style for box elements
   3. FlexBox Mixins, extracted and translated to .less from:
      https://github.com/mastastealth/sass-flex-mixin/blob/master/_flexbox.scss
 */

.clearfix {
    zoom: 1;
    &::before,
    &::after{
        content:"";
        display: table;
    }
    &::after{
        clear: both;
    }
}

/* 1. */
.link-button {
    display: inline-block;
    background: transparent;
    border: none;
    line-height: 0;
    margin: 0;
    padding: 0;
    color: @link-color;
    &:active,
    &:focus,
    &.fl-touch-active,
    html.no-touch &:hover {
        outline: none;
    }
}

/* 2. */
.has-full-width {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

/* Animation */
.animated(@duration:1s){ // overload the animated class by Dan Eden so we can define a duration
    -webkit-animation-duration: @duration;
            animation-duration: @duration;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.animation (@name, @duration: 300ms, @iteration-count: 1, @animation-fill-mode: both, @ease: linear) {
    -webkit-animation: @name @duration @ease @iteration-count @animation-fill-mode;
    animation: @name @duration @ease @iteration-count @animation-fill-mode;
}

.animation-delay (@delay: 1s) {
    animation-delay: @delay; /* W3C and Opera */
    -moz-animation-delay: @delay; /* Firefox */
    -webkit-animation-delay: @delay; /* Safari and Chrome */
}

.fadein {
    -webkit-animation: fadein 0.25s;
       -moz-animation: fadein 0.25s;
            animation: fadein 0.25s;

    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @-moz-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @-webkit-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* These are the conditional mixins for the different syntaxes Flexbox */
.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = flex-end) {
    -ms-flex-item-align: end;
}

.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = flex-start) {
    -ms-flex-item-align: start;
}

.ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = auto), (@msSelfAlign = center),(@msSelfAlign = baseline), (@msSelfAlign = stretch) {
    -ms-flex-item-align: @msSelfAlign;
}

/* 3. */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

/* 3. */
.flex-align-items(@alignment) {
    & when (@alignment = flex-start) {
        -webkit-box-align: start;
    }
    & when (@alignment = flex-end) {
        -webkit-box-align: end;
    }
    & when (@alignment = baseline) {
        -webkit-box-align: @alignment;
    }
    & when (@alignment = center) {
        -webkit-box-align: @alignment;
    }
    & when (@alignment = stretch) {
        -webkit-box-align: @alignment;
    }

    -webkit-align-items: @alignment;
    align-items: @alignment;
}

/* 3. */
.flex-justify-content(@justification) {
    & when (@justification = flex-start) {
        -webkit-box-pack: start;
    }
    & when (@justification = flex-end) {
        -webkit-box-pack: end;
    }
    & when (@justification = space-between) {
        -webkit-box-pack: justify;
    }
    & when (@justification = space-around) {
        -webkit-flex-pack: distribute;
    }
    & when (@justification = center) {
        -webkit-flex-pack: @justification;
    }

    -webkit-justify-content: @justification;
    justify-content: @justification;
}

.flex-grow(@proportion) {
    -ms-flex-grow: @proportion;
    -webkit-flex-grow: @proportion;
    flex-grow: @proportion;
}

.flex-basis(@proportion) {
    -ms-flex-basis: @proportion;
    -webkit-flex-basis: @proportion;
    flex-basis: @proportion;
}

.flex-shrink(@proportion) {
    -ms-flex-shrink: @proportion;
    -webkit-flex-shrink: @proportion;
    flex-shrink: @proportion;
}

.flex-wrap(@wrap) {
    -ms-flex-wrap:@wrap;
    -webkit-flex-wrap:@wrap;
    flex-wrap:@wrap;
}

.flex-direction(@direction) {
    & when (@direction = row) {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
    }

    & when (@direction = row-reverse) {
        -webkit-box-direction: reverse;
        -webkit-box-orient: horizontal;
    }

    & when (@direction = column) {
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
    }

    & when (@direction = column-reverse) {
        -webkit-box-direction: reverse;
        -webkit-box-orient: vertical;
    }

    -webkit-flex-direction: @direction;
    -moz-flex-direction: @direction;
    -ms-flex-direction: @direction;
    flex-direction: @direction;
}

.flex-align-self(@selfAlignStyle) {
    .ms-flex-align-self(@selfAlignStyle);
    -webkit-align-self: @selfAlignStyle;
    align-self: @selfAlignStyle;
}

.list-unstyled(@padding: 0, @margin: 0) {
    list-style-type: none;
    padding: @padding;
    margin: @margin;
}

.circle(@diameter:10px){
    width: @diameter;
    height: @diameter;
    border-radius: 50%;
}

.transition (@time: 1s, @ease: linear, @prop: all) {
    -webkit-transition: @prop @time @ease;
    transition: @prop @time @ease;
}

/* Gradients */
.linear-gradient(@bottom-color, @top-color) {
    background: @bottom-color;
    background: -moz-linear-gradient(top, @bottom-color 0%, @top-color 100%);
    background: -webkit-linear-gradient(top, @bottom-color 0%,@top-color 100%);
    background: linear-gradient(to bottom, @bottom-color 0%,@top-color 100%);
}

.linear-gradient-with-image (@image, @bottom-color, @top-color) {
    background: @top-color;
    background: url(@image) no-repeat, -moz-linear-gradient(top, @bottom-color 0%, @top-color 100%);
    background: url(@image) no-repeat, -webkit-linear-gradient(top, @bottom-color 0%, @top-color 100%);
    background: url(@image) no-repeat, linear-gradient(to bottom, @bottom-color 0%, @top-color 100%);
}

.linear-horizontal-gradient(@left-color, @right-color) {
    background: @left-color; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, @left-color , @right-color); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, @left-color, @right-color); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, @left-color, @right-color); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, @left-color , @right-color); /* Standard syntax */
}

.visibly-hidden() {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.transform(...) {
    -webkit-transform: @arguments;
    transform: @arguments;
}

/* Alignments */
.vertical-align(@pos:absolute, @translateY:-50%) {
    position: @pos;
    top: 50%;
    -webkit-transform: translateY(@translateY);
    -moz-transform: translateY(@translateY);
    -ms-transform: translateY(@translateY);
    transform: translateY(@translateY);
}

.horizontal-align(@pos:absolute) {
    position: @pos;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.horizontal-vertical-align(@pos:absolute) {
    position: @pos;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.hyphens {
    // Firefox alternative to word-break: break-word;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

.text-wrap() {
    word-break: break-all; /* IE */
    word-break: break-word; /* old webkit */
    word-wrap: break-word; /* webkit */
    .hyphens(); /* firefox */
}

/* font size mixn */
.font-size(@px, @base: @body-size) {
    font-size: @px;
    font-size: (@px / @base) * 1rem;
}

.type(@name) {
    @font-size: "font-size-@{name}";
    @line-height: "line-height-@{name}";
    .font-size(@@font-size);
    line-height: @@line-height;
}