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