@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/HiDatePicker/stylesheet.js

@@ -1,188 +1,205 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _default = function _default(theme) {
+  return {
+    root: {
+      position: 'relative',
+      display: 'inline-block',
+      width: '100%',
+      minWidth: 252,
+      maxWidth: 500
+    },
+    fromInput: {
+      position: 'relative',
+      display: 'inline-block',
+      width: 'calc(50% - 4px)',
+      paddingRight: 4
+    },
+    toInput: {
+      position: 'relative',
+      display: 'inline-block',
+      width: 'calc(50% - 4px)',
+      marginLeft: 4
+    },
+    absolute: {
+      position: 'absolute'
+    },
+    right4: {
+      right: 4
+    },
+    dayPickerMargin: {
+      top: -337,
+      width: 'calc(100% - 4px)'
+    },
+    rangePickerContainer: {
+      display: 'flex',
+      alignItems: 'flex-start'
+    },
+    // The container element
+    container: {
+      width: '100%',
+      display: 'inline-block',
+      fontFamily: theme.typography.fontFamily
+    },
+    // The wrapper element, used for keyboard interaction
+    wrapper: {
+      width: '100%',
+      position: 'relative',
+      userSelect: 'none',
+      flexDirection: 'row',
+      backgroundColor: theme.palette.background3
+    },
+    // TODO : Added to the container when there's no interaction with the calendar
+    interactionDisabled: {},
+    // The navigation bar with the arrows to switch between months
+    navBar: {},
+    // Button to switch to the previous month
+    navButtonPrev: {},
+    // Button to switch to the next month
+    navButtonNext: {},
+    // Added to the navbuttons when disabled with fromMonth/toMonth props
+    navButtonInteractionDisabled: {
+      display: 'none'
+    },
+    // Container of the months table
+    months: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      padding: '0 14px'
+    },
+    // The month's main table
+    month: {
+      display: 'table',
+      borderCollapse: 'collapse',
+      borderSpacing: 0,
+      userSelect: 'none' // margin: '0 1rem',
+      // marginTop: '1rem',
 
-var _extends2 = require('babel-runtime/helpers/extends');
+    },
+    // The caption element, containing the current month's name and year
+    caption: {
+      padding: '0 0.5rem',
+      display: 'table-caption',
+      textAlign: 'left',
+      marginBottom: '0.5rem',
+      '&div': {
+        fontSize: '1.15rem',
+        fontWeight: 500
+      }
+    },
+    // Table header displaying the weekdays names
+    weekdays: {
+      marginTop: '1rem',
+      display: 'table-header-group'
+    },
+    // Table row displaying the weekdays names
+    weekdaysRow: {
+      display: 'table-row',
+      height: 40
+    },
+    // Cell displaying the weekday name
+    weekday: (0, _extends2.default)({
+      display: 'table-cell'
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightRegular,
+      textAlign: 'center',
+      verticalAlign: 'middle'
+    }),
+    // Table's body with the weeks
+    body: {
+      display: 'table-row-group',
+      padding: '12px 0'
+    },
+    week: {
+      display: 'table-row'
+    },
+    // Table's row for each week
+    weekNumber: {
+      display: 'table-cell',
+      padding: '0.5rem',
+      textAlign: 'right',
+      verticalAlign: 'middle',
+      minWidth: '1rem',
+      fontSize: '0.75em',
+      cursor: 'pointer',
+      color: '#8b9898',
+      borderRight: '1px solid #eaecec'
+    },
+    // The single day cell
+    day: (0, _extends2.default)({
+      display: 'table-cell',
+      padding: '4px 8px',
+      textAlign: 'center',
+      cursor: 'pointer',
+      verticalAlign: 'middle',
+      outline: 'none'
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.dark,
+      fontWeight: theme.typography.fontWeightRegular
+    }),
+    // The calendar footer (only with todayButton prop)
+    footer: {
+      marginTop: 12,
+      borderTop: '1px solid',
+      borderTopColor: theme.palette.divider
+    },
+    // The today button (only with todayButton prop)
+    todayButton: (0, _extends2.default)({
+      width: '100%',
+      border: 'none',
+      backgroundImage: 'none',
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+      cursor: 'pointer',
+      height: 40
+    }, theme.typography.body2, {
+      color: theme.palette.neutral.main,
+      fontWeight: theme.typography.fontWeightMedium,
+      textTransform: 'uppercase'
+    }),
 
-var _extends3 = _interopRequireDefault(_extends2);
+    /* default modifiers */
+    // Added to the day's cell for the current day
+    today: {
+      color: theme.palette.primary.light,
+      fontWeight: theme.typography.fontWeightMedium
+    },
+    // Added to the day's cell outside the current month
+    outside: {
+      backgroundColor: '#F8F9FB',
+      color: theme.palette.neutral.main
+    },
+    // Added to the day's cell specified in the "disabledDays" prop
+    disabled: {
+      color: '#dce0e0',
+      cursor: 'default'
+    },
+    // Added to the day's cell specified in the "selectedDays" prop
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    /*
+    selected: {
+        borderRadius: '50%',
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.business.primary.contrastText,
+    },
+    */
+    selected: {
+      // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    }
+  };
+};
 
