UNPKG

1.27 kBSCSSView Raw
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}