groundfloor-react-ui 1.0.0

package/components/constants/defaultStyle.js

@@ -0,0 +1,781 @@
+import defaultThemeColor from './defaultThemeColor';
+const border = `#D4D7E3`;
+
+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': '20px',
+        'display': 'flex',
+        'width': 'inherit',
+        'align-items': 'flex-start',
+        'color': '#444444',
+        'margin-bottom': '0'
+
+    },
+    'button': {
+        'color': 'red',
+        'border-color': 'black',
+    },
+    /**
+     * Default Style of the card
+     */
+    'card': {
+        'color': `${defaultThemeColor.textColor}`,
+        'padding-top': '25px',
+        'padding-bottom': '25px',
+        'padding-left': '32px',
+        'padding-right': '32px',
+        'background-color': `${defaultThemeColor.bgColor}`,
+        'width': 'inherit',
+        'height': 'inherit',
+        'border-color': `${defaultThemeColor.neutral['neutral-4']}`,
+        'border-radius': '5px',
+        'box-shadow': '0px 5px 37px rgba(56, 66, 100, 0.0880136)',
+    },
+
+    /**
+     * 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': '6px',
+        'font-style': 'normal',
+        'font-weight': 'normal',
+        'font-size': '12px',
+        'color': `${defaultThemeColor.textColor}`,
+    },
+    /**
+     * 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: {
+        'background-color': `${defaultThemeColor.variant["primary-1"]}`,
+        color: '#FFFFFF',
+        '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: {
+        color: `${defaultThemeColor.variant["primary-1"]}`,
+    },
+    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 ${border}`,
+        'border-radius': '4px',
+        'padding': '5.5px 7px',
+        'display': 'flex',
+        'align-items': 'center',
+        'line-height': '.5rem',
+        'background-color': `${defaultThemeColor['bgColor']}`
+    },
+    /**
+     * 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',
+    },
+    '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',
+        'width': 'max-content',
+    },
+    /**
+     * Default Style of the Image
+     */
+    image: {
+        'border-radius': '0%',
+        width: '100%',
+        height: '100%'
+    },
+    imageAvatar: {
+        'border-radius': '50%',
+        'box-sizing': 'border-box',
+        position: 'absolute',
+    },
+    imageAvatarSM: {
+        width: '30px',
+        height: '30px',
+    },
+    imageAvatarMD: {
+        width: '32px',
+        height: '32px',
+    },
+    imageAvatarLG: {
+        width: '38px',
+        height: '38px',
+    },
+    table: {
+        table: {
+            style: {
+                borderRadius: '4px',
+                paddingRight: '17px', // For the vertical scroll bar
+                // borderBottom: `1px solid red`,
+            }
+        },
+
+        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' //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',
+        'background-color': `${defaultThemeColor['bgColor']}`,
+        'border-bottom': `0.5px solid ${defaultThemeColor.variant['neutral-3']}`,
+    },
+    /**
+     * 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': '24.2px',
+        'color': '#444444'
+    },
+    'option-text': {
+        'background-color': `${defaultThemeColor.bgColor}`,
+        'color': "#A9B1B8",
+        'font-size': '16px',
+    },
+    /**
+     * Default Style of the Sidebar
+     */
+    sidebarContainer: {
+        'min-height': '100%',
+        overflow: 'hidden',
+        'background-color': '#2e56f4',
+        position: 'fixed',
+        color: 'white',
+        width: '70px',
+        transition: 'width ease 400ms',
+    },
+    /**
+     * Default Style of the checkbox label
+     */
+    'checkBox-outer': {
+        'border': `2px solid ${border}`,
+        'width': '20px',
+        'height': '20px',
+        'border-radius': '3px',
+        'cursor': 'pointer',
+        'background-color': `${defaultThemeColor.bgColor}`
+    },
+    'checkBox-inner': {
+        'background-repeat': 'no-repeat',
+        'background-position': 'center',
+        'width': '20px',
+        "height": '20px',
+        'color': `${defaultThemeColor.bgColor}`,
+        'cursor': 'pointer',
+        'text-align': 'center',
+        'border-radius': '3px',
+    },
+    'check-label': {
+        'display': 'block',
+        'margin-bottom': '26px',
+    },
+    'checkbox-option-text': {
+        'font-size': '16px',
+        'margin-left': '10px',
+        'background-color': `${defaultThemeColor.bgColor}`,
+    },
+    'toggle-switch-wrapper': {
+        'display': 'flex',
+        'align-items': 'flex-start',
+        'gap': '40px',
+        'width': 'fit-content',
+    },
+    'toggle-switch-checkbox-label': {
+        'position': 'absolute',
+        'width': '45px',
+        'height': '22px',
+        'border-radius': '31px',
+        'cursor': 'pointer',
+    },
+    'toggle-switch-option-text': {
+        'background-color': `${defaultThemeColor.bgColor}`,
+        'color': `${defaultThemeColor.neutral['neutral-1']}`,
+        'font-size': '16px',
+        'margin-right': '30px',
+    },
+    /**
+     * Default Style of the dropZone component
+     */
+    'dropzone-parent': {
+        'width': 'inherit',
+        'max-width': '514px',
+        'height': '86px',
+        'padding-left': '8px',
+        'padding-right': '8px',
+        'display': 'flex',
+        'justify-content': 'center',
+        'align-items': 'center',
+        'font-size': '17px',
+        'border-radius': '5.5px',
+        'color': ` ${defaultThemeColor.textColor}`,
+    },
+    'dropzone-file-div': {
+        'width': 'inherit',
+        'max-width': '532px',
+        '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}`,
+        // 'border': `1px solid ${defaultThemeColor.neutral['neutral-3']} `,
+    },
+    'signature-wrapper-div': {
+        // 'margin-left': '2px',
+        '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% - 50px)!important`,
+        // 'max-width': '394px',
+        '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',
+        'background-color': '#FFFFFF',
+        'box-sizing': 'border-box',
+        'box-shadow': '-20px 5px 37px rgba(56, 66, 100, 0.0880136)',
+        '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': {
+        'background-color': `${defaultThemeColor.bgColor}`,
+        'border-radius': '3.6px',
+        'border': `1px solid ${defaultThemeColor.bgColor}`,
+        'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
+        'color': '#000',
+        '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-color': `transparent transparent ${defaultThemeColor.bgColor} transparent`,
+        // 'border-width': '0 0.5rem 0.4rem 0.5rem',
+        'border-width': '0 15px 19px 15px',
+        'position': 'absolute',
+        'top': '-1px',
+    },
+    'tp-cont-bottom-arrow-after': {
+        'border-color': `transparent transparent ${defaultThemeColor.bgColor} transparent`,
+        // 'border-width': '0 0.5rem 0.4rem 0.5rem',
+        'border-width': '0 15px 19px 15px',
+    },
+    'tp-cont-top-arrow-before': {
+        'border-color': `${defaultThemeColor.bgColor} transparent transparent transparent`,
+        // 'border-width': '0.4rem 0.5rem 0 0.5rem',
+        'border-width': '19px 15px 0 15px',
+        position: 'absolute',
+        top: '1px',
+    },
+    'tp-cont-top-arrow-after': {
+        'border-color': `${defaultThemeColor.bgColor} transparent transparent transparent`,
+        // 'border-width': '0.4rem 0.5rem 0 0.5rem',
+        'border-width': '19px 15px 0 15px',
+    },
+    'tp-cont-right-arrow-before': {
+        'border-color': `transparent ${defaultThemeColor.bgColor} transparent transparent`,
+        'border-width': '15px 19px 15px 0',
+    },
+    'tp-cont-right-arrow-after': {
+        'border-color': `transparent ${defaultThemeColor.bgColor} transparent transparent`,
+        // '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-color': `transparent transparent transparent ${defaultThemeColor.bgColor}`,
+        // 'border-width': '0.5rem 0 0.5rem 0.4em',
+        'border-width': '15px 0 15px 19px',
+    },
+    'tp-cont-left-arrow-after': {
+        'border-color': `transparent transparent transparent ${defaultThemeColor.bgColor}`,
+        // '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': {
+        'background-color': `${defaultThemeColor.bgColor}`,
+        'border-radius': '3.6px',
+        'border': `1px solid ${defaultThemeColor.bgColor}`,
+        'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
+        'color': '#000',
+        'display': 'flex',
+        'flex-direction': 'column',
+        'padding': '0',
+        'transition': 'opacity 0.3s',
+        'z-index': '9999',
+    },
+    'simple-overlay': {
+        'background-color': `${defaultThemeColor.variant['neutral-1']}`,
+        'border-radius': '6px',
+        'border': `1px solid ${defaultThemeColor.variant['neutral-1']}`,
+        // 'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
+        'color': `${defaultThemeColor.bgColor}`,
+        'display': 'flex',
+        'flex-direction': 'column',
+        'padding': '0',
+        'transition': 'opacity 0.3s',
+        'z-index': '9999',
+    },
+    /**
+     * Default Style of the Sidebar
+     */
+    'sidebar-container': {
+        'min-height': '100%',
+        overflow: 'hidden',
+        'background-color': '#2e56f4',
+        position: 'fixed',
+        color: 'white',
+        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%',
+            padding: '3rem 3rem 0.8rem 3rem',
+            transform: 'translate(-50%, -50%)',
+            zIndex: "999",
+        },
+    },
+    'modalComp-modal-close': {
+        position: 'absolute',
+        top: '5px',
+        right: '5px',
+        outline: 'none',
+        border: 'none',
+        background: 'transparent',
+        cursor: 'pointer'
+    },
+    'modalComp-modal-body': {
+        'margin-top': '30px',
+        'margin-bottom': '15px',
+    },
+    'modalComp-modal-footer': {
+        display: 'flex',
+        'justify- content': 'end',
+        'margin-top': '30px',
+        'margin-bottom': '15px',
+        '&:before': {
+            content: '',
+            'border-top': '1px solid #E5E7F0',
+            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'
+        }
+    }
+
+}
+
+export default defaultStyles;