@itcase/ui 1.0.93 → 1.0.95
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/dist/components/Avatar.js +2 -1
- package/dist/components/Badge.js +2 -1
- package/dist/components/Button.js +8 -8
- package/dist/components/Cell.js +2 -1
- package/dist/components/Checkbox.js +32 -8
- package/dist/components/Flex.js +20 -3
- package/dist/components/Grid.js +5 -1
- package/dist/components/Group.js +33 -275
- package/dist/components/Image.js +10 -4
- package/dist/components/Label.js +2 -1
- package/dist/components/Logo.js +4 -3
- package/dist/components/Text.js +4 -3
- package/dist/components/Title.js +2 -1
- package/dist/css/components/Accordion/Accordion.css +2 -1
- package/dist/css/components/Avatar/Avatar.css +40 -13
- package/dist/css/components/Badge/Badge.css +35 -10
- package/dist/css/components/Cell/Cell.css +41 -0
- package/dist/css/components/Checkbox/Checkbox.css +20 -20
- package/dist/css/components/Group/Group.css +1 -0
- package/dist/css/components/Image/Image.css +28 -1
- package/dist/css/components/Label/Label.css +32 -10
- package/dist/css/components/Logo/Logo.css +33 -8
- package/dist/css/components/Swiper/Swiper.css +5 -0
- package/dist/css/components/Text/Text.css +24 -0
- package/dist/css/components/Title/Title.css +24 -0
- package/package.json +1 -1
|
@@ -38,6 +38,15 @@
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
+
.cell {
|
|
42
|
+
&__wrapper {
|
|
43
|
+
&_shape {
|
|
44
|
+
&_rounded {
|
|
45
|
+
border-radius: var(--cell-border-radius, 6px);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
41
50
|
.cell {
|
|
42
51
|
&&_state {
|
|
43
52
|
&_active {
|
|
@@ -79,9 +88,41 @@
|
|
|
79
88
|
}
|
|
80
89
|
}
|
|
81
90
|
}
|
|
91
|
+
.cell {
|
|
92
|
+
&&_mode {
|
|
93
|
+
&_skeleton {
|
|
94
|
+
^^&__data {
|
|
95
|
+
^^^&__title,
|
|
96
|
+
^^^&__value {
|
|
97
|
+
color: transparent;
|
|
98
|
+
background-image: linear-gradient(
|
|
99
|
+
90deg,
|
|
100
|
+
var(--color-surface-secondary),
|
|
101
|
+
var(--color-surface-tertiary),
|
|
102
|
+
var(--color-surface-secondary)
|
|
103
|
+
);
|
|
104
|
+
background-size: 200%;
|
|
105
|
+
border-radius: 6px;
|
|
106
|
+
animation: cell-skeleton 3s infinite linear;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
@keyframes cell-skeleton {
|
|
113
|
+
0% {
|
|
114
|
+
background-position: 200%;
|
|
115
|
+
}
|
|
116
|
+
100% {
|
|
117
|
+
background-position: -200%;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
82
120
|
:root {
|
|
83
121
|
--cell-size-s-padding: 6px;
|
|
122
|
+
|
|
84
123
|
--cell-size-m-padding: 6px;
|
|
124
|
+
|
|
85
125
|
--cell-size-l-padding: 6px;
|
|
126
|
+
|
|
86
127
|
--cell-size-xl-padding: 12px;
|
|
87
128
|
}
|
|
@@ -4,32 +4,32 @@
|
|
|
4
4
|
grid-template-rows: auto auto;
|
|
5
5
|
column-gap: 4px;
|
|
6
6
|
&__item {
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
min-width: 16px;
|
|
8
|
+
min-height: 16px;
|
|
9
9
|
font-size: 0;
|
|
10
10
|
line-height: 0;
|
|
11
|
+
position: relative;
|
|
11
12
|
display: flex;
|
|
12
|
-
min-height: 16px;
|
|
13
|
-
min-width: 16px;
|
|
14
|
-
grid-row-start: span 2;
|
|
15
13
|
align-self: start;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
grid-row-start: span 3;
|
|
16
16
|
^&__input {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
border: 0;
|
|
20
|
-
margin: 0;
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 100%;
|
|
21
19
|
font-size: 0;
|
|
22
20
|
line-height: 0;
|
|
21
|
+
margin: 0;
|
|
22
|
+
border: 0;
|
|
23
23
|
position: absolute;
|
|
24
24
|
left: 0;
|
|
25
25
|
top: 0;
|
|
26
|
-
width: 100%;
|
|
27
|
-
height: 100%;
|
|
28
26
|
z-index: 3;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
appearance: none;
|
|
29
29
|
}
|
|
30
30
|
^&__state {
|
|
31
|
-
flex: 1;
|
|
32
31
|
display: flex;
|
|
32
|
+
flex: 1;
|
|
33
33
|
z-index: 1;
|
|
34
34
|
&_shape {
|
|
35
35
|
&_rounded {
|
|
@@ -41,19 +41,19 @@
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
^&__state-checkmark {
|
|
44
|
-
height: 8px;
|
|
45
44
|
width: 5px;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
border-right-style: solid;
|
|
49
|
-
border-right-width: 2px;
|
|
45
|
+
height: 8px;
|
|
46
|
+
margin: -1px 0 0 0;
|
|
50
47
|
position: absolute;
|
|
51
|
-
|
|
48
|
+
display: none;
|
|
52
49
|
left: 50%;
|
|
53
50
|
top: 50%;
|
|
54
|
-
|
|
51
|
+
z-index: 2;
|
|
55
52
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
56
|
-
|
|
53
|
+
border-bottom-style: solid;
|
|
54
|
+
border-bottom-width: 2px;
|
|
55
|
+
border-right-style: solid;
|
|
56
|
+
border-right-width: 2px;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -17,6 +17,31 @@
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
+
.image {
|
|
21
|
+
&&_mode {
|
|
22
|
+
&_skeleton {
|
|
23
|
+
background-image: linear-gradient(
|
|
24
|
+
90deg,
|
|
25
|
+
var(--color-surface-secondary),
|
|
26
|
+
var(--color-surface-tertiary),
|
|
27
|
+
var(--color-surface-secondary)
|
|
28
|
+
);
|
|
29
|
+
background-size: 200%;
|
|
30
|
+
animation: image-skeleton 3s infinite linear;
|
|
31
|
+
^^&__item {
|
|
32
|
+
opacity: 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
@keyframes image-skeleton {
|
|
38
|
+
0% {
|
|
39
|
+
background-position: 200%;
|
|
40
|
+
}
|
|
41
|
+
100% {
|
|
42
|
+
background-position: -200%;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
20
45
|
.image {
|
|
21
46
|
&_resize-mode {
|
|
22
47
|
&_cover {
|
|
@@ -42,12 +67,13 @@
|
|
|
42
67
|
.image {
|
|
43
68
|
&_shape {
|
|
44
69
|
&_rounded {
|
|
70
|
+
border-radius: var(--image-shape-rounded, 12px);
|
|
45
71
|
> ^^&__wrapper {
|
|
46
72
|
width: 100%;
|
|
47
73
|
height: 100%;
|
|
74
|
+
border-radius: var(--image-shape-rounded, 12px);
|
|
48
75
|
position: relative;
|
|
49
76
|
overflow: hidden;
|
|
50
|
-
border-radius: var(--image-shape-rounded, 12px);
|
|
51
77
|
& > ^^^&__item {
|
|
52
78
|
width: 100%;
|
|
53
79
|
height: 100%;
|
|
@@ -56,6 +82,7 @@
|
|
|
56
82
|
}
|
|
57
83
|
}
|
|
58
84
|
&_circular {
|
|
85
|
+
border-radius: 50%;
|
|
59
86
|
> ^^&__wrapper {
|
|
60
87
|
width: 100%;
|
|
61
88
|
height: 100%;
|
|
@@ -8,19 +8,32 @@
|
|
|
8
8
|
line-height: 0;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
|
-
|
|
12
11
|
.label {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
&&_mode {
|
|
13
|
+
&_skeleton {
|
|
14
|
+
background-image: linear-gradient(
|
|
15
|
+
90deg,
|
|
16
|
+
var(--color-surface-secondary),
|
|
17
|
+
var(--color-surface-tertiary),
|
|
18
|
+
var(--color-surface-secondary)
|
|
19
|
+
);
|
|
20
|
+
background-size: 200%;
|
|
21
|
+
animation: label-skeleton 3s infinite linear;
|
|
22
|
+
^^&__label {
|
|
23
|
+
color: transparent;
|
|
19
24
|
}
|
|
20
25
|
}
|
|
21
26
|
}
|
|
22
27
|
}
|
|
23
|
-
|
|
28
|
+
@keyframes label-skeleton {
|
|
29
|
+
0% {
|
|
30
|
+
background-position: 200%;
|
|
31
|
+
}
|
|
32
|
+
100% {
|
|
33
|
+
background-position: -200%;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
/* mode && `avatar_mode_${mode}`, */
|
|
24
37
|
.label {
|
|
25
38
|
&_shape {
|
|
26
39
|
&_rounded {
|
|
@@ -36,7 +49,17 @@
|
|
|
36
49
|
}
|
|
37
50
|
}
|
|
38
51
|
}
|
|
39
|
-
|
|
52
|
+
.label {
|
|
53
|
+
&_size {
|
|
54
|
+
@each $size in xxs, xs, s, m, l, xl, xxl {
|
|
55
|
+
&_$(size) {
|
|
56
|
+
^^&__inner {
|
|
57
|
+
padding: var(--label-size-$(size)-padding);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
40
63
|
.label {
|
|
41
64
|
&&_text-align {
|
|
42
65
|
&_left {
|
|
@@ -56,7 +79,6 @@
|
|
|
56
79
|
}
|
|
57
80
|
}
|
|
58
81
|
}
|
|
59
|
-
|
|
60
82
|
.label {
|
|
61
83
|
&&_width {
|
|
62
84
|
&_fixed {
|
|
@@ -8,6 +8,39 @@
|
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
|
+
.logo {
|
|
12
|
+
@each $val in stretch, flex-start, flex-end, center, baseline, auto {
|
|
13
|
+
&_align-items_$(val) {
|
|
14
|
+
align-items: $(val);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
.logo {
|
|
19
|
+
&&_mode {
|
|
20
|
+
&_skeleton {
|
|
21
|
+
background-image: linear-gradient(
|
|
22
|
+
90deg,
|
|
23
|
+
var(--color-surface-secondary),
|
|
24
|
+
var(--color-surface-tertiary),
|
|
25
|
+
var(--color-surface-secondary)
|
|
26
|
+
);
|
|
27
|
+
background-size: 200%;
|
|
28
|
+
border-radius: 6px;
|
|
29
|
+
animation: logo-skeleton 3s infinite linear;
|
|
30
|
+
^^&__image {
|
|
31
|
+
opacity: 0;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
@keyframes logo-skeleton {
|
|
37
|
+
0% {
|
|
38
|
+
background-position: 200%;
|
|
39
|
+
}
|
|
40
|
+
100% {
|
|
41
|
+
background-position: -200%;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
11
44
|
.logo {
|
|
12
45
|
&_size {
|
|
13
46
|
@each $size in s, m, l {
|
|
@@ -20,13 +53,6 @@
|
|
|
20
53
|
}
|
|
21
54
|
}
|
|
22
55
|
}
|
|
23
|
-
.logo {
|
|
24
|
-
@each $val in stretch, flex-start, flex-end, center, baseline, auto {
|
|
25
|
-
&_align-items_$(val) {
|
|
26
|
-
align-items: $(val);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
56
|
:root {
|
|
31
57
|
--logo-size-l-width: 240px;
|
|
32
58
|
--logo-size-l-height: 90px;
|
|
@@ -37,4 +63,3 @@
|
|
|
37
63
|
--logo-size-s-width: 140px;
|
|
38
64
|
--logo-size-s-height: 52px;
|
|
39
65
|
}
|
|
40
|
-
|
|
@@ -1,4 +1,28 @@
|
|
|
1
1
|
.text {}
|
|
2
|
+
.text {
|
|
3
|
+
&&&&_mode {
|
|
4
|
+
&_skeleton {
|
|
5
|
+
color: transparent;
|
|
6
|
+
background-image: linear-gradient(
|
|
7
|
+
90deg,
|
|
8
|
+
var(--color-surface-secondary),
|
|
9
|
+
var(--color-surface-tertiary),
|
|
10
|
+
var(--color-surface-secondary)
|
|
11
|
+
);
|
|
12
|
+
background-size: 200%;
|
|
13
|
+
border-radius: 6px;
|
|
14
|
+
animation: text-skeleton 3s infinite linear;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
@keyframes text-skeleton {
|
|
19
|
+
0% {
|
|
20
|
+
background-position: 200%;
|
|
21
|
+
}
|
|
22
|
+
100% {
|
|
23
|
+
background-position: -200%;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
2
26
|
.text_size {
|
|
3
27
|
@each $sizeText in xxs, xs, s, m, l, xl, xxl {
|
|
4
28
|
&_$(sizeText) {
|
|
@@ -41,6 +41,30 @@
|
|
|
41
41
|
margin: 0;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
+
.title.title {
|
|
45
|
+
&_mode {
|
|
46
|
+
&_skeleton {
|
|
47
|
+
color: transparent;
|
|
48
|
+
background-image: linear-gradient(
|
|
49
|
+
90deg,
|
|
50
|
+
var(--color-surface-secondary),
|
|
51
|
+
var(--color-surface-tertiary),
|
|
52
|
+
var(--color-surface-secondary)
|
|
53
|
+
);
|
|
54
|
+
background-size: 200%;
|
|
55
|
+
border-radius: 6px;
|
|
56
|
+
animation: title-skeleton 3s infinite linear;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
@keyframes title-skeleton {
|
|
61
|
+
0% {
|
|
62
|
+
background-position: 200%;
|
|
63
|
+
}
|
|
64
|
+
100% {
|
|
65
|
+
background-position: -200%;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
44
68
|
.title {
|
|
45
69
|
&&_type {
|
|
46
70
|
&_accent {
|