/* * Applicant answers shown in capitals. * * The register is stored in capitals from the moment this institution turned * the setting on, but everything entered before that — and everything migrated * from the old system — is still in whatever case it was typed. A list that * mixes AHMAD BIN ALI with "Mohamad Izzat Bin Ismail" reads as two different * systems, so the panels that show what a family wrote are drawn in capitals * whatever the stored value happens to be. * * Display only: the underlying record is untouched, and an export or a letter * still carries exactly what was stored. */ .data-caps { text-transform: uppercase; } /* * The interface's own words are not the applicant's answers, and shouting them * makes a page harder to read rather than more consistent. Everything a person * reads to find their way — headings, field captions, buttons, links, menus, * table headers, form controls and help text — keeps the case it was written in. * * Two more exceptions worth naming: an email address is a string other systems * have to match, and rich-text content is a document somebody composed, where * the capitals are the author's decision. * * A value that must shout inside one of these — a name rendered as a link, say — * carries `data-caps` on its own element, which beats what it inherits. * * Scoped to pages that have NOT asked for capitals throughout. "Display all * text in capitals" promises every page — headings, captions, the lot — but * these exclusions are two classes deep and the rules that keep that promise * are one class and two elements deep, so the exclusions were winning on * specificity and silently cancelling the setting wherever the two met. Which * was everywhere that shows a stored answer: the status page, the admin panel, * the applicant's own copy. */ body:not(.caps-labels) .data-caps h1, body:not(.caps-labels) .data-caps h2, body:not(.caps-labels) .data-caps h3, body:not(.caps-labels) .data-caps h4, body:not(.caps-labels) .data-caps h5, body:not(.caps-labels) .data-caps h6, body:not(.caps-labels) .data-caps label, body:not(.caps-labels) .data-caps th, body:not(.caps-labels) .data-caps button, body:not(.caps-labels) .data-caps a, body:not(.caps-labels) .data-caps nav, body:not(.caps-labels) .data-caps input, body:not(.caps-labels) .data-caps select, body:not(.caps-labels) .data-caps option, body:not(.caps-labels) .data-caps textarea, body:not(.caps-labels) .data-caps .text-gray-500, body:not(.caps-labels) .data-caps .text-gray-400, body:not(.caps-labels) .data-caps .text-gray-300, body:not(.caps-labels) .data-caps .text-xs, body:not(.caps-labels) .data-caps .rich-content, body:not(.caps-labels) .data-caps .ql-editor, body:not(.caps-labels) .data-caps .keep-case { text-transform: none; } /* Explicitly marked wins over every exclusion above — a name inside a link. */ .data-caps .data-caps, .data-caps [class*="data-caps"] { text-transform: uppercase; } /* * The interface in capitals. * * Deliberately a separate switch from the one above: that shouts what the * family wrote, this shouts the system's own words. An institution whose paper * borang is set in capitals throughout wants the screen to match it, so the * choice is offered — off unless asked for, because capitals remove the word * shapes a reader skims by. * * It used to reach captions and dropdowns only, which produced pages that * shouted half of themselves: an uppercase field label above a sentence-case * heading, an uppercase dropdown beside a sentence-case button. Applied to the * whole page instead, so "uppercase" means what it says. * * `text-transform` inherits, so the body rule alone would do it — the elements * below are named because Tailwind sets `text-transform` on some of them * (`normal-case`, `capitalize`) and an inherited value does not beat a set one. */ body.caps-labels, body.caps-labels h1, body.caps-labels h2, body.caps-labels h3, body.caps-labels h4, body.caps-labels h5, body.caps-labels h6, body.caps-labels p, body.caps-labels span, body.caps-labels div, body.caps-labels li, body.caps-labels td, body.caps-labels th, body.caps-labels label, body.caps-labels legend, body.caps-labels a, body.caps-labels button, body.caps-labels summary, body.caps-labels select, body.caps-labels option, body.caps-labels optgroup, body.caps-labels .ss-button, body.caps-labels .ss-option, body.caps-labels .caps-label, body.caps-labels .wizard-step-label, body.caps-labels .form-section-title { text-transform: uppercase; } /* * The records too, whatever case they were stored in. * * "Display all text in capitals" has to mean the values as well as the words * around them: a page that shouts FULL NAME above "ahmad bin ali" has not done * what the setting says. Boxes holding a stored value are the same text as the * panel beside them, so they follow. * * This is display only. `text-transform` never changes what is submitted or * stored — whether the register itself is kept in capitals is the other * setting's business. */ body.caps-labels input, body.caps-labels textarea, body.caps-labels ::placeholder { text-transform: uppercase; } /* * Never. * * An address other systems have to match, and a password where case *is* the * value. A document somebody composed, where the capitals are the author's * decision. Anything marked `keep-case` — a code whose case is the thing that * makes it match. And the search box inside a dropdown, which is a live filter * rather than a record. */ body.caps-labels input[type="email"], body.caps-labels input[type="password"], body.caps-labels input[type="url"], body.caps-labels input[type="color"], body.caps-labels input[type="file"], body.caps-labels .ss-search, body.caps-labels .keep-case, body.caps-labels .keep-case *, body.caps-labels .rich-content, body.caps-labels .rich-content *, body.caps-labels .ql-editor, body.caps-labels .ql-editor *, body.caps-labels code, body.caps-labels pre, body.caps-labels a[href^="mailto:"] { text-transform: none; } /* An input the institution wants shouted says so for itself — see the * `uppercase` flag on form-field — and that must still win here. */ body.caps-labels input[style*="uppercase"], body.caps-labels textarea[style*="uppercase"] { text-transform: uppercase; }