/*
* Plans index -- layout pass to match the formulary-management design
* mockup's PLANS INDEX section. Reuses formularies.css's `.formulary-index` visual
* language wholesale for shared primitives; this file adds only what that mockup
* introduces with no formularies-index equivalent (two-panel filter card, count blocks +
* Show-only pills, Last updated, custom pager). Scoped under `.plan-index` (singular --
* the layout emits `plans`/`plans-index` on for this controller/action, so a
* same-named div class would match through that ancestor instead of scoping to it).
* Colors are the mockup's literal hex, commented with its var name, matching
* formularies.css's convention.
*/
/* Mirrors formularies.css's body.formularies-index rules exactly: LINK's shared
* `.site-contents` wrapper is opaque white, which merged this page's white cards into
* it (no contrast for card borders or the gap between cards). Neutralize it and give
* `.main-content` the mockup's grey ground instead, scoped to this page via the
* controller-name body class -- `.site-contents` backs every other LINK screen and
* must not go transparent globally. */
body.plans-index .main-content {
background-color: #f2f3f6; /* --bg */
}
/* `.main-content` is in the selector purely for specificity -- see formularies.css's
* identical rule for why a bare `body.plans-index .site-contents` alone loses the tie
* against application.css's `body > .main-content > .site-contents`. */
body.plans-index .main-content .site-contents {
background-color: transparent;
padding: 0;
border-radius: 0;
overflow-x: hidden;
}
/* ---- Page header: h1 + top-right "Last updated" ---- */
.plan-index .plans-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.plan-index .plans-last-updated {
text-align: right;
line-height: 1.35;
}
.plan-index .plans-last-updated__label {
display: block;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
color: #6b7183; /* --muted */
}
.plan-index .plans-last-updated__value {
display: block;
font-size: 12.5px;
font-weight: 600;
color: #1c2130; /* --ink */
}
/* ---- Panel (mockup .fsec): filters / network mapping / formulary mapping ---- */
.plan-index .plans-panel {
border: 1px solid #e3e5ec; /* --line */
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
}
.plan-index .plans-panel:last-child {
margin-bottom: 0;
}
.plan-index .plans-panel__label {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .07em;
color: #6b7183; /* --muted */
margin-bottom: 9px;
}
/* ---- Filter label annotations ("· one selected", "· reflects current filters") ---- */
.plan-index .plans-annotation {
font-size: 10px;
color: #7d219c; /* --purple */
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
/* ---- Mapping section bar: counts + its own ID lookup, one row ---- */
.plan-index .plans-mapbar {
display: flex;
gap: 24px;
align-items: flex-end;
flex-wrap: wrap;
}
.plan-index .plans-counts {
display: flex;
gap: 30px;
flex-wrap: wrap;
align-items: flex-end;
}
.plan-index .plans-count {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 11.5px;
color: #6b7183; /* --muted */
}
.plan-index .plans-count__row {
display: flex;
align-items: center;
gap: 8px;
}
.plan-index .plans-count__num {
font-size: 19px;
font-weight: 800;
color: #1c2130; /* --ink -- unique-mapped count: neutral */
line-height: 1;
}
.plan-index .plans-count--ok .plans-count__num {
color: #1c7c40; /* --ok -- "plans with mapped X" */
}
.plan-index .plans-count--bad .plans-count__num {
color: #a41e34; /* --bad -- "plans unmapped" */
}
.plan-index .plans-count__label {
font-weight: 600;
}
/* ---- Show-only pill (mockup .mtgl): a radio_button_tag, visually hidden, plus a
* label styled as a pill -- same accessible pattern the segmented controls above
* already use (visually-hidden input + its label as the visual control), just a
* rounded-pill treatment instead of a segmented-button one. */
.plan-index .plans-pill-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.plan-index .plans-pill {
display: inline-block;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
border: 1px solid #cfd3de;
border-radius: 12px;
padding: 3px 10px;
cursor: pointer;
color: #6b7183; /* --muted */
background: #fff;
user-select: none;
white-space: nowrap;
}
.plan-index .plans-pill-input:checked + .plans-pill {
background: #7d219c; /* --purple */
border-color: #7d219c; /* --purple */
color: #fff;
}
.plan-index .plans-pill-input:focus-visible + .plans-pill {
outline: 2px solid #7d219c; /* --purple */
outline-offset: 2px;
}
.plan-index .plans-pill-input:disabled + .plans-pill {
opacity: .45;
cursor: not-allowed;
}
/* ---- Non-sortable header (Issuer ID / Formulary ID): matches the sortable headers'
* weight/color/size instead of the bare | default, which reads MORE emphasized than
* the sortable ones -- backwards from what bold usually signals (see the view's
* comment). A sortable header's text sits inside an , inheriting `.site-contents a`'s
* 12px/400/purple; a plain | falls back to the global `.table > thead > th` rule's
* 14.5px instead, so font-size is what closes the gap left after weight/color were
* matched. Verify by computed style, not by eye. */
.plan-index th.plans-th--static {
font-size: 12px;
font-weight: 400;
color: rgb(117, 25, 124); /* matches .site-contents a's site-wide link color literal */
}
/* ---- Network deep-link notice's "Clear network filter" button: `.formulary-btn` sets
* `color: #fff`, but LINK's global layout rule desugars to
* `body .main-content .site-contents a` (2 classes + 2 type selectors), which beats a
* plain `.plan-index .plans-deep-link-clear` (2 classes, 0 types) on the class-count
* tiebreak alone -- so a same-count override loses even though it reads as "more
* specific." Verified by computed style: color rgb(117,25,124) vs background
* rgb(125,33,156), functionally unreadable. Adding `.alert-info` (already present on the
* wrapping notice) as a third class wins outright, without !important or touching
* `.formulary-btn` itself (owned by formularies.css). */
.plan-index .alert-info .plans-deep-link-clear {
color: #fff;
}
/* ---- Table footer (mockup .pagerbar) ---- */
.plan-index .plans-pagerbar {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
padding: 12px 8px 4px;
font-size: 11.5px;
color: #6b7183; /* --muted */
flex-wrap: wrap;
}
.plan-index .plans-pagerbar__controls {
display: flex;
gap: 10px;
align-items: center;
}
.plan-index select.plans-select--perpage {
min-width: 0;
padding: 4px 8px;
}
.plan-index .plans-pagerbar__link {
color: #8b2fa8; /* --link */
font-weight: 700;
cursor: pointer;
text-decoration: none;
}
.plan-index .plans-pagerbar__link:hover {
text-decoration: underline;
}
.plan-index .plans-pagerbar__link--disabled {
color: #c2c6d2;
cursor: default;
text-decoration: none;
}
|