cats-data-grid 2.0.71 → 2.0.72
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/README.md +63 -135
- package/assets/images/check-white.svg +3 -3
- package/assets/images/gripper.svg +8 -8
- package/assets/images/minus-blue.svg +3 -3
- package/assets/images/pin.svg +4 -4
- package/assets/images/sort_down.svg +6 -6
- package/assets/images/sort_up.svg +6 -6
- package/assets/images/t-arrow-down.svg +4 -4
- package/assets/images/t-arrow-up.svg +4 -4
- package/assets/images/t-choose-column.svg +3 -3
- package/assets/images/t-data-pipeline.svg +13 -13
- package/assets/images/t-filter-applied.svg +4 -4
- package/assets/images/t-filter.svg +3 -3
- package/assets/images/t-gripper.svg +8 -8
- package/assets/images/t-group-by-name.svg +3 -3
- package/assets/images/t-more-vertical.svg +5 -5
- package/assets/images/t-move.svg +15 -15
- package/assets/images/t-x.svg +4 -4
- package/fesm2022/cats-data-grid.mjs +13 -13
- package/fesm2022/cats-data-grid.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_index.scss +3 -3
- package/styles/base/_fonts.scss +74 -74
- package/styles/base/_index.scss +1 -1
- package/styles/base/_reset.scss +60 -60
- package/styles/component/_form.scss +374 -374
- package/styles/component/_index.scss +1 -1
- package/styles/sass-utils/_function.scss +14 -14
- package/styles/sass-utils/_index.scss +3 -3
- package/styles/sass-utils/_mixin.scss +100 -100
- package/styles/sass-utils/_variable.scss +77 -77
package/package.json
CHANGED
package/styles/_index.scss
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
@forward "sass-utils";
|
|
2
|
-
@forward "component";
|
|
3
|
-
@forward "base";
|
|
1
|
+
@forward "sass-utils";
|
|
2
|
+
@forward "component";
|
|
3
|
+
@forward "base";
|
package/styles/base/_fonts.scss
CHANGED
|
@@ -1,74 +1,74 @@
|
|
|
1
|
-
// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
|
|
2
|
-
|
|
3
|
-
@use "../sass-utils" as *;
|
|
4
|
-
|
|
5
|
-
:root {
|
|
6
|
-
--fs-6: 6px;
|
|
7
|
-
--fs-12: 12px;
|
|
8
|
-
--fs-14: 14px;
|
|
9
|
-
--fs-16: 16px;
|
|
10
|
-
--fs-18: 18px;
|
|
11
|
-
--fs-20: 20px;
|
|
12
|
-
--fs-24: 24px;
|
|
13
|
-
--fs-28: 28px;
|
|
14
|
-
--fs-30: 30px;
|
|
15
|
-
--fs-32: 32px;
|
|
16
|
-
--fs-42: 42px;
|
|
17
|
-
--fs-48: 48px;
|
|
18
|
-
--img-w: 28px;
|
|
19
|
-
--scale: 1;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@include width-range($tablet, $mediumDesktop) {
|
|
23
|
-
:root {
|
|
24
|
-
--scale: 1.5;
|
|
25
|
-
--fs-6: calc(6px / var(--scale));
|
|
26
|
-
--fs-12: calc(12px / var(--scale));
|
|
27
|
-
--fs-14: calc(14px / var(--scale));
|
|
28
|
-
--fs-16: calc(16px / var(--scale));
|
|
29
|
-
--fs-18: calc(18px / var(--scale));
|
|
30
|
-
--fs-20: calc(20px / var(--scale));
|
|
31
|
-
--fs-24: calc(24px / var(--scale));
|
|
32
|
-
--fs-28: calc(28px / var(--scale));
|
|
33
|
-
--fs-30: calc(30px / var(--scale));
|
|
34
|
-
--fs-32: calc(32px / var(--scale));
|
|
35
|
-
--fs-42: calc(42px / var(--scale));
|
|
36
|
-
--fs-48: calc(48px / var(--scale));
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@include width-range($largeDesktop, $extraLargeDesktop) {
|
|
41
|
-
:root {
|
|
42
|
-
--scale: 1.33;
|
|
43
|
-
--fs-6: calc(6px / var(--scale));
|
|
44
|
-
--fs-12: calc(12px / var(--scale));
|
|
45
|
-
--fs-14: calc(14px / var(--scale));
|
|
46
|
-
--fs-16: calc(16px / var(--scale));
|
|
47
|
-
--fs-18: calc(18px / var(--scale));
|
|
48
|
-
--fs-20: calc(20px / var(--scale));
|
|
49
|
-
--fs-24: calc(24px / var(--scale));
|
|
50
|
-
--fs-28: calc(28px / var(--scale));
|
|
51
|
-
--fs-30: calc(30px / var(--scale));
|
|
52
|
-
--fs-32: calc(32px / var(--scale));
|
|
53
|
-
--fs-42: calc(42px / var(--scale));
|
|
54
|
-
--fs-48: calc(48px / var(--scale));
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@include width-range($xxlargeDesktop, $ultraWideDesktop) {
|
|
59
|
-
:root {
|
|
60
|
-
--scale: 1.25;
|
|
61
|
-
--fs-6: calc(6px / var(--scale));
|
|
62
|
-
--fs-12: calc(12px / var(--scale));
|
|
63
|
-
--fs-14: calc(14px / var(--scale));
|
|
64
|
-
--fs-16: calc(16px / var(--scale));
|
|
65
|
-
--fs-18: calc(18px / var(--scale));
|
|
66
|
-
--fs-20: calc(20px / var(--scale));
|
|
67
|
-
--fs-24: calc(24px / var(--scale));
|
|
68
|
-
--fs-28: calc(28px / var(--scale));
|
|
69
|
-
--fs-30: calc(30px / var(--scale));
|
|
70
|
-
--fs-32: calc(32px / var(--scale));
|
|
71
|
-
--fs-42: calc(42px / var(--scale));
|
|
72
|
-
--fs-48: calc(48px / var(--scale));
|
|
73
|
-
}
|
|
74
|
-
}
|
|
1
|
+
// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
|
|
2
|
+
|
|
3
|
+
@use "../sass-utils" as *;
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--fs-6: 6px;
|
|
7
|
+
--fs-12: 12px;
|
|
8
|
+
--fs-14: 14px;
|
|
9
|
+
--fs-16: 16px;
|
|
10
|
+
--fs-18: 18px;
|
|
11
|
+
--fs-20: 20px;
|
|
12
|
+
--fs-24: 24px;
|
|
13
|
+
--fs-28: 28px;
|
|
14
|
+
--fs-30: 30px;
|
|
15
|
+
--fs-32: 32px;
|
|
16
|
+
--fs-42: 42px;
|
|
17
|
+
--fs-48: 48px;
|
|
18
|
+
--img-w: 28px;
|
|
19
|
+
--scale: 1;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@include width-range($tablet, $mediumDesktop) {
|
|
23
|
+
:root {
|
|
24
|
+
--scale: 1.5;
|
|
25
|
+
--fs-6: calc(6px / var(--scale));
|
|
26
|
+
--fs-12: calc(12px / var(--scale));
|
|
27
|
+
--fs-14: calc(14px / var(--scale));
|
|
28
|
+
--fs-16: calc(16px / var(--scale));
|
|
29
|
+
--fs-18: calc(18px / var(--scale));
|
|
30
|
+
--fs-20: calc(20px / var(--scale));
|
|
31
|
+
--fs-24: calc(24px / var(--scale));
|
|
32
|
+
--fs-28: calc(28px / var(--scale));
|
|
33
|
+
--fs-30: calc(30px / var(--scale));
|
|
34
|
+
--fs-32: calc(32px / var(--scale));
|
|
35
|
+
--fs-42: calc(42px / var(--scale));
|
|
36
|
+
--fs-48: calc(48px / var(--scale));
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@include width-range($largeDesktop, $extraLargeDesktop) {
|
|
41
|
+
:root {
|
|
42
|
+
--scale: 1.33;
|
|
43
|
+
--fs-6: calc(6px / var(--scale));
|
|
44
|
+
--fs-12: calc(12px / var(--scale));
|
|
45
|
+
--fs-14: calc(14px / var(--scale));
|
|
46
|
+
--fs-16: calc(16px / var(--scale));
|
|
47
|
+
--fs-18: calc(18px / var(--scale));
|
|
48
|
+
--fs-20: calc(20px / var(--scale));
|
|
49
|
+
--fs-24: calc(24px / var(--scale));
|
|
50
|
+
--fs-28: calc(28px / var(--scale));
|
|
51
|
+
--fs-30: calc(30px / var(--scale));
|
|
52
|
+
--fs-32: calc(32px / var(--scale));
|
|
53
|
+
--fs-42: calc(42px / var(--scale));
|
|
54
|
+
--fs-48: calc(48px / var(--scale));
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@include width-range($xxlargeDesktop, $ultraWideDesktop) {
|
|
59
|
+
:root {
|
|
60
|
+
--scale: 1.25;
|
|
61
|
+
--fs-6: calc(6px / var(--scale));
|
|
62
|
+
--fs-12: calc(12px / var(--scale));
|
|
63
|
+
--fs-14: calc(14px / var(--scale));
|
|
64
|
+
--fs-16: calc(16px / var(--scale));
|
|
65
|
+
--fs-18: calc(18px / var(--scale));
|
|
66
|
+
--fs-20: calc(20px / var(--scale));
|
|
67
|
+
--fs-24: calc(24px / var(--scale));
|
|
68
|
+
--fs-28: calc(28px / var(--scale));
|
|
69
|
+
--fs-30: calc(30px / var(--scale));
|
|
70
|
+
--fs-32: calc(32px / var(--scale));
|
|
71
|
+
--fs-42: calc(42px / var(--scale));
|
|
72
|
+
--fs-48: calc(48px / var(--scale));
|
|
73
|
+
}
|
|
74
|
+
}
|
package/styles/base/_index.scss
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@forward "./reset";
|
|
1
|
+
@forward "./reset";
|
|
2
2
|
@forward "./fonts";
|
package/styles/base/_reset.scss
CHANGED
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
// Box Sizing
|
|
2
|
-
*,
|
|
3
|
-
*::before,
|
|
4
|
-
*::after {
|
|
5
|
-
box-sizing: border-box;
|
|
6
|
-
margin: 0;
|
|
7
|
-
padding: 0;
|
|
8
|
-
// font-family: "Open Sans", sans-serif;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
body {
|
|
12
|
-
font-size: 100%;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
// Font-inflation
|
|
16
|
-
html {
|
|
17
|
-
-moz-text-size-adjust: none;
|
|
18
|
-
-webkit-text-size-adjust: none;
|
|
19
|
-
-ms-text-size-adjust: none;
|
|
20
|
-
text-size-adjust: none;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// Remove default margin and padding
|
|
24
|
-
h1,
|
|
25
|
-
h2,
|
|
26
|
-
h3,
|
|
27
|
-
h4,
|
|
28
|
-
h5,
|
|
29
|
-
h6,
|
|
30
|
-
ul,
|
|
31
|
-
ol,
|
|
32
|
-
p {
|
|
33
|
-
margin: 0;
|
|
34
|
-
padding: 0;
|
|
35
|
-
text-wrap: pretty;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// Remove list styles on ul, ol elements
|
|
39
|
-
ul[role="list"],
|
|
40
|
-
ol[role="list"] {
|
|
41
|
-
list-style: none;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
ul {
|
|
45
|
-
list-style: none;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// images
|
|
49
|
-
img,
|
|
50
|
-
picture {
|
|
51
|
-
max-width: 100%;
|
|
52
|
-
display: block;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
input,
|
|
56
|
-
select,
|
|
57
|
-
textarea {
|
|
58
|
-
outline: none;
|
|
59
|
-
box-shadow: none;
|
|
60
|
-
}
|
|
1
|
+
// Box Sizing
|
|
2
|
+
*,
|
|
3
|
+
*::before,
|
|
4
|
+
*::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
// font-family: "Open Sans", sans-serif;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
font-size: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Font-inflation
|
|
16
|
+
html {
|
|
17
|
+
-moz-text-size-adjust: none;
|
|
18
|
+
-webkit-text-size-adjust: none;
|
|
19
|
+
-ms-text-size-adjust: none;
|
|
20
|
+
text-size-adjust: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Remove default margin and padding
|
|
24
|
+
h1,
|
|
25
|
+
h2,
|
|
26
|
+
h3,
|
|
27
|
+
h4,
|
|
28
|
+
h5,
|
|
29
|
+
h6,
|
|
30
|
+
ul,
|
|
31
|
+
ol,
|
|
32
|
+
p {
|
|
33
|
+
margin: 0;
|
|
34
|
+
padding: 0;
|
|
35
|
+
text-wrap: pretty;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Remove list styles on ul, ol elements
|
|
39
|
+
ul[role="list"],
|
|
40
|
+
ol[role="list"] {
|
|
41
|
+
list-style: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
ul {
|
|
45
|
+
list-style: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// images
|
|
49
|
+
img,
|
|
50
|
+
picture {
|
|
51
|
+
max-width: 100%;
|
|
52
|
+
display: block;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
input,
|
|
56
|
+
select,
|
|
57
|
+
textarea {
|
|
58
|
+
outline: none;
|
|
59
|
+
box-shadow: none;
|
|
60
|
+
}
|