1 <Separator thin />
2   
3const Separator = styled.div`
4  display: block;
5  width: 100%;
6  height: 1px;
7  margin: ${props => props.thin? '7px auto 0':'10px auto'};
8`;
9
10export default Separator;

1// Create an Input component that'll render an <input> tag with some styles
2const Input = styled.input`
3  padding: 0.5em;
4  margin: 0.5em;
5  color: ${props => props.inputColor || "palevioletred"};
6  background: papayawhip;
7  border: none;
8  border-radius: 3px;
9`;
10
11// Render a styled text input with the standard input color, and one with a custom input color
12render(
13  <div>
14    <Input defaultValue="@probablyup" type="text" />
15    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
16  </div>
17);// Create an Input component that'll render an <input> tag with some stylesconst Input = styled.input`  padding: 0.5em;  margin: 0.5em;  color: ${props => props.inputColor || "palevioletred"};  background: papayawhip;  border: none;  border-radius: 3px;`;
18// Render a styled text input with the standard input color, and one with a custom input colorrender(  <div>    <Input defaultValue="@probablyup" type="text" />    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />  </div>);
19/**
20 * Reset the text fill color so that placeholder is visible
21 */
22.npm__react-simple-code-editor__textarea:empty {
23  -webkit-text-fill-color: inherit !important;
24}
25
26/**
27 * Hack to apply on some CSS on IE10 and IE11
28 */
29@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
30  /**
31    * IE doesn't support '-webkit-text-fill-color'
32    * So we use 'color: transparent' to make the text transparent on IE
33    * Unlike other browsers, it doesn't affect caret color in IE
34    */
35  .npm__react-simple-code-editor__textarea {
36    color: transparent !important;
37  }
38
39  .npm__react-simple-code-editor__textarea::selection {
40    background-color: #accef7 !important;
41    color: transparent !important;
42  }
43}
44

1const Input = styled.input.attrs(props => ({
2  // we can define static props
3  type: "text",
4
5  // or we can define dynamic ones
6  size: props.size || "1em",
7}))`
8  color: palevioletred;
9  font-size: 1em;
10  border: 2px solid palevioletred;
11  border-radius: 3px;
12
13  /* here we use the dynamically computed prop */
14  margin: ${props => props.size};
15  padding: ${props => props.size};
16`;
17
18render(
19  <div>
20    <Input placeholder="A small text input" />
21    <br />
22    <Input placeholder="A bigger text input" size="2em" />
23  </div>
24);const Input = styled.input.attrs(props => ({  // we can define static props  type: "text",
25  // or we can define dynamic ones  size: props.size || "1em",}))`  color: palevioletred;  font-size: 1em;  border: 2px solid palevioletred;  border-radius: 3px;
26  /* here we use the dynamically computed prop */  margin: ${props => props.size};  padding: ${props => props.size};`;
27render(  <div>    <Input placeholder="A small text input" />    <br />    <Input placeholder="A bigger text input" size="2em" />  </div>);
28/**
29 * Reset the text fill color so that placeholder is visible
30 */
31.npm__react-simple-code-editor__textarea:empty {
32  -webkit-text-fill-color: inherit !important;
33}
34
35/**
36 * Hack to apply on some CSS on IE10 and IE11
37 */
38@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
39  /**
40    * IE doesn't support '-webkit-text-fill-color'
41    * So we use 'color: transparent' to make the text transparent on IE
42    * Unlike other browsers, it doesn't affect caret color in IE
43    */
44  .npm__react-simple-code-editor__textarea {
45    color: transparent !important;
46  }
47
48  .npm__react-simple-code-editor__textarea::selection {
49    background-color: #accef7 !important;
50    color: transparent !important;
51  }
52}
53