Web: text-input: Splitting one file into several, adding a theme to styles, changing the globalColors file accordingly.
This commit is contained in:
parent
f07906ccb6
commit
53884de5ce
@ -3,40 +3,49 @@ import { css } from "styled-components";
|
||||
const commonInputStyle = css`
|
||||
width: ${(props) =>
|
||||
(props.scale && "100%") ||
|
||||
(props.size === "base" && "173px") ||
|
||||
(props.size === "middle" && "300px") ||
|
||||
(props.size === "big" && "350px") ||
|
||||
(props.size === "huge" && "500px") ||
|
||||
(props.size === "large" && "550px")};
|
||||
background-color: ${(props) => (props.isDisabled ? "#F8F9F9" : "#fff")};
|
||||
color: ${(props) =>
|
||||
props.isDisabled ? "#A3A9AE" : props.color ? props.color : "#333333"};
|
||||
(props.size === "base" && props.theme.input.width.base) ||
|
||||
(props.size === "middle" && props.theme.input.width.middle) ||
|
||||
(props.size === "big" && props.theme.input.width.big) ||
|
||||
(props.size === "huge" && props.theme.input.width.huge) ||
|
||||
(props.size === "large" && props.theme.input.width.large)};
|
||||
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border: solid 1px;
|
||||
background-color: ${(props) =>
|
||||
props.isDisabled
|
||||
? props.theme.input.disableBackgroundColor
|
||||
: props.theme.input.backgroundColor};
|
||||
color: ${(props) =>
|
||||
props.isDisabled
|
||||
? props.theme.input.disableColor
|
||||
: props.color
|
||||
? props.color
|
||||
: props.theme.input.color};
|
||||
|
||||
border-radius: ${(props) => props.theme.input.borderRadius};
|
||||
-moz-border-radius: ${(props) => props.theme.input.borderRadius};
|
||||
-webkit-border-radius: ${(props) => props.theme.input.borderRadius};
|
||||
|
||||
box-shadow: ${(props) => props.theme.input.boxShadow};
|
||||
box-sizing: ${(props) => props.theme.input.boxSizing};
|
||||
border: ${(props) => props.theme.input.border};
|
||||
border-color: ${(props) =>
|
||||
(props.hasError && "#c30") ||
|
||||
(props.hasWarning && "#f1ca92") ||
|
||||
(props.isDisabled && "#ECEEF1") ||
|
||||
"#D0D5DA"};
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
(props.hasError && props.theme.input.errorBorderColor) ||
|
||||
(props.hasWarning && props.theme.input.warningBorderColor) ||
|
||||
(props.isDisabled && props.theme.input.disabledBorderColor) ||
|
||||
props.theme.input.borderColor};
|
||||
|
||||
:hover {
|
||||
border-color: ${(props) =>
|
||||
(props.hasError && "#c30") ||
|
||||
(props.hasWarning && "#f1ca92") ||
|
||||
(props.isDisabled && "#ECEEF1") ||
|
||||
"#A3A9AE"};
|
||||
(props.hasError && props.theme.input.hoverErrorBorderColor) ||
|
||||
(props.hasWarning && props.theme.input.hoverWarningBorderColor) ||
|
||||
(props.isDisabled && props.theme.input.hoverDisabledBorderColor) ||
|
||||
props.theme.input.hoverBorderColor};
|
||||
}
|
||||
:focus {
|
||||
border-color: ${(props) =>
|
||||
(props.hasError && "#c30") ||
|
||||
(props.hasWarning && "#f1ca92") ||
|
||||
(props.isDisabled && "#ECEEF1") ||
|
||||
"#2DA7DB"};
|
||||
(props.hasError && props.theme.input.focusErrorBorderColor) ||
|
||||
(props.hasWarning && props.theme.input.focusWarningBorderColor) ||
|
||||
(props.isDisabled && props.theme.input.focusDisabledBorderColor) ||
|
||||
props.theme.input.focusBorderColor};
|
||||
}
|
||||
|
||||
cursor: ${(props) =>
|
||||
|
@ -1,168 +1 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from "styled-components";
|
||||
import commonInputStyle from "../text-input/common-input-styles";
|
||||
import MaskedInput from "react-text-mask";
|
||||
import equal from "fast-deep-equal/react";
|
||||
|
||||
/* eslint-disable no-unused-vars, react/prop-types */
|
||||
const Input = ({
|
||||
isAutoFocussed,
|
||||
isDisabled,
|
||||
isReadOnly,
|
||||
hasError,
|
||||
hasWarning,
|
||||
scale,
|
||||
withBorder,
|
||||
keepCharPositions,
|
||||
fontWeight,
|
||||
isBold,
|
||||
...props
|
||||
}) =>
|
||||
props.mask != null ? (
|
||||
<MaskedInput keepCharPositions {...props} />
|
||||
) : (
|
||||
<input {...props} />
|
||||
);
|
||||
/* eslint-enable react/prop-types, no-unused-vars */
|
||||
|
||||
const StyledInput = styled(Input).attrs((props) => ({
|
||||
id: props.id,
|
||||
name: props.name,
|
||||
type: props.type,
|
||||
value: props.value,
|
||||
placeholder: props.placeholder,
|
||||
maxLength: props.maxLength,
|
||||
onChange: props.onChange,
|
||||
onBlur: props.onBlur,
|
||||
onFocus: props.onFocus,
|
||||
readOnly: props.isReadOnly,
|
||||
autoFocus: props.isAutoFocussed,
|
||||
autoComplete: props.autoComplete,
|
||||
tabIndex: props.tabIndex,
|
||||
disabled: props.isDisabled ? "disabled" : "",
|
||||
}))`
|
||||
${commonInputStyle}
|
||||
-webkit-appearance: none;
|
||||
display: flex;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
line-height: ${(props) =>
|
||||
(props.size === "base" && "20px") ||
|
||||
(props.size === "middle" && "20px") ||
|
||||
(props.size === "big" && "20px") ||
|
||||
(props.size === "huge" && "21px") ||
|
||||
(props.size === "large" && "20px")};
|
||||
font-size: ${(props) =>
|
||||
(props.size === "base" && "14px") ||
|
||||
(props.size === "middle" && "14px") ||
|
||||
(props.size === "big" && "16px") ||
|
||||
(props.size === "huge" && "18px") ||
|
||||
(props.size === "large" && "16px")};
|
||||
|
||||
font-weight: ${(props) =>
|
||||
props.fontWeight ? props.fontWeight : props.isBold ? 600 : "normal"};
|
||||
|
||||
flex: 1 1 0%;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
padding: ${(props) =>
|
||||
(props.size === "base" && "5px 6px") ||
|
||||
(props.size === "middle" && "8px 12px") ||
|
||||
(props.size === "big" && "8px 16px") ||
|
||||
(props.size === "huge" && "8px 20px") ||
|
||||
(props.size === "large" && "11px 15px")};
|
||||
transition: all 0.2s ease 0s;
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: "#A3A9AE";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: "#A3A9AE";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: "#A3A9AE";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: "#A3A9AE";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: "#A3A9AE";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
${(props) => !props.withBorder && `border: none;`}
|
||||
`;
|
||||
|
||||
class TextInput extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return !equal(this.props, nextProps);
|
||||
}
|
||||
|
||||
render() {
|
||||
// console.log(`TextInput render id=${this.props.id}`);
|
||||
return <StyledInput {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
||||
TextInput.propTypes = {
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
type: PropTypes.oneOf(["text", "password", "email"]),
|
||||
value: PropTypes.string.isRequired,
|
||||
maxLength: PropTypes.number,
|
||||
placeholder: PropTypes.string,
|
||||
tabIndex: PropTypes.number,
|
||||
mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
|
||||
keepCharPositions: PropTypes.bool,
|
||||
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
||||
scale: PropTypes.bool,
|
||||
|
||||
onChange: PropTypes.func,
|
||||
onBlur: PropTypes.func,
|
||||
onFocus: PropTypes.func,
|
||||
|
||||
isAutoFocussed: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool,
|
||||
isReadOnly: PropTypes.bool,
|
||||
hasError: PropTypes.bool,
|
||||
hasWarning: PropTypes.bool,
|
||||
autoComplete: PropTypes.string,
|
||||
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
|
||||
fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
isBold: PropTypes.bool,
|
||||
};
|
||||
|
||||
TextInput.defaultProps = {
|
||||
type: "text",
|
||||
value: "",
|
||||
maxLength: 255,
|
||||
size: "base",
|
||||
scale: false,
|
||||
tabIndex: -1,
|
||||
hasError: false,
|
||||
hasWarning: false,
|
||||
autoComplete: "off",
|
||||
withBorder: true,
|
||||
keepCharPositions: false,
|
||||
isBold: false,
|
||||
};
|
||||
|
||||
export default TextInput;
|
||||
export default from "./text-input";
|
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import MaskedInput from "react-text-mask";
|
||||
|
||||
|
||||
|
||||
/* eslint-disable no-unused-vars, react/prop-types */
|
||||
const Input = ({
|
||||
isAutoFocussed,
|
||||
isDisabled,
|
||||
isReadOnly,
|
||||
hasError,
|
||||
hasWarning,
|
||||
scale,
|
||||
withBorder,
|
||||
keepCharPositions,
|
||||
fontWeight,
|
||||
isBold,
|
||||
...props
|
||||
}) =>
|
||||
props.mask != null ? (
|
||||
<MaskedInput keepCharPositions {...props} />
|
||||
) : (
|
||||
<input {...props} />
|
||||
);
|
||||
|
||||
export default Input;
|
@ -0,0 +1,103 @@
|
||||
import styled from "styled-components";
|
||||
import commonInputStyles from "./common-input-styles";
|
||||
import Input from "./Input";
|
||||
import { Base } from "../../themes";
|
||||
|
||||
/* eslint-enable react/prop-types, no-unused-vars */
|
||||
const StyledTextInput = styled(Input).attrs((props) => ({
|
||||
id: props.id,
|
||||
name: props.name,
|
||||
type: props.type,
|
||||
value: props.value,
|
||||
placeholder: props.placeholder,
|
||||
maxLength: props.maxLength,
|
||||
onChange: props.onChange,
|
||||
onBlur: props.onBlur,
|
||||
onFocus: props.onFocus,
|
||||
readOnly: props.isReadOnly,
|
||||
autoFocus: props.isAutoFocussed,
|
||||
autoComplete: props.autoComplete,
|
||||
tabIndex: props.tabIndex,
|
||||
disabled: props.isDisabled ? "disabled" : "",
|
||||
}))`
|
||||
${commonInputStyles}
|
||||
-webkit-appearance: ${(props) => props.theme.textInput.appearance};
|
||||
display: ${(props) => props.theme.textInput.display};
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
line-height: ${(props) =>
|
||||
(props.size === "base" && props.theme.textInput.lineHeight.base) ||
|
||||
(props.size === "middle" && props.theme.textInput.lineHeight.middle) ||
|
||||
(props.size === "big" && props.theme.textInput.lineHeight.big) ||
|
||||
(props.size === "huge" && props.theme.textInput.lineHeight.huge) ||
|
||||
(props.size === "large" && props.theme.textInput.lineHeight.large)};
|
||||
font-size: ${(props) =>
|
||||
(props.size === "base" && props.theme.textInput.fontSize.base) ||
|
||||
(props.size === "middle" && props.theme.textInput.fontSize.middle) ||
|
||||
(props.size === "big" && props.theme.textInput.fontSize.big) ||
|
||||
(props.size === "huge" && props.theme.textInput.fontSize.huge) ||
|
||||
(props.size === "large" && props.theme.textInput.fontSize.large)};
|
||||
|
||||
font-weight: ${(props) =>
|
||||
props.fontWeight
|
||||
? props.fontWeight
|
||||
: props.isBold
|
||||
? 600
|
||||
: props.theme.textInput.fontWeight};
|
||||
|
||||
flex: ${(props) => props.theme.textInput.flex};
|
||||
outline: ${(props) => props.theme.textInput.outline};
|
||||
overflow: ${(props) => props.theme.textInput.overflow};
|
||||
opacity: ${(props) => props.theme.textInput.opacity};
|
||||
|
||||
width: ${(props) =>
|
||||
(props.scale && "100%") ||
|
||||
(props.size === "base" && props.theme.input.width.base) ||
|
||||
(props.size === "middle" && props.theme.input.width.middle) ||
|
||||
(props.size === "big" && props.theme.input.width.big) ||
|
||||
(props.size === "huge" && props.theme.input.width.huge) ||
|
||||
(props.size === "large" && props.theme.input.width.large)};
|
||||
padding: ${(props) =>
|
||||
(props.size === "base" && props.theme.textInput.padding.base) ||
|
||||
(props.size === "middle" && props.theme.textInput.padding.middle) ||
|
||||
(props.size === "big" && props.theme.textInput.padding.big) ||
|
||||
(props.size === "huge" && props.theme.textInput.padding.huge) ||
|
||||
(props.size === "large" && props.theme.textInput.padding.large)};
|
||||
|
||||
transition: ${(props) => props.theme.textInput.transition};
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: ${(props) => props.theme.textInput.placeholderColor};
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
user-select: ${(props) => props.theme.userSelect};
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: ${(props) => props.theme.textInput.placeholderColor};
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
user-select: ${(props) => props.theme.userSelect};
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: ${(props) => props.theme.textInput.placeholderColor};
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
user-select: ${(props) => props.theme.userSelect};
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: ${(props) => props.theme.textInput.placeholderColor};
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
user-select: ${(props) => props.theme.userSelect};
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: ${(props) => props.theme.textInput.placeholderColor};
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
user-select: ${(props) => props.theme.userSelect};
|
||||
}
|
||||
|
||||
${(props) => !props.withBorder && `border: none;`}
|
||||
`;
|
||||
|
||||
StyledTextInput.defaultProps = { theme: Base };
|
||||
|
||||
export default StyledTextInput;
|
@ -0,0 +1,69 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import equal from "fast-deep-equal/react";
|
||||
import { Base } from "../../themes";
|
||||
import StyledTextInput from "./styled-text-input";
|
||||
|
||||
|
||||
|
||||
class TextInput extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
return !equal(this.props, nextProps);
|
||||
}
|
||||
|
||||
render() {
|
||||
// console.log(`TextInput render id=${this.props.id}`);
|
||||
|
||||
return <StyledTextInput {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
||||
TextInput.propTypes = {
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
type: PropTypes.oneOf(["text", "password", "email"]),
|
||||
value: PropTypes.string.isRequired,
|
||||
maxLength: PropTypes.number,
|
||||
placeholder: PropTypes.string,
|
||||
tabIndex: PropTypes.number,
|
||||
mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
|
||||
keepCharPositions: PropTypes.bool,
|
||||
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
||||
scale: PropTypes.bool,
|
||||
|
||||
onChange: PropTypes.func,
|
||||
onBlur: PropTypes.func,
|
||||
onFocus: PropTypes.func,
|
||||
|
||||
isAutoFocussed: PropTypes.bool,
|
||||
isDisabled: PropTypes.bool,
|
||||
isReadOnly: PropTypes.bool,
|
||||
hasError: PropTypes.bool,
|
||||
hasWarning: PropTypes.bool,
|
||||
autoComplete: PropTypes.string,
|
||||
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
|
||||
fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
isBold: PropTypes.bool,
|
||||
};
|
||||
|
||||
TextInput.defaultProps = {
|
||||
type: "text",
|
||||
value: "",
|
||||
maxLength: 255,
|
||||
size: "base",
|
||||
theme: Base,
|
||||
scale: false,
|
||||
tabIndex: -1,
|
||||
hasError: false,
|
||||
hasWarning: false,
|
||||
autoComplete: "off",
|
||||
withBorder: true,
|
||||
keepCharPositions: false,
|
||||
isBold: false,
|
||||
};
|
||||
|
||||
export default TextInput;
|
@ -32,8 +32,8 @@ const {
|
||||
const Base = {
|
||||
// color: black,
|
||||
// backgroundColor: white,
|
||||
fontFamily: "Open Sans, sans-serif, Arial",
|
||||
fontSize: "30px",
|
||||
fontFamily: "Open Sans, sans-serif, Arial",
|
||||
fontSize: "30px",
|
||||
|
||||
// text: {
|
||||
// color: black,
|
||||
@ -96,8 +96,7 @@ const Base = {
|
||||
primary: white,
|
||||
disabled: grayMid,
|
||||
},
|
||||
baseHover: "red",
|
||||
primaryHover: "green",
|
||||
|
||||
backgroundColor: {
|
||||
base: white,
|
||||
baseHover: white,
|
||||
@ -200,7 +199,7 @@ const Base = {
|
||||
disableColor: "#A3A9AE",
|
||||
|
||||
backgroundColor: white,
|
||||
disableBackgroundColor: "#F8F9F9",
|
||||
disableBackgroundColor: grayLight,
|
||||
|
||||
width: {
|
||||
base: "173px",
|
||||
@ -215,26 +214,27 @@ const Base = {
|
||||
boxSizing: "border-box",
|
||||
border: "solid 1px",
|
||||
|
||||
borderColor: "#D0D5DA",
|
||||
errorBorderColor: "#c30",
|
||||
warningBorderColor: "#f1ca92",
|
||||
disabledBorderColor: "#ECEEF1",
|
||||
borderColor: grayMid,
|
||||
errorBorderColor: red,
|
||||
warningBorderColor: warningColor,
|
||||
disabledBorderColor: grayLightMid,
|
||||
|
||||
hoverBorderColor: "#A3A9AE",
|
||||
hoverErrorBorderColor: "#c30",
|
||||
hoverWarningBorderColor: "#f1ca92",
|
||||
hoverDisabledBorderColor: "#ECEEF1",
|
||||
hoverBorderColor: gray,
|
||||
hoverErrorBorderColor: red,
|
||||
hoverWarningBorderColor: warningColor,
|
||||
hoverDisabledBorderColor: grayLightMid,
|
||||
|
||||
focusBorderColor: "#2DA7DB",
|
||||
focusErrorBorderColor: "#c30",
|
||||
focusWarningBorderColor: "#f1ca92",
|
||||
focusDisabledBorderColor: "#ECEEF1",
|
||||
focusBorderColor: blueMain,
|
||||
focusErrorBorderColor: red,
|
||||
focusWarningBorderColor: warningColor,
|
||||
focusDisabledBorderColor: grayLightMid,
|
||||
},
|
||||
|
||||
textInput: {
|
||||
fontWeight: "normal",
|
||||
placeholderColor: "#333333",
|
||||
disablePlaceholderColor: "#A3A9AE",
|
||||
userSelect: "none",
|
||||
placeholderColor: gray,
|
||||
disablePlaceholderColor: grayMid,
|
||||
|
||||
transition: "all 0.2s ease 0s",
|
||||
appearance: "none",
|
||||
@ -242,13 +242,14 @@ const Base = {
|
||||
flex: "1 1 0%",
|
||||
outline: "none",
|
||||
overflow: "hidden",
|
||||
opacity: "1",
|
||||
|
||||
lineHeight: {
|
||||
base: "20px",
|
||||
middle: "20px",
|
||||
big: "20px",
|
||||
huge: "21px",
|
||||
large:"20px"
|
||||
large: "20px",
|
||||
},
|
||||
|
||||
fontSize: {
|
||||
@ -256,7 +257,7 @@ const Base = {
|
||||
middle: "14px",
|
||||
big: "16px",
|
||||
huge: "18px",
|
||||
large: "16px"
|
||||
large: "16px",
|
||||
},
|
||||
|
||||
padding: {
|
||||
@ -264,7 +265,7 @@ const Base = {
|
||||
middle: "8px 12px",
|
||||
big: "8px 16px",
|
||||
huge: "8px 20px",
|
||||
large: "11px 15px"
|
||||
large: "11px 15px",
|
||||
},
|
||||
},
|
||||
|
||||
@ -452,27 +453,27 @@ const Base = {
|
||||
// fillColor: gray,
|
||||
// },
|
||||
|
||||
// button: {
|
||||
// height: "18px",
|
||||
// heightWithBorder: "32px",
|
||||
// paddingLeft: "8px",
|
||||
// button: {
|
||||
// height: "18px",
|
||||
// heightWithBorder: "32px",
|
||||
// paddingLeft: "8px",
|
||||
|
||||
// color: black,
|
||||
// disabledColor: grayMid,
|
||||
// background: white,
|
||||
// backgroundWithBorder: "none",
|
||||
// color: black,
|
||||
// disabledColor: grayMid,
|
||||
// background: white,
|
||||
// backgroundWithBorder: "none",
|
||||
|
||||
// border: `1px solid ${grayMid}`,
|
||||
// borderRadius: "3px",
|
||||
// borderColor: blueMain,
|
||||
// border: `1px solid ${grayMid}`,
|
||||
// borderRadius: "3px",
|
||||
// borderColor: blueMain,
|
||||
|
||||
// disabledBorderColor: grayLightMid,
|
||||
// disabledBackground: grayLight,
|
||||
// disabledBorderColor: grayLightMid,
|
||||
// disabledBackground: grayLight,
|
||||
|
||||
// hoverBorderColor: gray,
|
||||
// hoverBorderColorOpen: blueMain,
|
||||
// hoverDisabledBorderColor: grayLightMid,
|
||||
// },
|
||||
// hoverBorderColor: gray,
|
||||
// hoverBorderColorOpen: blueMain,
|
||||
// hoverDisabledBorderColor: grayLightMid,
|
||||
// },
|
||||
|
||||
// label: {
|
||||
// marginRightWithBorder: "8px",
|
||||
|
Loading…
Reference in New Issue
Block a user