groundfloor-react-ui 1.2.9 → 1.2.11

package/components/constants/defaultStyle.js

@@ -1,804 +0,0 @@
-import defaultThemeColor from './defaultThemeColor';
-
-const defaultStyles = {
-    /**
-     * Common Style poroperties of all the element of the library
-     */
-    common: {
-        color: 'blue',
-        'background-color': `${defaultThemeColor.bgColor}`,
-    },
-    /**
-     * Default Style of the element label
-     */
-    label: {
-        'padding-left': '6px',
-        'font-style': 'normal',
-        'font-weight': 'normal',
-        'font-size': '14px',
-        display: 'flex',
-        width: 'inherit',
-        'align-items': 'flex-start',
-
-        'margin-bottom': '0',
-        'padding-bottom': '0',
-    },
-    button: {
-        color: 'red',
-        'border-color': 'black',
-    },
-
-    /**
-     * Default Style of the progressBar
-     */
-    // progressWrapper: {
-    //   height: '10px',
-    //   'border-radius': '10px',
-    //   'margin-top': '13px',
-    //   'margin-left': '13px',
-    //   'margin-right': '13px',
-    //   width: 'inherit',
-    //   'background-color': `${defaultThemeColor.primary['primary-1']}`,
-    // },
-
-    /**
-     * Default Style of the progressBar Container
-     */
-    // containerWrapper: {
-    //   height: 'inherit',
-    //   width: 'inherit',
-    //   transition: 'width 1s ease-in-out',
-    //   'border-radius': 'inherit',
-    //   'text-align': 'right',
-    //   'background-color': `${defaultThemeColor.primary['primary-1']}`,
-    // },
-    /**
-     * Default Style of the progressBar Label
-     */
-    progressbarLabel: {
-        display: 'block',
-        'margin-left': '13px',
-        'margin-bottom': '7px',
-        'padding-bottom': '0',
-        'font-style': 'normal',
-        'font-weight': 'normal',
-        'font-size': '14px',
-        color: `${defaultThemeColor.neutral['neutral-2']}`,
-    },
-    /**
-     * Default Style of the Spinner
-     */
-    spinner: {
-        'background-color': `${defaultThemeColor.variant['neutral-1']}`,
-    },
-    /**
-     * Default Style of the Avatar
-     */
-    avatarContainer: {
-        background: 'transparent',
-        display: 'flex',
-        'align-items': 'center',
-        width: '100%',
-        position: 'relative',
-    },
-    avatarCircle: {
-
-        'border-radius': '50%',
-        display: 'flex',
-        'align-items': 'center',
-        'justify-content': 'center',
-        'box-sizing': 'border-box',
-    },
-    avatarCircleSM: {
-        'font-weight': '600',
-        'font-size': '13px',
-        'min-width': '30px',
-        'min-height': '30px',
-    },
-    avatarCircleMD: {
-        'font-weight': '400',
-        'font-size': '12px',
-        'min-width': '32px',
-        'min-height': '32px',
-    },
-    avatarCircleLG: {
-        'font-weight': '400',
-        'font-size': '16px',
-        'min-width': '38px',
-        'min-height': '38px',
-    },
-    avatarName: {
-    },
-    avatarNameSM: {
-        'margin-left': '8px',
-        'font-size': '14px',
-    },
-    avatarNameMD: {
-        'margin-left': '10px',
-        'font-size': '16px',
-    },
-    avatarNameLG: {
-        'margin-left': '12px',
-        'font-size': '16px',
-    },
-    /**
-     * Default Style of the textbox wrapper
-     */
-    'textbox-wrapper': {
-        border: `1px solid ${defaultThemeColor.border}`,
-        'border-radius': '4px',
-        padding: '6.5px 7px',
-        display: 'flex',
-        'align-items': 'center',
-        'line-height': '.5rem',
-        'background-color': `${defaultThemeColor['bgColor']}`,
-        position: 'relative'
-    },
-    /**
-     * Default Style of the input wrapper
-     */
-    'input-wrapper': {
-        border: '0',
-        outline: '0',
-        color: `${defaultThemeColor.variant['primary-2']}`,
-        margin: '0 5px',
-        padding: '0px',
-        'font-size': '14px',
-        'flex-grow': '1',
-        'flex-shrink': '0',
-        'white-space': 'nowrap',
-        'overflow': 'hidden',
-        'text-overflow': 'ellipsis',
-    },
-    'textarea-wrapper': {
-        border: '0',
-        outline: '0',
-        color: `${defaultThemeColor.variant['primary-2']}`,
-        margin: '0 5px',
-        padding: '5px',
-        'font-size': '14px',
-        'flex-grow': '1',
-        'flex-shrink': '0',
-        'line-height': '12px',
-    },
-    /**
-     * Default Style of the input label
-     */
-    'label-text': {
-        'font-family': 'Averta',
-        'font-style': 'normal',
-        'font-weight': 'normal',
-        'font-size': '14px',
-        color: `${defaultThemeColor.variant['neutral-2']}`,
-        display: 'flex',
-        'align-items': 'center',
-        'justify-content': 'center',
-        width: 'max-content',
-        'background-color': 'transparent',
-        'margin-bottom': '0px',
-        'padding-bottom': '0px',
-    },
-    /**
-     * Default Style of the Image
-     */
-    image: {
-        'border-radius': '0%',
-        width: '100%',
-        height: '100%',
-    },
-    imageAvatar: {
-        'border-radius': '50%',
-        'box-sizing': 'border-box',
-        position: 'absolute',
-    },
-    imageAvatarSM: {
-        'border-radius': '50%',
-        'box-sizing': 'border-box',
-        position: 'absolute',
-        width: '30px',
-        height: '30px',
-    },
-    imageAvatarMD: {
-        'border-radius': '50%',
-        'box-sizing': 'border-box',
-        position: 'absolute',
-        width: '32px',
-        height: '32px',
-    },
-    imageAvatarLG: {
-        'border-radius': '50%',
-        'box-sizing': 'border-box',
-        position: 'absolute',
-        width: '38px',
-        height: '38px',
-    },
-    table: {
-        table: {
-            style: {
-                borderRadius: '4px',
-                paddingRight: '0px', // For the vertical scroll bar
-                // borderBottom: `1px solid red`,
-                backgroundColor: 'transparent',
-            },
-        },
-        checkbox: {
-            style: {
-                maxHeight: '28px',
-                maxWidth: '28px',
-            },
-        },
-
-        headRow: {
-            style: {
-                background: `${defaultThemeColor.variant['neutral-5']}`,
-                borderLeft: `1px solid ${defaultThemeColor.variant['neutral-5']}`,
-                borderRight: `1px headRowsolid ${defaultThemeColor.variant['neutral-5']}`,
-                borderTop: `1px solid ${defaultThemeColor.variant['neutral-5']}`,
-                borderTopLeftRadius: '4px',
-                borderTopRightRadius: '4px',
-                paddingLeft: '56px', // To align to the body cells on the left side
-                borderBottom: 'none',
-                minHeight: '44px',
-                maxHeight: '44px',
-            },
-        },
-        headCells: {
-            style: {
-                // color: `${defaultThemeColor.variant['primary-2']}`,
-                fontSize: '14px',
-                fontWeight: '600',
-                '&:first-of-type': {
-                    paddingLeft: '0px !important', //Remove default value since already apply the paddingLeft to the whole table to align the head to the body
-                },
-            },
-        },
-        rows: {
-            //This apply to all row of data not to the head table
-            style: {
-                background: `${defaultThemeColor.variant['bgColor']}`,
-                '&:not(:last-of-type)': {
-                    borderBottomColor: 'none',
-                },
-                '&:last-of-type': {
-                    borderBottomLeftRadius: '4px',
-                    borderBottomRightRadius: '4px',
-                },
-                borderLeft: `1px solid ${defaultThemeColor.variant['neutral-5']}`,
-                borderRight: `1px solid ${defaultThemeColor.variant['neutral-5']}`,
-                borderBottom: `1px solid ${defaultThemeColor.variant['neutral-5']}`,
-            },
-            highlightOnHoverStyle: {
-                backgroundColor: `${defaultThemeColor.variant['neutral-5']}`,
-            },
-        },
-    },
-    /**
-     * Default Style of the Header
-     */
-    header: {
-        display: 'flex',
-        'justify-content': 'space-between',
-        'align-items': 'center',
-        position: 'fixed',
-        'z-index': '1000',
-        top: '0',
-        right: '0',
-        left: '0',
-        'min-height': '51px',
-        'padding-left': '39px',
-        'font-size': '16px',
-    },
-    /**
-     * Default Style of the Content
-     */
-    content: {
-        'background-color': '#eef1f7',
-        width: '100%',
-        'min-height': '100%',
-        'padding-top': '53px',
-        'box-sizing': 'border-box',
-        display: 'flex',
-        'flex-direction': 'column',
-        'margin-left': '70px',
-        // 'transition': 'margin-left ease 400ms !important',
-    },
-    /**
-     * Default Style of the radio component
-     */
-    'radio-outer-circle': {
-        width: '20px',
-        height: '20px',
-        'min-width': '20px',
-        'min-height': '20px',
-        'border-radius': '50%',
-        display: 'flex',
-        'justify-content': 'center',
-        'align-items': 'center',
-    },
-    'radio-inner-circle': {
-        display: 'flex',
-        'align-self': 'center',
-        margin: '0',
-        // 'padding': '.5px',
-        'border-radius': '50%',
-    },
-    'radio-label': {
-        display: 'block',
-        'margin-bottom': '7px',
-        'padding-bottom': '0',
-        color: `${defaultThemeColor.variant['neutral-2']}`,
-    },
-    'option-text': {
-        // 'background-color': `${defaultThemeColor.bgColor}`,
-        color: '#A9B1B8',
-        'font-size': '16px',
-    },
-    /**
-     * Default Style of the Sidebar
-     */
-    sidebarContainer: {
-        'min-height': '100%',
-        position: 'fixed',
-        color: 'white',
-        width: '70px',
-        transition: 'width ease 400ms',
-    },
-    /**
-     * Default Style of the checkbox label
-     */
-    'checkBox-outer': {
-        border: `2px solid ${defaultThemeColor.border}`,
-        minWidth: '20px',
-        width: '20px',
-        height: '20px',
-        'border-radius': '3px',
-        cursor: 'pointer',
-        'background-color': `${defaultThemeColor.bgColor}`,
-    },
-    'checkBox-inner': {
-        'background-repeat': 'no-repeat',
-        'background-position': 'center',
-        minWidth: '20px',
-        width: '20px',
-        height: '20px',
-        color: `${defaultThemeColor.bgColor}`,
-        cursor: 'pointer',
-        'text-align': 'center',
-        'border-radius': '3px',
-    },
-    'check-label': {
-        display: 'block',
-        'margin-bottom': '7px',
-        'padding-bottom': '0px',
-        color: `${defaultThemeColor.variant['neutral-2']}`,
-    },
-    'checkbox-option-text': {
-        'font-size': '16px',
-        'margin-left': '10px',
-        'background-color': `${defaultThemeColor.bgColor}`,
-    },
-    'toggle-switch-wrapper': {
-        display: 'flex',
-        'align-items': 'center',
-        gap: '7px',
-        width: 'fit-content',
-    },
-    'toggle-switch-checkbox-label': {
-        position: 'absolute',
-        width: '45px',
-        height: '22px',
-        'border-radius': '31px',
-        cursor: 'pointer',
-        marginBottom: '0px',
-    },
-    'toggle-switch-option-text': {
-        // 'background-color': `${defaultThemeColor.bgColor}`,
-        color: `${defaultThemeColor.neutral['neutral-1']}`,
-        'font-size': '16px',
-    },
-    /**
-     * Default Style of the dropZone component
-     */
-    'dropzone-parent': {
-        height: '86px',
-        'padding-left': '8px',
-        'padding-right': '8px',
-        display: 'flex',
-        'justify-content': 'center',
-        'align-items': 'center',
-        'font-size': '16px',
-        'border-radius': '5.5px',
-        color: ` ${defaultThemeColor.textColor}`,
-    },
-    'dropzone-file-div': {
-        width: 'inherit',
-        height: '38px',
-        display: 'flex',
-        'justify-content': 'center',
-        'align-items': 'center',
-        'font-size': '14px',
-        color: `${defaultThemeColor.textColor}`,
-        'background-color': `${defaultThemeColor.bgColor}`,
-        'box-shadow': '0px 5px 15px rgba(33, 55, 71, 0.096946)',
-        'border-radius': '5.5px',
-        'margin-top': '5px',
-    },
-    'dropzone-text-div': {
-        display: 'flex',
-        'justify-content': 'center',
-        'margin-left': '14px',
-        color: `${defaultThemeColor.textColor}`,
-        'background-color': 'transparent',
-    },
-    'dropzone-file-name': {
-        'margin-left': '5px',
-        overflow: 'hidden',
-        'text-overflow': 'ellipsis',
-        'white-space': 'nowrap',
-        padding: '2px',
-        'font-size': '14px',
-        color: '#494949',
-    },
-
-    /**
-     * Default Style of the signature component
-     */
-    'signature-parent-div': {
-        'border-radius': '5.5px',
-        'align-content': 'flex-start',
-        'justify-content': 'center',
-        width: 'inherit',
-        'max-width': '532px',
-        height: '86px',
-        display: 'block',
-        'flex-flow': 'column wrap',
-        'font-size': '17px',
-        color: `${defaultThemeColor.textColor}`,
-        'background-color': `${defaultThemeColor.bgColor}`,
-    },
-    'signature-wrapper-div': {
-        display: 'flex',
-        flex: 'auto',
-        'justify-content': 'center',
-        'align-items': 'center',
-        'font-size': '17px',
-        height: 'inherit',
-        color: `${defaultThemeColor.textColor}`,
-        'background-color': 'transparent',
-    },
-    'signature-input-text': {
-        border: '0',
-        'text-align': 'center',
-        display: 'block',
-        height: '48px',
-        width: `calc(100% - 54px)!important`,
-        'background-color': `${defaultThemeColor.bgColor}`,
-        'font-family': 'Beauty',
-        'background-clip': 'padding-box',
-        color: '#444444',
-        'font-style': 'normal',
-        'font-weight': 'normal',
-        'font-size': '47px',
-        'padding-left': '10px',
-    },
-    /**
-     * Default Style of the modal component
-     */
-    'modal-background': {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '100%',
-        height: '100%',
-        background: 'rgba(0, 0, 0, 0.6)',
-        'z-index': '2000',
-    },
-    'modal-wrapper': {
-        position: 'fixed',
-        display: 'flex',
-        'align-items': 'end',
-        'justify-content': 'center',
-        'flex-direction': 'column',
-        background: 'white',
-        width: 'fit-content',
-        height: 'fit-content',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        'border-radius': '5px',
-    },
-    'modal-close-button': {
-        cursor: 'pointer',
-        width: 'fit-content',
-        height: 'fit-content',
-        padding: '0',
-        'padding-right': '5px',
-        'padding-top': '5px',
-        color: `${defaultThemeColor.textColor}`,
-    },
-    /*
-     * Default Style of the checkbox label
-     */
-    footer: {
-        display: 'flex',
-        'margin-top': 'auto',
-        width: '100%',
-    },
-    /**
-     * Default Style of drawer
-     */
-    drawer: {
-        'min-height': '100%',
-        overflow: 'hidden',
-        position: 'fixed',
-        width: '360px',
-        transition: 'transform ease 400ms',
-        display: 'flex',
-        'flex-direction': 'column',
-
-        'box-sizing': 'border-box',
-
-        top: '51px',
-        right: '0px',
-        'z-index': '1001',
-        // 'transform': 'translateX(${({ drawerOpen }) => drawerOpen ? "0px" : "360px"})',
-    },
-    'drawer-close': {
-        transform: 'translateX(360px)',
-    },
-    'drawer-open': {
-        transform: 'translateX(0px)',
-    },
-    /**
-     * Default Style of the tooltip
-     */
-    'tooltip-container': {
-
-        'border-radius': '3.6px',
-
-        'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
-
-        display: 'flex',
-        'flex-direction': 'column',
-        padding: '0',
-        transition: 'opacity 0.3s',
-        'z-index': '9999',
-    },
-    'tooltip-arrow': {
-        height: '19px', //'1rem',
-        position: 'absolute',
-        width: '29px', //'1rem',
-        'pointer-events': 'none',
-    },
-    'tooltip-arrow-before': {
-        'border-style': 'solid',
-        content: '',
-        display: 'block',
-        height: '0',
-        margin: 'auto',
-        width: '0',
-    },
-    'tooltip-arrow-after': {
-        'border-style': 'solid',
-        content: '',
-        display: 'block',
-        height: '0',
-        margin: 'auto',
-        position: 'absolute',
-        width: '0',
-    },
-    'tp-cont-bottom-arrow-before': {
-        'border-width': '0 15px 0px 15px',
-        position: 'absolute',
-        top: '-1px',
-    },
-    'tp-cont-bottom-arrow-after': {
-
-        // 'border-width': '0 0.5rem 0.4rem 0.5rem',
-        'border-width': '0 15px 19px 15px',
-    },
-    'tp-cont-top-arrow-before': {
-
-        // 'border-width': '0.4rem 0.5rem 0 0.5rem',
-        'border-width': '0px 15px 0 15px',
-        position: 'absolute',
-        top: '1px',
-    },
-    'tp-cont-top-arrow-after': {
-
-        // 'border-width': '0.4rem 0.5rem 0 0.5rem',
-        'border-width': '19px 15px 0 15px',
-    },
-    'tp-cont-right-arrow-before': {
-
-        'border-width': '15px 0px 15px 0',
-    },
-    'tp-cont-right-arrow-after': {
-
-        // 'border-width': '0.5rem 0.4rem 0.5rem 0',
-        'border-width': '15px 19px 15px 0',
-        left: '6px',
-        top: '0',
-    },
-    'tp-cont-left-arrow-before': {
-
-        // 'border-width': '0.5rem 0 0.5rem 0.4em',
-        'border-width': '15px 0 15px 0px',
-    },
-    'tp-cont-left-arrow-after': {
-
-        // 'border-width': '0.5rem 0 0.5rem 0.4em',
-        'border-width': '15px 0 15px 19px',
-        left: '3px',
-        top: '0',
-    },
-    'tp-cont-bottom-arrow': {
-        left: '0',
-        'margin-top': '-19px', //'-0.4rem',
-        top: '0',
-    },
-    'tp-cont-top-arrow': {
-        bottom: '0',
-        left: '0',
-        'margin-bottom': '-19px', //'-1rem',
-    },
-    'tp-cont-right-arrow': {
-        left: '0',
-        'margin-left': '-24px', //'-0.7rem',
-    },
-    'tp-cont-left-arrow': {
-        'margin-right': '-24px', //'-0.7rem',
-        right: '0',
-    },
-    /**
-     * Default Style of the overlay
-     */
-    overlay: {
-        'border-radius': '3.6px',
-        display: 'flex',
-        'flex-direction': 'column',
-        padding: '0',
-        transition: 'opacity 0.3s',
-        'z-index': '9999',
-    },
-    'simple-overlay': {
-
-        'border-radius': '6px',
-
-        // 'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
-
-        display: 'flex',
-        'flex-direction': 'column',
-        padding: '0',
-        transition: 'opacity 0.3s',
-        'z-index': '9999',
-    },
-    /**
-     * Default Style of the Sidebar
-     */
-    'sidebar-container': {
-        'min-height': '100%',
-        overflowX: 'hidden',
-        position: 'fixed',
-        transition: 'width ease 400ms',
-        display: 'flex',
-        'flex-direction': 'column',
-        'z-index': '1001',
-    },
-    'sidebar-container-open': {
-        width: '240px',
-    },
-    'sidebar-container-close': {
-        width: '70px',
-    },
-    'sidebar-container-mobile-open': {
-        width: '240px',
-        'z-index': '1001',
-    },
-    'sidebar-container-mobile-close': {
-        width: '0px',
-        'z-index': '1001',
-    },
-    'sidebar-pusher': {
-        'min-height': '100%',
-        overflow: 'hidden',
-        'background-color': 'transparent',
-        position: 'fixed',
-        transition: 'width ease 400ms',
-    },
-    'sidebar-pusher-open': {
-        width: '240px',
-    },
-    'sidebar-pusher-close': {
-        width: '70px',
-    },
-    'sidebar-pusher-mobile': {
-        width: '0px',
-    },
-    /**
-     * Default Style of the ModalComp
-     */
-    'modalComp-custom-style': {
-        content: {
-            top: '50%',
-            left: '50%',
-            right: 'auto',
-            bottom: 'auto',
-            marginRight: '-50%',
-            transform: 'translate(-50%, -50%)',
-            zIndex: '999',
-        },
-    },
-    'modalComp-modal-close': {
-        position: 'absolute',
-        top: '15px',
-        right: '10px',
-        outline: 'none',
-        border: 'none',
-        background: 'transparent',
-        cursor: 'pointer',
-    },
-    'modalComp-modal-body': {
-        'margin-top': '20px',
-        'margin-bottom': '15px',
-    },
-    'modalComp-modal-footer': {
-        'margin-top': '30px',
-        'margin-bottom': '15px',
-        'border-top': `1px solid  ${defaultThemeColor.border}`,
-        padding: '1rem 3rem 0rem 3rem',
-        '&:before': {
-            content: '',
-            position: 'fixed',
-            display: 'inline-block',
-            left: 0,
-            right: 0,
-            'margin-top': '-0.9rem',
-            'z-index': -1,
-        },
-        /**
-         * Default Style of the SelectComp
-         */
-        'selectComp-label-wrapper': {
-            paddingBottom: '10px',
-            display: 'flex',
-            width: '25vw',
-        },
-    },
-
-
-    'popOver-Content': {
-        padding: '16px',
-        color: 'white',
-        width: '226px',
-        borderRadius: '3.6px'
-    },
-    'popOver-header': {
-        marginBottom: '8px',
-        fontWeight: '600'
-    },
-    'popOver-body': {
-        marginBottom: '11.5px'
-    },
-
-    /**
-     * Default style of the ColorInput
-     */
-    'ColorWrapper': {
-
-        borderRadius: '4.87px',
-
-        padding: '8px 21px',
-        display: 'flex',
-    },
-
-    'input-color': {
-
-        borderRadius: '4px',
-        width: '24px',
-        height: '24px',
-    }
-
-};
-
-export default defaultStyles;