|
@@ -10,6 +10,7 @@ import styled from 'styled-components';
|
|
|
import Icon from '../Icon';
|
|
|
import Spinner from '../Spinner';
|
|
|
|
|
|
+// iBasic, isPrimary, isPosition, isNegative - here for old compat, check, remove
|
|
|
function Button ({ children, className = '', icon, isBasic, isBusy, isCircular, isDisabled, isFull, isIcon, isNegative, isPositive, isPrimary, label, onClick, onMouseEnter, onMouseLeave, tabIndex }: ButtonProps): React.ReactElement<ButtonProps> {
|
|
|
const _onClick = useCallback(
|
|
|
() => !(isBusy || isDisabled) && onClick && onClick(),
|
|
@@ -18,7 +19,7 @@ function Button ({ children, className = '', icon, isBasic, isBusy, isCircular,
|
|
|
|
|
|
return (
|
|
|
<button
|
|
|
- className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${isNegative ? ' isNegative' : ''}${isPositive ? ' isPositive' : ''}${isPrimary ? (isBasic ? ' ui--highlight--border' : ' ui--highlight--button') : ''}${isDisabled ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''} ${className}`}
|
|
|
+ className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${isNegative ? ' isNegative' : ''}${isPositive ? ' isPositive' : ''}${isPrimary ? ' isPrimary' : ''}${(isBusy || isDisabled) ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''}${!onClick ? ' isReadOnly' : ''} ${className}`}
|
|
|
onClick={_onClick}
|
|
|
onMouseEnter={onMouseEnter}
|
|
|
onMouseLeave={onMouseLeave}
|
|
@@ -38,14 +39,18 @@ function Button ({ children, className = '', icon, isBasic, isBusy, isCircular,
|
|
|
}
|
|
|
|
|
|
export default React.memo(styled(Button)`
|
|
|
+ background: #e9e8e7; // similar to rgba(0, 0, 0, 0.05);
|
|
|
border: none;
|
|
|
+ color: #4e4e4e;
|
|
|
cursor: pointer;
|
|
|
- font-size: 0.92857142857rem; // 13/14px
|
|
|
+ // font-size: 0.92857142857rem; // 13/14px
|
|
|
+ margin: 0 1px;
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
+ // text-shadow: 0 0 2px #f5f4f3;
|
|
|
|
|
|
&:not(.hasLabel) {
|
|
|
- padding: 0.75em;
|
|
|
+ padding: 0.7em;
|
|
|
|
|
|
> .ui--Icon {
|
|
|
height: 1rem;
|
|
@@ -62,31 +67,27 @@ export default React.memo(styled(Button)`
|
|
|
}
|
|
|
|
|
|
&.hasLabel {
|
|
|
- padding: 0.75em 1.5em;
|
|
|
+ padding: 0.7em 1.3em;
|
|
|
|
|
|
> .ui--Icon {
|
|
|
margin-right: 0.75rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &.isBasic {
|
|
|
- background: white !important;
|
|
|
- box-shadow: 0 0 0 1px #ddd;
|
|
|
- color: inherit !important;
|
|
|
- }
|
|
|
-
|
|
|
- &.isBusy {
|
|
|
- cursor: wait;
|
|
|
- }
|
|
|
-
|
|
|
&.isCircular {
|
|
|
border-radius: 10rem;
|
|
|
}
|
|
|
|
|
|
- &.isDisabled {
|
|
|
+ &.isDisabled, &.isReadOnly {
|
|
|
+ background: none;
|
|
|
+ box-shadow: none;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
+ &.isBusy {
|
|
|
+ cursor: wait;
|
|
|
+ }
|
|
|
+
|
|
|
&.isFull {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
@@ -101,7 +102,7 @@ export default React.memo(styled(Button)`
|
|
|
}
|
|
|
|
|
|
.ui--Button-overlay {
|
|
|
- background: rgba(255, 255, 255, 0.75);
|
|
|
+ background: rgba(245, 244, 243, 0.75);
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
position: absolute;
|
|
@@ -116,7 +117,6 @@ export default React.memo(styled(Button)`
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &.isBusy,
|
|
|
&.isDisabled {
|
|
|
.ui--Button-overlay {
|
|
|
visibility: visible;
|