@letsprogram/ng-oat 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/oat/css/sidebar.css +28 -16
- package/assets/oat/oat.css +1320 -391
- package/assets/oat/oat.min.css +1 -2
- package/fesm2022/letsprogram-ng-oat.mjs +58 -14
- package/package.json +1 -1
- package/types/letsprogram-ng-oat.d.ts +34 -6
|
@@ -7,19 +7,19 @@
|
|
|
7
7
|
min-height: 100dvh;
|
|
8
8
|
gap: var(--space-4);
|
|
9
9
|
|
|
10
|
-
>
|
|
10
|
+
>main {
|
|
11
11
|
min-width: 0;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
&:has(nav[data-topnav]) {
|
|
15
15
|
--topnav-offset: var(--space-12);
|
|
16
16
|
|
|
17
|
-
>
|
|
17
|
+
>main [id] {
|
|
18
18
|
scroll-margin-block-start: calc(var(--space-12) + var(--space-6));
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
>
|
|
22
|
+
>aside[data-sidebar] {
|
|
23
23
|
position: sticky;
|
|
24
24
|
top: var(--topnav-offset);
|
|
25
25
|
z-index: 1;
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
padding: var(--space-3);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
>
|
|
39
|
+
>footer {
|
|
40
40
|
margin-block-start: auto;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
>
|
|
43
|
+
>nav {
|
|
44
44
|
flex: 1;
|
|
45
45
|
min-height: 0;
|
|
46
46
|
overflow-y: auto;
|
|
@@ -78,9 +78,18 @@
|
|
|
78
78
|
border: none;
|
|
79
79
|
overflow: visible;
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
&+details {
|
|
82
|
+
margin-top: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&[open] summary {
|
|
86
|
+
border-bottom: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
>ul {
|
|
90
|
+
margin-inline-start: var(--space-4);
|
|
91
|
+
padding: var(--space-1) 0;
|
|
92
|
+
}
|
|
84
93
|
}
|
|
85
94
|
|
|
86
95
|
summary {
|
|
@@ -110,13 +119,13 @@
|
|
|
110
119
|
background-color: var(--background);
|
|
111
120
|
border-bottom: 1px solid var(--border);
|
|
112
121
|
box-shadow: var(--shadow-small);
|
|
113
|
-
|
|
122
|
+
|
|
114
123
|
a {
|
|
115
124
|
text-decoration: none;
|
|
116
125
|
}
|
|
117
126
|
}
|
|
118
127
|
|
|
119
|
-
nav[data-topnav]
|
|
128
|
+
nav[data-topnav]~main {
|
|
120
129
|
margin-block-start: var(--space-12);
|
|
121
130
|
}
|
|
122
131
|
|
|
@@ -139,7 +148,7 @@
|
|
|
139
148
|
display: inline-block;
|
|
140
149
|
}
|
|
141
150
|
|
|
142
|
-
>
|
|
151
|
+
>aside[data-sidebar] {
|
|
143
152
|
transform: translateX(0);
|
|
144
153
|
opacity: 1;
|
|
145
154
|
transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
|
|
@@ -149,7 +158,7 @@
|
|
|
149
158
|
grid-template-columns: 0px 1fr;
|
|
150
159
|
gap: 0;
|
|
151
160
|
|
|
152
|
-
>
|
|
161
|
+
>aside[data-sidebar] {
|
|
153
162
|
overflow: hidden;
|
|
154
163
|
min-width: 0;
|
|
155
164
|
transform: translateX(-100%);
|
|
@@ -165,7 +174,7 @@
|
|
|
165
174
|
[data-sidebar-layout] {
|
|
166
175
|
grid-template-columns: 1fr;
|
|
167
176
|
|
|
168
|
-
>
|
|
177
|
+
>aside[data-sidebar] {
|
|
169
178
|
position: fixed;
|
|
170
179
|
left: 0;
|
|
171
180
|
width: min(16rem, 80vw);
|
|
@@ -174,11 +183,14 @@
|
|
|
174
183
|
box-shadow: var(--shadow-large);
|
|
175
184
|
}
|
|
176
185
|
|
|
177
|
-
&[data-sidebar-open]
|
|
186
|
+
&[data-sidebar-open]>aside[data-sidebar] {
|
|
178
187
|
transform: translateX(0);
|
|
179
188
|
}
|
|
180
189
|
}
|
|
181
|
-
|
|
190
|
+
|
|
191
|
+
[data-sidebar-toggle] {
|
|
192
|
+
display: inline-block;
|
|
193
|
+
}
|
|
182
194
|
|
|
183
195
|
[data-sidebar-header] {
|
|
184
196
|
display: flex;
|
|
@@ -188,4 +200,4 @@
|
|
|
188
200
|
border-bottom: 1px solid var(--border);
|
|
189
201
|
}
|
|
190
202
|
}
|
|
191
|
-
}
|
|
203
|
+
}
|