288 lines
14 KiB
Plaintext
288 lines
14 KiB
Plaintext
- var theme_customizer = true;
|
|
- var height_equal = true;
|
|
- var sidebar = true;
|
|
- var slick = true;
|
|
- var header_slider = true;
|
|
- var animate = true;
|
|
- var scrollbar = true;
|
|
- var alert = 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
|
|
h4
|
|
| Alert
|
|
.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 Ui Kits
|
|
li.breadcrumb-item.active Alert
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-xl-12
|
|
.card
|
|
.card-header
|
|
h4 Link Color In Dark Theme
|
|
p.f-m-light.mt-1
|
|
| Use the
|
|
code .alert-link
|
|
| utility class to quickly provide matching colored links within any alert
|
|
.card-body
|
|
.row
|
|
.col-xl-6
|
|
p.mb-0 Primary Alert
|
|
.alert.alert-primary.dark(role='alert')
|
|
p
|
|
| This is a
|
|
a.alert-link.text-white(href='#') primary alert
|
|
| with an example link.Check it out.
|
|
p.mb-0 Secondary Alert
|
|
.alert.alert-secondary.dark(role='alert')
|
|
p
|
|
| This is a
|
|
a.alert-link.text-white(href='#') secondary alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Success Alert
|
|
.alert.alert-success.dark(role='alert')
|
|
p
|
|
| This is a
|
|
a.alert-link.text-white(href='#') success alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Info Alert
|
|
.alert.alert-info.dark(role='alert')
|
|
p
|
|
| This is a
|
|
a.alert-link.text-white(href='#') info alert
|
|
| with an example link. Check it out.
|
|
.col-xl-6
|
|
p.mb-0 Warning Alert
|
|
.alert.alert-warning.dark(role='alert')
|
|
p
|
|
| This is a
|
|
a.alert-link.text-white(href='#') warning alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Danger Alert
|
|
.alert.alert-danger.dark(role='alert')
|
|
p
|
|
| This is a
|
|
a.alert-link.text-white(href='#') danger alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Light Alert
|
|
.alert.alert-light.dark(role='alert')
|
|
p
|
|
| This is a
|
|
a.alert-link(href='#') light alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Dark Alert
|
|
.alert.alert-dark.dark(role='alert')
|
|
p
|
|
| This is a
|
|
a.alert-link.text-white(href='#') dark alert
|
|
| with an example link. Check it out.
|
|
.col-xl-12
|
|
.card
|
|
.card-header
|
|
h4 Link Color In Light Theme
|
|
p.f-m-light.mt-1
|
|
| Use the
|
|
code .alert-link
|
|
| utility class to quickly provide matching colored links within any alert
|
|
.card-body
|
|
.row
|
|
.col-xl-6
|
|
p.mb-0 Primary Light Alert
|
|
.alert.alert-light-primary(role='alert')
|
|
p.txt-primary
|
|
| This is a
|
|
a.alert-link.txt-primary(href='#') primary alert
|
|
| with an example link.Check it out.
|
|
p.mb-0 Secondary Light Alert
|
|
.alert.alert-light-secondary(role='alert')
|
|
p.txt-secondary
|
|
| This is a
|
|
a.alert-link.txt-secondary(href='#') secondary alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Success Light Alert
|
|
.alert.alert-light-success(role='alert')
|
|
.txt-success
|
|
| This is a
|
|
a.alert-link.txt-success(href='#') success alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Info Light Alert
|
|
.alert.alert-light-info(role='alert')
|
|
.txt-info
|
|
| This is a
|
|
a.alert-link.txt-info(href='#') info alert
|
|
| with an example link. Check it out.
|
|
.col-xl-6
|
|
p.mb-0 Warning Light Alert
|
|
.alert.alert-light-warning(role='alert')
|
|
p.txt-warning
|
|
| This is a
|
|
a.alert-link.txt-warning(href='#') warning alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Danger Light Alert
|
|
.alert.alert-light-danger(role='alert')
|
|
p.txt-danger
|
|
| This is a
|
|
a.alert-link.txt-danger(href='#') danger alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 White Light Alert
|
|
.alert.alert-light-light(role='alert')
|
|
p.txt-dark
|
|
| This is a
|
|
a.alert-link.txt-dark(href='#') light alert
|
|
| with an example link. Check it out.
|
|
p.mb-0 Dark Light Alert
|
|
.alert.alert-light-dark(role='alert')
|
|
p.txt-dark
|
|
| This is a
|
|
a.alert-link.txt-dark(href='#') dark alert
|
|
| with an example link. Check it out.
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header
|
|
h4 Outline Dark And Light Alerts
|
|
p.f-m-light.mt-1
|
|
| Use the
|
|
code .border-*
|
|
| utility class to quickly provide matching border and border-width within any alert.
|
|
.card-body
|
|
.alert.txt-primary.border-primary.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='clock')
|
|
p
|
|
|One of
|
|
strong YouTube's
|
|
| most crucial ranking factors is Watch Time.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.alert.txt-success.border-success.outline-2x.alert-dismissible.fade.show.alert-icons(role='alert')
|
|
i(data-feather='thumbs-up')
|
|
p
|
|
b Well done!
|
|
| You successfully read this important message.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-sm-12.col-xl-6
|
|
.card
|
|
.card-header
|
|
h4 Alerts With Icons and Text Actions
|
|
p.f-m-light.mt-1
|
|
| Use the
|
|
code .dismiss-text
|
|
| class to add dismiss text instead of icon
|
|
.card-body.dark-txt
|
|
.alert.border-warning.alert-dismissible.fade.show.p-0(role='alert')
|
|
.alert-arrow.bg-warning
|
|
i.icon-timer
|
|
p
|
|
| Your time Over after
|
|
strong.txt-dark 5
|
|
| minute
|
|
button.p-0.border-0.me-2.ms-auto(type='button' data-bs-dismiss='alert' aria-label='Close')
|
|
span.bg-warning.text-black.px-3.py-1(aria-hidden='true') Check
|
|
.alert.border-danger.alert-dismissible.fade.show.p-0.mb-0(role='alert')
|
|
.alert-arrow.bg-danger
|
|
i.icon-heart
|
|
p
|
|
| Oh snap! Change a few things up
|
|
strong.txt-dark Notification check
|
|
button.p-0.border-0.me-2.ms-auto(type='button' data-bs-dismiss='alert' aria-label='Close')
|
|
span.bg-danger.text-white.px-3.py-1(aria-hidden='true') Alert
|
|
.col-sm-12.col-xl-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4 Dismissing Dark Alerts
|
|
p.f-m-light.mt-1
|
|
| Use the
|
|
code .alert-dismissible
|
|
| utility class to quickly remove the alerts.
|
|
.card-body
|
|
.alert.alert-secondary.dark.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='heart')
|
|
p Check your update! You should check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-sm-12.col-xl-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4 Dismissing Light Alerts
|
|
p.f-m-light.mt-1
|
|
| Use the
|
|
code .alert-dismissible
|
|
| utility class to quickly remove the alerts.
|
|
.card-body
|
|
.alert.alert-warning.alert-dismissible.fade.show(role='alert')
|
|
i(data-feather='bell')
|
|
p Hidden content You should check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-xl-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4 Live Alert
|
|
p.f-m-light.mt-1
|
|
| Click the button below to show an alert,then dismiss it with the built-in close button.
|
|
.card-body.live-dark
|
|
#liveAlertPlaceholder
|
|
button#liveAlertBtn.btn.btn-dark(type='button') Show live alert
|
|
.col-xl-6
|
|
.card.height-equal
|
|
.card-header
|
|
h4 Left Border Alert
|
|
p.f-m-light.mt-1
|
|
| Use the
|
|
code .border-left-wrapper
|
|
| to change border-left radius.
|
|
.card-body.live-dark
|
|
.alert.alert-light-dark.light.alert-dismissible.fade.show.text-dark.border-left-wrapper(role='alert')
|
|
i(data-feather='help-circle')
|
|
p You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h4 Additional content
|
|
p.f-m-light.mt-1
|
|
| Use the
|
|
code .alert
|
|
| utility class to quickly provide additional content within any alerts.
|
|
.card-body.dark-alert
|
|
.alert.alert-light-primary(role='alert')
|
|
h5.alert-heading.pb-2.txt-primary Please! Check your notifications
|
|
p
|
|
| The duty of notification is imposed upon the head of the family, and also upon the medical practitioner who may be in attendance on the patient.
|
|
hr
|
|
p.mb-0
|
|
| The emergency notification system is free and is available in all 50 states.
|
|
.alert.alert-light-secondary(role='alert')
|
|
h5.alert-heading.pb-2.txt-secondary Something went wrong! Please, chrome update.
|
|
p
|
|
| The duty of notification is imposed upon the head of the family, and also upon the medical practitioner who may be in attendance on the patient.
|
|
hr
|
|
p.mb-0
|
|
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
.alert.alert-light-success(role='alert')
|
|
h5.alert-heading.pb-2.txt-success Please! Hidden cameras were not installed.
|
|
p
|
|
| Due to increasingly accessible technology, hidden cameras have grown in popularity among regular people in recent years.
|
|
hr
|
|
p.mb-0
|
|
| Consider moving clocks and plush animals from your area if you think they may be concealing cameras because they are both portable items.
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|