341 lines
19 KiB
Plaintext
341 lines
19 KiB
Plaintext
- var theme_customizer = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| Switch
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Forms
|
|
li.breadcrumb-item Form Widgets
|
|
li.breadcrumb-item.active Switch
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12.col-xl-6.col-lg-12.col-md-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Basic Switch
|
|
.card-body.row.switch-showcase.height-equal
|
|
.col-sm-12
|
|
.media
|
|
label.col-form-label.m-r-10 Default Switch
|
|
.media-body.text-end
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Unhecked Switch
|
|
.media-body.text-end
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 With Icon
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Unhecked With Icon
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Disabled State
|
|
.media-body.text-end
|
|
label.switch
|
|
input(type='checkbox', disabled='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Disabled With Icon
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', disabled='')
|
|
span.switch-state
|
|
.col-sm-12.col-xl-6.col-lg-12.col-md-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Switch Color
|
|
.card-body.row.switch-showcase.height-equal
|
|
.col-sm-12
|
|
.media
|
|
label.col-form-label.m-r-10 Primary Color
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-primary
|
|
.media
|
|
label.col-form-label.m-r-10 Secondary Color
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-secondary
|
|
.media
|
|
label.col-form-label.m-r-10 Success Color
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-success
|
|
.media
|
|
label.col-form-label.m-r-10 Info Color
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-info
|
|
.media
|
|
label.col-form-label.m-r-10 Warning Color
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-warning
|
|
.media
|
|
label.col-form-label.m-r-10 Danger Color
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-danger
|
|
.col-sm-12.col-xl-6.col-lg-12.col-md-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Switch Outline
|
|
.card-body.row.switch-showcase
|
|
.col-sm-12
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Primary Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-primary
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Secondary Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-secondary
|
|
.media
|
|
label.col-form-label.m-r-10 Success Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-success
|
|
.media
|
|
label.col-form-label.m-r-10 Info Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-info
|
|
.media
|
|
label.col-form-label.m-r-10 Warning Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-warning
|
|
.media
|
|
label.col-form-label.m-r-10 Danger Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-danger
|
|
.col-sm-12.col-xl-6.col-lg-12.col-md-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Switch unchecked Outline
|
|
.card-body.row.switch-showcase
|
|
.col-sm-12
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Primary Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state.bg-primary
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Secondary Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state.bg-secondary
|
|
.media
|
|
label.col-form-label.m-r-10 Success Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state.bg-success
|
|
.media
|
|
label.col-form-label.m-r-10 Info Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state.bg-info
|
|
.media
|
|
label.col-form-label.m-r-10 Warning Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state.bg-warning
|
|
.media
|
|
label.col-form-label.m-r-10 Danger Color
|
|
.media-body.text-end.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state.bg-danger
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Switch Sizing
|
|
.card-body.row.switch-showcase
|
|
.col-sm-12
|
|
.media
|
|
label.col-form-label.m-r-10 Large Size
|
|
.media-body.text-end.switch-lg
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Large Unhecked
|
|
.media-body.text-end.switch-lg
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Normal Size
|
|
.media-body.text-end
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Normal Unhecked
|
|
.media-body.text-end
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Small Size
|
|
.media-body.text-end.switch-sm
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Small Size Unhecked
|
|
.media-body.text-end.switch-sm
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Switch With icon
|
|
.card-body.row.switch-showcase
|
|
.col-sm-12
|
|
.media
|
|
label.col-form-label.m-r-10 Large Size
|
|
.media-body.text-end.switch-lg.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Large Unhecked
|
|
.media-body.text-end.switch-lg.icon-state
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Normal Size
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Normal Unhecked
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Small Size
|
|
.media-body.text-end.switch-sm.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
.media
|
|
label.col-form-label.m-r-10 Small Size Unhecked
|
|
.media-body.text-end.switch-sm.icon-state
|
|
label.switch
|
|
input(type='checkbox')
|
|
span.switch-state
|
|
.col-sm-12.col-xl-4
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Switch With color
|
|
.card-body.row.switch-showcase
|
|
.col-sm-12
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Primary Color (Disabled)
|
|
.media-body.text-end.switch-lg.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='', disabled='')
|
|
span.switch-state.bg-primary
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Secondary Color
|
|
.media-body.text-end.switch-lg.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-secondary
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Success Color
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-success
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Info Color
|
|
.media-body.text-end.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-info
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Warning Color
|
|
.media-body.text-end.switch-sm.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-warning
|
|
.media
|
|
label.col-form-label.m-r-10
|
|
| Danger Color
|
|
.media-body.text-end.switch-sm.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-danger
|
|
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|