IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Components: CodeInput: add support dark theme

Browse Source
This commit is contained in:
Viktor Fomin 2022-11-13 05:09:27 +05:00
parent 92844a82bf
commit 974eb93112
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/components/code-input/styled-code-input.js
View File

@ -1,4 +1,5 @@
import styled from "styled-components";
import Base from "../themes/base";
const InputWrapper = styled.div`
display: flex;
@ -9,8 +10,9 @@ const InputWrapper = styled.div`
height: 120px;
width: 100px;
display: block;
background: #ffffff;
border: 1px solid #d0d5da;
background: ${(props) => props.theme.codeInput.background};
border: ${(props) => props.theme.codeInput.border};
color: ${(props) => props.theme.codeInput.color};
box-sizing: border-box;
border-radius: 8px;
margin: 0 4px;
@ -35,20 +37,21 @@ const InputWrapper = styled.div`
}
input:focus {
border: 1px solid #3b72a7;
border: 1px solid #5299e0;
outline: none;
}
input:disabled {
color: #a3a9ae;
background: #f8f9f9;
border: 1px solid #eceef1;
color: ${(props) => props.theme.codeInput.disabledColor}
background: ${(props) => props.theme.codeInput.disabledBackground}
border: 1px solid ${(props) => props.theme.codeInput.disabledBorder}
outline: none;
}
hr {
width: 24px;
height: 1px;
background: #c4c4c4;
background: ${(props) => props.theme.codeInput.lineColor};
border: none;
margin: 0 16px;
@ -58,4 +61,6 @@ const InputWrapper = styled.div`
}
`;
InputWrapper.defaultProps = { theme: Base };
export default InputWrapper;