344 lines
14 KiB
Plaintext
344 lines
14 KiB
Plaintext
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
- var sidebar = true;
|
|
- var slick = true;
|
|
- var header_slider = true;
|
|
- var animate = 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-fluid
|
|
.page-title
|
|
.row
|
|
.col-6
|
|
h3
|
|
| Steps
|
|
|
|
.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 Bonus Ui
|
|
li.breadcrumb-item.active Steps
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
// basic u-steps
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Default Step
|
|
.card-body
|
|
.u-steps.row
|
|
.u-step.col-sm-4
|
|
span.u-step-number 1
|
|
.u-step-desc
|
|
span.u-step-title Shopping
|
|
p Choose what you want
|
|
.u-step.col-sm-4.current
|
|
span.u-step-number 2
|
|
.u-step-desc
|
|
span.u-step-title Billing
|
|
p Pay for the bill
|
|
.u-step.col-sm-4
|
|
span.u-step-number 3
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
p Waiting for the goods
|
|
// u-step with icon
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Step with icon
|
|
.card-body
|
|
.u-steps.row
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon-shopping-cart-full(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Shopping
|
|
.u-step.col-md-4.current
|
|
span.u-step-icon.icon-notepad(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Billing
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon-time(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
// u-step with icon
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Step States
|
|
span
|
|
| A u-step with classname
|
|
code .done
|
|
| A u-step with classname
|
|
code .error
|
|
| A u-step with classname
|
|
code .current
|
|
| A u-step with classname
|
|
code .disabled
|
|
.card-body
|
|
.row.row-lg
|
|
.col-xl-3.col-lg-6
|
|
.u-step.done.bg-primary
|
|
span.u-step-number.txt-primary 1
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
p Waiting for the goods
|
|
.col-xl-3.col-lg-6.steps-md-mt
|
|
.u-step.error.bg-secondary
|
|
span.u-step-number.txt-secondary 2
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
p Waiting for the goods
|
|
.col-xl-3.col-lg-6.lg-mt
|
|
.u-step.current.bg-success
|
|
span.u-step-number.txt-success 3
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
p Waiting for the goods
|
|
.col-xl-3.col-lg-6.lg-mt
|
|
.u-step.disabled
|
|
span.u-step-number 4
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
p Waiting for the goods
|
|
// u-step with icon
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Step Sizing
|
|
span
|
|
| A step with classname
|
|
code .u-steps-xs
|
|
code .u-steps-sm
|
|
code .u-steps-lg
|
|
.card-body
|
|
.u-steps.row.u-steps-xs.steps-sizing-sm-mb
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon.wb-shopping-cart(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Shopping
|
|
.u-step.col-md-4.current
|
|
span.u-step-icon.icon.wb-pluse(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Billing
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon.wb-time(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
.u-steps.row.u-steps-sm.steps-sizing-sm-mb
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon.wb-shopping-cart(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Shopping
|
|
.u-step.col-md-4.current
|
|
span.u-step-icon.icon.wb-pluse(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Billing
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon.wb-time(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
.u-steps.row.steps-sizing-sm-mb
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon.wb-shopping-cart(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Shopping
|
|
.u-step.col-md-4.current
|
|
span.u-step-icon.icon.wb-pluse(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Billing
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon.wb-time(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
.u-steps.row.u-steps-lg
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon.wb-shopping-cart(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Shopping
|
|
.u-step.col-md-4.current
|
|
span.u-step-icon.icon.wb-pluse(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Billing
|
|
.u-step.col-md-4
|
|
span.u-step-icon.icon.wb-time(aria-hidden='true')
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Vertical Step
|
|
.card-body
|
|
.row
|
|
.col-lg-4
|
|
.u-steps.u-steps-vertical
|
|
.u-step
|
|
span.u-step-number 1
|
|
.u-step-desc
|
|
span.u-step-title Shopping
|
|
p Choose what you want
|
|
.u-step.current
|
|
span.u-step-number 2
|
|
.u-step-desc
|
|
span.u-step-title Billing
|
|
p Pay for the bill
|
|
.u-step
|
|
span.u-step-number 3
|
|
.u-step-desc
|
|
span.u-step-title Getting
|
|
p Waiting for the goods
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Default Pearls Steps
|
|
.card-body
|
|
.row
|
|
.u-pearl.done.col-4
|
|
span.u-pearl-number 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.current.col-4
|
|
span.u-pearl-number 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.col-4
|
|
span.u-pearl-number 3
|
|
span.u-pearl-title Confirmation
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Pearls Steps with icon
|
|
.card-body
|
|
.row
|
|
.u-pearl.done.col-4
|
|
.u-pearl-icon
|
|
i.icon-shopping-cart(aria-hidden='true')
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.current.col-4
|
|
.u-pearl-icon
|
|
i.icon-write(aria-hidden='true')
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.col-4
|
|
.u-pearl-icon
|
|
i.icon-check(aria-hidden='true')
|
|
span.u-pearl-title Confirmation
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Pearls Step Sizing
|
|
span
|
|
| A Pearls step with classname
|
|
code .u-pearls-xs
|
|
code .u-pearls-sm
|
|
code .u-pearls-lg
|
|
.card-body
|
|
.u-pearls-xs.row.mb-5
|
|
.u-pearl.done.col-4
|
|
span.u-pearl-number 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.current.col-4
|
|
span.u-pearl-number 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.col-4
|
|
span.u-pearl-number 3
|
|
span.u-pearl-title Confirmation
|
|
.u-pearls-sm.row.mb-5
|
|
.u-pearl.done.col-4
|
|
span.u-pearl-number 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.current.col-4
|
|
span.u-pearl-number 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.col-4
|
|
span.u-pearl-number 3
|
|
span.u-pearl-title Confirmation
|
|
.row.mb-5
|
|
.u-pearl.done.col-4
|
|
span.u-pearl-number 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.current.col-4
|
|
span.u-pearl-number 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.col-4
|
|
span.u-pearl-number 3
|
|
span.u-pearl-title Confirmation
|
|
.u-pearls-lg.row
|
|
.u-pearl.done.col-4
|
|
span.u-pearl-number 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.current.col-4
|
|
span.u-pearl-number 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.col-4
|
|
span.u-pearl-number 3
|
|
span.u-pearl-title Confirmation
|
|
// u-step with icon
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Pearls Step States
|
|
span
|
|
| A pearls step states with different class
|
|
code .done
|
|
code .currunt
|
|
code .error
|
|
code .disabled
|
|
.card-body
|
|
.row.mb-5
|
|
.u-pearl.current.col-4
|
|
.u-pearl-icon 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.disabled.col-4
|
|
.u-pearl-icon 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.disabled.col-4
|
|
.u-pearl-icon 3
|
|
span.u-pearl-title Confirmation
|
|
.row.mb-5
|
|
.u-pearl.done.col-4
|
|
.u-pearl-icon 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.current.col-4
|
|
.u-pearl-icon 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.disabled.col-4
|
|
.u-pearl-icon 3
|
|
span.u-pearl-title Confirmation
|
|
.row.mb-5
|
|
.u-pearl.done.col-4
|
|
.u-pearl-icon 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.current.error.col-4
|
|
.u-pearl-icon 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.disabled.col-4
|
|
.u-pearl-icon 3
|
|
span.u-pearl-title Confirmation
|
|
.row
|
|
.u-pearl.done.col-4
|
|
.u-pearl-icon 1
|
|
span.u-pearl-title Account Info
|
|
.u-pearl.done.col-4
|
|
.u-pearl-icon 2
|
|
span.u-pearl-title Billing Info
|
|
.u-pearl.current.col-4
|
|
.u-pearl-icon 3
|
|
span.u-pearl-title Confirmation
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|