mirror of
https://github.com/papercss/papercss
synced 2024-06-08 00:42:20 +02:00
94 lines
1.4 KiB
SCSS
94 lines
1.4 KiB
SCSS
$number-columns: 12;
|
|
|
|
@mixin create-flex-classes($colName, $breakpoint: 0) {
|
|
@include resp($min: $breakpoint) {
|
|
@for $i from 1 through $number-columns {
|
|
.#{$colName}-#{$i} {
|
|
flex: 0 0 $i * 100% / $number-columns;
|
|
max-width: $i * 100% / $number-columns;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
margin-bottom: 1rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
&.flex-right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&.flex-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
&.flex-edges {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&.flex-spaces {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
&.flex-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
&.flex-middle {
|
|
align-items: center;
|
|
}
|
|
|
|
&.flex-bottom {
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
.col {
|
|
padding: 1rem;
|
|
|
|
@include resp(sm) {
|
|
@include col-size(100%);
|
|
}
|
|
}
|
|
|
|
.col-fill {
|
|
flex: 1 1 0;
|
|
width: auto;
|
|
}
|
|
|
|
@include create-flex-classes(col);
|
|
@include create-flex-classes(xs, $xsmall-screen);
|
|
@include create-flex-classes(sm, $small-screen);
|
|
@include create-flex-classes(md, $medium-screen);
|
|
@include create-flex-classes(lg, $large-screen);
|
|
|
|
.align-top {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.align-middle {
|
|
align-self: center;
|
|
}
|
|
|
|
.align-bottom {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.container {
|
|
margin: 0 auto;
|
|
max-width: 960px;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
@include resp(md) {
|
|
width: 85%;
|
|
}
|
|
@include resp(xs) {
|
|
width: 90%;
|
|
}
|
|
}
|