Metro-UI-CSS/source/common-css/utils.less at dev · cgb-javascript-css-typescript/Metro-UI-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
@import (once) "../include/vars";
@import (once) "../include/mixins";

:root {
    --selected-color: #1FB1F8FF;
}

.dark-side {

}

.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 var(--selected-color)!important;

    &::after {
        position: absolute;
        display: block;
        border-top: 28px solid var(--selected-color);
        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: #fff!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();}
    }
})