214 lines
8.9 KiB
Plaintext
214 lines
8.9 KiB
Plaintext
// ─────────────────────────────────────────────────────────────────────────
|
|
// Global utility layer.
|
|
//
|
|
// WHY THIS EXISTS. Legacy henza_admin shipped a full Tailwind build
|
|
// (tailwind.config.js, ~28KB) whose custom scale the templates depend on —
|
|
// `mb-base`, `text-primary`, `w-5`, `grid-cols-4` and friends all resolved
|
|
// there. This port never installed Tailwind, but ~185 of those class names
|
|
// survived in the ported templates. They were patched over by re-declaring a
|
|
// handful of them inside each view's own `<style scoped>` block — 100+ copies
|
|
// across 49 files, which (a) drifted in value and (b) could not reach child
|
|
// components at all, because a scoped rule never applies inside a child.
|
|
//
|
|
// This file replaces all of that with ONE global definition, using LEGACY's
|
|
// values rather than the drifted ones.
|
|
// ─────────────────────────────────────────────────────────────────────────
|
|
|
|
// ── Design tokens ────────────────────────────────────────────────────
|
|
// Legacy themeConfig.js + vue.config.js modifyVars. `--primary-color` is also
|
|
// fed to ant itself via App.vue's <a-config-provider :theme> (ant-design-vue 4
|
|
// replaced LESS modifyVars with CSS-in-JS design tokens); declaring it here as
|
|
// a custom property keeps it reachable from plain CSS too (App.vue reads it).
|
|
//
|
|
// `--secondary-color` / `--third-color` were never real ant LESS variables
|
|
// (confirmed dead in the old build — ant never consumed them), so they exist
|
|
// only here for application code to use directly; they are not passed to
|
|
// ConfigProvider.
|
|
//
|
|
// The old ant.less also declared `--primary: #41b883` / `--accent: #35495e` —
|
|
// ant-design-pro boilerplate in Vue's own palette, inherited verbatim from
|
|
// legacy and used as `@border-color-base`. That file is deleted (ADV4 has no
|
|
// LESS build to feed); nothing in the app should reference `--primary`/
|
|
// `--accent` any more — use the Montzar tokens below instead.
|
|
:root {
|
|
--primary-color: #1c2d56;
|
|
--secondary-color: #836447;
|
|
--third-color: #f5cb55;
|
|
--success-color: #28c76f;
|
|
--danger-color: #ea5455;
|
|
--warning-color: #ff9f43;
|
|
}
|
|
|
|
// ── Text colour ──────────────────────────────────────────────────────
|
|
.text-primary { color: var(--primary-color); }
|
|
.text-secondary { color: var(--secondary-color); }
|
|
.text-third { color: var(--third-color); }
|
|
.text-success { color: var(--success-color); }
|
|
.text-danger { color: var(--danger-color); }
|
|
.text-warning { color: var(--warning-color); }
|
|
|
|
// ── Spacing ──────────────────────────────────────────────────────────
|
|
// legacy tailwind.config.js:628,664 — `base` is 2.2rem, NOT the 1.5rem the
|
|
// per-file copies drifted to.
|
|
.mb-base { margin-bottom: 2.2rem; }
|
|
.mt-base { margin-top: 2.2rem; }
|
|
.p-base { padding: 2.2rem; }
|
|
.mb-5 { margin-bottom: 1.25rem; }
|
|
.mx-1 { margin: 0 0.25rem; }
|
|
|
|
// RTL-FLIPPED. The ported views deliberately invert these: the panel is RTL,
|
|
// so a Tailwind `ml-*` from the legacy template must push to the RIGHT to keep
|
|
// the original visual gap. Verified against the per-file copies this layer
|
|
// replaces — .ml-1/.ml-3 were `margin-right`, .mr-4 was `margin-left`, in
|
|
// every occurrence. Keep the logical inversion; do NOT "correct" it.
|
|
.ml-1 { margin-right: 0.25rem; }
|
|
.ml-3 { margin-right: 0.75rem; }
|
|
.mr-4 { margin-left: 1rem; }
|
|
|
|
// ── Sizing ───────────────────────────────────────────────────────────
|
|
// Tailwind's 0.25rem scale. `h-5` was used 17 times and defined NOWHERE, so
|
|
// every `icon-class="w-5 h-5 …"` rendered at inherited size.
|
|
.w-5 { width: 1.25rem; }
|
|
.h-5 { height: 1.25rem; }
|
|
.w-6 { width: 1.5rem; }
|
|
.h-6 { height: 1.5rem; }
|
|
.w-full { width: 100%; }
|
|
|
|
// ── Layout ───────────────────────────────────────────────────────────
|
|
.flex { display: flex; }
|
|
.inline-flex { display: inline-flex; }
|
|
.items-center { align-items: center; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.gap-2 { gap: 0.5rem; }
|
|
.cursor-pointer { cursor: pointer; }
|
|
|
|
// Responsive auto-fit grids. These are a port-ism (legacy used Tailwind's
|
|
// explicit `grid-cols-N` + breakpoint prefixes); kept because every ported
|
|
// form already binds them.
|
|
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
|
|
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
|
|
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
|
|
|
|
// ── Card chrome ──────────────────────────────────────────────────────
|
|
// Legacy's <vx-card> (vuexy/components/vxCard.scss:1-11) carried a soft shadow
|
|
// and 8px radius. <a-card> is a flat 1px-bordered box, which is the single
|
|
// most visible difference across the 54 card sites in the port.
|
|
body #app .ant-card {
|
|
border-radius: 0.5rem;
|
|
// Softened twice per request: the original 25px/10% shadow read as heavy
|
|
// on every card in the panel (54 sites); this is now barely-there —
|
|
// a faint depth cue rather than a visible shadow.
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
// ── Full-height list pages ──────────────────────────────────────────
|
|
// Main.vue stretches #content-area/.content-area__content to fill the
|
|
// viewport below the navbar; the routed page's own root needs to pick that
|
|
// up so a short table doesn't leave a gray gap under its card. Most list
|
|
// pages render <div id="page-user-list"><a-card>...</a-card></div>, a few
|
|
// (e.g. FacilityList.vue) render <a-card> directly — both are covered here.
|
|
.content-area__content > * {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
#page-user-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#page-user-list > .ant-card,
|
|
.content-area__content > .ant-card {
|
|
flex: 1;
|
|
}
|
|
|
|
// ── Phone page chrome ────────────────────────────────────────────────
|
|
// Opt-in per page (class="page-card" on the page's root card) as each page is
|
|
// made responsive. Base-form modals get the same treatment for their body.
|
|
@media (max-width: 575px) {
|
|
.page-card,
|
|
.base-form-modal .ant-modal-body {
|
|
.ant-card-head {
|
|
min-height: 44px;
|
|
padding: 0 12px;
|
|
}
|
|
.ant-card-head-title {
|
|
font-size: 14px;
|
|
padding: 10px 0;
|
|
}
|
|
.ant-card-extra {
|
|
padding: 6px 0;
|
|
}
|
|
.ant-card-body {
|
|
padding: 12px;
|
|
}
|
|
.mb-base {
|
|
margin-bottom: 12px;
|
|
}
|
|
.ant-form-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
.grid-2,
|
|
.grid-3,
|
|
.grid-4 {
|
|
row-gap: 0;
|
|
column-gap: 12px;
|
|
}
|
|
.ant-tabs-nav {
|
|
margin-bottom: 12px;
|
|
}
|
|
.form-submit {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
// date-range filter rows on report pages: the two dates side by side, the
|
|
// action buttons on their own row without the blank spacer label
|
|
.filter-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
.ant-form-item:last-child {
|
|
grid-column: 1 / -1;
|
|
.ant-form-item-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
// a nested section card inside the page card: drop the double frame
|
|
.page-card .ant-card .ant-card,
|
|
.page-card > .ant-card-body .ant-card {
|
|
box-shadow: none;
|
|
}
|
|
// a horizontally scrollable plain <a-table> (class="table-scroll" on it or
|
|
// on any ancestor)
|
|
.table-scroll .ant-table-content,
|
|
.detail-modal .ant-table-content {
|
|
overflow-x: auto;
|
|
}
|
|
.table-scroll .ant-table-content > table,
|
|
.detail-modal .ant-table-content > table {
|
|
min-width: max-content;
|
|
}
|
|
|
|
// View/status modals (wrap-class-name="detail-modal"): near full width on
|
|
// phones instead of a percentage of an already narrow screen.
|
|
.detail-modal .ant-modal {
|
|
width: calc(100vw - 16px) !important;
|
|
max-width: none;
|
|
top: 8px;
|
|
margin: 0 auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
.detail-modal .ant-modal-content {
|
|
padding: 14px 12px;
|
|
}
|
|
.detail-modal .ant-card-head {
|
|
min-height: 40px;
|
|
padding: 0 12px;
|
|
}
|
|
.detail-modal .ant-card-body {
|
|
padding: 12px;
|
|
}
|
|
.detail-modal .ant-descriptions-item {
|
|
padding-bottom: 8px;
|
|
}
|
|
}
|