@muraldevkit/ui-toolkit 4.55.1-dev-nYXo.1 → 4.57.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.
Files changed (12) hide show
  1. package/dist/components/avatar/MrlAvatar/MrlAvatar.d.ts +3 -3
  2. package/dist/components/button/constants.d.ts +1 -1
  3. package/dist/components/divider/MrlDivider/MrlDivider.d.ts +7 -2
  4. package/dist/components/divider/constants.d.ts +3 -0
  5. package/dist/components/loader/constants.d.ts +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/styles/MrlButton/global.scss +44 -11
  8. package/dist/styles/MrlSpinner/module.scss +13 -0
  9. package/dist/styles/button/variables.scss +4 -1
  10. package/dist/styles/divider/variables.scss +5 -2
  11. package/dist/styles.css +11 -11
  12. package/package.json +2 -2
package/dist/styles/MrlButton/global.scss CHANGED
@@ -32,19 +32,50 @@
32
32
  max-width: var(--mrl-button-icon-size);
33
33
  min-width: var(--mrl-button-icon-size);
34
34
  }
35
- .mrlButton-spinner-container {
36
- margin: 0 auto;
37
- position: absolute;
35
+ .mrlButton--loading {
36
+ .MrlSpinner-container {
37
+ margin: 0 auto;
38
+ position: absolute;
39
+ }
40
+ .mrlButton-text {
41
+ opacity: 0;
42
+ }
43
+ }
44
+ &.mrlButton--icon-after {
45
+ .MrlSvgContainer,
46
+ .MrlSpinner-container {
47
+ margin-left: var(--mrl-button-icon-margin-right);
48
+ margin-right: 0;
49
+ }
50
+ }
51
+ &.mrlButton--xsmall {
52
+ @include mrl-text-interactive('xsmall');
53
+ @include mrl-button-size('xsmall', true);
54
+ padding: var(--mrl-space-stack-related-small) var(--mrl-space-inset);
55
+ &.mrlButton--ghost,
56
+ &.mrlButton--ghost-inverse {
57
+ padding: var(--mrl-space-stack-related-small);
58
+ }
59
+ .MrlSvgContainer,
60
+ .MrlSpinner-container {
61
+ height: var(--mrl-button-icon-size);
62
+ margin-left: var(--mrl-spacing-01);
63
+ }
38
64
  }
39
- }
40
- .mrlButton--loading .mrlButton-text {
41
- opacity: 0;
42
65
  }
43
66
  .mrlButton--icon-before {
44
67
  padding-left: var(--mrl-spacing-04);
45
68
  &.mrlButton--small {
46
69
  padding-left: var(--mrl-spacing-03);
47
70
  }
71
+ &.mrlButton--xsmall {
72
+ padding-left: var(--mrl-spacing-02);
73
+ .MrlSvgContainer,
74
+ .MrlSpinner-container {
75
+ margin-left: 0;
76
+ margin-right: var(--mrl-spacing-01);
77
+ }
78
+ }
48
79
  &.mrlButton--ghost,
49
80
  &.mrlButton--ghost-inverse {
50
81
  padding-left: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
@@ -57,14 +88,16 @@
57
88
  &.mrlButton--small {
58
89
  padding-right: var(--mrl-spacing-03);
59
90
  }
91
+ &.mrlButton--xsmall {
92
+ padding-right: var(--mrl-spacing-02);
93
+ .MrlSvgContainer {
94
+ margin-left: var(--mrl-spacing-01);
95
+ margin-right: 0;
96
+ }
97
+ }
60
98
  &.mrlButton--ghost,
61
99
  &.mrlButton--ghost-inverse {
62
100
  padding-left: var(--mrl-spacing-03);
63
101
  padding-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
64
102
  }
65
- .MrlSvgContainer,
66
- .MrlSpinner-container {
67
- margin-left: var(--mrl-button-icon-margin-right);
68
- margin-right: 0;
69
- }
70
103
  }
package/dist/styles/MrlSpinner/module.scss CHANGED
@@ -5,6 +5,7 @@ $mrl-spinner-size-large: var(--mrl-spacing-09);
5
5
  $mrl-spinner-logo-width: 99px;
6
6
  $mrl-spinner-logo-height-large: 93px;
7
7
  $spinner-size: $mrl-spinner-size;
8
+ $spinner-xsm-scale: 0.6;
8
9
  $spinner-sm-scale: 1;
9
10
  $spinner-md-scale: 1.2;
10
11
  $spinner-lg-scale: 2;
@@ -26,6 +27,13 @@ $spinner-lg-scale: 2;
26
27
  overflow: hidden;
27
28
  position: relative;
28
29
  width: $mrl-spinner-size;
30
+ &--xsmall {
31
+ align-items: center;
32
+ display: flex;
33
+ height: var(--mrl-spacing-05);
34
+ justify-content: center;
35
+ width: var(--mrl-spacing-05);
36
+ }
29
37
  &--medium {
30
38
  height: $mrl-spinner-size-medium;
31
39
  width: $mrl-spinner-size-medium;
@@ -64,6 +72,11 @@ $spinner-lg-scale: 2;
64
72
  height: $spinner-size;
65
73
  width: $spinner-size;
66
74
  }
75
+ &--xsmall {
76
+ height: var(--mrl-spacing-06);
77
+ width: var(--mrl-spacing-06);
78
+ @include spinner-size-variant($spinner-xsm-scale);
79
+ }
67
80
  &--medium {
68
81
  height: $mrl-spinner-size-medium;
69
82
  width: $mrl-spinner-size-medium;
package/dist/styles/button/variables.scss CHANGED
@@ -24,9 +24,12 @@
24
24
  --mrl-button-icon-size: var(--mrl-spacing-06);
25
25
  --mrl-button-inset-horizontal: var(--mrl-spacing-04);
26
26
  }
27
- &--xsmall {
27
+ &.mrlIconButton--xsmall {
28
28
  --mrl-button-icon-size: var(--mrl-spacing-06);
29
29
  }
30
+ &.mrlButton--xsmall {
31
+ --mrl-button-icon-size: var(--mrl-spacing-05);
32
+ }
30
33
  &.mrlIconButton--small {
31
34
  @include mrl-button-size('small', true);
32
35
  + .mrl-tooltip-content {
package/dist/styles/divider/variables.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  .MrlDivider {
4
4
  --mrl-divider-size: var(--mrl-spacing-01);
5
5
  --mrl-divider-spacing: var(--mrl-space-stack-section-divider);
6
- --mrl-divider-color: var(--mrl-color-line-divider);
6
+ --mrl-divider-color: var(--mrl-black-opacity-01);
7
7
  }
8
8
  .MrlDivider--small {
9
9
  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-small);
@@ -15,8 +15,11 @@
15
15
  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-xlarge);
16
16
  }
17
17
  .MrlDivider--inverse {
18
- --mrl-divider-color: var(--mrl-color-line-divider-inverse);
18
+ --mrl-divider-color: var(--mrl-white-opacity-02);
19
19
  }
20
20
  .MrlDivider--vertical {
21
21
  --mrl-divider-spacing: var(--mrl-spacing-02);
22
22
  }
23
+ .MrlDivider--thin {
24
+ --mrl-divider-size: var(--mrl-line-width-border-fine);
25
+ }