/* * components/icons.css — span.Links a.icon catalog (heading link action icons) * * Icon images live under resources/images/ as 22px PNGs. From this file: * components/ → styles/ → default/ → layout/ → resources/ → images/ * i.e. four `..` segments. */ /* ─── Base Icon ──────────────────────────────────────────────────────────── */ span.Links a.icon { display: inline-block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center center; vertical-align: bottom; } /* Size variants */ span.Links a.icon.send { width: 40px; background-image: url(../../../../images/send22.png); } span.Links a.icon.newpage { width: 26px; background-image: url(../../../../images/newpage22.png); } span.Links a.icon.arrow { width: 12px; margin-left: -5px; background-image: url(../../../../images/sort-desc.png); } /* ─── Icon Images ────────────────────────────────────────────────────────── */ span.Links a.icon.arrow-circle { background-image: url(../../../../images/arrow-circle22.png); } span.Links a.icon.arrow-split { background-image: url(../../../../images/arrow-split22.png); } span.Links a.icon.document-import { background-image: url(../../../../images/document-import22.png); } span.Links a.icon.back { background-image: url(../../../../images/back22.png); } span.Links a.icon.forward { background-image: url(../../../../images/forward22.png); } span.Links a.icon.excel { background-image: url(../../../../images/export22.png); } span.Links a.icon.pdf { background-image: url(../../../../images/pdf22.png); } span.Links a.icon.pdf-card { background-image: url(../../../../images/pdf-card22.png); } span.Links a.icon.receipt-text { background-image: url(../../../../images/receipt-text22.png); } span.Links a.icon.treetag { background-image: url(../../../../images/treetag22.png); } span.Links a.icon.book { background-image: url(../../../../images/book22.png); } span.Links a.icon.box { background-image: url(../../../../images/box22.png); } span.Links a.icon.page { background-image: url(../../../../images/page22.png); } span.Links a.icon.chart { background-image: url(../../../../images/chart22.png); } span.Links a.icon.chartstack { background-image: url(../../../../images/chartstack22.png); } span.Links a.icon.clock { background-image: url(../../../../images/clock22.png); } span.Links a.icon.snowflake { background-image: url(../../../../images/snowflake22.png); } span.Links a.icon.tick { background-image: url(../../../../images/tick22.png); } span.Links a.icon.tick-red { background-image: url(../../../../images/tick-red22.png); } span.Links a.icon.download { background-image: url(../../../../images/download22.png); } span.Links a.icon.download-red { background-image: url(../../../../images/download-red22.png); } span.Links a.icon.download-green { background-image: url(../../../../images/download-green22.png); } span.Links a.icon.dollar-green { background-image: url(../../../../images/dollar-green22.png); } span.Links a.icon.dollar-red { background-image: url(../../../../images/dollar-red22.png); } span.Links a.icon.dollar-blue { background-image: url(../../../../images/dollar-green22.png); filter: hue-rotate(90deg) saturate(5); } span.Links a.icon.map { background-image: url(../../../../images/map22.png); } span.Links a.icon.logout { background-image: url(../../../../images/logout22.png); } span.Links a.icon.upload { background-image: url(../../../../images/upload22.png); } span.Links a.icon.updown { background-image: url(../../../../images/updown22.png); } span.Links a.icon.leftright { background-image: url(../../../../images/leftright22.png); } span.Links a.icon.leftright-green { background-image: url(../../../../images/leftright-green22.png); } span.Links a.icon.pda { background-image: url(../../../../images/pda22.png); } span.Links a.icon.pdf.view { background-image: url(../../../../images/pdf-view22.png); } span.Links a.icon.pdf.download { background-image: url(../../../../images/pdf-download22.png); } span.Links a.icon.pdf.email { background-image: url(../../../../images/pdf-email22.png); } span.Links a.icon.pdf.email_red { background-image: url(../../../../images/pdf-email22.png); filter: hue-rotate(180deg) saturate(5); } span.Links a.icon.pdf.email_blue { background-image: url(../../../../images/pdf-email22.png); filter: hue-rotate(50deg) saturate(5); } span.Links a.icon.pdf.email_purple { background-image: url(../../../../images/pdf-email22.png); filter: hue-rotate(90deg) saturate(5); } span.Links a.icon.pdf.email_green { background-image: url(../../../../images/pdf-email22.png); filter: hue-rotate(280deg) saturate(5); } span.Links a.icon.pdf.print { background-image: url(../../../../images/pdf-print22.png); } span.Links a.icon.pdf.clock { background-image: url(../../../../images/pdf-clock22.png); } span.Links a.icon.nacha { background-image: url(../../../../images/nacha22.png); } span.Links a.icon.stop { background-image: url(../../../../images/stop22.png); } span.Links a.icon.star { background-image: url(../../../../images/star22.png); } span.Links a.icon.sticky { background-image: url(../../../../images/sticky-note22.png); } span.Links a.icon.globe { background-image: url(../../../../images/globe22.png); } span.Links a.icon.invoice { background-image: url(../../../../images/invoice22.png); } span.Links a.icon.table { background-image: url(../../../../images/table22.png); } span.Links a.icon.lock { background-image: url(../../../../images/lock22.png); } span.Links a.icon.calendar { background-image: url(../../../../images/calendar22.png); } span.Links a.icon.calendar-plain { background-image: url(../../../../images/calendar-plain22.png); } span.Links a.icon.water { background-image: url(../../../../images/water22.png); } span.Links a.icon.water-green { background-image: url(../../../../images/water-green22.png); } span.Links a.icon.vise { background-image: url(../../../../images/vise22.png); } span.Links a.icon.toolboxEdit { background-image: url(../../../../images/toolboxEdit22.png); } span.Links a.icon.phone-plus { background-image: url(../../../../images/phone-plus22.png); } span.Links a.icon.user-business { background-image: url(../../../../images/user-business22.png); } span.Links a.icon.email-send-attachment { background-image: url(../../../../images/email-send-attachment22.png); } span.Links a.icon.add { background-image: url(../../../../images/add22.png); } span.Links a.icon.add-blue { background-image: url(../../../../images/add22.png); filter: hue-rotate(80deg); } span.Links a.icon.addCircle { background-image: url(../../../../images/addCircle22.png); } span.Links a.icon.edit { background-image: url(../../../../images/edit22.png); } span.Links a.icon.suedit { background-image: url(../../../../images/suedit22.png); } span.Links a.icon.tax { background-image: url(../../../../images/tax22.png); } span.Links a.icon.eraser { background-image: url(../../../../images/eraser22.png); } span.Links a.icon.eraser-green { background-image: url(../../../../images/eraser-green22.png); } span.Links a.icon.print { background-image: url(../../../../images/print22.png); } span.Links a.icon.void { background-image: url(../../../../images/void22.png); } span.Links a.icon.zoom { background-image: url(../../../../images/zoom22.png); } span.Links a.icon.column { background-image: url(../../../../images/column22.png); } span.Links a.icon.arrow_refresh { background-image: url(../../../../images/arrow_refresh22.png); } span.Links a.icon.arrow_refresh_green { background-image: url(../../../../images/arrow_refresh_green22.png); } span.Links a.icon.arrow_refresh_red { background-image: url(../../../../images/arrow_refresh22.png); filter: hue-rotate(160deg); } span.Links a.icon.percent { background-image: url(../../../../images/percent22.png); } span.Links a.icon.inventory { background-image: url(../../../../images/inventory22.png); } span.Links a.icon.disk { background-image: url(../../../../images/disk22.png); } span.Links a.icon.new_client { background-image: url(../../../../images/new_client22.png); } span.Links a.icon.warning { background-image: url(../../../../images/warning22.png); } span.Links a.icon.email { background-image: url(../../../../images/email22.png); } span.Links a.icon.email_red { background-image: url(../../../../images/email22.png); filter: hue-rotate(180deg) saturate(5); } span.Links a.icon.email_blue { background-image: url(../../../../images/email22.png); filter: hue-rotate(50deg) saturate(5); } span.Links a.icon.email_purple { background-image: url(../../../../images/email22.png); filter: hue-rotate(90deg) saturate(5); } span.Links a.icon.email_green { background-image: url(../../../../images/email22.png); filter: hue-rotate(280deg) saturate(5); } span.Links a.icon.delete { background-image: url(../../../../images/delete22.png); } span.Links a.icon.coverpage { background-image: url(../../../../images/coverpage22.png); } span.Links a.icon.break { background-image: url(../../../../images/break22.png); } span.Links a.icon.eye { background-image: url(../../../../images/eye22.png); } span.Links a.icon.join { background-image: url(../../../../images/join22.png); } span.Links a.icon.box-check { background-image: url(../../../../images/box-check22.png); } span.Links a.icon.box-label { background-image: url(../../../../images/box-label22.png); } span.Links a.icon.box-delete { background-image: url(../../../../images/box-delete22.png); } span.Links a.icon.credit-card { background-image: url(../../../../images/credit-card22.png); } span.Links a.icon.credit-card-warning { background-image: url(../../../../images/credit-card-warning22.png); } span.Links a.icon.script-text { background-image: url(../../../../images/script-text22.png); } span.Links a.icon.counter { background-image: url(../../../../images/counter22.png); } span.Links a.icon.copy { background-image: url(../../../../images/copy22.png); } span.Links a.icon.truck-box { background-image: url(../../../../images/truck-box22.png); } /* ─── Report thumbnail ───────────────────────────────────────────────────── */ .report-thumb { background: #fff; border: 1px solid var(--color-muted); vertical-align: middle; width: 76px; height: 99px; margin-right: 8px; }