@chayns-components/core/lib/esm/components/text-area/TextArea.styles.js

A set of beautiful React components for developing your own applications with chayns.

import styled, { css } from 'styled-components';
export const StyledTextArea = styled.div`
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    opacity: ${_ref => {
  let {
    $isDisabled
  } = _ref;
  return $isDisabled ? 0.5 : 1;
}};
    position: relative;
`;
export const StyledTextAreaContentWrapper = styled.div`
    background-color: ${_ref2 => {
  let {
    theme,
    $shouldChangeColor
  } = _ref2;
  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
}};
    border-radius: 3px;
    border: 1px solid
        ${_ref3 => {
  let {
    theme,
    $isInvalid
  } = _ref3;
  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
}};
    width: 100%;
    display: flex;
`;
export const StyledTextAreaContent = styled.div`
    position: relative;
    display: flex;
    width: 100%;
`;
export const StyledTextAreaInput = styled.textarea`
    color: ${_ref4 => {
  let {
    theme,
    $isInvalid
  } = _ref4;
  return $isInvalid ? theme.wrong : theme.text;
}};
    background: none;
    border: none;
    resize: none;
    overflow-y: ${_ref5 => {
  let {
    $isOverflowing
  } = _ref5;
  return $isOverflowing ? 'scroll' : 'hidden';
}};
    max-height: ${_ref6 => {
  let {
    $maxHeight
  } = _ref6;
  return typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight;
}};
    min-height: ${_ref7 => {
  let {
    $minHeight
  } = _ref7;
  return typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight;
}};
    width: 100%;
    padding: 8px 10px;
    cursor: text;

    // Styles for custom scrollbar
    ${_ref8 => {
  let {
    $browser,
    theme
  } = _ref8;
  return $browser === 'firefox' ? css`
                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                  scrollbar-width: thin;
              ` : css`
                  &::-webkit-scrollbar {
                      width: 10px;
                  }

                  &::-webkit-scrollbar-track {
                      background-color: transparent;
                  }

                  &::-webkit-scrollbar-button {
                      background-color: transparent;
                      height: 5px;
                  }

                  &::-webkit-scrollbar-thumb {
                      background-color: rgba(${theme['text-rgb']}, 0.15);
                      border-radius: 20px;
                      background-clip: padding-box;
                      border: solid 3px transparent;
                  }
              `;
}}
`;
export const StyledTextAreaLabelWrapper = styled.label`
    left: 10px;
    top: 12px;
    align-items: baseline;
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    line-height: 1.3;
    pointer-events: none;
    position: absolute;
    user-select: none;
    width: calc(100% - 20px);
    cursor: text;
`;
export const StyledTextAreaLabel = styled.label`
    color: ${_ref9 => {
  let {
    theme,
    $isInvalid
  } = _ref9;
  return $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`;
}};
    line-height: 1.3;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    cursor: text;
    text-overflow: ellipsis;
`;
//# sourceMappingURL=TextArea.styles.js.map