@muraldevkit/ui-toolkit 2.86.4 → 2.86.6

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.
@@ -1,5 +1,10 @@
1
- @use './MrlSpinner.variables.scss';
2
- $spinner-size: var(--mrl-spinner-size);
1
+
2
+ $mrl-spinner-size: var(--mrl-spacing-06);
3
+ $mrl-spinner-size-medium: var(--mrl-spacing-07);
4
+ $mrl-spinner-size-large: var(--mrl-spacing-09);
5
+ $mrl-spinner-logo-width: 99px;
6
+ $mrl-spinner-logo-height-large: 93px;
7
+ $spinner-size: $mrl-spinner-size;
3
8
  $spinner-sm-scale: 1;
4
9
  $spinner-md-scale: 1.2;
5
10
  $spinner-lg-scale: 2;
@@ -17,19 +22,19 @@ $spinner-lg-scale: 2;
17
22
  }
18
23
  }
19
24
  .MrlSpinner-container {
20
- height: var(--mrl-spinner-size);
25
+ height: $mrl-spinner-size;
21
26
  overflow: hidden;
22
27
  position: relative;
23
- width: var(--mrl-spinner-size);
28
+ width: $mrl-spinner-size;
24
29
  &--medium {
25
- height: var(--mrl-spinner-size-medium);
26
- width: var(--mrl-spinner-size-medium);
30
+ height: $mrl-spinner-size-medium;
31
+ width: $mrl-spinner-size-medium;
27
32
  }
28
33
  &--large {
29
- height: var(--mrl-spinner-size-large);
30
- width: var(--mrl-spinner-size-large);
34
+ height: $mrl-spinner-size-large;
35
+ width: $mrl-spinner-size-large;
31
36
  &.MrlSpinner-container--logo {
32
- height: var(--mrl-spinner-logo-height-large);
37
+ height: $mrl-spinner-logo-height-large;
33
38
  }
34
39
  }
35
40
  }
@@ -37,9 +42,9 @@ $spinner-lg-scale: 2;
37
42
  align-items: center;
38
43
  animation: 500ms spin var(--mrl-timing-m3) infinite;
39
44
  display: flex;
40
- height: var(--mrl-spinner-size);
45
+ height: $mrl-spinner-size;
41
46
  justify-content: center;
42
- width: var(--mrl-spinner-size);
47
+ width: $mrl-spinner-size;
43
48
  &::before {
44
49
  background: conic-gradient(
45
50
  from 11.31deg at 50% 50%,
@@ -60,13 +65,13 @@ $spinner-lg-scale: 2;
60
65
  width: $spinner-size;
61
66
  }
62
67
  &--medium {
63
- height: var(--mrl-spinner-size-medium);
64
- width: var(--mrl-spinner-size-medium);
68
+ height: $mrl-spinner-size-medium;
69
+ width: $mrl-spinner-size-medium;
65
70
  @include spinner-size-variant($spinner-md-scale);
66
71
  }
67
72
  &--large {
68
- height: var(--mrl-spinner-size-large);
69
- width: var(--mrl-spinner-size-large);
73
+ height: $mrl-spinner-size-large;
74
+ width: $mrl-spinner-size-large;
70
75
  @include spinner-size-variant($spinner-lg-scale);
71
76
  }
72
77
  &--inverse::before {
@@ -86,7 +91,7 @@ $spinner-lg-scale: 2;
86
91
  &.MrlSpinner-container {
87
92
  display: block;
88
93
  min-height: calc(var(--mrl-spacing-12) + var(--mrl-spacing-02));
89
- width: var(--mrl-spinner-logo-width);
94
+ width: $mrl-spinner-logo-width;
90
95
  }
91
96
  .MrlSpinner {
92
97
  margin: 0 auto;
@@ -95,7 +100,7 @@ $spinner-lg-scale: 2;
95
100
  .MrlSpinnerLogo {
96
101
  display: block;
97
102
  margin-top: var(--mrl-spacing-07);
98
- width: var(--mrl-spinner-logo-width);
103
+ width: $mrl-spinner-logo-width;
99
104
  }
100
105
  @media (prefers-reduced-motion) {
101
106
  .MrlSpinner {
@@ -40,11 +40,14 @@
40
40
  &.left {
41
41
  left: var(--mrl-table-selection-width);
42
42
  &::after {
43
- background-image: linear-gradient(
43
+ border-image-outset: 0 var(--mrl-spacing-02) 0 0;
44
+ border-image-slice: 0 100% 0 0;
45
+ border-image-source: linear-gradient(
44
46
  90deg,
45
47
  rgba(var(--mrl-black), 10%) 0%,
46
48
  rgba(var(--mrl-black), 0%) 100%
47
49
  );
50
+ border-image-width: 0 var(--mrl-spacing-02) 0 0;
48
51
  right: 0;
49
52
  }
50
53
  &:global(.selection) {
@@ -57,11 +60,14 @@
57
60
  &.right {
58
61
  right: 0;
59
62
  &::before {
60
- background-image: linear-gradient(
63
+ border-image-outset: 0 0 0 var(--mrl-spacing-02);
64
+ border-image-slice: 0 0 0 100%;
65
+ border-image-source: linear-gradient(
61
66
  90deg,
62
67
  rgba(var(--mrl-black), 0%) 0%,
63
68
  rgba(var(--mrl-black), 10%) 100%
64
69
  );
70
+ border-image-width: 0 0 0 var(--mrl-spacing-02);
65
71
  left: 0;
66
72
  }
67
73
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.86.4",
3
+ "version": "2.86.6",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -1,8 +0,0 @@
1
-
2
- .MrlSpinner {
3
- --mrl-spinner-size: var(--mrl-spacing-06);
4
- --mrl-spinner-size-medium: var(--mrl-spacing-07);
5
- --mrl-spinner-size-large: var(--mrl-spacing-09);
6
- --mrl-spinner-logo-width: 99px;
7
- --mrl-spinner-logo-height-large: 93px;
8
- }