summaryrefslogtreecommitdiffstats
path: root/src/mixins
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 12:26:35 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 12:26:35 +0100
commit144b7a2ea83507c98544d14ad9435cc5e51ac071 (patch)
tree7b18227482fa9f5d29d358ce1540b7a6d105febd /src/mixins
parentInit (diff)
downloadiro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.tar.gz
iro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.tar.bz2
iro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.zip
Update
Diffstat (limited to 'src/mixins')
-rw-r--r--src/mixins/_grid.scss88
-rw-r--r--src/mixins/_typography.scss63
2 files changed, 151 insertions, 0 deletions
diff --git a/src/mixins/_grid.scss b/src/mixins/_grid.scss
new file mode 100644
index 0000000..e0a73d9
--- /dev/null
+++ b/src/mixins/_grid.scss
@@ -0,0 +1,88 @@
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}
diff --git a/src/mixins/_typography.scss b/src/mixins/_typography.scss
new file mode 100644
index 0000000..31e39f0
--- /dev/null
+++ b/src/mixins/_typography.scss
@@ -0,0 +1,63 @@
1@function set-font($basis, $values: ()) {
2 $font: map-merge($basis, $values);
3
4 $map: (font-family: map-get($font, 'family'));
5
6 @if (map-has-key($font, 'size')) {
7 $map: map-merge(
8 $map, (
9 font-size: map-get($font, 'size')
10 )
11 );
12 }
13
14 @if (map-has-key($font, 'weight')) {
15 $map: map-merge(
16 $map, (
17 font-weight: map-get($font, 'weight')
18 )
19 );
20 }
21
22 @if (map-has-key($font, 'style')) {
23 $map: map-merge(
24 $map, (
25 font-style: map-get($font, 'style')
26 )
27 );
28 }
29
30 @if (map-has-key($font, 'line-height')) {
31 $map: map-merge(
32 $map, (
33 line-height: map-get($font, 'line-height')
34 )
35 );
36 }
37
38 @if (map-has-key($font, 'transform')) {
39 $map: map-merge(
40 $map, (
41 text-transform: map-get($font, 'transform')
42 )
43 );
44 }
45
46 @if (map-has-key($font, 'variant-alternates')) {
47 $map: map-merge(
48 $map, (
49 font-variant-alternates: map-get($font, 'variant-alternates')
50 )
51 );
52 }
53
54 @return $map;
55}
56
57@mixin set-font($basis, $values: ()) {
58 $values: set-font($basis, $values);
59
60 @each $prop, $value in $values {
61 #{$prop}: $value;
62 }
63}