metro4/source/common/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;
}

.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 {
    .collapse();
}

.expand {
    .expand();
}

.selected {
    box-shadow: 0 0 0 4px rgba(
            red(@selectedElementBorder),
            green(@selectedElementBorder),
            blue(@selectedElementBorder),
            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, .-disabled {
    pointer-events: none!important;
    color: @lightGray!important;
}

.stop-pointer {
    pointer-events: none;
    user-select: none;
}

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

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