Metro-UI-CSS/source/common-css/flex.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
@import (once) "../include/vars";
@import (once) "../include/mixins";

@ordersCount: 24;

.d-flex {display: flex!important;}
.d-inline-flex {display: inline-flex!important;}

each(@media-rules, {
    @media screen and (min-width: @value) {
        .d-flex-@{key} {display: flex!important;}
        .d-inline-flex-@{key} {display: inline-flex!important;}
    }
})

each(range(24), {
    .order-@{value} {
        order: @value!important;
    }
})

.flex-equal-items {
    & > * {
        flex: 1;
    }
}

.flex-nowrap {flex-wrap: nowrap !important;}
.flex-wrap {flex-wrap: wrap !important;}
.flex-wrap-r {flex-wrap: wrap-reverse !important;}
.flex-column {flex-direction: column !important;}
.flex-column-r {flex-direction: column-reverse !important;}
.flex-row {flex-direction: row !important;}
.flex-row-r {flex-direction: row-reverse !important;}
.flex-align-start {align-items: flex-start !important;}
.flex-align-end {align-items: flex-end !important;}
.flex-align-center {align-items: center !important;}
.flex-align-stretch {align-items: stretch !important;}
.flex-align-baseline {align-items: baseline !important;}
.flex-self-start {align-self: flex-start !important;}
.flex-self-end {align-self: flex-end !important;}
.flex-self-center {align-self: center !important;}
.flex-self-stretch {align-self: stretch !important;}
.flex-self-baseline {align-self: baseline !important;}
.flex-justify-start {justify-content: flex-start !important;}
.flex-justify-end {justify-content: flex-end !important;}
.flex-justify-center {justify-content: center !important;}
.flex-justify-between {justify-content: space-between !important;}
.flex-justify-around {justify-content: space-around !important;}
.flex-content-start {align-content: flex-start !important;}
.flex-content-end {align-content: flex-end !important;}
.flex-content-center {align-content: center !important;}
.flex-content-between {align-content: space-between !important;}
.flex-content-around {align-content: space-around !important;}
.flex-content-stretch {align-content: stretch !important;}

.flex-no-shrink > * {flex-shrink: 0;}
.flex-shrink > * {flex-shrink: 1;}
.flex-no-grow > * {flex-grow: 0;}
.flex-grow > * {flex-grow: 1;}

.flex-no-shrink-self {flex-shrink: 0;}
.flex-shrink-self {flex-shrink: 1;}
.flex-no-grow-self {flex-grow: 0;}
.flex-grow-self {flex-grow: 1;}

.flex-right {margin-left: auto;}
.flex-left {margin-right: auto;}
.flex-top {margin-bottom: auto;}
.flex-bottom {margin-top: auto;}

.flex-center, .content-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

each(@media-rules, {
    @media screen and (min-width: @value) {
        .flex-nowrap-@{key} {flex-wrap: nowrap !important;}
        .flex-wrap-@{key} {flex-wrap: wrap !important;}
        .flex-wrap-r-@{key} {flex-wrap: wrap-reverse !important;}
        .flex-column-@{key} {flex-direction: column !important;}
        .flex-column-r-@{key} {flex-direction: column-reverse !important;}
        .flex-row-@{key} {flex-direction: row !important;}
        .flex-row-r-@{key} {flex-direction: row-reverse !important;}
        .flex-align-start-@{key} {align-items: flex-start !important;}
        .flex-align-end-@{key} {align-items: flex-end !important;}
        .flex-align-center-@{key} {align-items: center !important;}
        .flex-align-stretch-@{key} {align-items: stretch !important;}
        .flex-align-baseline-@{key} {align-items: baseline !important;}
        .flex-self-start-@{key} {align-self: flex-start !important;}
        .flex-self-end-@{key} {align-self: flex-end !important;}
        .flex-self-center-@{key} {align-self: center !important;}
        .flex-self-stretch-@{key} {align-self: stretch !important;}
        .flex-self-baseline-@{key} {align-self: baseline !important;}
        .flex-justify-start-@{key} {justify-content: flex-start !important;}
        .flex-justify-end-@{key} {justify-content: flex-end !important;}
        .flex-justify-center-@{key} {justify-content: center !important;}
        .flex-justify-between-@{key} {justify-content: space-between !important;}
        .flex-justify-around-@{key} {justify-content: space-around !important;}
        .flex-content-start-@{key} {align-content: flex-start !important;}
        .flex-content-end-@{key} {align-content: flex-end !important;}
        .flex-content-center-@{key} {align-content: center !important;}
        .flex-content-between-@{key} {align-content: space-between !important;}
        .flex-content-around-@{key} {align-content: space-around !important;}
        .flex-content-stretch-@{key} {align-content: stretch !important;}

        .flex-no-shrink-@{key} > * {flex-shrink: 0;}
        .flex-shrink-@{key} > * {flex-shrink: 1;}
        .flex-no-grow-@{key} > * {flex-grow: 0;}
        .flex-grow-@{key} > * {flex-grow: 1;}

        .flex-no-shrink-self-@{key} {flex-shrink: 0;}
        .flex-shrink-self-@{key} {flex-shrink: 1;}
        .flex-no-grow-self-@{key} {flex-grow: 0;}
        .flex-grow-self-@{key} {flex-grow: 1;}

        .flex-right-@{key} {margin-left: auto;}
        .flex-left-@{key} {margin-right: auto;}
        .flex-top-@{key} {margin-bottom: auto;}
        .flex-bottom-@{key} {margin-top: auto;}

        each(range(24), .(@v){
            .order-@{v}-@{key} {
                order: @v!important;
            }
        })
    }
})