@muraldevkit/ui-toolkit 4.56.0 → 4.58.0-dev-PIuc.1

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 (10) hide show
  1. package/dist/components/button/constants.d.ts +1 -1
  2. package/dist/components/loader/constants.d.ts +1 -1
  3. package/dist/components/notification/MrlToast/MrlToast.d.ts +23 -1
  4. package/dist/index.js +1 -1
  5. package/dist/styles/MrlButton/global.scss +44 -11
  6. package/dist/styles/MrlSpinner/module.scss +13 -0
  7. package/dist/styles/MrlToast/module.scss +44 -33
  8. package/dist/styles/button/variables.scss +4 -1
  9. package/dist/styles.css +10 -10
  10. package/package.json +1 -1
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/MrlToast/module.scss CHANGED
@@ -6,20 +6,22 @@
6
6
  box-shadow: var(--mrl-shadows-lifted);
7
7
  color: rgba(var(--mrl-white), 1);
8
8
  display: flex;
9
- gap: var(--mrl-space-inset);
10
- height: max-content;
11
9
  justify-content: space-between;
12
10
  max-width: 32rem;
13
- min-height: var(--mrl-spacing-09);
14
11
  min-width: 8.75rem;
15
- padding: var(--mrl-space-inset-control-small) var(--mrl-spacing-05)
16
- var(--mrl-space-inset-control-small) var(--mrl-spacing-04);
12
+ padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-spacing-05)
13
+ calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-spacing-03);
17
14
  pointer-events: auto;
18
15
  width: fit-content;
19
16
  z-index: $mrl-zIndex-notifications-toast;
17
+ &.has-cta {
18
+ padding: var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-03);
19
+ }
20
+ &.has-avatar {
21
+ padding-left: var(--mrl-spacing-02);
22
+ }
20
23
  &.closing {
21
24
  animation: fadeout 0.3s forwards;
22
- padding: 20px;
23
25
  }
24
26
  @keyframes fadeout {
25
27
  from {
@@ -30,50 +32,59 @@
30
32
  visibility: hidden;
31
33
  }
32
34
  }
33
- .iconWrapper {
34
- align-items: center;
35
- display: flex;
36
- flex-shrink: 0;
37
- height: var(--mrl-spacing-06);
38
- }
39
35
  .content {
40
36
  align-items: center;
41
37
  display: flex;
42
- gap: var(--mrl-space-inset);
43
- }
44
- .primaryMessage {
45
- font-family: var(--mrl-heading-font);
46
- font-size: var(--mrl-font-size-03);
47
- font-weight: var(--mrl-font-weight-04);
48
- letter-spacing: var(--mrl-letter-spacing-03);
49
- line-height: var(--mrl-line-height-08);
50
- }
51
- .secondaryMessage {
52
- font-family: var(--mrl-body-font);
53
- font-size: var(--mrl-font-size-03);
54
- font-weight: var(--mrl-font-weight-01);
55
- letter-spacing: var(--mrl-letter-spacing-03);
56
- line-height: var(--mrl-line-height-08);
38
+ .iconWrapper {
39
+ align-items: center;
40
+ display: flex;
41
+ flex-shrink: 0;
42
+ height: var(--mrl-spacing-06);
43
+ margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
44
+ }
45
+ .avatarWrapper {
46
+ align-items: center;
47
+ display: flex;
48
+ flex-shrink: 0;
49
+ height: var(--mrl-spacing-06);
50
+ margin-right: var(--mrl-spacing-02);
51
+ }
52
+ .textContent {
53
+ font-size: var(--mrl-font-size-03);
54
+ letter-spacing: var(--mrl-letter-spacing-03);
55
+ line-height: var(--mrl-line-height-02);
56
+ }
57
+ .primaryMessage {
58
+ font-family: var(--mrl-heading-font);
59
+ font-weight: var(--mrl-font-weight-04);
60
+ }
61
+ .secondaryMessage {
62
+ font-family: var(--mrl-body-font);
63
+ font-weight: var(--mrl-font-weight-01);
64
+ }
65
+ .link {
66
+ margin-left: var(--mrl-spacing-02);
67
+ }
57
68
  }
58
69
  .cta-container {
59
70
  align-items: center;
60
71
  display: flex;
61
72
  height: 100%;
62
73
  justify-content: center;
74
+ margin-left: calc(var(--mrl-spacing-03) + var(--mrl-spacing-01));
63
75
  }
64
76
  .cta {
77
+ display: flex;
78
+ gap: var(--mrl-space-inline-sibling);
65
79
  vertical-align: middle;
66
80
  &--secondary {
67
81
  margin-right: var(--mrl-spacing-02);
68
82
  }
69
83
  &--close {
70
84
  margin-left: var(--mrl-spacing-02);
71
- }
72
- }
73
- &.reducedPadding {
74
- padding: var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-04);
75
- .content {
76
- margin-right: var(--mrl-space-inline-sibling);
85
+ &:only-child {
86
+ margin-left: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
87
+ }
77
88
  }
78
89
  }
79
90
  &.infoNotification {
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 {