1 | // Copyright 2018 Palantir Technologies, Inc. All rights reserved.
|
2 | // Licensed under the Apache License, Version 2.0.
|
3 |
|
4 | // this element becomes a flex container in the given direction.
|
5 | // supply `$margin` to put space between each child.
|
6 | // supply `$inline: inline` to use `display: flex-inline`.
|
7 | // customize `flex: 1 1` child selector with $fill.
|
8 | @mixin pt-flex-container($direction: row, $margin: none, $inline: none, $fill: ".#{$ns}-fill") {
|
9 | @if $inline == inline or $inline == true {
|
10 | display: inline-flex;
|
11 | } @else {
|
12 | display: flex;
|
13 | }
|
14 | flex-direction: $direction;
|
15 |
|
16 | > * {
|
17 | flex-grow: 0;
|
18 | flex-shrink: 0;
|
19 | }
|
20 |
|
21 | > #{$fill} {
|
22 | flex-grow: 1;
|
23 | flex-shrink: 1;
|
24 | }
|
25 |
|
26 | @if $margin != none {
|
27 | @include pt-flex-margin($direction, $margin);
|
28 | }
|
29 | }
|
30 |
|
31 | // applies margin along axis of direction between every direct child, with no margins on either end.
|
32 | // $direction: row | column
|
33 | // $margin: margin[-right|-bottom] value
|
34 | @mixin pt-flex-margin($direction, $margin) {
|
35 | $margin-prop: if($direction == row, margin-right, margin-bottom);
|
36 |
|
37 | // CSS API support
|
38 | &::before,
|
39 | > * {
|
40 | // space after all children
|
41 | #{$margin-prop}: $margin;
|
42 | }
|
43 |
|
44 | // remove space after last child
|
45 | &:empty::before,
|
46 | > :last-child {
|
47 | #{$margin-prop}: 0;
|
48 | }
|
49 | }
|