flatpickr Bulma Theme

Bulma theme for flatpickr built with Sass

Demo

• Demo

Usage

for Node.js

Install the package using npm.

npm i -D flatpickr-bulma-theme

Import flatpickr-bulma.scss after importing Bulma.

@import "../node_modules/bulma/bulma";
//... 
@import "../node_modules/flatpickr-bulma-theme/flatpickr-bulma";

If you don't need RTL support, you can import src/sass/flatpickr.scss instead for smaller file size.

for browser

Instead of flatpickr's, include this theme's css in your HTML file

• from CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr-bulma-theme/dist/flatpickr-bulma.min.css">

• or, download dist/flatpickr-bulma.css into your project

<link rel="stylesheet" type="text/css" href="_your_css_dir_/flatpickr-bulma.css">

Customize

You can use these variables to customize this theme. (For the computed values, see Bulma's document)

Variables

Name	Type	Default value
$flatpickr-font-size	size	$size-normal
$flatpickr-month-font-size	size	$size-medium
$flatpickr-line-height	size	1.5
$flatpickr-day-size	size	2.5rem
$flatpickr-month-nav-height	size	2.25rem
$flatpickr-weekdays-height	size	$size-small * 1.5
$flatpickr-calendar-background	color	$white
$flatpickr-calendar-border-color	color	rgba($black, 0.1)
$flatpickr-calendar-shadow	size	0 2px 3px $flatpickr-calendar-border-color
$flatpickr-month-background	color	transparent
$flatpickr-month-foreground	color	$text-strong
$flatpickr-arrow-hover-color	color	$red
$flatpickr-weekdays-background	color	transparent
$flatpickr-weekdays-foreground	color	$text-light
$flatpickr-day-foreground	color	$text
$flatpickr-day-hover-background	color	$light
$flatpickr-today-color	color	$primary
$flatpickr-today-fg-color	color	$white
$flatpickr-selected-day-background	color	$link
$flatpickr-selected-day-foreground	color	$white
$flatpickr-disabled-color	color	$text-light
$flatpickr-disabled-border-color	color	transparent
$flatpickr-disabled-day-foreground	color	$grey-lighter

Plugins

The package includes stylesheet for plugins. To use them, simply include the stylesheet file into your project after this theme. You can also customize the stylesheet using the variables.

confirmDate

@import "../node_modules/flatpickr-bulma-theme/src/plugins/confirmDate/confirmDate";

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr-bulma-theme/dist/plugins/confirmDate.min.css">

Variables

Name	Type	Default value
$flatpickr-confirm-height	size	2.25rem
$flatpickr-confirm-background	color	$background

weekSelect

@import "../node_modules/flatpickr-bulma-theme/src/plugins/weekSelect/weekSelect";

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr-bulma-theme/dist/plugins/weekSelect.min.css">

shortcut-buttons-flatpickr

Stylesheet for the Shortcut buttons plugin (shortcut-buttons-flatpickr).

@import "../node_modules/flatpickr-bulma-theme/src/plugins/shortcut-buttons-flatpickr/shortcut-buttons-flatpickr";

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr-bulma-theme/dist/plugins/shortcut-buttons-flatpickr.min.css">

Variables

Name	Type	Default value
$flatpickr-scbtns-background	color	$background
$flatpickr-scbtns-foreground	color	$flatpickr-day-foreground
$flatpickr-scbtns-button-font-size	size	$size-small
$flatpickr-scbtns-button-line-height	size	1.5
$flatpickr-scbtns-button-color	color	$grey-darker
$flatpickr-scbtns-button-background-color	color	$white
$flatpickr-scbtns-button-border	size	1px solid $grey-lighter
$flatpickr-scbtns-button-border-radius	size	$radius-small
$flatpickr-scbtns-button-padding	size	calc(0.375em - 1px) 0.75em
$flatpickr-scbtns-button-hover-color	color	$link-hover
$flatpickr-scbtns-button-hover-border-color	color	$link-hover-border
$flatpickr-scbtns-button-focus-color	color	$link-focus
$flatpickr-scbtns-button-focus-border-color	color	$link-focus-border
$flatpickr-scbtns-button-focus-box-shadow	size	0 0 0 0.125em rgba($link, 0.25)
$flatpickr-scbtns-button-active-color	color	$link-active
$flatpickr-scbtns-button-active-border-color	color	$link-active-border

License

• MIT