Andreas Reinhold / reiniandClaude Opus 5
c2fe64e00d
<x-textarea> marks its field root data-md-textarea, and what a <textarea> changes in the field — the grip in the corner, the label on the first line, autogrow between rows and max-rows, the filled offsets — moves from field.css to components/textarea.css (plan step 36). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
64 lines
3.4 KiB
CSS
64 lines
3.4 KiB
CSS
/*
|
|
* <x-textarea>: the text field grown to several lines (resources/views/components/textarea.blade.php).
|
|
*
|
|
* The chrome is the field's (components/field.css); this file is what a <textarea> changes in it.
|
|
* The browser's resize grip belongs in the field's corner, so the textarea reaches to just inside
|
|
* the outline's end and bottom and its padding puts the text back. Its label rests on the first
|
|
* line rather than in the middle of the box. With `data-md-autogrow` it grows with its text from
|
|
* `--field-rows` lines to `--field-max-rows` (both set inline by the view) through
|
|
* `field-sizing: content`, and resources/js/field.js sets the height where the browser cannot.
|
|
* A line is body-large's 1.5rem, so the row arithmetic stays in rem with the text.
|
|
*
|
|
* The field's root carries `data-md-textarea`.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './field.css';
|
|
|
|
@layer material.components {
|
|
/* The browser draws the resize grip in the textarea's own corner, so the
|
|
textarea reaches to just inside the outline's end and bottom — the grip sits
|
|
in the field's corner, not on the bottom outline a padding in from it — and
|
|
its padding puts the text back where it was. */
|
|
textarea[data-md-field-control] {
|
|
--field-grip: var(--md-sys-measurement-space50);
|
|
|
|
/* The first half-line of the top offset is a margin, not padding: text scrolled up in a full
|
|
textarea disappears under the edge instead of running through the label. */
|
|
--textarea-clear: var(--md-sys-measurement-space100);
|
|
--textarea-pad-top: calc((var(--field-height) - 1.5rem) / 2 - var(--textarea-clear));
|
|
--textarea-pad-bottom: calc((var(--field-height) - 1.5rem) / 2 - var(--field-grip));
|
|
|
|
margin-block: var(--textarea-clear) var(--field-grip);
|
|
margin-inline-end: calc(var(--field-grip) - var(--field-pad));
|
|
padding-block: var(--textarea-pad-top) var(--textarea-pad-bottom);
|
|
padding-inline-end: calc(var(--field-pad) - var(--field-grip));
|
|
resize: vertical;
|
|
}
|
|
|
|
/* `<x-textarea>` grows with what is typed, from `rows` lines up to `max-rows`. Where the browser
|
|
cannot size a field to its content, resources/js/field.js sets the height instead. */
|
|
textarea[data-md-field-control][data-md-autogrow] {
|
|
field-sizing: content;
|
|
min-block-size: calc(var(--field-rows, 3) * 1.5rem + var(--textarea-pad-top) + var(--textarea-pad-bottom));
|
|
max-block-size: calc(var(--field-max-rows, 1000) * 1.5rem + var(--textarea-pad-top) + var(--textarea-pad-bottom));
|
|
resize: none;
|
|
}
|
|
|
|
/* A textarea's label rests on its first line, not in the middle of the box. */
|
|
[data-md-field]:not([data-md-floated]):has([data-md-field-label]):has(textarea[data-md-field-control]:placeholder-shown):not(:focus-within) [data-md-field-label] {
|
|
top: calc(var(--field-height) / 2);
|
|
}
|
|
|
|
/* Filled, the label floats inside the box: the text starts under it, 24px down, and the
|
|
bottom keeps the field's 8px. */
|
|
[data-md-field][data-md-variant='filled']:has([data-md-field-label]) textarea[data-md-field-control] {
|
|
--textarea-clear: var(--md-sys-measurement-space300);
|
|
--textarea-pad-top: 0px;
|
|
--textarea-pad-bottom: calc(var(--md-sys-measurement-space100) - var(--field-grip));
|
|
|
|
padding-block: var(--textarea-pad-top) var(--textarea-pad-bottom);
|
|
}
|
|
}
|