metro4/source/include/mixins.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "vars";

.show-element() {
    //display: initial;
    opacity: 1;
    .scale(1);
}

.hide-element() {
    .scale(0);
    opacity: 0;
    //display: none;
}

.clear() {
    &::after {
        display: block;
        clear: both;
        content: "";
    }
}

.set-relative() {
    display: block;
    position: relative;
}

.set-absolute() {
    position: absolute;
}

.set-flex() {
    display: flex;
}

.reset-list() {
    list-style: none inside;
    margin: 0;
    padding: 0;
    position: relative;
}

.px2rem(@attr: width; @size: 16) {
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @current_value: extract(@size, @i);

        & when not(@current_value = 0) {
                @{attr}+_: unit( (@current_value / 16), rem );
        }

        & when (@current_value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.rem2px(@attr: width; @size: 16) {
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @current_value: extract(@size, @i);

        & when not(@current_value = 0) {
                @{attr}+_: unit( 16 * @current_value, px );
        }

        & when (@current_value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.pt2px(@attr: width; @size: 16) {
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @current_value: extract(@size, @i);

        & when not(@current_value = 0) {
                @{attr}+_: unit( round(@current_value * 1.333333) , px );
        }

        & when (@current_value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.px2pt(@attr: width; @size: 16) {
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @current_value: extract(@size, @i);

        & when not(@current_value = 0) {
                @{attr}+_: unit( round(.75 * @current_value), pt );
        }

        & when (@current_value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.pt2rem(@attr: width; @size: 16){
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @current_value: extract(@size, @i);

        & when not(@current_value = 0) {
                @{attr}+_: unit( round(@current_value * (1.333333 / 16)), rem );
        }

        & when (@current_value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.rem2pt(@attr: width; @size: 16){
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @current_value: extract(@size, @i);

        & when not(@current_value = 0) {
                @{attr}+_: unit( round(.75 * 16 * @current_value), pt );
        }

        & when (@current_value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.square(@size: 0, @unit) {
    width: unit(@size, @unit);
    height: unit(@size, @unit);
}

.circle(@size: 0, @unit) {
    width: unit(@size, @unit);
    height: unit(@size, @unit);
    border-radius: 50%;
}

.halo() {
    &::after {
        display: block;
        content: "";
        position: absolute;
        .circle(3.125, rem);
        background-color: rgba(187, 187, 187, 0.5);
        opacity: .3;
        top: 50%;
        left: 50%;
        .px2rem(margin-top, -25px);
        .px2rem(margin-left, -25px);
    }
}

.animate(@params){
    animation: @params;
}

.transition-scheme(@t) {
    transition: @t;
}

.collapse() {
    overflow: hidden;
    max-height: 0;
    transition: @transition-collapse;
}

.expand(@h: 1000px) {
    max-height: @h!important;
    transition: @transition-collapse !important;
    transition-duration: .5s !important;
    overflow: visible!important;
}

.perspective(@perspective) {
    transform+_: perspective(@perspective);
}
.rotate(@degrees) {
    transform+_: rotate(@degrees);
}
.rotateX(@degrees) {
    transform+_: rotateX(@degrees);
}
.rotateY(@degrees) {
    transform+_: rotateY(@degrees);
}
.rotateZ(@degrees) {
    transform+_: rotateZ(@degrees);
}
.scale(@ratio) {
    transform+_: scale(@ratio);
}
.scaleX(@ratio) {
    transform+_: scaleX(@ratio);
}
.scaleY(@ratio) {
    transform+_: scaleY(@ratio);
}
.translate(@x: 0, @y: 0) {
    transform+_: translate(@x, @y);
}
.skew(@x: 0, @y: 0) {
    transform+_: skew(@x, @y);
}
.skewX(@x: 0) {
    transform+_: skewX(@x);
}
.skewY(@y: 0) {
    transform+_: skewY(@y);
}
.translate3d(@x: 0, @y: 0, @z: 0) {
    transform+_: translate3d(@x, @y, @z);
}

.transformOrigin(@origin) {
    transform-origin: @origin;
}

.transition(@time: 1s, @func: ease, @target: all){
    transition: @target @time @func;
}

.translateX(@x: 0) {
    transform+_: translateX(@x);
}
.translateY(@y: 0) {
    transform+_: translateY(@y);
}

.shadow(@x, @y, @blur, @stretch, @color, @alpha: .4){
    box-shadow+: @x @y @blur @stretch rgba(red(@color), green(@color), blue(@color), @alpha);
}

.default-shadow() {
    //.shadow(2px, 2px, 5px, 0, @black);
    box-shadow: 2px 2px 2px 0 rgba(red(@ribbonDropdownShadow), green(@ribbonDropdownShadow), blue(@ribbonDropdownShadow), .7),
                -.5px 0 1px 0 rgba(red(@ribbonDropdownShadow), green(@ribbonDropdownShadow), blue(@ribbonDropdownShadow), .7);
}

.win-shadow(){
    box-shadow+: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}

.shadow(@size) when (@size = 0) {
    box-shadow: none;
}

.shadow(@size) when (@size = 1) {
    box-shadow+: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.shadow(@size) when (@size = 2) {
    box-shadow+: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}

.shadow(@size) when (@size = 3) {
    box-shadow+: 0 17px 50px 0 rgba(0, 0, 0, 0.19), 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}

.shadow(@size) when (@size = 4) {
    box-shadow+: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
}

.shadow(@size) when (@size = 5) {
    box-shadow+: 0 40px 77px 0 rgba(0, 0, 0, 0.22), 0 27px 24px 0 rgba(0, 0, 0, 0.2);
}

.shadow-right() {
    box-shadow+: 5px 0 7px -6px rgba(0,0,0,0.75);
}

.shadow-left() {
    box-shadow+: -5px 0 7px -6px rgba(0,0,0,0.75);
}

.text-ellipsis() {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.focus-show(@color){
    box-shadow+: 0 0 0 3px rgba(red(@color), green(@color), blue(@color), 0.45);
}

.neb(@size: 1rem, @shift: .625rem) {
    &::before {
        display: block;
        position: absolute;
        content: "";
        width: @size;
        height: @size;
        background-color: inherit;
        border: 1px solid transparent;
        border-right-color: inherit;
        border-bottom-color: inherit;
    }

    &.neb-s {
        &::before {
            top: 100%;
            left: 50%;
            .translateX(-50%);
            .translateY(-50%);
            .rotate(45deg);
        }
    }

    &.neb-sw {
        &::before {
            top: 100%;
            left: @shift;
            .translateY(-50%);
            .rotate(45deg);
        }
    }

    &.neb-se {
        &::before {
            top: 100%;
            right: @shift;
            .translateY(-50%);
            .rotate(45deg);
        }
    }

    &.neb-n {
        &::before {
            top: 0;
            left: 50%;
            .translateX(-50%);
            .translateY(-50%);
            .rotate(-135deg);
        }
    }

    &.neb-nw {
        &::before {
            top: 0;
            left: @shift;
            .translateY(-50%);
            .rotate(-135deg);
        }
    }

    &.neb-ne {
        &::before {
            top: 0;
            right: @shift;
            .translateY(-50%);
            .rotate(-135deg);
        }
    }

    &.neb-en {
        &::before {
            top: @shift;
            right: 0;
            .translateX(50%);
            .rotate(-45deg);
        }
    }

    &.neb-e {
        &::before {
            top: 50%;
            right: 0;
            .translateX(50%);
            .translateY(-50%);
            .rotate(-45deg);
        }
    }

    &.neb-es {
        &::before {
            bottom: @shift;
            right: 0;
            .translateX(50%);
            .rotate(-45deg);
        }
    }

    &.neb-wn {
        &::before {
            top: @shift;
            left: 0;
            .translateX(-50%);
            .rotate(135deg);
        }
    }

    &.neb-w {
        &::before {
            top: 50%;
            left: 0;
            .translateX(-50%);
            .translateY(-50%);
            .rotate(135deg);
        }
    }

    &.neb-ws {
        &::before {
            bottom: @shift;
            left: 0;
            .translateX(-50%);
            .rotate(135deg);
        }
    }
}

.neb2(@size: 1rem; @shift: .625rem; @color: @white){
    &::before {
        display: block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
    }

    &.neb-s {
        &::before {
            border-width: @size @size 0 @size;
            border-color: @color transparent transparent transparent;
            top: 100%;
            left: 50%;
            .translateX(-50%);
            .translateY(-50%);
        }
    }

    &.neb-n {
        &::before {
            border-width: 0 @size @size @size;
            border-color: transparent transparent @color transparent;
            top: 0;
            left: 50%;
            .translateX(-50%);
            .translateY(-50%);
        }
    }

    &.neb-e {
        &::before {
            border-width: @size 0 @size @size;
            border-color: transparent transparent transparent @color;
            top: 50%;
            right: 0;
            .translateX(50%);
            .translateY(-50%);
        }
    }

    &.neb-w {
        &::before {
            border-width: @size @size @size 0;
            border-color: transparent @color transparent transparent;
            top: 50%;
            left: 0;
            .translateX(-50%);
            .translateY(-50%);
        }
    }
}

.toggle() {
    position: relative;
    cursor: pointer;
    padding-right: 1.5rem!important;
    user-select: none;

    &::before {
        display: block;
        position: absolute;
        vertical-align: middle;
        color: transparent;
        font-size: 0;
        content: "";
        .px2rem(height, 5px);
        .px2rem(width, 5px);
        background-color: @transparent ;
        border-left: 1px solid;
        border-bottom: 1px solid;
        border-color: @dark;
        top: 50%;
        left: 100%;
        margin-left: -1rem;
        margin-top: -.1625rem;
        z-index: 2;
        transform: rotate(-45deg);
        transition: @transition-short;
        transform-origin: center center 1px;
    }
}

.hideElement(@el){
    @{el} {
        width: 1px;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }
}

.hideScrollBars() {
    &::-webkit-scrollbar {
        display: none!important;
    }
    -ms-overflow-style: -ms-autohiding-scrollbar;
    overflow: -moz-scrollbars-none;
}

.ellipsis(@overflow: ellipsis) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: @overflow;
}