-exports.default = function (theme) {
-    return {
-        root: {
-            position: 'relative',
-            display: 'inline-block',
-            width: '100%',
-            minWidth: 252,
-            maxWidth: 500
-        },
-        fromInput: {
-            position: 'relative',
-            display: 'inline-block',
-            width: 'calc(50% - 4px)',
-            paddingRight: 4
-        },
-        toInput: {
-            position: 'relative',
-            display: 'inline-block',
-            width: 'calc(50% - 4px)',
-            marginLeft: 4
-        },
-        // The container element
-        container: {
-            width: '100%',
-            display: 'inline-block',
-            fontFamily: theme.typography.fontFamily
-        },
-        // The wrapper element, used for keyboard interaction
-        wrapper: {
-            width: '100%',
-            position: 'relative',
-            userSelect: 'none',
-            flexDirection: 'row',
-            backgroundColor: theme.palette.background3
-        },
-        // TODO : Added to the container when there's no interaction with the calendar
-        interactionDisabled: {},
-        // The navigation bar with the arrows to switch between months
-        navBar: {},
-        // Button to switch to the previous month
-        navButtonPrev: {},
-        // Button to switch to the next month
-        navButtonNext: {},
-        // Added to the navbuttons when disabled with fromMonth/toMonth props
-        navButtonInteractionDisabled: {
-            display: 'none'
-        },
-        // Container of the months table
-        months: {
-            display: 'flex',
-            flexWrap: 'wrap',
-            justifyContent: 'center',
-            padding: '0 14px'
-        },
-        // The month's main table
-        month: {
-            display: 'table',
-            borderCollapse: 'collapse',
-            borderSpacing: 0,
-            userSelect: 'none'
-            // margin: '0 1rem',
-            // marginTop: '1rem',
-        },
-        // The caption element, containing the current month's name and year
-        caption: {
-            padding: '0 0.5rem',
-            display: 'table-caption',
-            textAlign: 'left',
-            marginBottom: '0.5rem',
-            '&div': {
-                fontSize: '1.15rem',
-                fontWeight: 500
-            }
-        },
-        // Table header displaying the weekdays names
-        weekdays: {
-            marginTop: '1rem',
-            display: 'table-header-group'
-        },
-        // Table row displaying the weekdays names
-        weekdaysRow: {
-            display: 'table-row',
-            height: 40
-        },
-        // Cell displaying the weekday name
-        weekday: (0, _extends3.default)({
-            display: 'table-cell'
-        }, theme.typography.body2, {
-            color: theme.palette.neutral.normal,
-            fontWeight: theme.typography.fontWeightRegular,
-            textAlign: 'center',
-            verticalAlign: 'middle'
-        }),
-        // Table's body with the weeks
-        body: {
-            display: 'table-row-group',
-            padding: '12px 0'
-        },
-        week: {
-            display: 'table-row'
-        },
-        // Table's row for each week
-        weekNumber: {
-            display: 'table-cell',
-            padding: '0.5rem',
-            textAlign: 'right',
-            verticalAlign: 'middle',
-            minWidth: '1rem',
-            fontSize: '0.75em',
-            cursor: 'pointer',
-            color: '#8b9898',
-            borderRight: '1px solid #eaecec'
-        },
-        // The single day cell
-        day: (0, _extends3.default)({
-            display: 'table-cell',
-            padding: '4px 8px',
-            textAlign: 'center',
-            cursor: 'pointer',
-            verticalAlign: 'middle',
-            outline: 'none'
-        }, theme.typography.body2, {
-            color: theme.palette.neutral.dark,
-            fontWeight: theme.typography.fontWeightRegular
-        }),
-        // The calendar footer (only with todayButton prop)
-        footer: {
-            marginTop: 12,
-            borderTop: '1px solid',
-            borderTopColor: theme.palette.line.stepper
-        },
-        // The today button (only with todayButton prop)
-        todayButton: (0, _extends3.default)({
-            width: '100%',
-            border: 'none',
-            backgroundImage: 'none',
-            backgroundColor: 'transparent',
-            boxShadow: 'none',
-            cursor: 'pointer',
-            height: 40
-        }, theme.typography.body2, {
-            color: theme.palette.neutral.normal,
-            fontWeight: theme.typography.fontWeightMedium,
-            textTransform: 'uppercase'
-        }),
-        /* default modifiers */
-        // Added to the day's cell for the current day
-        today: {
-            color: theme.palette.business.primary.light,
-            fontWeight: theme.typography.fontWeightMedium
-        },
-        // Added to the day's cell outside the current month
-        outside: {
-            backgroundColor: '#F8F9FB',
-            color: theme.palette.neutral.normal
-        },
-        // Added to the day's cell specified in the "disabledDays" prop
-        disabled: {
-            color: '#dce0e0',
-            cursor: 'default'
-        },
-        // Added to the day's cell specified in the "selectedDays" prop
-        /*
-        selected: {
-            borderRadius: '50%',
-            backgroundColor: theme.palette.business.primary.normal,
-            color: theme.palette.business.primary.contrast,
-        },
-        */
-        selected: {
-            // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
-            backgroundColor: theme.palette.business.primary.normal,
-            color: theme.palette.business.primary.contrast
-        }
-    };
-};
+exports.default = _default;