Plataforma-de-desarrolladores/SIG.Web/Styles/filtrosig.css

/* ============================================================
   FILTRO SIG
   ============================================================ */

.filtrosig-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 10px 0;
    position: relative;
    z-index: 20;
}


/* ============================================================
   CONTROL COMPLETO
   ============================================================ */

.filtrosig-control {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 390px;
    height: 38px;
    font-family: inherit;
}


/* ============================================================
   INPUT
   ============================================================ */

.filtrosig-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #b8bec5;
    border-right: 0;
    border-radius: 4px 0 0 4px;
    background: #fff;
    /*
     * Dejamos un poco más de espacio del lado derecho porque
     * el control azul se monta ligeramente sobre el input.
     */
    padding: 0 32px 0 12px;
    font-family: inherit;
    font-size: 14px;
    color: #555;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}


    .filtrosig-input::placeholder {
        color: #8b9197;
    }


    .filtrosig-input:focus {
        border-color: #4d90c7;
        box-shadow: 0 0 0 1px rgba(77, 144, 199, .12);
    }


/* ============================================================
   PARTE AZUL
   ============================================================ */

/*
 * Este contenedor forma la cápsula:
 *
 *   ( lupa | campo seleccionado | flecha )
 *
 * Si está seleccionado "Todos", el campo central no aparece:
 *
 *   ( lupa | flecha )
 */

.filtrosig-actions {
    display: flex;
    align-items: stretch;
    height: 38px;
    background: #337ab7;
    /*
     * 19px = mitad de 38px.
     * Esto genera los extremos completamente redondeados.
     */
    border-radius: 19px !important;
    /*
     * Se monta ligeramente sobre el input.
     */
    margin-left: -19px;
    position: relative;
    z-index: 2;
    /*
     * Hace que el contenido interno respete
     * los extremos redondeados.
     */
    overflow: hidden;
}


/* ============================================================
   BOTÓN LUPA
   ============================================================ */

.filtrosig-search {
    width: 42px;
    min-width: 42px;
    height: 38px;
    border: 0;
    /*
     * Siempre redondeado del lado izquierdo.
     */
    border-radius: 19px 0 0 19px !important;
    background: #337ab7;
    color: #fff;
    cursor: pointer;
    padding: 0;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}


    /*
 * FontAwesome
 *
 * JS:
 *
 * <i class="fa fa-search"></i>
 */

    .filtrosig-search .fa {
        font-size: 14px;
        color: #fff;
    }


/* ============================================================
   CAMPO SELECCIONADO
   ============================================================ */

/*
 * Por defecto estamos en "Todos".
 *
 * En ese caso NO mostramos texto entre
 * la lupa y la flecha.
 */

.filtrosig-selected-field {
    display: none;
    height: 38px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #337ab7;
    color: #fff;
    white-space: nowrap;
    font-family: inherit;
    font-size: 13px;
    font-weight: normal;
    padding: 0 10px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*
 * Cuando JS agrega:
 *
 * .campo-seleccionado
 *
 * mostramos el título.
 *
 * Ejemplo:
 *
 * ( 🔍 Fraccionamiento | ▼ )
 */

.filtrosig-control.campo-seleccionado
.filtrosig-selected-field {
    display: flex;
}


/* ============================================================
   BOTÓN FLECHA
   ============================================================ */

.filtrosig-arrow {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border: 0;
    /*
     * Separador blanco entre el contenido
     * y la flecha.
     */
    border-left: 1px solid rgba(255,255,255,.65);
    /*
     * Siempre redondeado del lado derecho.
     */
    border-radius: 0 19px 19px 0;
    background: #337ab7;
    color: #fff;
    cursor: pointer;
    padding: 0;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}


    /* ============================================================
   HOVER BOTONES
   ============================================================ */

    .filtrosig-search:hover,
    .filtrosig-arrow:hover {
        background: #286090;
    }


    .filtrosig-search:focus,
    .filtrosig-arrow:focus {
        outline: none;
    }


/* ============================================================
   FLECHA
   ============================================================ */

.filtrosig-chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    /*
     * Compensa visualmente la rotación.
     */
    margin-top: -5px;
    display: block;
}


/* ============================================================
   MENÚ DE CAMPOS
   ============================================================ */

.filtrosig-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 41px;
    min-width: 210px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #b8bec5;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    padding: 4px 0;
    z-index: 99999;
}


/*
 * JS agrega menu-open cuando se pulsa
 * la flecha.
 */

.filtrosig-control.menu-open
.filtrosig-menu {
    display: block;
}


/* ============================================================
   OPCIONES DEL MENÚ
   ============================================================ */

.filtrosig-option {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    padding: 7px 14px;
    color: #333;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}


    .filtrosig-option:hover {
        background: #f1f1f1;
    }


    .filtrosig-option:focus {
        outline: none;
    }


    .filtrosig-option.active {
        background: #d9edf7;
        color: #31708f;
    }


/* ============================================================
   FILAS OCULTADAS POR FILTROSIG
   ============================================================ */

/*
 * IMPORTANTE:
 *
 * Esta es la única marca que FiltroSig utiliza
 * para ocultar una fila.
 *
 * Al volver a mostrar una fila solamente se elimina
 * filtrosig-hidden.
 *
 * NO se modifica:
 *
 *      style="display:none"
 *
 * ni clases agregadas por otras funciones.
 */

tr.filtrosig-hidden {
    display: none !important;
}


/* ============================================================
   FILAS IGNORADAS
   ============================================================ */

/*
 * Esta clase solamente sirve como marca para JS.
 *
 * NO ponemos display aquí porque estas filas deben
 * conservar el comportamiento que ya tengan.
 */

tr.filtrosig-ignore {
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

    .filtrosig-control {
        width: 100%;
        max-width: 390px;
    }


    .filtrosig-container {
        padding-left: 5px;
        box-sizing: border-box;
    }


    .filtrosig-selected-field {
        max-width: 120px;
    }
}

.filtrosig-menu.filtrosig-menu-flotante {
    display: block;
    position: fixed;
    z-index: 10060;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}