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

React JAM UI components

$default = json('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;

@import 'themes/default.styl';
@import 'themes/material.styl';

.input-container {
    position: relative;
    
    .input {
        font-family: inherit;
        font-size: 14px;
        line-height: 32px;
        margin: 0;
        outline: none;
        padding: 0 10px;
        width: 100%;

        &[readonly] {
            background: #e5e5e5;
            color: #8b8b8b;
        }

        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 { 
        &.input-{type} {
            define('name', params.theme)
            input-{name}(params)
        }
    }
}