- var page_Title = 'Touchspin';
- var touchspin_2           = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Touchspin
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Widgets
                    li.breadcrumb-item.active Touchspin
          // Container-fluid starts
          .container
            // Custom TouchSpin Spinners start
            .taiwind-touchspin
              .grid.grid-cols-12.card-gap
                div(class="col-span-6 xl:col-span-12")
                  .card
                    .card-header
                      h5 Default Touchspin
                      p.f-m-light.mt-1 
                        | Use 
                        code decrement-touchspin 
                        | and 
                        code increment-touchspin 
                        | class for default style touchspin.
                    .card-body.common-flex
                      .touchspin-wrapper 
                        button.decrement-touchspin.btn-touchspin.touchspin-primary.text-center
                          i.fa-solid.fa-minus 
                        input.input-touchspin.spin-outline-primary(type='number' value='0')
                        button.increment-touchspin.btn-touchspin.touchspin-primary.text-center
                          i.fa-solid.fa-plus  
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-secondary.text-center
                          i.fa-solid.fa-minus  
                        input.input-touchspin.spin-outline-secondary(type='number' value='2')
                        button.increment-touchspin.btn-touchspin.touchspin-secondary.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-success.text-center
                          i.fa-solid.fa-minus  
                        input.input-touchspin.spin-outline-success(type='number' value='1')
                        button.increment-touchspin.btn-touchspin.touchspin-success.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-danger.text-center
                          i.fa-solid.fa-minus  
                        input.input-touchspin.spin-outline-danger(type='number' value='8')
                        button.increment-touchspin.btn-touchspin.touchspin-danger.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-warning.text-center
                          i.fa-solid.fa-minus  
                        input.input-touchspin.spin-outline-warning(type='number' value='3')
                        button.increment-touchspin.btn-touchspin.touchspin-warning.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-info.text-center
                          i.fa-solid.fa-minus
                        input.input-touchspin.spin-outline-info(type='number' value='9')
                        button.increment-touchspin.btn-touchspin.touchspin-info.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-dark.text-center
                          i.fa-solid.fa-minus     
                        input.input-touchspin.spin-outline-dark(type='number' value='4')
                        button.increment-touchspin.btn-touchspin.touchspin-dark.text-center
                          i.fa-solid.fa-plus   
                div(class="col-span-6 xl:col-span-12")
                  .card
                    .card-header
                      h5 Outlined Touchspin
                      p.f-m-light.mt-1 
                        | Use 
                        code decrement-touchspin 
                        | and 
                        code increment-touchspin 
                        | class for outline style touchspin.
                    .card-body.common-flex
                      .touchspin-wrapper 
                        button.decrement-touchspin.btn-touchspin.spin-border-primary.text-center
                          i.fa-solid.fa-minus 
                        input.input-touchspin.spin-outline-primary(type='number' value='0')
                        button.increment-touchspin.btn-touchspin.spin-border-primary.text-center
                          i.fa-solid.fa-plus  
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.spin-border-secondary.text-center
                          i.fa-solid.fa-minus  
                        input.input-touchspin.spin-outline-secondary(type='number' value='2')
                        button.increment-touchspin.btn-touchspin.spin-border-secondary.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.spin-border-success.text-center
                          i.fa-solid.fa-minus  
                        input.input-touchspin.spin-outline-success(type='number' value='1')
                        button.increment-touchspin.btn-touchspin.spin-border-success.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.spin-border-danger.text-center
                          i.fa-solid.fa-minus  
                        input.input-touchspin.spin-outline-danger(type='number' value='8')
                        button.increment-touchspin.btn-touchspin.spin-border-danger.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.spin-border-warning.text-center
                          i.fa-solid.fa-minus  
                        input.input-touchspin.spin-outline-warning(type='number' value='3')
                        button.increment-touchspin.btn-touchspin.spin-border-warning.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.spin-border-info.text-center
                          i.fa-solid.fa-minus
                        input.input-touchspin.spin-outline-info(type='number' value='9')
                        button.increment-touchspin.btn-touchspin.spin-border-info.text-center
                          i.fa-solid.fa-plus   
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.spin-border-dark.text-center
                          i.fa-solid.fa-minus     
                        input.input-touchspin.spin-outline-dark(type='number' value='4')
                        button.increment-touchspin.btn-touchspin.spin-border-dark.text-center
                          i.fa-solid.fa-plus   
                div(class="col-span-6 xl:col-span-12")
                  .card
                    .card-header
                      h5 Icons with Prefix and Postfix
                      p.f-m-light.mt-1 
                        | Use 
                        code decrement-touchspin 
                        | and 
                        code increment-touchspin 
                        | class for icons pre/post fix style touchspin.
                    .card-body.common-flex.pre-post-touchspin
                      .input-group
                        button.decrement-touchspin.btn-touchspin.touchspin-primary
                          i.fa-solid.fa-minus
                        span.input-group-text.rounded-none $
                        input.input-touchspin.spin-outline-primary(type='number' class="[@media(max-width:768px)]:w-[100px]" value='0')
                        button.increment-touchspin.btn-touchspin.touchspin-primary
                          i.fa-solid.fa-plus  
                      .input-group
                        button.decrement-touchspin.btn-touchspin.touchspin-primary
                          i.fa-solid.fa-minus
                        input.input-touchspin.spin-outline-primary(type='number' class="[@media(max-width:768px)]:w-[100px]" value='0')
                        span.input-group-text.rounded-none %
                        button.increment-touchspin.btn-touchspin.touchspin-primary
                          i.fa-solid.fa-plus 
                div(class="col-span-6 xl:col-span-12")
                  .card
                    .card-header
                      h5 Buttons with Prefix and Postfix
                      p.f-m-light.mt-1 
                        | Use
                        code decrement-touchspin 
                        | and 
                        code increment-touchspin 
                        | class for buttons pre/post fix style touchspin.
                    .card-body.common-flex.pre-post-touchspin.bg-touchspin
                      .input-group
                        button.decrement-touchspin.btn-touchspin.touchspin-warning
                          i.fa-solid.fa-minus
                        button#button-addon1.btn-outline-warning(type='button') Pre
                        input.input-touchspin.spin-outline-primary(type='number' class="[@media(max-width:768px)]:w-[100px]" value='0')
                        button.increment-touchspin.btn-touchspin.touchspin-warning
                          i.fa-solid.fa-plus  
                      .input-group
                        button.decrement-touchspin.btn-touchspin.touchspin-warning
                          i.fa-solid.fa-minus
                        input.input-touchspin.spin-outline-primary(type='number' class="[@media(max-width:768px)]:w-[100px]" value='0')
                        button#button-addon2.btn-outline-warning(type='button') Post
                        button.increment-touchspin.btn-touchspin.touchspin-warning
                          i.fa-solid.fa-plus 
                div(class="col-span-12")
                  .card
                    .card-header
                      h5 Rounded Touchspin
                      p.f-m-light.mt-1 
                        | Use 
                        code decrement-touchspin 
                        | and 
                        code increment-touchspin 
                        | class for round style touchspin.
                    .card-body.common-flex.rounded-touchspin
                      .touchspin-wrapper 
                        button.decrement-touchspin.btn-touchspin.touchspin-primary.text-center
                          i.fa-solid.fa-angle-left 
                        input.input-touchspin.spin-outline-primary(type='number' value='0')
                        button.increment-touchspin.btn-touchspin.touchspin-primary.text-center
                          i.fa-solid.fa-angle-right
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-secondary.text-center
                          i.fa-solid.fa-angle-left
                        input.input-touchspin.spin-outline-secondary(type='number' value='2')
                        button.increment-touchspin.btn-touchspin.touchspin-secondary.text-center
                          i.fa-solid.fa-angle-right 
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-success.text-center
                          i.fa-solid.fa-angle-left
                        input.input-touchspin.spin-outline-success(type='number' value='1')
                        button.increment-touchspin.btn-touchspin.touchspin-success.text-center
                          i.fa-solid.fa-angle-right 
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-danger.text-center
                          i.fa-solid.fa-angle-left 
                        input.input-touchspin.spin-outline-danger(type='number' value='8')
                        button.increment-touchspin.btn-touchspin.touchspin-danger.text-center
                          i.fa-solid.fa-angle-right 
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-warning.text-center
                          i.fa-solid.fa-angle-left 
                        input.input-touchspin.spin-outline-warning(type='number' value='3')
                        button.increment-touchspin.btn-touchspin.touchspin-warning.text-center
                          i.fa-solid.fa-angle-right 
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-info.text-center
                          i.fa-solid.fa-angle-left
                        input.input-touchspin.spin-outline-info(type='number' value='9')
                        button.increment-touchspin.btn-touchspin.touchspin-info.text-center
                          i.fa-solid.fa-angle-right 
                      .touchspin-wrapper
                        button.decrement-touchspin.btn-touchspin.touchspin-dark.text-center
                          i.fa-solid.fa-angle-left
                        input.input-touchspin.spin-outline-dark(type='number' value='4')
                        button.increment-touchspin.btn-touchspin.touchspin-dark.text-center
                          i.fa-solid.fa-angle-right
              // Custom TouchSpin Spinners end
            // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
