metro4/source/components/spinner/spinner.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.spinner {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    cursor: text;
    position: relative;
    height: @inputHeight;
    line-height: @inputHeight;

    input {
        border: none!important;
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        line-height: @inputHeight;
        font-size: 16px;
        padding: 0 4px;
        text-align: center;
        &:focus {
            box-shadow: none!important;
        }
    }

    .button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-weight: bold;
        background-color: @light;
        padding: 0;
    }

    .spinner-button-plus {order: 3}
    .spinner-button-minus {order: 1}
    input {order: 2}

    &.buttons-left {
        .spinner-button-plus {order: 2}
        .spinner-button-minus {order: 1}
        input {order: 3; text-align: right;}
    }
    &.buttons-right {
        .spinner-button-plus {order: 3}
        .spinner-button-minus {order: 2}
        input {order: 1; text-align: left;}
    }
}

.spinner {
    &.input-large {
        height: @input-lx;
        line-height: @input-lx;

        input {
            font-size: 1.3rem;
        }

        .spinner-button {
            height: @input-lx - 2;
            width: @input-lx - 2;
            min-width: @input-lx - 2;
            line-height: @input-lx - 2;

            font-size: 1.3rem;

            [class*=mif-] {
                font-size: 1.3rem;
            }
        }

        .default-icon-plus, .default-icon-minus {
            width: 21px;
            height: 21px;
        }
    }

    &.input-small {
        height: @input-sx;
        line-height: @input-sx;

        input {
            font-size: .9rem;
        }

        .spinner-button {
            height: @input-sx - 2;
            width: @input-sx - 2;
            min-width: @input-sx - 2;
            line-height: @input-sx - 2;

            font-size: .9rem;

            [class*=mif-] {
                font-size: .9rem;
            }
        }

        .default-icon-plus, .default-icon-minus {
            width: 14px;
            height: 14px;
        }

    }
}