|
5 | 5 | */ |
6 | 6 | import React, { useState, useRef, useLayoutEffect, Fragment, useCallback } from 'react'; |
7 | 7 | import { EuiButtonEmpty, EuiSpacer, EuiButton, EuiHorizontalRule } from '@elastic/eui'; |
8 | | -import euiStyled from '../../../../common/eui_styled_components'; |
| 8 | +import styled from 'styled-components'; |
9 | 9 |
|
10 | | -const BottomFade = euiStyled.div` |
11 | | -width: 100%; |
12 | | -background: ${props => |
13 | | - `linear-gradient(${props.theme.eui.euiColorEmptyShade}00 0%, ${props.theme.eui.euiColorEmptyShade} 100%)`}; |
14 | | -margin-top: -${props => parseInt(props.theme.eui.spacerSizes.xl, 10) * 2}px; |
15 | | -height: ${props => parseInt(props.theme.eui.spacerSizes.xl, 10) * 2}px; |
16 | | -position: absolute; |
| 10 | +const BottomFade = styled.div` |
| 11 | + width: 100%; |
| 12 | + background: ${props => |
| 13 | + `linear-gradient(${props.theme.eui.euiColorEmptyShade}00 0%, ${props.theme.eui.euiColorEmptyShade} 100%)`}; |
| 14 | + margin-top: -${props => parseInt(props.theme.eui.spacerSizes.xl, 10) * 2}px; |
| 15 | + height: ${props => parseInt(props.theme.eui.spacerSizes.xl, 10) * 2}px; |
| 16 | + position: absolute; |
17 | 17 | `; |
18 | | -const ContentCollapseContainer = euiStyled.div` |
19 | | -position: relative; |
| 18 | +const ContentCollapseContainer = styled.div` |
| 19 | + position: relative; |
20 | 20 | `; |
21 | | -const CollapseButtonContainer = euiStyled.div` |
22 | | -display: inline-block; |
23 | | -background-color: ${props => props.theme.eui.euiColorGhost}; |
24 | | -position: absolute; |
25 | | -left: 50%; |
26 | | -transform: translateX(-50%); |
27 | | -top: ${props => parseInt(props.theme.eui.euiButtonHeight, 10) / 2}px; |
| 21 | +const CollapseButtonContainer = styled.div` |
| 22 | + display: inline-block; |
| 23 | + background-color: ${props => props.theme.eui.euiColorGhost}; |
| 24 | + position: absolute; |
| 25 | + left: 50%; |
| 26 | + transform: translateX(-50%); |
| 27 | + top: ${props => parseInt(props.theme.eui.euiButtonHeight, 10) / 2}px; |
28 | 28 | `; |
29 | | -const CollapseButtonTop = euiStyled(EuiButtonEmpty)` |
30 | | -float: right; |
| 29 | +const CollapseButtonTop = styled(EuiButtonEmpty)` |
| 30 | + float: right; |
31 | 31 | `; |
32 | 32 |
|
33 | 33 | const CollapseButton = ({ |
|
0 commit comments