@muraldevkit/ui-toolkit 2.19.4 → 2.20.0
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/index.d.ts +1 -0
- package/dist/components/skeleton/MrlSkeleton/MrlSkeleton.d.ts +20 -0
- package/dist/components/skeleton/MrlSkeleton/index.d.ts +1 -0
- package/dist/components/skeleton/MrlSkeletonText/MrlSkeletonText.d.ts +22 -0
- package/dist/components/skeleton/MrlSkeletonText/index.d.ts +1 -0
- package/dist/components/skeleton/index.d.ts +2 -0
- package/dist/components/svg/config.d.ts +1 -1
- package/dist/components/table/MrlSmartTable/MrlSmartTable.d.ts +11 -0
- package/dist/components/table/MrlTableCell/MrlTableCell.d.ts +6 -1
- package/dist/components/table/MrlTableColumn/MrlTableColumn.d.ts +6 -1
- package/dist/components/table/fixtures.d.ts +29 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlSkeleton/module.scss +9 -0
- package/dist/styles/MrlSkeletonText/module.scss +24 -0
- package/dist/styles/MrlTableCell/module.scss +1 -0
- package/dist/styles/MrlTableColumn/module.scss +1 -0
- package/dist/styles/MrlTableRow/module.scss +3 -1
- package/dist/styles/skeleton/mixins.scss +44 -0
- package/dist/styles/skeleton/variables.scss +2 -0
- package/dist/styles/table/global.scss +45 -0
- package/dist/styles/table/variables.scss +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
|
|
2
|
+
@use '../skeleton.mixins.scss' as *;
|
|
3
|
+
$line: var(--mrl-spacing-03);
|
|
4
|
+
.MrlSkeletonText {
|
|
5
|
+
@include mrl-skeleton-base;
|
|
6
|
+
@include mrl-skeleton-shimmer-effect;
|
|
7
|
+
}
|
|
8
|
+
$mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
|
|
9
|
+
@each $size in $mrl-title-sizes {
|
|
10
|
+
.MrlSkeletonText-#{$size} {
|
|
11
|
+
$line-height: calc(
|
|
12
|
+
var(--mrl-type-size-text-#{$size}) * var(--mrl-type-line-height-text-#{$size})
|
|
13
|
+
);
|
|
14
|
+
height: $line;
|
|
15
|
+
margin-bottom: calc($line-height - $line);
|
|
16
|
+
margin-top: calc(calc($line-height - $line) / 2);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
.MrlSkeletonText-medium {
|
|
20
|
+
$line-height: calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text));
|
|
21
|
+
height: $line;
|
|
22
|
+
margin-bottom: calc($line-height - $line);
|
|
23
|
+
margin-top: calc(calc($line-height - $line) / 2);
|
|
24
|
+
}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
|
|
2
2
|
@use '../table.variables.scss';
|
|
3
3
|
.MrlTableRow {
|
|
4
|
+
background-color: var(--mrl-table-row-background);
|
|
4
5
|
border-bottom: var(--mrl-table-row-border-bottom);
|
|
5
6
|
font-size: var(--mrl-type-size-text-small);
|
|
6
7
|
font-weight: var(--mrl-type-weight-text);
|
|
7
8
|
height: var(--mrl-table-row-height);
|
|
8
9
|
outline: none;
|
|
9
|
-
&:hover
|
|
10
|
+
&:hover,
|
|
11
|
+
&:hover > td {
|
|
10
12
|
background-color: var(--mrl-table-row-background-hover);
|
|
11
13
|
}
|
|
12
14
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
|
|
2
|
+
@use './skeleton.variables.scss' as *;
|
|
3
|
+
@mixin mrl-skeleton-base {
|
|
4
|
+
background-color: $skeleton-color;
|
|
5
|
+
border-radius: var(--mrl-border-radius-functional);
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
position: relative;
|
|
8
|
+
}
|
|
9
|
+
@mixin mrl-skeleton-shimmer-effect {
|
|
10
|
+
&::after {
|
|
11
|
+
animation-direction: normal;
|
|
12
|
+
animation-duration: 2.5s;
|
|
13
|
+
animation-iteration-count: infinite;
|
|
14
|
+
animation-name: shimmer;
|
|
15
|
+
animation-timing-function: ease-in-out;
|
|
16
|
+
background: linear-gradient(
|
|
17
|
+
-45deg,
|
|
18
|
+
rgba(255, 255, 255, 0%) 48%,
|
|
19
|
+
var(--mrl-white-opacity-06) 56%,
|
|
20
|
+
rgba(255, 255, 255, 0%) 64%
|
|
21
|
+
);
|
|
22
|
+
background-repeat: no-repeat;
|
|
23
|
+
background-size: 400% 200%;
|
|
24
|
+
content: '';
|
|
25
|
+
height: 100%;
|
|
26
|
+
left: 0;
|
|
27
|
+
opacity: 0.6;
|
|
28
|
+
position: absolute;
|
|
29
|
+
top: 0;
|
|
30
|
+
width: 200%;
|
|
31
|
+
@media (prefers-reduced-motion) {
|
|
32
|
+
animation-name: none;
|
|
33
|
+
background: $skeleton-color;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
@keyframes shimmer {
|
|
38
|
+
0% {
|
|
39
|
+
background-position: right;
|
|
40
|
+
}
|
|
41
|
+
100% {
|
|
42
|
+
background-position: left;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -11,3 +11,48 @@
|
|
|
11
11
|
width: var(--mrl-table-selection-width);
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
+
@mixin mrl-table-sticky-column {
|
|
15
|
+
&.sticky {
|
|
16
|
+
background-color: var(--mrl-table-row-background);
|
|
17
|
+
position: sticky;
|
|
18
|
+
&::before,
|
|
19
|
+
&::after {
|
|
20
|
+
content: '';
|
|
21
|
+
height: 100%;
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 0;
|
|
24
|
+
width: var(--mrl-spacing-02);
|
|
25
|
+
}
|
|
26
|
+
&.left {
|
|
27
|
+
left: var(--mrl-table-selection-width);
|
|
28
|
+
&::after {
|
|
29
|
+
background-image: linear-gradient(
|
|
30
|
+
90deg,
|
|
31
|
+
rgba(var(--mrl-black), 10%) 0%,
|
|
32
|
+
rgba(var(--mrl-black), 0%) 100%
|
|
33
|
+
);
|
|
34
|
+
right: 0;
|
|
35
|
+
}
|
|
36
|
+
&:global(.selection) {
|
|
37
|
+
left: 0;
|
|
38
|
+
&::after {
|
|
39
|
+
background-image: none;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
&.right {
|
|
44
|
+
right: 0;
|
|
45
|
+
&::before {
|
|
46
|
+
background-image: linear-gradient(
|
|
47
|
+
90deg,
|
|
48
|
+
rgba(var(--mrl-black), 0%) 0%,
|
|
49
|
+
rgba(var(--mrl-black), 10%) 100%
|
|
50
|
+
);
|
|
51
|
+
left: 0;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
&.clickable:hover {
|
|
55
|
+
background-color: var(--mrl-table-column-background-hover);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
--mrl-table-column-height: 48px;
|
|
8
8
|
--mrl-table-row-height: 48px;
|
|
9
9
|
--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);
|
|
10
|
+
--mrl-table-row-background: var(--mrl-color-background);
|
|
10
11
|
--mrl-table-row-background-hover: var(--mrl-color-background-highlight-hover);
|
|
11
12
|
--mrl-table-cell-height: 48px;
|
|
12
13
|
--mrl-table-cell-padding-block: 6px;
|