@ozen-ui/kit 0.2.0 → 0.2.2
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/__inner__/cjs/components/FieldHint/FieldHint.css +1 -0
- package/__inner__/cjs/components/FieldLabel/FieldLabel.css +4 -2
- package/__inner__/cjs/components/Snackbar/components/Snackbar/Snackbar.css +8 -5
- package/__inner__/cjs/components/Snackbar/components/SnackbarItem/SnackbarItem.css +2 -2
- package/__inner__/esm/components/FieldHint/FieldHint.css +1 -0
- package/__inner__/esm/components/FieldLabel/FieldLabel.css +4 -2
- package/__inner__/esm/components/Snackbar/components/Snackbar/Snackbar.css +8 -5
- package/__inner__/esm/components/Snackbar/components/SnackbarItem/SnackbarItem.css +2 -2
- package/package.json +1 -1
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
.FieldLabel {
|
|
2
2
|
font: var(--field-label-font);
|
|
3
3
|
color: var(--color-content-secondary);
|
|
4
|
-
transition:
|
|
4
|
+
transition:
|
|
5
|
+
transform var(--transition-default),
|
|
5
6
|
font var(--transition-default);
|
|
6
7
|
position: absolute;
|
|
7
8
|
box-sizing: border-box;
|
|
8
9
|
inset-block-start: var(--field-label-top);
|
|
9
|
-
inline-
|
|
10
|
+
inset-inline-start: 0;
|
|
11
|
+
max-inline-size: 100%;
|
|
10
12
|
overflow: hidden;
|
|
11
13
|
text-overflow: ellipsis;
|
|
12
14
|
white-space: nowrap;
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
.Snackbar {
|
|
2
2
|
position: fixed;
|
|
3
|
-
inline-size: 400px;
|
|
3
|
+
max-inline-size: 400px;
|
|
4
|
+
min-inline-size: 300px;
|
|
4
5
|
min-block-size: 0;
|
|
5
6
|
display: flex;
|
|
6
7
|
flex-direction: column;
|
|
7
8
|
z-index: var(--z-index-snackbar);
|
|
9
|
+
margin: var(--space-m);
|
|
10
|
+
gap: var(--space-s);
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
.Snackbar_anchorHorizontal_left {
|
|
11
|
-
inset-inline-start:
|
|
14
|
+
inset-inline-start: 0;
|
|
12
15
|
}
|
|
13
16
|
|
|
14
17
|
.Snackbar_anchorHorizontal_right {
|
|
15
|
-
inset-inline-end:
|
|
18
|
+
inset-inline-end: 0;
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
.Snackbar_anchorHorizontal_center {
|
|
@@ -21,9 +24,9 @@
|
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
.Snackbar_anchorVertical_top {
|
|
24
|
-
inset-block-start:
|
|
27
|
+
inset-block-start: 0;
|
|
25
28
|
}
|
|
26
29
|
|
|
27
30
|
.Snackbar_anchorVertical_bottom {
|
|
28
|
-
inset-block-end:
|
|
31
|
+
inset-block-end: 0;
|
|
29
32
|
}
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
.SnackbarItem {
|
|
6
6
|
--snackbar-item-transform-transition: 0;
|
|
7
7
|
--snackbar-item-opacity-transition: 0;
|
|
8
|
-
transition:
|
|
8
|
+
transition:
|
|
9
|
+
transform var(--snackbar-item-transform-transition) ease,
|
|
9
10
|
opacity var(--snackbar-item-opacity-transition) ease;
|
|
10
|
-
padding: var(--space-xs);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.SnackbarItem_anchorVertical_top {
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
.FieldLabel {
|
|
2
2
|
font: var(--field-label-font);
|
|
3
3
|
color: var(--color-content-secondary);
|
|
4
|
-
transition:
|
|
4
|
+
transition:
|
|
5
|
+
transform var(--transition-default),
|
|
5
6
|
font var(--transition-default);
|
|
6
7
|
position: absolute;
|
|
7
8
|
box-sizing: border-box;
|
|
8
9
|
inset-block-start: var(--field-label-top);
|
|
9
|
-
inline-
|
|
10
|
+
inset-inline-start: 0;
|
|
11
|
+
max-inline-size: 100%;
|
|
10
12
|
overflow: hidden;
|
|
11
13
|
text-overflow: ellipsis;
|
|
12
14
|
white-space: nowrap;
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
.Snackbar {
|
|
2
2
|
position: fixed;
|
|
3
|
-
inline-size: 400px;
|
|
3
|
+
max-inline-size: 400px;
|
|
4
|
+
min-inline-size: 300px;
|
|
4
5
|
min-block-size: 0;
|
|
5
6
|
display: flex;
|
|
6
7
|
flex-direction: column;
|
|
7
8
|
z-index: var(--z-index-snackbar);
|
|
9
|
+
margin: var(--space-m);
|
|
10
|
+
gap: var(--space-s);
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
.Snackbar_anchorHorizontal_left {
|
|
11
|
-
inset-inline-start:
|
|
14
|
+
inset-inline-start: 0;
|
|
12
15
|
}
|
|
13
16
|
|
|
14
17
|
.Snackbar_anchorHorizontal_right {
|
|
15
|
-
inset-inline-end:
|
|
18
|
+
inset-inline-end: 0;
|
|
16
19
|
}
|
|
17
20
|
|
|
18
21
|
.Snackbar_anchorHorizontal_center {
|
|
@@ -21,9 +24,9 @@
|
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
.Snackbar_anchorVertical_top {
|
|
24
|
-
inset-block-start:
|
|
27
|
+
inset-block-start: 0;
|
|
25
28
|
}
|
|
26
29
|
|
|
27
30
|
.Snackbar_anchorVertical_bottom {
|
|
28
|
-
inset-block-end:
|
|
31
|
+
inset-block-end: 0;
|
|
29
32
|
}
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
.SnackbarItem {
|
|
6
6
|
--snackbar-item-transform-transition: 0;
|
|
7
7
|
--snackbar-item-opacity-transition: 0;
|
|
8
|
-
transition:
|
|
8
|
+
transition:
|
|
9
|
+
transform var(--snackbar-item-transform-transition) ease,
|
|
9
10
|
opacity var(--snackbar-item-opacity-transition) ease;
|
|
10
|
-
padding: var(--space-xs);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.SnackbarItem_anchorVertical_top {
|