Neverending Pun Machine

    flatpickr-bulma-theme

    0.2.0 • Public • Published

    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

    Install

    npm i flatpickr-bulma-theme

    DownloadsWeekly Downloads

    5

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    202 kB

    Total Files

    38

    Last publish

    Collaborators

    • mymth