/* Style wspólnych kontrolek formularzy bez Telerika (GfmaComboBox, GfmaMultiSelect). Kolory wyłącznie przez zmienne motywu (--bs-*, --kendo-*) z fallbackami. */ .gfma-combo { position: relative; display: inline-block; } .gfma-combo-input { width: 100%; height: 38px; padding: 0 3.6rem 0 .75rem; font-size: .875rem; color: var(--bs-body-color, #212529); background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, .375rem); transition: border-color .15s, box-shadow .15s; } .gfma-combo-input::placeholder { color: var(--bs-secondary-color, #6c757d); } .gfma-combo-input:focus { outline: none; border-color: var(--bs-primary, #002d72); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary, #002d72) 18%, transparent); } .gfma-combo--disabled .gfma-combo-input, .gfma-combo-input:disabled { background: var(--bs-secondary-bg, #e9ecef); cursor: not-allowed; } .gfma-combo-arrow { position: absolute; right: .7rem; top: 0; height: 38px; display: inline-flex; align-items: center; color: var(--bs-secondary-color, #6c757d); font-size: .7rem; pointer-events: none; } .gfma-combo-clear { position: absolute; right: 1.9rem; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--bs-secondary-color, #6c757d); font-size: .7rem; cursor: pointer; } .gfma-combo-clear:hover { background: var(--bs-secondary-bg, #e9ecef); color: var(--bs-body-color, #212529); } .gfma-combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 12000; margin-top: 2px; max-height: 40dvh; overflow-y: auto; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, .375rem); box-shadow: 0 6px 18px rgba(16, 24, 40, .12); } /* Rozwinięta lista renderuje się W MIEJSCU, a nie w kontenerze przy , jak robią to popupy Telerika. Przez to obowiązują ją przodkowie: `overflow` kart i kontenera animacji ExpandableCard (.k-animation-container ma overflow: hidden i własny z-index), a rodzeństwo dalej w kodzie — jak kalendarz pod filtrami harmonogramu — maluje się po niej. Do tego karta filtrów bywa oznaczona klasą obniżającą z-index, co zamyka listę w niskim kontekście nakładania. Reguły działają WYŁĄCZNIE przy otwartej liście (element .gfma-combo-list istnieje w DOM tylko wtedy), więc poza tym momentem nic się nie zmienia: animacja zwijania karty nadal przycina treść, a karty nie skaczą po osi Z. */ .gfma-combo:has(> .gfma-combo-list) { z-index: 12000; } .card:has(.gfma-combo-list), .card-body:has(.gfma-combo-list), .row:has(.gfma-combo-list), [class*="col-"]:has(.gfma-combo-list), .k-animation-container:has(.gfma-combo-list), .k-child-animation-container:has(.gfma-combo-list) { overflow: visible; } /* Karta z otwartą listą musi wyjść nad rodzeństwo stojące dalej w kodzie (kalendarz harmonogramu, siatka spraw). .card ma już position: relative, więc wystarczy z-index. */ .card:has(.gfma-combo-list), .k-animation-container:has(.gfma-combo-list) { z-index: 12000; } .gfma-combo-item { padding: .4rem .75rem; font-size: .875rem; color: var(--bs-body-color, #212529); cursor: pointer; } .gfma-combo-item:hover { background: var(--bs-secondary-bg, #f1f3f5); } /* Delikatny tint primary zamiast pełnego tła: primary bywa jasny (żółty motyw) i biały tekst byłby nieczytelny; tint działa na każdym motywie. */ .gfma-combo-item--selected, .gfma-combo-item--selected:hover { background: color-mix(in srgb, var(--bs-primary, #002d72) 18%, transparent); color: var(--bs-body-color, #212529); font-weight: 600; } .gfma-combo-status { padding: .45rem .75rem; font-size: .8rem; color: var(--bs-secondary-color, #6c757d); } /* Multi select */ .gfma-multiselect-box { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-height: 38px; padding: .25rem .5rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, .375rem); transition: border-color .15s, box-shadow .15s; } .gfma-multiselect-box:focus-within { border-color: var(--bs-primary, #002d72); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary, #002d72) 18%, transparent); } .gfma-combo--disabled .gfma-multiselect-box { background: var(--bs-secondary-bg, #e9ecef); } .gfma-multiselect-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .1rem .3rem .1rem .55rem; font-size: .8rem; color: var(--bs-body-color, #212529); background: var(--bs-secondary-bg, #e9ecef); border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 999px; } .gfma-multiselect-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gfma-multiselect-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; border-radius: 50%; background: transparent; color: var(--bs-secondary-color, #6c757d); font-size: .65rem; cursor: pointer; flex: 0 0 auto; } .gfma-multiselect-chip-remove:hover { background: rgba(0, 0, 0, .12); color: var(--bs-body-color, #212529); } .gfma-multiselect-input { flex: 1 1 80px; min-width: 60px; height: 26px; border: none; background: transparent; font-size: .875rem; color: var(--bs-body-color, #212529); } .gfma-multiselect-input:focus { outline: none; } .gfma-multiselect-input::placeholder { color: var(--bs-secondary-color, #6c757d); } /* Cele dotykowe 44 px (Apple HIG / WCAG 2.5.5). Globalny blok (pointer: coarse) w main.scss celuje w .btn/.k-button/.k-input/.k-picker, wiec te wlasne kontrolki by go ominely i zostalyby przy 38 px. */ @media (pointer: coarse) { .gfma-combo-input, .gfma-multiselect-box { min-height: 44px; } .gfma-combo-arrow { height: 44px; } .gfma-combo-clear, .gfma-multiselect-chip-remove { width: 28px; height: 28px; } .gfma-combo-item { padding: .6rem .75rem; } } /* -------------------------------------------------------------------------- FlexiForm — uklad pol na waskim ekranie (porownywarki, kalkulatory, formularze dynamiczne). Szerokosc pojedynczego pola przychodzi z definicji formularza jako styl inline (flex: 0 0 25%) i opisuje uklad na monitorze. Na telefonie 25% to ~90 px — etykieta sie lamie, a kontrolka jest nie do trafienia palcem. Reguly musza byc z !important, bo nadpisuja styl inline. Sa tutaj, a nie w SCSS motywu, bo motyw aplikacja pobiera z bazy i moze byc starszym buildem; ten plik laduje sie zawsze (Web.App i Web.Public). -------------------------------------------------------------------------- */ .gfma-flexi-col { /* Bez tego pole z dluga etykieta rozpycha kolumne ponad zadeklarowana szerokosc i cala siatka pol rozjezdza sie w poziomie. */ min-width: 0; max-width: 100%; } /* Do 992 px pole nie schodzi ponizej 14rem — reszta laduje sie do nastepnego wiersza. Swiadomie przez min-width, a nie przez nadpisanie flex-basis: pole zadeklarowane jako 100% ma zostac na cala szerokosc, a nie wskoczyc obok sasiada. */ @media (max-width: 62em) { .gfma-flexi-col { min-width: 14rem; } } /* Telefon — jedna kolumna na cala szerokosc. Tu min-width musi wrocic do zera, bo 14rem to wiecej niz ekran ma do dyspozycji po odjeciu marginesow. */ @media (max-width: 36em) { .gfma-flexi-col { flex: 1 1 100% !important; min-width: 0; } } /* -------------------------------------------------------------------------- Siatka filtrow na listach (CRM: kontakty, firmy). Bylo: trzy rzedy Bootstrapa z recznie przypisanymi szerokosciami (col-md-2, -3, -4, -5) i doklejanym "mt-3 mt-md-0" tam, gdzie akurat cos odstawalo. Kazda z tych liczb pasowala do jednej szerokosci ekranu — na innej albo zostawala dziura w rzedzie, albo pole bylo sciete, a na telefonie wszystko spadalo pod siebie z nierownymi odstepami. Teraz szerokosc kolumny jest wynikiem, a nie zalozeniem: auto-fit tworzy tyle kolumn, ile zmiesci sie przy czytelnym minimum 15rem, i rozdziela reszte po rowno. Zaden prog nie jest wpisany z palca — uklad zmienia sie plynnie od czterech kolumn na monitorze do jednej na telefonie. -------------------------------------------------------------------------- */ .crm-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .85rem 1rem; /* Pola maja rozne wysokosci (etykieta + kontrolka vs sam checkbox) — wyrownanie do dolu ustawia je w jednej linii bazowej kontrolek, a nie etykiet. */ align-items: end; } .crm-filters .crm-filter { /* Element siatki domyslnie nie kurczy sie ponizej swojej tresci: bez tego dluga nazwa jednostki organizacyjnej rozpychala kolumne i cala siatka sie rozjezdzala. */ min-width: 0; } .crm-filters .crm-filter > .form-label { display: block; margin-bottom: .25rem; } /* Zakres dat to dwa pola obok siebie — dostaje podwojna kolumne wszedzie tam, gdzie siatka ma wiecej niz jedna kolumne. Ponizej 48em regula nie obowiazuje, wiec na telefonie zajmuje jedna kolumne jak reszta. */ @media (min-width: 48em) { .crm-filters .crm-filter--wide { grid-column: span 2; } } .crm-filters-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } /* Na telefonie przyciski na cala szerokosc — nie ma sensu zostawiac ich jako dwoch waskich kafelkow przy lewej krawedzi, a to sa glowne akcje tego panelu. */ @media (max-width: 36em) { .crm-filters-actions > .k-button { flex: 1 1 100%; justify-content: center; } } /* Wariant ciemny: jedyne miejsce w tym arkuszu z czernia wpisana na sztywno. Reszta jedzie na zmiennych motywu, wiec przechodzi na ciemne tlo sama. */ html[data-gfma-theme="dark"] .gfma-multiselect-chip-remove:hover { background: rgba(255, 255, 255, .16); }