mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2026-03-21 22:56:47 +00:00
0931095f49
* Upgrade docs deps * Upgrade frontend to latest deps * Update package overrides * Remove redundant deps * Add tailwind postcss plugin * Replace language select with chakra * Fix main nav * Patch gray matter * Fix webpack override * Replace python-jose with pyjwt * Override kv url for frontend in compose * Upgrade hatchet sdk * Update docs * Supress pydantic warnings
75 lines
1.7 KiB
SCSS
75 lines
1.7 KiB
SCSS
/* Form fields on primary (blue) card – white inputs like previous react-select */
|
||
.form-on-primary {
|
||
--form-bg: #fff;
|
||
--form-border: #dce0e8;
|
||
--form-focus-border: #1e66f5;
|
||
--form-text: #000;
|
||
--form-placeholder: #6c6f85;
|
||
--form-option-bg: #fff;
|
||
--form-option-hover: #eff1f5;
|
||
--form-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
--form-radius: 0.5rem; /* 8px, matches rounded-lg elsewhere */
|
||
}
|
||
|
||
.form-on-primary .form-field-input,
|
||
.form-on-primary .form-field-select,
|
||
.form-on-primary .form-field-search-input {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: var(--form-radius);
|
||
border: 1px solid var(--form-border);
|
||
background-color: var(--form-bg);
|
||
color: var(--form-text);
|
||
font-size: 0.9375rem;
|
||
outline: none;
|
||
cursor: pointer;
|
||
|
||
&::placeholder {
|
||
color: var(--form-placeholder);
|
||
}
|
||
|
||
&:focus {
|
||
border-color: var(--form-focus-border);
|
||
}
|
||
}
|
||
|
||
.form-on-primary .form-field-select option {
|
||
background: var(--form-option-bg);
|
||
color: var(--form-text);
|
||
}
|
||
|
||
/* Chakra Combobox inside form-on-primary: white input + dropdown, dark text */
|
||
.form-on-primary .form-combobox {
|
||
width: 100%;
|
||
|
||
[data-part="control"],
|
||
& input {
|
||
border-radius: var(--form-radius);
|
||
border-color: var(--form-border);
|
||
background-color: var(--form-bg);
|
||
color: var(--form-text);
|
||
|
||
&:focus,
|
||
&[data-focus] {
|
||
border-color: var(--form-focus-border);
|
||
}
|
||
}
|
||
|
||
[data-part="content"] {
|
||
border-radius: var(--form-radius);
|
||
border: 1px solid var(--form-border);
|
||
background: var(--form-bg);
|
||
box-shadow: var(--form-dropdown-shadow);
|
||
color: var(--form-text);
|
||
}
|
||
|
||
[data-part="item"] {
|
||
color: var(--form-text);
|
||
|
||
&:hover {
|
||
background: var(--form-option-hover);
|
||
}
|
||
}
|
||
}
|