/* ============================================================================ ics-icons — THE icon sheet. It ships the ics glyph set and, in one file, the name map that answers the older icon-class vocabulary screens still author. SECTION 1 — the own `ics-icon-*` classes. One name per glyph, each painting an SVG from ./svg/, and a group rule that gives a standalone glyph its own BOX (inline-block, a 1.15em square, contained background). The size steps ride the font-size ladder (lg / xl / 2x / 3x / 4x / 5x), so an icon scales with the text it sits in. A host element that already HAS a box keeps it - see the host rule below. The `--c-*` variables at the top are the set's own colour vocabulary, with a dark-theme override on the same root. SECTION 2 — the `.icon-*` NAME MAP: the older icon-class vocabulary, several names per glyph, painting the SAME SVG set. It sets the BACKGROUND ONLY. THE TWO SECTIONS CANNOT BE COLLAPSED INTO ONE ANOTHER. Section 1 owns the box; section 2 must not, because every host that carries an `.icon-*` name already has a box from its own sheet. For the same reason an `ics-icon-*` name cannot simply be substituted for an `.icon-*` one in markup. LINK THIS SHEET LAST in every shell: section 2 has to beat `.icon-*` rules declared in stylesheets loaded earlier, which it does on source order plus `!important`. A name absent from section 2 paints NOTHING - it renders an empty box - so delete a name only together with the markup that authors it. ============================================================================ */ :root{--c-danger:#D23B2A;--c-success:#2E9E52;--c-info:#2C6FB5;--c-warning:#E0972A;--c-gold:#B8860B;--c-silver:#5F6368;--c-ink:#2A2620;--surface:#fff;} :root[data-ics-theme="dark"]{--c-danger:#F0674F;--c-success:#5CC17E;--c-info:#5B95D6;--c-warning:#F0B24A;--c-gold:#E6BC4E;--c-silver:#AEB2B8;--surface:#211E16;} .ics-icon{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em}.ics-icon svg{width:100%;height:100%;display:block} [class^="ics-icon-"],[class*=" ics-icon-"]{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em;background-position:center;background-repeat:no-repeat;background-size:contain} /* THE HOST OWNS THE BOX - specificity 0-1-1 beats the 0-1-0 rule above. The rule above makes an `ics-icon-*` element SIZE ITSELF (inline-block, 1.15em square). That is right for a standalone / glyph and WRONG for a host that already has a box and only wants the glyph painted into it. Those hosts keep their own geometry and take the background only - which is exactly the contract the `.icon-*` vocabulary in section 2 has. Measured cases this exists for: - a labelled button - a 50px grid action
' + sDay + '
- a calendar day cell Without this rule the first two collapse to ~15px and the third clips its day number. ⚠ Keep `display:revert` - the correct display differs per host (block for div, inline-block for a control), so a single hardcoded value would be wrong for one of them. */ input[class^="ics-icon-"],input[class*=" ics-icon-"], button[class^="ics-icon-"],button[class*=" ics-icon-"], img[class^="ics-icon-"],img[class*=" ics-icon-"], div[class^="ics-icon-"],div[class*=" ics-icon-"]{display:revert;width:auto;height:auto;vertical-align:revert} /* Size modifiers - ics icons are em-sized, so font-size is what scales them. The `ics-icon-*` steps are the names to author; the short name paired with each one answers the older size vocabulary still present in screen markup, so those hosts size correctly from this sheet alone. */ /* Spinner motion for .ics-icon-loading: loading.svg is a static arc, so the element itself is rotated. */ @keyframes ics-icon-spin{to{transform:rotate(360deg)}} .ics-icon-lg,.fa-lg{font-size:1.33em} .ics-icon-xl,.fa-xl{font-size:1.5em} .ics-icon-2x,.fa-2x{font-size:2em} .ics-icon-3x,.fa-3x{font-size:3em} .ics-icon-4x,.fa-4x{font-size:4em} .ics-icon-5x,.fa-5x{font-size:5em} .ics-icon-close-cancel{background-image:url(svg/close-cancel.svg)} .ics-icon-list-menu{background-image:url(svg/list-menu.svg)} .ics-icon-print{background-image:url(svg/print.svg)} .ics-icon-ok-check{background-image:url(svg/ok-check.svg)} .ics-icon-add{background-image:url(svg/add.svg)} .ics-icon-save{background-image:url(svg/save.svg)} .ics-icon-delete{background-image:url(svg/delete.svg)} .ics-icon-search-filter{background-image:url(svg/search-filter.svg)} .ics-icon-refresh{background-image:url(svg/refresh.svg)} .ics-icon-edit{background-image:url(svg/edit.svg)} .ics-icon-excel-export{background-image:url(svg/excel-export.svg)} .ics-icon-back-undo{background-image:url(svg/back-undo.svg)} .ics-icon-date-time{background-image:url(svg/date-time.svg)} .ics-icon-next-forward{background-image:url(svg/next-forward.svg)} .ics-icon-copy{background-image:url(svg/copy.svg)} .ics-icon-down{background-image:url(svg/down.svg)} .ics-icon-up{background-image:url(svg/up.svg)} .ics-icon-settings{background-image:url(svg/settings.svg)} .ics-icon-download{background-image:url(svg/download.svg)} .ics-icon-attach{background-image:url(svg/attach.svg)} .ics-icon-upload{background-image:url(svg/upload.svg)} .ics-icon-paste{background-image:url(svg/paste.svg)} .ics-icon-globe-map{background-image:url(svg/globe-map.svg)} .ics-icon-eye-close{background-image:url(svg/eye-close.svg)} .ics-icon-chart-report{background-image:url(svg/chart-report.svg)} .ics-icon-user-people{background-image:url(svg/user-people.svg)} .ics-icon-mail{background-image:url(svg/mail.svg)} .ics-icon-folder{background-image:url(svg/folder.svg)} .ics-icon-lock-key{background-image:url(svg/lock-key.svg)} .ics-icon-info{background-image:url(svg/info.svg)} .ics-icon-home{background-image:url(svg/home.svg)} .ics-icon-image{background-image:url(svg/image.svg)} .ics-icon-link-share{background-image:url(svg/link-share.svg)} .ics-icon-logo{background-image:url(svg/logo.svg)} .ics-icon-notify{background-image:url(svg/notify.svg)} .ics-icon-product-box{background-image:url(svg/product-box.svg)} .ics-icon-loading{background-image:url(svg/loading.svg);animation:ics-icon-spin .9s linear infinite} .ics-icon-logout{background-image:url(svg/logout.svg)} .ics-icon-encash{background-image:url(svg/encash.svg)} .ics-icon-eye-open{background-image:url(svg/eye-open.svg)} .ics-icon-camera{background-image:url(svg/camera.svg)} .ics-icon-esimsol-name{background-image:url(svg/esimsol-name.svg)} .ics-icon-transport{background-image:url(svg/transport.svg)} .ics-icon-desktop{background-image:url(svg/desktop.svg)} .ics-icon-phone{background-image:url(svg/phone.svg)} .ics-icon-db-si-server{background-image:url(svg/db-si-server.svg)} .ics-icon-db-si-building-o{background-image:url(svg/db-si-building-o.svg)} .ics-icon-db-si-hdd{background-image:url(svg/db-si-hdd.svg)} .ics-icon-db-si-memory{background-image:url(svg/db-si-memory.svg)} .ics-icon-db-si-database{background-image:url(svg/db-si-database.svg)} .ics-icon-db-sw-line-attendance{background-image:url(svg/db-sw-line-attendance.svg)} .ics-icon-db-sw-wip{background-image:url(svg/db-sw-wip.svg)} .ics-icon-db-sw-totalinput{background-image:url(svg/db-sw-totalinput.svg)} .ics-icon-db-sw-efficiency{background-image:url(svg/db-sw-efficiency.svg)} .ics-icon-db-sw-efficiency-2{background-image:url(svg/db-sw-efficiency-2.svg)} .ics-icon-db-sw-totalproduction{background-image:url(svg/db-sw-totalproduction.svg)} .ics-icon-db-fa-bankbalance{background-image:url(svg/db-fa-bankbalance.svg)} .ics-icon-db-fa-expense{background-image:url(svg/db-fa-expense.svg)} .ics-icon-db-fa-taka{background-image:url(svg/db-fa-taka.svg)} .ics-icon-db-fa-coins{background-image:url(svg/db-fa-coins.svg)} .ics-icon-db-fa-cogs{background-image:url(svg/db-fa-cogs.svg)} .ics-icon-db-fa-cashbalance{background-image:url(svg/db-fa-cashbalance.svg)} .ics-icon-db-fa-payable{background-image:url(svg/db-fa-payable.svg)} /* Must stay LAST: equal specificity to .ics-icon-loading above, so source order carries the override. */ @media (prefers-reduced-motion:reduce){.ics-icon-loading{animation:none}} /* ############################################################################ SECTION 2 - THE `.icon-*` NAME MAP: the older icon-class vocabulary that screen markup and widget options still author, answered with the SAME ics SVG set as section 1. Several names share one glyph, grouped by target so no declaration block repeats. THIS SECTION IS THE ONLY PAINT THOSE NAMES GET. A name missing from here does not fall back to anything - it renders an EMPTY BOX. So: delete a name only together with the markup that authors it, and add one the moment new markup needs it. The names come in two shapes - a class written straight into markup, and a widget option (`data-options="...iconCls:'icon-x'..."`) that becomes the same class at runtime - plus the classes widgets generate for themselves. ### TWO RULES THIS SECTION MUST KEEP, AND WHY ### 1. IT SETS NO BOX. Section 1's group rule gives every `ics-icon-*` its own box (display/width/height/background-position/-repeat/-size). This section must NOT: every host carrying an `.icon-*` name already has a box of its own. On the shells that load an outside widget stylesheet, that sheet owns the box and must not be fought; on the shells that load none, the box comes from lib-v2\css\components\button.css and combo.css. That is exactly why the two vocabularies cannot share a rule block, and why an `ics-icon-*` name cannot simply be swapped in for one of these. 2. IT KEEPS `!important` AND LOADS LATE. Stylesheets earlier in the chain carry `.icon-*` rules of their own (one of them !important). This file is linked AFTER them in every shell for that reason - keep it last. ############################################################################ */ .icon-active,.icon-approved,.icon-ok,.icon-open{background:url(svg/ok-check.svg) no-repeat center center !important;background-size:contain !important;} .icon-add{background:url(svg/add.svg) no-repeat center center !important;background-size:contain !important;} .icon-attachment,.icon-docattachment{background:url(svg/attach.svg) no-repeat center center !important;background-size:contain !important;} .icon-back,.icon-back_mini,.icon-cut,.icon-undo{background:url(svg/back-undo.svg) no-repeat center center !important;background-size:contain !important;} .icon-cancel,.icon-clear,.icon-close,.icon-closed,.icon-no,.icon-stop{background:url(svg/close-cancel.svg) no-repeat center center !important;background-size:contain !important;} .icon-chart,.icon-large-chart{background:url(svg/chart-report.svg) no-repeat center center !important;background-size:contain !important;} .icon-copy{background:url(svg/copy.svg) no-repeat center center !important;background-size:contain !important;} .icon-details,.icon-pattern,.icon-pick,.icon-weightlist{background:url(svg/list-menu.svg) no-repeat center center !important;background-size:contain !important;} .icon-disburse,.icon-upload{background:url(svg/upload.svg) no-repeat center center !important;background-size:contain !important;} .icon-dishonor,.icon-down,.icon-seal{background:url(svg/down.svg) no-repeat center center !important;background-size:contain !important;} .icon-download,.icon-receive{background:url(svg/download.svg) no-repeat center center !important;background-size:contain !important;} .icon-edit,.icon-edit-calender,.icon-mini-edit,.icon-revise{background:url(svg/edit.svg) no-repeat center center !important;background-size:contain !important;} .icon-email{background:url(svg/mail.svg) no-repeat center center !important;background-size:contain !important;} .icon-encashment{background:url(svg/encash.svg) no-repeat center center !important;background-size:contain !important;} .icon-excel{background:url(svg/excel-export.svg) no-repeat center center !important;background-size:contain !important;} .icon-filter,.icon-search{background:url(svg/search-filter.svg) no-repeat center center !important;background-size:contain !important;} .icon-forword,.icon-redo,.icon-request,.icon-running,.icon-transfer{background:url(svg/next-forward.svg) no-repeat center center !important;background-size:contain !important;} .icon-freeze,.icon-lock,.icon-unlock{background:url(svg/lock-key.svg) no-repeat center center !important;background-size:contain !important;} .icon-paste{background:url(svg/paste.svg) no-repeat center center !important;background-size:contain !important;} .icon-print,.icon-print_mini{background:url(svg/print.svg) no-repeat center center !important;background-size:contain !important;} .icon-reload,.icon-reset{background:url(svg/refresh.svg) no-repeat center center !important;background-size:contain !important;} .icon-remove{background:url(svg/delete.svg) no-repeat center center !important;background-size:contain !important;} .icon-review-history{background:url(svg/date-time.svg) no-repeat center center !important;background-size:contain !important;} .icon-save{background:url(svg/save.svg) no-repeat center center !important;background-size:contain !important;} .icon-scan{background:url(svg/camera.svg) no-repeat center center !important;background-size:contain !important;} .icon-setting,.icon-setting_mini{background:url(svg/settings.svg) no-repeat center center !important;background-size:contain !important;} .icon-tip{background:url(svg/notify.svg) no-repeat center center !important;background-size:contain !important;} .icon-up{background:url(svg/up.svg) no-repeat center center !important;background-size:contain !important;} .icon-view{background:url(svg/eye-open.svg) no-repeat center center !important;background-size:contain !important;} .icon-waitforapproval{background:url(svg/globe-map.svg) no-repeat center center !important;background-size:contain !important;} /* context-specific entries + the spinner-widget glyphs. ⚠ THE SPINNER RULES ARE LOAD-BEARING, NOT DEAD WEIGHT (measured): the spinner widgets the screens still use paint .spinner-arrow-up/-down and .spinner-button-up/-down from a sprite image of their own unless these rules put the ics up/down glyphs there instead. Deleting them removes no spinner from any screen - it simply hands every spinner's arrows back to that sprite. `a.textbox-button.spinner-button{padding:0}` squares the captionless box (the button's text padding would otherwise double the width of an icon-only button). */ /* The entries below follow the same two rules as the block above: they ARE the paint for these names, not a tweak layered on another sheet, so deleting one leaves that name with nothing to render and an empty box in its place. The !important and the load-last position stand for the same reason - the box belongs to the host's own sheet and must not be fought. Names outside the map are left untouched. */ .icon-action{background:url(svg/ok-check.svg) no-repeat center center !important;background-size:contain !important;} .calendar-today .icon-edit-calender{background:url(svg/list-menu.svg) no-repeat center center !important;background-size:contain !important;} /* Spinner buttons - the a.spinner-button pair flanking a spinner field, plus the stacked arrow variant: up / increase -> the up glyph, down / decrease -> the down glyph. The horizontal pair are button hosts, so the button sheet (lib-v2\css\components\button.css) already paints them in the one button design (white face, gold-700 border); all that happens here is the GLYPH and the squared captionless box - without padding:0 the button's text padding doubles the width of an icon-only button. */ .spinner .l-btn-icon.spinner-button-up{background:url(svg/up.svg) no-repeat center center !important;background-size:contain !important;} .spinner .l-btn-icon.spinner-button-down{background:url(svg/down.svg) no-repeat center center !important;background-size:contain !important;} .spinner .spinner-arrow-up{background:url(svg/up.svg) no-repeat center center !important;background-size:contain !important;} .spinner .spinner-arrow-down{background:url(svg/down.svg) no-repeat center center !important;background-size:contain !important;} a.textbox-button.spinner-button{padding:0 !important;width:24px;}