- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var input_mask            = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                   h4
                    | Input Mask
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Controls
                    li.breadcrumb-item.active Input Mask
          // Container-fluid starts
          .container-fluid
            .row 
              .col-12
                .card
                  .card-header
                    h4 Input masks
                    p.f-m-light.mt-1 
                      | Input mask used in form-validations,forms,card-details,and etc.
                  .card-body
                    .row.g-3 
                      .col-sm-6 
                        .card-wrapper.border.rounded-3.light-card.checkbox-checked
                          h6.sub-title Date Format
                          form.row.g-3
                            .col-12
                              label.col-form-label(for='cleave-date1') Date
                              input#cleave-date1.form-control(type='text' placeholder='DD-MM-YYYY')
                            .col-12
                              label.col-form-label(for='cleave-date2') Date format type
                              input#cleave-date2.form-control(type='text' placeholder='MM-YYYY')
                      .col-sm-6 
                        .card-wrapper.border.rounded-3.light-card.checkbox-checked
                          h6.sub-title Time Format
                          form.row.g-3
                            .col-12
                              label.col-form-label(for='cleave-time1') Time format type
                              input#cleave-time1.form-control(type='text' placeholder='hh:mm:ss')
                            .col-12 
                              label.col-form-label(for='cleave-time2') Hour/month type
                              input#cleave-time2.form-control(type='text' placeholder='hh:mm')
                      .col-12
                        .card-wrapper.border.rounded-3.light-card.checkbox-checked
                          h6.sub-title Default Input Mask
                          form.row.g-3
                            .col-xxl-4.col-sm-6 
                              label.col-form-label(for='cleave-number-format') Currency
                              input#cleave-number-format.form-control(type='text' placeholder='Enter number')
                            .col-xxl-4.col-sm-6 
                              label.col-form-label(for='cleave-type-prefix') Prefix
                              input#cleave-type-prefix.form-control(type='text' placeholder='Prefix-xxxx-xxxx-xxxx')
                            .col-xxl-4.col-sm-6 
                              label.col-form-label(for='cleave-type-delimiter') Delimiter
                              input#cleave-type-delimiter.form-control(type='text' placeholder='xxx·xxx·xxx')
                            .col-xxl-4.col-sm-6
                              label.form-label(for='cleave-phone-number') Phone Number
                              input#cleave-phone-number.form-control(type='text' placeholder='(xxx)xxx-xxxx')
                            .col-xxl-4.col-sm-6
                              label.form-label(for='cleave-card-number') Card Number
                              input#cleave-card-number.form-control(type='text' placeholder='xxxx xxxx xxxx xxxx')
                            .col-xxl-4.col-sm-6
                              label.form-label(for='tailprefix') Tailprefix
                              input#tailprefix.form-control(type='text' placeholder='0000.00€')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files