@krobotech/v-form-builder/src/configs/styles.js

Vue Form Builder PRO MAX built from top of Vue. Super dynamic and flexible including Drag and Drop feature.

/**
 * Styling for Vue-Form-Builder
 * Mostly it about the Container class.
 * <note>
 * The classes can be re-placed in run-time (For other CSS framework if you want)
 * But the main ideas is following Bootstrap, hopefully yours framework is have a same structural.
 * </note>
 * @author Phat Tran
 */

const STYLES = {
    CONTAINER: {
        FLUID: "container-fluid md-layout",
        NORMAL: "container"
    },

    ROW: "row md-layout",

    COLUMNS: {
        COL1: "col-md-1 md-layout-item md-size-5",
        COL2: "col-md-2 md-layout-item md-size-10",
        COL3: "col-md-3 md-layout-item md-size-25",
        COL4: "col-md-4 md-layout-item md-size-33",
        COL5: "col-md-5 md-layout-item md-size-40",
        COL6: "col-md-6 md-layout-item md-size-50",
        COL7: "col-md-7 md-layout-item md-size-60",
        COL8: "col-md-8 md-layout-item md-size-66",
        COL9: "col-md-9 md-layout-item md-size-75",
        COL10: "col-md-10 md-layout-item md-size-90",
        COL11: "col-md-11 md-layout-item md-size-95",
        COL12: "col-md-12 md-layout-item md-size-100",
    },

    /**
     * List Group Classes - Used in AddSectionVueControl
     */
    LIST_GROUP: {
        CONTAINER: "list-group md-list", // div.list-group
        SINGLE_ITEM: "list-group-item list-group-item-action md-list-item md-list-item-action", //a[href=...].list-group-item.list-group-item-action
    },

    /**
     * Button Classes
     */
    BUTTON: {
        PRIMARY: "btn btn-primary md-button md-raised md-primary md-theme-default",
        SECONDARY: "btn btn-secondary md-button md-raised md-secondary md-theme-default",
        DEFAULT: "btn btn-default md-button md-raised md-default md-theme-default",
        SUCCESS: "btn btn-success md-button md-raised md-success md-theme-default",
        DANGER: "btn btn-danger md-button md-raised md-accent md-theme-default",
        WARNING: "btn btn-warning md-button md-raised md-warning md-theme-default",
        INFO: "btn btn-info md-button md-raised md-info md-theme-default",
    },

    /**
     * Form Classes
     */
    FORM: {
        FORM_GROUP: "form-group",
        INPUT_GROUP: "input-group",
        FORM_CONTROL: "form-control md-field",
        ERROR_OUTLINE: "is-invalid md-error",
        ERROR_MESSAGE: "invalid-feedback"
    },

    /**
     * Table Classes
     */
    TABLE: {
        TABLE_CLASS: "table md-table",
        TR_CLASS: "md-table-row",
        TD_CLASS: "md-table-cell"
    },

};

export {
    STYLES
}