react-jam-ui/components/Suggest/styles.styl

React JAM UI components

$layoutDefault = json('../Layout/default.json', { hash: true });
$custom = json('../../../../ui.config.json', { hash: true, optional: true });

$sizes = typeof($custom) != 'null' ? $custom.$sizes : $layoutDefault.$sizes;

.suggest {
    position: relative;
    outline: none;

    .suggest-list {
        position: absolute;
        top: 32px;
        background: #FFFFFF;
        border: 1px solid #FAFAFA;
        z-index: 120;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        max-height: 300px;
        overflow: auto;
    }

    for type, params in $sizes {
        if (type == 'default') {
            & .suggest-list {
                top: params.height;
            }
        } else {
            &.{type} .suggest-list {
                top: params.height;
            }
        }
    }
        
    .suggest-item {
        cursor: pointer;
        padding: 3px 10px;
        &:hover {
            background: #FAFAFA;
        }
    }
}