Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 1x 6x 1x 6x 6x 6x 6x 1x 6x 1x 1x 1x | // @flow
/* eslint-disable no-ternary, no-nested-ternary */
import styled, { type StyledComponent } from "styled-components"
import type { Theme } from "@bluframe/blublocks"
export const TextAreaWrapper: StyledComponent<
{ $isExpanded?: boolean },
Theme,
HTMLDivElement
> = styled.div`
display: flex;
flex-direction: column;
row-gap: 4px;
position: relative;
${({ $isExpanded }: { $isExpanded?: boolean }) =>
$isExpanded ? "width: 100%;" : ""}
`
export const TextAreaInput: StyledComponent<
{ disabled?: boolean, $error?: boolean, $success?: boolean },
Theme,
HTMLTextAreaElement
> = styled.textarea`
background: ${({ theme }: { theme: Theme }) => theme.palette.text.contrast};
border: 0;
border-bottom: 1px solid
${({
$error,
$success,
theme
}: {
$error?: boolean,
$success?: boolean,
theme: Theme
}) =>
$error
? theme.palette.error.main
: $success
? theme.palette.success.main
: theme.colors.gray.light};
border-radius: 4px;
box-shadow: none;
color: ${({ disabled, theme }: { disabled?: boolean, theme: Theme }) =>
disabled ? theme.palette.text.light : theme.palette.text.main};
padding: 34px 16px 0;
resize: none;
width: 100%;
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none;
scrollbar-width: none;
&:focus {
border: 0;
border-bottom: 1px solid
${({ theme }: { theme: Theme }) => theme.palette.primary.main};
box-shadow: none;
}
:not(:placeholder-shown) + label,
&:focus + label {
font-size: 14px;
left: 16px;
top: 6px;
}
`
export const Label: StyledComponent<
{||},
Theme,
HTMLLabelElement
> = styled.label`
color: ${({ theme }: { theme: Theme }) => theme.palette.text.light};
font-size: 16px;
left: 16px;
pointer-events: none;
position: absolute;
top: 6px;
transition: all 200ms;
`
export const ErrorText: StyledComponent<
{||},
Theme,
HTMLDivElement
> = styled.div`
color: ${({ theme }: { theme: Theme }) => theme.palette.error.main};
font-size: 12px;
`
export const InfoText: StyledComponent<
{||},
Theme,
HTMLDivElement
> = styled.div`
color: ${({ theme }: { theme: Theme }) => theme.palette.info.main};
font-size: 12px;
`
export const SuccessText: StyledComponent<
{||},
Theme,
HTMLDivElement
> = styled.div`
color: ${({ theme }: { theme: Theme }) => theme.palette.success.main};
font-size: 12px;
`
|