- var page_Title = 'Switch';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Switch
                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 Switch
          // Container-fluid starts                    
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Custom Switch
                    p.f-m-light.mt-1 
                      | A switch has the markup of a custom checkbox but uses the 
                      code form-switch 
                      | class to render a toggle switch.
                  .card-body
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-4 md:col-span-6 sm:col-span-12")
                        .card-wrapper.custom-border.rounded-3
                          .form-check-size
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-primary.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-secondary.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-success.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-danger.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-warning.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-info.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-dark.check-size(type='checkbox' role='switch' checked='')
                      div(class="col-span-4 md:col-span-6 sm:col-span-12")
                        .card-wrapper.custom-border.rounded-3.radius-none
                          .form-check-size.default-square
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-primary.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-secondary.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-success.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-danger.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-warning.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-info.check-size(type='checkbox' role='switch' checked='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-dark.check-size(type='checkbox' role='switch' checked='')
                      div(class="col-span-4 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.common-flex
                          .form-check-size
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-primary.check-size(type='checkbox' role='switch' checked='' disabled='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-secondary.check-size(type='checkbox' role='switch' checked='' disabled='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-success.check-size(type='checkbox' role='switch' checked='' disabled='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-danger.check-size(type='checkbox' role='switch' checked='' disabled='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-warning.check-size(type='checkbox' role='switch' checked='' disabled='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-info.check-size(type='checkbox' role='switch' checked='' disabled='')
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-dark.check-size(type='checkbox' role='switch' checked='' disabled='')
              div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                .card
                  .card-header
                    h5 Icons Switch
                    p.f-m-light.mt-1 
                      | For defined icons switches, use 
                      code  switch-state
                      |   and
                      code   icon-state
                      |.
                  .card-body.common-flex.flex-col.switch-wrapper
                    .flex.switch-box
                      .text-end.icon-state
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-primary
                      label.col-form-label.m-l-10 Primary Switch
                    .flex.switch-box
                      .text-end.icon-state
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-secondary
                      label.col-form-label.m-l-10 Secondary Switch
                    .flex.switch-box
                      .text-end.icon-state
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-success
                      label.col-form-label.m-l-10 Success Switch
                    .flex.switch-box
                      .text-end.icon-state
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-danger
                      label.col-form-label.m-l-10 Danger Switch
                    .flex.switch-box
                      .text-end.icon-state
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-warning
                      label.col-form-label.m-l-10 Warning Switch
                    .flex.switch-box
                      .text-end.icon-state
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-info
                      label.col-form-label.m-l-10 Info Switch
                    .flex.switch-box
                      .text-end.icon-state
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-dark
                      label.col-form-label.m-l-10 Dark Switch
              div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                .card
                  .card-header
                    h5 Uncheck Switch
                    p.f-m-light.mt-1 
                      | Use  
                      code switch-state
                      |  class to create uncheck switches. 
                  .card-body.common-flex.flex-col.switch-wrapper
                    .flex.switch-box
                      .text-end
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-primary 
                      label.col-form-label.m-l-10 Unchecked Primary Switch
                    .flex.switch-box
                      .text-end
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-secondary
                      label.col-form-label.m-l-10 Unchecked Secondary Switch
                    .flex.switch-box
                      .text-end
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-success
                      label.col-form-label.m-l-10 Unchecked Success Switch
                    .flex.switch-box
                      .text-end
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-danger
                      label.col-form-label.m-l-10 Unchecked Danger Switch
                    .flex.switch-box
                      .text-end
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-warning
                      label.col-form-label.m-l-10 Unchecked Warning Switch
                    .flex.switch-box
                      .text-end
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-info
                      label.col-form-label.m-l-10 Unchecked Info Switch
                    .flex.switch-box
                      .text-end
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-dark
                      label.col-form-label.m-l-10 Unchecked Dark Switch
              div(class="col-span-4 xl:col-span-12") 
                .card
                  .card-header
                    h5 Borders with Icons
                    p.f-m-light.mt-1 
                      | Use 
                      code switch-outline 
                      | and 
                      code icon-state
                      |  class to create outline with icons. 
                  .card-body.common-flex.flex-col.switch-wrapper
                    .flex.switch-box
                      .text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-primary
                      label.col-form-label.m-l-10 Bordered Primary Switch
                    .flex.switch-box
                      .text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-secondary
                      label.col-form-label.m-l-10 Bordered Secondary Switch
                    .flex.switch-box
                      .text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-success
                      label.col-form-label.m-l-10 Bordered Success Switch
                    .flex.switch-box
                      .text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-danger
                      label.col-form-label.m-l-10 Bordered Danger Switch
                    .flex.switch-box
                      .text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-warning
                      label.col-form-label.m-l-10 Bordered Warning Switch
                    .flex.switch-box
                      .text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-info
                      label.col-form-label.m-l-10 Bordered Info Switch
                    .flex.switch-box
                      .text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox', checked='')
                          span.switch-state.bg-dark
                      label.col-form-label.m-l-10 Bordered Dark Switch
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Disabled Outline Switch
                    p.f-m-light.mt-1 
                      | Use 
                      code switch-outline 
                      |  class to create outline. 
                  .card-body.common-flex
                    .flex
                      .grow.text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox')
                          span.switch-state.bg-primary
                    .flex
                      .grow.text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox')
                          span.switch-state.bg-secondary
                    .flex
                      .grow.text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox')
                          span.switch-state.bg-success
                    .flex
                      .grow.text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox')
                          span.switch-state.bg-danger
                    .flex
                      .grow.text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox')
                          span.switch-state.bg-warning
                    .flex
                      .grow.text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox')
                          span.switch-state.bg-info
                    .flex
                      .grow.text-end.icon-state.switch-outline
                        label.switch.mb-0
                          input(type='checkbox')
                          span.switch-state.bg-dark
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Variation of Switches
                    p.f-m-light.mt-1 
                      | Use 
                      code tgl-skewed/tgl-flip
                      |  class to create variations. 
                  .card-body
                      ul.tg-list.common-flex
                        li.tg-list-item
                          input#cb3.tgl.tgl-skewed(type = "checkbox")
                          label.tgl-btn(data-tg-off = "OFF", data-tg-on = "ON", for = "cb3")
                        li 
                          p  Skewed
                        li.tg-list-item
                          input#cb5.tgl.tgl-flip(type = "checkbox")
                          label.tgl-btn(data-tg-off = "Nope", data-tg-on = "Yeah!", for = "cb5")
                        li 
                          p Flip
                        li.tg-list-item
                          .flex
                            .grow.text-end.icon-state
                              label.switch.mb-0.square-checked
                                input(type='checkbox', checked='')
                                span.switch-state.bg-warning(class="rounded-[4px]")
                        li 
                          p Checked
                        li.tg-list-item
                          .flex
                            .grow.text-end
                              label.switch.square-checked.mb-0
                                input(type='checkbox', checked='')
                                span.switch-state.bg-success(class="rounded-[4px]")
                        li 
                          p Flat
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Switch Sizing
                    p.f-m-light.mt-1 
                      | Use 
                      code switch-sm
                      |  and 
                      code switch-lg 
                      | class to create switch sizing.
                  .card-body.common-flex.switch-wrapper
                    .flex.switch-box
                        label.col-form-label.m-r-10 Small Size
                        .grow.text-end.switch-sm
                          label.switch
                            input(type='checkbox', checked='')
                            span.switch-state
                    .flex.switch-box
                      label.col-form-label.m-r-10 Small Size Unchecked
                      .grow.text-end.switch-sm
                        label.switch
                          input(type='checkbox')
                          span.switch-state 
                    .flex.switch-box
                      label.col-form-label.m-r-10 Normal Size
                      .grow.text-end
                        label.switch
                          input(type='checkbox', checked='')
                          span.switch-state
                    .flex.switch-box
                      label.col-form-label.m-r-10 Normal Unchecked
                      .grow.text-end
                        label.switch
                          input(type='checkbox')
                          span.switch-state    
                    .flex.switch-box
                      label.col-form-label.m-r-10 Disabled State
                      .grow.text-end
                        label.switch
                          input(type='checkbox', disabled='')
                          span.switch-state
                    .flex.switch-box
                        label.col-form-label.m-r-10 Large Size
                        .grow.text-end.switch-lg
                          label.switch
                            input(type='checkbox', checked='')
                            span.switch-state.large-switch
                    .flex.switch-box
                      label.col-form-label.m-r-10 Large Unchecked
                      .grow.text-end.switch-lg
                        label.switch
                          input(type='checkbox')
                          span.switch-state.large-switch
                    .flex.switch-box
                      label.col-form-label.m-r-10 Disabled
                      .grow.text-end.switch-lg
                        label.switch
                          input(type='checkbox' disabled='')
                          span.switch-state.large-switch
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Switch with Icons
                    p.f-m-light.mt-1 
                      | Use 
                      code icon-state
                      |  class to visible icons in switches.
                  .card-body.common-flex.switch-wrapper
                    .flex.switch-box
                        label.col-form-label.m-r-10 Small Size
                        .grow.text-end.switch-sm.icon-state
                          label.switch
                            input(type='checkbox', checked='')
                            span.switch-state
                    .flex.switch-box
                      label.col-form-label.m-r-10 Small Size Unchecked
                      .grow.text-end.switch-sm.icon-state
                        label.switch
                          input(type='checkbox')
                          span.switch-state
                    .flex.switch-box
                        label.col-form-label.m-r-10 Normal Size
                        .grow.text-end.icon-state
                          label.switch
                            input(type='checkbox', checked='')
                            span.switch-state
                    .flex.switch-box
                      label.col-form-label.m-r-10 Normal Unchecked
                      .grow.text-end.icon-state
                        label.switch
                          input(type='checkbox')
                          span.switch-state
                    .flex.switch-box
                      label.col-form-label.m-r-10 Disabled With Icon
                      .grow.text-end.icon-state
                        label.switch
                          input(type='checkbox', disabled='')
                          span.switch-state
                    .flex.switch-box
                        label.col-form-label.m-r-10 Large Size
                        .grow.text-end.switch-lg.icon-state
                          label.switch
                            input(type='checkbox', checked='')
                            span.switch-state
                    .flex.switch-box
                      label.col-form-label.m-r-10 Large Unchecked
                      .grow.text-end.switch-lg.icon-state
                        label.switch
                          input(type='checkbox')
                          span.switch-state
                    .flex.switch-box
                      label.col-form-label.m-r-10 Disabled
                      .grow.text-end.switch-lg.icon-state
                        label.switch
                          input(type='checkbox' disabled='')
                          span.switch-state
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files   
