react-jam-ui/components/Counter/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;

.counter {
    position: relative;
    background-color: rgba(240, 241, 243, 1);
    border-radius: 4px;
    width: 120px;
    height: 40px;
    line-height: 32px;
    padding: 4px 40px;
    color: rgba(43, 43, 43, 1);
    text-align: center;

    &__minus,
    &__plus {
        cursor: pointer; 
        position: absolute;
        top: 4px;
        text-align: center;
        font-style: normal;
        height: 32px;
        width: 32px;
        background-color: #FFFFFF;
        border-radius: 2px;
        box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.07);
        user-select: none;

        &:hover {
            background-color: #1b71f1;
            color: #FFFFFF;
        }
    }

    &__minus {
        left: 4px;
    }

    &__plus {
        right: 4px;
    }
    
    &__num {
        font-size: 15px;
        color: rgba(43, 43, 43, 1);
        text-align: left;
        line-height: 22px;
    }

    &.disabled {
        opacity: 0.5;
        .counter__minus,
        .counter__plus,
        .counter__num {
            cursor: default;
        }
        .counter__minus,
        .counter__plus {
            &:hover {                
                background-color: #FFFFFF;
                color: rgba(43, 43, 43, 1);
            }
        }
    }

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

}