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