99 lines
2.1 KiB
Plaintext
99 lines
2.1 KiB
Plaintext
.flex(@media) {
|
|
display: flex;
|
|
&.row-@{media} {
|
|
flex-direction: row;
|
|
}
|
|
&.row-@{media}-inv {
|
|
flex-direction: row-reverse;
|
|
}
|
|
&.col-@{media} {
|
|
flex-direction: column;
|
|
}
|
|
&.col-@{media}-inv {
|
|
flex-direction: column-reverse;
|
|
}
|
|
@main-axis-align: {
|
|
start: flex-start;
|
|
center: center;
|
|
end: flex-end;
|
|
space: space-around;
|
|
even: space-evenly;
|
|
between: space-between;
|
|
baseline: baseline;
|
|
}
|
|
each(@main-axis-align, {
|
|
&.rm-@{key}-@{media} {
|
|
justify-content: @value;
|
|
}
|
|
&.cm-@{key}-@{media} {
|
|
align-content: @value;
|
|
}
|
|
});
|
|
@cross-axis-align: {
|
|
start: flex-start;
|
|
center: center;
|
|
end: flex-end;
|
|
stretch: stretch;
|
|
baseline: baseline;
|
|
}
|
|
each(@cross-axis-align, {
|
|
&.rc-@{key}-@{media} {
|
|
align-items: @value;
|
|
}
|
|
.as-@{key}-@{media} {
|
|
align-self: @value;
|
|
}
|
|
});
|
|
each(range(1, 10), .(@i) {
|
|
.extend-@{i}-@{media} {
|
|
flex-grow: @i;
|
|
}
|
|
.shrink-@{i}-@{media} {
|
|
flex-shrink: @i;
|
|
}
|
|
});
|
|
@special-width: {
|
|
min: min-content;
|
|
max: max-content;
|
|
fit: fit-content;
|
|
};
|
|
each(@special-width, {
|
|
.w-@{key}-@{media} {
|
|
width: @value;
|
|
}
|
|
});
|
|
@basis-percent: 2, 3, 4, 5, 8, 10, 12, 16, 20, 24;
|
|
each(@basis-percent, .(@max) {
|
|
each(range(1, @max), .(@i) {
|
|
.b-@{i}-@{max}-@{media} {
|
|
flex-basis: percentage(@i / @max);
|
|
}
|
|
.w-@{i}-@{max}-@{media} {
|
|
width: percentage(@i / @max);
|
|
}
|
|
});
|
|
});
|
|
@wrap-modes: {
|
|
none: nowrap;
|
|
wrap: wrap;
|
|
inv: wrap-reverse;
|
|
}
|
|
each(@wrap-modes, {
|
|
&.w-@{key}-@{media} {
|
|
flex-wrap: @value;
|
|
}
|
|
})
|
|
}
|
|
|
|
.text-align(@media) {
|
|
@align: {
|
|
l: left;
|
|
c: center;
|
|
r: right;
|
|
}
|
|
each(@align, {
|
|
&.align-@{key}-@{media} {
|
|
text-align: @value;
|
|
}
|
|
})
|
|
} |