/* ========================================================================== Techmin form controls light: Figma node 11:6411 · dark: Figma node 11:7251 ("Input Types") Bootstrap 5.3 gives buttons, pagination and breadcrumbs a `--bs-*-*` API, but NOT form controls: `.form-control` reads the global `--bs-body-bg`, `--bs-border-color` and `--bs-border-radius`, which belong to the whole interface and must not be repainted for the sake of inputs. So this file writes real declarations instead of a token API, on plain one-class selectors of the same (0,1,0) weight as `bootstrap.min.css` and `bootstrap-extended.css` — it wins on load order alone. Load it LAST in ; do not move it up and do not add `!important`. No `[data-bs-theme] body` prefix is needed here (unlike the sidebar and the header): `dark-theme.css` carries no `.form-control` / `.form-select` rules. Its only form rules were `input::placeholder { color: #fff !important }` (and `#000`/`opacity:.3` in `main.css`) — both removed from the sass files, because an `!important` on a bare `input` selector cannot be beaten without another `!important`. Do not bring them back; placeholders live below. ========================================================================== */ /* --- Light theme --- */ :root { --fc-bg: #fff; --fc-border: rgba(0, 0, 0, .2); --fc-text: #000; --fc-placeholder: rgba(0, 0, 0, .75); --fc-disabled-bg: #e5e5e5; --fc-addon-bg: #e5e5e5; --fc-accent: #007aff; --fc-focus-ring: rgba(0, 122, 255, .25); --fc-range-track: #faf4f0; --fc-dark: #0a0a0a; --fc-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='2.5' y='2.5' width='11' height='11' fill='%23000' fill-opacity='.25'/%3e%3c/svg%3e"); --fc-switch-knob-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='2.5' y='2.5' width='11' height='11' fill='%23fff'/%3e%3c/svg%3e"); /* Bootstrap reads these for `.is-invalid` / `.is-valid` and the feedback text. Point them at the palette the button template already defines. */ --bs-form-invalid-color: #d03f3f; --bs-form-invalid-border-color: #d03f3f; --bs-form-valid-color: #47ad77; --bs-form-valid-border-color: #47ad77; } /* --- Dark theme --- Same weight as bootstrap's own `[data-bs-theme=dark]` block, later in the cascade, so it takes the validation colours back. */ [data-bs-theme="dark"] { --fc-bg: #0a0a0a; --fc-border: #262626; --fc-text: #e5e5e5; --fc-placeholder: #d4d4d4; --fc-disabled-bg: #171717; --fc-addon-bg: #171717; --fc-accent: #007aff; --fc-focus-ring: rgba(0, 122, 255, .25); --fc-range-track: #171717; --fc-dark: #fafaf9; --fc-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='2.5' y='2.5' width='11' height='11' fill='%23fff' fill-opacity='.25'/%3e%3c/svg%3e"); --fc-switch-knob-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='2.5' y='2.5' width='11' height='11' fill='%23fff'/%3e%3c/svg%3e"); --bs-form-invalid-color: #d03f3f; --bs-form-invalid-border-color: #d03f3f; --bs-form-valid-color: #47ad77; --bs-form-valid-border-color: #47ad77; } /* -------------------------------------------------------------------------- Label Poppins SemiBold 14px/21px in the mockup — the one place in the form where the weight is not 400. 8px down to the control (Bootstrap's own default). -------------------------------------------------------------------------- */ .form-label { margin-bottom: 8px; font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--fc-text); } /* -------------------------------------------------------------------------- The control Row 37.4px = 21px (14px x 1.5) + 2x7.2px padding + 2x1px border — exactly the button geometry, so an input and a button in the same input-group line up. Square corners, Poppins 400. The mockup draws the text inputs 35.38px and the select 37.38px. Both carry the same padding, border and type; the 2px gap is the browser's own `line-height: normal` on `` in the render the mockup was traced from, not a design decision — reproducing it would stagger every input sitting next to a select or a button. So 37.4px it is, for both. -------------------------------------------------------------------------- */ .form-control, .form-select { padding: 7.2px 14.4px; font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--fc-text); background-color: var(--fc-bg); border: 1px solid var(--fc-border); border-radius: 0; } /* The mockup gives no focus state, and one is not optional on an input. The least invented thing available is the palette's own accent — the same #007aff that marks the active tab, the active page and the open menu item. */ .form-control:focus, .form-select:focus { color: var(--fc-text); background-color: var(--fc-bg); border-color: var(--fc-accent); outline: 0; box-shadow: 0 0 0 .25rem var(--fc-focus-ring); } /* Placeholders are not `--bs-secondary-color` here: the mockup puts them at rgba(0,0,0,.75) / #d4d4d4, the same value the breadcrumb and the tab list use for their non-active text. */ .form-control::-moz-placeholder { color: var(--fc-placeholder); opacity: 1; } .form-control::placeholder { color: var(--fc-placeholder); opacity: 1; } /* Readonly is drawn exactly like a normal field in the mockup (white, full contrast) — that is already Bootstrap's behaviour, so only disabled moves. */ .form-control:disabled, .form-select:disabled { color: var(--fc-text); background-color: var(--fc-disabled-bg); opacity: 1; } /* -------------------------------------------------------------------------- Select Caret 14.4px in from the right edge, text stopping 43.2px short of it. The glyph itself is left to Bootstrap's own `--bs-form-select-bg-img` (dark theme swaps it at (0,2,0)), which is the same caret `tables-techmin.css` already scopes into the DataTables length select. -------------------------------------------------------------------------- */ .form-select { padding-right: 43.2px; background-position: right 14.4px center; } /* A sized or multiple select shows no caret, so it gets its padding back. */ .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 14.4px; background-image: none; } /* -------------------------------------------------------------------------- Static control and helping text -------------------------------------------------------------------------- */ .form-control-plaintext { padding: 8.2px 0; font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 1.5; color: var(--fc-text); } /* The mockup sets help text at full contrast, not at Bootstrap's muted grey. */ .form-text { margin-top: 4px; font-family: Poppins, "Noto Sans", sans-serif; font-size: 12px; line-height: 18px; color: var(--fc-text); } /* -------------------------------------------------------------------------- Sizes Not drawn in the mockup. Taken from the button template so that a `-sm` input and a `-sm` button are the same height (31.34px / 47.25px). -------------------------------------------------------------------------- */ .form-control-sm, .form-select-sm { padding: 4.47px 12.8px; font-size: 13.6px; border-radius: 0; } .form-select-sm { padding-right: 40px; background-position: right 12.8px center; } .form-control-lg, .form-select-lg { padding: 8px 16px; font-size: 19.5px; border-radius: 0; } .form-select-lg { padding-right: 48px; background-position: right 16px center; } /* `.form-control-plaintext` has no box, so it keeps no side padding. */ .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } /* -------------------------------------------------------------------------- File input The mockup draws the button as a filled cell with a 1px rule between it and the file name: fill #e5e5e5 / #171717, 14.4px of air on each side, then 14.4px before "No file chosen". -------------------------------------------------------------------------- */ .form-control::-webkit-file-upload-button { padding: 7.2px 14.4px; margin: -7.2px -14.4px; margin-inline-end: 14.4px; font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 1.5; color: var(--fc-text); background-color: var(--fc-addon-bg); border: 0 solid var(--fc-border); border-inline-end-width: 1px; border-radius: 0; } .form-control::file-selector-button { padding: 7.2px 14.4px; margin: -7.2px -14.4px; margin-inline-end: 14.4px; font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 1.5; color: var(--fc-text); background-color: var(--fc-addon-bg); border: 0 solid var(--fc-border); border-inline-end-width: 1px; border-radius: 0; } /* -------------------------------------------------------------------------- Input group The "Show/Hide Password" row in the mockup: the addon is a filled cell, not a transparent one. `bootstrap-extended.css` sets it transparent at the same (0,1,0) weight — this wins on order. -------------------------------------------------------------------------- */ .input-group-text { padding: 7.2px 14.4px; font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--fc-text); background-color: var(--fc-addon-bg); border: 1px solid var(--fc-border); border-radius: 0; } /* -------------------------------------------------------------------------- Range Track 8px on the working-area colour (the mockup's #faf4f0 / #171717 are the header tokens), square, with a 16px accent thumb hanging 4px above it. -------------------------------------------------------------------------- */ .form-range::-webkit-slider-runnable-track { background-color: var(--fc-range-track); border-radius: 0; } .form-range::-moz-range-track { background-color: var(--fc-range-track); border-radius: 0; } .form-range::-webkit-slider-thumb { background-color: var(--fc-accent); } .form-range::-moz-range-thumb { background-color: var(--fc-accent); } /* -------------------------------------------------------------------------- Colour picker The mockup's colour row is a render artefact (full width, 25px tall, padding clipped), so only the square corners are taken from it; the box itself keeps Bootstrap's sizing. -------------------------------------------------------------------------- */ .form-control-color { padding: 4px; } .form-control-color::-webkit-color-swatch { border-radius: 0; } .form-control-color::-moz-color-swatch { border-radius: 0; } /* ========================================================================== Checkboxes, radios and switches light: Figma nodes 11:6750 (checkboxes) · 11:6841 (radios) · 11:6727 (switches) dark: Figma nodes 11:7595 · 11:7686 · 11:7572 The box is 15.88px, square for a checkbox and round for a radio, centred on the 21px line (2.56px = (21 - 15.88) / 2) with 7px of air before the label — so the control column is 22.88px wide. Both checked glyphs were compared against Bootstrap's own: the checkmark (`m6 10 3 3 6-6` at stroke-width 3 in a 20-wide box) and the radio dot (r = a quarter of the box) are the very same shapes at the very same proportions, so they are left alone. Only the switch knob differs — see below. ========================================================================== */ .form-check { min-height: 21px; padding-left: 22.88px; margin-bottom: 0; } .form-check-inline { margin-right: 19.75px; } .form-check-input { width: 15.88px; height: 15.88px; margin-top: 2.56px; background-color: var(--fc-bg); border: 1px solid var(--fc-border); } /* Bootstrap puts the control's offset on `.form-check .form-check-input` (0,2,0) and its corners on `.form-check-input[type=checkbox]` (0,1,1), both above a bare `.form-check-input` — so these two have to be matched, not folded into the rule above. */ .form-check .form-check-input { margin-left: -22.88px; } .form-check-input[type="checkbox"] { border-radius: 0; } .form-check-input[type="radio"] { border-radius: 50%; } .form-check-input:checked { background-color: var(--fc-accent); border-color: var(--fc-accent); } /* The mockup draws no focus state here either; same reasoning as the text inputs above — the palette's own accent, nothing invented. */ .form-check-input:focus { border-color: var(--fc-accent); outline: 0; box-shadow: 0 0 0 .25rem var(--fc-focus-ring); } /* Disabled is `opacity: .5` on both the box and the label in the mockup, which is already exactly what Bootstrap does — nothing to add. */ .form-check-label { font-family: Poppins, "Noto Sans", sans-serif; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--fc-text); } /* -------------------------------------------------------------------------- Switch A 30 x 17.88 track, square like everything else in this template, with a 13.88 knob inset 1px inside it. The knob image below is authored to land on exactly that geometry under Bootstrap's `background-size: contain`: in a 16-wide box the square runs 2.5 → 13.5, which over the track's 15.88px content height is a 10.9px square 2.5px in from the edge — the mockup's 1px of padding plus the 1.5px the exported asset carries inside its own box. The mockup's dark knob is a *circle* while its light knob is a square. That is Bootstrap's untouched `[data-bs-theme=dark] .form-switch .form-check-input` rule showing through, not a second design: the template overrode the light image and left the dark one alone. Reproducing it would give the two themes different switches, so the square is used in both and the dark rule below is written at the same (0,4,0) weight as Bootstrap's in order to take it back. -------------------------------------------------------------------------- */ .form-switch { padding-left: 36px; } .form-switch .form-check-input { --bs-form-switch-bg: var(--fc-switch-knob); width: 30px; height: 17.88px; margin-top: 1.56px; margin-left: -36px; border-radius: 0; } [data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: var(--fc-switch-knob); } /* Bootstrap turns the knob light blue on focus; the mockup has no focus state, and the ring above is already the signal, so the knob keeps its colour. */ .form-switch .form-check-input:focus { --bs-form-switch-bg: var(--fc-switch-knob); } /* A checked switch is not drawn in the mockup — the two examples are both off. Taken from the checked checkbox: accent track, white knob. */ .form-switch .form-check-input:checked { --bs-form-switch-bg: var(--fc-switch-knob-on); background-position: right center; } /* -------------------------------------------------------------------------- Colour variants The mockup's "Colors" rows are the same palette the button template uses. `bootstrap-extended.css` already defines these classes with Bootstrap's own greens and reds at (0,3,0) — repainted here at the same weight, later in the cascade. None of them is used in the CRM markup yet. `dark` is the one that swaps between themes, exactly as `.btn-dark` does. -------------------------------------------------------------------------- */ .form-check-success .form-check-input:checked, .form-check-success .form-check-input[type="checkbox"]:indeterminate { background-color: #47ad77; border-color: #47ad77; } .form-check-success .form-check-input:focus { border-color: #47ad77; box-shadow: 0 0 0 .25rem rgba(71, 173, 119, .25); } .form-check-danger .form-check-input:checked, .form-check-danger .form-check-input[type="checkbox"]:indeterminate { background-color: #d03f3f; border-color: #d03f3f; } .form-check-danger .form-check-input:focus { border-color: #d03f3f; box-shadow: 0 0 0 .25rem rgba(208, 63, 63, .25); } .form-check-warning .form-check-input:checked, .form-check-warning .form-check-input[type="checkbox"]:indeterminate { background-color: #edc755; border-color: #edc755; } .form-check-warning .form-check-input:focus { border-color: #edc755; box-shadow: 0 0 0 .25rem rgba(237, 199, 85, .25); } .form-check-info .form-check-input:checked, .form-check-info .form-check-input[type="checkbox"]:indeterminate { background-color: #33b0e0; border-color: #33b0e0; } .form-check-info .form-check-input:focus { border-color: #33b0e0; box-shadow: 0 0 0 .25rem rgba(51, 176, 224, .25); } .form-check-secondary .form-check-input:checked, .form-check-secondary .form-check-input[type="checkbox"]:indeterminate { background-color: #737373; border-color: #737373; } .form-check-secondary .form-check-input:focus { border-color: #737373; box-shadow: 0 0 0 .25rem rgba(115, 115, 115, .25); } .form-check-dark .form-check-input:checked, .form-check-dark .form-check-input[type="checkbox"]:indeterminate { background-color: var(--fc-dark); border-color: var(--fc-dark); } .form-check-dark .form-check-input:focus { border-color: var(--fc-dark); box-shadow: 0 0 0 .25rem rgba(115, 115, 115, .25); }