groundfloor-react-ui 1.0.3 → 1.0.6

package/components/constants/defaultStyle.js

@@ -4,41 +4,41 @@ const defaultStyles = {
     /**
      * Common Style poroperties of all the element of the library
      */
-    'common': {
-        'color': 'blue',
+    common: {
+        color: 'blue',
         'background-color': `${defaultThemeColor.bgColor}`,
     },
     /**
      * Default Style of the element label
      */
-    'label': {
+    label: {
         'padding-left': '6px',
         'font-style': 'normal',
         'font-weight': 'normal',
         'font-size': '14px',
-        'display': 'flex',
-        'width': 'inherit',
+        display: 'flex',
+        width: 'inherit',
         'align-items': 'flex-start',
-        'color': `${defaultThemeColor.variant['neutral-2']}`,
+        color: `${defaultThemeColor.variant['neutral-2']}`,
         'margin-bottom': '0',
-        'padding-bottom': '0'
+        'padding-bottom': '0',
     },
-    'button': {
-        'color': 'red',
+    button: {
+        color: 'red',
         'border-color': 'black',
     },
     /**
      * Default Style of the card
      */
-    'card': {
-        'color': `${defaultThemeColor.textColor}`,
+    card: {
+        color: `${defaultThemeColor.textColor}`,
         'padding-top': '25px',
         'padding-bottom': '25px',
         'padding-left': '32px',
         'padding-right': '32px',
         'background-color': `${defaultThemeColor.bgColor}`,
-        'width': 'inherit',
-        'height': 'inherit',
+        width: 'inherit',
+        height: 'inherit',
         'border-color': `${defaultThemeColor.neutral['neutral-4']}`,
         'border-radius': '5px',
         'box-shadow': '0px 5px 37px rgba(56, 66, 100, 0.0880136)',
@@ -47,23 +47,23 @@ const defaultStyles = {
     /**
      * Default Style of the progressBar
      */
-    'progressWrapper': {
-        'height': '10px',
+    progressWrapper: {
+        height: '10px',
         'border-radius': '10px',
         'margin-top': '13px',
         'margin-left': '13px',
         'margin-right': '13px',
-        'width': 'inherit',
+        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',
+    containerWrapper: {
+        height: 'inherit',
+        width: 'inherit',
+        transition: 'width 1s ease-in-out',
         'border-radius': 'inherit',
         'text-align': 'right',
         'background-color': `${defaultThemeColor.primary['primary-1']}`,
@@ -71,14 +71,15 @@ const defaultStyles = {
     /**
      * Default Style of the progressBar Label
      */
-    'progressbarLabel': {
-        'display': 'block',
+    progressbarLabel: {
+        display: 'block',
         'margin-left': '13px',
-        'margin-bottom': '6px',
+        'margin-bottom': '7px',
+        'padding-bottom': '0',
         'font-style': 'normal',
         'font-weight': 'normal',
-        'font-size': '12px',
-        'color': `${defaultThemeColor.textColor}`,
+        'font-size': '14px',
+        color: `${defaultThemeColor.neutral['neutral-2']}`,
     },
     /**
      * Default Style of the Spinner
@@ -97,7 +98,7 @@ const defaultStyles = {
         position: 'relative',
     },
     avatarCircle: {
-        'background-color': `${defaultThemeColor.variant["primary-1"]}`,
+        'background-color': `${defaultThemeColor.variant['primary-1']}`,
         color: '#FFFFFF',
         'border-radius': '50%',
         display: 'flex',
@@ -108,23 +109,23 @@ const defaultStyles = {
     avatarCircleSM: {
         'font-weight': '600',
         'font-size': '13px',
-        'min-width': "30px",
-        'min-height': "30px",
+        'min-width': '30px',
+        'min-height': '30px',
     },
     avatarCircleMD: {
         'font-weight': '400',
         'font-size': '12px',
-        'min-width': "32px",
-        'min-height': "32px",
+        'min-width': '32px',
+        'min-height': '32px',
     },
     avatarCircleLG: {
         'font-weight': '400',
         'font-size': '16px',
-        'min-width': "38px",
-        'min-height': "38px",
+        'min-width': '38px',
+        'min-height': '38px',
     },
     avatarName: {
-        color: `${defaultThemeColor.variant["primary-1"]}`,
+        color: `${defaultThemeColor.variant['primary-1']}`,
     },
     avatarNameSM: {
         'margin-left': '8px',
@@ -139,40 +140,40 @@ const defaultStyles = {
         'font-size': '16px',
     },
     /**
-    * Default Style of the textbox wrapper
-    */
+     * Default Style of the textbox wrapper
+     */
     'textbox-wrapper': {
-        'border': `1px solid ${defaultThemeColor.border}`,
+        border: `1px solid ${defaultThemeColor.border}`,
         'border-radius': '4px',
-        'padding': '6.5px 7px',
-        'display': 'flex',
+        padding: '6.5px 7px',
+        display: 'flex',
         'align-items': 'center',
         'line-height': '.5rem',
-        'background-color': `${defaultThemeColor['bgColor']}`
+        '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',
+        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',
+        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'
+        'line-height': '12px',
     },
     /**
      * Default Style of the input label
@@ -182,12 +183,12 @@ const defaultStyles = {
         'font-style': 'normal',
         'font-weight': 'normal',
         'font-size': '14px',
-        'color': `${defaultThemeColor.variant['neutral-2']}`,
-        'display': 'flex',
-        'width': 'max-content',
+        color: `${defaultThemeColor.variant['neutral-2']}`,
+        display: 'flex',
+        width: 'max-content',
         'background-color': 'transparent',
         'margin-bottom': '0px',
-        'padding-bottom': '0px'
+        'padding-bottom': '0px',
     },
     /**
      * Default Style of the Image
@@ -195,7 +196,7 @@ const defaultStyles = {
     image: {
         'border-radius': '0%',
         width: '100%',
-        height: '100%'
+        height: '100%',
     },
     imageAvatar: {
         'border-radius': '50%',
@@ -220,7 +221,7 @@ const defaultStyles = {
                 borderRadius: '4px',
                 paddingRight: '17px', // For the vertical scroll bar
                 // borderBottom: `1px solid red`,
-            }
+            },
         },
 
         headRow: {
@@ -235,7 +236,7 @@ const defaultStyles = {
                 borderBottom: 'none',
                 minHeight: '44px',
                 maxHeight: '44px',
-            }
+            },
         },
         headCells: {
             style: {
@@ -243,15 +244,16 @@ const defaultStyles = {
                 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
+                    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
+        rows: {
+            //This apply to all row of data not to the head table
             style: {
                 background: `${defaultThemeColor.variant['bgColor']}`,
                 '&:not(:last-of-type)': {
-                    borderBottomColor: 'none'
+                    borderBottomColor: 'none',
                 },
                 '&:last-of-type': {
                     borderBottomLeftRadius: '4px',
@@ -264,10 +266,8 @@ const defaultStyles = {
             highlightOnHoverStyle: {
                 backgroundColor: `${defaultThemeColor.variant['neutral-5']}`,
             },
-        }
-    }
-    ,
-
+        },
+    },
     /**
      * Default Style of the Header
      */
@@ -304,30 +304,31 @@ const defaultStyles = {
      * Default Style of the radio component
      */
     'radio-outer-circle': {
-        'width': '20px',
-        'height': '20px',
+        width: '20px',
+        height: '20px',
         'min-width': '20px',
         'min-height': '20px',
         'border-radius': '50%',
-        'display': 'flex',
+        display: 'flex',
         'justify-content': 'center',
         'align-items': 'center',
     },
     'radio-inner-circle': {
-        'display': 'flex',
+        display: 'flex',
         'align-self': 'center',
-        'margin': '0',
+        margin: '0',
         // 'padding': '.5px',
         'border-radius': '50%',
     },
     'radio-label': {
-        'display': 'block',
+        display: 'block',
         'margin-bottom': '7px',
-        'color': `${defaultThemeColor.variant['neutral-2']}`
+        'padding-bottom': '0',
+        color: `${defaultThemeColor.variant['neutral-2']}`,
     },
     'option-text': {
         // 'background-color': `${defaultThemeColor.bgColor}`,
-        'color': "#A9B1B8",
+        color: '#A9B1B8',
         'font-size': '16px',
     },
     /**
@@ -346,27 +347,28 @@ const defaultStyles = {
      * Default Style of the checkbox label
      */
     'checkBox-outer': {
-        'border': `2px solid ${defaultThemeColor.border}`,
-        'width': '20px',
-        'height': '20px',
+        border: `2px solid ${defaultThemeColor.border}`,
+        width: '20px',
+        height: '20px',
         'border-radius': '3px',
-        'cursor': 'pointer',
-        'background-color': `${defaultThemeColor.bgColor}`
+        cursor: 'pointer',
+        'background-color': `${defaultThemeColor.bgColor}`,
     },
     'checkBox-inner': {
         'background-repeat': 'no-repeat',
         'background-position': 'center',
-        'width': '20px',
-        "height": '20px',
-        'color': `${defaultThemeColor.bgColor}`,
-        'cursor': 'pointer',
+        width: '20px',
+        height: '20px',
+        color: `${defaultThemeColor.bgColor}`,
+        cursor: 'pointer',
         'text-align': 'center',
         'border-radius': '3px',
     },
     'check-label': {
-        'display': 'block',
+        display: 'block',
         'margin-bottom': '7px',
-        'color': `${defaultThemeColor.variant['neutral-2']}`
+        'padding-bottom': '0px',
+        color: `${defaultThemeColor.variant['neutral-2']}`,
     },
     'checkbox-option-text': {
         'font-size': '16px',
@@ -374,21 +376,21 @@ const defaultStyles = {
         'background-color': `${defaultThemeColor.bgColor}`,
     },
     'toggle-switch-wrapper': {
-        'display': 'flex',
+        display: 'flex',
         'align-items': 'center',
-        'gap': '7px',
-        'width': 'fit-content',
+        gap: '7px',
+        width: 'fit-content',
     },
     'toggle-switch-checkbox-label': {
-        'position': 'absolute',
-        'width': '45px',
-        'height': '22px',
+        position: 'absolute',
+        width: '45px',
+        height: '22px',
         'border-radius': '31px',
-        'cursor': 'pointer',
+        cursor: 'pointer',
     },
     'toggle-switch-option-text': {
         // 'background-color': `${defaultThemeColor.bgColor}`,
-        'color': `${defaultThemeColor.neutral['neutral-1']}`,
+        color: `${defaultThemeColor.neutral['neutral-1']}`,
         'font-size': '16px',
         'margin-right': '30px',
     },
@@ -396,45 +398,45 @@ const defaultStyles = {
      * Default Style of the dropZone component
      */
     'dropzone-parent': {
-        'width': '100%',
-        'height': '86px',
+        width: '100%',
+        height: '86px',
         'padding-left': '8px',
         'padding-right': '8px',
-        'display': 'flex',
+        display: 'flex',
         'justify-content': 'center',
         'align-items': 'center',
         'font-size': '16px',
         'border-radius': '5.5px',
-        'color': ` ${defaultThemeColor.textColor}`,
+        color: ` ${defaultThemeColor.textColor}`,
     },
     'dropzone-file-div': {
-        'width': 'inherit',
-        'height': '38px',
-        'display': 'flex',
+        width: 'inherit',
+        height: '38px',
+        display: 'flex',
         'justify-content': 'center',
         'align-items': 'center',
         'font-size': '14px',
-        'color': `${defaultThemeColor.textColor}`,
+        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',
+        display: 'flex',
         'justify-content': 'center',
         'margin-left': '14px',
-        'color': `${defaultThemeColor.textColor}`,
-        'background-color': 'transparent'
+        color: `${defaultThemeColor.textColor}`,
+        'background-color': 'transparent',
     },
     'dropzone-file-name': {
         'margin-left': '5px',
-        'overflow': 'hidden',
+        overflow: 'hidden',
         'text-overflow': 'ellipsis',
         'white-space': 'nowrap',
-        'padding': '2px',
+        padding: '2px',
         'font-size': '14px',
-        'color': '#494949'
+        color: '#494949',
     },
 
     /**
@@ -444,35 +446,35 @@ const defaultStyles = {
         'border-radius': '5.5px',
         'align-content': 'flex-start',
         'justify-content': 'center',
-        'width': 'inherit',
+        width: 'inherit',
         'max-width': '532px',
-        'height': '86px',
-        'display': 'block',
+        height: '86px',
+        display: 'block',
         'flex-flow': 'column wrap',
         'font-size': '17px',
-        'color': `${defaultThemeColor.textColor}`,
+        color: `${defaultThemeColor.textColor}`,
         'background-color': `${defaultThemeColor.bgColor}`,
     },
     'signature-wrapper-div': {
-        'display': 'flex',
-        'flex': 'auto',
+        display: 'flex',
+        flex: 'auto',
         'justify-content': 'center',
         'align-items': 'center',
         'font-size': '17px',
-        'height': 'inherit',
-        'color': `${defaultThemeColor.textColor}`,
+        height: 'inherit',
+        color: `${defaultThemeColor.textColor}`,
         'background-color': 'transparent',
     },
     'signature-input-text': {
-        'border': '0',
+        border: '0',
         'text-align': 'center',
-        'display': 'block',
-        'height': '48px',
-        'width': `calc(100% - 54px)!important`,
+        display: 'block',
+        height: '48px',
+        width: `calc(100% - 54px)!important`,
         'background-color': `${defaultThemeColor.bgColor}`,
-        'font-family': "Beauty",
+        'font-family': 'Beauty',
         'background-clip': 'padding-box',
-        'color': '#444444',
+        color: '#444444',
         'font-style': 'normal',
         'font-weight': 'normal',
         'font-size': '47px',
@@ -482,41 +484,41 @@ const defaultStyles = {
      * 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)',
+        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',
+        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%)',
+        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',
+        cursor: 'pointer',
+        width: 'fit-content',
+        height: 'fit-content',
+        padding: '0',
         'padding-right': '5px',
         'padding-top': '5px',
-        'color': `${defaultThemeColor.textColor}`
+        color: `${defaultThemeColor.textColor}`,
     },
-    /* 
+    /*
      * Default Style of the checkbox label
      */
-    'footer': {
+    footer: {
         display: 'flex',
         'margin-top': 'auto',
         width: '100%',
@@ -524,47 +526,47 @@ const defaultStyles = {
     /**
      * Default Style of drawer
      */
-    'drawer': {
+    drawer: {
         'min-height': '100%',
-        'overflow': 'hidden',
-        'position': 'fixed',
-        'width': '360px',
-        'transition': 'transform ease 400ms',
-        'display': 'flex',
+        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',
+        top: '51px',
+        right: '0px',
         'z-index': '1001',
         // 'transform': 'translateX(${({ drawerOpen }) => drawerOpen ? "0px" : "360px"})',
     },
     'drawer-close': {
-        'transform': 'translateX(360px)',
+        transform: 'translateX(360px)',
     },
     'drawer-open': {
-        'transform': 'translateX(0px)',
+        transform: 'translateX(0px)',
     },
     /**
-    * Default Style of the tooltip
-    */
+     * Default Style of the tooltip
+     */
     'tooltip-container': {
         'background-color': `${defaultThemeColor.bgColor}`,
         'border-radius': '3.6px',
-        'border': `1px solid ${defaultThemeColor.bgColor}`,
+        border: `1px solid ${defaultThemeColor.bgColor}`,
         'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
-        'color': '#000',
-        'display': 'flex',
+        color: '#000',
+        display: 'flex',
         'flex-direction': 'column',
-        'padding': '0',
-        'transition': 'opacity 0.3s',
+        padding: '0',
+        transition: 'opacity 0.3s',
         'z-index': '9999',
     },
     'tooltip-arrow': {
-        height: '19px',//'1rem',
+        height: '19px', //'1rem',
         position: 'absolute',
-        width: '29px',//'1rem',
+        width: '29px', //'1rem',
         'pointer-events': 'none',
     },
     'tooltip-arrow-before': {
@@ -587,8 +589,8 @@ const defaultStyles = {
     'tp-cont-bottom-arrow-before': {
         'border-color': `transparent transparent ${defaultThemeColor.bgColor} transparent`,
         'border-width': '0 15px 19px 15px',
-        'position': 'absolute',
-        'top': '-1px',
+        position: 'absolute',
+        top: '-1px',
     },
     'tp-cont-bottom-arrow-after': {
         'border-color': `transparent transparent ${defaultThemeColor.bgColor} transparent`,
@@ -616,7 +618,7 @@ const defaultStyles = {
         // 'border-width': '0.5rem 0.4rem 0.5rem 0',
         'border-width': '15px 19px 15px 0',
         left: '6px',
-        top: '0'
+        top: '0',
     },
     'tp-cont-left-arrow-before': {
         'border-color': `transparent transparent transparent ${defaultThemeColor.bgColor}`,
@@ -632,7 +634,7 @@ const defaultStyles = {
     },
     'tp-cont-bottom-arrow': {
         left: '0',
-        'margin-top': '-19px',//'-0.4rem',
+        'margin-top': '-19px', //'-0.4rem',
         top: '0',
     },
     'tp-cont-top-arrow': {
@@ -651,28 +653,28 @@ const defaultStyles = {
     /**
      * Default Style of the overlay
      */
-    'overlay': {
+    overlay: {
         'background-color': `${defaultThemeColor.bgColor}`,
         'border-radius': '3.6px',
-        'border': `1px solid ${defaultThemeColor.bgColor}`,
+        border: `1px solid ${defaultThemeColor.bgColor}`,
         'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
-        'color': '#000',
-        'display': 'flex',
+        color: '#000',
+        display: 'flex',
         'flex-direction': 'column',
-        'padding': '0',
-        'transition': 'opacity 0.3s',
+        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']}`,
+        border: `1px solid ${defaultThemeColor.variant['neutral-1']}`,
         // 'box-shadow': '0px 5px 33px rgba(56, 66, 100, 0.482627)',
-        'color': `${defaultThemeColor.bgColor}`,
-        'display': 'flex',
+        color: `${defaultThemeColor.bgColor}`,
+        display: 'flex',
         'flex-direction': 'column',
-        'padding': '0',
-        'transition': 'opacity 0.3s',
+        padding: '0',
+        transition: 'opacity 0.3s',
         'z-index': '9999',
     },
     /**
@@ -730,7 +732,7 @@ const defaultStyles = {
             bottom: 'auto',
             marginRight: '-50%',
             transform: 'translate(-50%, -50%)',
-            zIndex: "999",
+            zIndex: '999',
         },
     },
     'modalComp-modal-close': {
@@ -740,18 +742,17 @@ const defaultStyles = {
         outline: 'none',
         border: 'none',
         background: 'transparent',
-        cursor: 'pointer'
+        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',
+        padding: '1rem 3rem 0rem 3rem',
         '&:before': {
             content: '',
             position: 'fixed',
@@ -767,10 +768,9 @@ const defaultStyles = {
         'selectComp-label-wrapper': {
             paddingBottom: '10px',
             display: 'flex',
-            width: '25vw'
-        }
-    }
-
-}
+            width: '25vw',
+        },
+    },
+};
 
-export default defaultStyles;
+export default defaultStyles;