Every field takes the boxes' radius
Inputs, selects and file inputs follow the textareas: --radius-box (.75rem) instead of daisyUI's --radius-field (2rem), which stays the buttons', so a pill is something to press and a field is a box to fill. The reason sits once above the input utility; a rounded-* class at the call site still wins (the composer's warning field keeps its joined corners). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
1 parent
b7ff917d8c
commit
88e55e671c
1 file changed
+12
-4
+12
-4
@@ -119,8 +119,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Text fields: a pressed well, darker while focused, with no focus ring and no border unless a colour or a failed
|
/* Text fields: a pressed well, darker while focused, with no focus ring and no border unless a colour or a failed
|
||||||
validation asks for one. */
|
validation asks for one.
|
||||||
|
|
||||||
|
Fields (input, select, file-input, textarea) take the boxes' radius (--radius-box, .75rem). daisyUI gives them
|
||||||
|
--radius-field (2rem), which stays the buttons': a pill on a one-line field, and on a textarea a curve that ate into
|
||||||
|
its first and last lines. daisyUI reads the variable, so a rounded-* class at the call site (the composer's) still
|
||||||
|
wins. */
|
||||||
@utility input {
|
@utility input {
|
||||||
|
--radius-field: var(--radius-box);
|
||||||
|
|
||||||
&:not(:where(.input-ghost)) {
|
&:not(:where(.input-ghost)) {
|
||||||
background-color: var(--color-base-100);
|
background-color: var(--color-base-100);
|
||||||
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
|
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
|
||||||
@@ -141,6 +148,8 @@
|
|||||||
|
|
||||||
/* daisyUI draws the select's arrow with background-image, so the well here is the background colour alone. */
|
/* daisyUI draws the select's arrow with background-image, so the well here is the background colour alone. */
|
||||||
@utility select {
|
@utility select {
|
||||||
|
--radius-field: var(--radius-box);
|
||||||
|
|
||||||
&:not(:where(.select-ghost)) {
|
&:not(:where(.select-ghost)) {
|
||||||
background-color: var(--color-base-100);
|
background-color: var(--color-base-100);
|
||||||
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
|
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
|
||||||
@@ -168,9 +177,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* A field's radius (--radius-field, 2rem) makes a pill of a one-line input, but on a box several lines tall it curves
|
|
||||||
into the first and last lines: a textarea takes the boxes' radius. daisyUI reads the variable, so a rounded-* class
|
|
||||||
at the call site (the composer's) still wins. */
|
|
||||||
@utility textarea {
|
@utility textarea {
|
||||||
--radius-field: var(--radius-box);
|
--radius-field: var(--radius-box);
|
||||||
|
|
||||||
@@ -193,6 +199,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@utility file-input {
|
@utility file-input {
|
||||||
|
--radius-field: var(--radius-box);
|
||||||
|
|
||||||
&:not(:where(.file-input-ghost)) {
|
&:not(:where(.file-input-ghost)) {
|
||||||
background-color: var(--color-base-100);
|
background-color: var(--color-base-100);
|
||||||
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
|
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
|
||||||
|
|||||||
Reference in new issue
Block a user