116 lines
2.0 KiB
Plaintext
116 lines
2.0 KiB
Plaintext
.layui-row:after,
|
|
.layui-row:before {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.generate-space(@a) {
|
|
.layui-col-space@{a} {
|
|
margin: -0.5px * @a;
|
|
}
|
|
|
|
.layui-col-space@{a} > * {
|
|
padding: 0.5px * @a;
|
|
}
|
|
}
|
|
|
|
.loop-generate-space(@index) when (@index <=30) {
|
|
.generate-space(@index);
|
|
.loop-generate-space(@index + 1);
|
|
}
|
|
|
|
.loop-generate-space(1);
|
|
|
|
.generate-col-xs(@a) {
|
|
.layui-col-xs@{a} {
|
|
float: left;
|
|
display: block;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100% * (@a / 24);
|
|
}
|
|
|
|
.layui-col-xs-offset@{a} {
|
|
margin-left: 100% * (@a / 24);
|
|
}
|
|
}
|
|
|
|
.generate-col-sm(@a) {
|
|
.layui-col-sm@{a} {
|
|
float: left;
|
|
display: block;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100% * (@a / 24);
|
|
}
|
|
|
|
.layui-col-sm-offset@{a} {
|
|
margin-left: 100% * (@a / 24);
|
|
}
|
|
}
|
|
|
|
.generate-col-md(@a) {
|
|
.layui-col-md@{a} {
|
|
float: left;
|
|
display: block;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100% * (@a / 24);
|
|
}
|
|
|
|
.layui-col-md-offset@{a} {
|
|
margin-left: 100% * (@a / 24);
|
|
}
|
|
}
|
|
|
|
.generate-col-lg(@a) {
|
|
.layui-col-lg@{a} {
|
|
float: left;
|
|
display: block;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100% * (@a / 24);
|
|
}
|
|
|
|
.layui-col-lg-offset@{a} {
|
|
margin-left: 100% * (@a / 24);
|
|
}
|
|
}
|
|
|
|
.loop-generate-col-xs(@index) when (@index <=24) {
|
|
.generate-col-xs(@index);
|
|
.loop-generate-col-xs(@index + 1);
|
|
}
|
|
|
|
.loop-generate-col-sm(@index) when (@index <=24) {
|
|
.generate-col-sm(@index);
|
|
.loop-generate-col-sm(@index + 1);
|
|
}
|
|
|
|
.loop-generate-col-md(@index) when (@index <=24) {
|
|
.generate-col-md(@index);
|
|
.loop-generate-col-md(@index + 1);
|
|
}
|
|
|
|
.loop-generate-col-lg(@index) when (@index <=24) {
|
|
.generate-col-lg(@index);
|
|
.loop-generate-col-lg(@index + 1);
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.loop-generate-col-xs(1);
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.loop-generate-col-sm(1);
|
|
}
|
|
|
|
@media screen and (min-width: 992px) {
|
|
.loop-generate-col-md(1);
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) {
|
|
.loop-generate-col-lg(1);
|
|
}
|