update
This commit is contained in:
@@ -0,0 +1,287 @@
|
||||
- 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
|
||||
Reference in New Issue
Block a user