@stellar-expert/ui-framework 1.14.9 → 1.14.11
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/controls/button.js +6 -1
- package/controls/button.scss +13 -12
- package/package.json +1 -1
package/controls/button.js
CHANGED
|
@@ -3,10 +3,11 @@ import PropTypes from 'prop-types'
|
|
|
3
3
|
import cn from 'classnames'
|
|
4
4
|
import './button.scss'
|
|
5
5
|
|
|
6
|
-
export const Button = React.memo(function Button({href, onClick, block, outline, clear, stackable, small, disabled, className, children, ...op}) {
|
|
6
|
+
export const Button = React.memo(function Button({href, onClick, block, outline, clear, stackable, small, disabled, loading, className, children, ...op}) {
|
|
7
7
|
const c = cn('button', {
|
|
8
8
|
small,
|
|
9
9
|
disabled,
|
|
10
|
+
loading,
|
|
10
11
|
'button-block': block,
|
|
11
12
|
'button-outline': outline,
|
|
12
13
|
'button-clear': clear,
|
|
@@ -59,6 +60,10 @@ Button.propTypes = {
|
|
|
59
60
|
* Whether the button is currently disabled
|
|
60
61
|
*/
|
|
61
62
|
disabled: PropTypes.bool,
|
|
63
|
+
/**
|
|
64
|
+
* Show loading animation on the button
|
|
65
|
+
*/
|
|
66
|
+
loading: PropTypes.bool,
|
|
62
67
|
/**
|
|
63
68
|
* Externally provided CSS classes
|
|
64
69
|
*/
|
package/controls/button.scss
CHANGED
|
@@ -60,6 +60,7 @@ button {
|
|
|
60
60
|
|
|
61
61
|
&:hover {
|
|
62
62
|
color: var(--color-bg);
|
|
63
|
+
|
|
63
64
|
&:before {
|
|
64
65
|
background: var(--color-primary);
|
|
65
66
|
border-color: var(--color-primary);
|
|
@@ -112,6 +113,7 @@ button {
|
|
|
112
113
|
&:hover {
|
|
113
114
|
color: var(--color-highlight);
|
|
114
115
|
}
|
|
116
|
+
|
|
115
117
|
&:before {
|
|
116
118
|
background: var(--color-bg);
|
|
117
119
|
border-color: var(--color-highlight);
|
|
@@ -136,8 +138,7 @@ button {
|
|
|
136
138
|
}
|
|
137
139
|
}
|
|
138
140
|
|
|
139
|
-
|
|
140
|
-
.loading:after {
|
|
141
|
+
&.loading:after {
|
|
141
142
|
content: "";
|
|
142
143
|
display: block;
|
|
143
144
|
position: absolute;
|
|
@@ -150,17 +151,17 @@ button {
|
|
|
150
151
|
transform: skew(-20deg) translateX(0);
|
|
151
152
|
animation: loading-button 3s infinite ease-in-out;
|
|
152
153
|
}
|
|
154
|
+
}
|
|
153
155
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
156
|
+
@keyframes loading-button {
|
|
157
|
+
0% {
|
|
158
|
+
left: 0;
|
|
159
|
+
}
|
|
160
|
+
50% {
|
|
161
|
+
left: 80%;
|
|
162
|
+
}
|
|
163
|
+
100% {
|
|
164
|
+
left: 0;
|
|
164
165
|
}
|
|
165
166
|
}
|
|
166
167
|
|