booking/assets/pug/pages/theme/input-group.pug
2025-03-24 22:58:00 +03:00

152 lines
9.0 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
| Input groups
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Forms
li.breadcrumb-item Form Controls
li.breadcrumb-item.active Input groups
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
.col-sm-12
.card
.card-header.pb-0
h5 Basic Input groups
.card-body
.row
.col
form
.mb-3.m-form__group
label.form-label Left Addon
.input-group
span.input-group-text @
input.form-control(type='text', placeholder='Email')
.mb-3
label.form-label Right Addon
.input-group
input.form-control(type='text', placeholder="Recipient's username", aria-label="Recipient's username")
span.input-group-text @example.com
.mb-3
label.form-label Joint Addon
.input-group
span.input-group-text $
span.input-group-text 0.00
input.form-control(type='text', aria-label='Amount (to the nearest dollar)')
div
label.form-label Left & Right Addon
.input-group.mb-3
span.input-group-text $
input.form-control(type='text', aria-label='Amount (to the nearest dollar)')
span.input-group-text .00
.mb-3.input-group-solid
label.form-label Solid style
.input-group
span.input-group-text @
input.form-control(type='text', placeholder='Email')
.mb-3.input-group-square
label.form-label Square style
.input-group
span.input-group-text +
input.form-control(type='text', placeholder='Email')
.mb-3.input-group-square
label.form-label Raise style
.input-group.input-group-air
span.input-group-text #
input.form-control(type='text', placeholder='Email')
div
label.form-label Left & Right Addon
.input-group.pill-input-group
span.input-group-text $
input.form-control(type='text', aria-label='Amount (to the nearest dollar)')
span.input-group-text .00
.card-footer
button.btn.btn-primary(type='submit').m-r-15 Submit
button.btn.btn-light(type='submit') Cancel
.card
.card-header.pb-0
h5 Basic Input groups
.card-body
.row
.col
form
.mb-3.m-form__group
label.form-label Left Addon
.input-group
span.input-group-text
i.icofont.icofont-pencil-alt-5
input.form-control(type='text', placeholder='Email')
.mb-3
label.form-label Right Addon
.input-group
input.form-control(type='text', placeholder="Recipient's username", aria-label="Recipient's username")
span.input-group-text
i.icofont.icofont-ui-dial-phone
.mb-3
label.form-label Joint Addon
.input-group
span.input-group-text
i.icofont.icofont-unlink
span.input-group-text 0.00
input.form-control(type='text', aria-label='Amount (to the nearest dollar)')
.mb-3
label.form-label Left & Right Addon
.input-group.mb-3
span.input-group-text
i.icon-zoom-out
input.form-control(type='text', aria-label='Amount (to the nearest dollar)')
span.input-group-text
i.icon-zoom-in
.mb-3.input-group-solid
label.form-label Solid style
.input-group
span.input-group-text
i.icofont.icofont-users
input.form-control(type='text', placeholder='999999')
.mb-3.input-group-square
label.form-label Flat style
.input-group
span.input-group-text
i.icofont.icofont-credit-card
input.form-control(type='text', placeholder='')
.mb-3.input-group-square
label.form-label Raise style
.input-group
span.input-group-text
i.fa.fa-download
input.form-control.input-group-air(type='text', placeholder='https://www.example.com')
div
label.form-label Left & Right Addon
.input-group.pill-input-group
span.input-group-text
i.icofont.icofont-ui-copy
input.form-control(type='text', aria-label='Amount (to the nearest dollar)')
span.input-group-text
i.icofont.icofont-stock-search
.card-footer
button.btn.btn-primary(type='submit').m-r-15 Submit
button.btn.btn-light(type='submit') Cancel
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files