├── stubs └── .gitkeep ├── resources ├── dist │ ├── .gitkeep │ └── themes │ │ ├── dark.css │ │ ├── light.css │ │ ├── confetti.css │ │ ├── material_blue.css │ │ ├── material_green.css │ │ ├── material_orange.css │ │ └── material_red.css ├── js │ ├── index.js │ └── components │ │ └── flatpickr.js ├── views │ ├── .gitkeep │ └── forms │ │ └── components │ │ └── flatpickr.blade.php ├── lang │ └── en │ │ └── flatpickr.php └── css │ ├── index.css │ └── filament-theme.css ├── CHANGELOG.md ├── postcss.config.cjs ├── config └── flatpickr.php ├── src ├── Testing │ └── TestsFlatpickr.php ├── Enums │ ├── FlatpickrMonthSelectorType.php │ ├── FlatpickrMode.php │ ├── FlatpickrPosition.php │ └── FlatpickrTheme.php ├── Facades │ └── FilamentFlatpickr.php ├── Commands │ └── FlatpickrCommand.php ├── FilamentFlatpickr.php └── FlatpickrServiceProvider.php ├── LICENSE.md ├── composer.json ├── bin └── build.js └── README.md /stubs/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/dist/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/js/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/views/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/lang/en/flatpickr.php: -------------------------------------------------------------------------------- 1 | \Coolsam\Flatpickr\Enums\FlatpickrTheme::DEFAULT, // Recommended: Use DEFAULT theme for better compatibility with Filament Styling and dark mode 5 | ]; 6 | -------------------------------------------------------------------------------- /src/Testing/TestsFlatpickr.php: -------------------------------------------------------------------------------- 1 | comment('All done'); 16 | 17 | return self::SUCCESS; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/Enums/FlatpickrPosition.php: -------------------------------------------------------------------------------- 1 | value; 21 | 22 | try { 23 | return asset("vendor/flatpickr/themes/{$assetName}.css"); 24 | } catch (\Exception $e) { 25 | return ''; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) coolsam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coolsam/flatpickr", 3 | "description": "Flatpickr input for Filamentphp", 4 | "keywords": [ 5 | "coolsam", 6 | "laravel", 7 | "flatpickr" 8 | ], 9 | "homepage": "https://github.com/coolsam/flatpickr", 10 | "support": { 11 | "issues": "https://github.com/coolsam/flatpickr/issues", 12 | "source": "https://github.com/coolsam/flatpickr" 13 | }, 14 | "license": "MIT", 15 | "authors": [ 16 | { 17 | "name": "Sam Maosa", 18 | "email": "maosa.sam@gmail.com", 19 | "role": "Developer" 20 | } 21 | ], 22 | "require": { 23 | "php": "^8.2", 24 | "filament/filament": "^4.0", 25 | "spatie/laravel-package-tools": "^1.15.0" 26 | }, 27 | "require-dev": { 28 | "barryvdh/laravel-ide-helper": "^3.5", 29 | "laravel/pint": "^1.0", 30 | "nunomaduro/larastan": "^3.1.0", 31 | "orchestra/testbench": "^9.12", 32 | "pestphp/pest-plugin-laravel": "^3.1", 33 | "pestphp/pest-plugin-livewire": "^3.0", 34 | "phpstan/extension-installer": "^1.4.3", 35 | "spatie/laravel-ray": "^1.39" 36 | }, 37 | "autoload": { 38 | "psr-4": { 39 | "Coolsam\\Flatpickr\\": "src/", 40 | "Coolsam\\Flatpickr\\Database\\Factories\\": "database/factories/" 41 | } 42 | }, 43 | "autoload-dev": { 44 | "psr-4": { 45 | "Coolsam\\Flatpickr\\Tests\\": "tests/" 46 | } 47 | }, 48 | "scripts": { 49 | "post-autoload-dump": "@php ./vendor/bin/testbench package:discover --ansi", 50 | "analyse": "vendor/bin/phpstan analyse", 51 | "test": "vendor/bin/pest", 52 | "test-coverage": "vendor/bin/pest --coverage", 53 | "format": "vendor/bin/pint" 54 | }, 55 | "config": { 56 | "sort-packages": true, 57 | "allow-plugins": { 58 | "pestphp/pest-plugin": true, 59 | "phpstan/extension-installer": true 60 | } 61 | }, 62 | "extra": { 63 | "laravel": { 64 | "providers": [ 65 | "Coolsam\\Flatpickr\\FlatpickrServiceProvider" 66 | ], 67 | "aliases": { 68 | "Flatpickr": "FilamentFlatpickr" 69 | } 70 | } 71 | }, 72 | "minimum-stability": "dev", 73 | "prefer-stable": true 74 | } 75 | -------------------------------------------------------------------------------- /bin/build.js: -------------------------------------------------------------------------------- 1 | import esbuild from 'esbuild' 2 | import fs from 'fs' 3 | import path from 'path' 4 | 5 | const isDev = process.argv.includes('--dev') 6 | 7 | async function compile(options) { 8 | const context = await esbuild.context(options) 9 | 10 | if (isDev) { 11 | await context.watch() 12 | } else { 13 | await context.rebuild() 14 | await context.dispose() 15 | } 16 | } 17 | 18 | const defaultOptions = { 19 | define: { 20 | 'process.env.NODE_ENV': isDev ? `'development'` : `'production'`, 21 | }, 22 | bundle: true, 23 | mainFields: ['module', 'main'], 24 | platform: 'neutral', 25 | sourcemap: isDev ? 'inline' : false, 26 | sourcesContent: isDev, 27 | treeShaking: true, 28 | target: ['es2020'], 29 | minify: !isDev, 30 | plugins: [{ 31 | name: 'watchPlugin', 32 | setup: function (build) { 33 | build.onStart(() => { 34 | console.log(`Build started at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`) 35 | }) 36 | 37 | build.onEnd((result) => { 38 | if (result.errors.length > 0) { 39 | console.log(`Build failed at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`, result.errors) 40 | } else { 41 | console.log(`Build finished at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`) 42 | } 43 | 44 | console.log('Copying assets from node modules to dist folder') 45 | const sourceDir = './node_modules/flatpickr/dist/themes' 46 | const destDir = './resources/dist/themes' 47 | 48 | // Ensure the destination directory exists 49 | fs.mkdirSync(destDir, { recursive: true }) 50 | 51 | // Copy all theme files 52 | fs.readdirSync(sourceDir).forEach((file) => { 53 | const sourceFile = path.join(sourceDir, file) 54 | const destFile = path.join(destDir, file) 55 | 56 | fs.copyFileSync(sourceFile, destFile) 57 | console.log(`Copied: ${file}`) 58 | }) 59 | 60 | console.log('All theme assets have been copied successfully.') 61 | }) 62 | } 63 | }], 64 | } 65 | 66 | compile({ 67 | ...defaultOptions, 68 | entryPoints: ['./resources/js/components/flatpickr.js'], 69 | outfile: './resources/dist/components/flatpickr.js', 70 | }) 71 | -------------------------------------------------------------------------------- /resources/js/components/flatpickr.js: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs/esm' 2 | import advancedFormat from 'dayjs/plugin/advancedFormat' 3 | import customParseFormat from 'dayjs/plugin/customParseFormat' 4 | import localeData from 'dayjs/plugin/localeData' 5 | import timezone from 'dayjs/plugin/timezone' 6 | import utc from 'dayjs/plugin/utc' 7 | import flatpickr from 'flatpickr' 8 | import flatpickrLocales from "flatpickr/dist/l10n" 9 | 10 | import ConfirmDate from "flatpickr/dist/esm/plugins/confirmDate/confirmDate.js" 11 | import MonthSelect from "flatpickr/dist/esm/plugins/monthSelect/index.js" 12 | import WeekSelect from "flatpickr/dist/esm/plugins/weekSelect/weekSelect.js" 13 | // import rangePlugin from 'flatpickr/dist/plugins/rangePlugin.js' 14 | 15 | dayjs.extend(advancedFormat) 16 | dayjs.extend(customParseFormat) 17 | dayjs.extend(localeData) 18 | dayjs.extend(timezone) 19 | dayjs.extend(utc) 20 | 21 | window.dayjs = dayjs 22 | 23 | export default function flatpickrComponent(state, attrs) { 24 | const timezone = dayjs.tz.guess() 25 | 26 | return { 27 | state, 28 | attrs, 29 | timezone, 30 | 31 | locale: String(attrs.locale), 32 | 33 | fp: null, 34 | 35 | init: function() { 36 | console.log('INit flatpickr', this.state, this.attrs) 37 | Livewire.on('attributes-updated', (props) => { 38 | console.log('Attributes updated', props) 39 | }) 40 | const customLocale = flatpickrLocales[this.locale] ?? flatpickrLocales['en']; 41 | const plugins = [ 42 | // new ConfirmDate({ 43 | // showAlways: false, 44 | // }), 45 | ]; 46 | if (this.attrs.monthPicker) { 47 | plugins.push(new MonthSelect({ 48 | shorthand: this.attrs.monthPickerShorthand || false, 49 | dateFormat: this.attrs.dateFormat || 'Y-m', 50 | altFormat: this.attrs.altFormat || 'F Y', 51 | })) 52 | } else if (this.attrs.weekPicker) { 53 | plugins.push(new WeekSelect({ 54 | })) 55 | } 56 | if (this.attrs.rangePicker) { 57 | // plugins.push(new rangePlugin({ 58 | // })) 59 | } 60 | const config = { 61 | disableMobile: true, 62 | initialDate: this.state, 63 | defaultDate: this.state, 64 | static: false, 65 | altInput: true, 66 | ...this.attrs, 67 | plugins, 68 | } 69 | dayjs.locale(locales[this.locale] ?? locales['en']) 70 | flatpickr.localize(customLocale) 71 | this.fp = flatpickr(this.$refs.input, config); 72 | this.fp.parseDate(this.state, this.fp.config.dateFormat); 73 | }, 74 | updateAttributes(attrs) { 75 | console.log('Update attributes', attrs) 76 | } 77 | } 78 | } 79 | 80 | const locales = { 81 | ar: require('dayjs/locale/ar'), 82 | bs: require('dayjs/locale/bs'), 83 | ca: require('dayjs/locale/ca'), 84 | ckb: require('dayjs/locale/ku'), 85 | cs: require('dayjs/locale/cs'), 86 | cy: require('dayjs/locale/cy'), 87 | da: require('dayjs/locale/da'), 88 | de: require('dayjs/locale/de'), 89 | en: require('dayjs/locale/en'), 90 | es: require('dayjs/locale/es'), 91 | et: require('dayjs/locale/et'), 92 | fa: require('dayjs/locale/fa'), 93 | fi: require('dayjs/locale/fi'), 94 | fr: require('dayjs/locale/fr'), 95 | hi: require('dayjs/locale/hi'), 96 | hu: require('dayjs/locale/hu'), 97 | hy: require('dayjs/locale/hy-am'), 98 | id: require('dayjs/locale/id'), 99 | it: require('dayjs/locale/it'), 100 | ja: require('dayjs/locale/ja'), 101 | ka: require('dayjs/locale/ka'), 102 | km: require('dayjs/locale/km'), 103 | ku: require('dayjs/locale/ku'), 104 | lt: require('dayjs/locale/lt'), 105 | lv: require('dayjs/locale/lv'), 106 | ms: require('dayjs/locale/ms'), 107 | my: require('dayjs/locale/my'), 108 | nl: require('dayjs/locale/nl'), 109 | no: require('dayjs/locale/nb'), 110 | pl: require('dayjs/locale/pl'), 111 | pt_BR: require('dayjs/locale/pt-br'), 112 | pt_PT: require('dayjs/locale/pt'), 113 | ro: require('dayjs/locale/ro'), 114 | ru: require('dayjs/locale/ru'), 115 | sv: require('dayjs/locale/sv'), 116 | th: require('dayjs/locale/th'), 117 | tr: require('dayjs/locale/tr'), 118 | uk: require('dayjs/locale/uk'), 119 | vi: require('dayjs/locale/vi'), 120 | zh_CN: require('dayjs/locale/zh-cn'), 121 | zh_TW: require('dayjs/locale/zh-tw'), 122 | } 123 | -------------------------------------------------------------------------------- /src/FlatpickrServiceProvider.php: -------------------------------------------------------------------------------- 1 | name(static::$name) 35 | ->hasCommands($this->getCommands()) 36 | ->hasInstallCommand(function (InstallCommand $command) { 37 | $command 38 | ->startWith(function (Command $command) { 39 | $command->alert('Installing Flatpickr...'); 40 | $command->comment('Publishing package assets...'); 41 | $overwriteAssets = $command->confirm(__('Do you want to overwrite the existing package assets if any?'), false); 42 | $assetPublish = [ 43 | '--tag' => 'flatpickr-assets', 44 | ]; 45 | if ($overwriteAssets) { 46 | $assetPublish['--force'] = true; 47 | } 48 | Artisan::call('vendor:publish', $assetPublish); 49 | $command->info('Done.'); 50 | $command->comment('Publishing package config file...'); 51 | $overwriteConfig = $command->confirm(__('Do you want to overwrite the package config file if existing?'), false); 52 | $configPublish = [ 53 | '--tag' => 'flatpickr-config', 54 | ]; 55 | if ($overwriteConfig) { 56 | $configPublish['--force'] = true; 57 | } 58 | Artisan::call('vendor:publish', $configPublish); 59 | }) 60 | ->askToStarRepoOnGitHub('coolsam726/flatpickr'); 61 | }); 62 | 63 | $configFileName = $package->shortName(); 64 | 65 | if (file_exists($package->basePath("/../config/{$configFileName}.php"))) { 66 | $package->hasConfigFile(); 67 | } 68 | 69 | if (file_exists($package->basePath('/../database/migrations'))) { 70 | $package->hasMigrations($this->getMigrations()); 71 | } 72 | 73 | if (file_exists($package->basePath('/../resources/lang'))) { 74 | $package->hasTranslations(); 75 | } 76 | 77 | if (file_exists($package->basePath('/../resources/views'))) { 78 | $package->hasViews(static::$viewNamespace); 79 | } 80 | } 81 | 82 | public function packageRegistered(): void {} 83 | 84 | public function packageBooted(): void 85 | { 86 | // Asset Registration 87 | FilamentAsset::register( 88 | $this->getAssets(), 89 | $this->getAssetPackageName() 90 | ); 91 | 92 | $this->publishes([ 93 | __DIR__ . '/../resources/dist' => public_path('vendor/flatpickr'), 94 | ], 'flatpickr-assets'); 95 | 96 | FilamentAsset::registerScriptData( 97 | $this->getScriptData(), 98 | $this->getAssetPackageName() 99 | ); 100 | 101 | // Icon Registration 102 | FilamentIcon::register($this->getIcons()); 103 | 104 | // Handle Stubs 105 | if (app()->runningInConsole()) { 106 | foreach (app(Filesystem::class)->files(__DIR__ . '/../stubs/') as $file) { 107 | $this->publishes([ 108 | $file->getRealPath() => base_path("stubs/flatpickr/{$file->getFilename()}"), 109 | ], 'flatpickr-stubs'); 110 | } 111 | } 112 | 113 | // Testing 114 | Testable::mixin(new TestsFlatpickr); 115 | } 116 | 117 | protected function getAssetPackageName(): ?string 118 | { 119 | return 'coolsam/flatpickr'; 120 | } 121 | 122 | /** 123 | * @return array 124 | */ 125 | protected function getAssets(): array 126 | { 127 | return [ 128 | AlpineComponent::make('flatpickr', __DIR__ . '/../resources/dist/components/flatpickr.js'), 129 | Css::make('flatpickr-styles', __DIR__ . '/../resources/dist/flatpickr.css'), 130 | // Js::make('flatpickr-scripts', __DIR__ . '/../resources/dist/flatpickr.js'), 131 | ]; 132 | } 133 | 134 | /** 135 | * @return array 136 | */ 137 | protected function getCommands(): array 138 | { 139 | return [ 140 | FlatpickrCommand::class, 141 | ]; 142 | } 143 | 144 | /** 145 | * @return array 146 | */ 147 | protected function getIcons(): array 148 | { 149 | return []; 150 | } 151 | 152 | /** 153 | * @return array 154 | */ 155 | protected function getRoutes(): array 156 | { 157 | return []; 158 | } 159 | 160 | /** 161 | * @return array 162 | */ 163 | protected function getScriptData(): array 164 | { 165 | return []; 166 | } 167 | 168 | /** 169 | * @return array 170 | */ 171 | protected function getMigrations(): array 172 | { 173 | return [ 174 | 'create_flatpickr_table', 175 | ]; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /resources/views/forms/components/flatpickr.blade.php: -------------------------------------------------------------------------------- 1 | @php 2 | use Filament\Support\Facades\FilamentView; 3 | 4 | $datalistOptions = $getDatalistOptions(); 5 | $extraAlpineAttributes = $getExtraAlpineAttributes(); 6 | $hasTime = $hasTime(); 7 | $id = $getId(); 8 | $isDisabled = $isDisabled(); 9 | $isPrefixInline = $isPrefixInline(); 10 | $isSuffixInline = $isSuffixInline(); 11 | $maxDate = $getMaxDate(); 12 | $minDate = $getMinDate(); 13 | $prefixActions = $getPrefixActions(); 14 | $prefixIcon = $getPrefixIcon(); 15 | $prefixLabel = $getPrefixLabel(); 16 | $suffixActions = $getSuffixActions(); 17 | $suffixIcon = $getSuffixIcon(); 18 | $suffixLabel = $getSuffixLabel(); 19 | $statePath = $getStatePath(); 20 | $attrs = $getFlatpickrAttributes(); 21 | 22 | @endphp 23 | 24 | 29 | 30 | 46 | @if ($isNative()) 47 | 70 | @else 71 |
merge($getExtraAttributes(), escape: false) 86 | ->merge($getExtraAlpineAttributes(), escape: false) 87 | ->class(['fi-fo-date-time-picker']) 88 | }} 89 | > 90 | 112 |
113 | @endif 114 | 115 | 116 | @if ($datalistOptions) 117 | 118 | @foreach ($datalistOptions as $option) 119 | 122 | @endif 123 | 124 | @script 125 | 130 | @endscript -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Tests 3 | Styling 4 | Laravel v12.x 5 | Filament v4.x 6 | Tailwind v4.x 7 | PHP 8.4 8 | Packagist 9 |

