@muraldevkit/ui-toolkit 4.56.0 → 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.
- package/dist/components/button/constants.d.ts +1 -1
- package/dist/components/loader/constants.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/MrlButton/global.scss +44 -11
- package/dist/styles/MrlSpinner/module.scss +13 -0
- package/dist/styles/button/variables.scss +4 -1
- package/dist/styles.css +9 -9
- package/package.json +1 -1
|
@@ -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
|
|
36
|
-
|
|
37
|
-
|
|
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
|
}
|
|
@@ -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;
|
|
@@ -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
|
-
|
|
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 {
|