mirror of
https://github.com/papercss/papercss
synced 2024-06-07 16:32:15 +02:00
137 lines
3.2 KiB
Plaintext
137 lines
3.2 KiB
Plaintext
.center-all() {
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
}
|
|
.col-size(@percent) {
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0 0 @percent;
|
|
-ms-flex: 0 0 @percent;
|
|
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;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-flow: row wrap;
|
|
-ms-flex-flow: row wrap;
|
|
flex-flow: row wrap;
|
|
margin-bottom: 1rem;
|
|
&.flex-right {
|
|
-webkit-box-pack: end;
|
|
-webkit-justify-content: flex-end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
&.flex-center {
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
&.flex-edges {
|
|
-webkit-box-pack: justify;
|
|
-webkit-justify-content: space-between;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
&.flex-spaces {
|
|
-webkit-justify-content: space-around;
|
|
-ms-flex-pack: distribute;
|
|
justify-content: space-around;
|
|
}
|
|
&.flex-top {
|
|
-webkit-box-align: start;
|
|
-webkit-align-items: flex-start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
}
|
|
&.flex-middle {
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
&.flex-bottom {
|
|
-webkit-box-align: end;
|
|
-webkit-align-items: flex-end;
|
|
-ms-flex-align: end;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
.col {
|
|
padding: 1rem;
|
|
@media (max-width: 767px) {
|
|
// Stack for mobile
|
|
.col-size(100%);
|
|
}
|
|
}
|
|
.col-fill {
|
|
width: auto;
|
|
flex: 1 1 0px;
|
|
}
|
|
.generate-columns(12);
|
|
.align-top {
|
|
-webkit-align-self: flex-start;
|
|
-ms-flex-item-align: start;
|
|
align-self: flex-start;
|
|
}
|
|
.align-middle {
|
|
-webkit-align-self: center;
|
|
-ms-flex-item-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
}
|
|
.align-bottom {
|
|
-webkit-align-self: flex-end;
|
|
-ms-flex-item-align: end;
|
|
align-self: flex-end;
|
|
} |