10 | 11 | Use **[Flatpickr](https://flatpickr.js.org/)** as your datepicker in the Filament Forms and Panels. 12 | ![image](https://github.com/user-attachments/assets/334ea64a-48c3-48bc-a640-72162802a646) 13 | 14 | 15 | ## Supported Versions 16 | | Package Version | Supported Filament Version(s) | 17 | |-----------------|-------------------------------| 18 | | v2.x | Filament v2 | 19 | | v4.x | Filament v3 | 20 | | v5.x | Filament v4 | 21 | 22 | ## Installation 23 | 24 | Install the package via composer: 25 | 26 | ```bash 27 | composer require coolsam/flatpickr 28 | ``` 29 | 30 | Run the installation command to publish the assets and config file: 31 | 32 | ```bash 33 | php artisan flatpickr:install 34 | ``` 35 | This will publish the config file to `config/flatpickr.php` and the assets to `public/vendor/flatpickr`. The command will also ask you if you would like to overwrite the existing assets and config files if they exist. 36 | If you choose to overwrite, the existing files will be replaced with the new ones. This is useful if you want to update the package to the latest version there have been changes to the config file or assets in the latest version. 37 | 38 | If you are upgrading from a previous version be sure to run the following to ensure assets are up to date 39 | ```bash 40 | php artisan filament:upgrade 41 | ``` 42 | 43 | ## Usage 44 | You can do a lot with just one Component: `Flatpickr` 45 | You can use the Flatpickr component from this package as: 46 | * DatePicker 47 | * TimePicker 48 | * DateTimePicker 49 | * Range Picker 50 | * Week Picker, 51 | * Multiple-Date Picker 52 | * Month Picker 53 | 54 | Most of the fluent config methods are similar to [Flatpickr's official](https://flatpickr.js.org/options/) options in naming. 55 | 56 | This package is also an extension of [Filament's DateTimePicker](https://filamentphp.com/docs/3.x/forms/fields/date-time-picker), so most of the methods are similar to the ones in the DateTimePicker component. You can use the Flatpickr component as a drop-in replacement for the DateTimePicker component. 57 | 58 | Here are some examples of the methods. Refer to Flatpickr's Official Documentation for details on each of the configurations. 59 | 60 | ```php 61 | use Coolsam\FilamentFlatpickr\Forms\Components\Flatpickr; 62 | 63 | // Basic, Date Field 64 | Flatpickr::make('test_field') // Minimal Config as a datepicker 65 | Flatpickr::make('test_field') 66 | ->allowInput() // Allow a user to manually input the date in the textbox (make the textbox editable) 67 | ->altInput(true) // Enable the use of Alternative Input (See Flatpickr docs) 68 | ->altFormat('F j, Y') // Alternative input format 69 | ->time(true) // Turn this into a DateTimePicker 70 | ->disabledDates(['2023-07-25','2023-07-26']) // Disable specific dates from being selected. 71 | ->minDate(fn() => today()->startOfYear()) // Set the minimum allowed date 72 | ->maxDate(fn() => today()) // Set the maximum allowed date. 73 | ->hourIncrement(1) // Intervals of incrementing hours in a time picker 74 | ->minuteIncrement(10) // Intervals of minute increment in a time picker 75 | ->seconds(false) // Enable seconds in a time picker 76 | ->defaultSeconds(0) //Initial value of the seconds element, when no date is selected 77 | ->defaultMinute(0) // Initial value of the minutes element, when no date is selected 78 | ->allowInvalidPreload() // Initially check if the selected date is valid 79 | ->altInputClass('sample-class') // Add a css class for the alt input format 80 | ->format('Y-m-d') // Set the main date format 81 | ->ariaDateFormat('Y-m-d') // Aria 82 | ->clickOpens(true) // Open the datepicker when the input is clicked. 83 | ->closeOnSelect(true) // Close the datepicker once the date is selected. 84 | ->conjunction(',') // Applicable only for the MultiDatePicker: Separate inputs using this conjunction. The package will use this conjunction to explode the inputs to an array. 85 | ->inline(true) // Display the datepicker inline with the input, instead of using a popover. 86 | ->disableMobile(true) // Disable mobile-version of the datepicker on mobile devices. 87 | ->mode(\Coolsam\FilamentFlatpickr\Enums\FlatpickrMode::RANGE) // Set the mode as single, range or multiple. Alternatively, you can just use ->range() or ->multiple() 88 | ->monthSelectorType(\Coolsam\FilamentFlatpickr\Enums\FlatpickrMonthSelectorType::DROPDOWN) 89 | ->shorthandCurrentMonth(true) 90 | ->noCalendar(true) // use this in conjunction with `time()` to have a timePicker 91 | ->position(\Coolsam\FilamentFlatpickr\Enums\FlatpickrPosition::AUTO_CENTER) 92 | ->showMonths(1) 93 | ->weekNumbers(true) 94 | ->time24hr(true) 95 | ->timePicker() // Configure a timepicker out of the box 96 | ->weekPicker() // configure a week picker out of the box 97 | ->monthPicker() // configure a month picker out of the box 98 | ->rangePicker() // configure a date range picker out of the box 99 | ->multiplePicker() // Configure a multiple date picker out of the box 100 | ; 101 | ``` 102 | 103 | ## Examples 104 | ```php 105 | // You can also use the component as a DateTimePicker, Range Picker, Week Picker, Month Picker, TimePicker and Multiple Date Picker 106 | \Coolsam\Flatpickr\Forms\Components\Flatpickr::make('start_time')->timePicker(), 107 | \Coolsam\Flatpickr\Forms\Components\Flatpickr::make('week_number')->weekPicker()->format('W Y'), 108 | \Coolsam\Flatpickr\Forms\Components\Flatpickr::make('month')->monthPicker()->format('Y-m')->displayFormat('F Y'), 109 | \Coolsam\Flatpickr\Forms\Components\Flatpickr::make('range')->rangePicker(), 110 | \Coolsam\Flatpickr\Forms\Components\Flatpickr::make('occupied_slots')->multiplePicker()->format('Y-m-d')->displayFormat('F j, Y'), 111 | ``` 112 | 113 | ## Flatpickr Themes (See [Flatpickr Docs](https://flatpickr.js.org/themes/) for more Details) 114 | > **Note:** I highly recommend that you use the DEFAULT theme, which is styled using tailwind to conform to the filament design system. The other themes come with the flatpickr javascript package and may not conform to your Filament themeing, including dark mode. 115 | 116 | You can set the package's theme globally under the `theme` config in the `config/flatpickr.php` file. The config accepts a `\Coolsam\Flatpickr\Enums\FlatpickrTheme` enum value. 117 | The `\Coolsam\Flatpickr\Enums\FlatpickrTheme::DEFAULT` theme is already set by default and conforms to the filament design system. 118 | 119 | ```php 120 | use Coolsam\FilamentFlatpickr\Enums\FlatpickrTheme; 121 | return [ 122 | 'theme' => FlatpickrTheme::AIRBNB, 123 | ]; 124 | ``` 125 | See the screenshots below for the different themes. 126 | 127 | ## State Types 128 | The package supports the following state types: 129 | - `string` or `CarbonInterface` for DateTimePicker, DatePicker, TimePicker, WeekPicker, MonthPicker 130 | - `array` for RangePicker, MultiplePicker (an array of date strings or CarbonInterface instances) 131 | 132 | ## Screenshots 133 | ### Single Date Picker 134 | ![image](https://github.com/user-attachments/assets/015ae745-96bd-4b5a-990a-11bba852aa14) 135 | 136 | ### Multiple Date Picker 137 | ![image](https://github.com/user-attachments/assets/d896aa05-7907-4957-8d46-1d51d1393b91) 138 | 139 | ### Date Range Picker 140 | ![image](https://github.com/user-attachments/assets/3bcac5ad-5bfc-4a33-a320-3027c1e6a086) 141 | 142 | ### Date-Time Picker 143 | ![image](https://github.com/user-attachments/assets/1529a743-1c03-46b9-b0f5-0076e0a6b7e3) 144 | 145 | ### Time-Only Picker 146 | ![image](https://github.com/user-attachments/assets/f6bab802-6d9a-468e-a6fc-b8fd74454656) 147 | 148 | ### Show Multiple Months 149 | ![image](https://github.com/user-attachments/assets/0ea2e9f2-22df-45d3-a3d1-6430f283e6e0) 150 | 151 | ### Week Picker 152 | ![image](https://github.com/user-attachments/assets/ea648d29-1bc2-46b7-9d82-301f500fab78) 153 | 154 | ### Month Picker 155 | ![image](https://github.com/user-attachments/assets/e542c3d7-08ac-411d-874b-7ae0718ea000) 156 | 157 | ### Flatpickr Themes 158 | 159 | **DEFAULT** 160 | 161 | ![image](https://github.com/user-attachments/assets/ee615ae7-9956-45d6-a4d1-48054babf16c) 162 | 163 | **AIRBNB** 164 | 165 | ![image](https://github.com/user-attachments/assets/6ec6e97d-e8ce-4d93-b27b-21fcead8d644) 166 | 167 | **LIGHT** 168 | 169 | ![image](https://github.com/user-attachments/assets/fa190cb6-1bb4-4175-8733-bf261350c29c) 170 | 171 | **DARK** 172 | 173 | ![image](https://github.com/user-attachments/assets/ddd59f71-5fdc-469f-91be-37e7c4e67fb9) 174 | 175 | **CONFETTI** 176 | 177 | ![image](https://github.com/user-attachments/assets/2c76e329-678c-4443-ab42-ab4fd7230320) 178 | 179 | **MATERIAL_BLUE** 180 | 181 | ![image](https://github.com/user-attachments/assets/db5074f8-22ad-493d-84e1-8e505f0c55be) 182 | 183 | **MATERIAL_GREEN** 184 | 185 | ![image](https://github.com/user-attachments/assets/9d843720-4ef0-4768-ad71-1975a94922e0) 186 | 187 | **MATERIAL_ORANGE** 188 | 189 | ![image](https://github.com/user-attachments/assets/74021b21-2244-448b-8177-04e888db82c9) 190 | 191 | **MATERIAL_RED** 192 | 193 | ![image](https://github.com/user-attachments/assets/936fbdc7-f73a-437d-88e4-c333a193a72b) 194 | 195 | ## Testing 196 | 197 | ```bash 198 | composer test 199 | ``` 200 | 201 | ## Changelog 202 | 203 | Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. 204 | 205 | ## Contributing 206 | 207 | Please see [CONTRIBUTING](https://github.com/savannabits/.github/blob/main/CONTRIBUTING.md) for details. 208 | 209 | ## Security Vulnerabilities 210 | 211 | Please review [our security policy](../../security/policy) on how to report security vulnerabilities. 212 | 213 | ## Credits 214 | 215 | - [Savannabits](https://github.com/savannabits) 216 | - [All Contributors](../../contributors) 217 | 218 | ## License 219 | 220 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 221 | -------------------------------------------------------------------------------- /resources/css/filament-theme.css: -------------------------------------------------------------------------------- 1 | @import '../../vendor/filament/filament/resources/css/theme.css'; 2 | 3 | @source '../../src/**/*'; 4 | @source '../../resources/views/**/*'; 5 | @source '../../vendor/filament/**/*'; 6 | 7 | :root { 8 | --flatpickr-padding-y: 0.5rem; 9 | --flatpickr-padding-x: 0rem; 10 | --flatpickr-width: 300px; 11 | --flatpickr-width-week-numbers: 300px; 12 | --flatpickr-day-height: 36px; 13 | --flatpickr-day-width: 100%; 14 | --flatpickr-time-height: 46px; 15 | --dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); 16 | --dropdown-border-radius: 0.25rem; 17 | --border-radius: 10px; 18 | --component-hover-bg: #f8f9fa; 19 | --body-bg: #fff; 20 | --component-hover-color: #212529; 21 | } 22 | 23 | .flatpickr-calendar { 24 | max-width: 100%; 25 | min-width: var(--flatpickr-width) !important; 26 | font-family: inherit; 27 | border: 0; 28 | 29 | box-shadow: var(--dropdown-box-shadow); 30 | background-color: var(--body-bg); 31 | border-radius: var(--dropdown-border-radius); 32 | @apply bg-white rounded-xl mt-1 dark:bg-gray-700 dark:text-primary-50; 33 | 34 | &:before, 35 | &:after { 36 | display: none; 37 | } 38 | &.hasWeeks { 39 | width: var(--flatpickr-width-week-numbers) !important; 40 | } 41 | } 42 | 43 | /* Months container*/ 44 | .flatpickr-months { 45 | padding: 0 var(--flatpickr-padding-x); 46 | padding-top: var(--flatpickr-padding-y); 47 | } 48 | 49 | /*// Inner container*/ 50 | .flatpickr-innerContainer { 51 | padding: var(--flatpickr-padding-y) var(--flatpickr-padding-x); 52 | } 53 | 54 | /*// Day containers*/ 55 | .flatpickr-days { 56 | position: relative; 57 | overflow: hidden; 58 | display: -webkit-box; 59 | display: -webkit-flex; 60 | display: -ms-flexbox; 61 | display: flex; 62 | -webkit-box-align: start; 63 | -webkit-align-items: flex-start; 64 | -ms-flex-align: start; 65 | align-items: flex-start; 66 | justify-content: flex-start; 67 | width: 100%; 68 | @apply border-l border-r border-gray-50 dark:border-gray-500; 69 | } 70 | 71 | /*// Months*/ 72 | .flatpickr-months { 73 | .flatpickr-month { 74 | background: transparent; 75 | color: slategray; 76 | fill: slategray; 77 | height: 46px; 78 | } 79 | 80 | .flatpickr-prev-month, 81 | .flatpickr-next-month { 82 | display: flex; 83 | align-items: center; 84 | justify-content: center; 85 | border-radius: var(--border-radius); 86 | top: 1rem; 87 | @apply bg-primary-50 text-primary-500 dark:bg-gray-700 dark:text-primary-50 88 | hover:bg-primary-100 dark:hover:bg-gray-800 hover:text-primary-500 dark:hover:text-primary-100; 89 | 90 | svg { 91 | @apply fill-gray-900 dark:fill-gray-50 hover:fill-primary-500; 92 | height: 13px; 93 | width: 13px; 94 | } 95 | } 96 | 97 | .flatpickr-prev-month.flatpickr-prev-month, 98 | .flatpickr-next-month.flatpickr-prev-month { 99 | /*rtl:begin:ignore*/ 100 | left: var(--flatpickr-padding-x); 101 | /*rtl:end:ignore*/ 102 | } 103 | 104 | .flatpickr-prev-month.flatpickr-next-month, 105 | .flatpickr-next-month.flatpickr-next-month { 106 | /*rtl:begin:ignore*/ 107 | right: var(--flatpickr-padding-x); 108 | /*rtl:end:ignore*/ 109 | } 110 | } 111 | 112 | /*// Month selector*/ 113 | .flatpickr-current-month { 114 | @apply font-bold; 115 | color: inherit; 116 | 117 | .numInputWrapper { 118 | @apply rounded-2xl; 119 | width: 65px; 120 | 121 | span { 122 | &.arrowUp { 123 | @apply rounded-tr-2xl; 124 | } 125 | 126 | &.arrowDown { 127 | @apply rounded-br-2xl; 128 | } 129 | } 130 | } 131 | 132 | .flatpickr-monthDropdown-months { 133 | border: 0 !important; 134 | @apply bg-white dark:bg-gray-700; 135 | font-size: 1rem; 136 | @apply text-gray-800 dark:text-gray-50 hover:bg-gray-100 dark:hover:bg-gray-900; 137 | padding: 0.5rem 0.75rem; 138 | margin-right: 0.5rem; 139 | outline: none !important; 140 | appearance: none; 141 | -moz-appearance: none; 142 | -webkit-appearance: none; 143 | 144 | .flatpickr-monthDropdown-month { 145 | font-size: 1rem; 146 | @apply text-gray-800 dark:text-gray-100; 147 | background-color: transparent; 148 | outline: none; 149 | padding: 0; 150 | } 151 | } 152 | 153 | span.cur-month { 154 | @apply bg-white p-0.5 rounded text-gray-800 dark:bg-gray-700 dark:text-gray-50 font-bold; 155 | font-size: 1rem; 156 | } 157 | 158 | input.cur-year { 159 | font-size: 1.1rem; 160 | padding: 0.5rem 0.75rem !important; 161 | outline: 0 !important; 162 | @apply text-gray-800 dark:text-gray-100 font-semibold text-sm p-0.5; 163 | } 164 | } 165 | 166 | /*// Week days*/ 167 | span.flatpickr-weekday { 168 | font-size: 1rem; 169 | @apply text-gray-700 font-semibold dark:text-gray-50; 170 | } 171 | 172 | /*// Time*/ 173 | .flatpickr-time { 174 | @apply rounded-b-[var(--border-radius)]; 175 | 176 | .flatpickr-calendar.hasTime & { 177 | height: var(--flatpickr-time-height); 178 | line-height: var(--flatpickr-time-height); 179 | max-height: var(--flatpickr-time-height); 180 | border-top: 1px solid; 181 | @apply border-t-gray-100; 182 | } 183 | 184 | .numInputWrapper { 185 | height: var(--flatpickr-time-height); 186 | } 187 | 188 | .flatpickr-am-pm { 189 | @apply text-gray-800 dark:text-gray-50 selection:bg-primary-500 dark:selection:bg-primary-500 font-bold; 190 | font-size: 1rem; 191 | } 192 | .flatpickr-time-separator { 193 | @apply after:ring-primary-500 dark:after:ring-primary-500 after:border-primary-500 dark:after:border-primary-500; 194 | } 195 | 196 | input { 197 | &.flatpickr-hour, 198 | &.flatpickr-minute, 199 | &.flatpickr-second { 200 | @apply text-gray-800 focus:border-primary-500 dark:text-gray-50 selection:bg-primary-500 dark:selection:bg-primary-500 font-bold; 201 | font-size: 1rem; 202 | } 203 | } 204 | 205 | input:hover, 206 | .flatpickr-am-pm:hover, 207 | input:focus, 208 | .flatpickr-am-pm:focus { 209 | background: transparent; 210 | } 211 | } 212 | 213 | .flatpickr-monthSelect-month { 214 | @apply bg-white dark:bg-gray-700 hover:border-primary-50 dark:hover:border-primary-500 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-800 dark:text-gray-50; 215 | &.today { 216 | @apply border-primary-500 hover:bg-gray-100 hover:border-primary-500 hover:text-gray-800 dark:hover:text-white dark:hover:bg-gray-800; 217 | } 218 | &.selected { 219 | @apply border-primary-500 bg-primary-500 dark:bg-gray-800 hover:border-primary-50 dark:hover:border-primary-500 dark:border-primary-500 dark:text-gray-50; 220 | } 221 | } 222 | 223 | /*// Number input*/ 224 | .numInputWrapper { 225 | span { 226 | border-left: 0 !important; 227 | border-top: 0 !important; 228 | border-bottom: 0 !important; 229 | border-right: 0 !important; 230 | 231 | &:hover { 232 | background: transparent !important; 233 | } 234 | 235 | &:after { 236 | top: 50% !important; 237 | transform: translateY(-50%); 238 | } 239 | 240 | &.arrowUp { 241 | @apply after:!border-b-gray-500; 242 | @apply hover:after:!border-b-gray-700; 243 | } 244 | 245 | &.arrowDown { 246 | @apply after:!border-t-gray-500; 247 | @apply hover:after:!border-t-gray-700; 248 | } 249 | } 250 | 251 | &:hover { 252 | background: transparent; 253 | } 254 | } 255 | 256 | /*// Day*/ 257 | .flatpickr-day { 258 | font-size: 1rem; 259 | @apply rounded-[var(--border-radius)]; 260 | box-shadow: none !important; 261 | height: var(--flatpickr-day-height); 262 | width: var(--flatpickr-day-width); 263 | max-width: 100% !important; 264 | margin: 0; 265 | line-height: var(--flatpickr-day-height); 266 | @apply text-gray-600 dark:text-gray-50; 267 | margin-top: 0 !important; 268 | 269 | /*// Disabled*/ 270 | 271 | &.flatpickr-disabled, 272 | &.flatpickr-disabled:hover, 273 | &.prevMonthDay, 274 | &.nextMonthDay, 275 | &.notAllowed, 276 | &.notAllowed.prevMonthDay, 277 | &.notAllowed.nextMonthDay { 278 | @apply text-gray-400; 279 | background: transparent; 280 | border-color: transparent; 281 | } 282 | 283 | &.flatpickr-disabled { 284 | cursor: not-allowed; 285 | @apply text-gray-400 dark:text-gray-500; 286 | } 287 | } 288 | 289 | .flatpickr-confirm { 290 | @apply flex items-center space-x-2 font-bold p-2 cursor-pointer justify-center rounded-b-xl bg-primary-500 dark:bg-gray-800 dark:border-primary-500 text-white; 291 | svg { 292 | @apply fill-gray-900 dark:fill-gray-50 text-gray-800 dark:text-gray-50; 293 | height: 15px; 294 | width: 15px; 295 | } 296 | } 297 | 298 | /*// Week numbers*/ 299 | .flatpickr-weekwrapper { 300 | margin-right: 5px; 301 | } 302 | .flatpickr-calendar.multiMonth { 303 | .flatpickr-innerContainer { 304 | @apply pl-0 pr-0; 305 | } 306 | } 307 | 308 | .flatpickr-calendar.multiMonth 309 | .flatpickr-days 310 | .dayContainer:nth-child(n + 2) 311 | .flatpickr-day.inRange:nth-child(7n + 1) { 312 | -webkit-box-shadow: 313 | -2px 0 0 #e6e6e6, 314 | 5px 0 0 #e6e6e6; 315 | box-shadow: 316 | -2px 0 0 #e6e6e6, 317 | 5px 0 0 #e6e6e6; 318 | } 319 | 320 | .flatpickr-day,.flatpickr-monthSelect-month { 321 | &.inRange, 322 | &.prevMonthDay.inRange, 323 | &.nextMonthDay.inRange, 324 | &.today.inRange, 325 | &.prevMonthDay.today.inRange, 326 | &.nextMonthDay.today.inRange, 327 | &:hover, 328 | &.prevMonthDay:hover, 329 | &.nextMonthDay:hover, 330 | &:focus, 331 | &.prevMonthDay:focus, 332 | &.nextMonthDay:focus { 333 | cursor: pointer; 334 | outline: 0; 335 | background: var(--component-hover-bg); 336 | color: var(--component-hover-color); 337 | border-color: transparent; 338 | @apply bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-primary-50; 339 | } 340 | 341 | /*// Today*/ 342 | 343 | &.today { 344 | @apply dark:bg-gray-800 border-primary-500 hover:bg-primary-100 hover:text-primary-500 dark:hover:bg-gray-900 dark:hover:text-white; 345 | 346 | &:hover, 347 | &:focus { 348 | border-color: transparent; 349 | } 350 | } 351 | 352 | /*// Selected*/ 353 | 354 | &.selected, 355 | &.startRange, 356 | &.endRange, 357 | &.selected.inRange, 358 | &.startRange.inRange, 359 | &.endRange.inRange, 360 | &.selected:focus, 361 | &.startRange:focus, 362 | &.endRange:focus, 363 | &.selected:hover, 364 | &.startRange:hover, 365 | &.endRange:hover, 366 | &.selected.prevMonthDay, 367 | &.startRange.prevMonthDay, 368 | &.endRange.prevMonthDay, 369 | &.selected.nextMonthDay, 370 | &.startRange.nextMonthDay, 371 | &.endRange.nextMonthDay { 372 | @apply bg-primary-500 dark:bg-gray-800 dark:text-gray-50; 373 | @apply focus:bg-primary-600 hover:bg-primary-600 focus:text-white hover:text-white; 374 | border-color: transparent; 375 | } 376 | 377 | &.inRange, 378 | &.prevMonthDay.inRange, 379 | &.nextMonthDay.inRange, 380 | &.today.inRange, 381 | &.prevMonthDay.today.inRange, 382 | &.nextMonthDay.today.inRange, 383 | &:hover, 384 | &.prevMonthDay:hover, 385 | &.nextMonthDay:hover, 386 | &:focus, 387 | &.prevMonthDay:focus, 388 | &.nextMonthDay:focus { 389 | cursor: pointer; 390 | outline: 0; 391 | border-color: transparent; 392 | } 393 | 394 | /*// Selected*/ 395 | 396 | &.selected, 397 | &.startRange, 398 | &.endRange, 399 | &.selected.inRange, 400 | &.startRange.inRange, 401 | &.endRange.inRange, 402 | &.selected:focus, 403 | &.startRange:focus, 404 | &.endRange:focus, 405 | &.selected:hover, 406 | &.startRange:hover, 407 | &.endRange:hover, 408 | &.selected.prevMonthDay, 409 | &.startRange.prevMonthDay, 410 | &.endRange.prevMonthDay, 411 | &.selected.nextMonthDay, 412 | &.startRange.nextMonthDay, 413 | &.endRange.nextMonthDay { 414 | @apply !bg-primary-500 !text-white dark:bg-gray-800 dark:text-gray-50; 415 | border-color: transparent; 416 | } 417 | } 418 | -------------------------------------------------------------------------------- /resources/dist/themes/dark.css: -------------------------------------------------------------------------------- 1 | .flatpickr-calendar { 2 | background: transparent; 3 | opacity: 0; 4 | display: none; 5 | text-align: center; 6 | visibility: hidden; 7 | padding: 0; 8 | -webkit-animation: none; 9 | animation: none; 10 | direction: ltr; 11 | border: 0; 12 | font-size: 14px; 13 | line-height: 24px; 14 | border-radius: 5px; 15 | position: absolute; 16 | width: 307.875px; 17 | -webkit-box-sizing: border-box; 18 | box-sizing: border-box; 19 | -ms-touch-action: manipulation; 20 | touch-action: manipulation; 21 | background: #3f4458; 22 | -webkit-box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08); 23 | box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08); 24 | } 25 | .flatpickr-calendar.open, 26 | .flatpickr-calendar.inline { 27 | opacity: 1; 28 | max-height: 640px; 29 | visibility: visible; 30 | } 31 | .flatpickr-calendar.open { 32 | display: inline-block; 33 | z-index: 99999; 34 | } 35 | .flatpickr-calendar.animate.open { 36 | -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 37 | animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 38 | } 39 | .flatpickr-calendar.inline { 40 | display: block; 41 | position: relative; 42 | top: 2px; 43 | } 44 | .flatpickr-calendar.static { 45 | position: absolute; 46 | top: calc(100% + 2px); 47 | } 48 | .flatpickr-calendar.static.open { 49 | z-index: 999; 50 | display: block; 51 | } 52 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { 53 | -webkit-box-shadow: none !important; 54 | box-shadow: none !important; 55 | } 56 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { 57 | -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 58 | box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 59 | } 60 | .flatpickr-calendar .hasWeeks .dayContainer, 61 | .flatpickr-calendar .hasTime .dayContainer { 62 | border-bottom: 0; 63 | border-bottom-right-radius: 0; 64 | border-bottom-left-radius: 0; 65 | } 66 | .flatpickr-calendar .hasWeeks .dayContainer { 67 | border-left: 0; 68 | } 69 | .flatpickr-calendar.hasTime .flatpickr-time { 70 | height: 40px; 71 | border-top: 1px solid #20222c; 72 | } 73 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { 74 | height: auto; 75 | } 76 | .flatpickr-calendar:before, 77 | .flatpickr-calendar:after { 78 | position: absolute; 79 | display: block; 80 | pointer-events: none; 81 | border: solid transparent; 82 | content: ''; 83 | height: 0; 84 | width: 0; 85 | left: 22px; 86 | } 87 | .flatpickr-calendar.rightMost:before, 88 | .flatpickr-calendar.arrowRight:before, 89 | .flatpickr-calendar.rightMost:after, 90 | .flatpickr-calendar.arrowRight:after { 91 | left: auto; 92 | right: 22px; 93 | } 94 | .flatpickr-calendar.arrowCenter:before, 95 | .flatpickr-calendar.arrowCenter:after { 96 | left: 50%; 97 | right: 50%; 98 | } 99 | .flatpickr-calendar:before { 100 | border-width: 5px; 101 | margin: 0 -5px; 102 | } 103 | .flatpickr-calendar:after { 104 | border-width: 4px; 105 | margin: 0 -4px; 106 | } 107 | .flatpickr-calendar.arrowTop:before, 108 | .flatpickr-calendar.arrowTop:after { 109 | bottom: 100%; 110 | } 111 | .flatpickr-calendar.arrowTop:before { 112 | border-bottom-color: #20222c; 113 | } 114 | .flatpickr-calendar.arrowTop:after { 115 | border-bottom-color: #3f4458; 116 | } 117 | .flatpickr-calendar.arrowBottom:before, 118 | .flatpickr-calendar.arrowBottom:after { 119 | top: 100%; 120 | } 121 | .flatpickr-calendar.arrowBottom:before { 122 | border-top-color: #20222c; 123 | } 124 | .flatpickr-calendar.arrowBottom:after { 125 | border-top-color: #3f4458; 126 | } 127 | .flatpickr-calendar:focus { 128 | outline: 0; 129 | } 130 | .flatpickr-wrapper { 131 | position: relative; 132 | display: inline-block; 133 | } 134 | .flatpickr-months { 135 | display: -webkit-box; 136 | display: -webkit-flex; 137 | display: -ms-flexbox; 138 | display: flex; 139 | } 140 | .flatpickr-months .flatpickr-month { 141 | background: #3f4458; 142 | color: #fff; 143 | fill: #fff; 144 | height: 34px; 145 | line-height: 1; 146 | text-align: center; 147 | position: relative; 148 | -webkit-user-select: none; 149 | -moz-user-select: none; 150 | -ms-user-select: none; 151 | user-select: none; 152 | overflow: hidden; 153 | -webkit-box-flex: 1; 154 | -webkit-flex: 1; 155 | -ms-flex: 1; 156 | flex: 1; 157 | } 158 | .flatpickr-months .flatpickr-prev-month, 159 | .flatpickr-months .flatpickr-next-month { 160 | -webkit-user-select: none; 161 | -moz-user-select: none; 162 | -ms-user-select: none; 163 | user-select: none; 164 | text-decoration: none; 165 | cursor: pointer; 166 | position: absolute; 167 | top: 0; 168 | height: 34px; 169 | padding: 10px; 170 | z-index: 3; 171 | color: #fff; 172 | fill: #fff; 173 | } 174 | .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, 175 | .flatpickr-months .flatpickr-next-month.flatpickr-disabled { 176 | display: none; 177 | } 178 | .flatpickr-months .flatpickr-prev-month i, 179 | .flatpickr-months .flatpickr-next-month i { 180 | position: relative; 181 | } 182 | .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, 183 | .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { 184 | /* 185 | /*rtl:begin:ignore*/ 186 | /* 187 | */ 188 | left: 0; 189 | /* 190 | /*rtl:end:ignore*/ 191 | /* 192 | */ 193 | } 194 | /* 195 | /*rtl:begin:ignore*/ 196 | /* 197 | /*rtl:end:ignore*/ 198 | .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, 199 | .flatpickr-months .flatpickr-next-month.flatpickr-next-month { 200 | /* 201 | /*rtl:begin:ignore*/ 202 | /* 203 | */ 204 | right: 0; 205 | /* 206 | /*rtl:end:ignore*/ 207 | /* 208 | */ 209 | } 210 | /* 211 | /*rtl:begin:ignore*/ 212 | /* 213 | /*rtl:end:ignore*/ 214 | .flatpickr-months .flatpickr-prev-month:hover, 215 | .flatpickr-months .flatpickr-next-month:hover { 216 | color: #eee; 217 | } 218 | .flatpickr-months .flatpickr-prev-month:hover svg, 219 | .flatpickr-months .flatpickr-next-month:hover svg { 220 | fill: #f64747; 221 | } 222 | .flatpickr-months .flatpickr-prev-month svg, 223 | .flatpickr-months .flatpickr-next-month svg { 224 | width: 14px; 225 | height: 14px; 226 | } 227 | .flatpickr-months .flatpickr-prev-month svg path, 228 | .flatpickr-months .flatpickr-next-month svg path { 229 | -webkit-transition: fill 0.1s; 230 | transition: fill 0.1s; 231 | fill: inherit; 232 | } 233 | .numInputWrapper { 234 | position: relative; 235 | height: auto; 236 | } 237 | .numInputWrapper input, 238 | .numInputWrapper span { 239 | display: inline-block; 240 | } 241 | .numInputWrapper input { 242 | width: 100%; 243 | } 244 | .numInputWrapper input::-ms-clear { 245 | display: none; 246 | } 247 | .numInputWrapper input::-webkit-outer-spin-button, 248 | .numInputWrapper input::-webkit-inner-spin-button { 249 | margin: 0; 250 | -webkit-appearance: none; 251 | } 252 | .numInputWrapper span { 253 | position: absolute; 254 | right: 0; 255 | width: 14px; 256 | padding: 0 4px 0 2px; 257 | height: 50%; 258 | line-height: 50%; 259 | opacity: 0; 260 | cursor: pointer; 261 | border: 1px solid rgba(255,255,255,0.15); 262 | -webkit-box-sizing: border-box; 263 | box-sizing: border-box; 264 | } 265 | .numInputWrapper span:hover { 266 | background: rgba(192,187,167,0.1); 267 | } 268 | .numInputWrapper span:active { 269 | background: rgba(192,187,167,0.2); 270 | } 271 | .numInputWrapper span:after { 272 | display: block; 273 | content: ""; 274 | position: absolute; 275 | } 276 | .numInputWrapper span.arrowUp { 277 | top: 0; 278 | border-bottom: 0; 279 | } 280 | .numInputWrapper span.arrowUp:after { 281 | border-left: 4px solid transparent; 282 | border-right: 4px solid transparent; 283 | border-bottom: 4px solid rgba(255,255,255,0.6); 284 | top: 26%; 285 | } 286 | .numInputWrapper span.arrowDown { 287 | top: 50%; 288 | } 289 | .numInputWrapper span.arrowDown:after { 290 | border-left: 4px solid transparent; 291 | border-right: 4px solid transparent; 292 | border-top: 4px solid rgba(255,255,255,0.6); 293 | top: 40%; 294 | } 295 | .numInputWrapper span svg { 296 | width: inherit; 297 | height: auto; 298 | } 299 | .numInputWrapper span svg path { 300 | fill: rgba(255,255,255,0.5); 301 | } 302 | .numInputWrapper:hover { 303 | background: rgba(192,187,167,0.05); 304 | } 305 | .numInputWrapper:hover span { 306 | opacity: 1; 307 | } 308 | .flatpickr-current-month { 309 | font-size: 135%; 310 | line-height: inherit; 311 | font-weight: 300; 312 | color: inherit; 313 | position: absolute; 314 | width: 75%; 315 | left: 12.5%; 316 | padding: 7.48px 0 0 0; 317 | line-height: 1; 318 | height: 34px; 319 | display: inline-block; 320 | text-align: center; 321 | -webkit-transform: translate3d(0px, 0px, 0px); 322 | transform: translate3d(0px, 0px, 0px); 323 | } 324 | .flatpickr-current-month span.cur-month { 325 | font-family: inherit; 326 | font-weight: 700; 327 | color: inherit; 328 | display: inline-block; 329 | margin-left: 0.5ch; 330 | padding: 0; 331 | } 332 | .flatpickr-current-month span.cur-month:hover { 333 | background: rgba(192,187,167,0.05); 334 | } 335 | .flatpickr-current-month .numInputWrapper { 336 | width: 6ch; 337 | width: 7ch\0; 338 | display: inline-block; 339 | } 340 | .flatpickr-current-month .numInputWrapper span.arrowUp:after { 341 | border-bottom-color: #fff; 342 | } 343 | .flatpickr-current-month .numInputWrapper span.arrowDown:after { 344 | border-top-color: #fff; 345 | } 346 | .flatpickr-current-month input.cur-year { 347 | background: transparent; 348 | -webkit-box-sizing: border-box; 349 | box-sizing: border-box; 350 | color: inherit; 351 | cursor: text; 352 | padding: 0 0 0 0.5ch; 353 | margin: 0; 354 | display: inline-block; 355 | font-size: inherit; 356 | font-family: inherit; 357 | font-weight: 300; 358 | line-height: inherit; 359 | height: auto; 360 | border: 0; 361 | border-radius: 0; 362 | vertical-align: initial; 363 | -webkit-appearance: textfield; 364 | -moz-appearance: textfield; 365 | appearance: textfield; 366 | } 367 | .flatpickr-current-month input.cur-year:focus { 368 | outline: 0; 369 | } 370 | .flatpickr-current-month input.cur-year[disabled], 371 | .flatpickr-current-month input.cur-year[disabled]:hover { 372 | font-size: 100%; 373 | color: rgba(255,255,255,0.5); 374 | background: transparent; 375 | pointer-events: none; 376 | } 377 | .flatpickr-current-month .flatpickr-monthDropdown-months { 378 | appearance: menulist; 379 | background: #3f4458; 380 | border: none; 381 | border-radius: 0; 382 | box-sizing: border-box; 383 | color: inherit; 384 | cursor: pointer; 385 | font-size: inherit; 386 | font-family: inherit; 387 | font-weight: 300; 388 | height: auto; 389 | line-height: inherit; 390 | margin: -1px 0 0 0; 391 | outline: none; 392 | padding: 0 0 0 0.5ch; 393 | position: relative; 394 | vertical-align: initial; 395 | -webkit-box-sizing: border-box; 396 | -webkit-appearance: menulist; 397 | -moz-appearance: menulist; 398 | width: auto; 399 | } 400 | .flatpickr-current-month .flatpickr-monthDropdown-months:focus, 401 | .flatpickr-current-month .flatpickr-monthDropdown-months:active { 402 | outline: none; 403 | } 404 | .flatpickr-current-month .flatpickr-monthDropdown-months:hover { 405 | background: rgba(192,187,167,0.05); 406 | } 407 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { 408 | background-color: #3f4458; 409 | outline: none; 410 | padding: 0; 411 | } 412 | .flatpickr-weekdays { 413 | background: transparent; 414 | text-align: center; 415 | overflow: hidden; 416 | width: 100%; 417 | display: -webkit-box; 418 | display: -webkit-flex; 419 | display: -ms-flexbox; 420 | display: flex; 421 | -webkit-box-align: center; 422 | -webkit-align-items: center; 423 | -ms-flex-align: center; 424 | align-items: center; 425 | height: 28px; 426 | } 427 | .flatpickr-weekdays .flatpickr-weekdaycontainer { 428 | display: -webkit-box; 429 | display: -webkit-flex; 430 | display: -ms-flexbox; 431 | display: flex; 432 | -webkit-box-flex: 1; 433 | -webkit-flex: 1; 434 | -ms-flex: 1; 435 | flex: 1; 436 | } 437 | span.flatpickr-weekday { 438 | cursor: default; 439 | font-size: 90%; 440 | background: #3f4458; 441 | color: #fff; 442 | line-height: 1; 443 | margin: 0; 444 | text-align: center; 445 | display: block; 446 | -webkit-box-flex: 1; 447 | -webkit-flex: 1; 448 | -ms-flex: 1; 449 | flex: 1; 450 | font-weight: bolder; 451 | } 452 | .dayContainer, 453 | .flatpickr-weeks { 454 | padding: 1px 0 0 0; 455 | } 456 | .flatpickr-days { 457 | position: relative; 458 | overflow: hidden; 459 | display: -webkit-box; 460 | display: -webkit-flex; 461 | display: -ms-flexbox; 462 | display: flex; 463 | -webkit-box-align: start; 464 | -webkit-align-items: flex-start; 465 | -ms-flex-align: start; 466 | align-items: flex-start; 467 | width: 307.875px; 468 | } 469 | .flatpickr-days:focus { 470 | outline: 0; 471 | } 472 | .dayContainer { 473 | padding: 0; 474 | outline: 0; 475 | text-align: left; 476 | width: 307.875px; 477 | min-width: 307.875px; 478 | max-width: 307.875px; 479 | -webkit-box-sizing: border-box; 480 | box-sizing: border-box; 481 | display: inline-block; 482 | display: -ms-flexbox; 483 | display: -webkit-box; 484 | display: -webkit-flex; 485 | display: flex; 486 | -webkit-flex-wrap: wrap; 487 | flex-wrap: wrap; 488 | -ms-flex-wrap: wrap; 489 | -ms-flex-pack: justify; 490 | -webkit-justify-content: space-around; 491 | justify-content: space-around; 492 | -webkit-transform: translate3d(0px, 0px, 0px); 493 | transform: translate3d(0px, 0px, 0px); 494 | opacity: 1; 495 | } 496 | .dayContainer + .dayContainer { 497 | -webkit-box-shadow: -1px 0 0 #20222c; 498 | box-shadow: -1px 0 0 #20222c; 499 | } 500 | .flatpickr-day { 501 | background: none; 502 | border: 1px solid transparent; 503 | border-radius: 150px; 504 | -webkit-box-sizing: border-box; 505 | box-sizing: border-box; 506 | color: rgba(255,255,255,0.95); 507 | cursor: pointer; 508 | font-weight: 400; 509 | width: 14.2857143%; 510 | -webkit-flex-basis: 14.2857143%; 511 | -ms-flex-preferred-size: 14.2857143%; 512 | flex-basis: 14.2857143%; 513 | max-width: 39px; 514 | height: 39px; 515 | line-height: 39px; 516 | margin: 0; 517 | display: inline-block; 518 | position: relative; 519 | -webkit-box-pack: center; 520 | -webkit-justify-content: center; 521 | -ms-flex-pack: center; 522 | justify-content: center; 523 | text-align: center; 524 | } 525 | .flatpickr-day.inRange, 526 | .flatpickr-day.prevMonthDay.inRange, 527 | .flatpickr-day.nextMonthDay.inRange, 528 | .flatpickr-day.today.inRange, 529 | .flatpickr-day.prevMonthDay.today.inRange, 530 | .flatpickr-day.nextMonthDay.today.inRange, 531 | .flatpickr-day:hover, 532 | .flatpickr-day.prevMonthDay:hover, 533 | .flatpickr-day.nextMonthDay:hover, 534 | .flatpickr-day:focus, 535 | .flatpickr-day.prevMonthDay:focus, 536 | .flatpickr-day.nextMonthDay:focus { 537 | cursor: pointer; 538 | outline: 0; 539 | background: #646c8c; 540 | border-color: #646c8c; 541 | } 542 | .flatpickr-day.today { 543 | border-color: #eee; 544 | } 545 | .flatpickr-day.today:hover, 546 | .flatpickr-day.today:focus { 547 | border-color: #eee; 548 | background: #eee; 549 | color: #3f4458; 550 | } 551 | .flatpickr-day.selected, 552 | .flatpickr-day.startRange, 553 | .flatpickr-day.endRange, 554 | .flatpickr-day.selected.inRange, 555 | .flatpickr-day.startRange.inRange, 556 | .flatpickr-day.endRange.inRange, 557 | .flatpickr-day.selected:focus, 558 | .flatpickr-day.startRange:focus, 559 | .flatpickr-day.endRange:focus, 560 | .flatpickr-day.selected:hover, 561 | .flatpickr-day.startRange:hover, 562 | .flatpickr-day.endRange:hover, 563 | .flatpickr-day.selected.prevMonthDay, 564 | .flatpickr-day.startRange.prevMonthDay, 565 | .flatpickr-day.endRange.prevMonthDay, 566 | .flatpickr-day.selected.nextMonthDay, 567 | .flatpickr-day.startRange.nextMonthDay, 568 | .flatpickr-day.endRange.nextMonthDay { 569 | background: #80cbc4; 570 | -webkit-box-shadow: none; 571 | box-shadow: none; 572 | color: #fff; 573 | border-color: #80cbc4; 574 | } 575 | .flatpickr-day.selected.startRange, 576 | .flatpickr-day.startRange.startRange, 577 | .flatpickr-day.endRange.startRange { 578 | border-radius: 50px 0 0 50px; 579 | } 580 | .flatpickr-day.selected.endRange, 581 | .flatpickr-day.startRange.endRange, 582 | .flatpickr-day.endRange.endRange { 583 | border-radius: 0 50px 50px 0; 584 | } 585 | .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 586 | .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 587 | .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { 588 | -webkit-box-shadow: -10px 0 0 #80cbc4; 589 | box-shadow: -10px 0 0 #80cbc4; 590 | } 591 | .flatpickr-day.selected.startRange.endRange, 592 | .flatpickr-day.startRange.startRange.endRange, 593 | .flatpickr-day.endRange.startRange.endRange { 594 | border-radius: 50px; 595 | } 596 | .flatpickr-day.inRange { 597 | border-radius: 0; 598 | -webkit-box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c; 599 | box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c; 600 | } 601 | .flatpickr-day.flatpickr-disabled, 602 | .flatpickr-day.flatpickr-disabled:hover, 603 | .flatpickr-day.prevMonthDay, 604 | .flatpickr-day.nextMonthDay, 605 | .flatpickr-day.notAllowed, 606 | .flatpickr-day.notAllowed.prevMonthDay, 607 | .flatpickr-day.notAllowed.nextMonthDay { 608 | color: rgba(255,255,255,0.3); 609 | background: transparent; 610 | border-color: transparent; 611 | cursor: default; 612 | } 613 | .flatpickr-day.flatpickr-disabled, 614 | .flatpickr-day.flatpickr-disabled:hover { 615 | cursor: not-allowed; 616 | color: rgba(255,255,255,0.1); 617 | } 618 | .flatpickr-day.week.selected { 619 | border-radius: 0; 620 | -webkit-box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4; 621 | box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4; 622 | } 623 | .flatpickr-day.hidden { 624 | visibility: hidden; 625 | } 626 | .rangeMode .flatpickr-day { 627 | margin-top: 1px; 628 | } 629 | .flatpickr-weekwrapper { 630 | float: left; 631 | } 632 | .flatpickr-weekwrapper .flatpickr-weeks { 633 | padding: 0 12px; 634 | -webkit-box-shadow: 1px 0 0 #20222c; 635 | box-shadow: 1px 0 0 #20222c; 636 | } 637 | .flatpickr-weekwrapper .flatpickr-weekday { 638 | float: none; 639 | width: 100%; 640 | line-height: 28px; 641 | } 642 | .flatpickr-weekwrapper span.flatpickr-day, 643 | .flatpickr-weekwrapper span.flatpickr-day:hover { 644 | display: block; 645 | width: 100%; 646 | max-width: none; 647 | color: rgba(255,255,255,0.3); 648 | background: transparent; 649 | cursor: default; 650 | border: none; 651 | } 652 | .flatpickr-innerContainer { 653 | display: block; 654 | display: -webkit-box; 655 | display: -webkit-flex; 656 | display: -ms-flexbox; 657 | display: flex; 658 | -webkit-box-sizing: border-box; 659 | box-sizing: border-box; 660 | overflow: hidden; 661 | } 662 | .flatpickr-rContainer { 663 | display: inline-block; 664 | padding: 0; 665 | -webkit-box-sizing: border-box; 666 | box-sizing: border-box; 667 | } 668 | .flatpickr-time { 669 | text-align: center; 670 | outline: 0; 671 | display: block; 672 | height: 0; 673 | line-height: 40px; 674 | max-height: 40px; 675 | -webkit-box-sizing: border-box; 676 | box-sizing: border-box; 677 | overflow: hidden; 678 | display: -webkit-box; 679 | display: -webkit-flex; 680 | display: -ms-flexbox; 681 | display: flex; 682 | } 683 | .flatpickr-time:after { 684 | content: ""; 685 | display: table; 686 | clear: both; 687 | } 688 | .flatpickr-time .numInputWrapper { 689 | -webkit-box-flex: 1; 690 | -webkit-flex: 1; 691 | -ms-flex: 1; 692 | flex: 1; 693 | width: 40%; 694 | height: 40px; 695 | float: left; 696 | } 697 | .flatpickr-time .numInputWrapper span.arrowUp:after { 698 | border-bottom-color: rgba(255,255,255,0.95); 699 | } 700 | .flatpickr-time .numInputWrapper span.arrowDown:after { 701 | border-top-color: rgba(255,255,255,0.95); 702 | } 703 | .flatpickr-time.hasSeconds .numInputWrapper { 704 | width: 26%; 705 | } 706 | .flatpickr-time.time24hr .numInputWrapper { 707 | width: 49%; 708 | } 709 | .flatpickr-time input { 710 | background: transparent; 711 | -webkit-box-shadow: none; 712 | box-shadow: none; 713 | border: 0; 714 | border-radius: 0; 715 | text-align: center; 716 | margin: 0; 717 | padding: 0; 718 | height: inherit; 719 | line-height: inherit; 720 | color: rgba(255,255,255,0.95); 721 | font-size: 14px; 722 | position: relative; 723 | -webkit-box-sizing: border-box; 724 | box-sizing: border-box; 725 | -webkit-appearance: textfield; 726 | -moz-appearance: textfield; 727 | appearance: textfield; 728 | } 729 | .flatpickr-time input.flatpickr-hour { 730 | font-weight: bold; 731 | } 732 | .flatpickr-time input.flatpickr-minute, 733 | .flatpickr-time input.flatpickr-second { 734 | font-weight: 400; 735 | } 736 | .flatpickr-time input:focus { 737 | outline: 0; 738 | border: 0; 739 | } 740 | .flatpickr-time .flatpickr-time-separator, 741 | .flatpickr-time .flatpickr-am-pm { 742 | height: inherit; 743 | float: left; 744 | line-height: inherit; 745 | color: rgba(255,255,255,0.95); 746 | font-weight: bold; 747 | width: 2%; 748 | -webkit-user-select: none; 749 | -moz-user-select: none; 750 | -ms-user-select: none; 751 | user-select: none; 752 | -webkit-align-self: center; 753 | -ms-flex-item-align: center; 754 | align-self: center; 755 | } 756 | .flatpickr-time .flatpickr-am-pm { 757 | outline: 0; 758 | width: 18%; 759 | cursor: pointer; 760 | text-align: center; 761 | font-weight: 400; 762 | } 763 | .flatpickr-time input:hover, 764 | .flatpickr-time .flatpickr-am-pm:hover, 765 | .flatpickr-time input:focus, 766 | .flatpickr-time .flatpickr-am-pm:focus { 767 | background: #6a7395; 768 | } 769 | .flatpickr-input[readonly] { 770 | cursor: pointer; 771 | } 772 | @-webkit-keyframes fpFadeInDown { 773 | from { 774 | opacity: 0; 775 | -webkit-transform: translate3d(0, -20px, 0); 776 | transform: translate3d(0, -20px, 0); 777 | } 778 | to { 779 | opacity: 1; 780 | -webkit-transform: translate3d(0, 0, 0); 781 | transform: translate3d(0, 0, 0); 782 | } 783 | } 784 | @keyframes fpFadeInDown { 785 | from { 786 | opacity: 0; 787 | -webkit-transform: translate3d(0, -20px, 0); 788 | transform: translate3d(0, -20px, 0); 789 | } 790 | to { 791 | opacity: 1; 792 | -webkit-transform: translate3d(0, 0, 0); 793 | transform: translate3d(0, 0, 0); 794 | } 795 | } 796 | -------------------------------------------------------------------------------- /resources/dist/themes/light.css: -------------------------------------------------------------------------------- 1 | .flatpickr-calendar { 2 | background: transparent; 3 | opacity: 0; 4 | display: none; 5 | text-align: center; 6 | visibility: hidden; 7 | padding: 0; 8 | -webkit-animation: none; 9 | animation: none; 10 | direction: ltr; 11 | border: 0; 12 | font-size: 14px; 13 | line-height: 24px; 14 | border-radius: 5px; 15 | position: absolute; 16 | width: 307.875px; 17 | -webkit-box-sizing: border-box; 18 | box-sizing: border-box; 19 | -ms-touch-action: manipulation; 20 | touch-action: manipulation; 21 | -webkit-box-shadow: 0 3px 13px rgba(0,0,0,0.08); 22 | box-shadow: 0 3px 13px rgba(0,0,0,0.08); 23 | } 24 | .flatpickr-calendar.open, 25 | .flatpickr-calendar.inline { 26 | opacity: 1; 27 | max-height: 640px; 28 | visibility: visible; 29 | } 30 | .flatpickr-calendar.open { 31 | display: inline-block; 32 | z-index: 99999; 33 | } 34 | .flatpickr-calendar.animate.open { 35 | -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 36 | animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 37 | } 38 | .flatpickr-calendar.inline { 39 | display: block; 40 | position: relative; 41 | top: 2px; 42 | } 43 | .flatpickr-calendar.static { 44 | position: absolute; 45 | top: calc(100% + 2px); 46 | } 47 | .flatpickr-calendar.static.open { 48 | z-index: 999; 49 | display: block; 50 | } 51 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { 52 | -webkit-box-shadow: none !important; 53 | box-shadow: none !important; 54 | } 55 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { 56 | -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 57 | box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 58 | } 59 | .flatpickr-calendar .hasWeeks .dayContainer, 60 | .flatpickr-calendar .hasTime .dayContainer { 61 | border-bottom: 0; 62 | border-bottom-right-radius: 0; 63 | border-bottom-left-radius: 0; 64 | } 65 | .flatpickr-calendar .hasWeeks .dayContainer { 66 | border-left: 0; 67 | } 68 | .flatpickr-calendar.hasTime .flatpickr-time { 69 | height: 40px; 70 | border-top: 1px solid #eceef1; 71 | } 72 | .flatpickr-calendar.hasTime .flatpickr-innerContainer { 73 | border-bottom: 0; 74 | } 75 | .flatpickr-calendar.hasTime .flatpickr-time { 76 | border: 1px solid #eceef1; 77 | } 78 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { 79 | height: auto; 80 | } 81 | .flatpickr-calendar:before, 82 | .flatpickr-calendar:after { 83 | position: absolute; 84 | display: block; 85 | pointer-events: none; 86 | border: solid transparent; 87 | content: ''; 88 | height: 0; 89 | width: 0; 90 | left: 22px; 91 | } 92 | .flatpickr-calendar.rightMost:before, 93 | .flatpickr-calendar.arrowRight:before, 94 | .flatpickr-calendar.rightMost:after, 95 | .flatpickr-calendar.arrowRight:after { 96 | left: auto; 97 | right: 22px; 98 | } 99 | .flatpickr-calendar.arrowCenter:before, 100 | .flatpickr-calendar.arrowCenter:after { 101 | left: 50%; 102 | right: 50%; 103 | } 104 | .flatpickr-calendar:before { 105 | border-width: 5px; 106 | margin: 0 -5px; 107 | } 108 | .flatpickr-calendar:after { 109 | border-width: 4px; 110 | margin: 0 -4px; 111 | } 112 | .flatpickr-calendar.arrowTop:before, 113 | .flatpickr-calendar.arrowTop:after { 114 | bottom: 100%; 115 | } 116 | .flatpickr-calendar.arrowTop:before { 117 | border-bottom-color: #eceef1; 118 | } 119 | .flatpickr-calendar.arrowTop:after { 120 | border-bottom-color: #eceef1; 121 | } 122 | .flatpickr-calendar.arrowBottom:before, 123 | .flatpickr-calendar.arrowBottom:after { 124 | top: 100%; 125 | } 126 | .flatpickr-calendar.arrowBottom:before { 127 | border-top-color: #eceef1; 128 | } 129 | .flatpickr-calendar.arrowBottom:after { 130 | border-top-color: #eceef1; 131 | } 132 | .flatpickr-calendar:focus { 133 | outline: 0; 134 | } 135 | .flatpickr-wrapper { 136 | position: relative; 137 | display: inline-block; 138 | } 139 | .flatpickr-months { 140 | display: -webkit-box; 141 | display: -webkit-flex; 142 | display: -ms-flexbox; 143 | display: flex; 144 | } 145 | .flatpickr-months .flatpickr-month { 146 | border-radius: 5px 5px 0 0; 147 | background: #eceef1; 148 | color: #5a6171; 149 | fill: #5a6171; 150 | height: 34px; 151 | line-height: 1; 152 | text-align: center; 153 | position: relative; 154 | -webkit-user-select: none; 155 | -moz-user-select: none; 156 | -ms-user-select: none; 157 | user-select: none; 158 | overflow: hidden; 159 | -webkit-box-flex: 1; 160 | -webkit-flex: 1; 161 | -ms-flex: 1; 162 | flex: 1; 163 | } 164 | .flatpickr-months .flatpickr-prev-month, 165 | .flatpickr-months .flatpickr-next-month { 166 | -webkit-user-select: none; 167 | -moz-user-select: none; 168 | -ms-user-select: none; 169 | user-select: none; 170 | text-decoration: none; 171 | cursor: pointer; 172 | position: absolute; 173 | top: 0; 174 | height: 34px; 175 | padding: 10px; 176 | z-index: 3; 177 | color: #5a6171; 178 | fill: #5a6171; 179 | } 180 | .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, 181 | .flatpickr-months .flatpickr-next-month.flatpickr-disabled { 182 | display: none; 183 | } 184 | .flatpickr-months .flatpickr-prev-month i, 185 | .flatpickr-months .flatpickr-next-month i { 186 | position: relative; 187 | } 188 | .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, 189 | .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { 190 | /* 191 | /*rtl:begin:ignore*/ 192 | /* 193 | */ 194 | left: 0; 195 | /* 196 | /*rtl:end:ignore*/ 197 | /* 198 | */ 199 | } 200 | /* 201 | /*rtl:begin:ignore*/ 202 | /* 203 | /*rtl:end:ignore*/ 204 | .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, 205 | .flatpickr-months .flatpickr-next-month.flatpickr-next-month { 206 | /* 207 | /*rtl:begin:ignore*/ 208 | /* 209 | */ 210 | right: 0; 211 | /* 212 | /*rtl:end:ignore*/ 213 | /* 214 | */ 215 | } 216 | /* 217 | /*rtl:begin:ignore*/ 218 | /* 219 | /*rtl:end:ignore*/ 220 | .flatpickr-months .flatpickr-prev-month:hover, 221 | .flatpickr-months .flatpickr-next-month:hover { 222 | color: #bbb; 223 | } 224 | .flatpickr-months .flatpickr-prev-month:hover svg, 225 | .flatpickr-months .flatpickr-next-month:hover svg { 226 | fill: #f64747; 227 | } 228 | .flatpickr-months .flatpickr-prev-month svg, 229 | .flatpickr-months .flatpickr-next-month svg { 230 | width: 14px; 231 | height: 14px; 232 | } 233 | .flatpickr-months .flatpickr-prev-month svg path, 234 | .flatpickr-months .flatpickr-next-month svg path { 235 | -webkit-transition: fill 0.1s; 236 | transition: fill 0.1s; 237 | fill: inherit; 238 | } 239 | .numInputWrapper { 240 | position: relative; 241 | height: auto; 242 | } 243 | .numInputWrapper input, 244 | .numInputWrapper span { 245 | display: inline-block; 246 | } 247 | .numInputWrapper input { 248 | width: 100%; 249 | } 250 | .numInputWrapper input::-ms-clear { 251 | display: none; 252 | } 253 | .numInputWrapper input::-webkit-outer-spin-button, 254 | .numInputWrapper input::-webkit-inner-spin-button { 255 | margin: 0; 256 | -webkit-appearance: none; 257 | } 258 | .numInputWrapper span { 259 | position: absolute; 260 | right: 0; 261 | width: 14px; 262 | padding: 0 4px 0 2px; 263 | height: 50%; 264 | line-height: 50%; 265 | opacity: 0; 266 | cursor: pointer; 267 | border: 1px solid rgba(72,72,72,0.15); 268 | -webkit-box-sizing: border-box; 269 | box-sizing: border-box; 270 | } 271 | .numInputWrapper span:hover { 272 | background: rgba(0,0,0,0.1); 273 | } 274 | .numInputWrapper span:active { 275 | background: rgba(0,0,0,0.2); 276 | } 277 | .numInputWrapper span:after { 278 | display: block; 279 | content: ""; 280 | position: absolute; 281 | } 282 | .numInputWrapper span.arrowUp { 283 | top: 0; 284 | border-bottom: 0; 285 | } 286 | .numInputWrapper span.arrowUp:after { 287 | border-left: 4px solid transparent; 288 | border-right: 4px solid transparent; 289 | border-bottom: 4px solid rgba(72,72,72,0.6); 290 | top: 26%; 291 | } 292 | .numInputWrapper span.arrowDown { 293 | top: 50%; 294 | } 295 | .numInputWrapper span.arrowDown:after { 296 | border-left: 4px solid transparent; 297 | border-right: 4px solid transparent; 298 | border-top: 4px solid rgba(72,72,72,0.6); 299 | top: 40%; 300 | } 301 | .numInputWrapper span svg { 302 | width: inherit; 303 | height: auto; 304 | } 305 | .numInputWrapper span svg path { 306 | fill: rgba(90,97,113,0.5); 307 | } 308 | .numInputWrapper:hover { 309 | background: rgba(0,0,0,0.05); 310 | } 311 | .numInputWrapper:hover span { 312 | opacity: 1; 313 | } 314 | .flatpickr-current-month { 315 | font-size: 135%; 316 | line-height: inherit; 317 | font-weight: 300; 318 | color: inherit; 319 | position: absolute; 320 | width: 75%; 321 | left: 12.5%; 322 | padding: 7.48px 0 0 0; 323 | line-height: 1; 324 | height: 34px; 325 | display: inline-block; 326 | text-align: center; 327 | -webkit-transform: translate3d(0px, 0px, 0px); 328 | transform: translate3d(0px, 0px, 0px); 329 | } 330 | .flatpickr-current-month span.cur-month { 331 | font-family: inherit; 332 | font-weight: 700; 333 | color: inherit; 334 | display: inline-block; 335 | margin-left: 0.5ch; 336 | padding: 0; 337 | } 338 | .flatpickr-current-month span.cur-month:hover { 339 | background: rgba(0,0,0,0.05); 340 | } 341 | .flatpickr-current-month .numInputWrapper { 342 | width: 6ch; 343 | width: 7ch\0; 344 | display: inline-block; 345 | } 346 | .flatpickr-current-month .numInputWrapper span.arrowUp:after { 347 | border-bottom-color: #5a6171; 348 | } 349 | .flatpickr-current-month .numInputWrapper span.arrowDown:after { 350 | border-top-color: #5a6171; 351 | } 352 | .flatpickr-current-month input.cur-year { 353 | background: transparent; 354 | -webkit-box-sizing: border-box; 355 | box-sizing: border-box; 356 | color: inherit; 357 | cursor: text; 358 | padding: 0 0 0 0.5ch; 359 | margin: 0; 360 | display: inline-block; 361 | font-size: inherit; 362 | font-family: inherit; 363 | font-weight: 300; 364 | line-height: inherit; 365 | height: auto; 366 | border: 0; 367 | border-radius: 0; 368 | vertical-align: initial; 369 | -webkit-appearance: textfield; 370 | -moz-appearance: textfield; 371 | appearance: textfield; 372 | } 373 | .flatpickr-current-month input.cur-year:focus { 374 | outline: 0; 375 | } 376 | .flatpickr-current-month input.cur-year[disabled], 377 | .flatpickr-current-month input.cur-year[disabled]:hover { 378 | font-size: 100%; 379 | color: rgba(90,97,113,0.5); 380 | background: transparent; 381 | pointer-events: none; 382 | } 383 | .flatpickr-current-month .flatpickr-monthDropdown-months { 384 | appearance: menulist; 385 | background: #eceef1; 386 | border: none; 387 | border-radius: 0; 388 | box-sizing: border-box; 389 | color: inherit; 390 | cursor: pointer; 391 | font-size: inherit; 392 | font-family: inherit; 393 | font-weight: 300; 394 | height: auto; 395 | line-height: inherit; 396 | margin: -1px 0 0 0; 397 | outline: none; 398 | padding: 0 0 0 0.5ch; 399 | position: relative; 400 | vertical-align: initial; 401 | -webkit-box-sizing: border-box; 402 | -webkit-appearance: menulist; 403 | -moz-appearance: menulist; 404 | width: auto; 405 | } 406 | .flatpickr-current-month .flatpickr-monthDropdown-months:focus, 407 | .flatpickr-current-month .flatpickr-monthDropdown-months:active { 408 | outline: none; 409 | } 410 | .flatpickr-current-month .flatpickr-monthDropdown-months:hover { 411 | background: rgba(0,0,0,0.05); 412 | } 413 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { 414 | background-color: #eceef1; 415 | outline: none; 416 | padding: 0; 417 | } 418 | .flatpickr-weekdays { 419 | background: #eceef1; 420 | text-align: center; 421 | overflow: hidden; 422 | width: 100%; 423 | display: -webkit-box; 424 | display: -webkit-flex; 425 | display: -ms-flexbox; 426 | display: flex; 427 | -webkit-box-align: center; 428 | -webkit-align-items: center; 429 | -ms-flex-align: center; 430 | align-items: center; 431 | height: 28px; 432 | } 433 | .flatpickr-weekdays .flatpickr-weekdaycontainer { 434 | display: -webkit-box; 435 | display: -webkit-flex; 436 | display: -ms-flexbox; 437 | display: flex; 438 | -webkit-box-flex: 1; 439 | -webkit-flex: 1; 440 | -ms-flex: 1; 441 | flex: 1; 442 | } 443 | span.flatpickr-weekday { 444 | cursor: default; 445 | font-size: 90%; 446 | background: #eceef1; 447 | color: #5a6171; 448 | line-height: 1; 449 | margin: 0; 450 | text-align: center; 451 | display: block; 452 | -webkit-box-flex: 1; 453 | -webkit-flex: 1; 454 | -ms-flex: 1; 455 | flex: 1; 456 | font-weight: bolder; 457 | } 458 | .dayContainer, 459 | .flatpickr-weeks { 460 | padding: 1px 0 0 0; 461 | } 462 | .flatpickr-days { 463 | position: relative; 464 | overflow: hidden; 465 | display: -webkit-box; 466 | display: -webkit-flex; 467 | display: -ms-flexbox; 468 | display: flex; 469 | -webkit-box-align: start; 470 | -webkit-align-items: flex-start; 471 | -ms-flex-align: start; 472 | align-items: flex-start; 473 | width: 307.875px; 474 | border-left: 1px solid #eceef1; 475 | border-right: 1px solid #eceef1; 476 | } 477 | .flatpickr-days:focus { 478 | outline: 0; 479 | } 480 | .dayContainer { 481 | padding: 0; 482 | outline: 0; 483 | text-align: left; 484 | width: 307.875px; 485 | min-width: 307.875px; 486 | max-width: 307.875px; 487 | -webkit-box-sizing: border-box; 488 | box-sizing: border-box; 489 | display: inline-block; 490 | display: -ms-flexbox; 491 | display: -webkit-box; 492 | display: -webkit-flex; 493 | display: flex; 494 | -webkit-flex-wrap: wrap; 495 | flex-wrap: wrap; 496 | -ms-flex-wrap: wrap; 497 | -ms-flex-pack: justify; 498 | -webkit-justify-content: space-around; 499 | justify-content: space-around; 500 | -webkit-transform: translate3d(0px, 0px, 0px); 501 | transform: translate3d(0px, 0px, 0px); 502 | opacity: 1; 503 | } 504 | .dayContainer + .dayContainer { 505 | -webkit-box-shadow: -1px 0 0 #eceef1; 506 | box-shadow: -1px 0 0 #eceef1; 507 | } 508 | .flatpickr-day { 509 | background: none; 510 | border: 1px solid transparent; 511 | border-radius: 150px; 512 | -webkit-box-sizing: border-box; 513 | box-sizing: border-box; 514 | color: #484848; 515 | cursor: pointer; 516 | font-weight: 400; 517 | width: 14.2857143%; 518 | -webkit-flex-basis: 14.2857143%; 519 | -ms-flex-preferred-size: 14.2857143%; 520 | flex-basis: 14.2857143%; 521 | max-width: 39px; 522 | height: 39px; 523 | line-height: 39px; 524 | margin: 0; 525 | display: inline-block; 526 | position: relative; 527 | -webkit-box-pack: center; 528 | -webkit-justify-content: center; 529 | -ms-flex-pack: center; 530 | justify-content: center; 531 | text-align: center; 532 | } 533 | .flatpickr-day.inRange, 534 | .flatpickr-day.prevMonthDay.inRange, 535 | .flatpickr-day.nextMonthDay.inRange, 536 | .flatpickr-day.today.inRange, 537 | .flatpickr-day.prevMonthDay.today.inRange, 538 | .flatpickr-day.nextMonthDay.today.inRange, 539 | .flatpickr-day:hover, 540 | .flatpickr-day.prevMonthDay:hover, 541 | .flatpickr-day.nextMonthDay:hover, 542 | .flatpickr-day:focus, 543 | .flatpickr-day.prevMonthDay:focus, 544 | .flatpickr-day.nextMonthDay:focus { 545 | cursor: pointer; 546 | outline: 0; 547 | background: #e2e2e2; 548 | border-color: #e2e2e2; 549 | } 550 | .flatpickr-day.today { 551 | border-color: #bbb; 552 | } 553 | .flatpickr-day.today:hover, 554 | .flatpickr-day.today:focus { 555 | border-color: #bbb; 556 | background: #bbb; 557 | color: #fff; 558 | } 559 | .flatpickr-day.selected, 560 | .flatpickr-day.startRange, 561 | .flatpickr-day.endRange, 562 | .flatpickr-day.selected.inRange, 563 | .flatpickr-day.startRange.inRange, 564 | .flatpickr-day.endRange.inRange, 565 | .flatpickr-day.selected:focus, 566 | .flatpickr-day.startRange:focus, 567 | .flatpickr-day.endRange:focus, 568 | .flatpickr-day.selected:hover, 569 | .flatpickr-day.startRange:hover, 570 | .flatpickr-day.endRange:hover, 571 | .flatpickr-day.selected.prevMonthDay, 572 | .flatpickr-day.startRange.prevMonthDay, 573 | .flatpickr-day.endRange.prevMonthDay, 574 | .flatpickr-day.selected.nextMonthDay, 575 | .flatpickr-day.startRange.nextMonthDay, 576 | .flatpickr-day.endRange.nextMonthDay { 577 | background: #ff5a5f; 578 | -webkit-box-shadow: none; 579 | box-shadow: none; 580 | color: #fff; 581 | border-color: #ff5a5f; 582 | } 583 | .flatpickr-day.selected.startRange, 584 | .flatpickr-day.startRange.startRange, 585 | .flatpickr-day.endRange.startRange { 586 | border-radius: 50px 0 0 50px; 587 | } 588 | .flatpickr-day.selected.endRange, 589 | .flatpickr-day.startRange.endRange, 590 | .flatpickr-day.endRange.endRange { 591 | border-radius: 0 50px 50px 0; 592 | } 593 | .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 594 | .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 595 | .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { 596 | -webkit-box-shadow: -10px 0 0 #ff5a5f; 597 | box-shadow: -10px 0 0 #ff5a5f; 598 | } 599 | .flatpickr-day.selected.startRange.endRange, 600 | .flatpickr-day.startRange.startRange.endRange, 601 | .flatpickr-day.endRange.startRange.endRange { 602 | border-radius: 50px; 603 | } 604 | .flatpickr-day.inRange { 605 | border-radius: 0; 606 | -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 607 | box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 608 | } 609 | .flatpickr-day.flatpickr-disabled, 610 | .flatpickr-day.flatpickr-disabled:hover, 611 | .flatpickr-day.prevMonthDay, 612 | .flatpickr-day.nextMonthDay, 613 | .flatpickr-day.notAllowed, 614 | .flatpickr-day.notAllowed.prevMonthDay, 615 | .flatpickr-day.notAllowed.nextMonthDay { 616 | color: rgba(72,72,72,0.3); 617 | background: transparent; 618 | border-color: transparent; 619 | cursor: default; 620 | } 621 | .flatpickr-day.flatpickr-disabled, 622 | .flatpickr-day.flatpickr-disabled:hover { 623 | cursor: not-allowed; 624 | color: rgba(72,72,72,0.1); 625 | } 626 | .flatpickr-day.week.selected { 627 | border-radius: 0; 628 | -webkit-box-shadow: -5px 0 0 #ff5a5f, 5px 0 0 #ff5a5f; 629 | box-shadow: -5px 0 0 #ff5a5f, 5px 0 0 #ff5a5f; 630 | } 631 | .flatpickr-day.hidden { 632 | visibility: hidden; 633 | } 634 | .rangeMode .flatpickr-day { 635 | margin-top: 1px; 636 | } 637 | .flatpickr-weekwrapper { 638 | float: left; 639 | } 640 | .flatpickr-weekwrapper .flatpickr-weeks { 641 | padding: 0 12px; 642 | border-left: 1px solid #eceef1; 643 | } 644 | .flatpickr-weekwrapper .flatpickr-weekday { 645 | float: none; 646 | width: 100%; 647 | line-height: 28px; 648 | } 649 | .flatpickr-weekwrapper span.flatpickr-day, 650 | .flatpickr-weekwrapper span.flatpickr-day:hover { 651 | display: block; 652 | width: 100%; 653 | max-width: none; 654 | color: rgba(72,72,72,0.3); 655 | background: transparent; 656 | cursor: default; 657 | border: none; 658 | } 659 | .flatpickr-innerContainer { 660 | display: block; 661 | display: -webkit-box; 662 | display: -webkit-flex; 663 | display: -ms-flexbox; 664 | display: flex; 665 | -webkit-box-sizing: border-box; 666 | box-sizing: border-box; 667 | overflow: hidden; 668 | background: #fff; 669 | border-bottom: 1px solid #eceef1; 670 | } 671 | .flatpickr-rContainer { 672 | display: inline-block; 673 | padding: 0; 674 | -webkit-box-sizing: border-box; 675 | box-sizing: border-box; 676 | } 677 | .flatpickr-time { 678 | text-align: center; 679 | outline: 0; 680 | display: block; 681 | height: 0; 682 | line-height: 40px; 683 | max-height: 40px; 684 | -webkit-box-sizing: border-box; 685 | box-sizing: border-box; 686 | overflow: hidden; 687 | display: -webkit-box; 688 | display: -webkit-flex; 689 | display: -ms-flexbox; 690 | display: flex; 691 | background: #fff; 692 | border-radius: 0 0 5px 5px; 693 | } 694 | .flatpickr-time:after { 695 | content: ""; 696 | display: table; 697 | clear: both; 698 | } 699 | .flatpickr-time .numInputWrapper { 700 | -webkit-box-flex: 1; 701 | -webkit-flex: 1; 702 | -ms-flex: 1; 703 | flex: 1; 704 | width: 40%; 705 | height: 40px; 706 | float: left; 707 | } 708 | .flatpickr-time .numInputWrapper span.arrowUp:after { 709 | border-bottom-color: #484848; 710 | } 711 | .flatpickr-time .numInputWrapper span.arrowDown:after { 712 | border-top-color: #484848; 713 | } 714 | .flatpickr-time.hasSeconds .numInputWrapper { 715 | width: 26%; 716 | } 717 | .flatpickr-time.time24hr .numInputWrapper { 718 | width: 49%; 719 | } 720 | .flatpickr-time input { 721 | background: transparent; 722 | -webkit-box-shadow: none; 723 | box-shadow: none; 724 | border: 0; 725 | border-radius: 0; 726 | text-align: center; 727 | margin: 0; 728 | padding: 0; 729 | height: inherit; 730 | line-height: inherit; 731 | color: #484848; 732 | font-size: 14px; 733 | position: relative; 734 | -webkit-box-sizing: border-box; 735 | box-sizing: border-box; 736 | -webkit-appearance: textfield; 737 | -moz-appearance: textfield; 738 | appearance: textfield; 739 | } 740 | .flatpickr-time input.flatpickr-hour { 741 | font-weight: bold; 742 | } 743 | .flatpickr-time input.flatpickr-minute, 744 | .flatpickr-time input.flatpickr-second { 745 | font-weight: 400; 746 | } 747 | .flatpickr-time input:focus { 748 | outline: 0; 749 | border: 0; 750 | } 751 | .flatpickr-time .flatpickr-time-separator, 752 | .flatpickr-time .flatpickr-am-pm { 753 | height: inherit; 754 | float: left; 755 | line-height: inherit; 756 | color: #484848; 757 | font-weight: bold; 758 | width: 2%; 759 | -webkit-user-select: none; 760 | -moz-user-select: none; 761 | -ms-user-select: none; 762 | user-select: none; 763 | -webkit-align-self: center; 764 | -ms-flex-item-align: center; 765 | align-self: center; 766 | } 767 | .flatpickr-time .flatpickr-am-pm { 768 | outline: 0; 769 | width: 18%; 770 | cursor: pointer; 771 | text-align: center; 772 | font-weight: 400; 773 | } 774 | .flatpickr-time input:hover, 775 | .flatpickr-time .flatpickr-am-pm:hover, 776 | .flatpickr-time input:focus, 777 | .flatpickr-time .flatpickr-am-pm:focus { 778 | background: #eaeaea; 779 | } 780 | .flatpickr-input[readonly] { 781 | cursor: pointer; 782 | } 783 | @-webkit-keyframes fpFadeInDown { 784 | from { 785 | opacity: 0; 786 | -webkit-transform: translate3d(0, -20px, 0); 787 | transform: translate3d(0, -20px, 0); 788 | } 789 | to { 790 | opacity: 1; 791 | -webkit-transform: translate3d(0, 0, 0); 792 | transform: translate3d(0, 0, 0); 793 | } 794 | } 795 | @keyframes fpFadeInDown { 796 | from { 797 | opacity: 0; 798 | -webkit-transform: translate3d(0, -20px, 0); 799 | transform: translate3d(0, -20px, 0); 800 | } 801 | to { 802 | opacity: 1; 803 | -webkit-transform: translate3d(0, 0, 0); 804 | transform: translate3d(0, 0, 0); 805 | } 806 | } 807 | span.flatpickr-day.selected { 808 | font-weight: bold; 809 | } 810 | -------------------------------------------------------------------------------- /resources/dist/themes/confetti.css: -------------------------------------------------------------------------------- 1 | .flatpickr-calendar { 2 | background: transparent; 3 | opacity: 0; 4 | display: none; 5 | text-align: center; 6 | visibility: hidden; 7 | padding: 0; 8 | -webkit-animation: none; 9 | animation: none; 10 | direction: ltr; 11 | border: 0; 12 | font-size: 14px; 13 | line-height: 24px; 14 | border-radius: 5px; 15 | position: absolute; 16 | width: 307.875px; 17 | -webkit-box-sizing: border-box; 18 | box-sizing: border-box; 19 | -ms-touch-action: manipulation; 20 | touch-action: manipulation; 21 | -webkit-box-shadow: 0 3px 13px rgba(0,0,0,0.08); 22 | box-shadow: 0 3px 13px rgba(0,0,0,0.08); 23 | } 24 | .flatpickr-calendar.open, 25 | .flatpickr-calendar.inline { 26 | opacity: 1; 27 | max-height: 640px; 28 | visibility: visible; 29 | } 30 | .flatpickr-calendar.open { 31 | display: inline-block; 32 | z-index: 99999; 33 | } 34 | .flatpickr-calendar.animate.open { 35 | -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 36 | animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 37 | } 38 | .flatpickr-calendar.inline { 39 | display: block; 40 | position: relative; 41 | top: 2px; 42 | } 43 | .flatpickr-calendar.static { 44 | position: absolute; 45 | top: calc(100% + 2px); 46 | } 47 | .flatpickr-calendar.static.open { 48 | z-index: 999; 49 | display: block; 50 | } 51 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { 52 | -webkit-box-shadow: none !important; 53 | box-shadow: none !important; 54 | } 55 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { 56 | -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 57 | box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 58 | } 59 | .flatpickr-calendar .hasWeeks .dayContainer, 60 | .flatpickr-calendar .hasTime .dayContainer { 61 | border-bottom: 0; 62 | border-bottom-right-radius: 0; 63 | border-bottom-left-radius: 0; 64 | } 65 | .flatpickr-calendar .hasWeeks .dayContainer { 66 | border-left: 0; 67 | } 68 | .flatpickr-calendar.hasTime .flatpickr-time { 69 | height: 40px; 70 | border-top: 1px solid rgba(72,72,72,0.1); 71 | } 72 | .flatpickr-calendar.hasTime .flatpickr-innerContainer { 73 | border-bottom: 0; 74 | } 75 | .flatpickr-calendar.hasTime .flatpickr-time { 76 | border: 1px solid rgba(72,72,72,0.1); 77 | } 78 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { 79 | height: auto; 80 | } 81 | .flatpickr-calendar:before, 82 | .flatpickr-calendar:after { 83 | position: absolute; 84 | display: block; 85 | pointer-events: none; 86 | border: solid transparent; 87 | content: ''; 88 | height: 0; 89 | width: 0; 90 | left: 22px; 91 | } 92 | .flatpickr-calendar.rightMost:before, 93 | .flatpickr-calendar.arrowRight:before, 94 | .flatpickr-calendar.rightMost:after, 95 | .flatpickr-calendar.arrowRight:after { 96 | left: auto; 97 | right: 22px; 98 | } 99 | .flatpickr-calendar.arrowCenter:before, 100 | .flatpickr-calendar.arrowCenter:after { 101 | left: 50%; 102 | right: 50%; 103 | } 104 | .flatpickr-calendar:before { 105 | border-width: 5px; 106 | margin: 0 -5px; 107 | } 108 | .flatpickr-calendar:after { 109 | border-width: 4px; 110 | margin: 0 -4px; 111 | } 112 | .flatpickr-calendar.arrowTop:before, 113 | .flatpickr-calendar.arrowTop:after { 114 | bottom: 100%; 115 | } 116 | .flatpickr-calendar.arrowTop:before { 117 | border-bottom-color: rgba(72,72,72,0.1); 118 | } 119 | .flatpickr-calendar.arrowTop:after { 120 | border-bottom-color: #ffb866; 121 | } 122 | .flatpickr-calendar.arrowBottom:before, 123 | .flatpickr-calendar.arrowBottom:after { 124 | top: 100%; 125 | } 126 | .flatpickr-calendar.arrowBottom:before { 127 | border-top-color: rgba(72,72,72,0.1); 128 | } 129 | .flatpickr-calendar.arrowBottom:after { 130 | border-top-color: #ffb866; 131 | } 132 | .flatpickr-calendar:focus { 133 | outline: 0; 134 | } 135 | .flatpickr-wrapper { 136 | position: relative; 137 | display: inline-block; 138 | } 139 | .flatpickr-months { 140 | display: -webkit-box; 141 | display: -webkit-flex; 142 | display: -ms-flexbox; 143 | display: flex; 144 | } 145 | .flatpickr-months .flatpickr-month { 146 | border-radius: 5px 5px 0 0; 147 | background: #ffb866; 148 | color: #fff; 149 | fill: #fff; 150 | height: 34px; 151 | line-height: 1; 152 | text-align: center; 153 | position: relative; 154 | -webkit-user-select: none; 155 | -moz-user-select: none; 156 | -ms-user-select: none; 157 | user-select: none; 158 | overflow: hidden; 159 | -webkit-box-flex: 1; 160 | -webkit-flex: 1; 161 | -ms-flex: 1; 162 | flex: 1; 163 | } 164 | .flatpickr-months .flatpickr-prev-month, 165 | .flatpickr-months .flatpickr-next-month { 166 | -webkit-user-select: none; 167 | -moz-user-select: none; 168 | -ms-user-select: none; 169 | user-select: none; 170 | text-decoration: none; 171 | cursor: pointer; 172 | position: absolute; 173 | top: 0; 174 | height: 34px; 175 | padding: 10px; 176 | z-index: 3; 177 | color: #fff; 178 | fill: #fff; 179 | } 180 | .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, 181 | .flatpickr-months .flatpickr-next-month.flatpickr-disabled { 182 | display: none; 183 | } 184 | .flatpickr-months .flatpickr-prev-month i, 185 | .flatpickr-months .flatpickr-next-month i { 186 | position: relative; 187 | } 188 | .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, 189 | .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { 190 | /* 191 | /*rtl:begin:ignore*/ 192 | /* 193 | */ 194 | left: 0; 195 | /* 196 | /*rtl:end:ignore*/ 197 | /* 198 | */ 199 | } 200 | /* 201 | /*rtl:begin:ignore*/ 202 | /* 203 | /*rtl:end:ignore*/ 204 | .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, 205 | .flatpickr-months .flatpickr-next-month.flatpickr-next-month { 206 | /* 207 | /*rtl:begin:ignore*/ 208 | /* 209 | */ 210 | right: 0; 211 | /* 212 | /*rtl:end:ignore*/ 213 | /* 214 | */ 215 | } 216 | /* 217 | /*rtl:begin:ignore*/ 218 | /* 219 | /*rtl:end:ignore*/ 220 | .flatpickr-months .flatpickr-prev-month:hover, 221 | .flatpickr-months .flatpickr-next-month:hover { 222 | color: #bbb; 223 | } 224 | .flatpickr-months .flatpickr-prev-month:hover svg, 225 | .flatpickr-months .flatpickr-next-month:hover svg { 226 | fill: #f64747; 227 | } 228 | .flatpickr-months .flatpickr-prev-month svg, 229 | .flatpickr-months .flatpickr-next-month svg { 230 | width: 14px; 231 | height: 14px; 232 | } 233 | .flatpickr-months .flatpickr-prev-month svg path, 234 | .flatpickr-months .flatpickr-next-month svg path { 235 | -webkit-transition: fill 0.1s; 236 | transition: fill 0.1s; 237 | fill: inherit; 238 | } 239 | .numInputWrapper { 240 | position: relative; 241 | height: auto; 242 | } 243 | .numInputWrapper input, 244 | .numInputWrapper span { 245 | display: inline-block; 246 | } 247 | .numInputWrapper input { 248 | width: 100%; 249 | } 250 | .numInputWrapper input::-ms-clear { 251 | display: none; 252 | } 253 | .numInputWrapper input::-webkit-outer-spin-button, 254 | .numInputWrapper input::-webkit-inner-spin-button { 255 | margin: 0; 256 | -webkit-appearance: none; 257 | } 258 | .numInputWrapper span { 259 | position: absolute; 260 | right: 0; 261 | width: 14px; 262 | padding: 0 4px 0 2px; 263 | height: 50%; 264 | line-height: 50%; 265 | opacity: 0; 266 | cursor: pointer; 267 | border: 1px solid rgba(72,72,72,0.15); 268 | -webkit-box-sizing: border-box; 269 | box-sizing: border-box; 270 | } 271 | .numInputWrapper span:hover { 272 | background: rgba(0,0,0,0.1); 273 | } 274 | .numInputWrapper span:active { 275 | background: rgba(0,0,0,0.2); 276 | } 277 | .numInputWrapper span:after { 278 | display: block; 279 | content: ""; 280 | position: absolute; 281 | } 282 | .numInputWrapper span.arrowUp { 283 | top: 0; 284 | border-bottom: 0; 285 | } 286 | .numInputWrapper span.arrowUp:after { 287 | border-left: 4px solid transparent; 288 | border-right: 4px solid transparent; 289 | border-bottom: 4px solid rgba(72,72,72,0.6); 290 | top: 26%; 291 | } 292 | .numInputWrapper span.arrowDown { 293 | top: 50%; 294 | } 295 | .numInputWrapper span.arrowDown:after { 296 | border-left: 4px solid transparent; 297 | border-right: 4px solid transparent; 298 | border-top: 4px solid rgba(72,72,72,0.6); 299 | top: 40%; 300 | } 301 | .numInputWrapper span svg { 302 | width: inherit; 303 | height: auto; 304 | } 305 | .numInputWrapper span svg path { 306 | fill: rgba(255,255,255,0.5); 307 | } 308 | .numInputWrapper:hover { 309 | background: rgba(0,0,0,0.05); 310 | } 311 | .numInputWrapper:hover span { 312 | opacity: 1; 313 | } 314 | .flatpickr-current-month { 315 | font-size: 135%; 316 | line-height: inherit; 317 | font-weight: 300; 318 | color: inherit; 319 | position: absolute; 320 | width: 75%; 321 | left: 12.5%; 322 | padding: 7.48px 0 0 0; 323 | line-height: 1; 324 | height: 34px; 325 | display: inline-block; 326 | text-align: center; 327 | -webkit-transform: translate3d(0px, 0px, 0px); 328 | transform: translate3d(0px, 0px, 0px); 329 | } 330 | .flatpickr-current-month span.cur-month { 331 | font-family: inherit; 332 | font-weight: 700; 333 | color: inherit; 334 | display: inline-block; 335 | margin-left: 0.5ch; 336 | padding: 0; 337 | } 338 | .flatpickr-current-month span.cur-month:hover { 339 | background: rgba(0,0,0,0.05); 340 | } 341 | .flatpickr-current-month .numInputWrapper { 342 | width: 6ch; 343 | width: 7ch\0; 344 | display: inline-block; 345 | } 346 | .flatpickr-current-month .numInputWrapper span.arrowUp:after { 347 | border-bottom-color: #fff; 348 | } 349 | .flatpickr-current-month .numInputWrapper span.arrowDown:after { 350 | border-top-color: #fff; 351 | } 352 | .flatpickr-current-month input.cur-year { 353 | background: transparent; 354 | -webkit-box-sizing: border-box; 355 | box-sizing: border-box; 356 | color: inherit; 357 | cursor: text; 358 | padding: 0 0 0 0.5ch; 359 | margin: 0; 360 | display: inline-block; 361 | font-size: inherit; 362 | font-family: inherit; 363 | font-weight: 300; 364 | line-height: inherit; 365 | height: auto; 366 | border: 0; 367 | border-radius: 0; 368 | vertical-align: initial; 369 | -webkit-appearance: textfield; 370 | -moz-appearance: textfield; 371 | appearance: textfield; 372 | } 373 | .flatpickr-current-month input.cur-year:focus { 374 | outline: 0; 375 | } 376 | .flatpickr-current-month input.cur-year[disabled], 377 | .flatpickr-current-month input.cur-year[disabled]:hover { 378 | font-size: 100%; 379 | color: rgba(255,255,255,0.5); 380 | background: transparent; 381 | pointer-events: none; 382 | } 383 | .flatpickr-current-month .flatpickr-monthDropdown-months { 384 | appearance: menulist; 385 | background: #ffb866; 386 | border: none; 387 | border-radius: 0; 388 | box-sizing: border-box; 389 | color: inherit; 390 | cursor: pointer; 391 | font-size: inherit; 392 | font-family: inherit; 393 | font-weight: 300; 394 | height: auto; 395 | line-height: inherit; 396 | margin: -1px 0 0 0; 397 | outline: none; 398 | padding: 0 0 0 0.5ch; 399 | position: relative; 400 | vertical-align: initial; 401 | -webkit-box-sizing: border-box; 402 | -webkit-appearance: menulist; 403 | -moz-appearance: menulist; 404 | width: auto; 405 | } 406 | .flatpickr-current-month .flatpickr-monthDropdown-months:focus, 407 | .flatpickr-current-month .flatpickr-monthDropdown-months:active { 408 | outline: none; 409 | } 410 | .flatpickr-current-month .flatpickr-monthDropdown-months:hover { 411 | background: rgba(0,0,0,0.05); 412 | } 413 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { 414 | background-color: #ffb866; 415 | outline: none; 416 | padding: 0; 417 | } 418 | .flatpickr-weekdays { 419 | background: #ffb866; 420 | text-align: center; 421 | overflow: hidden; 422 | width: 100%; 423 | display: -webkit-box; 424 | display: -webkit-flex; 425 | display: -ms-flexbox; 426 | display: flex; 427 | -webkit-box-align: center; 428 | -webkit-align-items: center; 429 | -ms-flex-align: center; 430 | align-items: center; 431 | height: 28px; 432 | } 433 | .flatpickr-weekdays .flatpickr-weekdaycontainer { 434 | display: -webkit-box; 435 | display: -webkit-flex; 436 | display: -ms-flexbox; 437 | display: flex; 438 | -webkit-box-flex: 1; 439 | -webkit-flex: 1; 440 | -ms-flex: 1; 441 | flex: 1; 442 | } 443 | span.flatpickr-weekday { 444 | cursor: default; 445 | font-size: 90%; 446 | background: #ffb866; 447 | color: rgba(0,0,0,0.54); 448 | line-height: 1; 449 | margin: 0; 450 | text-align: center; 451 | display: block; 452 | -webkit-box-flex: 1; 453 | -webkit-flex: 1; 454 | -ms-flex: 1; 455 | flex: 1; 456 | font-weight: bolder; 457 | } 458 | .dayContainer, 459 | .flatpickr-weeks { 460 | padding: 1px 0 0 0; 461 | } 462 | .flatpickr-days { 463 | position: relative; 464 | overflow: hidden; 465 | display: -webkit-box; 466 | display: -webkit-flex; 467 | display: -ms-flexbox; 468 | display: flex; 469 | -webkit-box-align: start; 470 | -webkit-align-items: flex-start; 471 | -ms-flex-align: start; 472 | align-items: flex-start; 473 | width: 307.875px; 474 | border-left: 1px solid rgba(72,72,72,0.1); 475 | border-right: 1px solid rgba(72,72,72,0.1); 476 | } 477 | .flatpickr-days:focus { 478 | outline: 0; 479 | } 480 | .dayContainer { 481 | padding: 0; 482 | outline: 0; 483 | text-align: left; 484 | width: 307.875px; 485 | min-width: 307.875px; 486 | max-width: 307.875px; 487 | -webkit-box-sizing: border-box; 488 | box-sizing: border-box; 489 | display: inline-block; 490 | display: -ms-flexbox; 491 | display: -webkit-box; 492 | display: -webkit-flex; 493 | display: flex; 494 | -webkit-flex-wrap: wrap; 495 | flex-wrap: wrap; 496 | -ms-flex-wrap: wrap; 497 | -ms-flex-pack: justify; 498 | -webkit-justify-content: space-around; 499 | justify-content: space-around; 500 | -webkit-transform: translate3d(0px, 0px, 0px); 501 | transform: translate3d(0px, 0px, 0px); 502 | opacity: 1; 503 | } 504 | .dayContainer + .dayContainer { 505 | -webkit-box-shadow: -1px 0 0 rgba(72,72,72,0.1); 506 | box-shadow: -1px 0 0 rgba(72,72,72,0.1); 507 | } 508 | .flatpickr-day { 509 | background: none; 510 | border: 1px solid transparent; 511 | border-radius: 150px; 512 | -webkit-box-sizing: border-box; 513 | box-sizing: border-box; 514 | color: #484848; 515 | cursor: pointer; 516 | font-weight: 400; 517 | width: 14.2857143%; 518 | -webkit-flex-basis: 14.2857143%; 519 | -ms-flex-preferred-size: 14.2857143%; 520 | flex-basis: 14.2857143%; 521 | max-width: 39px; 522 | height: 39px; 523 | line-height: 39px; 524 | margin: 0; 525 | display: inline-block; 526 | position: relative; 527 | -webkit-box-pack: center; 528 | -webkit-justify-content: center; 529 | -ms-flex-pack: center; 530 | justify-content: center; 531 | text-align: center; 532 | } 533 | .flatpickr-day.inRange, 534 | .flatpickr-day.prevMonthDay.inRange, 535 | .flatpickr-day.nextMonthDay.inRange, 536 | .flatpickr-day.today.inRange, 537 | .flatpickr-day.prevMonthDay.today.inRange, 538 | .flatpickr-day.nextMonthDay.today.inRange, 539 | .flatpickr-day:hover, 540 | .flatpickr-day.prevMonthDay:hover, 541 | .flatpickr-day.nextMonthDay:hover, 542 | .flatpickr-day:focus, 543 | .flatpickr-day.prevMonthDay:focus, 544 | .flatpickr-day.nextMonthDay:focus { 545 | cursor: pointer; 546 | outline: 0; 547 | background: #e2e2e2; 548 | border-color: #e2e2e2; 549 | } 550 | .flatpickr-day.today { 551 | border-color: #bbb; 552 | } 553 | .flatpickr-day.today:hover, 554 | .flatpickr-day.today:focus { 555 | border-color: #bbb; 556 | background: #bbb; 557 | color: #fff; 558 | } 559 | .flatpickr-day.selected, 560 | .flatpickr-day.startRange, 561 | .flatpickr-day.endRange, 562 | .flatpickr-day.selected.inRange, 563 | .flatpickr-day.startRange.inRange, 564 | .flatpickr-day.endRange.inRange, 565 | .flatpickr-day.selected:focus, 566 | .flatpickr-day.startRange:focus, 567 | .flatpickr-day.endRange:focus, 568 | .flatpickr-day.selected:hover, 569 | .flatpickr-day.startRange:hover, 570 | .flatpickr-day.endRange:hover, 571 | .flatpickr-day.selected.prevMonthDay, 572 | .flatpickr-day.startRange.prevMonthDay, 573 | .flatpickr-day.endRange.prevMonthDay, 574 | .flatpickr-day.selected.nextMonthDay, 575 | .flatpickr-day.startRange.nextMonthDay, 576 | .flatpickr-day.endRange.nextMonthDay { 577 | background: #ffb866; 578 | -webkit-box-shadow: none; 579 | box-shadow: none; 580 | color: #fff; 581 | border-color: #ffb866; 582 | } 583 | .flatpickr-day.selected.startRange, 584 | .flatpickr-day.startRange.startRange, 585 | .flatpickr-day.endRange.startRange { 586 | border-radius: 50px 0 0 50px; 587 | } 588 | .flatpickr-day.selected.endRange, 589 | .flatpickr-day.startRange.endRange, 590 | .flatpickr-day.endRange.endRange { 591 | border-radius: 0 50px 50px 0; 592 | } 593 | .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 594 | .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 595 | .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { 596 | -webkit-box-shadow: -10px 0 0 #ffb866; 597 | box-shadow: -10px 0 0 #ffb866; 598 | } 599 | .flatpickr-day.selected.startRange.endRange, 600 | .flatpickr-day.startRange.startRange.endRange, 601 | .flatpickr-day.endRange.startRange.endRange { 602 | border-radius: 50px; 603 | } 604 | .flatpickr-day.inRange { 605 | border-radius: 0; 606 | -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 607 | box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 608 | } 609 | .flatpickr-day.flatpickr-disabled, 610 | .flatpickr-day.flatpickr-disabled:hover, 611 | .flatpickr-day.prevMonthDay, 612 | .flatpickr-day.nextMonthDay, 613 | .flatpickr-day.notAllowed, 614 | .flatpickr-day.notAllowed.prevMonthDay, 615 | .flatpickr-day.notAllowed.nextMonthDay { 616 | color: rgba(72,72,72,0.3); 617 | background: transparent; 618 | border-color: transparent; 619 | cursor: default; 620 | } 621 | .flatpickr-day.flatpickr-disabled, 622 | .flatpickr-day.flatpickr-disabled:hover { 623 | cursor: not-allowed; 624 | color: rgba(72,72,72,0.1); 625 | } 626 | .flatpickr-day.week.selected { 627 | border-radius: 0; 628 | -webkit-box-shadow: -5px 0 0 #ffb866, 5px 0 0 #ffb866; 629 | box-shadow: -5px 0 0 #ffb866, 5px 0 0 #ffb866; 630 | } 631 | .flatpickr-day.hidden { 632 | visibility: hidden; 633 | } 634 | .rangeMode .flatpickr-day { 635 | margin-top: 1px; 636 | } 637 | .flatpickr-weekwrapper { 638 | float: left; 639 | } 640 | .flatpickr-weekwrapper .flatpickr-weeks { 641 | padding: 0 12px; 642 | border-left: 1px solid rgba(72,72,72,0.1); 643 | } 644 | .flatpickr-weekwrapper .flatpickr-weekday { 645 | float: none; 646 | width: 100%; 647 | line-height: 28px; 648 | } 649 | .flatpickr-weekwrapper span.flatpickr-day, 650 | .flatpickr-weekwrapper span.flatpickr-day:hover { 651 | display: block; 652 | width: 100%; 653 | max-width: none; 654 | color: rgba(72,72,72,0.3); 655 | background: transparent; 656 | cursor: default; 657 | border: none; 658 | } 659 | .flatpickr-innerContainer { 660 | display: block; 661 | display: -webkit-box; 662 | display: -webkit-flex; 663 | display: -ms-flexbox; 664 | display: flex; 665 | -webkit-box-sizing: border-box; 666 | box-sizing: border-box; 667 | overflow: hidden; 668 | background: #fff; 669 | border-bottom: 1px solid rgba(72,72,72,0.1); 670 | } 671 | .flatpickr-rContainer { 672 | display: inline-block; 673 | padding: 0; 674 | -webkit-box-sizing: border-box; 675 | box-sizing: border-box; 676 | } 677 | .flatpickr-time { 678 | text-align: center; 679 | outline: 0; 680 | display: block; 681 | height: 0; 682 | line-height: 40px; 683 | max-height: 40px; 684 | -webkit-box-sizing: border-box; 685 | box-sizing: border-box; 686 | overflow: hidden; 687 | display: -webkit-box; 688 | display: -webkit-flex; 689 | display: -ms-flexbox; 690 | display: flex; 691 | background: #fff; 692 | border-radius: 0 0 5px 5px; 693 | } 694 | .flatpickr-time:after { 695 | content: ""; 696 | display: table; 697 | clear: both; 698 | } 699 | .flatpickr-time .numInputWrapper { 700 | -webkit-box-flex: 1; 701 | -webkit-flex: 1; 702 | -ms-flex: 1; 703 | flex: 1; 704 | width: 40%; 705 | height: 40px; 706 | float: left; 707 | } 708 | .flatpickr-time .numInputWrapper span.arrowUp:after { 709 | border-bottom-color: #484848; 710 | } 711 | .flatpickr-time .numInputWrapper span.arrowDown:after { 712 | border-top-color: #484848; 713 | } 714 | .flatpickr-time.hasSeconds .numInputWrapper { 715 | width: 26%; 716 | } 717 | .flatpickr-time.time24hr .numInputWrapper { 718 | width: 49%; 719 | } 720 | .flatpickr-time input { 721 | background: transparent; 722 | -webkit-box-shadow: none; 723 | box-shadow: none; 724 | border: 0; 725 | border-radius: 0; 726 | text-align: center; 727 | margin: 0; 728 | padding: 0; 729 | height: inherit; 730 | line-height: inherit; 731 | color: #484848; 732 | font-size: 14px; 733 | position: relative; 734 | -webkit-box-sizing: border-box; 735 | box-sizing: border-box; 736 | -webkit-appearance: textfield; 737 | -moz-appearance: textfield; 738 | appearance: textfield; 739 | } 740 | .flatpickr-time input.flatpickr-hour { 741 | font-weight: bold; 742 | } 743 | .flatpickr-time input.flatpickr-minute, 744 | .flatpickr-time input.flatpickr-second { 745 | font-weight: 400; 746 | } 747 | .flatpickr-time input:focus { 748 | outline: 0; 749 | border: 0; 750 | } 751 | .flatpickr-time .flatpickr-time-separator, 752 | .flatpickr-time .flatpickr-am-pm { 753 | height: inherit; 754 | float: left; 755 | line-height: inherit; 756 | color: #484848; 757 | font-weight: bold; 758 | width: 2%; 759 | -webkit-user-select: none; 760 | -moz-user-select: none; 761 | -ms-user-select: none; 762 | user-select: none; 763 | -webkit-align-self: center; 764 | -ms-flex-item-align: center; 765 | align-self: center; 766 | } 767 | .flatpickr-time .flatpickr-am-pm { 768 | outline: 0; 769 | width: 18%; 770 | cursor: pointer; 771 | text-align: center; 772 | font-weight: 400; 773 | } 774 | .flatpickr-time input:hover, 775 | .flatpickr-time .flatpickr-am-pm:hover, 776 | .flatpickr-time input:focus, 777 | .flatpickr-time .flatpickr-am-pm:focus { 778 | background: #eaeaea; 779 | } 780 | .flatpickr-input[readonly] { 781 | cursor: pointer; 782 | } 783 | @-webkit-keyframes fpFadeInDown { 784 | from { 785 | opacity: 0; 786 | -webkit-transform: translate3d(0, -20px, 0); 787 | transform: translate3d(0, -20px, 0); 788 | } 789 | to { 790 | opacity: 1; 791 | -webkit-transform: translate3d(0, 0, 0); 792 | transform: translate3d(0, 0, 0); 793 | } 794 | } 795 | @keyframes fpFadeInDown { 796 | from { 797 | opacity: 0; 798 | -webkit-transform: translate3d(0, -20px, 0); 799 | transform: translate3d(0, -20px, 0); 800 | } 801 | to { 802 | opacity: 1; 803 | -webkit-transform: translate3d(0, 0, 0); 804 | transform: translate3d(0, 0, 0); 805 | } 806 | } 807 | -------------------------------------------------------------------------------- /resources/dist/themes/material_blue.css: -------------------------------------------------------------------------------- 1 | .flatpickr-calendar { 2 | background: transparent; 3 | opacity: 0; 4 | display: none; 5 | text-align: center; 6 | visibility: hidden; 7 | padding: 0; 8 | -webkit-animation: none; 9 | animation: none; 10 | direction: ltr; 11 | border: 0; 12 | font-size: 14px; 13 | line-height: 24px; 14 | border-radius: 5px; 15 | position: absolute; 16 | width: 307.875px; 17 | -webkit-box-sizing: border-box; 18 | box-sizing: border-box; 19 | -ms-touch-action: manipulation; 20 | touch-action: manipulation; 21 | -webkit-box-shadow: 0 3px 13px rgba(0,0,0,0.08); 22 | box-shadow: 0 3px 13px rgba(0,0,0,0.08); 23 | } 24 | .flatpickr-calendar.open, 25 | .flatpickr-calendar.inline { 26 | opacity: 1; 27 | max-height: 640px; 28 | visibility: visible; 29 | } 30 | .flatpickr-calendar.open { 31 | display: inline-block; 32 | z-index: 99999; 33 | } 34 | .flatpickr-calendar.animate.open { 35 | -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 36 | animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 37 | } 38 | .flatpickr-calendar.inline { 39 | display: block; 40 | position: relative; 41 | top: 2px; 42 | } 43 | .flatpickr-calendar.static { 44 | position: absolute; 45 | top: calc(100% + 2px); 46 | } 47 | .flatpickr-calendar.static.open { 48 | z-index: 999; 49 | display: block; 50 | } 51 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { 52 | -webkit-box-shadow: none !important; 53 | box-shadow: none !important; 54 | } 55 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { 56 | -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 57 | box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 58 | } 59 | .flatpickr-calendar .hasWeeks .dayContainer, 60 | .flatpickr-calendar .hasTime .dayContainer { 61 | border-bottom: 0; 62 | border-bottom-right-radius: 0; 63 | border-bottom-left-radius: 0; 64 | } 65 | .flatpickr-calendar .hasWeeks .dayContainer { 66 | border-left: 0; 67 | } 68 | .flatpickr-calendar.hasTime .flatpickr-time { 69 | height: 40px; 70 | border-top: 1px solid rgba(72,72,72,0.2); 71 | } 72 | .flatpickr-calendar.hasTime .flatpickr-innerContainer { 73 | border-bottom: 0; 74 | } 75 | .flatpickr-calendar.hasTime .flatpickr-time { 76 | border: 1px solid rgba(72,72,72,0.2); 77 | } 78 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { 79 | height: auto; 80 | } 81 | .flatpickr-calendar:before, 82 | .flatpickr-calendar:after { 83 | position: absolute; 84 | display: block; 85 | pointer-events: none; 86 | border: solid transparent; 87 | content: ''; 88 | height: 0; 89 | width: 0; 90 | left: 22px; 91 | } 92 | .flatpickr-calendar.rightMost:before, 93 | .flatpickr-calendar.arrowRight:before, 94 | .flatpickr-calendar.rightMost:after, 95 | .flatpickr-calendar.arrowRight:after { 96 | left: auto; 97 | right: 22px; 98 | } 99 | .flatpickr-calendar.arrowCenter:before, 100 | .flatpickr-calendar.arrowCenter:after { 101 | left: 50%; 102 | right: 50%; 103 | } 104 | .flatpickr-calendar:before { 105 | border-width: 5px; 106 | margin: 0 -5px; 107 | } 108 | .flatpickr-calendar:after { 109 | border-width: 4px; 110 | margin: 0 -4px; 111 | } 112 | .flatpickr-calendar.arrowTop:before, 113 | .flatpickr-calendar.arrowTop:after { 114 | bottom: 100%; 115 | } 116 | .flatpickr-calendar.arrowTop:before { 117 | border-bottom-color: rgba(72,72,72,0.2); 118 | } 119 | .flatpickr-calendar.arrowTop:after { 120 | border-bottom-color: #42a5f5; 121 | } 122 | .flatpickr-calendar.arrowBottom:before, 123 | .flatpickr-calendar.arrowBottom:after { 124 | top: 100%; 125 | } 126 | .flatpickr-calendar.arrowBottom:before { 127 | border-top-color: rgba(72,72,72,0.2); 128 | } 129 | .flatpickr-calendar.arrowBottom:after { 130 | border-top-color: #42a5f5; 131 | } 132 | .flatpickr-calendar:focus { 133 | outline: 0; 134 | } 135 | .flatpickr-wrapper { 136 | position: relative; 137 | display: inline-block; 138 | } 139 | .flatpickr-months { 140 | display: -webkit-box; 141 | display: -webkit-flex; 142 | display: -ms-flexbox; 143 | display: flex; 144 | } 145 | .flatpickr-months .flatpickr-month { 146 | border-radius: 5px 5px 0 0; 147 | background: #42a5f5; 148 | color: #fff; 149 | fill: #fff; 150 | height: 34px; 151 | line-height: 1; 152 | text-align: center; 153 | position: relative; 154 | -webkit-user-select: none; 155 | -moz-user-select: none; 156 | -ms-user-select: none; 157 | user-select: none; 158 | overflow: hidden; 159 | -webkit-box-flex: 1; 160 | -webkit-flex: 1; 161 | -ms-flex: 1; 162 | flex: 1; 163 | } 164 | .flatpickr-months .flatpickr-prev-month, 165 | .flatpickr-months .flatpickr-next-month { 166 | -webkit-user-select: none; 167 | -moz-user-select: none; 168 | -ms-user-select: none; 169 | user-select: none; 170 | text-decoration: none; 171 | cursor: pointer; 172 | position: absolute; 173 | top: 0; 174 | height: 34px; 175 | padding: 10px; 176 | z-index: 3; 177 | color: #fff; 178 | fill: #fff; 179 | } 180 | .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, 181 | .flatpickr-months .flatpickr-next-month.flatpickr-disabled { 182 | display: none; 183 | } 184 | .flatpickr-months .flatpickr-prev-month i, 185 | .flatpickr-months .flatpickr-next-month i { 186 | position: relative; 187 | } 188 | .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, 189 | .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { 190 | /* 191 | /*rtl:begin:ignore*/ 192 | /* 193 | */ 194 | left: 0; 195 | /* 196 | /*rtl:end:ignore*/ 197 | /* 198 | */ 199 | } 200 | /* 201 | /*rtl:begin:ignore*/ 202 | /* 203 | /*rtl:end:ignore*/ 204 | .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, 205 | .flatpickr-months .flatpickr-next-month.flatpickr-next-month { 206 | /* 207 | /*rtl:begin:ignore*/ 208 | /* 209 | */ 210 | right: 0; 211 | /* 212 | /*rtl:end:ignore*/ 213 | /* 214 | */ 215 | } 216 | /* 217 | /*rtl:begin:ignore*/ 218 | /* 219 | /*rtl:end:ignore*/ 220 | .flatpickr-months .flatpickr-prev-month:hover, 221 | .flatpickr-months .flatpickr-next-month:hover { 222 | color: #bbb; 223 | } 224 | .flatpickr-months .flatpickr-prev-month:hover svg, 225 | .flatpickr-months .flatpickr-next-month:hover svg { 226 | fill: #f64747; 227 | } 228 | .flatpickr-months .flatpickr-prev-month svg, 229 | .flatpickr-months .flatpickr-next-month svg { 230 | width: 14px; 231 | height: 14px; 232 | } 233 | .flatpickr-months .flatpickr-prev-month svg path, 234 | .flatpickr-months .flatpickr-next-month svg path { 235 | -webkit-transition: fill 0.1s; 236 | transition: fill 0.1s; 237 | fill: inherit; 238 | } 239 | .numInputWrapper { 240 | position: relative; 241 | height: auto; 242 | } 243 | .numInputWrapper input, 244 | .numInputWrapper span { 245 | display: inline-block; 246 | } 247 | .numInputWrapper input { 248 | width: 100%; 249 | } 250 | .numInputWrapper input::-ms-clear { 251 | display: none; 252 | } 253 | .numInputWrapper input::-webkit-outer-spin-button, 254 | .numInputWrapper input::-webkit-inner-spin-button { 255 | margin: 0; 256 | -webkit-appearance: none; 257 | } 258 | .numInputWrapper span { 259 | position: absolute; 260 | right: 0; 261 | width: 14px; 262 | padding: 0 4px 0 2px; 263 | height: 50%; 264 | line-height: 50%; 265 | opacity: 0; 266 | cursor: pointer; 267 | border: 1px solid rgba(72,72,72,0.15); 268 | -webkit-box-sizing: border-box; 269 | box-sizing: border-box; 270 | } 271 | .numInputWrapper span:hover { 272 | background: rgba(0,0,0,0.1); 273 | } 274 | .numInputWrapper span:active { 275 | background: rgba(0,0,0,0.2); 276 | } 277 | .numInputWrapper span:after { 278 | display: block; 279 | content: ""; 280 | position: absolute; 281 | } 282 | .numInputWrapper span.arrowUp { 283 | top: 0; 284 | border-bottom: 0; 285 | } 286 | .numInputWrapper span.arrowUp:after { 287 | border-left: 4px solid transparent; 288 | border-right: 4px solid transparent; 289 | border-bottom: 4px solid rgba(72,72,72,0.6); 290 | top: 26%; 291 | } 292 | .numInputWrapper span.arrowDown { 293 | top: 50%; 294 | } 295 | .numInputWrapper span.arrowDown:after { 296 | border-left: 4px solid transparent; 297 | border-right: 4px solid transparent; 298 | border-top: 4px solid rgba(72,72,72,0.6); 299 | top: 40%; 300 | } 301 | .numInputWrapper span svg { 302 | width: inherit; 303 | height: auto; 304 | } 305 | .numInputWrapper span svg path { 306 | fill: rgba(255,255,255,0.5); 307 | } 308 | .numInputWrapper:hover { 309 | background: rgba(0,0,0,0.05); 310 | } 311 | .numInputWrapper:hover span { 312 | opacity: 1; 313 | } 314 | .flatpickr-current-month { 315 | font-size: 135%; 316 | line-height: inherit; 317 | font-weight: 300; 318 | color: inherit; 319 | position: absolute; 320 | width: 75%; 321 | left: 12.5%; 322 | padding: 7.48px 0 0 0; 323 | line-height: 1; 324 | height: 34px; 325 | display: inline-block; 326 | text-align: center; 327 | -webkit-transform: translate3d(0px, 0px, 0px); 328 | transform: translate3d(0px, 0px, 0px); 329 | } 330 | .flatpickr-current-month span.cur-month { 331 | font-family: inherit; 332 | font-weight: 700; 333 | color: inherit; 334 | display: inline-block; 335 | margin-left: 0.5ch; 336 | padding: 0; 337 | } 338 | .flatpickr-current-month span.cur-month:hover { 339 | background: rgba(0,0,0,0.05); 340 | } 341 | .flatpickr-current-month .numInputWrapper { 342 | width: 6ch; 343 | width: 7ch\0; 344 | display: inline-block; 345 | } 346 | .flatpickr-current-month .numInputWrapper span.arrowUp:after { 347 | border-bottom-color: #fff; 348 | } 349 | .flatpickr-current-month .numInputWrapper span.arrowDown:after { 350 | border-top-color: #fff; 351 | } 352 | .flatpickr-current-month input.cur-year { 353 | background: transparent; 354 | -webkit-box-sizing: border-box; 355 | box-sizing: border-box; 356 | color: inherit; 357 | cursor: text; 358 | padding: 0 0 0 0.5ch; 359 | margin: 0; 360 | display: inline-block; 361 | font-size: inherit; 362 | font-family: inherit; 363 | font-weight: 300; 364 | line-height: inherit; 365 | height: auto; 366 | border: 0; 367 | border-radius: 0; 368 | vertical-align: initial; 369 | -webkit-appearance: textfield; 370 | -moz-appearance: textfield; 371 | appearance: textfield; 372 | } 373 | .flatpickr-current-month input.cur-year:focus { 374 | outline: 0; 375 | } 376 | .flatpickr-current-month input.cur-year[disabled], 377 | .flatpickr-current-month input.cur-year[disabled]:hover { 378 | font-size: 100%; 379 | color: rgba(255,255,255,0.5); 380 | background: transparent; 381 | pointer-events: none; 382 | } 383 | .flatpickr-current-month .flatpickr-monthDropdown-months { 384 | appearance: menulist; 385 | background: #42a5f5; 386 | border: none; 387 | border-radius: 0; 388 | box-sizing: border-box; 389 | color: inherit; 390 | cursor: pointer; 391 | font-size: inherit; 392 | font-family: inherit; 393 | font-weight: 300; 394 | height: auto; 395 | line-height: inherit; 396 | margin: -1px 0 0 0; 397 | outline: none; 398 | padding: 0 0 0 0.5ch; 399 | position: relative; 400 | vertical-align: initial; 401 | -webkit-box-sizing: border-box; 402 | -webkit-appearance: menulist; 403 | -moz-appearance: menulist; 404 | width: auto; 405 | } 406 | .flatpickr-current-month .flatpickr-monthDropdown-months:focus, 407 | .flatpickr-current-month .flatpickr-monthDropdown-months:active { 408 | outline: none; 409 | } 410 | .flatpickr-current-month .flatpickr-monthDropdown-months:hover { 411 | background: rgba(0,0,0,0.05); 412 | } 413 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { 414 | background-color: #42a5f5; 415 | outline: none; 416 | padding: 0; 417 | } 418 | .flatpickr-weekdays { 419 | background: #42a5f5; 420 | text-align: center; 421 | overflow: hidden; 422 | width: 100%; 423 | display: -webkit-box; 424 | display: -webkit-flex; 425 | display: -ms-flexbox; 426 | display: flex; 427 | -webkit-box-align: center; 428 | -webkit-align-items: center; 429 | -ms-flex-align: center; 430 | align-items: center; 431 | height: 28px; 432 | } 433 | .flatpickr-weekdays .flatpickr-weekdaycontainer { 434 | display: -webkit-box; 435 | display: -webkit-flex; 436 | display: -ms-flexbox; 437 | display: flex; 438 | -webkit-box-flex: 1; 439 | -webkit-flex: 1; 440 | -ms-flex: 1; 441 | flex: 1; 442 | } 443 | span.flatpickr-weekday { 444 | cursor: default; 445 | font-size: 90%; 446 | background: #42a5f5; 447 | color: rgba(0,0,0,0.54); 448 | line-height: 1; 449 | margin: 0; 450 | text-align: center; 451 | display: block; 452 | -webkit-box-flex: 1; 453 | -webkit-flex: 1; 454 | -ms-flex: 1; 455 | flex: 1; 456 | font-weight: bolder; 457 | } 458 | .dayContainer, 459 | .flatpickr-weeks { 460 | padding: 1px 0 0 0; 461 | } 462 | .flatpickr-days { 463 | position: relative; 464 | overflow: hidden; 465 | display: -webkit-box; 466 | display: -webkit-flex; 467 | display: -ms-flexbox; 468 | display: flex; 469 | -webkit-box-align: start; 470 | -webkit-align-items: flex-start; 471 | -ms-flex-align: start; 472 | align-items: flex-start; 473 | width: 307.875px; 474 | border-left: 1px solid rgba(72,72,72,0.2); 475 | border-right: 1px solid rgba(72,72,72,0.2); 476 | } 477 | .flatpickr-days:focus { 478 | outline: 0; 479 | } 480 | .dayContainer { 481 | padding: 0; 482 | outline: 0; 483 | text-align: left; 484 | width: 307.875px; 485 | min-width: 307.875px; 486 | max-width: 307.875px; 487 | -webkit-box-sizing: border-box; 488 | box-sizing: border-box; 489 | display: inline-block; 490 | display: -ms-flexbox; 491 | display: -webkit-box; 492 | display: -webkit-flex; 493 | display: flex; 494 | -webkit-flex-wrap: wrap; 495 | flex-wrap: wrap; 496 | -ms-flex-wrap: wrap; 497 | -ms-flex-pack: justify; 498 | -webkit-justify-content: space-around; 499 | justify-content: space-around; 500 | -webkit-transform: translate3d(0px, 0px, 0px); 501 | transform: translate3d(0px, 0px, 0px); 502 | opacity: 1; 503 | } 504 | .dayContainer + .dayContainer { 505 | -webkit-box-shadow: -1px 0 0 rgba(72,72,72,0.2); 506 | box-shadow: -1px 0 0 rgba(72,72,72,0.2); 507 | } 508 | .flatpickr-day { 509 | background: none; 510 | border: 1px solid transparent; 511 | border-radius: 150px; 512 | -webkit-box-sizing: border-box; 513 | box-sizing: border-box; 514 | color: #484848; 515 | cursor: pointer; 516 | font-weight: 400; 517 | width: 14.2857143%; 518 | -webkit-flex-basis: 14.2857143%; 519 | -ms-flex-preferred-size: 14.2857143%; 520 | flex-basis: 14.2857143%; 521 | max-width: 39px; 522 | height: 39px; 523 | line-height: 39px; 524 | margin: 0; 525 | display: inline-block; 526 | position: relative; 527 | -webkit-box-pack: center; 528 | -webkit-justify-content: center; 529 | -ms-flex-pack: center; 530 | justify-content: center; 531 | text-align: center; 532 | } 533 | .flatpickr-day.inRange, 534 | .flatpickr-day.prevMonthDay.inRange, 535 | .flatpickr-day.nextMonthDay.inRange, 536 | .flatpickr-day.today.inRange, 537 | .flatpickr-day.prevMonthDay.today.inRange, 538 | .flatpickr-day.nextMonthDay.today.inRange, 539 | .flatpickr-day:hover, 540 | .flatpickr-day.prevMonthDay:hover, 541 | .flatpickr-day.nextMonthDay:hover, 542 | .flatpickr-day:focus, 543 | .flatpickr-day.prevMonthDay:focus, 544 | .flatpickr-day.nextMonthDay:focus { 545 | cursor: pointer; 546 | outline: 0; 547 | background: #e2e2e2; 548 | border-color: #e2e2e2; 549 | } 550 | .flatpickr-day.today { 551 | border-color: #bbb; 552 | } 553 | .flatpickr-day.today:hover, 554 | .flatpickr-day.today:focus { 555 | border-color: #bbb; 556 | background: #bbb; 557 | color: #fff; 558 | } 559 | .flatpickr-day.selected, 560 | .flatpickr-day.startRange, 561 | .flatpickr-day.endRange, 562 | .flatpickr-day.selected.inRange, 563 | .flatpickr-day.startRange.inRange, 564 | .flatpickr-day.endRange.inRange, 565 | .flatpickr-day.selected:focus, 566 | .flatpickr-day.startRange:focus, 567 | .flatpickr-day.endRange:focus, 568 | .flatpickr-day.selected:hover, 569 | .flatpickr-day.startRange:hover, 570 | .flatpickr-day.endRange:hover, 571 | .flatpickr-day.selected.prevMonthDay, 572 | .flatpickr-day.startRange.prevMonthDay, 573 | .flatpickr-day.endRange.prevMonthDay, 574 | .flatpickr-day.selected.nextMonthDay, 575 | .flatpickr-day.startRange.nextMonthDay, 576 | .flatpickr-day.endRange.nextMonthDay { 577 | background: #42a5f5; 578 | -webkit-box-shadow: none; 579 | box-shadow: none; 580 | color: #fff; 581 | border-color: #42a5f5; 582 | } 583 | .flatpickr-day.selected.startRange, 584 | .flatpickr-day.startRange.startRange, 585 | .flatpickr-day.endRange.startRange { 586 | border-radius: 50px 0 0 50px; 587 | } 588 | .flatpickr-day.selected.endRange, 589 | .flatpickr-day.startRange.endRange, 590 | .flatpickr-day.endRange.endRange { 591 | border-radius: 0 50px 50px 0; 592 | } 593 | .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 594 | .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 595 | .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { 596 | -webkit-box-shadow: -10px 0 0 #42a5f5; 597 | box-shadow: -10px 0 0 #42a5f5; 598 | } 599 | .flatpickr-day.selected.startRange.endRange, 600 | .flatpickr-day.startRange.startRange.endRange, 601 | .flatpickr-day.endRange.startRange.endRange { 602 | border-radius: 50px; 603 | } 604 | .flatpickr-day.inRange { 605 | border-radius: 0; 606 | -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 607 | box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 608 | } 609 | .flatpickr-day.flatpickr-disabled, 610 | .flatpickr-day.flatpickr-disabled:hover, 611 | .flatpickr-day.prevMonthDay, 612 | .flatpickr-day.nextMonthDay, 613 | .flatpickr-day.notAllowed, 614 | .flatpickr-day.notAllowed.prevMonthDay, 615 | .flatpickr-day.notAllowed.nextMonthDay { 616 | color: rgba(72,72,72,0.3); 617 | background: transparent; 618 | border-color: transparent; 619 | cursor: default; 620 | } 621 | .flatpickr-day.flatpickr-disabled, 622 | .flatpickr-day.flatpickr-disabled:hover { 623 | cursor: not-allowed; 624 | color: rgba(72,72,72,0.1); 625 | } 626 | .flatpickr-day.week.selected { 627 | border-radius: 0; 628 | -webkit-box-shadow: -5px 0 0 #42a5f5, 5px 0 0 #42a5f5; 629 | box-shadow: -5px 0 0 #42a5f5, 5px 0 0 #42a5f5; 630 | } 631 | .flatpickr-day.hidden { 632 | visibility: hidden; 633 | } 634 | .rangeMode .flatpickr-day { 635 | margin-top: 1px; 636 | } 637 | .flatpickr-weekwrapper { 638 | float: left; 639 | } 640 | .flatpickr-weekwrapper .flatpickr-weeks { 641 | padding: 0 12px; 642 | border-left: 1px solid rgba(72,72,72,0.2); 643 | } 644 | .flatpickr-weekwrapper .flatpickr-weekday { 645 | float: none; 646 | width: 100%; 647 | line-height: 28px; 648 | } 649 | .flatpickr-weekwrapper span.flatpickr-day, 650 | .flatpickr-weekwrapper span.flatpickr-day:hover { 651 | display: block; 652 | width: 100%; 653 | max-width: none; 654 | color: rgba(72,72,72,0.3); 655 | background: transparent; 656 | cursor: default; 657 | border: none; 658 | } 659 | .flatpickr-innerContainer { 660 | display: block; 661 | display: -webkit-box; 662 | display: -webkit-flex; 663 | display: -ms-flexbox; 664 | display: flex; 665 | -webkit-box-sizing: border-box; 666 | box-sizing: border-box; 667 | overflow: hidden; 668 | background: #fff; 669 | border-bottom: 1px solid rgba(72,72,72,0.2); 670 | } 671 | .flatpickr-rContainer { 672 | display: inline-block; 673 | padding: 0; 674 | -webkit-box-sizing: border-box; 675 | box-sizing: border-box; 676 | } 677 | .flatpickr-time { 678 | text-align: center; 679 | outline: 0; 680 | display: block; 681 | height: 0; 682 | line-height: 40px; 683 | max-height: 40px; 684 | -webkit-box-sizing: border-box; 685 | box-sizing: border-box; 686 | overflow: hidden; 687 | display: -webkit-box; 688 | display: -webkit-flex; 689 | display: -ms-flexbox; 690 | display: flex; 691 | background: #fff; 692 | border-radius: 0 0 5px 5px; 693 | } 694 | .flatpickr-time:after { 695 | content: ""; 696 | display: table; 697 | clear: both; 698 | } 699 | .flatpickr-time .numInputWrapper { 700 | -webkit-box-flex: 1; 701 | -webkit-flex: 1; 702 | -ms-flex: 1; 703 | flex: 1; 704 | width: 40%; 705 | height: 40px; 706 | float: left; 707 | } 708 | .flatpickr-time .numInputWrapper span.arrowUp:after { 709 | border-bottom-color: #484848; 710 | } 711 | .flatpickr-time .numInputWrapper span.arrowDown:after { 712 | border-top-color: #484848; 713 | } 714 | .flatpickr-time.hasSeconds .numInputWrapper { 715 | width: 26%; 716 | } 717 | .flatpickr-time.time24hr .numInputWrapper { 718 | width: 49%; 719 | } 720 | .flatpickr-time input { 721 | background: transparent; 722 | -webkit-box-shadow: none; 723 | box-shadow: none; 724 | border: 0; 725 | border-radius: 0; 726 | text-align: center; 727 | margin: 0; 728 | padding: 0; 729 | height: inherit; 730 | line-height: inherit; 731 | color: #484848; 732 | font-size: 14px; 733 | position: relative; 734 | -webkit-box-sizing: border-box; 735 | box-sizing: border-box; 736 | -webkit-appearance: textfield; 737 | -moz-appearance: textfield; 738 | appearance: textfield; 739 | } 740 | .flatpickr-time input.flatpickr-hour { 741 | font-weight: bold; 742 | } 743 | .flatpickr-time input.flatpickr-minute, 744 | .flatpickr-time input.flatpickr-second { 745 | font-weight: 400; 746 | } 747 | .flatpickr-time input:focus { 748 | outline: 0; 749 | border: 0; 750 | } 751 | .flatpickr-time .flatpickr-time-separator, 752 | .flatpickr-time .flatpickr-am-pm { 753 | height: inherit; 754 | float: left; 755 | line-height: inherit; 756 | color: #484848; 757 | font-weight: bold; 758 | width: 2%; 759 | -webkit-user-select: none; 760 | -moz-user-select: none; 761 | -ms-user-select: none; 762 | user-select: none; 763 | -webkit-align-self: center; 764 | -ms-flex-item-align: center; 765 | align-self: center; 766 | } 767 | .flatpickr-time .flatpickr-am-pm { 768 | outline: 0; 769 | width: 18%; 770 | cursor: pointer; 771 | text-align: center; 772 | font-weight: 400; 773 | } 774 | .flatpickr-time input:hover, 775 | .flatpickr-time .flatpickr-am-pm:hover, 776 | .flatpickr-time input:focus, 777 | .flatpickr-time .flatpickr-am-pm:focus { 778 | background: #eaeaea; 779 | } 780 | .flatpickr-input[readonly] { 781 | cursor: pointer; 782 | } 783 | @-webkit-keyframes fpFadeInDown { 784 | from { 785 | opacity: 0; 786 | -webkit-transform: translate3d(0, -20px, 0); 787 | transform: translate3d(0, -20px, 0); 788 | } 789 | to { 790 | opacity: 1; 791 | -webkit-transform: translate3d(0, 0, 0); 792 | transform: translate3d(0, 0, 0); 793 | } 794 | } 795 | @keyframes fpFadeInDown { 796 | from { 797 | opacity: 0; 798 | -webkit-transform: translate3d(0, -20px, 0); 799 | transform: translate3d(0, -20px, 0); 800 | } 801 | to { 802 | opacity: 1; 803 | -webkit-transform: translate3d(0, 0, 0); 804 | transform: translate3d(0, 0, 0); 805 | } 806 | } 807 | -------------------------------------------------------------------------------- /resources/dist/themes/material_green.css: -------------------------------------------------------------------------------- 1 | .flatpickr-calendar { 2 | background: transparent; 3 | opacity: 0; 4 | display: none; 5 | text-align: center; 6 | visibility: hidden; 7 | padding: 0; 8 | -webkit-animation: none; 9 | animation: none; 10 | direction: ltr; 11 | border: 0; 12 | font-size: 14px; 13 | line-height: 24px; 14 | border-radius: 5px; 15 | position: absolute; 16 | width: 307.875px; 17 | -webkit-box-sizing: border-box; 18 | box-sizing: border-box; 19 | -ms-touch-action: manipulation; 20 | touch-action: manipulation; 21 | -webkit-box-shadow: 0 3px 13px rgba(0,0,0,0.08); 22 | box-shadow: 0 3px 13px rgba(0,0,0,0.08); 23 | } 24 | .flatpickr-calendar.open, 25 | .flatpickr-calendar.inline { 26 | opacity: 1; 27 | max-height: 640px; 28 | visibility: visible; 29 | } 30 | .flatpickr-calendar.open { 31 | display: inline-block; 32 | z-index: 99999; 33 | } 34 | .flatpickr-calendar.animate.open { 35 | -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 36 | animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 37 | } 38 | .flatpickr-calendar.inline { 39 | display: block; 40 | position: relative; 41 | top: 2px; 42 | } 43 | .flatpickr-calendar.static { 44 | position: absolute; 45 | top: calc(100% + 2px); 46 | } 47 | .flatpickr-calendar.static.open { 48 | z-index: 999; 49 | display: block; 50 | } 51 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { 52 | -webkit-box-shadow: none !important; 53 | box-shadow: none !important; 54 | } 55 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { 56 | -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 57 | box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 58 | } 59 | .flatpickr-calendar .hasWeeks .dayContainer, 60 | .flatpickr-calendar .hasTime .dayContainer { 61 | border-bottom: 0; 62 | border-bottom-right-radius: 0; 63 | border-bottom-left-radius: 0; 64 | } 65 | .flatpickr-calendar .hasWeeks .dayContainer { 66 | border-left: 0; 67 | } 68 | .flatpickr-calendar.hasTime .flatpickr-time { 69 | height: 40px; 70 | border-top: 1px solid rgba(72,72,72,0.2); 71 | } 72 | .flatpickr-calendar.hasTime .flatpickr-innerContainer { 73 | border-bottom: 0; 74 | } 75 | .flatpickr-calendar.hasTime .flatpickr-time { 76 | border: 1px solid rgba(72,72,72,0.2); 77 | } 78 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { 79 | height: auto; 80 | } 81 | .flatpickr-calendar:before, 82 | .flatpickr-calendar:after { 83 | position: absolute; 84 | display: block; 85 | pointer-events: none; 86 | border: solid transparent; 87 | content: ''; 88 | height: 0; 89 | width: 0; 90 | left: 22px; 91 | } 92 | .flatpickr-calendar.rightMost:before, 93 | .flatpickr-calendar.arrowRight:before, 94 | .flatpickr-calendar.rightMost:after, 95 | .flatpickr-calendar.arrowRight:after { 96 | left: auto; 97 | right: 22px; 98 | } 99 | .flatpickr-calendar.arrowCenter:before, 100 | .flatpickr-calendar.arrowCenter:after { 101 | left: 50%; 102 | right: 50%; 103 | } 104 | .flatpickr-calendar:before { 105 | border-width: 5px; 106 | margin: 0 -5px; 107 | } 108 | .flatpickr-calendar:after { 109 | border-width: 4px; 110 | margin: 0 -4px; 111 | } 112 | .flatpickr-calendar.arrowTop:before, 113 | .flatpickr-calendar.arrowTop:after { 114 | bottom: 100%; 115 | } 116 | .flatpickr-calendar.arrowTop:before { 117 | border-bottom-color: rgba(72,72,72,0.2); 118 | } 119 | .flatpickr-calendar.arrowTop:after { 120 | border-bottom-color: #1bbc9b; 121 | } 122 | .flatpickr-calendar.arrowBottom:before, 123 | .flatpickr-calendar.arrowBottom:after { 124 | top: 100%; 125 | } 126 | .flatpickr-calendar.arrowBottom:before { 127 | border-top-color: rgba(72,72,72,0.2); 128 | } 129 | .flatpickr-calendar.arrowBottom:after { 130 | border-top-color: #1bbc9b; 131 | } 132 | .flatpickr-calendar:focus { 133 | outline: 0; 134 | } 135 | .flatpickr-wrapper { 136 | position: relative; 137 | display: inline-block; 138 | } 139 | .flatpickr-months { 140 | display: -webkit-box; 141 | display: -webkit-flex; 142 | display: -ms-flexbox; 143 | display: flex; 144 | } 145 | .flatpickr-months .flatpickr-month { 146 | border-radius: 5px 5px 0 0; 147 | background: #1bbc9b; 148 | color: #fff; 149 | fill: #fff; 150 | height: 34px; 151 | line-height: 1; 152 | text-align: center; 153 | position: relative; 154 | -webkit-user-select: none; 155 | -moz-user-select: none; 156 | -ms-user-select: none; 157 | user-select: none; 158 | overflow: hidden; 159 | -webkit-box-flex: 1; 160 | -webkit-flex: 1; 161 | -ms-flex: 1; 162 | flex: 1; 163 | } 164 | .flatpickr-months .flatpickr-prev-month, 165 | .flatpickr-months .flatpickr-next-month { 166 | -webkit-user-select: none; 167 | -moz-user-select: none; 168 | -ms-user-select: none; 169 | user-select: none; 170 | text-decoration: none; 171 | cursor: pointer; 172 | position: absolute; 173 | top: 0; 174 | height: 34px; 175 | padding: 10px; 176 | z-index: 3; 177 | color: #fff; 178 | fill: #fff; 179 | } 180 | .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, 181 | .flatpickr-months .flatpickr-next-month.flatpickr-disabled { 182 | display: none; 183 | } 184 | .flatpickr-months .flatpickr-prev-month i, 185 | .flatpickr-months .flatpickr-next-month i { 186 | position: relative; 187 | } 188 | .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, 189 | .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { 190 | /* 191 | /*rtl:begin:ignore*/ 192 | /* 193 | */ 194 | left: 0; 195 | /* 196 | /*rtl:end:ignore*/ 197 | /* 198 | */ 199 | } 200 | /* 201 | /*rtl:begin:ignore*/ 202 | /* 203 | /*rtl:end:ignore*/ 204 | .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, 205 | .flatpickr-months .flatpickr-next-month.flatpickr-next-month { 206 | /* 207 | /*rtl:begin:ignore*/ 208 | /* 209 | */ 210 | right: 0; 211 | /* 212 | /*rtl:end:ignore*/ 213 | /* 214 | */ 215 | } 216 | /* 217 | /*rtl:begin:ignore*/ 218 | /* 219 | /*rtl:end:ignore*/ 220 | .flatpickr-months .flatpickr-prev-month:hover, 221 | .flatpickr-months .flatpickr-next-month:hover { 222 | color: #bbb; 223 | } 224 | .flatpickr-months .flatpickr-prev-month:hover svg, 225 | .flatpickr-months .flatpickr-next-month:hover svg { 226 | fill: #f64747; 227 | } 228 | .flatpickr-months .flatpickr-prev-month svg, 229 | .flatpickr-months .flatpickr-next-month svg { 230 | width: 14px; 231 | height: 14px; 232 | } 233 | .flatpickr-months .flatpickr-prev-month svg path, 234 | .flatpickr-months .flatpickr-next-month svg path { 235 | -webkit-transition: fill 0.1s; 236 | transition: fill 0.1s; 237 | fill: inherit; 238 | } 239 | .numInputWrapper { 240 | position: relative; 241 | height: auto; 242 | } 243 | .numInputWrapper input, 244 | .numInputWrapper span { 245 | display: inline-block; 246 | } 247 | .numInputWrapper input { 248 | width: 100%; 249 | } 250 | .numInputWrapper input::-ms-clear { 251 | display: none; 252 | } 253 | .numInputWrapper input::-webkit-outer-spin-button, 254 | .numInputWrapper input::-webkit-inner-spin-button { 255 | margin: 0; 256 | -webkit-appearance: none; 257 | } 258 | .numInputWrapper span { 259 | position: absolute; 260 | right: 0; 261 | width: 14px; 262 | padding: 0 4px 0 2px; 263 | height: 50%; 264 | line-height: 50%; 265 | opacity: 0; 266 | cursor: pointer; 267 | border: 1px solid rgba(72,72,72,0.15); 268 | -webkit-box-sizing: border-box; 269 | box-sizing: border-box; 270 | } 271 | .numInputWrapper span:hover { 272 | background: rgba(0,0,0,0.1); 273 | } 274 | .numInputWrapper span:active { 275 | background: rgba(0,0,0,0.2); 276 | } 277 | .numInputWrapper span:after { 278 | display: block; 279 | content: ""; 280 | position: absolute; 281 | } 282 | .numInputWrapper span.arrowUp { 283 | top: 0; 284 | border-bottom: 0; 285 | } 286 | .numInputWrapper span.arrowUp:after { 287 | border-left: 4px solid transparent; 288 | border-right: 4px solid transparent; 289 | border-bottom: 4px solid rgba(72,72,72,0.6); 290 | top: 26%; 291 | } 292 | .numInputWrapper span.arrowDown { 293 | top: 50%; 294 | } 295 | .numInputWrapper span.arrowDown:after { 296 | border-left: 4px solid transparent; 297 | border-right: 4px solid transparent; 298 | border-top: 4px solid rgba(72,72,72,0.6); 299 | top: 40%; 300 | } 301 | .numInputWrapper span svg { 302 | width: inherit; 303 | height: auto; 304 | } 305 | .numInputWrapper span svg path { 306 | fill: rgba(255,255,255,0.5); 307 | } 308 | .numInputWrapper:hover { 309 | background: rgba(0,0,0,0.05); 310 | } 311 | .numInputWrapper:hover span { 312 | opacity: 1; 313 | } 314 | .flatpickr-current-month { 315 | font-size: 135%; 316 | line-height: inherit; 317 | font-weight: 300; 318 | color: inherit; 319 | position: absolute; 320 | width: 75%; 321 | left: 12.5%; 322 | padding: 7.48px 0 0 0; 323 | line-height: 1; 324 | height: 34px; 325 | display: inline-block; 326 | text-align: center; 327 | -webkit-transform: translate3d(0px, 0px, 0px); 328 | transform: translate3d(0px, 0px, 0px); 329 | } 330 | .flatpickr-current-month span.cur-month { 331 | font-family: inherit; 332 | font-weight: 700; 333 | color: inherit; 334 | display: inline-block; 335 | margin-left: 0.5ch; 336 | padding: 0; 337 | } 338 | .flatpickr-current-month span.cur-month:hover { 339 | background: rgba(0,0,0,0.05); 340 | } 341 | .flatpickr-current-month .numInputWrapper { 342 | width: 6ch; 343 | width: 7ch\0; 344 | display: inline-block; 345 | } 346 | .flatpickr-current-month .numInputWrapper span.arrowUp:after { 347 | border-bottom-color: #fff; 348 | } 349 | .flatpickr-current-month .numInputWrapper span.arrowDown:after { 350 | border-top-color: #fff; 351 | } 352 | .flatpickr-current-month input.cur-year { 353 | background: transparent; 354 | -webkit-box-sizing: border-box; 355 | box-sizing: border-box; 356 | color: inherit; 357 | cursor: text; 358 | padding: 0 0 0 0.5ch; 359 | margin: 0; 360 | display: inline-block; 361 | font-size: inherit; 362 | font-family: inherit; 363 | font-weight: 300; 364 | line-height: inherit; 365 | height: auto; 366 | border: 0; 367 | border-radius: 0; 368 | vertical-align: initial; 369 | -webkit-appearance: textfield; 370 | -moz-appearance: textfield; 371 | appearance: textfield; 372 | } 373 | .flatpickr-current-month input.cur-year:focus { 374 | outline: 0; 375 | } 376 | .flatpickr-current-month input.cur-year[disabled], 377 | .flatpickr-current-month input.cur-year[disabled]:hover { 378 | font-size: 100%; 379 | color: rgba(255,255,255,0.5); 380 | background: transparent; 381 | pointer-events: none; 382 | } 383 | .flatpickr-current-month .flatpickr-monthDropdown-months { 384 | appearance: menulist; 385 | background: #1bbc9b; 386 | border: none; 387 | border-radius: 0; 388 | box-sizing: border-box; 389 | color: inherit; 390 | cursor: pointer; 391 | font-size: inherit; 392 | font-family: inherit; 393 | font-weight: 300; 394 | height: auto; 395 | line-height: inherit; 396 | margin: -1px 0 0 0; 397 | outline: none; 398 | padding: 0 0 0 0.5ch; 399 | position: relative; 400 | vertical-align: initial; 401 | -webkit-box-sizing: border-box; 402 | -webkit-appearance: menulist; 403 | -moz-appearance: menulist; 404 | width: auto; 405 | } 406 | .flatpickr-current-month .flatpickr-monthDropdown-months:focus, 407 | .flatpickr-current-month .flatpickr-monthDropdown-months:active { 408 | outline: none; 409 | } 410 | .flatpickr-current-month .flatpickr-monthDropdown-months:hover { 411 | background: rgba(0,0,0,0.05); 412 | } 413 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { 414 | background-color: #1bbc9b; 415 | outline: none; 416 | padding: 0; 417 | } 418 | .flatpickr-weekdays { 419 | background: #1bbc9b; 420 | text-align: center; 421 | overflow: hidden; 422 | width: 100%; 423 | display: -webkit-box; 424 | display: -webkit-flex; 425 | display: -ms-flexbox; 426 | display: flex; 427 | -webkit-box-align: center; 428 | -webkit-align-items: center; 429 | -ms-flex-align: center; 430 | align-items: center; 431 | height: 28px; 432 | } 433 | .flatpickr-weekdays .flatpickr-weekdaycontainer { 434 | display: -webkit-box; 435 | display: -webkit-flex; 436 | display: -ms-flexbox; 437 | display: flex; 438 | -webkit-box-flex: 1; 439 | -webkit-flex: 1; 440 | -ms-flex: 1; 441 | flex: 1; 442 | } 443 | span.flatpickr-weekday { 444 | cursor: default; 445 | font-size: 90%; 446 | background: #1bbc9b; 447 | color: rgba(0,0,0,0.54); 448 | line-height: 1; 449 | margin: 0; 450 | text-align: center; 451 | display: block; 452 | -webkit-box-flex: 1; 453 | -webkit-flex: 1; 454 | -ms-flex: 1; 455 | flex: 1; 456 | font-weight: bolder; 457 | } 458 | .dayContainer, 459 | .flatpickr-weeks { 460 | padding: 1px 0 0 0; 461 | } 462 | .flatpickr-days { 463 | position: relative; 464 | overflow: hidden; 465 | display: -webkit-box; 466 | display: -webkit-flex; 467 | display: -ms-flexbox; 468 | display: flex; 469 | -webkit-box-align: start; 470 | -webkit-align-items: flex-start; 471 | -ms-flex-align: start; 472 | align-items: flex-start; 473 | width: 307.875px; 474 | border-left: 1px solid rgba(72,72,72,0.2); 475 | border-right: 1px solid rgba(72,72,72,0.2); 476 | } 477 | .flatpickr-days:focus { 478 | outline: 0; 479 | } 480 | .dayContainer { 481 | padding: 0; 482 | outline: 0; 483 | text-align: left; 484 | width: 307.875px; 485 | min-width: 307.875px; 486 | max-width: 307.875px; 487 | -webkit-box-sizing: border-box; 488 | box-sizing: border-box; 489 | display: inline-block; 490 | display: -ms-flexbox; 491 | display: -webkit-box; 492 | display: -webkit-flex; 493 | display: flex; 494 | -webkit-flex-wrap: wrap; 495 | flex-wrap: wrap; 496 | -ms-flex-wrap: wrap; 497 | -ms-flex-pack: justify; 498 | -webkit-justify-content: space-around; 499 | justify-content: space-around; 500 | -webkit-transform: translate3d(0px, 0px, 0px); 501 | transform: translate3d(0px, 0px, 0px); 502 | opacity: 1; 503 | } 504 | .dayContainer + .dayContainer { 505 | -webkit-box-shadow: -1px 0 0 rgba(72,72,72,0.2); 506 | box-shadow: -1px 0 0 rgba(72,72,72,0.2); 507 | } 508 | .flatpickr-day { 509 | background: none; 510 | border: 1px solid transparent; 511 | border-radius: 150px; 512 | -webkit-box-sizing: border-box; 513 | box-sizing: border-box; 514 | color: #484848; 515 | cursor: pointer; 516 | font-weight: 400; 517 | width: 14.2857143%; 518 | -webkit-flex-basis: 14.2857143%; 519 | -ms-flex-preferred-size: 14.2857143%; 520 | flex-basis: 14.2857143%; 521 | max-width: 39px; 522 | height: 39px; 523 | line-height: 39px; 524 | margin: 0; 525 | display: inline-block; 526 | position: relative; 527 | -webkit-box-pack: center; 528 | -webkit-justify-content: center; 529 | -ms-flex-pack: center; 530 | justify-content: center; 531 | text-align: center; 532 | } 533 | .flatpickr-day.inRange, 534 | .flatpickr-day.prevMonthDay.inRange, 535 | .flatpickr-day.nextMonthDay.inRange, 536 | .flatpickr-day.today.inRange, 537 | .flatpickr-day.prevMonthDay.today.inRange, 538 | .flatpickr-day.nextMonthDay.today.inRange, 539 | .flatpickr-day:hover, 540 | .flatpickr-day.prevMonthDay:hover, 541 | .flatpickr-day.nextMonthDay:hover, 542 | .flatpickr-day:focus, 543 | .flatpickr-day.prevMonthDay:focus, 544 | .flatpickr-day.nextMonthDay:focus { 545 | cursor: pointer; 546 | outline: 0; 547 | background: #e2e2e2; 548 | border-color: #e2e2e2; 549 | } 550 | .flatpickr-day.today { 551 | border-color: #bbb; 552 | } 553 | .flatpickr-day.today:hover, 554 | .flatpickr-day.today:focus { 555 | border-color: #bbb; 556 | background: #bbb; 557 | color: #fff; 558 | } 559 | .flatpickr-day.selected, 560 | .flatpickr-day.startRange, 561 | .flatpickr-day.endRange, 562 | .flatpickr-day.selected.inRange, 563 | .flatpickr-day.startRange.inRange, 564 | .flatpickr-day.endRange.inRange, 565 | .flatpickr-day.selected:focus, 566 | .flatpickr-day.startRange:focus, 567 | .flatpickr-day.endRange:focus, 568 | .flatpickr-day.selected:hover, 569 | .flatpickr-day.startRange:hover, 570 | .flatpickr-day.endRange:hover, 571 | .flatpickr-day.selected.prevMonthDay, 572 | .flatpickr-day.startRange.prevMonthDay, 573 | .flatpickr-day.endRange.prevMonthDay, 574 | .flatpickr-day.selected.nextMonthDay, 575 | .flatpickr-day.startRange.nextMonthDay, 576 | .flatpickr-day.endRange.nextMonthDay { 577 | background: #1bbc9b; 578 | -webkit-box-shadow: none; 579 | box-shadow: none; 580 | color: #fff; 581 | border-color: #1bbc9b; 582 | } 583 | .flatpickr-day.selected.startRange, 584 | .flatpickr-day.startRange.startRange, 585 | .flatpickr-day.endRange.startRange { 586 | border-radius: 50px 0 0 50px; 587 | } 588 | .flatpickr-day.selected.endRange, 589 | .flatpickr-day.startRange.endRange, 590 | .flatpickr-day.endRange.endRange { 591 | border-radius: 0 50px 50px 0; 592 | } 593 | .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 594 | .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 595 | .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { 596 | -webkit-box-shadow: -10px 0 0 #1bbc9b; 597 | box-shadow: -10px 0 0 #1bbc9b; 598 | } 599 | .flatpickr-day.selected.startRange.endRange, 600 | .flatpickr-day.startRange.startRange.endRange, 601 | .flatpickr-day.endRange.startRange.endRange { 602 | border-radius: 50px; 603 | } 604 | .flatpickr-day.inRange { 605 | border-radius: 0; 606 | -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 607 | box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 608 | } 609 | .flatpickr-day.flatpickr-disabled, 610 | .flatpickr-day.flatpickr-disabled:hover, 611 | .flatpickr-day.prevMonthDay, 612 | .flatpickr-day.nextMonthDay, 613 | .flatpickr-day.notAllowed, 614 | .flatpickr-day.notAllowed.prevMonthDay, 615 | .flatpickr-day.notAllowed.nextMonthDay { 616 | color: rgba(72,72,72,0.3); 617 | background: transparent; 618 | border-color: transparent; 619 | cursor: default; 620 | } 621 | .flatpickr-day.flatpickr-disabled, 622 | .flatpickr-day.flatpickr-disabled:hover { 623 | cursor: not-allowed; 624 | color: rgba(72,72,72,0.1); 625 | } 626 | .flatpickr-day.week.selected { 627 | border-radius: 0; 628 | -webkit-box-shadow: -5px 0 0 #1bbc9b, 5px 0 0 #1bbc9b; 629 | box-shadow: -5px 0 0 #1bbc9b, 5px 0 0 #1bbc9b; 630 | } 631 | .flatpickr-day.hidden { 632 | visibility: hidden; 633 | } 634 | .rangeMode .flatpickr-day { 635 | margin-top: 1px; 636 | } 637 | .flatpickr-weekwrapper { 638 | float: left; 639 | } 640 | .flatpickr-weekwrapper .flatpickr-weeks { 641 | padding: 0 12px; 642 | border-left: 1px solid rgba(72,72,72,0.2); 643 | } 644 | .flatpickr-weekwrapper .flatpickr-weekday { 645 | float: none; 646 | width: 100%; 647 | line-height: 28px; 648 | } 649 | .flatpickr-weekwrapper span.flatpickr-day, 650 | .flatpickr-weekwrapper span.flatpickr-day:hover { 651 | display: block; 652 | width: 100%; 653 | max-width: none; 654 | color: rgba(72,72,72,0.3); 655 | background: transparent; 656 | cursor: default; 657 | border: none; 658 | } 659 | .flatpickr-innerContainer { 660 | display: block; 661 | display: -webkit-box; 662 | display: -webkit-flex; 663 | display: -ms-flexbox; 664 | display: flex; 665 | -webkit-box-sizing: border-box; 666 | box-sizing: border-box; 667 | overflow: hidden; 668 | background: #fff; 669 | border-bottom: 1px solid rgba(72,72,72,0.2); 670 | } 671 | .flatpickr-rContainer { 672 | display: inline-block; 673 | padding: 0; 674 | -webkit-box-sizing: border-box; 675 | box-sizing: border-box; 676 | } 677 | .flatpickr-time { 678 | text-align: center; 679 | outline: 0; 680 | display: block; 681 | height: 0; 682 | line-height: 40px; 683 | max-height: 40px; 684 | -webkit-box-sizing: border-box; 685 | box-sizing: border-box; 686 | overflow: hidden; 687 | display: -webkit-box; 688 | display: -webkit-flex; 689 | display: -ms-flexbox; 690 | display: flex; 691 | background: #fff; 692 | border-radius: 0 0 5px 5px; 693 | } 694 | .flatpickr-time:after { 695 | content: ""; 696 | display: table; 697 | clear: both; 698 | } 699 | .flatpickr-time .numInputWrapper { 700 | -webkit-box-flex: 1; 701 | -webkit-flex: 1; 702 | -ms-flex: 1; 703 | flex: 1; 704 | width: 40%; 705 | height: 40px; 706 | float: left; 707 | } 708 | .flatpickr-time .numInputWrapper span.arrowUp:after { 709 | border-bottom-color: #484848; 710 | } 711 | .flatpickr-time .numInputWrapper span.arrowDown:after { 712 | border-top-color: #484848; 713 | } 714 | .flatpickr-time.hasSeconds .numInputWrapper { 715 | width: 26%; 716 | } 717 | .flatpickr-time.time24hr .numInputWrapper { 718 | width: 49%; 719 | } 720 | .flatpickr-time input { 721 | background: transparent; 722 | -webkit-box-shadow: none; 723 | box-shadow: none; 724 | border: 0; 725 | border-radius: 0; 726 | text-align: center; 727 | margin: 0; 728 | padding: 0; 729 | height: inherit; 730 | line-height: inherit; 731 | color: #484848; 732 | font-size: 14px; 733 | position: relative; 734 | -webkit-box-sizing: border-box; 735 | box-sizing: border-box; 736 | -webkit-appearance: textfield; 737 | -moz-appearance: textfield; 738 | appearance: textfield; 739 | } 740 | .flatpickr-time input.flatpickr-hour { 741 | font-weight: bold; 742 | } 743 | .flatpickr-time input.flatpickr-minute, 744 | .flatpickr-time input.flatpickr-second { 745 | font-weight: 400; 746 | } 747 | .flatpickr-time input:focus { 748 | outline: 0; 749 | border: 0; 750 | } 751 | .flatpickr-time .flatpickr-time-separator, 752 | .flatpickr-time .flatpickr-am-pm { 753 | height: inherit; 754 | float: left; 755 | line-height: inherit; 756 | color: #484848; 757 | font-weight: bold; 758 | width: 2%; 759 | -webkit-user-select: none; 760 | -moz-user-select: none; 761 | -ms-user-select: none; 762 | user-select: none; 763 | -webkit-align-self: center; 764 | -ms-flex-item-align: center; 765 | align-self: center; 766 | } 767 | .flatpickr-time .flatpickr-am-pm { 768 | outline: 0; 769 | width: 18%; 770 | cursor: pointer; 771 | text-align: center; 772 | font-weight: 400; 773 | } 774 | .flatpickr-time input:hover, 775 | .flatpickr-time .flatpickr-am-pm:hover, 776 | .flatpickr-time input:focus, 777 | .flatpickr-time .flatpickr-am-pm:focus { 778 | background: #eaeaea; 779 | } 780 | .flatpickr-input[readonly] { 781 | cursor: pointer; 782 | } 783 | @-webkit-keyframes fpFadeInDown { 784 | from { 785 | opacity: 0; 786 | -webkit-transform: translate3d(0, -20px, 0); 787 | transform: translate3d(0, -20px, 0); 788 | } 789 | to { 790 | opacity: 1; 791 | -webkit-transform: translate3d(0, 0, 0); 792 | transform: translate3d(0, 0, 0); 793 | } 794 | } 795 | @keyframes fpFadeInDown { 796 | from { 797 | opacity: 0; 798 | -webkit-transform: translate3d(0, -20px, 0); 799 | transform: translate3d(0, -20px, 0); 800 | } 801 | to { 802 | opacity: 1; 803 | -webkit-transform: translate3d(0, 0, 0); 804 | transform: translate3d(0, 0, 0); 805 | } 806 | } 807 | -------------------------------------------------------------------------------- /resources/dist/themes/material_orange.css: -------------------------------------------------------------------------------- 1 | .flatpickr-calendar { 2 | background: transparent; 3 | opacity: 0; 4 | display: none; 5 | text-align: center; 6 | visibility: hidden; 7 | padding: 0; 8 | -webkit-animation: none; 9 | animation: none; 10 | direction: ltr; 11 | border: 0; 12 | font-size: 14px; 13 | line-height: 24px; 14 | border-radius: 5px; 15 | position: absolute; 16 | width: 307.875px; 17 | -webkit-box-sizing: border-box; 18 | box-sizing: border-box; 19 | -ms-touch-action: manipulation; 20 | touch-action: manipulation; 21 | -webkit-box-shadow: 0 3px 13px rgba(0,0,0,0.08); 22 | box-shadow: 0 3px 13px rgba(0,0,0,0.08); 23 | } 24 | .flatpickr-calendar.open, 25 | .flatpickr-calendar.inline { 26 | opacity: 1; 27 | max-height: 640px; 28 | visibility: visible; 29 | } 30 | .flatpickr-calendar.open { 31 | display: inline-block; 32 | z-index: 99999; 33 | } 34 | .flatpickr-calendar.animate.open { 35 | -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 36 | animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 37 | } 38 | .flatpickr-calendar.inline { 39 | display: block; 40 | position: relative; 41 | top: 2px; 42 | } 43 | .flatpickr-calendar.static { 44 | position: absolute; 45 | top: calc(100% + 2px); 46 | } 47 | .flatpickr-calendar.static.open { 48 | z-index: 999; 49 | display: block; 50 | } 51 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { 52 | -webkit-box-shadow: none !important; 53 | box-shadow: none !important; 54 | } 55 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { 56 | -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 57 | box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 58 | } 59 | .flatpickr-calendar .hasWeeks .dayContainer, 60 | .flatpickr-calendar .hasTime .dayContainer { 61 | border-bottom: 0; 62 | border-bottom-right-radius: 0; 63 | border-bottom-left-radius: 0; 64 | } 65 | .flatpickr-calendar .hasWeeks .dayContainer { 66 | border-left: 0; 67 | } 68 | .flatpickr-calendar.hasTime .flatpickr-time { 69 | height: 40px; 70 | border-top: 1px solid rgba(72,72,72,0.2); 71 | } 72 | .flatpickr-calendar.hasTime .flatpickr-innerContainer { 73 | border-bottom: 0; 74 | } 75 | .flatpickr-calendar.hasTime .flatpickr-time { 76 | border: 1px solid rgba(72,72,72,0.2); 77 | } 78 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { 79 | height: auto; 80 | } 81 | .flatpickr-calendar:before, 82 | .flatpickr-calendar:after { 83 | position: absolute; 84 | display: block; 85 | pointer-events: none; 86 | border: solid transparent; 87 | content: ''; 88 | height: 0; 89 | width: 0; 90 | left: 22px; 91 | } 92 | .flatpickr-calendar.rightMost:before, 93 | .flatpickr-calendar.arrowRight:before, 94 | .flatpickr-calendar.rightMost:after, 95 | .flatpickr-calendar.arrowRight:after { 96 | left: auto; 97 | right: 22px; 98 | } 99 | .flatpickr-calendar.arrowCenter:before, 100 | .flatpickr-calendar.arrowCenter:after { 101 | left: 50%; 102 | right: 50%; 103 | } 104 | .flatpickr-calendar:before { 105 | border-width: 5px; 106 | margin: 0 -5px; 107 | } 108 | .flatpickr-calendar:after { 109 | border-width: 4px; 110 | margin: 0 -4px; 111 | } 112 | .flatpickr-calendar.arrowTop:before, 113 | .flatpickr-calendar.arrowTop:after { 114 | bottom: 100%; 115 | } 116 | .flatpickr-calendar.arrowTop:before { 117 | border-bottom-color: rgba(72,72,72,0.2); 118 | } 119 | .flatpickr-calendar.arrowTop:after { 120 | border-bottom-color: #ff8a65; 121 | } 122 | .flatpickr-calendar.arrowBottom:before, 123 | .flatpickr-calendar.arrowBottom:after { 124 | top: 100%; 125 | } 126 | .flatpickr-calendar.arrowBottom:before { 127 | border-top-color: rgba(72,72,72,0.2); 128 | } 129 | .flatpickr-calendar.arrowBottom:after { 130 | border-top-color: #ff8a65; 131 | } 132 | .flatpickr-calendar:focus { 133 | outline: 0; 134 | } 135 | .flatpickr-wrapper { 136 | position: relative; 137 | display: inline-block; 138 | } 139 | .flatpickr-months { 140 | display: -webkit-box; 141 | display: -webkit-flex; 142 | display: -ms-flexbox; 143 | display: flex; 144 | } 145 | .flatpickr-months .flatpickr-month { 146 | border-radius: 5px 5px 0 0; 147 | background: #ff8a65; 148 | color: #fff; 149 | fill: #fff; 150 | height: 34px; 151 | line-height: 1; 152 | text-align: center; 153 | position: relative; 154 | -webkit-user-select: none; 155 | -moz-user-select: none; 156 | -ms-user-select: none; 157 | user-select: none; 158 | overflow: hidden; 159 | -webkit-box-flex: 1; 160 | -webkit-flex: 1; 161 | -ms-flex: 1; 162 | flex: 1; 163 | } 164 | .flatpickr-months .flatpickr-prev-month, 165 | .flatpickr-months .flatpickr-next-month { 166 | -webkit-user-select: none; 167 | -moz-user-select: none; 168 | -ms-user-select: none; 169 | user-select: none; 170 | text-decoration: none; 171 | cursor: pointer; 172 | position: absolute; 173 | top: 0; 174 | height: 34px; 175 | padding: 10px; 176 | z-index: 3; 177 | color: #fff; 178 | fill: #fff; 179 | } 180 | .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, 181 | .flatpickr-months .flatpickr-next-month.flatpickr-disabled { 182 | display: none; 183 | } 184 | .flatpickr-months .flatpickr-prev-month i, 185 | .flatpickr-months .flatpickr-next-month i { 186 | position: relative; 187 | } 188 | .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, 189 | .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { 190 | /* 191 | /*rtl:begin:ignore*/ 192 | /* 193 | */ 194 | left: 0; 195 | /* 196 | /*rtl:end:ignore*/ 197 | /* 198 | */ 199 | } 200 | /* 201 | /*rtl:begin:ignore*/ 202 | /* 203 | /*rtl:end:ignore*/ 204 | .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, 205 | .flatpickr-months .flatpickr-next-month.flatpickr-next-month { 206 | /* 207 | /*rtl:begin:ignore*/ 208 | /* 209 | */ 210 | right: 0; 211 | /* 212 | /*rtl:end:ignore*/ 213 | /* 214 | */ 215 | } 216 | /* 217 | /*rtl:begin:ignore*/ 218 | /* 219 | /*rtl:end:ignore*/ 220 | .flatpickr-months .flatpickr-prev-month:hover, 221 | .flatpickr-months .flatpickr-next-month:hover { 222 | color: #bbb; 223 | } 224 | .flatpickr-months .flatpickr-prev-month:hover svg, 225 | .flatpickr-months .flatpickr-next-month:hover svg { 226 | fill: #f64747; 227 | } 228 | .flatpickr-months .flatpickr-prev-month svg, 229 | .flatpickr-months .flatpickr-next-month svg { 230 | width: 14px; 231 | height: 14px; 232 | } 233 | .flatpickr-months .flatpickr-prev-month svg path, 234 | .flatpickr-months .flatpickr-next-month svg path { 235 | -webkit-transition: fill 0.1s; 236 | transition: fill 0.1s; 237 | fill: inherit; 238 | } 239 | .numInputWrapper { 240 | position: relative; 241 | height: auto; 242 | } 243 | .numInputWrapper input, 244 | .numInputWrapper span { 245 | display: inline-block; 246 | } 247 | .numInputWrapper input { 248 | width: 100%; 249 | } 250 | .numInputWrapper input::-ms-clear { 251 | display: none; 252 | } 253 | .numInputWrapper input::-webkit-outer-spin-button, 254 | .numInputWrapper input::-webkit-inner-spin-button { 255 | margin: 0; 256 | -webkit-appearance: none; 257 | } 258 | .numInputWrapper span { 259 | position: absolute; 260 | right: 0; 261 | width: 14px; 262 | padding: 0 4px 0 2px; 263 | height: 50%; 264 | line-height: 50%; 265 | opacity: 0; 266 | cursor: pointer; 267 | border: 1px solid rgba(72,72,72,0.15); 268 | -webkit-box-sizing: border-box; 269 | box-sizing: border-box; 270 | } 271 | .numInputWrapper span:hover { 272 | background: rgba(0,0,0,0.1); 273 | } 274 | .numInputWrapper span:active { 275 | background: rgba(0,0,0,0.2); 276 | } 277 | .numInputWrapper span:after { 278 | display: block; 279 | content: ""; 280 | position: absolute; 281 | } 282 | .numInputWrapper span.arrowUp { 283 | top: 0; 284 | border-bottom: 0; 285 | } 286 | .numInputWrapper span.arrowUp:after { 287 | border-left: 4px solid transparent; 288 | border-right: 4px solid transparent; 289 | border-bottom: 4px solid rgba(72,72,72,0.6); 290 | top: 26%; 291 | } 292 | .numInputWrapper span.arrowDown { 293 | top: 50%; 294 | } 295 | .numInputWrapper span.arrowDown:after { 296 | border-left: 4px solid transparent; 297 | border-right: 4px solid transparent; 298 | border-top: 4px solid rgba(72,72,72,0.6); 299 | top: 40%; 300 | } 301 | .numInputWrapper span svg { 302 | width: inherit; 303 | height: auto; 304 | } 305 | .numInputWrapper span svg path { 306 | fill: rgba(255,255,255,0.5); 307 | } 308 | .numInputWrapper:hover { 309 | background: rgba(0,0,0,0.05); 310 | } 311 | .numInputWrapper:hover span { 312 | opacity: 1; 313 | } 314 | .flatpickr-current-month { 315 | font-size: 135%; 316 | line-height: inherit; 317 | font-weight: 300; 318 | color: inherit; 319 | position: absolute; 320 | width: 75%; 321 | left: 12.5%; 322 | padding: 7.48px 0 0 0; 323 | line-height: 1; 324 | height: 34px; 325 | display: inline-block; 326 | text-align: center; 327 | -webkit-transform: translate3d(0px, 0px, 0px); 328 | transform: translate3d(0px, 0px, 0px); 329 | } 330 | .flatpickr-current-month span.cur-month { 331 | font-family: inherit; 332 | font-weight: 700; 333 | color: inherit; 334 | display: inline-block; 335 | margin-left: 0.5ch; 336 | padding: 0; 337 | } 338 | .flatpickr-current-month span.cur-month:hover { 339 | background: rgba(0,0,0,0.05); 340 | } 341 | .flatpickr-current-month .numInputWrapper { 342 | width: 6ch; 343 | width: 7ch\0; 344 | display: inline-block; 345 | } 346 | .flatpickr-current-month .numInputWrapper span.arrowUp:after { 347 | border-bottom-color: #fff; 348 | } 349 | .flatpickr-current-month .numInputWrapper span.arrowDown:after { 350 | border-top-color: #fff; 351 | } 352 | .flatpickr-current-month input.cur-year { 353 | background: transparent; 354 | -webkit-box-sizing: border-box; 355 | box-sizing: border-box; 356 | color: inherit; 357 | cursor: text; 358 | padding: 0 0 0 0.5ch; 359 | margin: 0; 360 | display: inline-block; 361 | font-size: inherit; 362 | font-family: inherit; 363 | font-weight: 300; 364 | line-height: inherit; 365 | height: auto; 366 | border: 0; 367 | border-radius: 0; 368 | vertical-align: initial; 369 | -webkit-appearance: textfield; 370 | -moz-appearance: textfield; 371 | appearance: textfield; 372 | } 373 | .flatpickr-current-month input.cur-year:focus { 374 | outline: 0; 375 | } 376 | .flatpickr-current-month input.cur-year[disabled], 377 | .flatpickr-current-month input.cur-year[disabled]:hover { 378 | font-size: 100%; 379 | color: rgba(255,255,255,0.5); 380 | background: transparent; 381 | pointer-events: none; 382 | } 383 | .flatpickr-current-month .flatpickr-monthDropdown-months { 384 | appearance: menulist; 385 | background: #ff8a65; 386 | border: none; 387 | border-radius: 0; 388 | box-sizing: border-box; 389 | color: inherit; 390 | cursor: pointer; 391 | font-size: inherit; 392 | font-family: inherit; 393 | font-weight: 300; 394 | height: auto; 395 | line-height: inherit; 396 | margin: -1px 0 0 0; 397 | outline: none; 398 | padding: 0 0 0 0.5ch; 399 | position: relative; 400 | vertical-align: initial; 401 | -webkit-box-sizing: border-box; 402 | -webkit-appearance: menulist; 403 | -moz-appearance: menulist; 404 | width: auto; 405 | } 406 | .flatpickr-current-month .flatpickr-monthDropdown-months:focus, 407 | .flatpickr-current-month .flatpickr-monthDropdown-months:active { 408 | outline: none; 409 | } 410 | .flatpickr-current-month .flatpickr-monthDropdown-months:hover { 411 | background: rgba(0,0,0,0.05); 412 | } 413 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { 414 | background-color: #ff8a65; 415 | outline: none; 416 | padding: 0; 417 | } 418 | .flatpickr-weekdays { 419 | background: #ff8a65; 420 | text-align: center; 421 | overflow: hidden; 422 | width: 100%; 423 | display: -webkit-box; 424 | display: -webkit-flex; 425 | display: -ms-flexbox; 426 | display: flex; 427 | -webkit-box-align: center; 428 | -webkit-align-items: center; 429 | -ms-flex-align: center; 430 | align-items: center; 431 | height: 28px; 432 | } 433 | .flatpickr-weekdays .flatpickr-weekdaycontainer { 434 | display: -webkit-box; 435 | display: -webkit-flex; 436 | display: -ms-flexbox; 437 | display: flex; 438 | -webkit-box-flex: 1; 439 | -webkit-flex: 1; 440 | -ms-flex: 1; 441 | flex: 1; 442 | } 443 | span.flatpickr-weekday { 444 | cursor: default; 445 | font-size: 90%; 446 | background: #ff8a65; 447 | color: rgba(0,0,0,0.54); 448 | line-height: 1; 449 | margin: 0; 450 | text-align: center; 451 | display: block; 452 | -webkit-box-flex: 1; 453 | -webkit-flex: 1; 454 | -ms-flex: 1; 455 | flex: 1; 456 | font-weight: bolder; 457 | } 458 | .dayContainer, 459 | .flatpickr-weeks { 460 | padding: 1px 0 0 0; 461 | } 462 | .flatpickr-days { 463 | position: relative; 464 | overflow: hidden; 465 | display: -webkit-box; 466 | display: -webkit-flex; 467 | display: -ms-flexbox; 468 | display: flex; 469 | -webkit-box-align: start; 470 | -webkit-align-items: flex-start; 471 | -ms-flex-align: start; 472 | align-items: flex-start; 473 | width: 307.875px; 474 | border-left: 1px solid rgba(72,72,72,0.2); 475 | border-right: 1px solid rgba(72,72,72,0.2); 476 | } 477 | .flatpickr-days:focus { 478 | outline: 0; 479 | } 480 | .dayContainer { 481 | padding: 0; 482 | outline: 0; 483 | text-align: left; 484 | width: 307.875px; 485 | min-width: 307.875px; 486 | max-width: 307.875px; 487 | -webkit-box-sizing: border-box; 488 | box-sizing: border-box; 489 | display: inline-block; 490 | display: -ms-flexbox; 491 | display: -webkit-box; 492 | display: -webkit-flex; 493 | display: flex; 494 | -webkit-flex-wrap: wrap; 495 | flex-wrap: wrap; 496 | -ms-flex-wrap: wrap; 497 | -ms-flex-pack: justify; 498 | -webkit-justify-content: space-around; 499 | justify-content: space-around; 500 | -webkit-transform: translate3d(0px, 0px, 0px); 501 | transform: translate3d(0px, 0px, 0px); 502 | opacity: 1; 503 | } 504 | .dayContainer + .dayContainer { 505 | -webkit-box-shadow: -1px 0 0 rgba(72,72,72,0.2); 506 | box-shadow: -1px 0 0 rgba(72,72,72,0.2); 507 | } 508 | .flatpickr-day { 509 | background: none; 510 | border: 1px solid transparent; 511 | border-radius: 150px; 512 | -webkit-box-sizing: border-box; 513 | box-sizing: border-box; 514 | color: #484848; 515 | cursor: pointer; 516 | font-weight: 400; 517 | width: 14.2857143%; 518 | -webkit-flex-basis: 14.2857143%; 519 | -ms-flex-preferred-size: 14.2857143%; 520 | flex-basis: 14.2857143%; 521 | max-width: 39px; 522 | height: 39px; 523 | line-height: 39px; 524 | margin: 0; 525 | display: inline-block; 526 | position: relative; 527 | -webkit-box-pack: center; 528 | -webkit-justify-content: center; 529 | -ms-flex-pack: center; 530 | justify-content: center; 531 | text-align: center; 532 | } 533 | .flatpickr-day.inRange, 534 | .flatpickr-day.prevMonthDay.inRange, 535 | .flatpickr-day.nextMonthDay.inRange, 536 | .flatpickr-day.today.inRange, 537 | .flatpickr-day.prevMonthDay.today.inRange, 538 | .flatpickr-day.nextMonthDay.today.inRange, 539 | .flatpickr-day:hover, 540 | .flatpickr-day.prevMonthDay:hover, 541 | .flatpickr-day.nextMonthDay:hover, 542 | .flatpickr-day:focus, 543 | .flatpickr-day.prevMonthDay:focus, 544 | .flatpickr-day.nextMonthDay:focus { 545 | cursor: pointer; 546 | outline: 0; 547 | background: #e2e2e2; 548 | border-color: #e2e2e2; 549 | } 550 | .flatpickr-day.today { 551 | border-color: #bbb; 552 | } 553 | .flatpickr-day.today:hover, 554 | .flatpickr-day.today:focus { 555 | border-color: #bbb; 556 | background: #bbb; 557 | color: #fff; 558 | } 559 | .flatpickr-day.selected, 560 | .flatpickr-day.startRange, 561 | .flatpickr-day.endRange, 562 | .flatpickr-day.selected.inRange, 563 | .flatpickr-day.startRange.inRange, 564 | .flatpickr-day.endRange.inRange, 565 | .flatpickr-day.selected:focus, 566 | .flatpickr-day.startRange:focus, 567 | .flatpickr-day.endRange:focus, 568 | .flatpickr-day.selected:hover, 569 | .flatpickr-day.startRange:hover, 570 | .flatpickr-day.endRange:hover, 571 | .flatpickr-day.selected.prevMonthDay, 572 | .flatpickr-day.startRange.prevMonthDay, 573 | .flatpickr-day.endRange.prevMonthDay, 574 | .flatpickr-day.selected.nextMonthDay, 575 | .flatpickr-day.startRange.nextMonthDay, 576 | .flatpickr-day.endRange.nextMonthDay { 577 | background: #ff8a65; 578 | -webkit-box-shadow: none; 579 | box-shadow: none; 580 | color: #fff; 581 | border-color: #ff8a65; 582 | } 583 | .flatpickr-day.selected.startRange, 584 | .flatpickr-day.startRange.startRange, 585 | .flatpickr-day.endRange.startRange { 586 | border-radius: 50px 0 0 50px; 587 | } 588 | .flatpickr-day.selected.endRange, 589 | .flatpickr-day.startRange.endRange, 590 | .flatpickr-day.endRange.endRange { 591 | border-radius: 0 50px 50px 0; 592 | } 593 | .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 594 | .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 595 | .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { 596 | -webkit-box-shadow: -10px 0 0 #ff8a65; 597 | box-shadow: -10px 0 0 #ff8a65; 598 | } 599 | .flatpickr-day.selected.startRange.endRange, 600 | .flatpickr-day.startRange.startRange.endRange, 601 | .flatpickr-day.endRange.startRange.endRange { 602 | border-radius: 50px; 603 | } 604 | .flatpickr-day.inRange { 605 | border-radius: 0; 606 | -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 607 | box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 608 | } 609 | .flatpickr-day.flatpickr-disabled, 610 | .flatpickr-day.flatpickr-disabled:hover, 611 | .flatpickr-day.prevMonthDay, 612 | .flatpickr-day.nextMonthDay, 613 | .flatpickr-day.notAllowed, 614 | .flatpickr-day.notAllowed.prevMonthDay, 615 | .flatpickr-day.notAllowed.nextMonthDay { 616 | color: rgba(72,72,72,0.3); 617 | background: transparent; 618 | border-color: transparent; 619 | cursor: default; 620 | } 621 | .flatpickr-day.flatpickr-disabled, 622 | .flatpickr-day.flatpickr-disabled:hover { 623 | cursor: not-allowed; 624 | color: rgba(72,72,72,0.1); 625 | } 626 | .flatpickr-day.week.selected { 627 | border-radius: 0; 628 | -webkit-box-shadow: -5px 0 0 #ff8a65, 5px 0 0 #ff8a65; 629 | box-shadow: -5px 0 0 #ff8a65, 5px 0 0 #ff8a65; 630 | } 631 | .flatpickr-day.hidden { 632 | visibility: hidden; 633 | } 634 | .rangeMode .flatpickr-day { 635 | margin-top: 1px; 636 | } 637 | .flatpickr-weekwrapper { 638 | float: left; 639 | } 640 | .flatpickr-weekwrapper .flatpickr-weeks { 641 | padding: 0 12px; 642 | border-left: 1px solid rgba(72,72,72,0.2); 643 | } 644 | .flatpickr-weekwrapper .flatpickr-weekday { 645 | float: none; 646 | width: 100%; 647 | line-height: 28px; 648 | } 649 | .flatpickr-weekwrapper span.flatpickr-day, 650 | .flatpickr-weekwrapper span.flatpickr-day:hover { 651 | display: block; 652 | width: 100%; 653 | max-width: none; 654 | color: rgba(72,72,72,0.3); 655 | background: transparent; 656 | cursor: default; 657 | border: none; 658 | } 659 | .flatpickr-innerContainer { 660 | display: block; 661 | display: -webkit-box; 662 | display: -webkit-flex; 663 | display: -ms-flexbox; 664 | display: flex; 665 | -webkit-box-sizing: border-box; 666 | box-sizing: border-box; 667 | overflow: hidden; 668 | background: #fff; 669 | border-bottom: 1px solid rgba(72,72,72,0.2); 670 | } 671 | .flatpickr-rContainer { 672 | display: inline-block; 673 | padding: 0; 674 | -webkit-box-sizing: border-box; 675 | box-sizing: border-box; 676 | } 677 | .flatpickr-time { 678 | text-align: center; 679 | outline: 0; 680 | display: block; 681 | height: 0; 682 | line-height: 40px; 683 | max-height: 40px; 684 | -webkit-box-sizing: border-box; 685 | box-sizing: border-box; 686 | overflow: hidden; 687 | display: -webkit-box; 688 | display: -webkit-flex; 689 | display: -ms-flexbox; 690 | display: flex; 691 | background: #fff; 692 | border-radius: 0 0 5px 5px; 693 | } 694 | .flatpickr-time:after { 695 | content: ""; 696 | display: table; 697 | clear: both; 698 | } 699 | .flatpickr-time .numInputWrapper { 700 | -webkit-box-flex: 1; 701 | -webkit-flex: 1; 702 | -ms-flex: 1; 703 | flex: 1; 704 | width: 40%; 705 | height: 40px; 706 | float: left; 707 | } 708 | .flatpickr-time .numInputWrapper span.arrowUp:after { 709 | border-bottom-color: #484848; 710 | } 711 | .flatpickr-time .numInputWrapper span.arrowDown:after { 712 | border-top-color: #484848; 713 | } 714 | .flatpickr-time.hasSeconds .numInputWrapper { 715 | width: 26%; 716 | } 717 | .flatpickr-time.time24hr .numInputWrapper { 718 | width: 49%; 719 | } 720 | .flatpickr-time input { 721 | background: transparent; 722 | -webkit-box-shadow: none; 723 | box-shadow: none; 724 | border: 0; 725 | border-radius: 0; 726 | text-align: center; 727 | margin: 0; 728 | padding: 0; 729 | height: inherit; 730 | line-height: inherit; 731 | color: #484848; 732 | font-size: 14px; 733 | position: relative; 734 | -webkit-box-sizing: border-box; 735 | box-sizing: border-box; 736 | -webkit-appearance: textfield; 737 | -moz-appearance: textfield; 738 | appearance: textfield; 739 | } 740 | .flatpickr-time input.flatpickr-hour { 741 | font-weight: bold; 742 | } 743 | .flatpickr-time input.flatpickr-minute, 744 | .flatpickr-time input.flatpickr-second { 745 | font-weight: 400; 746 | } 747 | .flatpickr-time input:focus { 748 | outline: 0; 749 | border: 0; 750 | } 751 | .flatpickr-time .flatpickr-time-separator, 752 | .flatpickr-time .flatpickr-am-pm { 753 | height: inherit; 754 | float: left; 755 | line-height: inherit; 756 | color: #484848; 757 | font-weight: bold; 758 | width: 2%; 759 | -webkit-user-select: none; 760 | -moz-user-select: none; 761 | -ms-user-select: none; 762 | user-select: none; 763 | -webkit-align-self: center; 764 | -ms-flex-item-align: center; 765 | align-self: center; 766 | } 767 | .flatpickr-time .flatpickr-am-pm { 768 | outline: 0; 769 | width: 18%; 770 | cursor: pointer; 771 | text-align: center; 772 | font-weight: 400; 773 | } 774 | .flatpickr-time input:hover, 775 | .flatpickr-time .flatpickr-am-pm:hover, 776 | .flatpickr-time input:focus, 777 | .flatpickr-time .flatpickr-am-pm:focus { 778 | background: #eaeaea; 779 | } 780 | .flatpickr-input[readonly] { 781 | cursor: pointer; 782 | } 783 | @-webkit-keyframes fpFadeInDown { 784 | from { 785 | opacity: 0; 786 | -webkit-transform: translate3d(0, -20px, 0); 787 | transform: translate3d(0, -20px, 0); 788 | } 789 | to { 790 | opacity: 1; 791 | -webkit-transform: translate3d(0, 0, 0); 792 | transform: translate3d(0, 0, 0); 793 | } 794 | } 795 | @keyframes fpFadeInDown { 796 | from { 797 | opacity: 0; 798 | -webkit-transform: translate3d(0, -20px, 0); 799 | transform: translate3d(0, -20px, 0); 800 | } 801 | to { 802 | opacity: 1; 803 | -webkit-transform: translate3d(0, 0, 0); 804 | transform: translate3d(0, 0, 0); 805 | } 806 | } 807 | -------------------------------------------------------------------------------- /resources/dist/themes/material_red.css: -------------------------------------------------------------------------------- 1 | .flatpickr-calendar { 2 | background: transparent; 3 | opacity: 0; 4 | display: none; 5 | text-align: center; 6 | visibility: hidden; 7 | padding: 0; 8 | -webkit-animation: none; 9 | animation: none; 10 | direction: ltr; 11 | border: 0; 12 | font-size: 14px; 13 | line-height: 24px; 14 | border-radius: 5px; 15 | position: absolute; 16 | width: 307.875px; 17 | -webkit-box-sizing: border-box; 18 | box-sizing: border-box; 19 | -ms-touch-action: manipulation; 20 | touch-action: manipulation; 21 | -webkit-box-shadow: 0 3px 13px rgba(0,0,0,0.08); 22 | box-shadow: 0 3px 13px rgba(0,0,0,0.08); 23 | } 24 | .flatpickr-calendar.open, 25 | .flatpickr-calendar.inline { 26 | opacity: 1; 27 | max-height: 640px; 28 | visibility: visible; 29 | } 30 | .flatpickr-calendar.open { 31 | display: inline-block; 32 | z-index: 99999; 33 | } 34 | .flatpickr-calendar.animate.open { 35 | -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 36 | animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); 37 | } 38 | .flatpickr-calendar.inline { 39 | display: block; 40 | position: relative; 41 | top: 2px; 42 | } 43 | .flatpickr-calendar.static { 44 | position: absolute; 45 | top: calc(100% + 2px); 46 | } 47 | .flatpickr-calendar.static.open { 48 | z-index: 999; 49 | display: block; 50 | } 51 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { 52 | -webkit-box-shadow: none !important; 53 | box-shadow: none !important; 54 | } 55 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { 56 | -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 57 | box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 58 | } 59 | .flatpickr-calendar .hasWeeks .dayContainer, 60 | .flatpickr-calendar .hasTime .dayContainer { 61 | border-bottom: 0; 62 | border-bottom-right-radius: 0; 63 | border-bottom-left-radius: 0; 64 | } 65 | .flatpickr-calendar .hasWeeks .dayContainer { 66 | border-left: 0; 67 | } 68 | .flatpickr-calendar.hasTime .flatpickr-time { 69 | height: 40px; 70 | border-top: 1px solid rgba(72,72,72,0.2); 71 | } 72 | .flatpickr-calendar.hasTime .flatpickr-innerContainer { 73 | border-bottom: 0; 74 | } 75 | .flatpickr-calendar.hasTime .flatpickr-time { 76 | border: 1px solid rgba(72,72,72,0.2); 77 | } 78 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { 79 | height: auto; 80 | } 81 | .flatpickr-calendar:before, 82 | .flatpickr-calendar:after { 83 | position: absolute; 84 | display: block; 85 | pointer-events: none; 86 | border: solid transparent; 87 | content: ''; 88 | height: 0; 89 | width: 0; 90 | left: 22px; 91 | } 92 | .flatpickr-calendar.rightMost:before, 93 | .flatpickr-calendar.arrowRight:before, 94 | .flatpickr-calendar.rightMost:after, 95 | .flatpickr-calendar.arrowRight:after { 96 | left: auto; 97 | right: 22px; 98 | } 99 | .flatpickr-calendar.arrowCenter:before, 100 | .flatpickr-calendar.arrowCenter:after { 101 | left: 50%; 102 | right: 50%; 103 | } 104 | .flatpickr-calendar:before { 105 | border-width: 5px; 106 | margin: 0 -5px; 107 | } 108 | .flatpickr-calendar:after { 109 | border-width: 4px; 110 | margin: 0 -4px; 111 | } 112 | .flatpickr-calendar.arrowTop:before, 113 | .flatpickr-calendar.arrowTop:after { 114 | bottom: 100%; 115 | } 116 | .flatpickr-calendar.arrowTop:before { 117 | border-bottom-color: rgba(72,72,72,0.2); 118 | } 119 | .flatpickr-calendar.arrowTop:after { 120 | border-bottom-color: #ef5350; 121 | } 122 | .flatpickr-calendar.arrowBottom:before, 123 | .flatpickr-calendar.arrowBottom:after { 124 | top: 100%; 125 | } 126 | .flatpickr-calendar.arrowBottom:before { 127 | border-top-color: rgba(72,72,72,0.2); 128 | } 129 | .flatpickr-calendar.arrowBottom:after { 130 | border-top-color: #ef5350; 131 | } 132 | .flatpickr-calendar:focus { 133 | outline: 0; 134 | } 135 | .flatpickr-wrapper { 136 | position: relative; 137 | display: inline-block; 138 | } 139 | .flatpickr-months { 140 | display: -webkit-box; 141 | display: -webkit-flex; 142 | display: -ms-flexbox; 143 | display: flex; 144 | } 145 | .flatpickr-months .flatpickr-month { 146 | border-radius: 5px 5px 0 0; 147 | background: #ef5350; 148 | color: #fff; 149 | fill: #fff; 150 | height: 34px; 151 | line-height: 1; 152 | text-align: center; 153 | position: relative; 154 | -webkit-user-select: none; 155 | -moz-user-select: none; 156 | -ms-user-select: none; 157 | user-select: none; 158 | overflow: hidden; 159 | -webkit-box-flex: 1; 160 | -webkit-flex: 1; 161 | -ms-flex: 1; 162 | flex: 1; 163 | } 164 | .flatpickr-months .flatpickr-prev-month, 165 | .flatpickr-months .flatpickr-next-month { 166 | -webkit-user-select: none; 167 | -moz-user-select: none; 168 | -ms-user-select: none; 169 | user-select: none; 170 | text-decoration: none; 171 | cursor: pointer; 172 | position: absolute; 173 | top: 0; 174 | height: 34px; 175 | padding: 10px; 176 | z-index: 3; 177 | color: #fff; 178 | fill: #fff; 179 | } 180 | .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, 181 | .flatpickr-months .flatpickr-next-month.flatpickr-disabled { 182 | display: none; 183 | } 184 | .flatpickr-months .flatpickr-prev-month i, 185 | .flatpickr-months .flatpickr-next-month i { 186 | position: relative; 187 | } 188 | .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, 189 | .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { 190 | /* 191 | /*rtl:begin:ignore*/ 192 | /* 193 | */ 194 | left: 0; 195 | /* 196 | /*rtl:end:ignore*/ 197 | /* 198 | */ 199 | } 200 | /* 201 | /*rtl:begin:ignore*/ 202 | /* 203 | /*rtl:end:ignore*/ 204 | .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, 205 | .flatpickr-months .flatpickr-next-month.flatpickr-next-month { 206 | /* 207 | /*rtl:begin:ignore*/ 208 | /* 209 | */ 210 | right: 0; 211 | /* 212 | /*rtl:end:ignore*/ 213 | /* 214 | */ 215 | } 216 | /* 217 | /*rtl:begin:ignore*/ 218 | /* 219 | /*rtl:end:ignore*/ 220 | .flatpickr-months .flatpickr-prev-month:hover, 221 | .flatpickr-months .flatpickr-next-month:hover { 222 | color: #bbb; 223 | } 224 | .flatpickr-months .flatpickr-prev-month:hover svg, 225 | .flatpickr-months .flatpickr-next-month:hover svg { 226 | fill: #f64747; 227 | } 228 | .flatpickr-months .flatpickr-prev-month svg, 229 | .flatpickr-months .flatpickr-next-month svg { 230 | width: 14px; 231 | height: 14px; 232 | } 233 | .flatpickr-months .flatpickr-prev-month svg path, 234 | .flatpickr-months .flatpickr-next-month svg path { 235 | -webkit-transition: fill 0.1s; 236 | transition: fill 0.1s; 237 | fill: inherit; 238 | } 239 | .numInputWrapper { 240 | position: relative; 241 | height: auto; 242 | } 243 | .numInputWrapper input, 244 | .numInputWrapper span { 245 | display: inline-block; 246 | } 247 | .numInputWrapper input { 248 | width: 100%; 249 | } 250 | .numInputWrapper input::-ms-clear { 251 | display: none; 252 | } 253 | .numInputWrapper input::-webkit-outer-spin-button, 254 | .numInputWrapper input::-webkit-inner-spin-button { 255 | margin: 0; 256 | -webkit-appearance: none; 257 | } 258 | .numInputWrapper span { 259 | position: absolute; 260 | right: 0; 261 | width: 14px; 262 | padding: 0 4px 0 2px; 263 | height: 50%; 264 | line-height: 50%; 265 | opacity: 0; 266 | cursor: pointer; 267 | border: 1px solid rgba(72,72,72,0.15); 268 | -webkit-box-sizing: border-box; 269 | box-sizing: border-box; 270 | } 271 | .numInputWrapper span:hover { 272 | background: rgba(0,0,0,0.1); 273 | } 274 | .numInputWrapper span:active { 275 | background: rgba(0,0,0,0.2); 276 | } 277 | .numInputWrapper span:after { 278 | display: block; 279 | content: ""; 280 | position: absolute; 281 | } 282 | .numInputWrapper span.arrowUp { 283 | top: 0; 284 | border-bottom: 0; 285 | } 286 | .numInputWrapper span.arrowUp:after { 287 | border-left: 4px solid transparent; 288 | border-right: 4px solid transparent; 289 | border-bottom: 4px solid rgba(72,72,72,0.6); 290 | top: 26%; 291 | } 292 | .numInputWrapper span.arrowDown { 293 | top: 50%; 294 | } 295 | .numInputWrapper span.arrowDown:after { 296 | border-left: 4px solid transparent; 297 | border-right: 4px solid transparent; 298 | border-top: 4px solid rgba(72,72,72,0.6); 299 | top: 40%; 300 | } 301 | .numInputWrapper span svg { 302 | width: inherit; 303 | height: auto; 304 | } 305 | .numInputWrapper span svg path { 306 | fill: rgba(255,255,255,0.5); 307 | } 308 | .numInputWrapper:hover { 309 | background: rgba(0,0,0,0.05); 310 | } 311 | .numInputWrapper:hover span { 312 | opacity: 1; 313 | } 314 | .flatpickr-current-month { 315 | font-size: 135%; 316 | line-height: inherit; 317 | font-weight: 300; 318 | color: inherit; 319 | position: absolute; 320 | width: 75%; 321 | left: 12.5%; 322 | padding: 7.48px 0 0 0; 323 | line-height: 1; 324 | height: 34px; 325 | display: inline-block; 326 | text-align: center; 327 | -webkit-transform: translate3d(0px, 0px, 0px); 328 | transform: translate3d(0px, 0px, 0px); 329 | } 330 | .flatpickr-current-month span.cur-month { 331 | font-family: inherit; 332 | font-weight: 700; 333 | color: inherit; 334 | display: inline-block; 335 | margin-left: 0.5ch; 336 | padding: 0; 337 | } 338 | .flatpickr-current-month span.cur-month:hover { 339 | background: rgba(0,0,0,0.05); 340 | } 341 | .flatpickr-current-month .numInputWrapper { 342 | width: 6ch; 343 | width: 7ch\0; 344 | display: inline-block; 345 | } 346 | .flatpickr-current-month .numInputWrapper span.arrowUp:after { 347 | border-bottom-color: #fff; 348 | } 349 | .flatpickr-current-month .numInputWrapper span.arrowDown:after { 350 | border-top-color: #fff; 351 | } 352 | .flatpickr-current-month input.cur-year { 353 | background: transparent; 354 | -webkit-box-sizing: border-box; 355 | box-sizing: border-box; 356 | color: inherit; 357 | cursor: text; 358 | padding: 0 0 0 0.5ch; 359 | margin: 0; 360 | display: inline-block; 361 | font-size: inherit; 362 | font-family: inherit; 363 | font-weight: 300; 364 | line-height: inherit; 365 | height: auto; 366 | border: 0; 367 | border-radius: 0; 368 | vertical-align: initial; 369 | -webkit-appearance: textfield; 370 | -moz-appearance: textfield; 371 | appearance: textfield; 372 | } 373 | .flatpickr-current-month input.cur-year:focus { 374 | outline: 0; 375 | } 376 | .flatpickr-current-month input.cur-year[disabled], 377 | .flatpickr-current-month input.cur-year[disabled]:hover { 378 | font-size: 100%; 379 | color: rgba(255,255,255,0.5); 380 | background: transparent; 381 | pointer-events: none; 382 | } 383 | .flatpickr-current-month .flatpickr-monthDropdown-months { 384 | appearance: menulist; 385 | background: #ef5350; 386 | border: none; 387 | border-radius: 0; 388 | box-sizing: border-box; 389 | color: inherit; 390 | cursor: pointer; 391 | font-size: inherit; 392 | font-family: inherit; 393 | font-weight: 300; 394 | height: auto; 395 | line-height: inherit; 396 | margin: -1px 0 0 0; 397 | outline: none; 398 | padding: 0 0 0 0.5ch; 399 | position: relative; 400 | vertical-align: initial; 401 | -webkit-box-sizing: border-box; 402 | -webkit-appearance: menulist; 403 | -moz-appearance: menulist; 404 | width: auto; 405 | } 406 | .flatpickr-current-month .flatpickr-monthDropdown-months:focus, 407 | .flatpickr-current-month .flatpickr-monthDropdown-months:active { 408 | outline: none; 409 | } 410 | .flatpickr-current-month .flatpickr-monthDropdown-months:hover { 411 | background: rgba(0,0,0,0.05); 412 | } 413 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { 414 | background-color: #ef5350; 415 | outline: none; 416 | padding: 0; 417 | } 418 | .flatpickr-weekdays { 419 | background: #ef5350; 420 | text-align: center; 421 | overflow: hidden; 422 | width: 100%; 423 | display: -webkit-box; 424 | display: -webkit-flex; 425 | display: -ms-flexbox; 426 | display: flex; 427 | -webkit-box-align: center; 428 | -webkit-align-items: center; 429 | -ms-flex-align: center; 430 | align-items: center; 431 | height: 28px; 432 | } 433 | .flatpickr-weekdays .flatpickr-weekdaycontainer { 434 | display: -webkit-box; 435 | display: -webkit-flex; 436 | display: -ms-flexbox; 437 | display: flex; 438 | -webkit-box-flex: 1; 439 | -webkit-flex: 1; 440 | -ms-flex: 1; 441 | flex: 1; 442 | } 443 | span.flatpickr-weekday { 444 | cursor: default; 445 | font-size: 90%; 446 | background: #ef5350; 447 | color: rgba(0,0,0,0.54); 448 | line-height: 1; 449 | margin: 0; 450 | text-align: center; 451 | display: block; 452 | -webkit-box-flex: 1; 453 | -webkit-flex: 1; 454 | -ms-flex: 1; 455 | flex: 1; 456 | font-weight: bolder; 457 | } 458 | .dayContainer, 459 | .flatpickr-weeks { 460 | padding: 1px 0 0 0; 461 | } 462 | .flatpickr-days { 463 | position: relative; 464 | overflow: hidden; 465 | display: -webkit-box; 466 | display: -webkit-flex; 467 | display: -ms-flexbox; 468 | display: flex; 469 | -webkit-box-align: start; 470 | -webkit-align-items: flex-start; 471 | -ms-flex-align: start; 472 | align-items: flex-start; 473 | width: 307.875px; 474 | border-left: 1px solid rgba(72,72,72,0.2); 475 | border-right: 1px solid rgba(72,72,72,0.2); 476 | } 477 | .flatpickr-days:focus { 478 | outline: 0; 479 | } 480 | .dayContainer { 481 | padding: 0; 482 | outline: 0; 483 | text-align: left; 484 | width: 307.875px; 485 | min-width: 307.875px; 486 | max-width: 307.875px; 487 | -webkit-box-sizing: border-box; 488 | box-sizing: border-box; 489 | display: inline-block; 490 | display: -ms-flexbox; 491 | display: -webkit-box; 492 | display: -webkit-flex; 493 | display: flex; 494 | -webkit-flex-wrap: wrap; 495 | flex-wrap: wrap; 496 | -ms-flex-wrap: wrap; 497 | -ms-flex-pack: justify; 498 | -webkit-justify-content: space-around; 499 | justify-content: space-around; 500 | -webkit-transform: translate3d(0px, 0px, 0px); 501 | transform: translate3d(0px, 0px, 0px); 502 | opacity: 1; 503 | } 504 | .dayContainer + .dayContainer { 505 | -webkit-box-shadow: -1px 0 0 rgba(72,72,72,0.2); 506 | box-shadow: -1px 0 0 rgba(72,72,72,0.2); 507 | } 508 | .flatpickr-day { 509 | background: none; 510 | border: 1px solid transparent; 511 | border-radius: 150px; 512 | -webkit-box-sizing: border-box; 513 | box-sizing: border-box; 514 | color: #484848; 515 | cursor: pointer; 516 | font-weight: 400; 517 | width: 14.2857143%; 518 | -webkit-flex-basis: 14.2857143%; 519 | -ms-flex-preferred-size: 14.2857143%; 520 | flex-basis: 14.2857143%; 521 | max-width: 39px; 522 | height: 39px; 523 | line-height: 39px; 524 | margin: 0; 525 | display: inline-block; 526 | position: relative; 527 | -webkit-box-pack: center; 528 | -webkit-justify-content: center; 529 | -ms-flex-pack: center; 530 | justify-content: center; 531 | text-align: center; 532 | } 533 | .flatpickr-day.inRange, 534 | .flatpickr-day.prevMonthDay.inRange, 535 | .flatpickr-day.nextMonthDay.inRange, 536 | .flatpickr-day.today.inRange, 537 | .flatpickr-day.prevMonthDay.today.inRange, 538 | .flatpickr-day.nextMonthDay.today.inRange, 539 | .flatpickr-day:hover, 540 | .flatpickr-day.prevMonthDay:hover, 541 | .flatpickr-day.nextMonthDay:hover, 542 | .flatpickr-day:focus, 543 | .flatpickr-day.prevMonthDay:focus, 544 | .flatpickr-day.nextMonthDay:focus { 545 | cursor: pointer; 546 | outline: 0; 547 | background: #e2e2e2; 548 | border-color: #e2e2e2; 549 | } 550 | .flatpickr-day.today { 551 | border-color: #bbb; 552 | } 553 | .flatpickr-day.today:hover, 554 | .flatpickr-day.today:focus { 555 | border-color: #bbb; 556 | background: #bbb; 557 | color: #fff; 558 | } 559 | .flatpickr-day.selected, 560 | .flatpickr-day.startRange, 561 | .flatpickr-day.endRange, 562 | .flatpickr-day.selected.inRange, 563 | .flatpickr-day.startRange.inRange, 564 | .flatpickr-day.endRange.inRange, 565 | .flatpickr-day.selected:focus, 566 | .flatpickr-day.startRange:focus, 567 | .flatpickr-day.endRange:focus, 568 | .flatpickr-day.selected:hover, 569 | .flatpickr-day.startRange:hover, 570 | .flatpickr-day.endRange:hover, 571 | .flatpickr-day.selected.prevMonthDay, 572 | .flatpickr-day.startRange.prevMonthDay, 573 | .flatpickr-day.endRange.prevMonthDay, 574 | .flatpickr-day.selected.nextMonthDay, 575 | .flatpickr-day.startRange.nextMonthDay, 576 | .flatpickr-day.endRange.nextMonthDay { 577 | background: #ef5350; 578 | -webkit-box-shadow: none; 579 | box-shadow: none; 580 | color: #fff; 581 | border-color: #ef5350; 582 | } 583 | .flatpickr-day.selected.startRange, 584 | .flatpickr-day.startRange.startRange, 585 | .flatpickr-day.endRange.startRange { 586 | border-radius: 50px 0 0 50px; 587 | } 588 | .flatpickr-day.selected.endRange, 589 | .flatpickr-day.startRange.endRange, 590 | .flatpickr-day.endRange.endRange { 591 | border-radius: 0 50px 50px 0; 592 | } 593 | .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), 594 | .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), 595 | .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { 596 | -webkit-box-shadow: -10px 0 0 #ef5350; 597 | box-shadow: -10px 0 0 #ef5350; 598 | } 599 | .flatpickr-day.selected.startRange.endRange, 600 | .flatpickr-day.startRange.startRange.endRange, 601 | .flatpickr-day.endRange.startRange.endRange { 602 | border-radius: 50px; 603 | } 604 | .flatpickr-day.inRange { 605 | border-radius: 0; 606 | -webkit-box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 607 | box-shadow: -5px 0 0 #e2e2e2, 5px 0 0 #e2e2e2; 608 | } 609 | .flatpickr-day.flatpickr-disabled, 610 | .flatpickr-day.flatpickr-disabled:hover, 611 | .flatpickr-day.prevMonthDay, 612 | .flatpickr-day.nextMonthDay, 613 | .flatpickr-day.notAllowed, 614 | .flatpickr-day.notAllowed.prevMonthDay, 615 | .flatpickr-day.notAllowed.nextMonthDay { 616 | color: rgba(72,72,72,0.3); 617 | background: transparent; 618 | border-color: transparent; 619 | cursor: default; 620 | } 621 | .flatpickr-day.flatpickr-disabled, 622 | .flatpickr-day.flatpickr-disabled:hover { 623 | cursor: not-allowed; 624 | color: rgba(72,72,72,0.1); 625 | } 626 | .flatpickr-day.week.selected { 627 | border-radius: 0; 628 | -webkit-box-shadow: -5px 0 0 #ef5350, 5px 0 0 #ef5350; 629 | box-shadow: -5px 0 0 #ef5350, 5px 0 0 #ef5350; 630 | } 631 | .flatpickr-day.hidden { 632 | visibility: hidden; 633 | } 634 | .rangeMode .flatpickr-day { 635 | margin-top: 1px; 636 | } 637 | .flatpickr-weekwrapper { 638 | float: left; 639 | } 640 | .flatpickr-weekwrapper .flatpickr-weeks { 641 | padding: 0 12px; 642 | border-left: 1px solid rgba(72,72,72,0.2); 643 | } 644 | .flatpickr-weekwrapper .flatpickr-weekday { 645 | float: none; 646 | width: 100%; 647 | line-height: 28px; 648 | } 649 | .flatpickr-weekwrapper span.flatpickr-day, 650 | .flatpickr-weekwrapper span.flatpickr-day:hover { 651 | display: block; 652 | width: 100%; 653 | max-width: none; 654 | color: rgba(72,72,72,0.3); 655 | background: transparent; 656 | cursor: default; 657 | border: none; 658 | } 659 | .flatpickr-innerContainer { 660 | display: block; 661 | display: -webkit-box; 662 | display: -webkit-flex; 663 | display: -ms-flexbox; 664 | display: flex; 665 | -webkit-box-sizing: border-box; 666 | box-sizing: border-box; 667 | overflow: hidden; 668 | background: #fff; 669 | border-bottom: 1px solid rgba(72,72,72,0.2); 670 | } 671 | .flatpickr-rContainer { 672 | display: inline-block; 673 | padding: 0; 674 | -webkit-box-sizing: border-box; 675 | box-sizing: border-box; 676 | } 677 | .flatpickr-time { 678 | text-align: center; 679 | outline: 0; 680 | display: block; 681 | height: 0; 682 | line-height: 40px; 683 | max-height: 40px; 684 | -webkit-box-sizing: border-box; 685 | box-sizing: border-box; 686 | overflow: hidden; 687 | display: -webkit-box; 688 | display: -webkit-flex; 689 | display: -ms-flexbox; 690 | display: flex; 691 | background: #fff; 692 | border-radius: 0 0 5px 5px; 693 | } 694 | .flatpickr-time:after { 695 | content: ""; 696 | display: table; 697 | clear: both; 698 | } 699 | .flatpickr-time .numInputWrapper { 700 | -webkit-box-flex: 1; 701 | -webkit-flex: 1; 702 | -ms-flex: 1; 703 | flex: 1; 704 | width: 40%; 705 | height: 40px; 706 | float: left; 707 | } 708 | .flatpickr-time .numInputWrapper span.arrowUp:after { 709 | border-bottom-color: #484848; 710 | } 711 | .flatpickr-time .numInputWrapper span.arrowDown:after { 712 | border-top-color: #484848; 713 | } 714 | .flatpickr-time.hasSeconds .numInputWrapper { 715 | width: 26%; 716 | } 717 | .flatpickr-time.time24hr .numInputWrapper { 718 | width: 49%; 719 | } 720 | .flatpickr-time input { 721 | background: transparent; 722 | -webkit-box-shadow: none; 723 | box-shadow: none; 724 | border: 0; 725 | border-radius: 0; 726 | text-align: center; 727 | margin: 0; 728 | padding: 0; 729 | height: inherit; 730 | line-height: inherit; 731 | color: #484848; 732 | font-size: 14px; 733 | position: relative; 734 | -webkit-box-sizing: border-box; 735 | box-sizing: border-box; 736 | -webkit-appearance: textfield; 737 | -moz-appearance: textfield; 738 | appearance: textfield; 739 | } 740 | .flatpickr-time input.flatpickr-hour { 741 | font-weight: bold; 742 | } 743 | .flatpickr-time input.flatpickr-minute, 744 | .flatpickr-time input.flatpickr-second { 745 | font-weight: 400; 746 | } 747 | .flatpickr-time input:focus { 748 | outline: 0; 749 | border: 0; 750 | } 751 | .flatpickr-time .flatpickr-time-separator, 752 | .flatpickr-time .flatpickr-am-pm { 753 | height: inherit; 754 | float: left; 755 | line-height: inherit; 756 | color: #484848; 757 | font-weight: bold; 758 | width: 2%; 759 | -webkit-user-select: none; 760 | -moz-user-select: none; 761 | -ms-user-select: none; 762 | user-select: none; 763 | -webkit-align-self: center; 764 | -ms-flex-item-align: center; 765 | align-self: center; 766 | } 767 | .flatpickr-time .flatpickr-am-pm { 768 | outline: 0; 769 | width: 18%; 770 | cursor: pointer; 771 | text-align: center; 772 | font-weight: 400; 773 | } 774 | .flatpickr-time input:hover, 775 | .flatpickr-time .flatpickr-am-pm:hover, 776 | .flatpickr-time input:focus, 777 | .flatpickr-time .flatpickr-am-pm:focus { 778 | background: #eaeaea; 779 | } 780 | .flatpickr-input[readonly] { 781 | cursor: pointer; 782 | } 783 | @-webkit-keyframes fpFadeInDown { 784 | from { 785 | opacity: 0; 786 | -webkit-transform: translate3d(0, -20px, 0); 787 | transform: translate3d(0, -20px, 0); 788 | } 789 | to { 790 | opacity: 1; 791 | -webkit-transform: translate3d(0, 0, 0); 792 | transform: translate3d(0, 0, 0); 793 | } 794 | } 795 | @keyframes fpFadeInDown { 796 | from { 797 | opacity: 0; 798 | -webkit-transform: translate3d(0, -20px, 0); 799 | transform: translate3d(0, -20px, 0); 800 | } 801 | to { 802 | opacity: 1; 803 | -webkit-transform: translate3d(0, 0, 0); 804 | transform: translate3d(0, 0, 0); 805 | } 806 | } 807 | --------------------------------------------------------------------------------