deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-23 08:02:19 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #56 from Fraham/Feature-RefactorColumnGeneration

Browse source 
Refactor column generation
This commit is contained in:
Rhyne 2017-11-22 11:02:38 -05:00 committed by GitHub
parent 55f4d56009 6d0826c614
commit 1b6e9762b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/flexbox.less
View file

@ -1,3 +1,27 @@
@columnNames: col, sm, md, lg;
@columnSizes: 0px, 768px, 992px, 1200px;
@numberOfColumns: 12;
.make-column-class(@name, @size, @n, @p: 1) when (@p =< @n) {
@percent: (@p * 100% / @n);
.@{name}-@{p} {
.col-size(@percent);
}
.make-column-class(@name, @size, @n, (@p + 1));
}
.make-column-classes(@n, @j: 1) when (@j =< length(@columnNames)) {
@columnName: extract(@columnNames, @j);
@columnSize: extract(@columnSizes, @j);
@media (min-width: @columnSize) {
.make-column-class(@columnName, @columnSize, @n);
}
.make-column-classes(@n, @j + 1);
}
.center-all() {
-webkit-align-items: center;
align-items: center;
@ -11,47 +35,6 @@
flex: 0 0 @percent;
max-width: @percent;
}
.generate-col(@n, @i: 1) when (@i =< @n) {
@percent: (@i * 100% / @n);
.col-@{i} {
.col-size(@percent);
}
.generate-col(@n, (@i + 1));
}
.generate-sm(@n, @i: 1) when (@i =< @n) {
@percent: (@i * 100% / @n);
@media (min-width: 768px) {
.sm-@{i} {
.col-size(@percent);
}
}
.generate-sm(@n, (@i + 1));
}
.generate-md(@n, @i: 1) when (@i =< @n) {
@percent: (@i * 100% / @n);
@media (min-width: 992px) {
.md-@{i} {
.col-size(@percent);
}
}
.generate-md(@n, (@i + 1));
}
.generate-lg(@n, @i: 1) when (@i =< @n) {
@percent: (@i * 100% / @n);
@media (min-width: 1200px) {
.lg-@{i} {
.col-size(@percent);
}
}
.generate-lg(@n, (@i + 1));
}
.generate-columns(@n) {
.generate-col(@n);
.generate-sm(@n);
.generate-md(@n);
.generate-lg(@n);
}
.row {
margin-right: auto;
margin-left: auto;
@ -118,7 +101,7 @@
width: auto;
flex: 1 1 0px;
}
.generate-columns(12);
.make-column-classes(@numberOfColumns);
.align-top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;