feather-k-demo-utils 0.0.36 → 0.0.37
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/lib/styles/demo.css +17 -10
- package/package.json +1 -1
package/lib/styles/demo.css
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
* {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
.demo-app {
|
|
2
6
|
display: flex;
|
|
3
7
|
flex-direction: column;
|
|
4
8
|
justify-content: center;
|
|
5
|
-
gap: 1em;
|
|
6
9
|
align-items: center;
|
|
10
|
+
gap: 1em;
|
|
11
|
+
max-width: 1200px;
|
|
12
|
+
margin: 0 auto;
|
|
7
13
|
}
|
|
8
14
|
.demo-selection {
|
|
9
15
|
position: absolute;
|
|
@@ -14,11 +20,12 @@
|
|
|
14
20
|
}
|
|
15
21
|
}
|
|
16
22
|
.featherk-demo {
|
|
17
|
-
|
|
23
|
+
width: 100%;
|
|
18
24
|
.demo-form {
|
|
19
25
|
border: 1px solid var(--kendo-color-border);
|
|
20
26
|
padding: 1em;
|
|
21
27
|
max-width: 100%;
|
|
28
|
+
border-radius: var(--kendo-border-radius-md);
|
|
22
29
|
}
|
|
23
30
|
.demo-actions {
|
|
24
31
|
display: flex;
|
|
@@ -28,7 +35,8 @@
|
|
|
28
35
|
background-color: var(--kendo-color-light);
|
|
29
36
|
padding: 1em;
|
|
30
37
|
margin-top: 1em;
|
|
31
|
-
width:
|
|
38
|
+
width: 100%;
|
|
39
|
+
border-radius: var(--kendo-border-radius-md);
|
|
32
40
|
}
|
|
33
41
|
}
|
|
34
42
|
|
|
@@ -160,7 +168,7 @@
|
|
|
160
168
|
width: 30rem;
|
|
161
169
|
overflow-wrap: break-word;
|
|
162
170
|
word-break: break-word;
|
|
163
|
-
left: -
|
|
171
|
+
left: -28rem;
|
|
164
172
|
transition: left 0.3s ease;
|
|
165
173
|
&:hover {
|
|
166
174
|
background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
|
|
@@ -168,7 +176,7 @@
|
|
|
168
176
|
}
|
|
169
177
|
&.active,
|
|
170
178
|
&:focus-visible {
|
|
171
|
-
left: -
|
|
179
|
+
left: -1em;
|
|
172
180
|
outline: 2px solid var(--kendo-color-primary-subtle-active);
|
|
173
181
|
outline-offset: 4px;
|
|
174
182
|
color: initial;
|
|
@@ -209,7 +217,7 @@
|
|
|
209
217
|
width: 30rem;
|
|
210
218
|
overflow-wrap: break-word;
|
|
211
219
|
word-break: break-word;
|
|
212
|
-
left: -
|
|
220
|
+
left: -28rem;
|
|
213
221
|
transition: left 0.3s ease;
|
|
214
222
|
&:hover {
|
|
215
223
|
background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
|
|
@@ -217,7 +225,7 @@
|
|
|
217
225
|
|
|
218
226
|
&.active,
|
|
219
227
|
&:focus-visible {
|
|
220
|
-
left: -
|
|
228
|
+
left: -1em;
|
|
221
229
|
outline: 2px solid var(--kendo-color-primary-emphasis);
|
|
222
230
|
outline-offset: 4px;
|
|
223
231
|
color: initial;
|
|
@@ -260,13 +268,13 @@
|
|
|
260
268
|
overflow-wrap: break-word;
|
|
261
269
|
word-break: break-word;
|
|
262
270
|
transition: right 0.3s ease;
|
|
263
|
-
right: -
|
|
271
|
+
right: -28rem;
|
|
264
272
|
&:hover {
|
|
265
273
|
background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
|
|
266
274
|
}
|
|
267
275
|
&.active,
|
|
268
276
|
&:focus-visible {
|
|
269
|
-
right: -
|
|
277
|
+
right: -1em;
|
|
270
278
|
outline: 2px solid var(--kendo-color-primary-emphasis);
|
|
271
279
|
outline-offset: 4px;
|
|
272
280
|
color: initial;
|
|
@@ -304,7 +312,6 @@
|
|
|
304
312
|
white-space: normal;
|
|
305
313
|
}
|
|
306
314
|
|
|
307
|
-
|
|
308
315
|
.hidden {
|
|
309
316
|
display: none;
|
|
310
317
|
}
|