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

React JAM UI components

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

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

select-type-1($params) {
    background: $params.default.bg;
    border-color: $params.default.border;
    color: $params.default.color;
    border-radius: $params.default.radius;

    .bar {
        background: $params.default.bar;
    }
}

.select-container {
    position: relative;

    .select {
        font-family: inherit;
        font-size: 14px;
        line-height: 32px;
        margin: 0;
        outline: none;
        padding: 0 10px;
        width: 100%;
        border-radius: 3px;
        border: 1px solid #666666;

        &[disabled] {
            background: #e5e5e5;
            color: #949494;
        }

        &::-webkit-input-placeholder {
            color:#FFFFFF;
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }
        &::-moz-placeholder {
            color:#FFFFFF;
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }

        &:focus {
            border-color: #0f90fd;
            box-shadow: 0 0 0 1px #0f90fd;
            position: relative;
            z-index: 3;

            &::-webkit-input-placeholder {
                opacity: 0;
            }
            &::-moz-placeholder {
                opacity: 0;
            }

            ~ .bar {
                width: 100%;
                left: 0;
                z-index: 5;
            }
        }

        for type, params in $sizes {
            if (type == 'default') {
                & {
                    height: params.height;
                    line-height: params.height;
                    font-size: params[font-size];
                    padding: 0 (params.height/3);
                }
            } else {
                &.{type} {
                    height: params.height;
                    line-height: params.height;
                    font-size: params[font-size];
                    padding: 0 (params.height/3);
                }
            }
        }

        for type, params in $inputs {
            if (type == 'default') {
                & {
                    select-type-1(params)
                }
            } else {      
                &.select-{type} {
                    select-type-1(params)
                }
            }
        }
    }

    .bar {
        display: block;
        left: 50%;
        width: 0;
        background: #F7882F;
        height: 2px;
        bottom: 0;
        position: absolute;
        transition: left 0.2s ease, width 0.2s ease;
    }
}