@viewdo/dxp-story-player-assets/less/base/inputs.less

## Installation

.form-input-mixins(){

    //error message containers
    ._defaultInputContainerErrorStyles{
        margin: .5em 0 0;
        text-align: left;
    }

    .genErrorMessageContainers(@containerStyle:default) when (@containerStyle = default){
        .ivx-input-error-container{
            ._defaultInputContainerErrorStyles;
        }
    }

    //error messages
    ._defaultErrorMessageStyles{
        color: @red;
        font-size: .75em;
    }

    .genErrorMessages(@inputStyle:default) when (@inputStyle = default){
        .ivx-input-error-message{
            ._defaultErrorMessageStyles;
        }
    }

    .genTextInputs(@inputStyle, @customProperties) when (@inputStyle = custom){
        .ivx-input-error-message{
            ._defaultErrorMessageStyles;
        }
        .setErrorMessageProperties(@inputStyle, @customProperties);
    }

    .setErrorMessageProperties(@inputType, @list) when (@inputType = custom){
        .ivx-input-error-message{
            .setPropertyFromList(@list);
        }
    }

    .setErrorMessageProperties(@inputType, @list) when not (@inputType = default){
        .ivx-input-error-message-@{inputType}{
            .setPropertyFromList(@list);
        }
    }

    //text input containers
    ._defaultInputContainerTextStyles{
        margin-top: 1em;

        .ivx-input-label{
            display: block;
            text-transform: uppercase;
            font-weight: bold;
            font-size: .75em;
            // TODO: Remove this from this mixin
            color: @primary;
            padding-bottom: .5em;
            text-align: left;
        }
    }

    .genTextInputContainers(@containerStyle:default, @label:show) when (@containerStyle = default){
        .ivx-input-container-text,
        .ivx-input-container-email,
        .ivx-input-container-url,
        .ivx-input-container-number{
            ._defaultInputContainerTextStyles;
        }
    }

    //text inputs
    ._defaultTextInputStyles{
        font-size: 1rem;
        border: 1px solid #BDBDBD;
        padding: .5em .75em;
        width: 100%;
        box-sizing: border-box;
    }

    .genTextInputs(@inputStyle:default) when (@inputStyle = default){
        .ivx-input-text,
        .ivx-input-email,
        .ivx-input-url,
        .ivx-input-number{
            ._defaultTextInputStyles;
        }
    }

    .genTextInputs(@inputStyle, @borderRadius: 4px) when (@inputStyle = rounded){
        .ivx-input-text,
        .ivx-input-email,
        .ivx-input-url,
        .ivx-input-number{
            ._defaultTextInputStyles;
            border-radius: @borderRadius;
        }
    }

    .genTextInputs(@inputStyle, @customProperties) when (@inputStyle = custom){
        .ivx-input-text,
        .ivx-input-email,
        .ivx-input-url,
        .ivx-input-number{
            ._defaultTextInputStyles;
        }
        .setTextInputProperties(@inputStyle, @customProperties);
    }

    .setTextInputProperties(@inputType, @list) when (@inputType = custom){
        .ivx-input-text,
        .ivx-input-email,
        .ivx-input-url,
        .ivx-input-number{
            .setPropertyFromList(@list);
        }
    }

    .setTextInputProperties(@inputType, @list) when not (@inputType = default){
        .ivx-input-text-@{inputType},
        .ivx-input-email-@{inputType},
        .ivx-input-url-@{inputType},
        .ivx-input-number-@{inputType}{
            .setPropertyFromList(@list);
        }
    }

    //textarea input containers
    ._defaultInputContainerTextareaStyles{
        margin-top: 1em;

        .ivx-input-label{
            display: block;
            text-transform: uppercase;
            font-weight: bold;
            font-size: .75em;
             // TODO: Remove this from this mixin
            color: @primary;
            padding-bottom: .5em;
            text-align: left;
        }
    }

    .genTextareaInputContainers(@containerStyle:default, @label:show) when (@containerStyle = default){
        .ivx-input-container-textarea{
            ._defaultInputContainerTextareaStyles;
        }
    }

    //textarea inputs
    ._defaultTextareaInputStyles{
        font-size: 1rem;
        border: 1px solid #BDBDBD;
        padding: .5em .75em;
        width: 100%;
        box-sizing: border-box;
    }

    .genTextareaInputs(@inputStyle:default) when (@inputStyle = default){
        .ivx-input-textarea{
            ._defaultTextareaInputStyles;
        }
    }

    .genTextareaInputs(@inputStyle, @borderRadius: 4px) when (@inputStyle = rounded){
        .ivx-input-textarea{
            ._defaultTextareaInputStyles;
            border-radius: @borderRadius;
        }
    }

    .genTextareaInputs(@inputStyle, @customProperties) when (@inputStyle = custom){
        .ivx-input-textarea{
            ._defaultTextareaInputStyles;
        }
        .setTextareaInputProperties(@inputStyle, @customProperties);
    }

    .setTextareaInputProperties(@inputType, @list) when (@inputType = custom){
        .ivx-input-textarea{
            .setPropertyFromList(@list);
        }
    }

    .setTextareaInputProperties(@inputType, @list) when not (@inputType = default){
        .ivx-input-textarea-@{inputType}{
            .setPropertyFromList(@list);
        }
    }

    //radio input containers
    ._defaultInputContainerRadioStyles{
        margin-top: 1em;

        .ivx-input-label{
            margin-top: .5em;
        }

        .ivx-input-label + .ivx-input-label{
            margin-left: .5em;
        }
    }

    .genRadioInputContainers(@containerStyle:default, @label:show) when (@containerStyle = default){
        .ivx-input-container-radio{
            ._defaultInputContainerRadioStyles;
        }
    }

    //radio inputs
    ._defaultRadioInputStyles{
        margin-right: .5em;
    }

    .genRadioInputs(@inputStyle:default) when (@inputStyle = default){
        .ivx-input-radio{
            ._defaultRadioInputStyles;
        }
    }

    .genTextInputs(@inputStyle, @customProperties) when (@inputStyle = custom){
        .ivx-input-radio{
            ._defaultRadioInputStyles;
        }
        .setRadioInputProperties(@inputStyle, @customProperties);
    }

    .setRadioInputProperties(@inputType, @list) when (@inputType = custom){
        .ivx-input-radio{
            .setPropertyFromList(@list);
        }
    }

    .setRadioInputProperties(@inputType, @list) when not (@inputType = default){
        .ivx-input-radio-@{inputType}{
            .setPropertyFromList(@list);
        }
    }

    //checkbox input containers
    ._defaultInputContainerCheckboxStyles{
        margin-top: 1em;

        .ivx-input-label{
            margin-top: .5em;
        }

        .ivx-input-label + .ivx-input-label{
            margin-left: .5em;
        }
    }

    .genCheckboxInputContainers(@containerStyle:default, @label:show) when (@containerStyle = default){
        .ivx-input-container-checkbox{
            ._defaultInputContainerCheckboxStyles;
        }
    }

    //checkbox inputs
    ._defaultCheckboxInputStyles{
        margin-right: .5em;
    }

    .genCheckboxInputs(@inputStyle:default) when (@inputStyle = default){
        .ivx-input-checkbox{
            ._defaultCheckboxInputStyles;
        }
    }

    .genCheckboxInputs(@inputStyle, @customProperties) when (@inputStyle = custom){
        .ivx-input-checkbox{
            ._defaultCheckboxInputStyles;
        }
        .setCheckboxInputProperties(@inputStyle, @customProperties);
    }

    .setCheckboxInputProperties(@inputType, @list) when (@inputType = custom){
        .ivx-input-checkbox{
            .setPropertyFromList(@list);
        }
    }

    .setCheckboxInputProperties(@inputType, @list) when not (@inputType = default){
        .ivx-input-checkbox-@{inputType}{
            .setPropertyFromList(@list);
        }
    }

    //for longer labels on checkbox inputs
    .ivx-input-container-checkbox{
        .ivx-input-label.ivx-input-label-long{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            .ivx-input-checkbox:before{
                position: relative;
                margin-top: 0;
            }

            small{
                display: inline-block;
                text-align: left;
                padding-left: .5rem;
            }
        }
    }


    //options containers
    ._defaultInputContainerOptionsStyles{
        margin-top: 1em;

        .ivx-input-label{
            display: block;
            font-size: .75em;
            padding-bottom: .5em;
            text-align: left;
        }

        .ivx-input-label + .ivx-input-label{

        }
    }

    .genOptionsInputContainers(@containerStyle:default, @label:show) when (@containerStyle = default){
        .ivx-input-container-options{
            ._defaultInputContainerOptionsStyles;
        }
    }

    .genOptionsInputContainers(@containerStyle, @customStyles, @label:show) when (@containerStyle = custom){
        .ivx-input-container-options{
            @customStyles();
        }
    }

    //options input
    ._defaultOptionsInputStyles{
        font-size: 1rem;
        border: 1px solid #BDBDBD;
        background: @white;
        height: 2.25em;
        width: 100%;
        box-sizing: border-box;
    }

    .genOptionsInputs(@inputStyle:default) when (@inputStyle = default){
        .ivx-input-options{
            ._defaultOptionsInputStyles;
        }
    }

    .genCheckboxInputs(@inputStyle, @customProperties) when (@inputStyle = custom){
        .ivx-input-options{
            ._defaultOptionsInputStyles;
        }
        .setOptionsInputProperties(@inputStyle, @customProperties);
    }

    .setOptionsInputProperties(@inputType, @list) when (@inputType = custom){
        .ivx-input-options{
            .setPropertyFromList(@list);
        }
    }

    .setOptionsInputProperties(@inputType, @list) when not (@inputType = default){
        .ivx-input-options-@{inputType}{
            .setPropertyFromList(@list);
        }
    }

    //submit button containers
    ._defaultSubmitButtonContainerCheckboxStyles{
        margin: 1em 0;
    }

    .genSubmitButtonInputContainers(@containerStyle:default) when (@containerStyle = default){
        .ivx-input-container-submit-button{
            ._defaultSubmitButtonContainerCheckboxStyles;
        }
    }

    //submit buttons
    ._default-submit-button-styles(){
        font-size: 1rem;
        border: none;
        background: black;
        color: white;
        padding: .75em 2em;
    }

    .genSubmitButtonInputs(@submitType: default, @submitStyle:{}) when (@submitType = default){
        .ivx-input-submit-button{
            ._default-submit-button-styles;
            @submitStyle();
        }
    }

    .genSubmitButtonInputs(@submitType: default, @submitStyle:{}) when not (@submitType = default){
        .ivx-input-submit-button-@{submitType}{
            ._default-submit-button-styles;
            @submitStyle();
        }
    }


    .createIconSubmitButtons(@icons){
        .ivx-input-submit-button-icon{
            ._iconStyle();
            padding: .75em;
        }
        .ivx-input-submit-button-icon-labeled{
            ._iconStyle();
            i{
                margin-right: .5em;
            }
        }
        .ivx-input-submit-button-icon-labeled-right{
            ._iconStyle();
            i{
                margin-left: .5em;
            }
        }
        ._iconStyle(){
            i{
                height: 1.2em;
                width: 1.2em;
                margin: -.2em;
                font-family: @icons;
                font-size: 1.25em;
            }
            i:before{
                vertical-align: middle;
            }
        }
    }

}