toloframework/ker/mod/wdg.combo.css

Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style.

div.wdg-combo {
    position: relative;
    display: inline-block;
    border: 0;
    width: auto;
    min-height: 2rem;
    padding: 0;
    margin: .5rem;
    font-size: 1rem;
    text-align: left;
    vertical-align: middle;
    background-color: #fff;
    cursor: pointer;    
}

div.wdg-combo.disabled {
    cursor: normal;
}

div.wdg-combo > div.table button.body {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: .2rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    white-space: nowrap;
    overflow-x: hidden;
}

div.wdg-combo > div.table div.button {
    width: 1rem;
}

div.wdg-combo.disabled > div.table button.body {
    opacity: .5;
}

div.wdg-combo > div.table {
    pointer-events: none;
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

div.wdg-combo > div.table > div {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

div.wdg-combo.wide {
    display: block;
    width: auto;
}

div.wdg-combo > * {
    display: block;
    margin: 0;
    width: 100%;
    font-size: 1rem;
}

div.wdg-combo.no-label > div.label {
    display: none;
}

div.wdg-combo > div.label {
    vertical-align: bottom;
    line-height: 1rem;
    height: 1rem;
    padding: 0 .75rem;
}

ul.wdg-combo-modal {
    max-height: 240px;
    overflow: auto;
    margin: 0;
    padding: 0 .2rem;
    border-top: 1px solid rgba(0,0,0,.3);
}

ul.wdg-combo-modal > li {
    list-style: none;
    margin: 0;
    padding: .25rem .5rem;
    border-bottom: 1px solid rgba(0,0,0,.3);
    cursor: pointer;
    transition: all .3s;
}

ul.wdg-combo-modal > li > * {
    pointer-events: none;
}