metro4/less/utils.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) "include/vars";
@import (once) "include/mixins";

.m4-cloak {
    opacity: 0;
}

.transition {
    transition: all .3s linear;
}

.inherit-colors {
    background-color: inherit!important;
    color: inherit!important;
}

.inherit-background {
    background-color: inherit!important;
}

.inherit-color {
    color: inherit!important;
}

[class*=default-icon] {
    display: block;
    height: 16px;
    width: 16px;
    border: none!important;
    background-size: cover;
    background-color: transparent;
    opacity: .5;
    transition: @transition-base;
    margin: auto;

    &:hover {
        opacity: 1;
    }
}

.clear, .clear-fix, .clearfix {
    .clear()
}

.overflow {overflow: auto !important;}
.no-overflow {overflow: hidden !important;}
.scroll {overflow: scroll !important;}
.scroll-x {overflow-x: auto !important;}
.scroll-y {overflow-y: auto !important;}
.no-scroll {overflow: hidden !important;}
.no-scroll-x {overflow-x: hidden !important;}
.no-scroll-y {overflow-y: hidden !important;}
.wrap {white-space: normal !important;}
.no-wrap {white-space: nowrap !important;}
.no-user-select {user-select: none !important;}
.no-appearance {appearance: none !important;}

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

.expand {
    .expand();
}

.v-center {
    top: 50%;
    transform: translateY(-50%);
}
.h-center {
    left: 50%;
    transform: translateX(-50%);
}

.neb {
    .neb();
}

.neb2 {
    .neb2(24px);
}

.selected {
    box-shadow: 0 0 0 4px rgba(red(@lightCyan), green(@lightCyan), blue(@lightCyan), 1)!important;

    &::after {
        position: absolute;
        display: block;
        border-top: 28px solid @lightCyan;
        border-left: 28px solid transparent;
        right: -1px;
        content:"";
        top: -1px;
        z-index: @zindex-selectedCheck;
    }

    &::before {
        position: absolute;
        display: block;
        content: "";
        background-color: transparent;
        border-color: @white!important;
        border-left: 2px solid;
        border-bottom: 2px solid;
        height: .325rem;
        width: .5rem;
        right: .25rem;
        top: .25rem;
        z-index: 102;
        transform: rotate(-45deg);
    }
}

.disabled {
    pointer-events: none!important;
    color: @lightGray!important;
}

.generate-utils-media-options(@mediaBreakpointListMobileLength);
.generate-utils-media-options(@name, @i: 1) when (@i <= @mediaBreakpointListMobileLength) {
    @m: extract(@mediaBreakpointListMobile, @i);

    @media screen and (min-width: @@m) {
        .overflow-@{m} {overflow: auto !important;}
        .no-overflow-@{m} {overflow: hidden !important;}
        .scroll-@{m} {overflow: scroll !important;}
        .scroll-x-@{m} {overflow-x: auto !important;}
        .scroll-y-@{m} {overflow-y: auto !important;}
        .no-scroll-@{m} {overflow: hidden !important;}
        .no-scroll-x-@{m} {overflow-x: hidden !important;}
        .no-scroll-y-@{m}{overflow-y: hidden !important;}
        .wrap-@{m} {white-space: normal !important;}
        .no-wrap-@{m} {white-space: nowrap !important;}

        .collapse-@{m} {.collapse();}
        .expand-@{m} {.expand();}
    }

    .generate-utils-media-options(@name, @i + 1);
}