@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
240 lines (208 loc) • 7.29 kB
CSS
.rt-TextAreaRoot {
display: flex;
flex-direction: column;
box-sizing: border-box;
font-family: var(--default-font-family);
font-weight: var(--font-weight-regular);
font-style: normal;
text-align: start;
/* Allows the `resize` property to work on the div */
overflow: hidden;
&:where(:focus-within) {
outline: 2px solid var(--focus-8);
outline-offset: -1px;
}
}
.rt-TextAreaInput {
border-radius: inherit;
resize: none;
display: block;
width: 100%;
flex-grow: 1;
/* scrollbar */
& {
/* Arrow mouse cursor over the scrollbar */
cursor: auto;
}
&::-webkit-scrollbar {
width: var(--space-3);
height: var(--space-3);
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb {
background-clip: content-box;
border: var(--space-1) solid transparent;
border-radius: var(--space-3);
}
&::-webkit-scrollbar-track {
background-color: var(--gray-a3);
}
&::-webkit-scrollbar-thumb {
background-color: var(--gray-a8);
}
@media (hover: hover) {
:where(&:not(:disabled))::-webkit-scrollbar-thumb:hover {
background-color: var(--gray-a9);
}
}
&:where(:autofill, [data-com-onepassword-filled]) {
/* Reliably removes native autofill colors */
background-clip: text;
-webkit-text-fill-color: var(--gray-12);
}
}
/***************************************************************************************************
* *
* SIZES *
* *
***************************************************************************************************/
.rt-TextAreaRoot {
box-sizing: border-box;
padding: var(--text-area-border-width);
}
.rt-TextAreaInput {
padding: var(--text-area-padding-y) var(--text-area-padding-x);
}
@breakpoints {
.rt-TextAreaRoot {
&:where(.rt-r-size-1) {
min-height: var(--space-8);
border-radius: var(--radius-2);
& :where(.rt-TextAreaInput) {
/* Clip text to border */
--text-area-padding-y: calc(var(--space-1) - var(--text-area-border-width));
--text-area-padding-x: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
font-size: var(--font-size-1);
line-height: var(--line-height-1);
letter-spacing: var(--letter-spacing-1);
}
}
&:where(.rt-r-size-2) {
min-height: var(--space-9);
border-radius: var(--radius-2);
& :where(.rt-TextAreaInput) {
/* Clip text to border */
--text-area-padding-y: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
--text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
font-size: var(--font-size-2);
line-height: var(--line-height-2);
letter-spacing: var(--letter-spacing-2);
}
}
&:where(.rt-r-size-3) {
min-height: 80px;
border-radius: var(--radius-3);
& :where(.rt-TextAreaInput) {
/* Clip text to border */
--text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
--text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
font-size: var(--font-size-3);
line-height: var(--line-height-3);
letter-spacing: var(--letter-spacing-3);
}
}
}
}
/***************************************************************************************************
* *
* VARIANTS *
* *
***************************************************************************************************/
/* surface */
.rt-TextAreaRoot:where(.rt-variant-surface) {
--text-area-border-width: 1px;
/* Blend inner shadow with page background */
background-clip: content-box;
background-color: var(--color-surface);
box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a7);
color: var(--gray-12);
& :where(.rt-TextAreaInput) {
&::placeholder {
color: var(--gray-a10);
}
}
/* prettier-ignore */
&:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
/* Blend with focus color */
background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
box-shadow: inset 0 0 0 1px var(--focus-a5), inset 0 0 0 1px var(--gray-a5);
}
&:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
/* Blend with grey */
background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
}
}
/* classic */
.rt-TextAreaRoot:where(.rt-variant-classic) {
--text-area-border-width: 1px;
/* Blend inner shadow with page background */
background-clip: content-box;
background-color: var(--color-surface);
box-shadow: var(--shadow-1);
color: var(--gray-12);
& :where(.rt-TextAreaInput) {
&::placeholder {
color: var(--gray-a10);
}
}
/* prettier-ignore */
&:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
/* Blend with focus color */
background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
box-shadow: inset 0 0 0 1px var(--focus-a5), inset 0 0 0 1px var(--gray-a5);
}
&:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
/* Blend with grey */
background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
}
}
/* soft */
.rt-TextAreaRoot:where(.rt-variant-soft) {
--text-area-border-width: 0px;
background-color: var(--accent-a3);
color: var(--accent-12);
& :where(.rt-TextAreaInput) {
&::selection {
/* Use gray selection when component color is gray */
background-color: var(--accent-a5);
}
&::placeholder {
color: var(--accent-12);
opacity: 0.65;
}
}
&:where(:focus-within) {
/* Use gray outline when component color is gray */
outline-color: var(--accent-8);
}
/* prettier-ignore */
&:where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
/* Use gray autofill color when component color is gray */
box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
}
&:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
background-color: var(--gray-a3);
}
}
/* all disabled and read-only text-areas */
.rt-TextAreaInput {
&:where(:disabled, :read-only) {
cursor: text;
color: var(--gray-a11);
/* Safari */
-webkit-text-fill-color: var(--gray-a11);
&::placeholder {
opacity: 0.5;
}
&:where(:placeholder-shown) {
cursor: var(--cursor-disabled);
}
&::selection {
background-color: var(--gray-a5);
}
.rt-TextAreaRoot:where(:focus-within:has(&)) {
outline-color: var(--gray-8);
}
}
}