165 lines
3.4 KiB
CSS
165 lines
3.4 KiB
CSS
/* ============================================================
|
|
SCROLL SIG
|
|
============================================================ */
|
|
|
|
|
|
/* ============================================================
|
|
CONTENEDOR
|
|
============================================================ */
|
|
|
|
.scrollsig-container {
|
|
position: relative;
|
|
width: 100%;
|
|
/*
|
|
* Scroll vertical y horizontal.
|
|
*/
|
|
overflow: auto;
|
|
/*
|
|
* Por defecto JS colocará:
|
|
*
|
|
* max-height: 300px;
|
|
*
|
|
* si no existe configuración.
|
|
*/
|
|
box-sizing: border-box;
|
|
/*
|
|
* Ayuda con scroll suave en dispositivos táctiles.
|
|
*/
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
GRID
|
|
============================================================ */
|
|
|
|
.scrollsig-container > table.scrollsig {
|
|
/*
|
|
* Conservamos el comportamiento normal del GridView.
|
|
*/
|
|
width: 100%;
|
|
/*
|
|
* Evitamos espacio adicional debajo del GridView
|
|
* dentro del contenedor.
|
|
*/
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
FILAS STICKY
|
|
============================================================ */
|
|
|
|
/*
|
|
* IMPORTANTE:
|
|
*
|
|
* El único elemento sticky es el TR.
|
|
*
|
|
* No se aplica:
|
|
*
|
|
* position: sticky
|
|
* top
|
|
* z-index
|
|
*
|
|
* a ninguna celda TH o TD.
|
|
*
|
|
*
|
|
* JavaScript asignará el TOP.
|
|
*
|
|
* Primera fila:
|
|
*
|
|
* top: -1px
|
|
*
|
|
* Segunda fila:
|
|
*
|
|
* top: alturaFila1 - 1px
|
|
*
|
|
* Tercera fila:
|
|
*
|
|
* top: alturaFila1
|
|
* + alturaFila2
|
|
* - 1px
|
|
*/
|
|
|
|
.scrollsig-sticky {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
CELDAS DENTRO DEL STICKY
|
|
============================================================ */
|
|
|
|
/*
|
|
* Las celdas NO tienen position sticky.
|
|
*
|
|
* Tampoco les asignamos:
|
|
*
|
|
* top
|
|
* z-index
|
|
*
|
|
* Únicamente permitimos que el fondo existente
|
|
* cubra correctamente su caja.
|
|
*/
|
|
|
|
.scrollsig-sticky > th,
|
|
.scrollsig-sticky > td {
|
|
background-clip: border-box;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
HEADER DEL GRIDVIEW
|
|
============================================================ */
|
|
|
|
/*
|
|
* No asignamos ningún background.
|
|
*
|
|
* El header conserva exactamente el color,
|
|
* clases y estilos que ya tenga el GridView.
|
|
*/
|
|
|
|
|
|
/* ============================================================
|
|
BORDES / STICKY
|
|
============================================================ */
|
|
|
|
/*
|
|
* No modificamos:
|
|
*
|
|
* border-collapse
|
|
* border-spacing
|
|
*
|
|
* porque ScrollSig no debe cambiar el diseño
|
|
* existente del GridView.
|
|
*
|
|
* El pequeño problema visual superior se compensa
|
|
* desplazando el bloque sticky 1px hacia arriba
|
|
* desde JavaScript.
|
|
*/
|
|
|
|
|
|
/* ============================================================
|
|
SCROLLBAR
|
|
============================================================ */
|
|
|
|
/*
|
|
* Dejamos el scrollbar nativo.
|
|
*
|
|
* No modificamos colores ni tamaños para conservar
|
|
* compatibilidad con el estilo actual del sistema.
|
|
*/
|
|
|
|
|
|
/* ============================================================
|
|
RESPONSIVE
|
|
============================================================ */
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
.scrollsig-container {
|
|
width: 100%;
|
|
}
|
|
}
|