src/layouts/_split-view.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

@use "sass:meta";
@use "pkg:include-media/dist/include-media" as media;
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "../props" as *;

@forward "split-view.vars";
@use "split-view.vars" as vars;

@mixin styles {
	@include materialize-at-root(meta.module-variables("vars"));

	@include bem.layout("split-view") {
		display: flex;
		gap: props.get(vars.$col-gap);
		align-items: start;

		@include bem.elem("panel") {
			flex: 1 1 auto;
			inline-size: 100%;
			min-inline-size: 0;

			&::before {
				display: block;
				margin-block: -100em 100em;
				content: "";
			}

			@include bem.modifier("side-25") {
				flex: 0 0 auto;
				inline-size: 25%;
			}

			@include bem.modifier("min-50") {
				min-inline-size: props.get(vars.$panel--min-50);
			}

			@include bem.modifier("min-100") {
				min-inline-size: props.get(vars.$panel--min-100);
			}

			@include bem.modifier("min-200") {
				min-inline-size: props.get(vars.$panel--min-200);
			}

			@include bem.modifier("sticky") {
				position: sticky;
				inset-block-start: props.get(vars.$panel--sticky-offset);
			}
		}

		@include bem.modifier("gapless") {
			gap: props.get(vars.$gapless);

			@include bem.elem("panel") {
				@include bem.modifier("min-50") {
					min-inline-size: calc(
						props.get(vars.$panel--min-50) +
							props.get(vars.$col-gap) - props.get(vars.$gapless)
					);
				}

				@include bem.modifier("min-100") {
					min-inline-size: calc(
						props.get(vars.$panel--min-100) +
							props.get(vars.$col-gap) - props.get(vars.$gapless)
					);
				}

				@include bem.modifier("min-200") {
					min-inline-size: calc(
						props.get(vars.$panel--min-200) +
							props.get(vars.$col-gap) - props.get(vars.$gapless)
					);
				}
			}
		}

		@include bem.elem("content") {
			inline-size: 100%;
		}

		@include media.media("<=md") {
			flex-direction: column;
			gap: props.get(vars.$row-gap);
			align-items: stretch;

			@include bem.modifier("gapless") {
				gap: props.get(vars.$gapless);
			}

			@include bem.modifier("wrap-reverse") {
				flex-direction: column-reverse;
			}

			@include bem.elem("panel") {
				inline-size: auto;

				@include bem.modifier("side-25") {
					inline-size: auto;
				}

				@include bem.modifier("min-50", "min-100", "min-200") {
					min-inline-size: 0;
				}

				@include bem.modifier("sticky") {
					position: static;
				}
			}
		}
	}
}