/* ===================================================================== q-nav — akordiyon kenar menusu (TASINABILIR BILESEN) --------------------------------------------------------------------- Bu dosyanin DevExpress'e, ASP.NET Web Forms'a ya da eski Quami'nin sinif adlarina HICBIR bagimliligi yoktur. Tek basina, herhangi bir projede (or. ASP.NET Core + Blazor) kullanilabilir. Secili oge ("buradasin") zemin degistirmez; yazisi turuncu ve kalin olur. Acik ust baslik yalniz beyaz yazi ve asagi donuk ok ile belli edilir. Hicbir ogede sol renk seridi kullanilmaz. Renk ve olculer --q-nav-* degiskenlerinden gelir. Her degiskenin makul bir varsayilani vardir, bu yuzden dosya tek basina da calisir. Eski Quami'de ortak-tema.css bu degiskenleri kendi temasindan (--q-side, --q-orange, --q-menu-yazi ...) besler. Beklenen HTML iskeleti — js/q-nav.js bunu uretir: ===================================================================== */ .q-nav { --q-nav-bg: #1C3560; --q-nav-fg: #D7E0EC; --q-nav-fg-sub: #BFCEE2; --q-nav-fg-dim: #8FA6C6; --q-nav-hover-bg: #27467A; --q-nav-active-fg: #FFFFFF; /* acik ust baslik yazisi */ --q-nav-accent: #E8772E; /* secili oge yazisi + odak halkasi */ --q-nav-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --q-nav-size: 15px; --q-nav-size-sub: 14px; --q-nav-size-group: 12px; --q-nav-pad-x: 16px; /* grup basliginin sol boslugu */ --q-nav-pad-y: 9px; /* satir yuksekligi */ --q-nav-pad-right: 12px; /* ok isaretinin sag kenara uzakligi */ --q-nav-pad-y-sub: 7px; /* alt oge satir yuksekligi */ --q-nav-item-indent: 12px; /* ogeler grup basligindan 12px iceride */ --q-nav-indent: 42px; /* alt ogeler (16 + 12 + 14) */ box-sizing: border-box; padding: 8px 0 18px; background: var(--q-nav-bg); font-family: var(--q-nav-font); } .q-nav *, .q-nav *::before, .q-nav *::after { box-sizing: border-box; } /* ---------- grup basligi: hep acik, tiklanmaz ---------- */ .q-nav-group { padding: 16px var(--q-nav-pad-x) 6px; color: var(--q-nav-fg-dim); font-size: var(--q-nav-size-group); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; cursor: default; user-select: none; } .q-nav > .q-nav-group:first-child { padding-top: 6px; } /* ---------- oge ---------- */ .q-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: var(--q-nav-pad-y) var(--q-nav-pad-right) var(--q-nav-pad-y) calc(var(--q-nav-pad-x) + var(--q-nav-item-indent)); border: 0; border-radius: 0; background: transparent; color: var(--q-nav-fg); font-family: inherit; font-size: var(--q-nav-size); line-height: 1.35; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .12s, color .12s; } .q-nav-item:hover { background: var(--q-nav-hover-bg); color: var(--q-nav-active-fg); } .q-nav-item:focus-visible { outline: 2px solid var(--q-nav-accent); outline-offset: -2px; } /* Secili oge ("buradasin"): zemin DEGISMEZ, yalniz yazi turuncu ve kalin. Secici neden .q-nav-item.q-nav-item--active (iki sinif): asagidaki .q-nav-item--sub kurali da renk veriyor ve ayni ozgullukte (0,1,0) olup DOSYADA DAHA SONRA geldigi icin tek sinifli bir kurali eziyordu -- alt ogelerde vurgu hic gorunmuyordu. Iki sinifla ozgulluk (0,2,0) olur ve kural sirasi onemini yitirir. Ayni sebeple :hover surumu uc sinifli, boylece .q-nav-item:hover'i (0,2,0) gecer. */ .q-nav-item.q-nav-item--active { background: transparent; color: var(--q-nav-accent); font-weight: 600; } /* Uzerine gelince zemin geri bildirimi olsun ama yazi turuncu kalsin, yoksa .q-nav-item:hover onu beyaza cevirir ve vurgu kaybolur. */ .q-nav-item.q-nav-item--active:hover { background: var(--q-nav-hover-bg); color: var(--q-nav-accent); } .q-nav-label { flex: 1 1 auto; min-width: 0; /* font-size: inherit SART. Eski Quami'de koza.css `* { font-size: 9pt }` diyor; evrensel secici bu span'e DOGRUDAN carptigi icin .q-nav-item'daki boyut MIRAS ALINMIYOR ve metin 12px kaliyordu. Ozgullugu (0,0,0) oldugu icin basit bir sinif kurali onu geciyor. Yeni Quami'de zararsiz. */ font-size: inherit; line-height: inherit; /* Uzun adlar ("Dokuman Yonetimi") tek satirda kalsin; sutun dar gelirse kelime kirmak yerine ucu uc nokta ile kisalsin. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- alt menusu olan oge ---------- */ .q-nav-item--parent { justify-content: space-between; } .q-nav-chev { flex: 0 0 auto; width: 7px; height: 7px; margin-right: 0; /* sag bosluk --q-nav-pad-right'tan */ border-right: 1.5px solid var(--q-nav-fg-dim); border-bottom: 1.5px solid var(--q-nav-fg-dim); transform: rotate(-45deg); /* kapali: saga bakar */ transition: transform .15s; } .q-nav-item--parent:hover .q-nav-chev { border-color: var(--q-nav-active-fg); } /* Acik ust baslik: yalniz beyaz yazi ve asagi donuk ok. Zemin degismez. */ .q-nav-node.is-open > .q-nav-item--parent { background: transparent; color: var(--q-nav-active-fg); } .q-nav-node.is-open > .q-nav-item--parent .q-nav-chev { border-color: var(--q-nav-active-fg); transform: rotate(45deg); /* acik: asagi bakar */ } /* ---------- alt oge listesi ---------- */ .q-nav-sub { display: none; } .q-nav-node.is-open > .q-nav-sub { display: block; } /* Alt ogeler SARSIN, kisalmasin: ust seviye adlari tek satira sigiyor ama uzun alt oge adlari ("Bilgi Guvenligi Ihlal Girisimleri") dar sutunda uc nokta ile kesilirse birbirinden ayirt edilemez. */ .q-nav-item--sub .q-nav-label { white-space: normal; overflow: visible; text-overflow: clip; } .q-nav-item--sub { padding-left: var(--q-nav-indent); padding-top: var(--q-nav-pad-y-sub); padding-bottom: var(--q-nav-pad-y-sub); font-size: var(--q-nav-size-sub); color: var(--q-nav-fg-sub); } /* ---------- hareket azaltma tercihi ---------- */ @media (prefers-reduced-motion: reduce) { .q-nav-item, .q-nav-chev { transition: none; } }