, que es lo que se hizo primero y NO SE VE:
Bootstrap 5 fija el color en las CELDAS -.table > :not(caption) > * > * lleva su propio
color: var(--bs-table-color-...)-, asi que el color heredado del renglon nunca llega al | .
Por eso esta regla apunta a "> *", igual que row-selected de arriba. Se usa ademas la variable
de estado de Bootstrap para no pelear con el striping ni con el hover.
Son DOS nombres y un solo efecto a proposito: hoy los dos casos se leen igual, pero si manana
se quiere distinguirlos (el vencido en naranja, por ejemplo) se separan aqui sin tocar ni una
pantalla. */
.table > tbody > tr.fila-cancelada > *,
.table > tbody > tr.fila-vencida > * {
color: var(--bs-danger);
--bs-table-color-state: var(--bs-danger);
}
/* Contenido de una GUIA DE USUARIO dentro de su modal. El texto llega como HTML generado desde
Markdown (Markdig), asi que aqui solo se le da forma legible: sin esto las tablas salen sin
bordes y los encabezados con el tamano de una portada. */
.guia-usuario h1 { font-size: 1.35rem; font-weight: 600; margin-bottom: .75rem; }
.guia-usuario h2 { font-size: 1.15rem; font-weight: 600; margin-top: 1.25rem; }
.guia-usuario h3 { font-size: 1rem; font-weight: 600; margin-top: 1rem; }
.guia-usuario table {
width: 100%;
margin: .75rem 0;
border-collapse: collapse;
font-size: 1rem;
}
.guia-usuario th,
.guia-usuario td {
border: 1px solid #dee2e6;
padding: .35rem .5rem;
vertical-align: top;
}
.guia-usuario th { background-color: #f8f9fa; text-align: left; }
.guia-usuario code {
background-color: #f8f9fa;
padding: .1rem .3rem;
border-radius: .2rem;
}
/* Las notas del documento van en blockquote: se marcan con una barra en vez de comillas. */
.guia-usuario blockquote {
border-left: 3px solid #adb5bd;
margin: .75rem 0;
padding: .25rem .75rem;
color: #495057;
}
/* Contenedor scrolleable con altura limitada: da tope a las listas largas y habilita el
sticky thead. Con pocos renglones NO debe salir barra: overflow-y auto solo la muestra si
el contenido desborda el max-height.
MVarela ago/26: aqui vivia , y era el causante del scroll fantasma. Necesita un
contenedor con altura RESUELTA para saber cuantas filas caben; con max-height y altura
automatica no tiene contra que medir y emitia filas espaciadoras que inflaban el contenido.
Se sustituyo por @foreach: estos catalogos son de decenas o cientos de renglones. */
.table-scroll {
/* MVarela ago/26 SIN max-height ni overflow propios, a proposito.
Antes era max-height: calc(100vh - 220px) + overflow-y: auto. Ese 220 es un numero magico
que pretendia descontar encabezado, migas y titulo de la tarjeta; cuando lo de arriba mide
mas de 220 -o el viewport se encoge- el contenedor queda MAS BAJO que su contenido y sale
barra de scroll aunque quepan todas las filas en pantalla. Se veia con 2 y con 7 renglones.
Ahora la tabla crece con su contenido y quien hace scroll es la pagina, que es lo natural.
El encabezado sigue fijo: .sticky-thead se pega al viewport al desplazar la pagina. */
border: 1px solid #dee2e6;
border-radius: 0.375rem;
background-color: #fff;
}
.table-scroll > .table {
margin-bottom: 0;
}
/* MVarela ago/26 Alto minimo de fila, para que los renglones queden parejos aunque unos lleven
botones y otros solo texto. Ya no hay ninguna constante en C# atada a este valor: el
desplazamiento al renglon seleccionado lo resuelve scrollIntoView, que no necesita saber
cuanto mide una fila. */
.table-scroll tbody tr {
min-height: 46px;
}
/* Header pegado al tope del contenedor scrolleable */
/* MVarela ago/26 El encabezado se pega DEBAJO de la barra superior, no en el borde del viewport.
Antes era top:0 y el thead si se pegaba, pero quedaba OCULTO tras .erp-topbar, que es
position:fixed de 40px con z-index 1000. Se usa la misma variable que define esa altura para
que ambos se muevan juntos.
El sticky va en los TH y no en el THEAD: es lo que soportan todos los navegadores; sobre
solo funciona en los mas recientes.
z-index 2 a proposito: por encima de las filas y por debajo de la topbar (1000), de modo que
el encabezado se deslice bajo ella y no al reves. */
.sticky-thead th {
position: sticky;
top: var(--erp-topbar-height, 40px);
z-index: 2;
background-color: #fff;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
/* 🔴 MVarela sep/26 DENTRO DE UN MODAL EL OFFSET NO APLICA, Y SE VE.
Los 40px de arriba existen para esquivar la barra superior de la aplicacion. En un modal no hay
barra que esquivar -el contenedor de scroll es el propio modal-, asi que el encabezado se pegaba
40px MAS ABAJO de donde debe y por ese hueco se asomaba el renglon anterior: parecia que el
sticky no funcionaba, cuando en realidad se estaba fijando contra una referencia equivocada.
Se vio en el detalle del Planeador de Compras; afecta igual a los otros dos modales con
encabezado fijo (la bitacora de Clientes y la de Proveedores). */
.modal .sticky-thead th {
top: 0;
}
/* ...pero con top:0 NO BASTA, y el porque es la parte que cuesta ver: con modal-dialog-scrollable
quien scrollea es .modal-body, y .modal-body lleva padding: 1rem de Bootstrap. Un sticky se pega
al inicio del CONTENIDO del contenedor, no al borde del contenedor, asi que quedaba un carril de
16px por el que se veian pasar los renglones. Parecia "casi bien", que es peor que mal.
La salida no es pelear con ese padding sino mover el scroll a la TABLA, que no tiene ninguno: el
encabezado se pega entonces a su propio contenedor y queda al ras.
El max-height va en vh -no el calc(100vh - 220px) que se retiro de .table-scroll en pagina- y por
eso aqui SI es seguro: el numero magico de alla descontaba encabezado, migas y titulo; aqui el
modal ya esta acotado por el viewport y solo se limita la tabla dentro de el. */
.modal .table-scroll {
max-height: 60vh;
overflow: auto;
}
/* Validacion EditForm */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
/* ============================ IMPRESION ============================
MVarela ago/26 Estandar de impresion del shell: al imprimir un reporte debe salir el reporte,
no la aplicacion. Se ocultan el cromo (barra superior, menu, boton flotante) y los controles
que no significan nada en papel (buscador, boton de Acciones, migas).
OJO: estas reglas son GLOBALES, aplican a TODA pantalla del shell que se mande a imprimir.
Es deliberado -el menu nunca debe salir impreso- pero conviene tenerlo presente al agregar
pantallas: lo que deba imprimirse NO puede marcarse d-print-none.
Para lo especifico de cada pantalla se usan las utilerias de Bootstrap:
d-print-none oculta al imprimir
d-none d-print-block se ve SOLO al imprimir (encabezados de reporte) */
@media print {
/* Cromo de la aplicacion. */
.erp-topbar,
.erp-sidebar,
.erp-reportar-fab,
.breadcrumb {
display: none !important;
}
/* El contenido recupera la hoja completa: sin los margenes que dejaban sitio a la barra
superior y al menu lateral. */
.erp-page,
.erp-sidebar.is-expanded ~ .erp-page {
margin: 0 !important;
min-height: auto !important;
}
.erp-main {
padding: 0 !important;
}
/* La tarjeta deja de ser tarjeta: en papel el borde y la sombra solo gastan tinta. */
.card {
border: 0 !important;
box-shadow: none !important;
}
.card-body {
padding: 0 !important;
}
/* El contenedor de la tabla pierde su marco por el mismo motivo. */
.table-scroll {
border: 0 !important;
border-radius: 0 !important;
}
/* El encabezado deja de ser sticky -en papel no hay scroll- y pasa a REPETIRSE en cada
hoja, que es lo que se espera de un reporte de varias paginas. */
.sticky-thead th {
position: static !important;
box-shadow: none !important;
}
thead {
display: table-header-group;
}
/* Una fila no se parte entre dos hojas. */
tr {
page-break-inside: avoid;
}
/* Bordes finos para que la tabla se lea sin depender de los fondos alternos, que muchas
impresoras no pintan. */
.table th,
.table td {
border-bottom: 1px solid #999 !important;
}
}
|