summaryrefslogtreecommitdiffstats
path: root/src/layouts
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/layouts
parentInit (diff)
downloadiro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.tar.gz
iro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.tar.bz2
iro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.zip
Update
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_card.scss38
-rw-r--r--src/layouts/_container.scss91
2 files changed, 129 insertions, 0 deletions
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
new file mode 100644
index 0000000..f6b6b03
--- /dev/null
+++ b/src/layouts/_card.scss
@@ -0,0 +1,38 @@
1@include namespace('card') {
2 @include store((
3 --dims: (
4 --pad-x: iro-px-to-rem(11px),
5 --pad-y: iro-px-to-rem(8px),
6 --lg: (
7 --pad-x: iro-px-to-rem(14px),
8 --pad-y: iro-px-to-rem(11px),
9 )
10 )
11 ));
12
13 @include layout(namespace()) {
14 display: flex;
15 align-items: center;
16 padding: prop(--dims --pad-y) prop(--dims --pad-x);
17 gap: prop(--dims --pad-x);
18 line-height: 1.4;
19
20 @include modifier('lg') {
21 padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x);
22 gap: prop(--dims --lg --pad-x);
23 }
24
25 @include modifier('flush') {
26 padding: 0;
27 }
28
29 @include element('block') {
30 flex: 0 0 auto;
31
32 @include modifier('main') {
33 flex-shrink: 1;
34 width: 100%;
35 }
36 }
37 }
38}
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
new file mode 100644
index 0000000..efe5203
--- /dev/null
+++ b/src/layouts/_container.scss
@@ -0,0 +1,91 @@
1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
3
4@include iro.props-namespace('container') {
5 @include iro.props-store((
6 --dims: (
7 --content-width: iro.fn-px-to-rem(700px),
8 --sm-content-width: iro.fn-px-to-rem(360px),
9 --padding-x: 3rem,
10 --padding-y: 3rem,
11 --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true),
12 )
13 ));
14
15 @include iro.bem-layout(iro.props-namespace()) {
16 overflow: hidden;
17
18 @include iro.bem-elem('inner') {
19 margin-top: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
20 margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
21
22 &::before,
23 &::after {
24 content: '';
25 display: block;
26 width: 0;
27 height: 0;
28 }
29
30 &::before {
31 margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true);
32 }
33
34 &::after {
35 margin-top: iro.props-get(--dims --spacing --y --xl, $global: true);
36 }
37 }
38
39 @include iro.bem-modifier('pad-x') {
40 padding-right: iro.props-get(--dims --padding-x);
41 padding-left: iro.props-get(--dims --padding-x);
42 }
43
44 @include iro.bem-modifier('pad-y') {
45 padding-top: iro.props-get(--dims --padding-y);
46 padding-bottom: iro.props-get(--dims --padding-y);
47 }
48
49 @include iro.bem-modifier('narrow') {
50 max-width: iro.props-get(--dims --content-width);
51 margin-right: auto;
52 margin-left: auto;
53
54 @each $breakpoint in map-keys(media.$breakpoints) {
55 @include media.media('<=#{$breakpoint}') {
56 @include iro.bem-suffix('#{$breakpoint}-down') {
57 max-width: iro.props-get(--dims --content-width);
58 margin-right: auto;
59 margin-left: auto;
60 }
61 }
62 }
63 }
64
65 @include iro.bem-modifier('sm-narrow') {
66 max-width: iro.props-get(--dims --sm-content-width);
67 margin-right: auto;
68 margin-left: auto;
69
70 @each $breakpoint in map-keys(media.$breakpoints) {
71 @include media.media('<=#{$breakpoint}') {
72 @include iro.bem-suffix('#{$breakpoint}-down') {
73 max-width: iro.props-get(--dims --sm-content-width);
74 margin-right: auto;
75 margin-left: auto;
76 }
77 }
78 }
79 }
80
81 @include iro.bem-modifier('themed') {
82 background-color: iro.props-get(--colors --bg, $global: true);
83 color: iro.props-get(--colors --fg, $global: true);
84 }
85
86 @include iro.bem-modifier('in-page') {
87 margin-top: iro.props-get(--dims --in-page-spacing-y);
88 margin-bottom: iro.props-get(--dims --in-page-spacing-y);
89 }
90 }
91}