diff options
| author | Fred Carlsen <fred@sjelfull.no> | 2018-12-14 00:38:18 +0800 |
|---|---|---|
| committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-14 00:38:32 +0800 |
| commit | 1c413e632b3a71453a523d68507e0f464f0f61bc (patch) | |
| tree | ee1945846765ad6d4e012b9e5661d5f5d26d68bd /packages/website/ts/@next/components | |
| parent | 803086da5769c7cad2b4bbb80496ea58b353e5b8 (diff) | |
| download | dexon-sol-tools-1c413e632b3a71453a523d68507e0f464f0f61bc.tar dexon-sol-tools-1c413e632b3a71453a523d68507e0f464f0f61bc.tar.gz dexon-sol-tools-1c413e632b3a71453a523d68507e0f464f0f61bc.tar.bz2 dexon-sol-tools-1c413e632b3a71453a523d68507e0f464f0f61bc.tar.lz dexon-sol-tools-1c413e632b3a71453a523d68507e0f464f0f61bc.tar.xz dexon-sol-tools-1c413e632b3a71453a523d68507e0f464f0f61bc.tar.zst dexon-sol-tools-1c413e632b3a71453a523d68507e0f464f0f61bc.zip | |
Styled configurator
Diffstat (limited to 'packages/website/ts/@next/components')
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 54d4764f3..c29277c16 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -10,7 +10,9 @@ interface BaseTextInterface extends PaddingInterface { interface HeadingProps extends BaseTextInterface { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; maxWidth?: string; + fontWeight?: string; isCentered?: boolean; + isFlex?: boolean; isNoMargin?: boolean; isMuted?: boolean | number; marginBottom?: string; @@ -26,6 +28,9 @@ interface ParagraphProps extends BaseTextInterface { const StyledHeading = styled.h1<HeadingProps>` max-width: ${props => props.maxWidth}; color: ${props => props.color || props.theme.textColor}; + display: ${props => props.isFlex && `inline-flex`}; + align-items: center; + justify-content: ${props => props.isFlex && `space-between`}; font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`}; line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`}; text-align: ${props => props.isCentered && 'center'}; @@ -34,7 +39,8 @@ const StyledHeading = styled.h1<HeadingProps>` margin-right: ${props => props.isCentered && 'auto'}; margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; - font-weight: ${props => ['h4'].includes(props.asElement) ? 400 : 300}; + font-weight: ${props => props.fontWeight ? props.fontWeight : (['h4'].includes(props.asElement) ? 400 : 300)}; + width: ${props => props.isFlex && `100%`}; `; export const Heading: React.StatelessComponent<HeadingProps> = props => { |