diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-06 17:30:31 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-06 17:30:31 +0100 |
| commit | 953843dea745ef5e064acd589742a49cb7a7ea54 (patch) | |
| tree | 955b91ce90787e792abd52c3eef8ab046bd30623 /src/mixins | |
| parent | Separate function for global props (diff) | |
| download | iro-design-953843dea745ef5e064acd589742a49cb7a7ea54.tar.gz iro-design-953843dea745ef5e064acd589742a49cb7a7ea54.tar.bz2 iro-design-953843dea745ef5e064acd589742a49cb7a7ea54.zip | |
Cleanup
Diffstat (limited to 'src/mixins')
| -rw-r--r-- | src/mixins/_grid.scss | 88 |
1 files changed, 0 insertions, 88 deletions
diff --git a/src/mixins/_grid.scss b/src/mixins/_grid.scss deleted file mode 100644 index e0a73d9..0000000 --- a/src/mixins/_grid.scss +++ /dev/null | |||
| @@ -1,88 +0,0 @@ | |||
| 1 | $context-id: 'grid' !default; | ||
| 2 | |||
| 3 | @include iro-context-stack-create($grid-context-id); | ||
| 4 | |||
| 5 | @mixin native-grid { | ||
| 6 | @supports (display: grid) { | ||
| 7 | @content; | ||
| 8 | } | ||
| 9 | } | ||
| 10 | |||
| 11 | @mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) { | ||
| 12 | display: flex; | ||
| 13 | flex-flow: row wrap; | ||
| 14 | align-items: stretch; | ||
| 15 | justify-content: flex-start; | ||
| 16 | margin: (-.5 * $v-spacing) (-.5 * $h-spacing); | ||
| 17 | |||
| 18 | @if $reverse { | ||
| 19 | flex-direction: row-reverse; | ||
| 20 | } | ||
| 21 | |||
| 22 | @include iro-context-push($grid-context-id, 'grid', ( | ||
| 23 | --h-spacing: $h-spacing, | ||
| 24 | --v-spacing: $v-spacing, | ||
| 25 | --columns: $columns, | ||
| 26 | --reverse: $reverse | ||
| 27 | )); | ||
| 28 | |||
| 29 | @content; | ||
| 30 | |||
| 31 | @include iro-context-pop($grid-context-id); | ||
| 32 | } | ||
| 33 | |||
| 34 | @mixin grid-col { | ||
| 35 | @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); | ||
| 36 | |||
| 37 | $data: nth(iro-context-get($grid-context-id, 'grid'), 2); | ||
| 38 | $v-spacing: map-get($data, --v-spacing); | ||
| 39 | $h-spacing: map-get($data, --h-spacing); | ||
| 40 | |||
| 41 | box-sizing: border-box; | ||
| 42 | flex: 0 0 auto; | ||
| 43 | margin: .5 * $v-spacing .5 * $h-spacing; | ||
| 44 | |||
| 45 | @include iro-context-push($grid-context-id, 'grid__col'); | ||
| 46 | |||
| 47 | @content; | ||
| 48 | |||
| 49 | @include iro-context-pop($grid-context-id); | ||
| 50 | } | ||
| 51 | |||
| 52 | @mixin grid-col-span($i) { | ||
| 53 | @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); | ||
| 54 | |||
| 55 | $data: nth(iro-context-get($grid-context-id, 'grid'), 2); | ||
| 56 | $columns: map-get($data, --columns); | ||
| 57 | $h-spacing: map-get($data, --h-spacing); | ||
| 58 | |||
| 59 | @if $h-spacing != 0 { | ||
| 60 | width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing}); | ||
| 61 | // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ | ||
| 62 | } @else { | ||
| 63 | width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000}); | ||
| 64 | } | ||
| 65 | } | ||
| 66 | |||
| 67 | @mixin grid-col-shift($i) { | ||
| 68 | @include iro-context-assert-stack-must-contain($grid-context-id, 'grid'); | ||
| 69 | |||
| 70 | $data: nth(iro-context-get($grid-context-id, 'grid'), 2); | ||
| 71 | $columns: map-get($data, --columns); | ||
| 72 | $h-spacing: map-get($data, --h-spacing); | ||
| 73 | $reverse: map-get($data, --reverse); | ||
| 74 | |||
| 75 | $prop: if($reverse, margin-right, margin-left); | ||
| 76 | |||
| 77 | @if $i == 0 { | ||
| 78 | #{$prop}: 0; | ||
| 79 | } @else { | ||
| 80 | @if $h-spacing != 0 { | ||
| 81 | #{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2}); | ||
| 82 | // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ | ||
| 83 | } @else { | ||
| 84 | #{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000}); | ||
| 85 | // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^ | ||
| 86 | } | ||
| 87 | } | ||
| 88 | } | ||
