Skip to content

Latest commit

 

History

History
executable file
·
144 lines (108 loc) · 4.75 KB

README.md

File metadata and controls

executable file
·
144 lines (108 loc) · 4.75 KB
Raw

flatpickr Bulma Theme

Bulma theme for flatpickr built with Sass

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