Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Common/StyledCollapse.js
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
import { Collapse } from 'antd'; | import { Collapse } from 'antd'; | ||||
export const StyledCollapse = styled(Collapse)` | export const StyledCollapse = styled(Collapse)` | ||||
background: ${props => props.theme.collapses.background} !important; | background: ${props => props.theme.collapses.background} !important; | ||||
border: 1px solid ${props => props.theme.collapses.border} !important; | border: 1px solid ${props => props.theme.collapses.border} !important; | ||||
.ant-collapse-content { | .ant-collapse-content { | ||||
border: 1px solid ${props => props.theme.collapses.border}; | |||||
border-top: none; | border-top: none; | ||||
background-color: ${props => | background-color: ${props => | ||||
props.theme.collapses.expandedBackground} !important; | props.theme.collapses.expandedBackground} !important; | ||||
} | } | ||||
.ant-collapse-item { | .ant-collapse-item { | ||||
border-bottom: none !important; | border-bottom: none !important; | ||||
} | } | ||||
Show All 16 Lines | ${({ disabled = false, ...props }) => | ||||
color: ${props.theme.buttons.secondary.color} !important; | color: ${props.theme.buttons.secondary.color} !important; | ||||
} | } | ||||
} | } | ||||
.ant-collapse-arrow { | .ant-collapse-arrow { | ||||
font-size: 18px; | font-size: 18px; | ||||
} | } | ||||
` | ` | ||||
: ` | : ` | ||||
background: ${props.theme.primary} !important; | background: ${props.theme.eCashBlue} !important; | ||||
.ant-collapse-header { | .ant-collapse-header { | ||||
font-size: 18px; | font-size: 18px; | ||||
font-weight: bold; | font-weight: bold; | ||||
color: ${props.theme.contrast} !important; | color: ${props.theme.contrast} !important; | ||||
svg { | svg { | ||||
color: ${props.theme.contrast} !important; | color: ${props.theme.contrast} !important; | ||||
} | } | ||||
} | } | ||||
.ant-collapse-arrow { | .ant-collapse-arrow { | ||||
font-size: 18px; | font-size: 18px; | ||||
} | } | ||||
`} | `} | ||||
`; | `; | ||||
export const AdvancedCollapse = styled(Collapse)` | export const AdvancedCollapse = styled(Collapse)` | ||||
.ant-collapse-content { | |||||
background-color: ${props => | |||||
props.theme.advancedCollapse.expandedBackground} !important; | |||||
} | |||||
${({ disabled = false, ...props }) => | ${({ disabled = false, ...props }) => | ||||
disabled === true | disabled === true | ||||
? ` | ? ` | ||||
background: ${props.theme.buttons.secondary.background} !important; | background: ${props.theme.buttons.secondary.background} !important; | ||||
.ant-collapse-header { | .ant-collapse-header { | ||||
font-size: 18px; | font-size: 18px; | ||||
font-weight: normal; | font-weight: normal; | ||||
color: ${props.theme.buttons.secondary.color} !important; | color: ${props.theme.buttons.secondary.color} !important; | ||||
svg { | svg { | ||||
color: ${props.theme.buttons.secondary.color} !important; | color: ${props.theme.buttons.secondary.color} !important; | ||||
} | } | ||||
} | } | ||||
.ant-collapse-arrow { | .ant-collapse-arrow { | ||||
font-size: 18px; | font-size: 18px; | ||||
} | } | ||||
` | ` | ||||
: ` | : ` | ||||
background: ${props.theme.primary} !important; | background: ${props.theme.advancedCollapse.background} !important; | ||||
.ant-collapse-header { | .ant-collapse-header { | ||||
font-size: 18px; | font-size: 18px; | ||||
font-weight: bold; | font-weight: bold; | ||||
color: ${props.theme.contrast} !important; | color: ${props.theme.advancedCollapse.color} !important; | ||||
svg { | svg { | ||||
color: ${props.theme.contrast} !important; | color: ${props.theme.advancedCollapse.icon} !important; | ||||
} | } | ||||
} | } | ||||
.ant-collapse-arrow { | .ant-collapse-arrow { | ||||
font-size: 18px; | font-size: 18px; | ||||
} | } | ||||
`} | `} | ||||
`; | `; |