diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..f980bf3 --- /dev/null +++ b/.babelrc @@ -0,0 +1,18 @@ +{ + "presets": [ + [ + "env", + { + "targets": { + "browsers": [ + ">1%", + "last 4 versions", + "Firefox ESR", + "not ie < 9" // React doesn't support IE8 anyway + ] + } + } + ], + "react" + ] +} diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..3b4e8dc --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +lib/ +node_modules/ diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..76a8756 --- /dev/null +++ b/.eslintrc @@ -0,0 +1 @@ +extends: ["standard", "standard-react"] diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 918a439..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "zippyui", - "rules": { - } -} diff --git a/.gitignore b/.gitignore index d21f3bc..3282556 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,7 @@ dist/ lib/ +node_modules/ +package-lock.json +theme/ +base.css +index.css diff --git a/.npmignore b/.npmignore index 85c5d3d..78c3676 100644 --- a/.npmignore +++ b/.npmignore @@ -3,3 +3,4 @@ build node_modules .idea .babelrc +docs/ diff --git a/.tern-project b/.tern-project deleted file mode 100644 index f381bb3..0000000 --- a/.tern-project +++ /dev/null @@ -1,4 +0,0 @@ -{ - "ecmaVersion": 6, - "libs": [] -} \ No newline at end of file diff --git a/README.md b/README.md index 87c08d1..26c3646 100644 --- a/README.md +++ b/README.md @@ -4,15 +4,24 @@ react-date-picker ## Please note: This is not the official repo. I created this repo because the official repo at [zippyui/react-date-picker](https://github.com/zippyui/react-date-picker) disappeared (the whole organisation did so). +This package is published as `react-date-picker-reborn` (`npm install react-date-picker-reborn`). +Unless someone is willing to take over, I'll just do maintenance. This means: +- No new features +- Bugs may get resolved +- PRs fixing bugs will be resolved +- Upgrades of dependencies will be done from time to time + +## Old README + > A carefully crafted date picker built especially for React, with love. -[![Date picker](./react-date-field.png)](http://zippyui.com/docs/react-date-picker) +[![Date picker](./docs/react-date-field.png)](http://zippyui.com/docs/react-date-picker) -[![Date picker](./picker.gif)](http://zippyui.com/docs/react-date-picker) +[![Date picker](./docs/picker.gif)](http://zippyui.com/docs/react-date-picker) Click for [LIVE DEMO!](http://zippyui.com/docs/react-date-picker/examples) diff --git a/README.v4.md b/README.v4.md deleted file mode 100644 index d293a39..0000000 --- a/README.v4.md +++ /dev/null @@ -1,271 +0,0 @@ -react-date-picker -================= - - - - - -> A date picker built especially for React, with love. - -[![Date picker](./react-date-picker.gif)](http://zippyui.github.io/react-date-picker) - -[![Date picker](./react-date-picker.png)](http://zippyui.github.io/react-date-picker) -[![hackerone theme](./react-date-picker-theme-hackerone.png)](http://zippyui.github.io/react-date-picker) - -Click for [LIVE DEMO!](http://zippyui.github.io/react-date-picker) - -## Install - -```sh -$ npm install react-date-picker -``` - -## Usage - -Require the css -```jsx - -require('react-date-picker/index.css'); - -var DatePicker = require('react-date-picker'); - -``` - -```jsx - -var date = '2014-10-10' //or Date.now() - -function onChange(dateString, moment){ - //... -} - - -``` - -## Theming - -Theming is done by requiring a specific css file. - -By default, `react-date-picker/index.css` contains both structural styles and the default theme. - -If you want to load a specific theme, make sure you load -```jsx -require('react-date-picker/base.css') -``` -first (which contains only structural css rules), and then any css theme file. For now, there are two themes available: - - * `react-date-picker/theme/default.css` - * `react-date-picker/theme/hackerone.css` - -### hackerone theme - -![hackerone theme](./react-date-picker-theme-hackerone.png) - -```jsx -require('react-date-picker/base.css'); -require('react-date-picker/theme/hackerone.css'); -var DatePicker = require('react-date-picker'); - - -``` - -## Changelog - -See [changelog](./CHANGELOG.md) - -## Usage - -### NOTES: - -Don't forget to include index.css or index.styl! ( require('react-date-picker/index.css') ) - -If you use the files from the `dist` directory, (eg: `dist/react-date-picker.js`), you will need to make sure you have both `React` and `moment` global variables, so make sure you include [ReactJS](https://www.npmjs.com/package/react) and [MomentJS](https://www.npmjs.com/package/moment) - -The preferred **React** version for `react-date-picker` is >=0.12. The initial version of `react-date-picker` worked with React 0.11.2 as well, but I do not intend to continue to support it, in order to be able to focus on advancing the current features and developing other high-quality React components. - -## I18n and localization - -For rendering the date picker with a custom locale, there are two options - -#### require locale - -The first option is to simply require the appropriate momentjs locale before `require`-ing `react-date-picker` - -Example: - -```jsx -//make sure you require this first! -var nl = require('moment/locale/nl') - -//and then require the date picker - it will use -//the locale you previously required - -var DatePicker = require('react-date-picker') -``` - -#### locale prop - -The second option is specifying the `locale` prop on the date picker. This assumes you have momentjs with the locale already into page (for example, you are using `moment-with-locales.js`) - -```jsx - -``` - - -### Other i18n props - - * `weekDayNames` - either an array of week day names, or a function that returns an array. In case you specify `weekDayNames` as an array, it should have Sunday as the first day. If not specified, will be built with `momentjs`using `moment.weekdaysShort()` - * `weekStartDay`: Number - Sun 0, Monday 1, etc... If not specified, the locale specific value will be uesd. - * `locale`: String - * `todayText`: String - * `gotoSelectedText`: String - -## Props - - * `hideFooter`: Boolean - by default footer is shown, so specify this to true if you don't want the footer - * `hideHeader`: Boolean - by default header is shown, so specify this to true if you don't want the header - * `date` : Date / String / Moment / Number - for controlled behavior. Make sure you also specify an `onChange` prop - * `range` : Date / String / Moment / Number - for controlled behaviour make sure you also specify an `onRangeChange` prop - * `defaultDate`: Date / String / Moment / Number - for uncontrolled behavior - * `defaultRange`: Date / String / Moment / Number - for uncontrolled behavior - * `minDate` : Date / String / Moment / Number - * `maxDate` : Date / String / Moment / Number - * `dateFormat`: String [see moment.js formats](http://momentjs.com/docs/#/displaying/format/). Default date format is 'YYYY-MM-DD' - * `onChange`: Function (dateText, moment, event) - called when the user selects a date - * `onRangechange`: Function (arrayText, arratMoment, event) - called when the user selects a range - - * `onSelect`: Function(dateText, moment, view) - called when the user selects a year/month - * `onNav`: Function(dateText, moment, view, direction) - called when the user navigates to the next/previous month/year/decade. - * `renderDay`: Function - (optional) A function that should return a React DOM for the day cell. The first param is the props object. You can use this to have full control over what gets rendered for a day. - * `onRenderDay`: Function - (optional) A function that can manipulate the props object for a day, and SHOULD return a new props object. Use this for custom day styling. You can use this to take full control over the styles/css classes/attributes applied to the day cell in the month view. - * `views`: Object - an object that maps view names to factory functions. See the exported `DatePicker.views` - * `weekNumbers`: Boolean (default false) - Shows weeknumbers - it's locale aware. - * `weekNumberName`: String / ReactElement (defaults to '') - What to render in the view header cell, above all week numbers. - * `renderWeekNumber`: Function - A function to render week number. Has the same behavior as `renderDay`. - * `onWeekChange`: Function(weekDates, event) - When a week is clicked you get an array of the dates in that week - * `highlightRangeOnMouseMove` : Boolean (default true) - when hover mouse over a date, shows the range that will be selected if the date is clicked - -#### Formatting props - - * `dayFormat` - The format in which days should be rendered (on the MonthView) - * `monthFormat` - The format in which months should be rendered (on the YearView) - * `yearFormat` - The format in which years should be rendered (on the DecadeView) - -#### Props related to the view (the current date in view and the type of view) - * `defaultViewDate`: Date / String / Moment / Number - a date for the period to show in the picker. If none specified, defaults to `date` or to the current date. - * `viewDate`: Date / String / Moment / Number - controlled version for `defaultViewDate` - * `onViewDateChange`: Function(dateText, moment , view) - called when navigating to another viewDate. - - * `defaultView`: String - the view to render initially in the datepicker - if no defaultView is specified, the "month" view is rendered. Possible values: "month", "year", "decade". - * `view`: String - controlled version for `defaultView`. - * `onViewChange`: Function - function called when the view is changed. If using the controlled `view` version, make sure you update the `view` prop in this function if you want to navigate to another view as expected. - - * `navOnDateClick`: Boolean - defaults to true. If false, will not navigate to the date that was clicked, even if that date is in the prev/next month - * `alwaysShowPrevWeek` Boolean - defaults to false. If false, when the month starts on the first day of the week (`weekStartDay`), no days from the previous month will be displayed. Otherwise the first row will display the last week from the previous month. - -## Other props - - * `highlightWeekends`: Boolean - defaults to false. By default, weekend days have the `'dp-weekend'` className, but this will also add the `'dp-weekend-hightlight'` className with a default redish color. - -## Styling with css - -In order to change the date-picker border width/color with css, you'll have to specify a different border for the `.date-picker` and `.date-picker .dp-cell` classes. -You'll also probably want `.dp-cell:first-child` left border to be 0 and `.dp-cell:last-child` right border to be 0 - -```css -.date-picker, -.date-picker .dp-cell { - border: 1px solid red; -} -.date-picker .dp-cell:first-child { - border-left: 0px; -} -.date-picker .dp-cell:last-child { - border-right: 0px; -} -``` - - -#### Custom styling of day cells - -```jsx - -function onRenderDay(props){ - if (props.date.isBefore('2010-01-01')){ - props.className += ' invalid' - } - - props.style.border = '1px solid red' - - return props -} - - -``` -## Contributing - -When contributing, please work on the `src` dir. - -You'll need to run the following commands: - -```sh -$ npm run dev -# starts webpack-dev-server, which does all the bundling and live reloading -``` - -Now navigate to [localhost:8080](http://localhost:8080) -With this setup, you have an environment which live-reloads all your changes, so you have a rapid development cycle. - -In order to build a new production version, make sure you run `npm run build` (it builds the `lib` directory from the `src` directory, it concats all files and builds the `dist` directory, and also prepares the css files) - -## Other - -`react-date-picker` uses the awesome `moment.js` library ( Big thanks!) - -If you don't use npm you can include any of the following: - - * `dist/react-date-picker.js` - the full sources. NOTE: You'll need to include `React` separately - * `dist/react-date-picker.min.js` - minified & optimized version. NOTE: You'll need to include `React` separately - * `dist/react-date-picker.nomoment.js` - the full sources. NOTE: You'll need to include `React` AND `moment.js` separately - * `dist/react-date-picker.nomoment.min.js` - minified & optimized version. NOTE: You'll need to include `React` AND `moment.js` separately - -## Tests - -For testing, it is required that you have [io.js](https://iojs.org/) installed. The tests rely on https://www.npmjs.com/package/jsdom for a DOM implementation, which only works in `io.js` and not `node.js` - -Before running tests, make sure you refresh the `lib` folder, which is built from the `src` folder (jsx is transpiled to normal js) by doing -```sh -$ npm run lib -``` - -Now you can safely run tests with -```sh -$ npm test -``` -or -```sh -$ make -``` - -For watch mode, run -```sh -$ make test-w -``` - -`react-date-picker` is setup with `CircleCI` https://circleci.com/gh/zippyui/react-date-picker so every time a test fails we are notified on the failure. -## License - -#### MIT diff --git a/base.css b/base.css deleted file mode 100644 index e8616b6..0000000 --- a/base.css +++ /dev/null @@ -1,2257 +0,0 @@ -.react-date-field { - box-sizing: border-box; - position: relative; - overflow: visible; - vertical-align: middle; } - .react-date-field *, - .react-date-field *:before, - .react-date-field *:after { - box-sizing: border-box; } - .react-date-field > .react-date-field__picker { - min-width: 100%; - position: absolute; - z-index: 100; - left: -1px; - background: white; } - -.react-date-field--picker-position-bottom > .react-date-field__picker { - top: 100%; } - -.react-date-field--picker-position-top > .react-date-field__picker { - bottom: 100%; } - -.react-date-field__input { - width: 100%; - -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - padding: 5px; - border: none; - outline: none; } - -.react-date-field__calendar-icon { - border: 3px solid gray; - border-top-width: 5px; - border-radius: 2px; - padding: 5px 7px; - margin: 2px 4px 0px 2px; - position: relative; } - -.react-date-field__clear-icon { - color: gray; - fill: gray; - margin: 0px 2px; - cursor: pointer; } - .react-date-field__clear-icon svg { - vertical-align: middle; } - -.react-date-field__clear-icon:hover { - color: #4d4d4d; - fill: #4d4d4d; } - -.react-date-field__calendar-icon:after, -.react-date-field__calendar-icon:before { - content: ''; - width: 3px; - height: 6px; - border-radius: 10px; - left: 1px; - top: -6px; - position: absolute; - background: gray; } - -.react-date-field__calendar-icon:after { - left: auto; - right: 0px; } - -.react-date-field__calendar-icon-inner { - background: gray; - position: absolute; - border-radius: 1px; - top: 2px; - left: 2px; - width: 4px; - height: 4px; } - -.react-date-picker__clock { - box-sizing: border-box; - display: inline-block; - border: 5px solid gray; - border-radius: 50%; - position: relative; } - .react-date-picker__clock *, - .react-date-picker__clock *:before, - .react-date-picker__clock *:after { - box-sizing: border-box; } - -.react-date-picker__clock-overlay, -.react-date-picker__clock-center { - border-radius: 50%; - position: absolute; - -webkit-transform: translate3d(-50%, -50%, 0); - transform: translate3d(-50%, -50%, 0); - top: 50%; - left: 50%; } - -.react-date-picker__clock-hand, -.react-date-picker__clock-tick { - position: absolute; - left: 50%; - top: 50%; - width: 1px; - background: gray; } - -.react-date-picker__date-format-spinner { - box-sizing: border-box; } - .react-date-picker__date-format-spinner *, - .react-date-picker__date-format-spinner *:before, - .react-date-picker__date-format-spinner *:after { - box-sizing: border-box; } - -.react-date-picker__time-picker { - box-sizing: border-box; } - .react-date-picker__time-picker *, - .react-date-picker__time-picker *:before, - .react-date-picker__time-picker *:after { - box-sizing: border-box; } - -.react-date-picker__time-picker-input { - margin-top: 10px; } - -.react-date-picker__year-view { - box-sizing: border-box; - outline: none; } - .react-date-picker__year-view *, - .react-date-picker__year-view *:before, - .react-date-picker__year-view *:after { - box-sizing: border-box; } - .react-date-picker__year-view-month { - text-align: center; } - -.react-date-picker__decade-view { - box-sizing: border-box; - outline: none; } - .react-date-picker__decade-view *, - .react-date-picker__decade-view *:before, - .react-date-picker__decade-view *:after { - box-sizing: border-box; } - .react-date-picker__decade-view-year { - text-align: center; } - -.react-date-picker__history-view { - box-sizing: border-box; - outline: none; } - .react-date-picker__history-view *, - .react-date-picker__history-view *:before, - .react-date-picker__history-view *:after { - box-sizing: border-box; } - -.react-date-picker__nav-bar { - box-sizing: border-box; - outline: none; - position: relative; } - .react-date-picker__nav-bar *, - .react-date-picker__nav-bar *:before, - .react-date-picker__nav-bar *:after { - box-sizing: border-box; } - .react-date-picker__nav-bar-arrow { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - position: relative; } - .react-date-picker__nav-bar-arrow--disabled { - fill: #BFBFBF; - cursor: default; } - .react-date-picker__nav-bar-date { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; } - .react-date-picker__nav-bar svg { - vertical-align: middle; } - .react-date-picker__nav-bar-history-view { - z-index: 100; - position: absolute; - margin: auto; - left: 3px; - right: 3px; - top: 100%; } - -.react-date-picker, -.react-date-picker__calendar, -.react-date-picker__basic-month-view { - box-sizing: border-box; } - .react-date-picker *, - .react-date-picker *:before, - .react-date-picker *:after, - .react-date-picker__calendar *, - .react-date-picker__calendar *:before, - .react-date-picker__calendar *:after, - .react-date-picker__basic-month-view *, - .react-date-picker__basic-month-view *:before, - .react-date-picker__basic-month-view *:after { - box-sizing: border-box; } - -.react-date-picker__transition-month-view { - position: relative; - overflow: hidden; } - -.react-date-picker__prev { - -webkit-transform: translate3d(-100%, 0px, 0px); - transform: translate3d(-100%, 0px, 0px); } - -.react-date-picker__next { - -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); } - -.react-date-picker--transition-left { - -webkit-transform: translate3d(-100%, 0px, 0px); - transform: translate3d(-100%, 0px, 0px); } - .react-date-picker--transition-left.react-date-picker__next { - -webkit-transform: translate3d(0%, 0px, 0px); - transform: translate3d(0%, 0px, 0px); } - -.react-date-picker--transition-right { - z-index: 1111; - -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); } - .react-date-picker--transition-right.react-date-picker__prev { - -webkit-transform: translate3d(0%, 0px, 0px); - transform: translate3d(0%, 0px, 0px); } - -.react-date-picker__center { - z-index: 10; } - -.react-date-picker__prev.react-date-picker--transition, -.react-date-picker__center.react-date-picker--transition, -.react-date-picker__next.react-date-picker--transition { - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; - transition-property: transform; - transition-property: transform, -webkit-transform; } - -.react-date-picker__prev, -.react-date-picker__next { - top: 0px; - left: 0px; - height: 100%; - width: 100%; - position: absolute !important; } - -.react-date-picker__month-view, -.react-date-picker__basic-month-view { - position: relative; - outline: none; } - .react-date-picker__month-view-week-day-name, - .react-date-picker__basic-month-view-week-day-name { - padding: 5px 0px; } - .react-date-picker__month-view-day--hidden, - .react-date-picker__basic-month-view-day--hidden { - visibility: hidden; } - .react-date-picker__month-view-day--disabled, - .react-date-picker__basic-month-view-day--disabled { - color: #BFBFBF; } - .react-date-picker__month-view-cell, - .react-date-picker__basic-month-view-cell { - -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row; - -ms-flex-flow: row; - flex-flow: row; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - .react-date-picker__month-view-row, - .react-date-picker__basic-month-view-row { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row; - -ms-flex-flow: row; - flex-flow: row; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; } - .react-date-picker__month-view-week-day-names, - .react-date-picker__basic-month-view-week-day-names { - -webkit-box-flex: 0; - -webkit-flex: none; - -ms-flex: none; - flex: none; } - -.react-flex-v2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.react-flex-v2--inline { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; } - -.react-flex-v2--display-flex { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.react-flex-v2--display-inline-flex { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; } - -/* ALIGN-ITEMS */ -.react-flex-v2--align-items-center { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; } - -.react-flex-v2--align-items-stretch { - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - -ms-grid-row-align: stretch; - align-items: stretch; } - -.react-flex-v2--align-items-baseline { - -webkit-box-align: baseline; - -webkit-align-items: baseline; - -ms-flex-align: baseline; - -ms-grid-row-align: baseline; - align-items: baseline; } - -.react-flex-v2--align-items-end, -.react-flex-v2--align-items-flex-end { - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - -ms-grid-row-align: flex-end; - align-items: flex-end; } - -.react-flex-v2--align-items-start, -.react-flex-v2--align-items-flex-start { - -webkit-box-align: start; - -webkit-align-items: flex-start; - -ms-flex-align: start; - -ms-grid-row-align: flex-start; - align-items: flex-start; } - -/* ALIGN-SELF */ -.react-flex-v2--align-self-center { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } - -.react-flex-v2--align-self-stretch { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; } - -.react-flex-v2--align-self-baseline { - -webkit-align-self: baseline; - -ms-flex-item-align: baseline; - align-self: baseline; } - -.react-flex-v2--align-self-auto { - -webkit-align-self: auto; - -ms-flex-item-align: auto; - align-self: auto; } - -.react-flex-v2--align-self-end, -.react-flex-v2--align-self-flex-end { - -webkit-align-self: flex-end; - -ms-flex-item-align: end; - align-self: flex-end; } - -.react-flex-v2--align-self-start, -.react-flex-v2--align-self-flex-start { - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; } - -/* ALIGN-CONTENT */ -.react-flex-v2--align-content-center { - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; } - -.react-flex-v2--align-content-stretch { - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; } - -.react-flex-v2--align-content-around, -.react-flex-v2--align-content-space-around { - -webkit-align-content: space-around; - -ms-flex-line-pack: distribute; - align-content: space-around; } - -.react-flex-v2--align-content-between, -.react-flex-v2--align-content-space-between { - -webkit-align-content: space-between; - -ms-flex-line-pack: justify; - align-content: space-between; } - -.react-flex-v2--align-content-end, -.react-flex-v2--align-content-flex-end { - -webkit-align-content: flex-end; - -ms-flex-line-pack: end; - align-content: flex-end; } - -.react-flex-v2--align-content-start, -.react-flex-v2--align-content-flex-start { - -webkit-align-content: flex-start; - -ms-flex-line-pack: start; - align-content: flex-start; } - -/* JUSTIFY-CONTENT */ -.react-flex-v2--justify-content-start, -.react-flex-v2--justify-content-flex-start { - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; } - -.react-flex-v2--justify-content-end, -.react-flex-v2--justify-content-flex-end { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; } - -.react-flex-v2--justify-content-center { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - -.react-flex-v2--justify-content-space-around { - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; } - -.react-flex-v2--justify-content-space-between { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; } - -/* WRAP */ -.react-flex-v2--wrap { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - -/* COLUMN */ -.react-flex-v2--column { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; } - -.react-flex-v2--column-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -webkit-flex-direction: column-reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - -/* ROW */ -.react-flex-v2--row { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } - -.react-flex-v2--row-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - -/* FLEX-BASIS */ -.react-flex-v2--flex-basis-auto { - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; } - -.react-flex-v2--flex-basis-none, -.react-flex-v2--flex-basis-0 { - -webkit-flex-basis: 0px; - -ms-flex-preferred-size: 0px; - flex-basis: 0px; } - -.react-flex-v2--flex-basis-fill { - -webkit-flex-basis: fill; - -ms-flex-preferred-size: fill; - flex-basis: fill; } - -.react-flex-v2--flex-basis-content { - -webkit-flex-basis: content; - -ms-flex-preferred-size: content; - flex-basis: content; } - -.react-flex-v2--flex-basis-fit-content { - -webkit-flex-basis: fit-content; - -ms-flex-preferred-size: fit-content; - flex-basis: fit-content; } - -.react-flex-v2--flex-basis-min-content { - -webkit-flex-basis: min-content; - -ms-flex-preferred-size: min-content; - flex-basis: min-content; } - -.react-flex-v2--flex-basis-max-content { - -webkit-flex-basis: max-content; - -ms-flex-preferred-size: max-content; - flex-basis: max-content; } - -/* FLEX */ -.react-flex-v2--flex-none, -.react-flex-v2--flex-0 { - -webkit-box-flex: 0; - -webkit-flex: none; - -ms-flex: none; - flex: none; } - -.react-flex-v2--flex-1 { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; } - -.react-flex-v2--flex-2 { - -webkit-box-flex: 2; - -webkit-flex: 2; - -ms-flex: 2; - flex: 2; } - -.react-flex-v2--flex-3 { - -webkit-box-flex: 3; - -webkit-flex: 3; - -ms-flex: 3; - flex: 3; } - -.react-flex-v2--flex-4 { - -webkit-box-flex: 4; - -webkit-flex: 4; - -ms-flex: 4; - flex: 4; } - -.react-flex-v2--flex-5 { - -webkit-box-flex: 5; - -webkit-flex: 5; - -ms-flex: 5; - flex: 5; } - -.react-flex-v2--flex-6 { - -webkit-box-flex: 6; - -webkit-flex: 6; - -ms-flex: 6; - flex: 6; } - -.react-flex-v2--flex-7 { - -webkit-box-flex: 7; - -webkit-flex: 7; - -ms-flex: 7; - flex: 7; } - -.react-flex-v2--flex-8 { - -webkit-box-flex: 8; - -webkit-flex: 8; - -ms-flex: 8; - flex: 8; } - -.react-flex-v2--flex-9 { - -webkit-box-flex: 9; - -webkit-flex: 9; - -ms-flex: 9; - flex: 9; } - -.react-flex-v2--flex-10 { - -webkit-box-flex: 10; - -webkit-flex: 10; - -ms-flex: 10; - flex: 10; } - -.react-flex-v2--flex-11 { - -webkit-box-flex: 11; - -webkit-flex: 11; - -ms-flex: 11; - flex: 11; } - -.react-flex-v2--flex-12 { - -webkit-box-flex: 12; - -webkit-flex: 12; - -ms-flex: 12; - flex: 12; } - -.react-flex-v2--flex-13 { - -webkit-box-flex: 13; - -webkit-flex: 13; - -ms-flex: 13; - flex: 13; } - -.react-flex-v2--flex-14 { - -webkit-box-flex: 14; - -webkit-flex: 14; - -ms-flex: 14; - flex: 14; } - -.react-flex-v2--flex-15 { - -webkit-box-flex: 15; - -webkit-flex: 15; - -ms-flex: 15; - flex: 15; } - -.react-flex-v2--flex-16 { - -webkit-box-flex: 16; - -webkit-flex: 16; - -ms-flex: 16; - flex: 16; } - -.react-flex-v2--flex-17 { - -webkit-box-flex: 17; - -webkit-flex: 17; - -ms-flex: 17; - flex: 17; } - -.react-flex-v2--flex-18 { - -webkit-box-flex: 18; - -webkit-flex: 18; - -ms-flex: 18; - flex: 18; } - -.react-flex-v2--flex-19 { - -webkit-box-flex: 19; - -webkit-flex: 19; - -ms-flex: 19; - flex: 19; } - -.react-flex-v2--flex-20 { - -webkit-box-flex: 20; - -webkit-flex: 20; - -ms-flex: 20; - flex: 20; } - -.react-flex-v2--flex-21 { - -webkit-box-flex: 21; - -webkit-flex: 21; - -ms-flex: 21; - flex: 21; } - -.react-flex-v2--flex-22 { - -webkit-box-flex: 22; - -webkit-flex: 22; - -ms-flex: 22; - flex: 22; } - -.react-flex-v2--flex-23 { - -webkit-box-flex: 23; - -webkit-flex: 23; - -ms-flex: 23; - flex: 23; } - -.react-flex-v2--flex-24 { - -webkit-box-flex: 24; - -webkit-flex: 24; - -ms-flex: 24; - flex: 24; } - -.react-flex-v2--flex-25 { - -webkit-box-flex: 25; - -webkit-flex: 25; - -ms-flex: 25; - flex: 25; } - -.react-flex-v2--flex-26 { - -webkit-box-flex: 26; - -webkit-flex: 26; - -ms-flex: 26; - flex: 26; } - -.react-flex-v2--flex-27 { - -webkit-box-flex: 27; - -webkit-flex: 27; - -ms-flex: 27; - flex: 27; } - -.react-flex-v2--flex-28 { - -webkit-box-flex: 28; - -webkit-flex: 28; - -ms-flex: 28; - flex: 28; } - -.react-flex-v2--flex-29 { - -webkit-box-flex: 29; - -webkit-flex: 29; - -ms-flex: 29; - flex: 29; } - -.react-flex-v2--flex-30 { - -webkit-box-flex: 30; - -webkit-flex: 30; - -ms-flex: 30; - flex: 30; } - -.react-flex-v2--flex-31 { - -webkit-box-flex: 31; - -webkit-flex: 31; - -ms-flex: 31; - flex: 31; } - -.react-flex-v2--flex-32 { - -webkit-box-flex: 32; - -webkit-flex: 32; - -ms-flex: 32; - flex: 32; } - -.react-flex-v2--flex-33 { - -webkit-box-flex: 33; - -webkit-flex: 33; - -ms-flex: 33; - flex: 33; } - -.react-flex-v2--flex-34 { - -webkit-box-flex: 34; - -webkit-flex: 34; - -ms-flex: 34; - flex: 34; } - -.react-flex-v2--flex-35 { - -webkit-box-flex: 35; - -webkit-flex: 35; - -ms-flex: 35; - flex: 35; } - -.react-flex-v2--flex-36 { - -webkit-box-flex: 36; - -webkit-flex: 36; - -ms-flex: 36; - flex: 36; } - -.react-flex-v2--flex-37 { - -webkit-box-flex: 37; - -webkit-flex: 37; - -ms-flex: 37; - flex: 37; } - -.react-flex-v2--flex-38 { - -webkit-box-flex: 38; - -webkit-flex: 38; - -ms-flex: 38; - flex: 38; } - -.react-flex-v2--flex-39 { - -webkit-box-flex: 39; - -webkit-flex: 39; - -ms-flex: 39; - flex: 39; } - -.react-flex-v2--flex-40 { - -webkit-box-flex: 40; - -webkit-flex: 40; - -ms-flex: 40; - flex: 40; } - -.react-flex-v2--flex-41 { - -webkit-box-flex: 41; - -webkit-flex: 41; - -ms-flex: 41; - flex: 41; } - -.react-flex-v2--flex-42 { - -webkit-box-flex: 42; - -webkit-flex: 42; - -ms-flex: 42; - flex: 42; } - -.react-flex-v2--flex-43 { - -webkit-box-flex: 43; - -webkit-flex: 43; - -ms-flex: 43; - flex: 43; } - -.react-flex-v2--flex-44 { - -webkit-box-flex: 44; - -webkit-flex: 44; - -ms-flex: 44; - flex: 44; } - -.react-flex-v2--flex-45 { - -webkit-box-flex: 45; - -webkit-flex: 45; - -ms-flex: 45; - flex: 45; } - -.react-flex-v2--flex-46 { - -webkit-box-flex: 46; - -webkit-flex: 46; - -ms-flex: 46; - flex: 46; } - -.react-flex-v2--flex-47 { - -webkit-box-flex: 47; - -webkit-flex: 47; - -ms-flex: 47; - flex: 47; } - -.react-flex-v2--flex-48 { - -webkit-box-flex: 48; - -webkit-flex: 48; - -ms-flex: 48; - flex: 48; } - -.react-flex-v2--flex-49 { - -webkit-box-flex: 49; - -webkit-flex: 49; - -ms-flex: 49; - flex: 49; } - -.react-flex-v2--flex-50 { - -webkit-box-flex: 50; - -webkit-flex: 50; - -ms-flex: 50; - flex: 50; } - -.react-flex-v2--flex-51 { - -webkit-box-flex: 51; - -webkit-flex: 51; - -ms-flex: 51; - flex: 51; } - -.react-flex-v2--flex-52 { - -webkit-box-flex: 52; - -webkit-flex: 52; - -ms-flex: 52; - flex: 52; } - -.react-flex-v2--flex-53 { - -webkit-box-flex: 53; - -webkit-flex: 53; - -ms-flex: 53; - flex: 53; } - -.react-flex-v2--flex-54 { - -webkit-box-flex: 54; - -webkit-flex: 54; - -ms-flex: 54; - flex: 54; } - -.react-flex-v2--flex-55 { - -webkit-box-flex: 55; - -webkit-flex: 55; - -ms-flex: 55; - flex: 55; } - -.react-flex-v2--flex-56 { - -webkit-box-flex: 56; - -webkit-flex: 56; - -ms-flex: 56; - flex: 56; } - -.react-flex-v2--flex-57 { - -webkit-box-flex: 57; - -webkit-flex: 57; - -ms-flex: 57; - flex: 57; } - -.react-flex-v2--flex-58 { - -webkit-box-flex: 58; - -webkit-flex: 58; - -ms-flex: 58; - flex: 58; } - -.react-flex-v2--flex-59 { - -webkit-box-flex: 59; - -webkit-flex: 59; - -ms-flex: 59; - flex: 59; } - -.react-flex-v2--flex-60 { - -webkit-box-flex: 60; - -webkit-flex: 60; - -ms-flex: 60; - flex: 60; } - -.react-flex-v2--flex-61 { - -webkit-box-flex: 61; - -webkit-flex: 61; - -ms-flex: 61; - flex: 61; } - -.react-flex-v2--flex-62 { - -webkit-box-flex: 62; - -webkit-flex: 62; - -ms-flex: 62; - flex: 62; } - -.react-flex-v2--flex-63 { - -webkit-box-flex: 63; - -webkit-flex: 63; - -ms-flex: 63; - flex: 63; } - -.react-flex-v2--flex-64 { - -webkit-box-flex: 64; - -webkit-flex: 64; - -ms-flex: 64; - flex: 64; } - -.react-flex-v2--flex-65 { - -webkit-box-flex: 65; - -webkit-flex: 65; - -ms-flex: 65; - flex: 65; } - -.react-flex-v2--flex-66 { - -webkit-box-flex: 66; - -webkit-flex: 66; - -ms-flex: 66; - flex: 66; } - -.react-flex-v2--flex-67 { - -webkit-box-flex: 67; - -webkit-flex: 67; - -ms-flex: 67; - flex: 67; } - -.react-flex-v2--flex-68 { - -webkit-box-flex: 68; - -webkit-flex: 68; - -ms-flex: 68; - flex: 68; } - -.react-flex-v2--flex-69 { - -webkit-box-flex: 69; - -webkit-flex: 69; - -ms-flex: 69; - flex: 69; } - -.react-flex-v2--flex-70 { - -webkit-box-flex: 70; - -webkit-flex: 70; - -ms-flex: 70; - flex: 70; } - -.react-flex-v2--flex-71 { - -webkit-box-flex: 71; - -webkit-flex: 71; - -ms-flex: 71; - flex: 71; } - -.react-flex-v2--flex-72 { - -webkit-box-flex: 72; - -webkit-flex: 72; - -ms-flex: 72; - flex: 72; } - -.react-flex-v2--flex-73 { - -webkit-box-flex: 73; - -webkit-flex: 73; - -ms-flex: 73; - flex: 73; } - -.react-flex-v2--flex-74 { - -webkit-box-flex: 74; - -webkit-flex: 74; - -ms-flex: 74; - flex: 74; } - -.react-flex-v2--flex-75 { - -webkit-box-flex: 75; - -webkit-flex: 75; - -ms-flex: 75; - flex: 75; } - -.react-flex-v2--flex-76 { - -webkit-box-flex: 76; - -webkit-flex: 76; - -ms-flex: 76; - flex: 76; } - -.react-flex-v2--flex-77 { - -webkit-box-flex: 77; - -webkit-flex: 77; - -ms-flex: 77; - flex: 77; } - -.react-flex-v2--flex-78 { - -webkit-box-flex: 78; - -webkit-flex: 78; - -ms-flex: 78; - flex: 78; } - -.react-flex-v2--flex-79 { - -webkit-box-flex: 79; - -webkit-flex: 79; - -ms-flex: 79; - flex: 79; } - -.react-flex-v2--flex-80 { - -webkit-box-flex: 80; - -webkit-flex: 80; - -ms-flex: 80; - flex: 80; } - -.react-flex-v2--flex-81 { - -webkit-box-flex: 81; - -webkit-flex: 81; - -ms-flex: 81; - flex: 81; } - -.react-flex-v2--flex-82 { - -webkit-box-flex: 82; - -webkit-flex: 82; - -ms-flex: 82; - flex: 82; } - -.react-flex-v2--flex-83 { - -webkit-box-flex: 83; - -webkit-flex: 83; - -ms-flex: 83; - flex: 83; } - -.react-flex-v2--flex-84 { - -webkit-box-flex: 84; - -webkit-flex: 84; - -ms-flex: 84; - flex: 84; } - -.react-flex-v2--flex-85 { - -webkit-box-flex: 85; - -webkit-flex: 85; - -ms-flex: 85; - flex: 85; } - -.react-flex-v2--flex-86 { - -webkit-box-flex: 86; - -webkit-flex: 86; - -ms-flex: 86; - flex: 86; } - -.react-flex-v2--flex-87 { - -webkit-box-flex: 87; - -webkit-flex: 87; - -ms-flex: 87; - flex: 87; } - -.react-flex-v2--flex-88 { - -webkit-box-flex: 88; - -webkit-flex: 88; - -ms-flex: 88; - flex: 88; } - -.react-flex-v2--flex-89 { - -webkit-box-flex: 89; - -webkit-flex: 89; - -ms-flex: 89; - flex: 89; } - -.react-flex-v2--flex-90 { - -webkit-box-flex: 90; - -webkit-flex: 90; - -ms-flex: 90; - flex: 90; } - -.react-flex-v2--flex-91 { - -webkit-box-flex: 91; - -webkit-flex: 91; - -ms-flex: 91; - flex: 91; } - -.react-flex-v2--flex-92 { - -webkit-box-flex: 92; - -webkit-flex: 92; - -ms-flex: 92; - flex: 92; } - -.react-flex-v2--flex-93 { - -webkit-box-flex: 93; - -webkit-flex: 93; - -ms-flex: 93; - flex: 93; } - -.react-flex-v2--flex-94 { - -webkit-box-flex: 94; - -webkit-flex: 94; - -ms-flex: 94; - flex: 94; } - -.react-flex-v2--flex-95 { - -webkit-box-flex: 95; - -webkit-flex: 95; - -ms-flex: 95; - flex: 95; } - -.react-flex-v2--flex-96 { - -webkit-box-flex: 96; - -webkit-flex: 96; - -ms-flex: 96; - flex: 96; } - -.react-flex-v2--flex-97 { - -webkit-box-flex: 97; - -webkit-flex: 97; - -ms-flex: 97; - flex: 97; } - -.react-flex-v2--flex-98 { - -webkit-box-flex: 98; - -webkit-flex: 98; - -ms-flex: 98; - flex: 98; } - -.react-flex-v2--flex-99 { - -webkit-box-flex: 99; - -webkit-flex: 99; - -ms-flex: 99; - flex: 99; } - -.react-flex-v2--flex-100 { - -webkit-box-flex: 100; - -webkit-flex: 100; - -ms-flex: 100; - flex: 100; } - -/* FLEX-GROW */ -.react-flex-v2--flex-grow-0 { - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; } - -.react-flex-v2--flex-grow-1 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - -.react-flex-v2--flex-grow-2 { - -webkit-box-flex: 2; - -webkit-flex-grow: 2; - -ms-flex-positive: 2; - flex-grow: 2; } - -.react-flex-v2--flex-grow-3 { - -webkit-box-flex: 3; - -webkit-flex-grow: 3; - -ms-flex-positive: 3; - flex-grow: 3; } - -.react-flex-v2--flex-grow-4 { - -webkit-box-flex: 4; - -webkit-flex-grow: 4; - -ms-flex-positive: 4; - flex-grow: 4; } - -.react-flex-v2--flex-grow-5 { - -webkit-box-flex: 5; - -webkit-flex-grow: 5; - -ms-flex-positive: 5; - flex-grow: 5; } - -.react-flex-v2--flex-grow-6 { - -webkit-box-flex: 6; - -webkit-flex-grow: 6; - -ms-flex-positive: 6; - flex-grow: 6; } - -.react-flex-v2--flex-grow-7 { - -webkit-box-flex: 7; - -webkit-flex-grow: 7; - -ms-flex-positive: 7; - flex-grow: 7; } - -.react-flex-v2--flex-grow-8 { - -webkit-box-flex: 8; - -webkit-flex-grow: 8; - -ms-flex-positive: 8; - flex-grow: 8; } - -.react-flex-v2--flex-grow-9 { - -webkit-box-flex: 9; - -webkit-flex-grow: 9; - -ms-flex-positive: 9; - flex-grow: 9; } - -.react-flex-v2--flex-grow-10 { - -webkit-box-flex: 10; - -webkit-flex-grow: 10; - -ms-flex-positive: 10; - flex-grow: 10; } - -.react-flex-v2--flex-grow-11 { - -webkit-box-flex: 11; - -webkit-flex-grow: 11; - -ms-flex-positive: 11; - flex-grow: 11; } - -.react-flex-v2--flex-grow-12 { - -webkit-box-flex: 12; - -webkit-flex-grow: 12; - -ms-flex-positive: 12; - flex-grow: 12; } - -.react-flex-v2--flex-grow-13 { - -webkit-box-flex: 13; - -webkit-flex-grow: 13; - -ms-flex-positive: 13; - flex-grow: 13; } - -.react-flex-v2--flex-grow-14 { - -webkit-box-flex: 14; - -webkit-flex-grow: 14; - -ms-flex-positive: 14; - flex-grow: 14; } - -.react-flex-v2--flex-grow-15 { - -webkit-box-flex: 15; - -webkit-flex-grow: 15; - -ms-flex-positive: 15; - flex-grow: 15; } - -.react-flex-v2--flex-grow-16 { - -webkit-box-flex: 16; - -webkit-flex-grow: 16; - -ms-flex-positive: 16; - flex-grow: 16; } - -.react-flex-v2--flex-grow-17 { - -webkit-box-flex: 17; - -webkit-flex-grow: 17; - -ms-flex-positive: 17; - flex-grow: 17; } - -.react-flex-v2--flex-grow-18 { - -webkit-box-flex: 18; - -webkit-flex-grow: 18; - -ms-flex-positive: 18; - flex-grow: 18; } - -.react-flex-v2--flex-grow-19 { - -webkit-box-flex: 19; - -webkit-flex-grow: 19; - -ms-flex-positive: 19; - flex-grow: 19; } - -.react-flex-v2--flex-grow-20 { - -webkit-box-flex: 20; - -webkit-flex-grow: 20; - -ms-flex-positive: 20; - flex-grow: 20; } - -.react-flex-v2--flex-grow-21 { - -webkit-box-flex: 21; - -webkit-flex-grow: 21; - -ms-flex-positive: 21; - flex-grow: 21; } - -.react-flex-v2--flex-grow-22 { - -webkit-box-flex: 22; - -webkit-flex-grow: 22; - -ms-flex-positive: 22; - flex-grow: 22; } - -.react-flex-v2--flex-grow-23 { - -webkit-box-flex: 23; - -webkit-flex-grow: 23; - -ms-flex-positive: 23; - flex-grow: 23; } - -.react-flex-v2--flex-grow-24 { - -webkit-box-flex: 24; - -webkit-flex-grow: 24; - -ms-flex-positive: 24; - flex-grow: 24; } - -.react-flex-v2--flex-grow-25 { - -webkit-box-flex: 25; - -webkit-flex-grow: 25; - -ms-flex-positive: 25; - flex-grow: 25; } - -.react-flex-v2--flex-grow-26 { - -webkit-box-flex: 26; - -webkit-flex-grow: 26; - -ms-flex-positive: 26; - flex-grow: 26; } - -.react-flex-v2--flex-grow-27 { - -webkit-box-flex: 27; - -webkit-flex-grow: 27; - -ms-flex-positive: 27; - flex-grow: 27; } - -.react-flex-v2--flex-grow-28 { - -webkit-box-flex: 28; - -webkit-flex-grow: 28; - -ms-flex-positive: 28; - flex-grow: 28; } - -.react-flex-v2--flex-grow-29 { - -webkit-box-flex: 29; - -webkit-flex-grow: 29; - -ms-flex-positive: 29; - flex-grow: 29; } - -.react-flex-v2--flex-grow-30 { - -webkit-box-flex: 30; - -webkit-flex-grow: 30; - -ms-flex-positive: 30; - flex-grow: 30; } - -.react-flex-v2--flex-grow-31 { - -webkit-box-flex: 31; - -webkit-flex-grow: 31; - -ms-flex-positive: 31; - flex-grow: 31; } - -.react-flex-v2--flex-grow-32 { - -webkit-box-flex: 32; - -webkit-flex-grow: 32; - -ms-flex-positive: 32; - flex-grow: 32; } - -.react-flex-v2--flex-grow-33 { - -webkit-box-flex: 33; - -webkit-flex-grow: 33; - -ms-flex-positive: 33; - flex-grow: 33; } - -.react-flex-v2--flex-grow-34 { - -webkit-box-flex: 34; - -webkit-flex-grow: 34; - -ms-flex-positive: 34; - flex-grow: 34; } - -.react-flex-v2--flex-grow-35 { - -webkit-box-flex: 35; - -webkit-flex-grow: 35; - -ms-flex-positive: 35; - flex-grow: 35; } - -.react-flex-v2--flex-grow-36 { - -webkit-box-flex: 36; - -webkit-flex-grow: 36; - -ms-flex-positive: 36; - flex-grow: 36; } - -.react-flex-v2--flex-grow-37 { - -webkit-box-flex: 37; - -webkit-flex-grow: 37; - -ms-flex-positive: 37; - flex-grow: 37; } - -.react-flex-v2--flex-grow-38 { - -webkit-box-flex: 38; - -webkit-flex-grow: 38; - -ms-flex-positive: 38; - flex-grow: 38; } - -.react-flex-v2--flex-grow-39 { - -webkit-box-flex: 39; - -webkit-flex-grow: 39; - -ms-flex-positive: 39; - flex-grow: 39; } - -.react-flex-v2--flex-grow-40 { - -webkit-box-flex: 40; - -webkit-flex-grow: 40; - -ms-flex-positive: 40; - flex-grow: 40; } - -.react-flex-v2--flex-grow-41 { - -webkit-box-flex: 41; - -webkit-flex-grow: 41; - -ms-flex-positive: 41; - flex-grow: 41; } - -.react-flex-v2--flex-grow-42 { - -webkit-box-flex: 42; - -webkit-flex-grow: 42; - -ms-flex-positive: 42; - flex-grow: 42; } - -.react-flex-v2--flex-grow-43 { - -webkit-box-flex: 43; - -webkit-flex-grow: 43; - -ms-flex-positive: 43; - flex-grow: 43; } - -.react-flex-v2--flex-grow-44 { - -webkit-box-flex: 44; - -webkit-flex-grow: 44; - -ms-flex-positive: 44; - flex-grow: 44; } - -.react-flex-v2--flex-grow-45 { - -webkit-box-flex: 45; - -webkit-flex-grow: 45; - -ms-flex-positive: 45; - flex-grow: 45; } - -.react-flex-v2--flex-grow-46 { - -webkit-box-flex: 46; - -webkit-flex-grow: 46; - -ms-flex-positive: 46; - flex-grow: 46; } - -.react-flex-v2--flex-grow-47 { - -webkit-box-flex: 47; - -webkit-flex-grow: 47; - -ms-flex-positive: 47; - flex-grow: 47; } - -.react-flex-v2--flex-grow-48 { - -webkit-box-flex: 48; - -webkit-flex-grow: 48; - -ms-flex-positive: 48; - flex-grow: 48; } - -.react-flex-v2--flex-grow-49 { - -webkit-box-flex: 49; - -webkit-flex-grow: 49; - -ms-flex-positive: 49; - flex-grow: 49; } - -.react-flex-v2--flex-grow-50 { - -webkit-box-flex: 50; - -webkit-flex-grow: 50; - -ms-flex-positive: 50; - flex-grow: 50; } - -.react-flex-v2--flex-grow-51 { - -webkit-box-flex: 51; - -webkit-flex-grow: 51; - -ms-flex-positive: 51; - flex-grow: 51; } - -.react-flex-v2--flex-grow-52 { - -webkit-box-flex: 52; - -webkit-flex-grow: 52; - -ms-flex-positive: 52; - flex-grow: 52; } - -.react-flex-v2--flex-grow-53 { - -webkit-box-flex: 53; - -webkit-flex-grow: 53; - -ms-flex-positive: 53; - flex-grow: 53; } - -.react-flex-v2--flex-grow-54 { - -webkit-box-flex: 54; - -webkit-flex-grow: 54; - -ms-flex-positive: 54; - flex-grow: 54; } - -.react-flex-v2--flex-grow-55 { - -webkit-box-flex: 55; - -webkit-flex-grow: 55; - -ms-flex-positive: 55; - flex-grow: 55; } - -.react-flex-v2--flex-grow-56 { - -webkit-box-flex: 56; - -webkit-flex-grow: 56; - -ms-flex-positive: 56; - flex-grow: 56; } - -.react-flex-v2--flex-grow-57 { - -webkit-box-flex: 57; - -webkit-flex-grow: 57; - -ms-flex-positive: 57; - flex-grow: 57; } - -.react-flex-v2--flex-grow-58 { - -webkit-box-flex: 58; - -webkit-flex-grow: 58; - -ms-flex-positive: 58; - flex-grow: 58; } - -.react-flex-v2--flex-grow-59 { - -webkit-box-flex: 59; - -webkit-flex-grow: 59; - -ms-flex-positive: 59; - flex-grow: 59; } - -.react-flex-v2--flex-grow-60 { - -webkit-box-flex: 60; - -webkit-flex-grow: 60; - -ms-flex-positive: 60; - flex-grow: 60; } - -.react-flex-v2--flex-grow-61 { - -webkit-box-flex: 61; - -webkit-flex-grow: 61; - -ms-flex-positive: 61; - flex-grow: 61; } - -.react-flex-v2--flex-grow-62 { - -webkit-box-flex: 62; - -webkit-flex-grow: 62; - -ms-flex-positive: 62; - flex-grow: 62; } - -.react-flex-v2--flex-grow-63 { - -webkit-box-flex: 63; - -webkit-flex-grow: 63; - -ms-flex-positive: 63; - flex-grow: 63; } - -.react-flex-v2--flex-grow-64 { - -webkit-box-flex: 64; - -webkit-flex-grow: 64; - -ms-flex-positive: 64; - flex-grow: 64; } - -.react-flex-v2--flex-grow-65 { - -webkit-box-flex: 65; - -webkit-flex-grow: 65; - -ms-flex-positive: 65; - flex-grow: 65; } - -.react-flex-v2--flex-grow-66 { - -webkit-box-flex: 66; - -webkit-flex-grow: 66; - -ms-flex-positive: 66; - flex-grow: 66; } - -.react-flex-v2--flex-grow-67 { - -webkit-box-flex: 67; - -webkit-flex-grow: 67; - -ms-flex-positive: 67; - flex-grow: 67; } - -.react-flex-v2--flex-grow-68 { - -webkit-box-flex: 68; - -webkit-flex-grow: 68; - -ms-flex-positive: 68; - flex-grow: 68; } - -.react-flex-v2--flex-grow-69 { - -webkit-box-flex: 69; - -webkit-flex-grow: 69; - -ms-flex-positive: 69; - flex-grow: 69; } - -.react-flex-v2--flex-grow-70 { - -webkit-box-flex: 70; - -webkit-flex-grow: 70; - -ms-flex-positive: 70; - flex-grow: 70; } - -.react-flex-v2--flex-grow-71 { - -webkit-box-flex: 71; - -webkit-flex-grow: 71; - -ms-flex-positive: 71; - flex-grow: 71; } - -.react-flex-v2--flex-grow-72 { - -webkit-box-flex: 72; - -webkit-flex-grow: 72; - -ms-flex-positive: 72; - flex-grow: 72; } - -.react-flex-v2--flex-grow-73 { - -webkit-box-flex: 73; - -webkit-flex-grow: 73; - -ms-flex-positive: 73; - flex-grow: 73; } - -.react-flex-v2--flex-grow-74 { - -webkit-box-flex: 74; - -webkit-flex-grow: 74; - -ms-flex-positive: 74; - flex-grow: 74; } - -.react-flex-v2--flex-grow-75 { - -webkit-box-flex: 75; - -webkit-flex-grow: 75; - -ms-flex-positive: 75; - flex-grow: 75; } - -.react-flex-v2--flex-grow-76 { - -webkit-box-flex: 76; - -webkit-flex-grow: 76; - -ms-flex-positive: 76; - flex-grow: 76; } - -.react-flex-v2--flex-grow-77 { - -webkit-box-flex: 77; - -webkit-flex-grow: 77; - -ms-flex-positive: 77; - flex-grow: 77; } - -.react-flex-v2--flex-grow-78 { - -webkit-box-flex: 78; - -webkit-flex-grow: 78; - -ms-flex-positive: 78; - flex-grow: 78; } - -.react-flex-v2--flex-grow-79 { - -webkit-box-flex: 79; - -webkit-flex-grow: 79; - -ms-flex-positive: 79; - flex-grow: 79; } - -.react-flex-v2--flex-grow-80 { - -webkit-box-flex: 80; - -webkit-flex-grow: 80; - -ms-flex-positive: 80; - flex-grow: 80; } - -.react-flex-v2--flex-grow-81 { - -webkit-box-flex: 81; - -webkit-flex-grow: 81; - -ms-flex-positive: 81; - flex-grow: 81; } - -.react-flex-v2--flex-grow-82 { - -webkit-box-flex: 82; - -webkit-flex-grow: 82; - -ms-flex-positive: 82; - flex-grow: 82; } - -.react-flex-v2--flex-grow-83 { - -webkit-box-flex: 83; - -webkit-flex-grow: 83; - -ms-flex-positive: 83; - flex-grow: 83; } - -.react-flex-v2--flex-grow-84 { - -webkit-box-flex: 84; - -webkit-flex-grow: 84; - -ms-flex-positive: 84; - flex-grow: 84; } - -.react-flex-v2--flex-grow-85 { - -webkit-box-flex: 85; - -webkit-flex-grow: 85; - -ms-flex-positive: 85; - flex-grow: 85; } - -.react-flex-v2--flex-grow-86 { - -webkit-box-flex: 86; - -webkit-flex-grow: 86; - -ms-flex-positive: 86; - flex-grow: 86; } - -.react-flex-v2--flex-grow-87 { - -webkit-box-flex: 87; - -webkit-flex-grow: 87; - -ms-flex-positive: 87; - flex-grow: 87; } - -.react-flex-v2--flex-grow-88 { - -webkit-box-flex: 88; - -webkit-flex-grow: 88; - -ms-flex-positive: 88; - flex-grow: 88; } - -.react-flex-v2--flex-grow-89 { - -webkit-box-flex: 89; - -webkit-flex-grow: 89; - -ms-flex-positive: 89; - flex-grow: 89; } - -.react-flex-v2--flex-grow-90 { - -webkit-box-flex: 90; - -webkit-flex-grow: 90; - -ms-flex-positive: 90; - flex-grow: 90; } - -.react-flex-v2--flex-grow-91 { - -webkit-box-flex: 91; - -webkit-flex-grow: 91; - -ms-flex-positive: 91; - flex-grow: 91; } - -.react-flex-v2--flex-grow-92 { - -webkit-box-flex: 92; - -webkit-flex-grow: 92; - -ms-flex-positive: 92; - flex-grow: 92; } - -.react-flex-v2--flex-grow-93 { - -webkit-box-flex: 93; - -webkit-flex-grow: 93; - -ms-flex-positive: 93; - flex-grow: 93; } - -.react-flex-v2--flex-grow-94 { - -webkit-box-flex: 94; - -webkit-flex-grow: 94; - -ms-flex-positive: 94; - flex-grow: 94; } - -.react-flex-v2--flex-grow-95 { - -webkit-box-flex: 95; - -webkit-flex-grow: 95; - -ms-flex-positive: 95; - flex-grow: 95; } - -.react-flex-v2--flex-grow-96 { - -webkit-box-flex: 96; - -webkit-flex-grow: 96; - -ms-flex-positive: 96; - flex-grow: 96; } - -.react-flex-v2--flex-grow-97 { - -webkit-box-flex: 97; - -webkit-flex-grow: 97; - -ms-flex-positive: 97; - flex-grow: 97; } - -.react-flex-v2--flex-grow-98 { - -webkit-box-flex: 98; - -webkit-flex-grow: 98; - -ms-flex-positive: 98; - flex-grow: 98; } - -.react-flex-v2--flex-grow-99 { - -webkit-box-flex: 99; - -webkit-flex-grow: 99; - -ms-flex-positive: 99; - flex-grow: 99; } - -.react-flex-v2--flex-grow-100 { - -webkit-box-flex: 100; - -webkit-flex-grow: 100; - -ms-flex-positive: 100; - flex-grow: 100; } - -/* FLEX-SHRINK */ -.react-flex-v2--flex-shrink-0 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; } - -.react-flex-v2--flex-shrink-1 { - -webkit-flex-shrink: 1; - -ms-flex-negative: 1; - flex-shrink: 1; } - -.react-flex-v2--flex-shrink-2 { - -webkit-flex-shrink: 2; - -ms-flex-negative: 2; - flex-shrink: 2; } - -.react-flex-v2--flex-shrink-3 { - -webkit-flex-shrink: 3; - -ms-flex-negative: 3; - flex-shrink: 3; } - -.react-flex-v2--flex-shrink-4 { - -webkit-flex-shrink: 4; - -ms-flex-negative: 4; - flex-shrink: 4; } - -.react-flex-v2--flex-shrink-5 { - -webkit-flex-shrink: 5; - -ms-flex-negative: 5; - flex-shrink: 5; } - -.react-flex-v2--flex-shrink-6 { - -webkit-flex-shrink: 6; - -ms-flex-negative: 6; - flex-shrink: 6; } - -.react-flex-v2--flex-shrink-7 { - -webkit-flex-shrink: 7; - -ms-flex-negative: 7; - flex-shrink: 7; } - -.react-flex-v2--flex-shrink-8 { - -webkit-flex-shrink: 8; - -ms-flex-negative: 8; - flex-shrink: 8; } - -.react-flex-v2--flex-shrink-9 { - -webkit-flex-shrink: 9; - -ms-flex-negative: 9; - flex-shrink: 9; } - -.react-flex-v2--flex-shrink-10 { - -webkit-flex-shrink: 10; - -ms-flex-negative: 10; - flex-shrink: 10; } - -.react-flex-v2--flex-shrink-11 { - -webkit-flex-shrink: 11; - -ms-flex-negative: 11; - flex-shrink: 11; } - -.react-flex-v2--flex-shrink-12 { - -webkit-flex-shrink: 12; - -ms-flex-negative: 12; - flex-shrink: 12; } - -.react-flex-v2--flex-shrink-13 { - -webkit-flex-shrink: 13; - -ms-flex-negative: 13; - flex-shrink: 13; } - -.react-flex-v2--flex-shrink-14 { - -webkit-flex-shrink: 14; - -ms-flex-negative: 14; - flex-shrink: 14; } - -.react-flex-v2--flex-shrink-15 { - -webkit-flex-shrink: 15; - -ms-flex-negative: 15; - flex-shrink: 15; } - -.react-flex-v2--flex-shrink-16 { - -webkit-flex-shrink: 16; - -ms-flex-negative: 16; - flex-shrink: 16; } - -.react-flex-v2--flex-shrink-17 { - -webkit-flex-shrink: 17; - -ms-flex-negative: 17; - flex-shrink: 17; } - -.react-flex-v2--flex-shrink-18 { - -webkit-flex-shrink: 18; - -ms-flex-negative: 18; - flex-shrink: 18; } - -.react-flex-v2--flex-shrink-19 { - -webkit-flex-shrink: 19; - -ms-flex-negative: 19; - flex-shrink: 19; } - -.react-flex-v2--flex-shrink-20 { - -webkit-flex-shrink: 20; - -ms-flex-negative: 20; - flex-shrink: 20; } - -.react-flex-v2--flex-shrink-21 { - -webkit-flex-shrink: 21; - -ms-flex-negative: 21; - flex-shrink: 21; } - -.react-flex-v2--flex-shrink-22 { - -webkit-flex-shrink: 22; - -ms-flex-negative: 22; - flex-shrink: 22; } - -.react-flex-v2--flex-shrink-23 { - -webkit-flex-shrink: 23; - -ms-flex-negative: 23; - flex-shrink: 23; } - -.react-flex-v2--flex-shrink-24 { - -webkit-flex-shrink: 24; - -ms-flex-negative: 24; - flex-shrink: 24; } - -.react-flex-v2--flex-shrink-25 { - -webkit-flex-shrink: 25; - -ms-flex-negative: 25; - flex-shrink: 25; } - -.react-flex-v2--flex-shrink-26 { - -webkit-flex-shrink: 26; - -ms-flex-negative: 26; - flex-shrink: 26; } - -.react-flex-v2--flex-shrink-27 { - -webkit-flex-shrink: 27; - -ms-flex-negative: 27; - flex-shrink: 27; } - -.react-flex-v2--flex-shrink-28 { - -webkit-flex-shrink: 28; - -ms-flex-negative: 28; - flex-shrink: 28; } - -.react-flex-v2--flex-shrink-29 { - -webkit-flex-shrink: 29; - -ms-flex-negative: 29; - flex-shrink: 29; } - -.react-flex-v2--flex-shrink-30 { - -webkit-flex-shrink: 30; - -ms-flex-negative: 30; - flex-shrink: 30; } - -.react-flex-v2--flex-shrink-31 { - -webkit-flex-shrink: 31; - -ms-flex-negative: 31; - flex-shrink: 31; } - -.react-flex-v2--flex-shrink-32 { - -webkit-flex-shrink: 32; - -ms-flex-negative: 32; - flex-shrink: 32; } - -.react-flex-v2--flex-shrink-33 { - -webkit-flex-shrink: 33; - -ms-flex-negative: 33; - flex-shrink: 33; } - -.react-flex-v2--flex-shrink-34 { - -webkit-flex-shrink: 34; - -ms-flex-negative: 34; - flex-shrink: 34; } - -.react-flex-v2--flex-shrink-35 { - -webkit-flex-shrink: 35; - -ms-flex-negative: 35; - flex-shrink: 35; } - -.react-flex-v2--flex-shrink-36 { - -webkit-flex-shrink: 36; - -ms-flex-negative: 36; - flex-shrink: 36; } - -.react-flex-v2--flex-shrink-37 { - -webkit-flex-shrink: 37; - -ms-flex-negative: 37; - flex-shrink: 37; } - -.react-flex-v2--flex-shrink-38 { - -webkit-flex-shrink: 38; - -ms-flex-negative: 38; - flex-shrink: 38; } - -.react-flex-v2--flex-shrink-39 { - -webkit-flex-shrink: 39; - -ms-flex-negative: 39; - flex-shrink: 39; } - -.react-flex-v2--flex-shrink-40 { - -webkit-flex-shrink: 40; - -ms-flex-negative: 40; - flex-shrink: 40; } - -.react-flex-v2--flex-shrink-41 { - -webkit-flex-shrink: 41; - -ms-flex-negative: 41; - flex-shrink: 41; } - -.react-flex-v2--flex-shrink-42 { - -webkit-flex-shrink: 42; - -ms-flex-negative: 42; - flex-shrink: 42; } - -.react-flex-v2--flex-shrink-43 { - -webkit-flex-shrink: 43; - -ms-flex-negative: 43; - flex-shrink: 43; } - -.react-flex-v2--flex-shrink-44 { - -webkit-flex-shrink: 44; - -ms-flex-negative: 44; - flex-shrink: 44; } - -.react-flex-v2--flex-shrink-45 { - -webkit-flex-shrink: 45; - -ms-flex-negative: 45; - flex-shrink: 45; } - -.react-flex-v2--flex-shrink-46 { - -webkit-flex-shrink: 46; - -ms-flex-negative: 46; - flex-shrink: 46; } - -.react-flex-v2--flex-shrink-47 { - -webkit-flex-shrink: 47; - -ms-flex-negative: 47; - flex-shrink: 47; } - -.react-flex-v2--flex-shrink-48 { - -webkit-flex-shrink: 48; - -ms-flex-negative: 48; - flex-shrink: 48; } - -.react-flex-v2--flex-shrink-49 { - -webkit-flex-shrink: 49; - -ms-flex-negative: 49; - flex-shrink: 49; } - -.react-flex-v2--flex-shrink-50 { - -webkit-flex-shrink: 50; - -ms-flex-negative: 50; - flex-shrink: 50; } - -.react-flex-v2--flex-shrink-51 { - -webkit-flex-shrink: 51; - -ms-flex-negative: 51; - flex-shrink: 51; } - -.react-flex-v2--flex-shrink-52 { - -webkit-flex-shrink: 52; - -ms-flex-negative: 52; - flex-shrink: 52; } - -.react-flex-v2--flex-shrink-53 { - -webkit-flex-shrink: 53; - -ms-flex-negative: 53; - flex-shrink: 53; } - -.react-flex-v2--flex-shrink-54 { - -webkit-flex-shrink: 54; - -ms-flex-negative: 54; - flex-shrink: 54; } - -.react-flex-v2--flex-shrink-55 { - -webkit-flex-shrink: 55; - -ms-flex-negative: 55; - flex-shrink: 55; } - -.react-flex-v2--flex-shrink-56 { - -webkit-flex-shrink: 56; - -ms-flex-negative: 56; - flex-shrink: 56; } - -.react-flex-v2--flex-shrink-57 { - -webkit-flex-shrink: 57; - -ms-flex-negative: 57; - flex-shrink: 57; } - -.react-flex-v2--flex-shrink-58 { - -webkit-flex-shrink: 58; - -ms-flex-negative: 58; - flex-shrink: 58; } - -.react-flex-v2--flex-shrink-59 { - -webkit-flex-shrink: 59; - -ms-flex-negative: 59; - flex-shrink: 59; } - -.react-flex-v2--flex-shrink-60 { - -webkit-flex-shrink: 60; - -ms-flex-negative: 60; - flex-shrink: 60; } - -.react-flex-v2--flex-shrink-61 { - -webkit-flex-shrink: 61; - -ms-flex-negative: 61; - flex-shrink: 61; } - -.react-flex-v2--flex-shrink-62 { - -webkit-flex-shrink: 62; - -ms-flex-negative: 62; - flex-shrink: 62; } - -.react-flex-v2--flex-shrink-63 { - -webkit-flex-shrink: 63; - -ms-flex-negative: 63; - flex-shrink: 63; } - -.react-flex-v2--flex-shrink-64 { - -webkit-flex-shrink: 64; - -ms-flex-negative: 64; - flex-shrink: 64; } - -.react-flex-v2--flex-shrink-65 { - -webkit-flex-shrink: 65; - -ms-flex-negative: 65; - flex-shrink: 65; } - -.react-flex-v2--flex-shrink-66 { - -webkit-flex-shrink: 66; - -ms-flex-negative: 66; - flex-shrink: 66; } - -.react-flex-v2--flex-shrink-67 { - -webkit-flex-shrink: 67; - -ms-flex-negative: 67; - flex-shrink: 67; } - -.react-flex-v2--flex-shrink-68 { - -webkit-flex-shrink: 68; - -ms-flex-negative: 68; - flex-shrink: 68; } - -.react-flex-v2--flex-shrink-69 { - -webkit-flex-shrink: 69; - -ms-flex-negative: 69; - flex-shrink: 69; } - -.react-flex-v2--flex-shrink-70 { - -webkit-flex-shrink: 70; - -ms-flex-negative: 70; - flex-shrink: 70; } - -.react-flex-v2--flex-shrink-71 { - -webkit-flex-shrink: 71; - -ms-flex-negative: 71; - flex-shrink: 71; } - -.react-flex-v2--flex-shrink-72 { - -webkit-flex-shrink: 72; - -ms-flex-negative: 72; - flex-shrink: 72; } - -.react-flex-v2--flex-shrink-73 { - -webkit-flex-shrink: 73; - -ms-flex-negative: 73; - flex-shrink: 73; } - -.react-flex-v2--flex-shrink-74 { - -webkit-flex-shrink: 74; - -ms-flex-negative: 74; - flex-shrink: 74; } - -.react-flex-v2--flex-shrink-75 { - -webkit-flex-shrink: 75; - -ms-flex-negative: 75; - flex-shrink: 75; } - -.react-flex-v2--flex-shrink-76 { - -webkit-flex-shrink: 76; - -ms-flex-negative: 76; - flex-shrink: 76; } - -.react-flex-v2--flex-shrink-77 { - -webkit-flex-shrink: 77; - -ms-flex-negative: 77; - flex-shrink: 77; } - -.react-flex-v2--flex-shrink-78 { - -webkit-flex-shrink: 78; - -ms-flex-negative: 78; - flex-shrink: 78; } - -.react-flex-v2--flex-shrink-79 { - -webkit-flex-shrink: 79; - -ms-flex-negative: 79; - flex-shrink: 79; } - -.react-flex-v2--flex-shrink-80 { - -webkit-flex-shrink: 80; - -ms-flex-negative: 80; - flex-shrink: 80; } - -.react-flex-v2--flex-shrink-81 { - -webkit-flex-shrink: 81; - -ms-flex-negative: 81; - flex-shrink: 81; } - -.react-flex-v2--flex-shrink-82 { - -webkit-flex-shrink: 82; - -ms-flex-negative: 82; - flex-shrink: 82; } - -.react-flex-v2--flex-shrink-83 { - -webkit-flex-shrink: 83; - -ms-flex-negative: 83; - flex-shrink: 83; } - -.react-flex-v2--flex-shrink-84 { - -webkit-flex-shrink: 84; - -ms-flex-negative: 84; - flex-shrink: 84; } - -.react-flex-v2--flex-shrink-85 { - -webkit-flex-shrink: 85; - -ms-flex-negative: 85; - flex-shrink: 85; } - -.react-flex-v2--flex-shrink-86 { - -webkit-flex-shrink: 86; - -ms-flex-negative: 86; - flex-shrink: 86; } - -.react-flex-v2--flex-shrink-87 { - -webkit-flex-shrink: 87; - -ms-flex-negative: 87; - flex-shrink: 87; } - -.react-flex-v2--flex-shrink-88 { - -webkit-flex-shrink: 88; - -ms-flex-negative: 88; - flex-shrink: 88; } - -.react-flex-v2--flex-shrink-89 { - -webkit-flex-shrink: 89; - -ms-flex-negative: 89; - flex-shrink: 89; } - -.react-flex-v2--flex-shrink-90 { - -webkit-flex-shrink: 90; - -ms-flex-negative: 90; - flex-shrink: 90; } - -.react-flex-v2--flex-shrink-91 { - -webkit-flex-shrink: 91; - -ms-flex-negative: 91; - flex-shrink: 91; } - -.react-flex-v2--flex-shrink-92 { - -webkit-flex-shrink: 92; - -ms-flex-negative: 92; - flex-shrink: 92; } - -.react-flex-v2--flex-shrink-93 { - -webkit-flex-shrink: 93; - -ms-flex-negative: 93; - flex-shrink: 93; } - -.react-flex-v2--flex-shrink-94 { - -webkit-flex-shrink: 94; - -ms-flex-negative: 94; - flex-shrink: 94; } - -.react-flex-v2--flex-shrink-95 { - -webkit-flex-shrink: 95; - -ms-flex-negative: 95; - flex-shrink: 95; } - -.react-flex-v2--flex-shrink-96 { - -webkit-flex-shrink: 96; - -ms-flex-negative: 96; - flex-shrink: 96; } - -.react-flex-v2--flex-shrink-97 { - -webkit-flex-shrink: 97; - -ms-flex-negative: 97; - flex-shrink: 97; } - -.react-flex-v2--flex-shrink-98 { - -webkit-flex-shrink: 98; - -ms-flex-negative: 98; - flex-shrink: 98; } - -.react-flex-v2--flex-shrink-99 { - -webkit-flex-shrink: 99; - -ms-flex-negative: 99; - flex-shrink: 99; } - -.react-flex-v2--flex-shrink-100 { - -webkit-flex-shrink: 100; - -ms-flex-negative: 100; - flex-shrink: 100; } diff --git a/picker.gif b/docs/picker.gif similarity index 100% rename from picker.gif rename to docs/picker.gif diff --git a/react-date-field.png b/docs/react-date-field.png similarity index 100% rename from react-date-field.png rename to docs/react-date-field.png diff --git a/index.css b/index.css deleted file mode 100644 index d957298..0000000 --- a/index.css +++ /dev/null @@ -1,2577 +0,0 @@ -.react-date-field { - box-sizing: border-box; - position: relative; - overflow: visible; - vertical-align: middle; } - .react-date-field *, - .react-date-field *:before, - .react-date-field *:after { - box-sizing: border-box; } - .react-date-field > .react-date-field__picker { - min-width: 100%; - position: absolute; - z-index: 100; - left: -1px; - background: white; } - -.react-date-field--picker-position-bottom > .react-date-field__picker { - top: 100%; } - -.react-date-field--picker-position-top > .react-date-field__picker { - bottom: 100%; } - -.react-date-field__input { - width: 100%; - -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - padding: 5px; - border: none; - outline: none; } - -.react-date-field__calendar-icon { - border: 3px solid gray; - border-top-width: 5px; - border-radius: 2px; - padding: 5px 7px; - margin: 2px 4px 0px 2px; - position: relative; } - -.react-date-field__clear-icon { - color: gray; - fill: gray; - margin: 0px 2px; - cursor: pointer; } - .react-date-field__clear-icon svg { - vertical-align: middle; } - -.react-date-field__clear-icon:hover { - color: #4d4d4d; - fill: #4d4d4d; } - -.react-date-field__calendar-icon:after, -.react-date-field__calendar-icon:before { - content: ''; - width: 3px; - height: 6px; - border-radius: 10px; - left: 1px; - top: -6px; - position: absolute; - background: gray; } - -.react-date-field__calendar-icon:after { - left: auto; - right: 0px; } - -.react-date-field__calendar-icon-inner { - background: gray; - position: absolute; - border-radius: 1px; - top: 2px; - left: 2px; - width: 4px; - height: 4px; } - -.react-date-picker__clock { - box-sizing: border-box; - display: inline-block; - border: 5px solid gray; - border-radius: 50%; - position: relative; } - .react-date-picker__clock *, - .react-date-picker__clock *:before, - .react-date-picker__clock *:after { - box-sizing: border-box; } - -.react-date-picker__clock-overlay, -.react-date-picker__clock-center { - border-radius: 50%; - position: absolute; - -webkit-transform: translate3d(-50%, -50%, 0); - transform: translate3d(-50%, -50%, 0); - top: 50%; - left: 50%; } - -.react-date-picker__clock-hand, -.react-date-picker__clock-tick { - position: absolute; - left: 50%; - top: 50%; - width: 1px; - background: gray; } - -.react-date-picker__date-format-spinner { - box-sizing: border-box; } - .react-date-picker__date-format-spinner *, - .react-date-picker__date-format-spinner *:before, - .react-date-picker__date-format-spinner *:after { - box-sizing: border-box; } - -.react-date-picker__time-picker { - box-sizing: border-box; } - .react-date-picker__time-picker *, - .react-date-picker__time-picker *:before, - .react-date-picker__time-picker *:after { - box-sizing: border-box; } - -.react-date-picker__time-picker-input { - margin-top: 10px; } - -.react-date-picker__year-view { - box-sizing: border-box; - outline: none; } - .react-date-picker__year-view *, - .react-date-picker__year-view *:before, - .react-date-picker__year-view *:after { - box-sizing: border-box; } - .react-date-picker__year-view-month { - text-align: center; } - -.react-date-picker__decade-view { - box-sizing: border-box; - outline: none; } - .react-date-picker__decade-view *, - .react-date-picker__decade-view *:before, - .react-date-picker__decade-view *:after { - box-sizing: border-box; } - .react-date-picker__decade-view-year { - text-align: center; } - -.react-date-picker__history-view { - box-sizing: border-box; - outline: none; } - .react-date-picker__history-view *, - .react-date-picker__history-view *:before, - .react-date-picker__history-view *:after { - box-sizing: border-box; } - -.react-date-picker__nav-bar { - box-sizing: border-box; - outline: none; - position: relative; } - .react-date-picker__nav-bar *, - .react-date-picker__nav-bar *:before, - .react-date-picker__nav-bar *:after { - box-sizing: border-box; } - .react-date-picker__nav-bar-arrow { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - position: relative; } - .react-date-picker__nav-bar-arrow--disabled { - fill: #BFBFBF; - cursor: default; } - .react-date-picker__nav-bar-date { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; } - .react-date-picker__nav-bar svg { - vertical-align: middle; } - .react-date-picker__nav-bar-history-view { - z-index: 100; - position: absolute; - margin: auto; - left: 3px; - right: 3px; - top: 100%; } - -.react-date-picker, -.react-date-picker__calendar, -.react-date-picker__basic-month-view { - box-sizing: border-box; } - .react-date-picker *, - .react-date-picker *:before, - .react-date-picker *:after, - .react-date-picker__calendar *, - .react-date-picker__calendar *:before, - .react-date-picker__calendar *:after, - .react-date-picker__basic-month-view *, - .react-date-picker__basic-month-view *:before, - .react-date-picker__basic-month-view *:after { - box-sizing: border-box; } - -.react-date-picker__transition-month-view { - position: relative; - overflow: hidden; } - -.react-date-picker__prev { - -webkit-transform: translate3d(-100%, 0px, 0px); - transform: translate3d(-100%, 0px, 0px); } - -.react-date-picker__next { - -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); } - -.react-date-picker--transition-left { - -webkit-transform: translate3d(-100%, 0px, 0px); - transform: translate3d(-100%, 0px, 0px); } - .react-date-picker--transition-left.react-date-picker__next { - -webkit-transform: translate3d(0%, 0px, 0px); - transform: translate3d(0%, 0px, 0px); } - -.react-date-picker--transition-right { - z-index: 1111; - -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); } - .react-date-picker--transition-right.react-date-picker__prev { - -webkit-transform: translate3d(0%, 0px, 0px); - transform: translate3d(0%, 0px, 0px); } - -.react-date-picker__center { - z-index: 10; } - -.react-date-picker__prev.react-date-picker--transition, -.react-date-picker__center.react-date-picker--transition, -.react-date-picker__next.react-date-picker--transition { - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; - transition-property: transform; - transition-property: transform, -webkit-transform; } - -.react-date-picker__prev, -.react-date-picker__next { - top: 0px; - left: 0px; - height: 100%; - width: 100%; - position: absolute !important; } - -.react-date-picker__month-view, -.react-date-picker__basic-month-view { - position: relative; - outline: none; } - .react-date-picker__month-view-week-day-name, - .react-date-picker__basic-month-view-week-day-name { - padding: 5px 0px; } - .react-date-picker__month-view-day--hidden, - .react-date-picker__basic-month-view-day--hidden { - visibility: hidden; } - .react-date-picker__month-view-day--disabled, - .react-date-picker__basic-month-view-day--disabled { - color: #BFBFBF; } - .react-date-picker__month-view-cell, - .react-date-picker__basic-month-view-cell { - -webkit-box-flex: 1; - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row; - -ms-flex-flow: row; - flex-flow: row; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - .react-date-picker__month-view-row, - .react-date-picker__basic-month-view-row { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row; - -ms-flex-flow: row; - flex-flow: row; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; } - .react-date-picker__month-view-week-day-names, - .react-date-picker__basic-month-view-week-day-names { - -webkit-box-flex: 0; - -webkit-flex: none; - -ms-flex: none; - flex: none; } - -.react-flex-v2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.react-flex-v2--inline { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; } - -.react-flex-v2--display-flex { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - -.react-flex-v2--display-inline-flex { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; } - -/* ALIGN-ITEMS */ -.react-flex-v2--align-items-center { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; } - -.react-flex-v2--align-items-stretch { - -webkit-box-align: stretch; - -webkit-align-items: stretch; - -ms-flex-align: stretch; - -ms-grid-row-align: stretch; - align-items: stretch; } - -.react-flex-v2--align-items-baseline { - -webkit-box-align: baseline; - -webkit-align-items: baseline; - -ms-flex-align: baseline; - -ms-grid-row-align: baseline; - align-items: baseline; } - -.react-flex-v2--align-items-end, -.react-flex-v2--align-items-flex-end { - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - -ms-grid-row-align: flex-end; - align-items: flex-end; } - -.react-flex-v2--align-items-start, -.react-flex-v2--align-items-flex-start { - -webkit-box-align: start; - -webkit-align-items: flex-start; - -ms-flex-align: start; - -ms-grid-row-align: flex-start; - align-items: flex-start; } - -/* ALIGN-SELF */ -.react-flex-v2--align-self-center { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } - -.react-flex-v2--align-self-stretch { - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; } - -.react-flex-v2--align-self-baseline { - -webkit-align-self: baseline; - -ms-flex-item-align: baseline; - align-self: baseline; } - -.react-flex-v2--align-self-auto { - -webkit-align-self: auto; - -ms-flex-item-align: auto; - align-self: auto; } - -.react-flex-v2--align-self-end, -.react-flex-v2--align-self-flex-end { - -webkit-align-self: flex-end; - -ms-flex-item-align: end; - align-self: flex-end; } - -.react-flex-v2--align-self-start, -.react-flex-v2--align-self-flex-start { - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; } - -/* ALIGN-CONTENT */ -.react-flex-v2--align-content-center { - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; } - -.react-flex-v2--align-content-stretch { - -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; } - -.react-flex-v2--align-content-around, -.react-flex-v2--align-content-space-around { - -webkit-align-content: space-around; - -ms-flex-line-pack: distribute; - align-content: space-around; } - -.react-flex-v2--align-content-between, -.react-flex-v2--align-content-space-between { - -webkit-align-content: space-between; - -ms-flex-line-pack: justify; - align-content: space-between; } - -.react-flex-v2--align-content-end, -.react-flex-v2--align-content-flex-end { - -webkit-align-content: flex-end; - -ms-flex-line-pack: end; - align-content: flex-end; } - -.react-flex-v2--align-content-start, -.react-flex-v2--align-content-flex-start { - -webkit-align-content: flex-start; - -ms-flex-line-pack: start; - align-content: flex-start; } - -/* JUSTIFY-CONTENT */ -.react-flex-v2--justify-content-start, -.react-flex-v2--justify-content-flex-start { - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; } - -.react-flex-v2--justify-content-end, -.react-flex-v2--justify-content-flex-end { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; } - -.react-flex-v2--justify-content-center { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - -.react-flex-v2--justify-content-space-around { - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; } - -.react-flex-v2--justify-content-space-between { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; } - -/* WRAP */ -.react-flex-v2--wrap { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - -/* COLUMN */ -.react-flex-v2--column { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; } - -.react-flex-v2--column-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -webkit-flex-direction: column-reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - -/* ROW */ -.react-flex-v2--row { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } - -.react-flex-v2--row-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } - -/* FLEX-BASIS */ -.react-flex-v2--flex-basis-auto { - -webkit-flex-basis: auto; - -ms-flex-preferred-size: auto; - flex-basis: auto; } - -.react-flex-v2--flex-basis-none, -.react-flex-v2--flex-basis-0 { - -webkit-flex-basis: 0px; - -ms-flex-preferred-size: 0px; - flex-basis: 0px; } - -.react-flex-v2--flex-basis-fill { - -webkit-flex-basis: fill; - -ms-flex-preferred-size: fill; - flex-basis: fill; } - -.react-flex-v2--flex-basis-content { - -webkit-flex-basis: content; - -ms-flex-preferred-size: content; - flex-basis: content; } - -.react-flex-v2--flex-basis-fit-content { - -webkit-flex-basis: fit-content; - -ms-flex-preferred-size: fit-content; - flex-basis: fit-content; } - -.react-flex-v2--flex-basis-min-content { - -webkit-flex-basis: min-content; - -ms-flex-preferred-size: min-content; - flex-basis: min-content; } - -.react-flex-v2--flex-basis-max-content { - -webkit-flex-basis: max-content; - -ms-flex-preferred-size: max-content; - flex-basis: max-content; } - -/* FLEX */ -.react-flex-v2--flex-none, -.react-flex-v2--flex-0 { - -webkit-box-flex: 0; - -webkit-flex: none; - -ms-flex: none; - flex: none; } - -.react-flex-v2--flex-1 { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; } - -.react-flex-v2--flex-2 { - -webkit-box-flex: 2; - -webkit-flex: 2; - -ms-flex: 2; - flex: 2; } - -.react-flex-v2--flex-3 { - -webkit-box-flex: 3; - -webkit-flex: 3; - -ms-flex: 3; - flex: 3; } - -.react-flex-v2--flex-4 { - -webkit-box-flex: 4; - -webkit-flex: 4; - -ms-flex: 4; - flex: 4; } - -.react-flex-v2--flex-5 { - -webkit-box-flex: 5; - -webkit-flex: 5; - -ms-flex: 5; - flex: 5; } - -.react-flex-v2--flex-6 { - -webkit-box-flex: 6; - -webkit-flex: 6; - -ms-flex: 6; - flex: 6; } - -.react-flex-v2--flex-7 { - -webkit-box-flex: 7; - -webkit-flex: 7; - -ms-flex: 7; - flex: 7; } - -.react-flex-v2--flex-8 { - -webkit-box-flex: 8; - -webkit-flex: 8; - -ms-flex: 8; - flex: 8; } - -.react-flex-v2--flex-9 { - -webkit-box-flex: 9; - -webkit-flex: 9; - -ms-flex: 9; - flex: 9; } - -.react-flex-v2--flex-10 { - -webkit-box-flex: 10; - -webkit-flex: 10; - -ms-flex: 10; - flex: 10; } - -.react-flex-v2--flex-11 { - -webkit-box-flex: 11; - -webkit-flex: 11; - -ms-flex: 11; - flex: 11; } - -.react-flex-v2--flex-12 { - -webkit-box-flex: 12; - -webkit-flex: 12; - -ms-flex: 12; - flex: 12; } - -.react-flex-v2--flex-13 { - -webkit-box-flex: 13; - -webkit-flex: 13; - -ms-flex: 13; - flex: 13; } - -.react-flex-v2--flex-14 { - -webkit-box-flex: 14; - -webkit-flex: 14; - -ms-flex: 14; - flex: 14; } - -.react-flex-v2--flex-15 { - -webkit-box-flex: 15; - -webkit-flex: 15; - -ms-flex: 15; - flex: 15; } - -.react-flex-v2--flex-16 { - -webkit-box-flex: 16; - -webkit-flex: 16; - -ms-flex: 16; - flex: 16; } - -.react-flex-v2--flex-17 { - -webkit-box-flex: 17; - -webkit-flex: 17; - -ms-flex: 17; - flex: 17; } - -.react-flex-v2--flex-18 { - -webkit-box-flex: 18; - -webkit-flex: 18; - -ms-flex: 18; - flex: 18; } - -.react-flex-v2--flex-19 { - -webkit-box-flex: 19; - -webkit-flex: 19; - -ms-flex: 19; - flex: 19; } - -.react-flex-v2--flex-20 { - -webkit-box-flex: 20; - -webkit-flex: 20; - -ms-flex: 20; - flex: 20; } - -.react-flex-v2--flex-21 { - -webkit-box-flex: 21; - -webkit-flex: 21; - -ms-flex: 21; - flex: 21; } - -.react-flex-v2--flex-22 { - -webkit-box-flex: 22; - -webkit-flex: 22; - -ms-flex: 22; - flex: 22; } - -.react-flex-v2--flex-23 { - -webkit-box-flex: 23; - -webkit-flex: 23; - -ms-flex: 23; - flex: 23; } - -.react-flex-v2--flex-24 { - -webkit-box-flex: 24; - -webkit-flex: 24; - -ms-flex: 24; - flex: 24; } - -.react-flex-v2--flex-25 { - -webkit-box-flex: 25; - -webkit-flex: 25; - -ms-flex: 25; - flex: 25; } - -.react-flex-v2--flex-26 { - -webkit-box-flex: 26; - -webkit-flex: 26; - -ms-flex: 26; - flex: 26; } - -.react-flex-v2--flex-27 { - -webkit-box-flex: 27; - -webkit-flex: 27; - -ms-flex: 27; - flex: 27; } - -.react-flex-v2--flex-28 { - -webkit-box-flex: 28; - -webkit-flex: 28; - -ms-flex: 28; - flex: 28; } - -.react-flex-v2--flex-29 { - -webkit-box-flex: 29; - -webkit-flex: 29; - -ms-flex: 29; - flex: 29; } - -.react-flex-v2--flex-30 { - -webkit-box-flex: 30; - -webkit-flex: 30; - -ms-flex: 30; - flex: 30; } - -.react-flex-v2--flex-31 { - -webkit-box-flex: 31; - -webkit-flex: 31; - -ms-flex: 31; - flex: 31; } - -.react-flex-v2--flex-32 { - -webkit-box-flex: 32; - -webkit-flex: 32; - -ms-flex: 32; - flex: 32; } - -.react-flex-v2--flex-33 { - -webkit-box-flex: 33; - -webkit-flex: 33; - -ms-flex: 33; - flex: 33; } - -.react-flex-v2--flex-34 { - -webkit-box-flex: 34; - -webkit-flex: 34; - -ms-flex: 34; - flex: 34; } - -.react-flex-v2--flex-35 { - -webkit-box-flex: 35; - -webkit-flex: 35; - -ms-flex: 35; - flex: 35; } - -.react-flex-v2--flex-36 { - -webkit-box-flex: 36; - -webkit-flex: 36; - -ms-flex: 36; - flex: 36; } - -.react-flex-v2--flex-37 { - -webkit-box-flex: 37; - -webkit-flex: 37; - -ms-flex: 37; - flex: 37; } - -.react-flex-v2--flex-38 { - -webkit-box-flex: 38; - -webkit-flex: 38; - -ms-flex: 38; - flex: 38; } - -.react-flex-v2--flex-39 { - -webkit-box-flex: 39; - -webkit-flex: 39; - -ms-flex: 39; - flex: 39; } - -.react-flex-v2--flex-40 { - -webkit-box-flex: 40; - -webkit-flex: 40; - -ms-flex: 40; - flex: 40; } - -.react-flex-v2--flex-41 { - -webkit-box-flex: 41; - -webkit-flex: 41; - -ms-flex: 41; - flex: 41; } - -.react-flex-v2--flex-42 { - -webkit-box-flex: 42; - -webkit-flex: 42; - -ms-flex: 42; - flex: 42; } - -.react-flex-v2--flex-43 { - -webkit-box-flex: 43; - -webkit-flex: 43; - -ms-flex: 43; - flex: 43; } - -.react-flex-v2--flex-44 { - -webkit-box-flex: 44; - -webkit-flex: 44; - -ms-flex: 44; - flex: 44; } - -.react-flex-v2--flex-45 { - -webkit-box-flex: 45; - -webkit-flex: 45; - -ms-flex: 45; - flex: 45; } - -.react-flex-v2--flex-46 { - -webkit-box-flex: 46; - -webkit-flex: 46; - -ms-flex: 46; - flex: 46; } - -.react-flex-v2--flex-47 { - -webkit-box-flex: 47; - -webkit-flex: 47; - -ms-flex: 47; - flex: 47; } - -.react-flex-v2--flex-48 { - -webkit-box-flex: 48; - -webkit-flex: 48; - -ms-flex: 48; - flex: 48; } - -.react-flex-v2--flex-49 { - -webkit-box-flex: 49; - -webkit-flex: 49; - -ms-flex: 49; - flex: 49; } - -.react-flex-v2--flex-50 { - -webkit-box-flex: 50; - -webkit-flex: 50; - -ms-flex: 50; - flex: 50; } - -.react-flex-v2--flex-51 { - -webkit-box-flex: 51; - -webkit-flex: 51; - -ms-flex: 51; - flex: 51; } - -.react-flex-v2--flex-52 { - -webkit-box-flex: 52; - -webkit-flex: 52; - -ms-flex: 52; - flex: 52; } - -.react-flex-v2--flex-53 { - -webkit-box-flex: 53; - -webkit-flex: 53; - -ms-flex: 53; - flex: 53; } - -.react-flex-v2--flex-54 { - -webkit-box-flex: 54; - -webkit-flex: 54; - -ms-flex: 54; - flex: 54; } - -.react-flex-v2--flex-55 { - -webkit-box-flex: 55; - -webkit-flex: 55; - -ms-flex: 55; - flex: 55; } - -.react-flex-v2--flex-56 { - -webkit-box-flex: 56; - -webkit-flex: 56; - -ms-flex: 56; - flex: 56; } - -.react-flex-v2--flex-57 { - -webkit-box-flex: 57; - -webkit-flex: 57; - -ms-flex: 57; - flex: 57; } - -.react-flex-v2--flex-58 { - -webkit-box-flex: 58; - -webkit-flex: 58; - -ms-flex: 58; - flex: 58; } - -.react-flex-v2--flex-59 { - -webkit-box-flex: 59; - -webkit-flex: 59; - -ms-flex: 59; - flex: 59; } - -.react-flex-v2--flex-60 { - -webkit-box-flex: 60; - -webkit-flex: 60; - -ms-flex: 60; - flex: 60; } - -.react-flex-v2--flex-61 { - -webkit-box-flex: 61; - -webkit-flex: 61; - -ms-flex: 61; - flex: 61; } - -.react-flex-v2--flex-62 { - -webkit-box-flex: 62; - -webkit-flex: 62; - -ms-flex: 62; - flex: 62; } - -.react-flex-v2--flex-63 { - -webkit-box-flex: 63; - -webkit-flex: 63; - -ms-flex: 63; - flex: 63; } - -.react-flex-v2--flex-64 { - -webkit-box-flex: 64; - -webkit-flex: 64; - -ms-flex: 64; - flex: 64; } - -.react-flex-v2--flex-65 { - -webkit-box-flex: 65; - -webkit-flex: 65; - -ms-flex: 65; - flex: 65; } - -.react-flex-v2--flex-66 { - -webkit-box-flex: 66; - -webkit-flex: 66; - -ms-flex: 66; - flex: 66; } - -.react-flex-v2--flex-67 { - -webkit-box-flex: 67; - -webkit-flex: 67; - -ms-flex: 67; - flex: 67; } - -.react-flex-v2--flex-68 { - -webkit-box-flex: 68; - -webkit-flex: 68; - -ms-flex: 68; - flex: 68; } - -.react-flex-v2--flex-69 { - -webkit-box-flex: 69; - -webkit-flex: 69; - -ms-flex: 69; - flex: 69; } - -.react-flex-v2--flex-70 { - -webkit-box-flex: 70; - -webkit-flex: 70; - -ms-flex: 70; - flex: 70; } - -.react-flex-v2--flex-71 { - -webkit-box-flex: 71; - -webkit-flex: 71; - -ms-flex: 71; - flex: 71; } - -.react-flex-v2--flex-72 { - -webkit-box-flex: 72; - -webkit-flex: 72; - -ms-flex: 72; - flex: 72; } - -.react-flex-v2--flex-73 { - -webkit-box-flex: 73; - -webkit-flex: 73; - -ms-flex: 73; - flex: 73; } - -.react-flex-v2--flex-74 { - -webkit-box-flex: 74; - -webkit-flex: 74; - -ms-flex: 74; - flex: 74; } - -.react-flex-v2--flex-75 { - -webkit-box-flex: 75; - -webkit-flex: 75; - -ms-flex: 75; - flex: 75; } - -.react-flex-v2--flex-76 { - -webkit-box-flex: 76; - -webkit-flex: 76; - -ms-flex: 76; - flex: 76; } - -.react-flex-v2--flex-77 { - -webkit-box-flex: 77; - -webkit-flex: 77; - -ms-flex: 77; - flex: 77; } - -.react-flex-v2--flex-78 { - -webkit-box-flex: 78; - -webkit-flex: 78; - -ms-flex: 78; - flex: 78; } - -.react-flex-v2--flex-79 { - -webkit-box-flex: 79; - -webkit-flex: 79; - -ms-flex: 79; - flex: 79; } - -.react-flex-v2--flex-80 { - -webkit-box-flex: 80; - -webkit-flex: 80; - -ms-flex: 80; - flex: 80; } - -.react-flex-v2--flex-81 { - -webkit-box-flex: 81; - -webkit-flex: 81; - -ms-flex: 81; - flex: 81; } - -.react-flex-v2--flex-82 { - -webkit-box-flex: 82; - -webkit-flex: 82; - -ms-flex: 82; - flex: 82; } - -.react-flex-v2--flex-83 { - -webkit-box-flex: 83; - -webkit-flex: 83; - -ms-flex: 83; - flex: 83; } - -.react-flex-v2--flex-84 { - -webkit-box-flex: 84; - -webkit-flex: 84; - -ms-flex: 84; - flex: 84; } - -.react-flex-v2--flex-85 { - -webkit-box-flex: 85; - -webkit-flex: 85; - -ms-flex: 85; - flex: 85; } - -.react-flex-v2--flex-86 { - -webkit-box-flex: 86; - -webkit-flex: 86; - -ms-flex: 86; - flex: 86; } - -.react-flex-v2--flex-87 { - -webkit-box-flex: 87; - -webkit-flex: 87; - -ms-flex: 87; - flex: 87; } - -.react-flex-v2--flex-88 { - -webkit-box-flex: 88; - -webkit-flex: 88; - -ms-flex: 88; - flex: 88; } - -.react-flex-v2--flex-89 { - -webkit-box-flex: 89; - -webkit-flex: 89; - -ms-flex: 89; - flex: 89; } - -.react-flex-v2--flex-90 { - -webkit-box-flex: 90; - -webkit-flex: 90; - -ms-flex: 90; - flex: 90; } - -.react-flex-v2--flex-91 { - -webkit-box-flex: 91; - -webkit-flex: 91; - -ms-flex: 91; - flex: 91; } - -.react-flex-v2--flex-92 { - -webkit-box-flex: 92; - -webkit-flex: 92; - -ms-flex: 92; - flex: 92; } - -.react-flex-v2--flex-93 { - -webkit-box-flex: 93; - -webkit-flex: 93; - -ms-flex: 93; - flex: 93; } - -.react-flex-v2--flex-94 { - -webkit-box-flex: 94; - -webkit-flex: 94; - -ms-flex: 94; - flex: 94; } - -.react-flex-v2--flex-95 { - -webkit-box-flex: 95; - -webkit-flex: 95; - -ms-flex: 95; - flex: 95; } - -.react-flex-v2--flex-96 { - -webkit-box-flex: 96; - -webkit-flex: 96; - -ms-flex: 96; - flex: 96; } - -.react-flex-v2--flex-97 { - -webkit-box-flex: 97; - -webkit-flex: 97; - -ms-flex: 97; - flex: 97; } - -.react-flex-v2--flex-98 { - -webkit-box-flex: 98; - -webkit-flex: 98; - -ms-flex: 98; - flex: 98; } - -.react-flex-v2--flex-99 { - -webkit-box-flex: 99; - -webkit-flex: 99; - -ms-flex: 99; - flex: 99; } - -.react-flex-v2--flex-100 { - -webkit-box-flex: 100; - -webkit-flex: 100; - -ms-flex: 100; - flex: 100; } - -/* FLEX-GROW */ -.react-flex-v2--flex-grow-0 { - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; } - -.react-flex-v2--flex-grow-1 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; } - -.react-flex-v2--flex-grow-2 { - -webkit-box-flex: 2; - -webkit-flex-grow: 2; - -ms-flex-positive: 2; - flex-grow: 2; } - -.react-flex-v2--flex-grow-3 { - -webkit-box-flex: 3; - -webkit-flex-grow: 3; - -ms-flex-positive: 3; - flex-grow: 3; } - -.react-flex-v2--flex-grow-4 { - -webkit-box-flex: 4; - -webkit-flex-grow: 4; - -ms-flex-positive: 4; - flex-grow: 4; } - -.react-flex-v2--flex-grow-5 { - -webkit-box-flex: 5; - -webkit-flex-grow: 5; - -ms-flex-positive: 5; - flex-grow: 5; } - -.react-flex-v2--flex-grow-6 { - -webkit-box-flex: 6; - -webkit-flex-grow: 6; - -ms-flex-positive: 6; - flex-grow: 6; } - -.react-flex-v2--flex-grow-7 { - -webkit-box-flex: 7; - -webkit-flex-grow: 7; - -ms-flex-positive: 7; - flex-grow: 7; } - -.react-flex-v2--flex-grow-8 { - -webkit-box-flex: 8; - -webkit-flex-grow: 8; - -ms-flex-positive: 8; - flex-grow: 8; } - -.react-flex-v2--flex-grow-9 { - -webkit-box-flex: 9; - -webkit-flex-grow: 9; - -ms-flex-positive: 9; - flex-grow: 9; } - -.react-flex-v2--flex-grow-10 { - -webkit-box-flex: 10; - -webkit-flex-grow: 10; - -ms-flex-positive: 10; - flex-grow: 10; } - -.react-flex-v2--flex-grow-11 { - -webkit-box-flex: 11; - -webkit-flex-grow: 11; - -ms-flex-positive: 11; - flex-grow: 11; } - -.react-flex-v2--flex-grow-12 { - -webkit-box-flex: 12; - -webkit-flex-grow: 12; - -ms-flex-positive: 12; - flex-grow: 12; } - -.react-flex-v2--flex-grow-13 { - -webkit-box-flex: 13; - -webkit-flex-grow: 13; - -ms-flex-positive: 13; - flex-grow: 13; } - -.react-flex-v2--flex-grow-14 { - -webkit-box-flex: 14; - -webkit-flex-grow: 14; - -ms-flex-positive: 14; - flex-grow: 14; } - -.react-flex-v2--flex-grow-15 { - -webkit-box-flex: 15; - -webkit-flex-grow: 15; - -ms-flex-positive: 15; - flex-grow: 15; } - -.react-flex-v2--flex-grow-16 { - -webkit-box-flex: 16; - -webkit-flex-grow: 16; - -ms-flex-positive: 16; - flex-grow: 16; } - -.react-flex-v2--flex-grow-17 { - -webkit-box-flex: 17; - -webkit-flex-grow: 17; - -ms-flex-positive: 17; - flex-grow: 17; } - -.react-flex-v2--flex-grow-18 { - -webkit-box-flex: 18; - -webkit-flex-grow: 18; - -ms-flex-positive: 18; - flex-grow: 18; } - -.react-flex-v2--flex-grow-19 { - -webkit-box-flex: 19; - -webkit-flex-grow: 19; - -ms-flex-positive: 19; - flex-grow: 19; } - -.react-flex-v2--flex-grow-20 { - -webkit-box-flex: 20; - -webkit-flex-grow: 20; - -ms-flex-positive: 20; - flex-grow: 20; } - -.react-flex-v2--flex-grow-21 { - -webkit-box-flex: 21; - -webkit-flex-grow: 21; - -ms-flex-positive: 21; - flex-grow: 21; } - -.react-flex-v2--flex-grow-22 { - -webkit-box-flex: 22; - -webkit-flex-grow: 22; - -ms-flex-positive: 22; - flex-grow: 22; } - -.react-flex-v2--flex-grow-23 { - -webkit-box-flex: 23; - -webkit-flex-grow: 23; - -ms-flex-positive: 23; - flex-grow: 23; } - -.react-flex-v2--flex-grow-24 { - -webkit-box-flex: 24; - -webkit-flex-grow: 24; - -ms-flex-positive: 24; - flex-grow: 24; } - -.react-flex-v2--flex-grow-25 { - -webkit-box-flex: 25; - -webkit-flex-grow: 25; - -ms-flex-positive: 25; - flex-grow: 25; } - -.react-flex-v2--flex-grow-26 { - -webkit-box-flex: 26; - -webkit-flex-grow: 26; - -ms-flex-positive: 26; - flex-grow: 26; } - -.react-flex-v2--flex-grow-27 { - -webkit-box-flex: 27; - -webkit-flex-grow: 27; - -ms-flex-positive: 27; - flex-grow: 27; } - -.react-flex-v2--flex-grow-28 { - -webkit-box-flex: 28; - -webkit-flex-grow: 28; - -ms-flex-positive: 28; - flex-grow: 28; } - -.react-flex-v2--flex-grow-29 { - -webkit-box-flex: 29; - -webkit-flex-grow: 29; - -ms-flex-positive: 29; - flex-grow: 29; } - -.react-flex-v2--flex-grow-30 { - -webkit-box-flex: 30; - -webkit-flex-grow: 30; - -ms-flex-positive: 30; - flex-grow: 30; } - -.react-flex-v2--flex-grow-31 { - -webkit-box-flex: 31; - -webkit-flex-grow: 31; - -ms-flex-positive: 31; - flex-grow: 31; } - -.react-flex-v2--flex-grow-32 { - -webkit-box-flex: 32; - -webkit-flex-grow: 32; - -ms-flex-positive: 32; - flex-grow: 32; } - -.react-flex-v2--flex-grow-33 { - -webkit-box-flex: 33; - -webkit-flex-grow: 33; - -ms-flex-positive: 33; - flex-grow: 33; } - -.react-flex-v2--flex-grow-34 { - -webkit-box-flex: 34; - -webkit-flex-grow: 34; - -ms-flex-positive: 34; - flex-grow: 34; } - -.react-flex-v2--flex-grow-35 { - -webkit-box-flex: 35; - -webkit-flex-grow: 35; - -ms-flex-positive: 35; - flex-grow: 35; } - -.react-flex-v2--flex-grow-36 { - -webkit-box-flex: 36; - -webkit-flex-grow: 36; - -ms-flex-positive: 36; - flex-grow: 36; } - -.react-flex-v2--flex-grow-37 { - -webkit-box-flex: 37; - -webkit-flex-grow: 37; - -ms-flex-positive: 37; - flex-grow: 37; } - -.react-flex-v2--flex-grow-38 { - -webkit-box-flex: 38; - -webkit-flex-grow: 38; - -ms-flex-positive: 38; - flex-grow: 38; } - -.react-flex-v2--flex-grow-39 { - -webkit-box-flex: 39; - -webkit-flex-grow: 39; - -ms-flex-positive: 39; - flex-grow: 39; } - -.react-flex-v2--flex-grow-40 { - -webkit-box-flex: 40; - -webkit-flex-grow: 40; - -ms-flex-positive: 40; - flex-grow: 40; } - -.react-flex-v2--flex-grow-41 { - -webkit-box-flex: 41; - -webkit-flex-grow: 41; - -ms-flex-positive: 41; - flex-grow: 41; } - -.react-flex-v2--flex-grow-42 { - -webkit-box-flex: 42; - -webkit-flex-grow: 42; - -ms-flex-positive: 42; - flex-grow: 42; } - -.react-flex-v2--flex-grow-43 { - -webkit-box-flex: 43; - -webkit-flex-grow: 43; - -ms-flex-positive: 43; - flex-grow: 43; } - -.react-flex-v2--flex-grow-44 { - -webkit-box-flex: 44; - -webkit-flex-grow: 44; - -ms-flex-positive: 44; - flex-grow: 44; } - -.react-flex-v2--flex-grow-45 { - -webkit-box-flex: 45; - -webkit-flex-grow: 45; - -ms-flex-positive: 45; - flex-grow: 45; } - -.react-flex-v2--flex-grow-46 { - -webkit-box-flex: 46; - -webkit-flex-grow: 46; - -ms-flex-positive: 46; - flex-grow: 46; } - -.react-flex-v2--flex-grow-47 { - -webkit-box-flex: 47; - -webkit-flex-grow: 47; - -ms-flex-positive: 47; - flex-grow: 47; } - -.react-flex-v2--flex-grow-48 { - -webkit-box-flex: 48; - -webkit-flex-grow: 48; - -ms-flex-positive: 48; - flex-grow: 48; } - -.react-flex-v2--flex-grow-49 { - -webkit-box-flex: 49; - -webkit-flex-grow: 49; - -ms-flex-positive: 49; - flex-grow: 49; } - -.react-flex-v2--flex-grow-50 { - -webkit-box-flex: 50; - -webkit-flex-grow: 50; - -ms-flex-positive: 50; - flex-grow: 50; } - -.react-flex-v2--flex-grow-51 { - -webkit-box-flex: 51; - -webkit-flex-grow: 51; - -ms-flex-positive: 51; - flex-grow: 51; } - -.react-flex-v2--flex-grow-52 { - -webkit-box-flex: 52; - -webkit-flex-grow: 52; - -ms-flex-positive: 52; - flex-grow: 52; } - -.react-flex-v2--flex-grow-53 { - -webkit-box-flex: 53; - -webkit-flex-grow: 53; - -ms-flex-positive: 53; - flex-grow: 53; } - -.react-flex-v2--flex-grow-54 { - -webkit-box-flex: 54; - -webkit-flex-grow: 54; - -ms-flex-positive: 54; - flex-grow: 54; } - -.react-flex-v2--flex-grow-55 { - -webkit-box-flex: 55; - -webkit-flex-grow: 55; - -ms-flex-positive: 55; - flex-grow: 55; } - -.react-flex-v2--flex-grow-56 { - -webkit-box-flex: 56; - -webkit-flex-grow: 56; - -ms-flex-positive: 56; - flex-grow: 56; } - -.react-flex-v2--flex-grow-57 { - -webkit-box-flex: 57; - -webkit-flex-grow: 57; - -ms-flex-positive: 57; - flex-grow: 57; } - -.react-flex-v2--flex-grow-58 { - -webkit-box-flex: 58; - -webkit-flex-grow: 58; - -ms-flex-positive: 58; - flex-grow: 58; } - -.react-flex-v2--flex-grow-59 { - -webkit-box-flex: 59; - -webkit-flex-grow: 59; - -ms-flex-positive: 59; - flex-grow: 59; } - -.react-flex-v2--flex-grow-60 { - -webkit-box-flex: 60; - -webkit-flex-grow: 60; - -ms-flex-positive: 60; - flex-grow: 60; } - -.react-flex-v2--flex-grow-61 { - -webkit-box-flex: 61; - -webkit-flex-grow: 61; - -ms-flex-positive: 61; - flex-grow: 61; } - -.react-flex-v2--flex-grow-62 { - -webkit-box-flex: 62; - -webkit-flex-grow: 62; - -ms-flex-positive: 62; - flex-grow: 62; } - -.react-flex-v2--flex-grow-63 { - -webkit-box-flex: 63; - -webkit-flex-grow: 63; - -ms-flex-positive: 63; - flex-grow: 63; } - -.react-flex-v2--flex-grow-64 { - -webkit-box-flex: 64; - -webkit-flex-grow: 64; - -ms-flex-positive: 64; - flex-grow: 64; } - -.react-flex-v2--flex-grow-65 { - -webkit-box-flex: 65; - -webkit-flex-grow: 65; - -ms-flex-positive: 65; - flex-grow: 65; } - -.react-flex-v2--flex-grow-66 { - -webkit-box-flex: 66; - -webkit-flex-grow: 66; - -ms-flex-positive: 66; - flex-grow: 66; } - -.react-flex-v2--flex-grow-67 { - -webkit-box-flex: 67; - -webkit-flex-grow: 67; - -ms-flex-positive: 67; - flex-grow: 67; } - -.react-flex-v2--flex-grow-68 { - -webkit-box-flex: 68; - -webkit-flex-grow: 68; - -ms-flex-positive: 68; - flex-grow: 68; } - -.react-flex-v2--flex-grow-69 { - -webkit-box-flex: 69; - -webkit-flex-grow: 69; - -ms-flex-positive: 69; - flex-grow: 69; } - -.react-flex-v2--flex-grow-70 { - -webkit-box-flex: 70; - -webkit-flex-grow: 70; - -ms-flex-positive: 70; - flex-grow: 70; } - -.react-flex-v2--flex-grow-71 { - -webkit-box-flex: 71; - -webkit-flex-grow: 71; - -ms-flex-positive: 71; - flex-grow: 71; } - -.react-flex-v2--flex-grow-72 { - -webkit-box-flex: 72; - -webkit-flex-grow: 72; - -ms-flex-positive: 72; - flex-grow: 72; } - -.react-flex-v2--flex-grow-73 { - -webkit-box-flex: 73; - -webkit-flex-grow: 73; - -ms-flex-positive: 73; - flex-grow: 73; } - -.react-flex-v2--flex-grow-74 { - -webkit-box-flex: 74; - -webkit-flex-grow: 74; - -ms-flex-positive: 74; - flex-grow: 74; } - -.react-flex-v2--flex-grow-75 { - -webkit-box-flex: 75; - -webkit-flex-grow: 75; - -ms-flex-positive: 75; - flex-grow: 75; } - -.react-flex-v2--flex-grow-76 { - -webkit-box-flex: 76; - -webkit-flex-grow: 76; - -ms-flex-positive: 76; - flex-grow: 76; } - -.react-flex-v2--flex-grow-77 { - -webkit-box-flex: 77; - -webkit-flex-grow: 77; - -ms-flex-positive: 77; - flex-grow: 77; } - -.react-flex-v2--flex-grow-78 { - -webkit-box-flex: 78; - -webkit-flex-grow: 78; - -ms-flex-positive: 78; - flex-grow: 78; } - -.react-flex-v2--flex-grow-79 { - -webkit-box-flex: 79; - -webkit-flex-grow: 79; - -ms-flex-positive: 79; - flex-grow: 79; } - -.react-flex-v2--flex-grow-80 { - -webkit-box-flex: 80; - -webkit-flex-grow: 80; - -ms-flex-positive: 80; - flex-grow: 80; } - -.react-flex-v2--flex-grow-81 { - -webkit-box-flex: 81; - -webkit-flex-grow: 81; - -ms-flex-positive: 81; - flex-grow: 81; } - -.react-flex-v2--flex-grow-82 { - -webkit-box-flex: 82; - -webkit-flex-grow: 82; - -ms-flex-positive: 82; - flex-grow: 82; } - -.react-flex-v2--flex-grow-83 { - -webkit-box-flex: 83; - -webkit-flex-grow: 83; - -ms-flex-positive: 83; - flex-grow: 83; } - -.react-flex-v2--flex-grow-84 { - -webkit-box-flex: 84; - -webkit-flex-grow: 84; - -ms-flex-positive: 84; - flex-grow: 84; } - -.react-flex-v2--flex-grow-85 { - -webkit-box-flex: 85; - -webkit-flex-grow: 85; - -ms-flex-positive: 85; - flex-grow: 85; } - -.react-flex-v2--flex-grow-86 { - -webkit-box-flex: 86; - -webkit-flex-grow: 86; - -ms-flex-positive: 86; - flex-grow: 86; } - -.react-flex-v2--flex-grow-87 { - -webkit-box-flex: 87; - -webkit-flex-grow: 87; - -ms-flex-positive: 87; - flex-grow: 87; } - -.react-flex-v2--flex-grow-88 { - -webkit-box-flex: 88; - -webkit-flex-grow: 88; - -ms-flex-positive: 88; - flex-grow: 88; } - -.react-flex-v2--flex-grow-89 { - -webkit-box-flex: 89; - -webkit-flex-grow: 89; - -ms-flex-positive: 89; - flex-grow: 89; } - -.react-flex-v2--flex-grow-90 { - -webkit-box-flex: 90; - -webkit-flex-grow: 90; - -ms-flex-positive: 90; - flex-grow: 90; } - -.react-flex-v2--flex-grow-91 { - -webkit-box-flex: 91; - -webkit-flex-grow: 91; - -ms-flex-positive: 91; - flex-grow: 91; } - -.react-flex-v2--flex-grow-92 { - -webkit-box-flex: 92; - -webkit-flex-grow: 92; - -ms-flex-positive: 92; - flex-grow: 92; } - -.react-flex-v2--flex-grow-93 { - -webkit-box-flex: 93; - -webkit-flex-grow: 93; - -ms-flex-positive: 93; - flex-grow: 93; } - -.react-flex-v2--flex-grow-94 { - -webkit-box-flex: 94; - -webkit-flex-grow: 94; - -ms-flex-positive: 94; - flex-grow: 94; } - -.react-flex-v2--flex-grow-95 { - -webkit-box-flex: 95; - -webkit-flex-grow: 95; - -ms-flex-positive: 95; - flex-grow: 95; } - -.react-flex-v2--flex-grow-96 { - -webkit-box-flex: 96; - -webkit-flex-grow: 96; - -ms-flex-positive: 96; - flex-grow: 96; } - -.react-flex-v2--flex-grow-97 { - -webkit-box-flex: 97; - -webkit-flex-grow: 97; - -ms-flex-positive: 97; - flex-grow: 97; } - -.react-flex-v2--flex-grow-98 { - -webkit-box-flex: 98; - -webkit-flex-grow: 98; - -ms-flex-positive: 98; - flex-grow: 98; } - -.react-flex-v2--flex-grow-99 { - -webkit-box-flex: 99; - -webkit-flex-grow: 99; - -ms-flex-positive: 99; - flex-grow: 99; } - -.react-flex-v2--flex-grow-100 { - -webkit-box-flex: 100; - -webkit-flex-grow: 100; - -ms-flex-positive: 100; - flex-grow: 100; } - -/* FLEX-SHRINK */ -.react-flex-v2--flex-shrink-0 { - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; } - -.react-flex-v2--flex-shrink-1 { - -webkit-flex-shrink: 1; - -ms-flex-negative: 1; - flex-shrink: 1; } - -.react-flex-v2--flex-shrink-2 { - -webkit-flex-shrink: 2; - -ms-flex-negative: 2; - flex-shrink: 2; } - -.react-flex-v2--flex-shrink-3 { - -webkit-flex-shrink: 3; - -ms-flex-negative: 3; - flex-shrink: 3; } - -.react-flex-v2--flex-shrink-4 { - -webkit-flex-shrink: 4; - -ms-flex-negative: 4; - flex-shrink: 4; } - -.react-flex-v2--flex-shrink-5 { - -webkit-flex-shrink: 5; - -ms-flex-negative: 5; - flex-shrink: 5; } - -.react-flex-v2--flex-shrink-6 { - -webkit-flex-shrink: 6; - -ms-flex-negative: 6; - flex-shrink: 6; } - -.react-flex-v2--flex-shrink-7 { - -webkit-flex-shrink: 7; - -ms-flex-negative: 7; - flex-shrink: 7; } - -.react-flex-v2--flex-shrink-8 { - -webkit-flex-shrink: 8; - -ms-flex-negative: 8; - flex-shrink: 8; } - -.react-flex-v2--flex-shrink-9 { - -webkit-flex-shrink: 9; - -ms-flex-negative: 9; - flex-shrink: 9; } - -.react-flex-v2--flex-shrink-10 { - -webkit-flex-shrink: 10; - -ms-flex-negative: 10; - flex-shrink: 10; } - -.react-flex-v2--flex-shrink-11 { - -webkit-flex-shrink: 11; - -ms-flex-negative: 11; - flex-shrink: 11; } - -.react-flex-v2--flex-shrink-12 { - -webkit-flex-shrink: 12; - -ms-flex-negative: 12; - flex-shrink: 12; } - -.react-flex-v2--flex-shrink-13 { - -webkit-flex-shrink: 13; - -ms-flex-negative: 13; - flex-shrink: 13; } - -.react-flex-v2--flex-shrink-14 { - -webkit-flex-shrink: 14; - -ms-flex-negative: 14; - flex-shrink: 14; } - -.react-flex-v2--flex-shrink-15 { - -webkit-flex-shrink: 15; - -ms-flex-negative: 15; - flex-shrink: 15; } - -.react-flex-v2--flex-shrink-16 { - -webkit-flex-shrink: 16; - -ms-flex-negative: 16; - flex-shrink: 16; } - -.react-flex-v2--flex-shrink-17 { - -webkit-flex-shrink: 17; - -ms-flex-negative: 17; - flex-shrink: 17; } - -.react-flex-v2--flex-shrink-18 { - -webkit-flex-shrink: 18; - -ms-flex-negative: 18; - flex-shrink: 18; } - -.react-flex-v2--flex-shrink-19 { - -webkit-flex-shrink: 19; - -ms-flex-negative: 19; - flex-shrink: 19; } - -.react-flex-v2--flex-shrink-20 { - -webkit-flex-shrink: 20; - -ms-flex-negative: 20; - flex-shrink: 20; } - -.react-flex-v2--flex-shrink-21 { - -webkit-flex-shrink: 21; - -ms-flex-negative: 21; - flex-shrink: 21; } - -.react-flex-v2--flex-shrink-22 { - -webkit-flex-shrink: 22; - -ms-flex-negative: 22; - flex-shrink: 22; } - -.react-flex-v2--flex-shrink-23 { - -webkit-flex-shrink: 23; - -ms-flex-negative: 23; - flex-shrink: 23; } - -.react-flex-v2--flex-shrink-24 { - -webkit-flex-shrink: 24; - -ms-flex-negative: 24; - flex-shrink: 24; } - -.react-flex-v2--flex-shrink-25 { - -webkit-flex-shrink: 25; - -ms-flex-negative: 25; - flex-shrink: 25; } - -.react-flex-v2--flex-shrink-26 { - -webkit-flex-shrink: 26; - -ms-flex-negative: 26; - flex-shrink: 26; } - -.react-flex-v2--flex-shrink-27 { - -webkit-flex-shrink: 27; - -ms-flex-negative: 27; - flex-shrink: 27; } - -.react-flex-v2--flex-shrink-28 { - -webkit-flex-shrink: 28; - -ms-flex-negative: 28; - flex-shrink: 28; } - -.react-flex-v2--flex-shrink-29 { - -webkit-flex-shrink: 29; - -ms-flex-negative: 29; - flex-shrink: 29; } - -.react-flex-v2--flex-shrink-30 { - -webkit-flex-shrink: 30; - -ms-flex-negative: 30; - flex-shrink: 30; } - -.react-flex-v2--flex-shrink-31 { - -webkit-flex-shrink: 31; - -ms-flex-negative: 31; - flex-shrink: 31; } - -.react-flex-v2--flex-shrink-32 { - -webkit-flex-shrink: 32; - -ms-flex-negative: 32; - flex-shrink: 32; } - -.react-flex-v2--flex-shrink-33 { - -webkit-flex-shrink: 33; - -ms-flex-negative: 33; - flex-shrink: 33; } - -.react-flex-v2--flex-shrink-34 { - -webkit-flex-shrink: 34; - -ms-flex-negative: 34; - flex-shrink: 34; } - -.react-flex-v2--flex-shrink-35 { - -webkit-flex-shrink: 35; - -ms-flex-negative: 35; - flex-shrink: 35; } - -.react-flex-v2--flex-shrink-36 { - -webkit-flex-shrink: 36; - -ms-flex-negative: 36; - flex-shrink: 36; } - -.react-flex-v2--flex-shrink-37 { - -webkit-flex-shrink: 37; - -ms-flex-negative: 37; - flex-shrink: 37; } - -.react-flex-v2--flex-shrink-38 { - -webkit-flex-shrink: 38; - -ms-flex-negative: 38; - flex-shrink: 38; } - -.react-flex-v2--flex-shrink-39 { - -webkit-flex-shrink: 39; - -ms-flex-negative: 39; - flex-shrink: 39; } - -.react-flex-v2--flex-shrink-40 { - -webkit-flex-shrink: 40; - -ms-flex-negative: 40; - flex-shrink: 40; } - -.react-flex-v2--flex-shrink-41 { - -webkit-flex-shrink: 41; - -ms-flex-negative: 41; - flex-shrink: 41; } - -.react-flex-v2--flex-shrink-42 { - -webkit-flex-shrink: 42; - -ms-flex-negative: 42; - flex-shrink: 42; } - -.react-flex-v2--flex-shrink-43 { - -webkit-flex-shrink: 43; - -ms-flex-negative: 43; - flex-shrink: 43; } - -.react-flex-v2--flex-shrink-44 { - -webkit-flex-shrink: 44; - -ms-flex-negative: 44; - flex-shrink: 44; } - -.react-flex-v2--flex-shrink-45 { - -webkit-flex-shrink: 45; - -ms-flex-negative: 45; - flex-shrink: 45; } - -.react-flex-v2--flex-shrink-46 { - -webkit-flex-shrink: 46; - -ms-flex-negative: 46; - flex-shrink: 46; } - -.react-flex-v2--flex-shrink-47 { - -webkit-flex-shrink: 47; - -ms-flex-negative: 47; - flex-shrink: 47; } - -.react-flex-v2--flex-shrink-48 { - -webkit-flex-shrink: 48; - -ms-flex-negative: 48; - flex-shrink: 48; } - -.react-flex-v2--flex-shrink-49 { - -webkit-flex-shrink: 49; - -ms-flex-negative: 49; - flex-shrink: 49; } - -.react-flex-v2--flex-shrink-50 { - -webkit-flex-shrink: 50; - -ms-flex-negative: 50; - flex-shrink: 50; } - -.react-flex-v2--flex-shrink-51 { - -webkit-flex-shrink: 51; - -ms-flex-negative: 51; - flex-shrink: 51; } - -.react-flex-v2--flex-shrink-52 { - -webkit-flex-shrink: 52; - -ms-flex-negative: 52; - flex-shrink: 52; } - -.react-flex-v2--flex-shrink-53 { - -webkit-flex-shrink: 53; - -ms-flex-negative: 53; - flex-shrink: 53; } - -.react-flex-v2--flex-shrink-54 { - -webkit-flex-shrink: 54; - -ms-flex-negative: 54; - flex-shrink: 54; } - -.react-flex-v2--flex-shrink-55 { - -webkit-flex-shrink: 55; - -ms-flex-negative: 55; - flex-shrink: 55; } - -.react-flex-v2--flex-shrink-56 { - -webkit-flex-shrink: 56; - -ms-flex-negative: 56; - flex-shrink: 56; } - -.react-flex-v2--flex-shrink-57 { - -webkit-flex-shrink: 57; - -ms-flex-negative: 57; - flex-shrink: 57; } - -.react-flex-v2--flex-shrink-58 { - -webkit-flex-shrink: 58; - -ms-flex-negative: 58; - flex-shrink: 58; } - -.react-flex-v2--flex-shrink-59 { - -webkit-flex-shrink: 59; - -ms-flex-negative: 59; - flex-shrink: 59; } - -.react-flex-v2--flex-shrink-60 { - -webkit-flex-shrink: 60; - -ms-flex-negative: 60; - flex-shrink: 60; } - -.react-flex-v2--flex-shrink-61 { - -webkit-flex-shrink: 61; - -ms-flex-negative: 61; - flex-shrink: 61; } - -.react-flex-v2--flex-shrink-62 { - -webkit-flex-shrink: 62; - -ms-flex-negative: 62; - flex-shrink: 62; } - -.react-flex-v2--flex-shrink-63 { - -webkit-flex-shrink: 63; - -ms-flex-negative: 63; - flex-shrink: 63; } - -.react-flex-v2--flex-shrink-64 { - -webkit-flex-shrink: 64; - -ms-flex-negative: 64; - flex-shrink: 64; } - -.react-flex-v2--flex-shrink-65 { - -webkit-flex-shrink: 65; - -ms-flex-negative: 65; - flex-shrink: 65; } - -.react-flex-v2--flex-shrink-66 { - -webkit-flex-shrink: 66; - -ms-flex-negative: 66; - flex-shrink: 66; } - -.react-flex-v2--flex-shrink-67 { - -webkit-flex-shrink: 67; - -ms-flex-negative: 67; - flex-shrink: 67; } - -.react-flex-v2--flex-shrink-68 { - -webkit-flex-shrink: 68; - -ms-flex-negative: 68; - flex-shrink: 68; } - -.react-flex-v2--flex-shrink-69 { - -webkit-flex-shrink: 69; - -ms-flex-negative: 69; - flex-shrink: 69; } - -.react-flex-v2--flex-shrink-70 { - -webkit-flex-shrink: 70; - -ms-flex-negative: 70; - flex-shrink: 70; } - -.react-flex-v2--flex-shrink-71 { - -webkit-flex-shrink: 71; - -ms-flex-negative: 71; - flex-shrink: 71; } - -.react-flex-v2--flex-shrink-72 { - -webkit-flex-shrink: 72; - -ms-flex-negative: 72; - flex-shrink: 72; } - -.react-flex-v2--flex-shrink-73 { - -webkit-flex-shrink: 73; - -ms-flex-negative: 73; - flex-shrink: 73; } - -.react-flex-v2--flex-shrink-74 { - -webkit-flex-shrink: 74; - -ms-flex-negative: 74; - flex-shrink: 74; } - -.react-flex-v2--flex-shrink-75 { - -webkit-flex-shrink: 75; - -ms-flex-negative: 75; - flex-shrink: 75; } - -.react-flex-v2--flex-shrink-76 { - -webkit-flex-shrink: 76; - -ms-flex-negative: 76; - flex-shrink: 76; } - -.react-flex-v2--flex-shrink-77 { - -webkit-flex-shrink: 77; - -ms-flex-negative: 77; - flex-shrink: 77; } - -.react-flex-v2--flex-shrink-78 { - -webkit-flex-shrink: 78; - -ms-flex-negative: 78; - flex-shrink: 78; } - -.react-flex-v2--flex-shrink-79 { - -webkit-flex-shrink: 79; - -ms-flex-negative: 79; - flex-shrink: 79; } - -.react-flex-v2--flex-shrink-80 { - -webkit-flex-shrink: 80; - -ms-flex-negative: 80; - flex-shrink: 80; } - -.react-flex-v2--flex-shrink-81 { - -webkit-flex-shrink: 81; - -ms-flex-negative: 81; - flex-shrink: 81; } - -.react-flex-v2--flex-shrink-82 { - -webkit-flex-shrink: 82; - -ms-flex-negative: 82; - flex-shrink: 82; } - -.react-flex-v2--flex-shrink-83 { - -webkit-flex-shrink: 83; - -ms-flex-negative: 83; - flex-shrink: 83; } - -.react-flex-v2--flex-shrink-84 { - -webkit-flex-shrink: 84; - -ms-flex-negative: 84; - flex-shrink: 84; } - -.react-flex-v2--flex-shrink-85 { - -webkit-flex-shrink: 85; - -ms-flex-negative: 85; - flex-shrink: 85; } - -.react-flex-v2--flex-shrink-86 { - -webkit-flex-shrink: 86; - -ms-flex-negative: 86; - flex-shrink: 86; } - -.react-flex-v2--flex-shrink-87 { - -webkit-flex-shrink: 87; - -ms-flex-negative: 87; - flex-shrink: 87; } - -.react-flex-v2--flex-shrink-88 { - -webkit-flex-shrink: 88; - -ms-flex-negative: 88; - flex-shrink: 88; } - -.react-flex-v2--flex-shrink-89 { - -webkit-flex-shrink: 89; - -ms-flex-negative: 89; - flex-shrink: 89; } - -.react-flex-v2--flex-shrink-90 { - -webkit-flex-shrink: 90; - -ms-flex-negative: 90; - flex-shrink: 90; } - -.react-flex-v2--flex-shrink-91 { - -webkit-flex-shrink: 91; - -ms-flex-negative: 91; - flex-shrink: 91; } - -.react-flex-v2--flex-shrink-92 { - -webkit-flex-shrink: 92; - -ms-flex-negative: 92; - flex-shrink: 92; } - -.react-flex-v2--flex-shrink-93 { - -webkit-flex-shrink: 93; - -ms-flex-negative: 93; - flex-shrink: 93; } - -.react-flex-v2--flex-shrink-94 { - -webkit-flex-shrink: 94; - -ms-flex-negative: 94; - flex-shrink: 94; } - -.react-flex-v2--flex-shrink-95 { - -webkit-flex-shrink: 95; - -ms-flex-negative: 95; - flex-shrink: 95; } - -.react-flex-v2--flex-shrink-96 { - -webkit-flex-shrink: 96; - -ms-flex-negative: 96; - flex-shrink: 96; } - -.react-flex-v2--flex-shrink-97 { - -webkit-flex-shrink: 97; - -ms-flex-negative: 97; - flex-shrink: 97; } - -.react-flex-v2--flex-shrink-98 { - -webkit-flex-shrink: 98; - -ms-flex-negative: 98; - flex-shrink: 98; } - -.react-flex-v2--flex-shrink-99 { - -webkit-flex-shrink: 99; - -ms-flex-negative: 99; - flex-shrink: 99; } - -.react-flex-v2--flex-shrink-100 { - -webkit-flex-shrink: 100; - -ms-flex-negative: 100; - flex-shrink: 100; } - -.react-date-field--theme-default { - border: 1px solid gray; } - .react-date-field--theme-default.react-date-field--focused { - border: 1px solid #349aef; } - .react-date-field--theme-default > .react-date-field__picker { - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.34375); - border: 1px solid #349aef; } - .react-date-field--theme-default .react-date-field__calendar-icon { - border: 2px solid gray; } - .react-date-field--theme-default .react-date-field__calendar-icon:before, .react-date-field--theme-default .react-date-field__calendar-icon:after { - width: 2px; - height: 5px; - top: -5px; } - .react-date-field--theme-default .react-date-field__calendar-icon:before { - left: 2px; } - .react-date-field--theme-default .react-date-field__calendar-icon:after { - right: 1px; - left: auto; } - .react-date-field--theme-default .react-date-field__clear-icon { - color: gray; - fill: gray; } - .react-date-field--theme-default .react-date-field__clear-icon:hover { - color: #4d4d4d; - fill: #4d4d4d; } - .react-date-field--theme-default.react-date-field--focused .react-date-field__clear-icon { - color: #349aef; - fill: #349aef; } - .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:hover { - border-color: #4d4d4d; - cursor: pointer; } - .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:hover:after, .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:hover:before, - .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:hover .react-date-field__calendar-icon-inner { - background: #4d4d4d; } - .react-date-field--theme-default .react-date-field__calendar-icon:after, - .react-date-field--theme-default .react-date-field__calendar-icon:before { - background: gray; } - .react-date-field--theme-default .react-date-field__calendar-icon-inner { - background: gray; } - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:hover, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:active, - .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:active { - border-color: #349aef; } - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:after, .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:before, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon .react-date-field__calendar-icon-inner, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:hover:after, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:hover:before, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:hover .react-date-field__calendar-icon-inner, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:active:after, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:active:before, - .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:active .react-date-field__calendar-icon-inner, - .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:active:after, - .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:active:before, - .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:active .react-date-field__calendar-icon-inner { - background: #349aef; } - -.react-date-picker__clock--theme-default .react-date-picker__clock-hand-second { - background: red; } - -.react-date-picker__clock--theme-default .react-date-picker__clock-center { - background: #e6e6e6; } - -.react-date-picker__clock--theme-default .react-date-picker__clock-overlay { - background: white; - border-style: solid; - border-color: gray; } - -.react-date-picker__footer--theme-default { - padding: 5px; } - .react-date-picker__footer--theme-default .react-date-picker__footer-button { - padding: 3px 4px; - outline: none; - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: 1px solid gray; - background: white; - font-size: 0.9em; } - .react-date-picker__footer--theme-default .react-date-picker__footer-button:active { - top: 1px; } - .react-date-picker__footer--theme-default .react-date-picker__footer-button:not(.react-date-picker__footer-button--disabled) { - cursor: pointer; } - .react-date-picker__footer--theme-default .react-date-picker__footer-button:not(.react-date-picker__footer-button--disabled):hover { - background: #349aef; - border-color: #349aef; - color: white; } - .react-date-picker__footer--theme-default .react-date-picker__footer-button + .react-date-picker__footer-button { - margin-left: 3px; } - -.react-date-picker__date-format-spinner--theme-default { - border: 1px solid gray; } - .react-date-picker__date-format-spinner--theme-default input { - padding: 5px; - border: none; - outline: none; } - .react-date-picker__date-format-spinner--theme-default:not([disabled]).react-date-picker__date-format-spinner--focused { - border: 1px solid #349aef; } - .react-date-picker__date-format-spinner--theme-default:not([disabled]) .react-date-picker__date-format-spinner-arrow { - position: relative; - cursor: pointer; } - .react-date-picker__date-format-spinner--theme-default:not([disabled]) .react-date-picker__date-format-spinner-arrow:active { - fill: #349aef; - top: 1px; } - -.react-date-picker__year-view--theme-default { - border: 1px solid gray; - padding: 2px; } - .react-date-picker__year-view--theme-default .react-date-picker__year-view-month { - padding: 5px; - cursor: pointer; - border: 2px solid transparent; } - .react-date-picker__year-view--theme-default .react-date-picker__year-view-month--disabled { - color: #D8D8D8; } - .react-date-picker__year-view--theme-default .react-date-picker__year-view-month--active { - border: 2px solid #349aef; } - .react-date-picker__year-view--theme-default .react-date-picker__year-view-month--value { - color: white; - background: #349aef padding-box; - border: 2px solid #349aef; } - .react-date-picker__year-view--theme-default .react-date-picker__year-view-month--active.react-date-picker__year-view-month--value { - background: #4ca6f1 padding-box; } - -.react-date-picker__decade-view--theme-default { - border: 1px solid gray; - padding: 2px; } - .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-arrow { - cursor: pointer; - position: relative; - fill: #676767; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; } - .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-arrow--disabled { - fill: #C5C5C5; } - .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-arrow:not(.react-date-picker__decade-view-arrow--disabled):active { - left: 1px; } - .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year { - padding: 5px; - cursor: pointer; - border: 2px solid transparent; } - .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year--disabled { - color: #D8D8D8; } - .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year--active { - border: 2px solid #349aef; } - .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year--value { - color: white; - background: #349aef padding-box; - border: 2px solid #349aef; } - .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year--active.react-date-picker__decade-view-year--value { - background: #4ca6f1 padding-box; } - -.react-date-picker__history-view--theme-default { - border: 1px solid gray; - padding: 2px; } - .react-date-picker__history-view--theme-default .react-date-picker__year-view--theme-default, - .react-date-picker__history-view--theme-default .react-date-picker__decade-view--theme-default { - border: none; } - -.react-date-picker__nav-bar .react-date-picker__history-view--theme-default { - font-size: 0.833em; } - -.react-date-picker__nav-bar--theme-default { - padding-top: 5px; - padding-bottom: 5px; - font-size: 1.2rem; } - .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-secondary-arrow { - margin-right: 7px; } - .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-history-view { - background: white; } - .react-date-picker__nav-bar--theme-default.react-date-picker__nav-bar--with-history-view .react-date-picker__nav-bar-date { - cursor: pointer; } - .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-arrow { - position: relative; - fill: #676767; } - .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-arrow--disabled { - fill: #C5C5C5; } - .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-arrow:not(.react-date-picker__nav-bar-arrow--disabled):hover { - fill: #9a9a9a; } - .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-arrow:not(.react-date-picker__nav-bar-arrow--disabled):active { - top: 1px; } - -.react-date-picker__calendar--theme-default { - border: 1px solid gray; } - .react-date-picker__calendar--theme-default .react-date-picker__month-view--theme-default { - border: none; } - .react-date-picker__calendar--theme-default .react-date-picker__clock { - margin: 10px; } - -.react-date-picker__calendar--theme-default, -.react-date-picker__month-view--theme-default, -.react-date-picker__date-field--theme-default, -.react-date-picker__transition-month-view--theme-default { - font-size: 16px; - font-size: 1em; } - -.react-date-picker__transition-month-view--theme-default { - border: 1px solid gray; } - .react-date-picker__transition-month-view--theme-default .react-date-picker__month-view--theme-default, - .react-date-picker__transition-month-view--theme-default .react-date-picker__multi-month-view--theme-default, - .react-date-picker__transition-month-view--theme-default .react-date-picker__calendar--theme-default { - border: none; } - -.react-date-picker__navigation-view--theme-default { - border: 1px solid gray; } - .react-date-picker__navigation-view--theme-default .react-date-picker__month-view, - .react-date-picker__navigation-view--theme-default .react-date-picker__multi-month-view { - border: none; } - -.react-date-picker__month-view--theme-default { - background: white; - position: relative; - border: 1px solid gray; - overflow: hidden; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-week-day-names { - text-transform: uppercase; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-week-number { - color: #B1B1B1; - font-size: 0.8em; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-cell { - min-width: 40px; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day { - z-index: 10; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day .react-date-picker__month-view-day-text { - border: 2px solid transparent; - border-radius: 50%; - cursor: pointer; - text-align: center; - min-width: 40px; - min-height: 40px; - max-width: 40px; - max-height: 40px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day .react-date-picker__month-view-day-text:hover { - background: #D8EDFF padding-box; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range { - overflow: hidden; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text { - position: relative; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:before { - position: absolute; - height: 100%; - top: 0px; - bottom: 0px; - width: 500%; - background: #349aef; - z-index: -1; - content: ''; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:before { - right: 50%; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:after { - left: 50%; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--hover-range-start .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--range-start:not(.react-date-picker__month-view-day--in-hover-range) .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--hover-range-start .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--range-start:not(.react-date-picker__month-view-day--in-hover-range) .react-date-picker__month-view-day-text:before { - display: none; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--hover-range-end .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--range-end:not(.react-date-picker__month-view-day--in-hover-range) .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--hover-range-end .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--range-end:not(.react-date-picker__month-view-day--in-hover-range) .react-date-picker__month-view-day-text:after { - display: none; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--hover-range-start:not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--hover-range-start:not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text:after { - display: inherit; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--hover-range-end:not(.react-date-picker__month-view-day--hover-range-start) .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--hover-range-end:not(.react-date-picker__month-view-day--hover-range-start) .react-date-picker__month-view-day-text:before { - display: inherit; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--active:not(.react-date-picker__month-view-day--range-start):not(.react-date-picker__month-view-day--range-end):not(.react-date-picker__month-view-day--hover-range-start):not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--active:not(.react-date-picker__month-view-day--range-start):not(.react-date-picker__month-view-day--range-end):not(.react-date-picker__month-view-day--hover-range-start):not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text { - background: #93c9f6 padding-box; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--active:not(.react-date-picker__month-view-day--range-start):not(.react-date-picker__month-view-day--range-end):not(.react-date-picker__month-view-day--hover-range-start):not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--active:not(.react-date-picker__month-view-day--range-start):not(.react-date-picker__month-view-day--range-end):not(.react-date-picker__month-view-day--hover-range-start):not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text:hover { - background: #93c9f6 padding-box; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--value .react-date-picker__month-view-day-text { - border: 2px solid transparent; - background: #349aef padding-box; - color: white; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--value .react-date-picker__month-view-day-text:hover { - background: #349aef padding-box; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--today-highlight .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--today-highlight .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--value.react-date-picker__month-view-day--today-highlight .react-date-picker__month-view-day-text { - color: #ffccff; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text { - background: #d9ecfc padding-box; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:before { - background: #d9ecfc; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--hover-range-start .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--hover-range-end .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--range-start .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--range-end .react-date-picker__month-view-day-text { - background: #63b2f3 padding-box; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--hover-range-start .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--hover-range-end .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--range-start .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--range-end .react-date-picker__month-view-day-text:hover { - background: #63b2f3 padding-box; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--active .react-date-picker__month-view-day-text { - border: 2px solid #349aef; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--prev-month, - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--next-month { - color: #b3b3b3; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--weekend-highlight { - color: red; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--weekend-highlight.react-date-picker__month-view-day--prev-month, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--weekend-highlight.react-date-picker__month-view-day--next-month { - color: #d68e8e; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--today-highlight { - color: magenta; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--today-highlight.react-date-picker__month-view-day--prev-month, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--today-highlight.react-date-picker__month-view-day--next-month { - color: #ff66ff; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled { - color: #D8D8D8; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled .react-date-picker__month-view-day-text { - cursor: default; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled .react-date-picker__month-view-day-text:hover { - background: none; } - .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled.react-date-picker__month-view-day--prev-month, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled.react-date-picker__month-view-day--next-month { - color: #D8D8D8; } - -.react-date-picker__multi-month-view { - border: 1px solid gray; } - .react-date-picker__multi-month-view .react-date-picker__month-view { - border: none; } diff --git a/index.html b/index.html deleted file mode 100644 index 9abdbcc..0000000 --- a/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - Date Picker - - - - - - - -
-
- - - - - diff --git a/index.jsx b/index.jsx deleted file mode 100644 index 66c54ff..0000000 --- a/index.jsx +++ /dev/null @@ -1,169 +0,0 @@ -'use strict' - -// require('./index.css') -// require('./theme/hackerone.css') -// -require('./style/index.scss') - -import {findDOMNode} from 'react-dom' - -global.findDOMNode = findDOMNode -import DateFormatInput from './src/DateFormatInput' -import MonthView from './src/MonthView' - -import DatePicker from './src/Calendar' -import TimePicker from './src/TimePicker' -import TimeInput from './src/TimeInput' - -import TransitionView from './src/TransitionView' -import DecadeView from './src/DecadeView' -import YearView from './src/YearView' -import HistoryView from './src/HistoryView' -import NavBar from './src/NavBar' -import Calendar from './src/Calendar' -import Footer from './src/Footer' -import MultiMonthView from './src/MultiMonthView' -import BasicMonthView from './src/BasicMonthView' -import DateField from './src/DateField' -import Clock from './src/Clock' -import DateFormatSpinnerInput from './src/DateFormatSpinnerInput' -import { Flex, Item } from 'react-flex' - -var moment = require('moment'); -var React = require('react') - -var render = require('react-dom').render - -var range = ['2016-05-01', '2016-05-09'] -var date = moment().add(-10, 'days') - -var LOCALE = 'en' - -var TODAY = { - en: 'Today', - fr: 'Aujourd\'hui', - de: 'Heute', - es: 'Hoy', - ro: 'Azi' -} - -class F extends React.Component { - render(){ - const onClick = () => { - this.props.selectDate({dateMoment: moment('14/10/2016','DD/MM/YYYY')}) - } - return
- Select -
- } -} - -F.defaultProps = { - isDatePickerFooter: true -} -var GO2SELECTED = { - en: 'Go to selected', - es: 'Vaya a Favoritos', - de: 'Zum ausgewählten', - fr: 'Aller a la liste', - ro: 'Mergi la selectie' -} - -function emptyFn(){} - -let R = range -var App = React.createClass({ - displayName: 'App', - - onLocaleChange: function(event) { - LOCALE = event.target.value - - this.setState({}) - }, - - getInitialState(){ - return { - date: '2016-10-03', - text: 'atext', - time: '03:45:21 pm' - } - }, - - onTimeChange(time){ - // console.log('time', time) - this.setState({ time }) - }, - - onChange(date){ - this.setState({ - date - }) - }, - - onTextChange(text){ - this.setState({ - text - }) - }, - - render: function(){ - range = this.props.range || range - date = this.props.date || date - - return
- {/* - - {}}/> - - - -
- */} - {/**/} - {/* - -
- -
*/} - - { - console.log(dateFormat, '!!!'); - }} - placeholder="test" - defaultRange={[]} - isDisabledDay={() => false} - > - - - { - } - -
- - -
- }, - - onRangeChange: function(range, r){ - - if (r.length){ - if (r[1].timestamp - r[0].timestamp < 1000 * 60 *60*24 * 3) - return range[0] - } - // console.log(range) - R = range - this.setState({}) - //range = rangeValue - //date = rangeValue - //this.setState({}) - } -}) - -render(, document.getElementById('content')) diff --git a/package.json b/package.json index 9c904a6..02c9898 100644 --- a/package.json +++ b/package.json @@ -1,54 +1,53 @@ { + "name": "react-date-picker-reborn", + "version": "6.0.0", "author": { "name": "ZippyUI", "email": "contact@zippyui.com" }, "bugs": { - "url": "https://github.com/zippyui/react-date-picker/issues" + "url": "https://github.com/mweibel/react-date-picker/issues" }, "contributors": [], "dependencies": { + "@zippytech/react-class": "^4.0.4", + "@zippytech/react-flex": "^3.0.5", + "@zippytech/react-notify-resize": "^3.0.0", "lodash.throttle": "^4.0.1", - "object-assign": "4.0.1", - "raf": "3.2.0", - "react-class": "2.0.0", - "react-field": "2.0.2", - "react-flex": "2.2.7", - "react-inline-block": "2.0.0", - "react-notify-resize": "1.0.3", - "react-style-normalizer": "1.2.8" + "object-assign": "^4.1.1", + "raf": "^3.4.0", + "react-field": "^2.0.2", + "react-style-normalizer": "^1.2.8" }, "description": "A carefully crafted date picker for React", "devDependencies": { - "autoprefixer-loader": "^3.2.0", - "babel-cli": "^6.7.7", - "babel-core": "^6.5.0", - "babel-loader": "^6.2.4", - "babel-preset-es2015": "^6.5.0", - "babel-preset-react": "^6.5.0", - "css-loader": "^0.15.5", - "eslint": "^2.10.2", - "eslint-config-zippyui": "^1.0.1", - "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.8.4", - "json-loader": "^0.5.2", - "mocha": "^2.2.4", - "node-libs-browser": "^0.5.2", - "node-sass": "^3.5.3", - "react": ">=0.14.0 || >=15.0.0", - "react-dom": ">=0.14.0 || >=15.0.0", - "react-hot-loader": "^1.2.8", - "rimraf": "^2.5.2", - "sass-loader": "^3.2.0", - "should": "^6.0.3", - "style-loader": "^0.13.1", - "url-loader": "^0.5.6", - "webpack": "^1.13.0", - "webpack-dev-server": "^1.14.1", - "zippyui-theme-builder": "^1.0.2" + "autoprefixer": "^7.1.5", + "babel-cli": "^6.26.0", + "babel-preset-env": "^1.6.0", + "babel-preset-react": "^6.24.1", + "css-loader": "^0.28.7", + "eslint": "^4.9.0", + "eslint-config-standard": "^10.2.1", + "eslint-config-standard-react": "^5.0.0", + "eslint-plugin-import": "^2.7.0", + "eslint-plugin-node": "^5.2.0", + "eslint-plugin-promise": "^3.6.0", + "eslint-plugin-react": "^7.4.0", + "eslint-plugin-standard": "^3.0.1", + "extract-text-webpack-plugin": "^3.0.1", + "file-exists": "^5.0.0", + "moment": "^2.19.1", + "node-sass": "^4.5.3", + "postcss-flexbugs-fixes": "^3.2.0", + "postcss-loader": "^2.0.8", + "prop-types": "^15.6.0", + "react": "^16.0.0", + "react-dom": "^16.0.0", + "sass-loader": "^6.0.6", + "style-loader": "^0.19.0", + "webpack": "^3.7.1" }, - "directories": {}, - "homepage": "https://github.com/zippyui/react-date-picker", + "homepage": "https://github.com/mweibel/react-date-picker", "keywords": [ "date", "picker", @@ -59,38 +58,21 @@ ], "license": "MIT", "main": "lib/index.js", - "maintainers": [ - { - "name": "bogdanpetru", - "email": "bogdanpintican@gmail.com" - }, - { - "name": "radubrehar", - "email": "radu@evanghelic.ro" - }, - { - "name": "zippyui", - "email": "contact@zippyui.com" - } - ], - "name": "react-date-picker", - "optionalDependencies": {}, "peerDependencies": { - "react": ">=0.14.0 || >=15.0.0", - "react-dom": ">=0.14.0 || >=15.0.0", + "react": ">=0.14.0 || >=15.0.0 || >=16.0.0", + "react-dom": ">=0.14.0 || >=15.0.0 || >=16.0.0", "moment": ">=2.8.0" }, "repository": { "type": "git", - "url": "git+https://github.com/zippyui/react-date-picker.git" + "url": "git+https://github.com/mweibel/react-date-picker.git" }, "scripts": { "babel": "babel --out-dir lib src", "build": "npm run styles && npm run lib", - "dev": "webpack-dev-server --progress --config build/webpack.config.js", "lib": "rimraf lib && npm run babel", - "lint": "eslint src/**", - "prepublish": "npm run build", - "styles": "theme-builder" + "lint": "eslint .", + "prepare": "npm run build", + "styles": "node ./scripts/styles.js" } } diff --git a/react-date-picker-theme-hackerone.png b/react-date-picker-theme-hackerone.png deleted file mode 100644 index 60eb83a..0000000 Binary files a/react-date-picker-theme-hackerone.png and /dev/null differ diff --git a/react-date-picker.png b/react-date-picker.png deleted file mode 100644 index 7c7bb8b..0000000 Binary files a/react-date-picker.png and /dev/null differ diff --git a/scripts/build-css.js b/scripts/build-css.js new file mode 100644 index 0000000..11c1d8e --- /dev/null +++ b/scripts/build-css.js @@ -0,0 +1,35 @@ +'use strict' + +const ExtractTextPlugin = require('extract-text-webpack-plugin') +const path = require('path') +const fileExists = require('file-exists') + +const extractRules = require('./extractRules') + +/** + * @param {String} file File name - should be located in the ./style folder and have a scss extension + * + * @return {Object} webpack configuration + */ +module.exports = function (file) { + const filePath = './style/' + file + '.scss' + + const entry = { + index: fileExists(filePath) ? filePath : file + } + + return { + bail: true, + entry: entry, + output: { + path: path.resolve('./'), + filename: file + '.css' + }, + module: { + rules: extractRules + }, + plugins: [ + new ExtractTextPlugin(file + '.css') + ] + } +} diff --git a/scripts/build-theme.js b/scripts/build-theme.js new file mode 100644 index 0000000..fb45073 --- /dev/null +++ b/scripts/build-theme.js @@ -0,0 +1,26 @@ +'use strict' + +const ExtractTextPlugin = require('extract-text-webpack-plugin') +const path = require('path') +const extractRules = require('./extractRules') + +module.exports = function (themeName) { + const entry = { + index: './style/theme/' + themeName + '/index.scss' + } + + return { + bail: true, + entry: entry, + output: { + path: path.resolve('./theme/'), + filename: themeName + '.css' + }, + module: { + rules: extractRules + }, + plugins: [ + new ExtractTextPlugin(themeName + '.css') + ] + } +} diff --git a/scripts/extractRules.js b/scripts/extractRules.js new file mode 100644 index 0000000..8aa8740 --- /dev/null +++ b/scripts/extractRules.js @@ -0,0 +1,41 @@ +const ExtractTextPlugin = require('extract-text-webpack-plugin') +const autoprefixer = require('autoprefixer') + +module.exports = [ + { + test: /\.scss$/, + exclude: /node_modules/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: [ + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1 + } + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9' // React doesn't support IE8 anyway + ], + flexbox: 'no-2009' + }) + ] + } + }, + require.resolve('sass-loader') + ] + }) + } +] diff --git a/scripts/styles.js b/scripts/styles.js new file mode 100644 index 0000000..0fa923e --- /dev/null +++ b/scripts/styles.js @@ -0,0 +1,37 @@ +const fs = require('fs') +const path = require('path') + +const webpack = require('webpack') + +const buildTheme = require('./build-theme') +const buildCss = require('./build-css') + +function getDirectories (srcpath) { + return fs.readdirSync(srcpath).filter(function (file) { + return fs.statSync(path.join(srcpath, file)).isDirectory() + }) +} + +const themes = getDirectories(path.resolve('./style/theme')) + +themes.forEach(function (theme) { + webpack(buildTheme(theme)).run(function (err) { + if (err) { + console.error(err) + process.exit(1) + } + + console.log('Built theme ' + theme + '.') + }) +}) + +;['base', 'index'].forEach(function (file) { + webpack(buildCss(file)).run(function (err) { + if (err) { + console.error(err) + process.exit(1) + } + + console.log('Built file ' + file + '.css') + }) +}) diff --git a/src/BasicMonthView.js b/src/BasicMonthView.js index 7b2fb06..52de4b3 100644 --- a/src/BasicMonthView.js +++ b/src/BasicMonthView.js @@ -1,10 +1,10 @@ import React, { PropTypes } from 'react' -import Component from 'react-class' +import Component from '@zippytech/react-class' import moment from 'moment' import assign from 'object-assign' -import { Flex } from 'react-flex' +import { Flex } from '@zippytech/react-flex' import FORMAT from './utils/format' import toMoment from './toMoment' @@ -94,7 +94,6 @@ const getWeekStartMoment = (value, props) => { * @return {Moment[]} */ const getDaysInMonthView = (value, props) => { - const { locale, dateFormat } = props const toMomentParam = { locale, dateFormat } @@ -138,7 +137,7 @@ const getWeekDayNames = (props) => { let names = weekDayNames - if (typeof names == 'function') { + if (typeof names === 'function') { names = names(weekStartDay, locale) } else if (Array.isArray(names)) { names = [...names] @@ -155,13 +154,12 @@ const getWeekDayNames = (props) => { } class BasicMonthView extends Component { - - componentWillMount() { + componentWillMount () { this.updateBem(this.props) this.updateToMoment(this.props) } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps (nextProps) { if (nextProps.defaultClassName != this.props.defaultClassName) { this.updateBem(nextProps) } @@ -169,11 +167,11 @@ class BasicMonthView extends Component { this.updateToMoment(nextProps) } - updateBem(props) { + updateBem (props) { this.bem = bemFactory(props.defaultClassName) } - updateToMoment(props) { + updateToMoment (props) { this.toMoment = (value, dateFormat) => { return toMoment(value, { locale: props.locale, @@ -182,7 +180,7 @@ class BasicMonthView extends Component { } } - prepareProps(thisProps) { + prepareProps (thisProps) { const props = assign({}, thisProps) props.viewMoment = props.viewMoment || this.toMoment(props.viewDate) @@ -194,14 +192,14 @@ class BasicMonthView extends Component { return props } - prepareClassName(props) { + prepareClassName (props) { return join( props.className, `${CLASS_NAME} dp-month-view` ) } - render() { + render () { const props = this.p = this.prepareProps(this.props) const { viewMoment } = props @@ -250,7 +248,7 @@ class BasicMonthView extends Component { delete flexProps.weekNumberName delete flexProps.weekStartDay - if (typeof props.cleanup == 'function') { + if (typeof props.cleanup === 'function') { props.cleanup(flexProps) } @@ -258,7 +256,7 @@ class BasicMonthView extends Component { column wrap={false} inline - alignItems="stretch" + alignItems='stretch' {...flexProps} children={children} @@ -270,7 +268,7 @@ class BasicMonthView extends Component { * @param {Moment[]} days The days in a week * @return {React.DOM} */ - renderWeekNumber(props, days) { + renderWeekNumber (props, days) { const firstDayOfWeek = days[0] const week = firstDayOfWeek.weeks() @@ -319,7 +317,7 @@ class BasicMonthView extends Component { * * @return {React.DOM} */ - renderDays(props, days) { + renderDays (props, days) { const nodes = days.map((date) => this.renderDay(props, date)) const len = days.length @@ -350,7 +348,7 @@ class BasicMonthView extends Component { />) } - renderDay(props, dateMoment) { + renderDay (props, dateMoment) { const dayText = FORMAT.day(dateMoment, props.dayFormat) const classes = [ @@ -384,8 +382,7 @@ class BasicMonthView extends Component { return result } - renderWeekDayNames() { - + renderWeekDayNames () { const props = this.p const { weekNumbers, @@ -400,9 +397,9 @@ class BasicMonthView extends Component { return null } - const names = weekNumbers ? - [weekNumberName].concat(getWeekDayNames(props)) : - getWeekDayNames(props) + const names = weekNumbers + ? [weekNumberName].concat(getWeekDayNames(props)) + : getWeekDayNames(props) const className = `${this.bem('row')} ${this.bem('week-day-names')} dp-row dp-week-day-names` @@ -444,7 +441,6 @@ class BasicMonthView extends Component { } - } BasicMonthView.propTypes = { @@ -460,10 +456,10 @@ BasicMonthView.propTypes = { // the name to give to the week number column weekNumberName: PropTypes.string, - weekDayNames(props, propName) { + weekDayNames (props, propName) { const value = props[propName] - if (typeof value != 'function' && value !== false && !Array.isArray(value)) { + if (typeof value !== 'function' && value !== false && !Array.isArray(value)) { return new Error(`"weekDayNames" should be a function, an array or the boolean "false"`) } diff --git a/src/Calendar.js b/src/Calendar.js index cd973c7..7248472 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -1,5 +1,5 @@ import React from 'react' -import Component from 'react-class' +import Component from '@zippytech/react-class' import assign from 'object-assign' import assignDefined from './assignDefined' @@ -10,22 +10,21 @@ import join from './join' import ClockInput from './ClockInput' import forwardTime from './utils/forwardTime' -import { Flex } from 'react-flex' +import { Flex } from '@zippytech/react-flex' export default class Calendar extends Component { - - constructor(props) { + constructor (props) { super(props) this.state = { timeFocused: false } } - prepareDate(props) { + prepareDate (props) { return toMoment(props.date, props) } - render() { + render () { const props = this.p = assign({}, this.props) const dateFormat = props.dateFormat.toLowerCase() @@ -51,7 +50,7 @@ export default class Calendar extends Component { delete monthViewProps.updateOnWheel delete monthViewProps.wrapTime - if (typeof this.props.cleanup == 'function') { + if (typeof this.props.cleanup === 'function') { this.props.cleanup(monthViewProps) } @@ -69,7 +68,7 @@ export default class Calendar extends Component { } - isHistoryViewVisible() { + isHistoryViewVisible () { if (this.view && this.view.isHistoryViewVisible) { return this.view.isHistoryViewVisible() } @@ -77,20 +76,20 @@ export default class Calendar extends Component { return false } - renderChildren([navBar, inner, footer]) { + renderChildren ([navBar, inner, footer]) { const props = this.p const clockInput = props.showClock && this.renderClockInput() const children = [ navBar, - + {clockInput} @@ -101,18 +100,18 @@ export default class Calendar extends Component { return } - focus() { + focus () { if (this.view) { this.view.focus() } } - isFocused() { + isFocused () { if (this.view) { return this.view.isFocused() } @@ -120,17 +119,17 @@ export default class Calendar extends Component { return false } - onViewKeyDown(...args) { + onViewKeyDown (...args) { if (this.view) { this.view.onViewKeyDown(...args) } } - isTimeInputFocused() { + isTimeInputFocused () { return this.state.timeFocused } - renderClockInput() { + renderClockInput () { const clockInput = null const readOnly = this.props.readOnly @@ -164,7 +163,7 @@ export default class Calendar extends Component { /> } - onClockInputFocus() { + onClockInputFocus () { this.setState({ timeFocused: true }) @@ -172,7 +171,7 @@ export default class Calendar extends Component { this.props.onClockInputFocus() } - onClockInputBlur() { + onClockInputBlur () { this.setState({ timeFocused: false }) @@ -180,7 +179,7 @@ export default class Calendar extends Component { this.props.onClockInputBlur() } - onClockInputMouseDown(event) { + onClockInputMouseDown (event) { event.stopPropagation() if (event.target && event.target.type != 'text') { // in order not to blur - in case we're in a date field @@ -190,7 +189,7 @@ export default class Calendar extends Component { this.clockInput.focus() } - onTimeChange(value, timeFormat) { + onTimeChange (value, timeFormat) { this.time = value this.props.onTimeChange(value, timeFormat) @@ -207,7 +206,7 @@ export default class Calendar extends Component { }) } - onChange(dateString, { dateMoment, timestamp }, event) { + onChange (dateString, { dateMoment, timestamp }, event) { const props = this.p if (props.showClock) { diff --git a/src/Clock.js b/src/Clock.js index 74911b2..a99e44e 100644 --- a/src/Clock.js +++ b/src/Clock.js @@ -1,5 +1,5 @@ import React from 'react' -import Component from 'react-class' +import Component from '@zippytech/react-class' import assign from 'object-assign' @@ -12,9 +12,9 @@ import normalize from 'react-style-normalizer' const MINUTES = Array.apply(null, new Array(60)).map((_, index) => index) const toUpperFirst = (str) => { - return str ? - str.charAt(0).toUpperCase() + str.substr(1) : - '' + return str + ? str.charAt(0).toUpperCase() + str.substr(1) + : '' } const transformStyle = normalize({ transform: '' }) @@ -34,23 +34,22 @@ const rotateTickStyle = (tick, { width, height }, totalSize, offset) => { } export default class Clock extends Component { - - constructor(props) { + constructor (props) { super(props) let time let seconds if (props.defaultSeconds) { - seconds = props.defaultSeconds == true ? - Date.now() / 1000 : - +props.defaultSeconds + seconds = props.defaultSeconds == true + ? Date.now() / 1000 + : +props.defaultSeconds } if (props.defaultTime) { - time = props.defaultTime == true ? - Date.now() : - +props.defaultTime + time = props.defaultTime == true + ? Date.now() + : +props.defaultTime } // if (time === undefined) { @@ -70,7 +69,7 @@ export default class Clock extends Component { } } - shouldRun(props) { + shouldRun (props) { props = props || this.props if (props.run === false) { @@ -80,7 +79,7 @@ export default class Clock extends Component { return !!(props.defaultSeconds || props.defaultTime) } - componentDidMount() { + componentDidMount () { if (this.shouldRun(this.props)) { this.start() } @@ -92,7 +91,7 @@ export default class Clock extends Component { } } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps (nextProps) { const currentRun = this.shouldRun(this.props) const nextRun = this.shouldRun(nextProps) @@ -103,27 +102,27 @@ export default class Clock extends Component { } } - start() { - this.startTime = Date.now ? Date.now() : +new Date + start () { + this.startTime = Date.now ? Date.now() : +new Date() this.run() } - stop() { + stop () { if (this.timeoutId) { clearTimeout(this.timeoutId) } } - run() { + run () { this.timeoutId = setTimeout(() => { this.update() this.run() }, this.props.updateInterval || 1000) } - update() { - const now = Date.now ? Date.now() : +new Date + update () { + const now = Date.now ? Date.now() : +new Date() const diff = now - this.startTime const seconds = this.getPropsSeconds() @@ -138,7 +137,7 @@ export default class Clock extends Component { this.setTime(time + diff) } - setSeconds(seconds) { + setSeconds (seconds) { this.setState({ seconds }) @@ -148,7 +147,7 @@ export default class Clock extends Component { } } - setTime(time) { + setTime (time) { this.setState({ time }) @@ -158,23 +157,23 @@ export default class Clock extends Component { } } - getPropsTime() { + getPropsTime () { return this.props.time || this.state.defaultTime || 0 } - getPropsSeconds() { + getPropsSeconds () { return this.props.seconds || this.state.defaultSeconds } - getSeconds() { + getSeconds () { return this.state.seconds || this.getPropsSeconds() } - getTime() { + getTime () { return this.state.time || this.getPropsTime() } - render() { + render () { const props = this.p = assign({}, this.props) let size = props.size @@ -261,7 +260,7 @@ export default class Clock extends Component { delete divProps.tickOffset delete divProps.tickWidth - if (typeof props.cleanup == 'function') { + if (typeof props.cleanup === 'function') { props.cleanup(divProps) } @@ -283,22 +282,22 @@ export default class Clock extends Component { } - renderCenter() { + renderCenter () { const props = this.props const centerSize = props.centerSize || ((props.bigTickHeight || props.tickHeight) * 3) return
} - renderCenterOverlay() { + renderCenterOverlay () { const props = this.props const centerOverlaySize = props.centerOverlaySize || (props.handWidth * 4) return
} - onResize({ width, height }) { + onResize ({ width, height }) { if (width != height) { console.warn('Clock width != height. Please make sure it\'s a square.') } @@ -317,19 +316,19 @@ export default class Clock extends Component { }) } - renderSecondHand(value) { + renderSecondHand (value) { return this.props.showSecondsHand && this.renderHand('second', value) } - renderMinuteHand(value) { + renderMinuteHand (value) { return this.props.showMinutesHand && this.renderHand('minute', value) } - renderHourHand(value) { + renderHourHand (value) { return this.props.showHoursHand && this.renderHand('hour', value) } - renderHand(name, value) { + renderHand (name, value) { if (this.ignoreRender) { return null } @@ -373,7 +372,7 @@ export default class Clock extends Component { return
} - renderTick(tick) { + renderTick (tick) { if (this.ignoreRender) { return null } @@ -407,17 +406,17 @@ export default class Clock extends Component { `react-date-picker__clock-tick--${sizeName}` ) - const offset = small ? - smallTickOffset || tickOffset : - bigTickOffset || tickOffset + const offset = small + ? smallTickOffset || tickOffset + : bigTickOffset || tickOffset - const tWidth = small ? - smallTickWidth || tickWidth : - bigTickWidth || tickWidth + const tWidth = small + ? smallTickWidth || tickWidth + : bigTickWidth || tickWidth - const tHeight = small ? - smallTickHeight || tickHeight : - bigTickHeight || tickHeight + const tHeight = small + ? smallTickHeight || tickHeight + : bigTickHeight || tickHeight const totalSize = size - borderWidth const style = rotateTickStyle(tick, { diff --git a/src/ClockInput.js b/src/ClockInput.js index bcf39aa..6e31a86 100644 --- a/src/ClockInput.js +++ b/src/ClockInput.js @@ -1,10 +1,10 @@ import React from 'react' -import Component from 'react-class' +import Component from '@zippytech/react-class' import throttle from 'lodash.throttle' import assign from 'object-assign' -import { Flex } from 'react-flex' +import { Flex } from '@zippytech/react-flex' import join from './join' import toMoment from './toMoment' @@ -13,8 +13,7 @@ import Clock from './Clock' import DateFormatSpinnerInput from './DateFormatSpinnerInput' export default class ClockInput extends Component { - - constructor(props) { + constructor (props) { super(props) const delay = props.changeDelay @@ -25,11 +24,11 @@ export default class ClockInput extends Component { } } - getValue() { + getValue () { return this.value } - render() { + render () { const props = this.props const format = props.dateFormat || props.format @@ -59,7 +58,7 @@ export default class ClockInput extends Component { delete flexProps.viewIndex delete flexProps.wrapTime - if (typeof this.props.cleanup == 'function') { + if (typeof this.props.cleanup === 'function') { this.props.cleanup(flexProps) } @@ -75,11 +74,11 @@ export default class ClockInput extends Component { } - renderTimeInput() { + renderTimeInput () { const props = this.props const dateInput = React.Children - .toArray(props.children) - .filter(child => child && child.props && child.props.isDateInput)[0] + .toArray(props.children) + .filter(child => child && child.props && child.props.isDateInput)[0] const dateInputProps = assign({}, this.props, { ref: (field) => { this.field = field }, @@ -99,13 +98,13 @@ export default class ClockInput extends Component { return } - focus() { + focus () { if (this.field) { this.field.focus() } } - onKeyDown(event) { + onKeyDown (event) { if (this.props.onEnterKey && event.key == 'Enter') { this.props.onEnterKey(event) } @@ -115,7 +114,7 @@ export default class ClockInput extends Component { } } - onChange(value) { + onChange (value) { if (this.props.value === undefined) { this.setState({ value @@ -127,7 +126,7 @@ export default class ClockInput extends Component { } } - setValue(value) { + setValue (value) { if (this.props.value === undefined) { this.setState({ value @@ -139,11 +138,11 @@ export default class ClockInput extends Component { } } - renderClock() { + renderClock () { const props = this.props const clock = React.Children - .toArray(props.children) - .filter(child => child && child.props && child.props.isDatePickerClock)[0] + .toArray(props.children) + .filter(child => child && child.props && child.props.isDatePickerClock)[0] const dateFormat = this.dateFormat const time = toMoment(this.value, { dateFormat }) diff --git a/src/DateField/icons.js b/src/DateField/icons.js index f83e2ff..9267435 100644 --- a/src/DateField/icons.js +++ b/src/DateField/icons.js @@ -1,6 +1,6 @@ import React from 'react' -export const CLEAR_ICON = - - +export const CLEAR_ICON = + + diff --git a/src/DateField/index.js b/src/DateField/index.js index 335a80d..e2cfad1 100644 --- a/src/DateField/index.js +++ b/src/DateField/index.js @@ -1,14 +1,12 @@ import React, { PropTypes } from 'react' import { findDOMNode } from 'react-dom' -import Component from 'react-class' +import Component from '@zippytech/react-class' import assign from 'object-assign' -import { Flex } from 'react-flex' +import { Flex } from '@zippytech/react-flex' import Input from 'react-field' import DateFormatInput from '../DateFormatInput' -import InlineBlock from 'react-inline-block' - import { CLEAR_ICON } from './icons' import moment from 'moment' import join from '../join' @@ -29,14 +27,12 @@ const getPicker = props => { const FIND_INPUT = c => c && (c.type === 'input' || (c.props && c.isDateInput)) - const preventDefault = (event) => { event.preventDefault() } export default class DateField extends Component { - - constructor(props) { + constructor (props) { super(props) this.state = { @@ -46,11 +42,11 @@ export default class DateField extends Component { } } - componentWillUnmount() { + componentWillUnmount () { this.unmounted = true } - render() { + render () { const props = this.prepareProps(this.props) const flexProps = assign({}, props) @@ -84,7 +80,7 @@ export default class DateField extends Component { delete flexProps.theme delete flexProps.updateOnDateClick - if (typeof props.cleanup == 'function') { + if (typeof props.cleanup === 'function') { props.cleanup(flexProps) } @@ -102,7 +98,7 @@ export default class DateField extends Component { } - renderInput() { + renderInput () { const props = this.p const inputProps = this.prepareInputProps(props) @@ -126,24 +122,24 @@ export default class DateField extends Component { delete propsForInput.dateFormat } - input = input ? - React.cloneElement(input, propsForInput) : - + input = input + ? React.cloneElement(input, propsForInput) + : } return input } - renderClearIcon() { + renderClearIcon () { const props = this.p if (!props.clearIcon || props.forceValidDate || props.disabled) { return undefined } - const clearIcon = props.clearIcon === true ? - CLEAR_ICON : - props.clearIcon + const clearIcon = props.clearIcon === true + ? CLEAR_ICON + : props.clearIcon const clearIconProps = { style: { @@ -161,13 +157,13 @@ export default class DateField extends Component { } if (result === undefined) { - result = + result =
} return result } - onClearMouseDown(event) { + onClearMouseDown (event) { event.preventDefault() this.onFieldChange('') @@ -176,14 +172,14 @@ export default class DateField extends Component { } } - renderCalendarIcon() { + renderCalendarIcon () { let result const renderIcon = this.props.renderCalendarIcon const calendarIconProps = { className: 'react-date-field__calendar-icon', onMouseDown: this.onCalendarIconMouseDown, - children:
+ children:
} if (renderIcon) { @@ -197,7 +193,7 @@ export default class DateField extends Component { return result } - onCalendarIconMouseDown(event) { + onCalendarIconMouseDown (event) { if (this.props.disabled) { return } @@ -210,27 +206,27 @@ export default class DateField extends Component { this.toggleExpand() } - prepareExpanded(props) { - return props.expanded === undefined ? - this.state.expanded : - props.expanded + prepareExpanded (props) { + return props.expanded === undefined + ? this.state.expanded + : props.expanded } - prepareDate(props, pickerProps) { + prepareDate (props, pickerProps) { props = props || this.p pickerProps = pickerProps || props.pickerProps const locale = props.locale || pickerProps.locale const dateFormat = props.dateFormat || pickerProps.dateFormat - let value = props.value === undefined ? - this.state.value : - props.value + let value = props.value === undefined + ? this.state.value + : props.value const date = this.toMoment(value) const valid = date.isValid() - if (value && typeof value != 'string' && valid) { + if (value && typeof value !== 'string' && valid) { value = this.format(date) } @@ -254,7 +250,7 @@ export default class DateField extends Component { } } - preparePickerProps(props) { + preparePickerProps (props) { const picker = getPicker(props, this) if (!picker) { @@ -264,7 +260,7 @@ export default class DateField extends Component { return picker.props || {} } - prepareProps(thisProps) { + prepareProps (thisProps) { const props = this.p = assign({}, thisProps) props.children = React.Children.toArray(props.children) @@ -287,9 +283,9 @@ export default class DateField extends Component { props.text = this.state.text if (props.text == null) { - props.text = props.valid && props.date ? - props.value : - this.props.value + props.text = props.valid && props.date + ? props.value + : this.props.value } } @@ -302,7 +298,7 @@ export default class DateField extends Component { return props } - prepareClassName(props) { + prepareClassName (props) { const position = POSITIONS[props.pickerProps.position || props.pickerPosition] || 'bottom' return join([ @@ -328,7 +324,7 @@ export default class DateField extends Component { ]) } - prepareInputProps(props) { + prepareInputProps (props) { const input = props.children.filter(FIND_INPUT)[0] const inputProps = (input && input.props) || {} @@ -367,7 +363,7 @@ export default class DateField extends Component { return newInputProps } - renderPicker() { + renderPicker () { const props = this.p if (this.isExpanded()) { @@ -454,7 +450,7 @@ export default class DateField extends Component { return null } - onTimeChange(value, timeFormat) { + onTimeChange (value, timeFormat) { const timeMoment = this.toMoment(value, { dateFormat: timeFormat }) const time = ['hour', 'minute', 'second', 'millisecond'].reduce((acc, part) => { @@ -465,18 +461,18 @@ export default class DateField extends Component { this.time = time } - getTime() { + getTime () { return this.time } - setValue(value, config = {}) { + setValue (value, config = {}) { const dateMoment = this.toMoment(value) const dateString = this.format(dateMoment) this.setDate(dateString, assign(config, { dateMoment })) } - onFooterOkClick() { + onFooterOkClick () { const activeDate = this.p.activeDate if (activeDate) { @@ -490,13 +486,13 @@ export default class DateField extends Component { this.setExpanded(false) } - onFooterCancelClick() { + onFooterCancelClick () { this.setExpanded(false) } - onFooterTodayClick() { + onFooterTodayClick () { const today = this.toMoment(new Date()) - .startOf('day') + .startOf('day') this.onPickerChange(this.format(today), { dateMoment: today }) this.onViewDateChange(today) @@ -505,7 +501,7 @@ export default class DateField extends Component { return false } - onFooterClearClick() { + onFooterClearClick () { const clearDate = this.props.clearDate === undefined ? this.props.minDate : this.props.clearDate if (clearDate !== undefined) { @@ -519,7 +515,7 @@ export default class DateField extends Component { return false } - toMoment(value, props) { + toMoment (value, props) { if (moment.isMoment(value)) { return value } @@ -543,7 +539,7 @@ export default class DateField extends Component { return date } - isValid(text) { + isValid (text) { if (text === undefined) { text = this.p.text } @@ -551,19 +547,19 @@ export default class DateField extends Component { return this.toMoment(text).isValid() } - onViewDateChange(viewDate) { + onViewDateChange (viewDate) { this.setState({ viewDate }) } - onActiveDateChange(activeDate) { + onActiveDateChange (activeDate) { this.setState({ activeDate }) } - onViewKeyDown(event) { + onViewKeyDown (event) { const key = event.key if (this.pickerView) { // } && (key == 'Escape' || key == 'Enter' || (key in NAV_KEYS))) { @@ -571,7 +567,7 @@ export default class DateField extends Component { } } - onPickerMouseDown(event) { + onPickerMouseDown (event) { preventDefault(event) if (!this.isFocused()) { @@ -579,7 +575,7 @@ export default class DateField extends Component { } } - isHistoryViewVisible() { + isHistoryViewVisible () { if (this.picker && this.picker.isHistoryViewVisible) { return this.picker.isHistoryViewVisible() } @@ -587,7 +583,7 @@ export default class DateField extends Component { return false } - onFieldKeyDown(event) { + onFieldKeyDown (event) { const key = event.key const expanded = this.isExpanded() const historyVisible = this.isHistoryViewVisible() @@ -625,19 +621,19 @@ export default class DateField extends Component { return true } - getInput() { + getInput () { return findDOMNode(this.field) } - isFocused() { + isFocused () { return this.state.focused } - isLazyFocused() { + isLazyFocused () { return this.isFocused() || this.isTimeInputFocused() } - isTimeInputFocused() { + isTimeInputFocused () { if (this.pickerView && this.pickerView.isTimeInputFocused) { return this.pickerView.isTimeInputFocused() } @@ -645,7 +641,7 @@ export default class DateField extends Component { return false } - onFieldFocus(event) { + onFieldFocus (event) { if (this.state.focused) { return } @@ -661,7 +657,7 @@ export default class DateField extends Component { this.props.onFocus(event) } - onFieldBlur(event) { + onFieldBlur (event) { if (!this.isFocused()) { return } @@ -680,7 +676,7 @@ export default class DateField extends Component { setTimeout(() => this.onLazyBlur(), 0) } - onClockEnterKey() { + onClockEnterKey () { if (!this.isFocused()) { this.focus() } @@ -688,7 +684,7 @@ export default class DateField extends Component { this.onFooterOkClick() } - onClockEscapeKey() { + onClockEscapeKey () { if (!this.isFocused()) { this.focus() } @@ -696,7 +692,7 @@ export default class DateField extends Component { this.onFooterCancelClick() } - onClockInputBlur() { + onClockInputBlur () { setTimeout(() => { if (!this.isFocused()) { this.onLazyBlur() @@ -704,7 +700,7 @@ export default class DateField extends Component { }, 0) } - onLazyBlur() { + onLazyBlur () { if (this.unmounted) { return } @@ -716,9 +712,9 @@ export default class DateField extends Component { this.setExpanded(false) if (!this.isValid() && this.props.validateOnBlur) { - const value = this.lastValidDate && this.p.text != '' ? - this.format(this.lastValidDate) : - '' + const value = this.lastValidDate && this.p.text != '' + ? this.format(this.lastValidDate) + : '' setTimeout(() => { this.onFieldChange(value) @@ -726,19 +722,19 @@ export default class DateField extends Component { } } - onInputChange() { + onInputChange () { } - isExpanded() { + isExpanded () { return this.p.expanded } - toggleExpand() { + toggleExpand () { this.setExpanded(!this.p.expanded) } - setExpanded(bool) { + setExpanded (bool) { const props = this.p if (bool === props.expanded) { @@ -769,23 +765,23 @@ export default class DateField extends Component { this.props.onExpandChange(bool) } - onCollapse() { + onCollapse () { this.props.onCollapse() } - onExpand() { + onExpand () { this.props.onExpand() } - onFieldChange(value) { - if (this.p.rawInput && typeof value != 'string') { + onFieldChange (value) { + if (this.p.rawInput && typeof value !== 'string') { const event = value value = event.target.value } - const dateMoment = value == '' ? - null : - this.toMoment(value) + const dateMoment = value == '' + ? null + : this.toMoment(value) if (dateMoment === null || dateMoment.isValid()) { this.onChange(dateMoment) @@ -794,7 +790,7 @@ export default class DateField extends Component { this.onTextChange(value) } - onTextChange(text) { + onTextChange (text) { if (this.props.text === undefined && this.props.value === undefined) { this.setState({ text @@ -806,7 +802,7 @@ export default class DateField extends Component { } } - onPickerChange(dateString, { dateMoment, forceUpdate }, event) { + onPickerChange (dateString, { dateMoment, forceUpdate }, event) { const isEnter = event && event.key == 'Enter' const updateOnDateClick = forceUpdate ? true : this.props.updateOnDateClick || isEnter @@ -821,7 +817,7 @@ export default class DateField extends Component { } } - setDate(dateString, { dateMoment, skipTime = false }) { + setDate (dateString, { dateMoment, skipTime = false }) { const props = this.p const currentDate = props.date @@ -843,7 +839,7 @@ export default class DateField extends Component { this.onChange(dateMoment) } - onChange(dateMoment) { + onChange (dateMoment) { if (dateMoment != null && !moment.isMoment(dateMoment)) { dateMoment = this.toMoment(dateMoment) } @@ -872,13 +868,13 @@ export default class DateField extends Component { this.setState(newState) } - format(mom, format) { - return mom == null ? - '' : - mom.format(format || this.p.displayFormat || this.p.dateFormat) + format (mom, format) { + return mom == null + ? '' + : mom.format(format || this.p.displayFormat || this.p.dateFormat) } - focusField() { + focusField () { const input = findDOMNode(this.field) if (input) { @@ -886,10 +882,9 @@ export default class DateField extends Component { } } - focus() { + focus () { this.focusField() } - } DateField.defaultProps = { diff --git a/src/DateFormatInput/formats.js b/src/DateFormatInput/formats.js index 4185a1c..1d375dd 100644 --- a/src/DateFormatInput/formats.js +++ b/src/DateFormatInput/formats.js @@ -73,7 +73,7 @@ const handleUnidentified = (format, { event, currentValue, range }) => { if (newChar * 1 != newChar) { return { preventDefault: false, - value: currentValue, + value: currentValue // caretPos } } @@ -255,7 +255,9 @@ const getFormats = () => { // }, HH: { time: true, - min: 0, max: 23, default: '00', + min: 0, + max: 23, + default: '00', handleDelete, handleBackspace, handleUnidentified: handleUnidentifiedLeftPad, @@ -269,7 +271,9 @@ const getFormats = () => { // handlePageUp: handlePageLeftPad, // handlePageDown: handlePageLeftPad // }, - hh: { min: 1, max: 12, default: '01', + hh: { min: 1, + max: 12, + default: '01', time: true, handleDelete, handleBackspace, @@ -292,7 +296,8 @@ const getFormats = () => { A: { length: 2, time: true, - default: 'AM', upper: true, + default: 'AM', + upper: true, handleArrow: handleMeridiemArrow, handlePageUp: handleMeridiemArrow, handlePageDown: handleMeridiemArrow, @@ -301,7 +306,9 @@ const getFormats = () => { }, // m: { min: 0, max: 59, default: '0', maxLen: 2 }, - mm: { min: 0, max: 59, default: '00', + mm: { min: 0, + max: 59, + default: '00', time: true, handleDelete, handleBackspace, @@ -314,7 +321,9 @@ const getFormats = () => { // s: { min: 0, max: 59, default: '0' }, ss: { time: true, - min: 0, max: 59, default: '00', + min: 0, + max: 59, + default: '00', handleDelete, handleBackspace, handleUnidentified: handleUnidentifiedLeftPad, diff --git a/src/DateFormatInput/index.js b/src/DateFormatInput/index.js index 8e43790..9f7984b 100644 --- a/src/DateFormatInput/index.js +++ b/src/DateFormatInput/index.js @@ -1,12 +1,12 @@ import React, { PropTypes } from 'react' import { findDOMNode } from 'react-dom' -import Component from 'react-class' +import Component from '@zippytech/react-class' import throttle from 'lodash.throttle' import assign from 'object-assign' import { getSelectionStart, getSelectionEnd, setCaretPosition } from '../TimeInput' -import toMoment from '../toMoment'; +import toMoment from '../toMoment' import parseFormat from './parseFormat' import forwardTime from '../utils/forwardTime' @@ -22,8 +22,7 @@ const BACKWARDS = { } export default class DateFormatInput extends Component { - - constructor(props) { + constructor (props) { super(props) const { positions, matches } = parseFormat(props.dateFormat) @@ -44,7 +43,7 @@ export default class DateFormatInput extends Component { } } - getMinMax(props) { + getMinMax (props) { props = props || this.props let minDate = null @@ -64,7 +63,7 @@ export default class DateFormatInput extends Component { } } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps (nextProps) { const { minDate, maxDate } = this.getMinMax(nextProps) this.setState({ @@ -72,13 +71,13 @@ export default class DateFormatInput extends Component { }) } - componentDidUpdate() { + componentDidUpdate () { if (this.props.value !== undefined && this.caretPos && this.isFocused()) { this.setCaretPosition(this.caretPos) } } - toMoment(value, props) { + toMoment (value, props) { props = props || this.props return toMoment(value, { @@ -87,12 +86,12 @@ export default class DateFormatInput extends Component { }) } - render() { + render () { const { props } = this - const value = this.state.propsValue ? - props.value : - this.state.value + const value = this.state.propsValue + ? props.value + : this.state.value const displayValue = this.displayValue = @@ -109,7 +108,7 @@ export default class DateFormatInput extends Component { delete inputProps.stopPropagation delete inputProps.updateOnWheel - if (typeof props.cleanup == 'function') { + if (typeof props.cleanup === 'function') { props.cleanup(inputProps) } @@ -125,11 +124,11 @@ export default class DateFormatInput extends Component { /> } - focus() { + focus () { findDOMNode(this).focus() } - onFocus(event) { + onFocus (event) { if (this.props.onFocus) { this.props.onFocus(event) } @@ -139,7 +138,7 @@ export default class DateFormatInput extends Component { }) } - onBlur(event) { + onBlur (event) { if (this.props.onBlur) { this.props.onBlur(event) } @@ -149,24 +148,24 @@ export default class DateFormatInput extends Component { }) } - isFocused() { + isFocused () { return this.state.focused } - onChange(event) { + onChange (event) { event.stopPropagation() } - onDirection(dir, event = {}) { + onDirection (dir, event = {}) { this.onKeyDown({ key: dir > 0 ? 'ArrowUp' : 'ArrowDown', type: event.type || 'unknown', - stopPropagation: typeof event.stopPropagation == 'function' ? () => event.stopPropagation(): emptyFn, - preventDefault: typeof event.preventDefault == 'function' ? () => event.preventDefault(): emptyFn + stopPropagation: typeof event.stopPropagation === 'function' ? () => event.stopPropagation() : emptyFn, + preventDefault: typeof event.preventDefault === 'function' ? () => event.preventDefault() : emptyFn }) } - onWheel(event) { + onWheel (event) { if (this.props.updateOnWheel && this.isFocused()) { this.onDirection(-event.deltaY, event) // this.onKeyDown({ @@ -182,7 +181,7 @@ export default class DateFormatInput extends Component { } } - onKeyDown(event) { + onKeyDown (event) { const { props } = this let { key, type, which } = event @@ -208,7 +207,7 @@ export default class DateFormatInput extends Component { let currentPosition = positions[range.start] - if (typeof currentPosition == 'string') { + if (typeof currentPosition === 'string') { currentPosition = positions[range.start + (key in BACKWARDS ? -1 : 1)] } @@ -296,22 +295,22 @@ export default class DateFormatInput extends Component { } } - getInput() { + getInput () { return findDOMNode(this) } - setCaretPosition(pos) { + setCaretPosition (pos) { const dom = this.getInput() if (dom) { setCaretPosition(dom, pos) } } - format(mom, format) { + format (mom, format) { return mom.format(format || this.props.dateFormat) } - setStateValue(value, callback, { key, oldValue, currentPosition }) { + setStateValue (value, callback, { key, oldValue, currentPosition }) { let dateMoment = this.toMoment(value) if (!dateMoment.isValid()) { @@ -322,16 +321,16 @@ export default class DateFormatInput extends Component { dateMoment = this.toMoment(oldValue).add(dir, 'month') } else { // updating the day - dateMoment = dir > 0 ? + dateMoment = dir > 0 // we've gone with +1 beyond max, so reset to 1 - this.toMoment(oldValue).date(1) : + ? this.toMoment(oldValue).date(1) // we've gone with -1 beyond max, so reset to max of month - this.toMoment(oldValue).endOf('month') + : this.toMoment(oldValue).endOf('month') } if (!dateMoment.isValid()) { - return; + return } value = this.format(dateMoment) @@ -367,7 +366,7 @@ export default class DateFormatInput extends Component { this.setState({ value, propsValue: false - }, typeof callback == 'function' && callback) + }, typeof callback === 'function' && callback) // if (this.props.value !== undefined) { if (this.props.onChange) { @@ -375,7 +374,7 @@ export default class DateFormatInput extends Component { } } - setValue(value, dateMoment) { + setValue (value, dateMoment) { if (this.props.value === undefined) { this.setState({ value, @@ -393,7 +392,7 @@ export default class DateFormatInput extends Component { } } - getSelectedRange() { + getSelectedRange () { const dom = this.getInput() return { @@ -402,7 +401,7 @@ export default class DateFormatInput extends Component { } } - getSelectedValue(range) { + getSelectedValue (range) { range = range || this.getSelectedRange() const value = this.displayValue diff --git a/src/DateFormatInput/parseFormat.js b/src/DateFormatInput/parseFormat.js index adc5181..b6973ac 100644 --- a/src/DateFormatInput/parseFormat.js +++ b/src/DateFormatInput/parseFormat.js @@ -61,7 +61,7 @@ export default (format) => { } index++ matches.push(matchObject) - continue; // to skip incrementing twice + continue // to skip incrementing twice } } else { matchObject = assign({}, FORMATS[suggestionMatch], { @@ -77,7 +77,7 @@ export default (format) => { positionIndex++ index++ } - continue; // to skip incrementing index once more + continue // to skip incrementing index once more } } diff --git a/src/DateFormatInput/toUpperFirst.js b/src/DateFormatInput/toUpperFirst.js index ed5190e..4cea118 100644 --- a/src/DateFormatInput/toUpperFirst.js +++ b/src/DateFormatInput/toUpperFirst.js @@ -1,5 +1,5 @@ export default (str) => { - return str? - str.charAt(0).toUpperCase() + str.substr(1): - '' + return str + ? str.charAt(0).toUpperCase() + str.substr(1) + : '' } diff --git a/src/DateFormatSpinnerInput/index.js b/src/DateFormatSpinnerInput/index.js index c6fdece..7861ac5 100644 --- a/src/DateFormatSpinnerInput/index.js +++ b/src/DateFormatSpinnerInput/index.js @@ -1,7 +1,7 @@ import React from 'react' -import Component from 'react-class' +import Component from '@zippytech/react-class' -import { Flex, Item } from 'react-flex' +import { Flex, Item } from '@zippytech/react-flex' import DateFormatInput from '../DateFormatInput' import assign from 'object-assign' @@ -10,8 +10,7 @@ import assignDefined from '../assignDefined' import join from '../join' export default class DateFormatSpinnerInput extends Component { - - constructor(props) { + constructor (props) { super(props) this.state = { @@ -19,11 +18,11 @@ export default class DateFormatSpinnerInput extends Component { } } - componentWillUnmount() { + componentWillUnmount () { this.started = false } - render() { + render () { const props = this.props const children = React.Children.toArray(props.children) @@ -60,14 +59,14 @@ export default class DateFormatSpinnerInput extends Component { const arrowSize = this.props.arrowSize this.arrows = { - 1: - - {/**/} + 1: + + {/* */} , - '-1': - - {/**/} + '-1': + + {/* */} } @@ -94,7 +93,7 @@ export default class DateFormatSpinnerInput extends Component { } - renderArrows() { + renderArrows () { if (this.props.renderArrows) { return this.props.renderArrows(this.props) } @@ -108,10 +107,10 @@ export default class DateFormatSpinnerInput extends Component { } - renderArrow(dir) { + renderArrow (dir) { return } - onMouseDown(dir, event) { + onMouseDown (dir, event) { if (this.props.disabled) { event.preventDefault() return @@ -139,7 +138,7 @@ export default class DateFormatSpinnerInput extends Component { } } - start(dir) { + start (dir) { this.started = true this.startTime = Date.now() @@ -159,19 +158,19 @@ export default class DateFormatSpinnerInput extends Component { }, this.props.firstStepDelay) } - isStarted() { + isStarted () { return !!(this.started && this.input) } - increment(dir) { + increment (dir) { this.input.onDirection(dir) } - step(dir, callback, delay) { + step (dir, callback, delay) { if (this.isStarted()) { this.increment(dir) - if (typeof callback == 'function') { + if (typeof callback === 'function') { this.timeoutId = setTimeout(() => { if (this.isStarted()) { callback() @@ -181,24 +180,24 @@ export default class DateFormatSpinnerInput extends Component { } } - stop() { + stop () { this.started = false if (this.timeoutId) { global.clearTimeout(this.timeoutId) } } - focus() { + focus () { if (this.input) { this.input.focus() } } - isFocused() { + isFocused () { return this.state.focused } - onBlur(event) { + onBlur (event) { const { props } = this const onBlur = joinFunctions( props.onBlur, @@ -214,7 +213,7 @@ export default class DateFormatSpinnerInput extends Component { }) } - onFocus(event) { + onFocus (event) { const { props } = this const onFocus = joinFunctions( props.onFocus, diff --git a/src/DecadeView.js b/src/DecadeView.js index 1e9b3cb..befd60c 100644 --- a/src/DecadeView.js +++ b/src/DecadeView.js @@ -1,9 +1,9 @@ import React from 'react' import { findDOMNode } from 'react-dom' -import Component from 'react-class' +import Component from '@zippytech/react-class' import assign from 'object-assign' -import { Flex, Item } from 'react-flex' +import { Flex, Item } from '@zippytech/react-flex' import moment from 'moment' import times from './utils/times' @@ -14,14 +14,14 @@ import bemFactory from './bemFactory' const bem = bemFactory('react-date-picker__decade-view') const ARROWS = { - prev: - - + prev: + + , - next: - - + next: + + } @@ -38,28 +38,28 @@ const getDecadeEndYear = (mom) => { } const NAV_KEYS = { - ArrowUp(mom) { + ArrowUp (mom) { return mom.add(-5, 'year') }, - ArrowDown(mom) { + ArrowDown (mom) { return mom.add(5, 'year') }, - ArrowLeft(mom) { + ArrowLeft (mom) { return mom.add(-1, 'year') }, - ArrowRight(mom) { + ArrowRight (mom) { return mom.add(1, 'year') }, - Home(mom) { + Home (mom) { return mom.set('year', getDecadeStartYear(mom)) }, - End(mom) { + End (mom) { return mom.set('year', getDecadeEndYear(mom)) }, - PageUp(mom) { + PageUp (mom) { return mom.add(-10, 'year') }, - PageDown(mom) { + PageDown (mom) { return mom.add(10, 'year') } } @@ -175,7 +175,7 @@ const navigate = function (direction, event) { const getNavigationDate = (dir, date, dateFormat) => { const mom = moment.isMoment(date) ? date : this.toMoment(date, dateFormat) - if (typeof dir == 'function') { + if (typeof dir === 'function') { return dir(mom) } @@ -207,15 +207,15 @@ const gotoViewDate = function ({ dateMoment, timestamp }) { } const prepareDate = function (props, state) { - return props.date === undefined ? - state.date : - props.date + return props.date === undefined + ? state.date + : props.date } const prepareViewDate = function (props, state) { - const viewDate = props.viewDate === undefined ? - state.viewDate : - props.viewDate + const viewDate = props.viewDate === undefined + ? state.viewDate + : props.viewDate if (!viewDate && props.date) { return props.date @@ -225,9 +225,9 @@ const prepareViewDate = function (props, state) { } const prepareActiveDate = function (props, state) { - const activeDate = props.activeDate === undefined ? - state.activeDate || prepareDate(props, state) : - props.activeDate + const activeDate = props.activeDate === undefined + ? state.activeDate || prepareDate(props, state) + : props.activeDate return activeDate } @@ -320,14 +320,13 @@ const getInitialState = (props) => { } export default class DecadeView extends Component { - - constructor(props) { + constructor (props) { super(props) this.state = getInitialState(props) } - getYearsInDecade(value) { + getYearsInDecade (value) { const year = getDecadeStartYear(this.toMoment(value)) const start = this.toMoment(`${year}`, 'YYYY').startOf('year') @@ -337,11 +336,11 @@ export default class DecadeView extends Component { }) } - toMoment(date, format) { + toMoment (date, format) { return toMoment(date, format, this.props) } - render() { + render () { const props = this.p = assign({}, this.props) if (props.onlyCompareYear) { @@ -370,7 +369,7 @@ export default class DecadeView extends Component { children = [ this.renderNav(-1), - , + , this.renderNav(1) ] } @@ -400,7 +399,7 @@ export default class DecadeView extends Component { delete flexProps.viewDate delete flexProps.yearFormat - if (typeof props.cleanup == 'function') { + if (typeof props.cleanup === 'function') { props.cleanup(flexProps) } @@ -416,15 +415,15 @@ export default class DecadeView extends Component { /> } - renderNav(dir) { + renderNav (dir) { const props = this.p const name = dir == -1 ? 'prev' : 'next' const navMoment = this.toMoment(props.viewMoment).add(dir * 10, 'year') - const disabled = dir == -1 ? - props.minDateMoment && getDecadeEndYear(navMoment) < getDecadeEndYear(props.minDateMoment) : - props.maxDateMoment && getDecadeEndYear(navMoment) > getDecadeEndYear(props.maxDateMoment) + const disabled = dir == -1 + ? props.minDateMoment && getDecadeEndYear(navMoment) < getDecadeEndYear(props.minDateMoment) + : props.maxDateMoment && getDecadeEndYear(navMoment) > getDecadeEndYear(props.maxDateMoment) const className = join( bem('arrow'), @@ -448,7 +447,7 @@ export default class DecadeView extends Component { return
} - renderYears(props, years) { + renderYears (props, years) { const nodes = years.map(this.renderYear) const perRow = props.perRow @@ -457,30 +456,30 @@ export default class DecadeView extends Component { }) return buckets.map((bucket, i) => {bucket} ) } - renderYear(dateMoment) { + renderYear (dateMoment) { const props = this.p const yearText = this.format(dateMoment) const timestamp = +dateMoment - const isActiveDate = props.onlyCompareYear && props.activeMoment ? - dateMoment.get('year') == props.activeMoment.get('year') : - timestamp === props.activeDate + const isActiveDate = props.onlyCompareYear && props.activeMoment + ? dateMoment.get('year') == props.activeMoment.get('year') + : timestamp === props.activeDate - const isValue = props.onlyCompareYear && props.moment ? - dateMoment.get('year') == props.moment.get('year') : - timestamp === props.timestamp + const isValue = props.onlyCompareYear && props.moment + ? dateMoment.get('year') == props.moment.get('year') + : timestamp === props.timestamp const className = join( bem('year'), @@ -504,13 +503,13 @@ export default class DecadeView extends Component { } - format(mom, format) { + format (mom, format) { format = format || this.props.yearFormat return mom.format(format) } - handleClick({ timestamp, dateMoment }, event) { + handleClick ({ timestamp, dateMoment }, event) { event.target.value = timestamp const props = this.p @@ -525,39 +524,39 @@ export default class DecadeView extends Component { this.select({ dateMoment, timestamp }, event) } - onKeyDown(event) { + onKeyDown (event) { return ON_KEY_DOWN.call(this, event) } - confirm(date, event) { + confirm (date, event) { return confirm.call(this, date, event) } - navigate(direction, event) { + navigate (direction, event) { return navigate.call(this, direction, event) } - select({ dateMoment, timestamp }, event) { + select ({ dateMoment, timestamp }, event) { return select.call(this, { dateMoment, timestamp }, event) } - onViewDateChange({ dateMoment, timestamp }) { + onViewDateChange ({ dateMoment, timestamp }) { return onViewDateChange.call(this, { dateMoment, timestamp }) } - gotoViewDate({ dateMoment, timestamp }) { + gotoViewDate ({ dateMoment, timestamp }) { return gotoViewDate.call(this, { dateMoment, timestamp }) } - onActiveDateChange({ dateMoment, timestamp }) { + onActiveDateChange ({ dateMoment, timestamp }) { return onActiveDateChange.call(this, { dateMoment, timestamp }) } - onChange({ dateMoment, timestamp }, event) { + onChange ({ dateMoment, timestamp }, event) { return onChange.call(this, { dateMoment, timestamp }, event) } - focus() { + focus () { findDOMNode(this).focus() } } diff --git a/src/Footer.js b/src/Footer.js index 40f84ad..7af3f27 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -1,8 +1,7 @@ import React, { PropTypes } from 'react' -import Component from 'react-class' +import Component from '@zippytech/react-class' -import { Flex, Item } from 'react-flex' -import InlineBlock from 'react-inline-block' +import { Flex, Item } from '@zippytech/react-flex' import assign from 'object-assign' @@ -19,9 +18,9 @@ const buttonClassName = 'react-date-picker__footer-button' const preventDefault = e => e.preventDefault() export const Button = (props) => { - const disabledClassName = props.disabled ? - `${buttonClassName}--disabled` : - '' + const disabledClassName = props.disabled + ? `${buttonClassName}--disabled` + : '' const className = `${props.className || ''} ${buttonClassName} ${disabledClassName}` return