RuhNetConsulting
/
Adminator-admin-dashboard
mirror of https://github.com/puikinsh/Adminator-admin-dashboard
1
0
Fork 0
Code Issues 0 Projects 0 Releases 16 Wiki Activity
Browse Source

Migrating to v5

Bootstrap5-Update
DPTeamMember 5 years ago
parent
eb3938ab46
commit
c1a8c38fe8
27 changed files with 462 additions and 343 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      README.md
  2. +66
    -66
      forms.php
  3. +2
    -3
      package.json
  4. +0
    -1
      src/assets/scripts/fullcalendar/index.js
  5. +4
    -2
      src/assets/scripts/index.js
  6. +10
    -4
      src/assets/scripts/popover/index.js
  7. +2
    -2
      src/assets/styles/spec/components/topbar.scss
  8. +18
    -0
      src/assets/styles/spec/generic/base.scss
  9. +8
    -8
      src/basic-table.html
  10. +8
    -8
      src/blank.html
  11. +5
    -5
      src/buttons.html
  12. +20
    -20
      src/calendar.html
  13. +4
    -4
      src/charts.html
  14. +5
    -5
      src/chat.html
  15. +17
    -17
      src/compose.html
  16. +4
    -4
      src/datatable.html
  17. +25
    -25
      src/email.html
  18. +59
    -59
      src/forms.html
  19. +4
    -4
      src/google-maps.html
  20. +28
    -28
      src/index.html
  21. +7
    -7
      src/signin.html
  22. +10
    -10
      src/signup.html
  23. +96
    -0
      src/test.html
  24. +53
    -55
      src/ui.html
  25. +4
    -4
      src/vector-maps.html
  26. +1
    -0
      webpack/plugins/htmlPlugin.js
  27. +1
    -1
      webpack/plugins/internal.js

+ 1
- 1
README.md View File

@ -1,5 +1,5 @@
# Adminator HTML5 Admin Template # Adminator HTML5 Admin Template
**Adminator** is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
**Adminator** is a responsive Bootstrap 5 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
# Preview # Preview


+ 66
- 66
forms.php View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -325,7 +325,7 @@
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm"> <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -342,7 +342,7 @@
</li> </li>
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -359,7 +359,7 @@
</li> </li>
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -378,14 +378,14 @@
</li> </li>
<li class="pX-20 pY-15 ta-c bdT"> <li class="pX-20 pY-15 ta-c bdT">
<span> <span>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs ms-10"></i></a>
</span> </span>
</li> </li>
</ul> </ul>
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -398,7 +398,7 @@
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm"> <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -420,7 +420,7 @@
</li> </li>
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -442,7 +442,7 @@
</li> </li>
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -466,14 +466,14 @@
</li> </li>
<li class="pX-20 pY-15 ta-c bdT"> <li class="pX-20 pY-15 ta-c bdT">
<span> <span>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right ms-10"></i></a>
</span> </span>
</li> </li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<div class="peer mR-10">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer me-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
<div class="peer"> <div class="peer">
@ -483,26 +483,26 @@
<ul class="dropdown-menu fsz-sm"> <ul class="dropdown-menu fsz-sm">
<li> <li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-settings mR-10"></i>
<i class="ti-settings me-10"></i>
<span>Setting</span> <span>Setting</span>
</a> </a>
</li> </li>
<li> <li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-user mR-10"></i>
<i class="ti-user me-10"></i>
<span>Profile</span> <span>Profile</span>
</a> </a>
</li> </li>
<li> <li>
<a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-email mR-10"></i>
<i class="ti-email me-10"></i>
<span>Messages</span> <span>Messages</span>
</a> </a>
</li> </li>
<li role="separator" class="divider"></li> <li role="separator" class="divider"></li>
<li> <li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-power-off mR-10"></i>
<i class="ti-power-off me-10"></i>
<span>Logout</span> <span>Logout</span>
</a> </a>
</li> </li>
@ -522,18 +522,18 @@
<h6 class="c-grey-900">Basic Form</h6> <h6 class="c-grey-900">Basic Form</h6>
<div class="mT-30"> <div class="mT-30">
<form action="" method="POST"> <form action="" method="POST">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<div class="mb-3">
<label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <input type="email" class="form-control" name="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
</div> </div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="mb-3">
<label class="form-label" for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div> </div>
<div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15"> <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
@ -564,47 +564,47 @@
<h6 class="c-grey-900">Complex Form Layout</h6> <h6 class="c-grey-900">Complex Form Layout</h6>
<div class="mT-30"> <div class="mT-30">
<form action="" method="POST"> <form action="" method="POST">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email"> <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div> </div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<div class="mb-3 col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password"> <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div> </div>
</div> </div>
<div class="form-group">
<label for="inputAddress">Address</label>
<div class="mb-3">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div> </div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<div class="mb-3">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div> </div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity"> <input type="text" class="form-control" id="inputCity">
</div> </div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<div class="mb-3 col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-control"> <select id="inputState" class="form-control">
<option selected>Choose...</option> <option selected>Choose...</option>
<option>...</option> <option>...</option>
</select> </select>
</div> </div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<div class="mb-3 col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip"> <input type="text" class="form-control" id="inputZip">
</div> </div>
</div> </div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="fw-500">Birthdate</label>
<div class="timepicker-input input-icon form-group">
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label" class="fw-500">Birthdate</label>
<div class="timepicker-input input-icon mb-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<div class="input-group-text bgc-white bd bdwR-0">
<i class="ti-calendar"></i> <i class="ti-calendar"></i>
</div> </div>
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker"> <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@ -612,10 +612,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group">
<div class="mb-3">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
<label for="inputCall2" class=" peers peer-greed js-sb ai-c">
<label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
@ -630,36 +630,36 @@
<h6 class="c-grey-900">Horizontal Form</h6> <h6 class="c-grey-900">Horizontal Form</h6>
<div class="mT-30"> <div class="mT-30">
<form> <form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="mb-3 row">
<label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div> </div>
</div> </div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="mb-3 row">
<label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div> </div>
</div> </div>
<fieldset class="form-group">
<fieldset class="mb-3">
<div class="row"> <div class="row">
<legend class="col-form-legend col-sm-2">Radios</legend> <legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-check-label form-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-check-label form-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
Option two can be something else and selecting it will deselect option one Option two can be something else and selecting it will deselect option one
</label> </label>
</div> </div>
<div class="form-check disabled"> <div class="form-check disabled">
<label class="form-check-label">
<label class="form-check-label form-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
Option three is disabled Option three is disabled
</label> </label>
@ -667,17 +667,17 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div class="form-group row">
<div class="mb-3 row">
<div class="col-sm-2">Checkbox</div> <div class="col-sm-2">Checkbox</div>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-check-label form-label">
<input class="form-check-input" type="checkbox"> Check me out <input class="form-check-input" type="checkbox"> Check me out
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="mb-3 row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button> <button type="submit" class="btn btn-primary">Sign in</button>
</div> </div>
@ -692,18 +692,18 @@
<div class="mT-30"> <div class="mT-30">
<form> <form>
<fieldset disabled> <fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div> </div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-control"> <select id="disabledSelect" class="form-control">
<option>Disabled select</option> <option>Disabled select</option>
</select> </select>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-check-label" class="form-label">
<input class="form-check-input" type="checkbox"> Can't check this <input class="form-check-input" type="checkbox"> Can't check this
</label> </label>
</div> </div>
@ -720,31 +720,31 @@
<form class="container" id="needs-validation" novalidate> <form class="container" id="needs-validation" novalidate>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required> <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
</div> </div>
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required> <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required> <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid city. Please provide a valid city.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<label for="validationCustom04" class="form-label">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required> <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid state. Please provide a valid state.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid zip. Please provide a valid zip.


+ 2
- 3
package.json View File

@ -20,6 +20,7 @@
"@babel/plugin-proposal-object-rest-spread": "^7.13.8", "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
"@babel/plugin-transform-runtime": "^7.13.9", "@babel/plugin-transform-runtime": "^7.13.9",
"@babel/runtime": "^7.13.9", "@babel/runtime": "^7.13.9",
"@popperjs/core": "^2.9.2",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0", "babel-preset-env": "^1.7.0",
@ -55,9 +56,8 @@
"@fullcalendar/interaction": "^5.7.0", "@fullcalendar/interaction": "^5.7.0",
"@fullcalendar/list": "^5.7.0", "@fullcalendar/list": "^5.7.0",
"@fullcalendar/timegrid": "^5.7.0", "@fullcalendar/timegrid": "^5.7.0",
"@popperjs/core": "^2.9.2",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"bootstrap": "^4.6.0",
"bootstrap": "^5.0.1",
"bootstrap-datepicker": "^1.9.0", "bootstrap-datepicker": "^1.9.0",
"brand-colors": "^2.1.1", "brand-colors": "^2.1.1",
"chart.js": "^2.9.4", "chart.js": "^2.9.4",
@ -73,7 +73,6 @@
"masonry-layout": "^4.2.2", "masonry-layout": "^4.2.2",
"moment": "^2.29.1", "moment": "^2.29.1",
"perfect-scrollbar": "^1.5.0", "perfect-scrollbar": "^1.5.0",
"popper.js": "^1.16.1",
"skycons": "^1.0.0" "skycons": "^1.0.0"
} }
} }

+ 0
- 1
src/assets/scripts/fullcalendar/index.js View File

@ -1,4 +1,3 @@
import * as $ from 'jquery';
import { Calendar } from '@fullcalendar/core'; import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction'; import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';


+ 4
- 2
src/assets/scripts/index.js View File

@ -1,5 +1,8 @@
import '../styles/index.scss';
// import "@popperjs/core";
import bootstrap from 'bootstrap';
import '../styles/index.scss';
import './fullcalendar';
import './masonry'; import './masonry';
import './charts'; import './charts';
import './popover'; import './popover';
@ -12,6 +15,5 @@ import './chat';
import './datatable'; import './datatable';
import './datepicker'; import './datepicker';
import './email'; import './email';
import './fullcalendar';
import './googleMaps'; import './googleMaps';
import './utils'; import './utils';

+ 10
- 4
src/assets/scripts/popover/index.js View File

@ -1,16 +1,22 @@
import * as $ from 'jquery';
import 'bootstrap';
// import * as $ from 'jquery';
import * as bootstrap from 'bootstrap'
export default (function () { export default (function () {
// ------------------------------------------------------ // ------------------------------------------------------
// @Popover // @Popover
// ------------------------------------------------------ // ------------------------------------------------------
$('[data-toggle="popover"]').popover();
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
// ------------------------------------------------------ // ------------------------------------------------------
// @Tooltips // @Tooltips
// ------------------------------------------------------ // ------------------------------------------------------
$('[data-toggle="tooltip"]').tooltip();
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
}()); }());

+ 2
- 2
src/assets/styles/spec/components/topbar.scss View File

@ -93,10 +93,10 @@
} }
.dropdown-menu { .dropdown-menu {
display: block;
// display: block;
margin: 0; margin: 0;
transform-origin: top right; transform-origin: top right;
transform: scale(0, 0);
// transform: scale(0, 0);
transition: transform 0.15s ease-out; transition: transform 0.15s ease-out;
.divider { .divider {


+ 18
- 0
src/assets/styles/spec/generic/base.scss View File

@ -4,6 +4,7 @@ html, html a, body {
a { a {
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
text-decoration: none;
} }
body { body {
@ -77,3 +78,20 @@ a {
hr { hr {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
a.btn {
color:#fff;
}
a.btn:hover {
color:#fff;
}
.btn-color {
color:#fff;
}
.btn-color:hover {
color:#fff;
}

+ 8
- 8
src/basic-table.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -466,13 +466,13 @@
</li> </li>
<li class="pX-20 pY-15 ta-c bdT"> <li class="pX-20 pY-15 ta-c bdT">
<span> <span>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right ms-10"></i></a>
</span> </span>
</li> </li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -521,7 +521,7 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="bgc-white bd bdrs-3 p-20 mB-20"> <div class="bgc-white bd bdrs-3 p-20 mB-20">
<h4 class="c-grey-900 mB-20">Simple Table</h4> <h4 class="c-grey-900 mB-20">Simple Table</h4>
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 5</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -559,9 +559,9 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="bgc-white bd bdrs-3 p-20 mB-20"> <div class="bgc-white bd bdrs-3 p-20 mB-20">
<h4 class="c-grey-900 mB-20">Table head options</h4> <h4 class="c-grey-900 mB-20">Table head options</h4>
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.table-light</code> or <code class="highlighter-rouge">.table-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
<table class="table"> <table class="table">
<thead class="thead-dark">
<thead class="table-dark">
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First Name</th>
@ -717,7 +717,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 8
- 8
src/blank.html View File

@ -176,7 +176,7 @@
<span class="title">Forms</span> <span class="title">Forms</span>
</a> </a>
</li> </li>
<li class="nav-item dropdown">
<li class="nav-item">
<a class="sidebar-link" href="ui.html"> <a class="sidebar-link" href="ui.html">
<span class="icon-holder"> <span class="icon-holder">
<i class="c-pink-500 ti-palette"></i> <i class="c-pink-500 ti-palette"></i>
@ -312,11 +312,11 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="pX-20 pY-15 bdB"> <li class="pX-20 pY-15 bdB">
<i class="ti-bell pR-10"></i> <i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span> <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
@ -385,11 +385,11 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="pX-20 pY-15 bdB"> <li class="pX-20 pY-15 bdB">
<i class="ti-email pR-10"></i> <i class="ti-email pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Emails</span> <span class="fsz-sm fw-600 c-grey-900">Emails</span>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -480,7 +480,7 @@
<span class="fsz-sm c-grey-900">John Doe</span> <span class="fsz-sm c-grey-900">John Doe</span>
</div> </div>
</a> </a>
<ul class="dropdown-menu fsz-sm">
<ul class="dropdown-menu fsz-sm" aria-labelledby="dropdownMenuLink">
<li> <li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-settings mR-10"></i> <i class="ti-settings mR-10"></i>
@ -524,7 +524,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 5
- 5
src/buttons.html View File

@ -262,7 +262,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -335,7 +335,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -422,8 +422,8 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<div class="peer mR-10">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer me-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
<div class="peer"> <div class="peer">
@ -469,7 +469,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 20
- 20
src/calendar.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -529,7 +529,7 @@
</button> </button>
<ul class="m-0 p-0 mT-20"> <ul class="m-0 p-0 mT-20">
<li class="bdB peers ai-c jc-sb fxw-nw"> <li class="bdB peers ai-c jc-sb fxw-nw">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
<a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
<div class="peer mR-15"> <div class="peer mR-15">
<i class="fa fa-fw fa-clock-o c-red-500"></i> <i class="fa fa-fw fa-clock-o c-red-500"></i>
</div> </div>
@ -555,7 +555,7 @@
</div> </div>
</li> </li>
<li class="bdB peers ai-c jc-sb fxw-nw"> <li class="bdB peers ai-c jc-sb fxw-nw">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
<a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
<div class="peer mR-15"> <div class="peer mR-15">
<i class="fa fa-fw fa-clock-o c-blue-500"></i> <i class="fa fa-fw fa-clock-o c-blue-500"></i>
</div> </div>
@ -581,7 +581,7 @@
</div> </div>
</li> </li>
<li class="bdB peers ai-c jc-sb fxw-nw"> <li class="bdB peers ai-c jc-sb fxw-nw">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
<div class="peer mR-15"> <div class="peer mR-15">
<i class="fa fa-fw fa-clock-o c-indigo-500"></i> <i class="fa fa-fw fa-clock-o c-indigo-500"></i>
</div> </div>
@ -607,7 +607,7 @@
</div> </div>
</li> </li>
<li class="bdB peers ai-c jc-sb fxw-nw"> <li class="bdB peers ai-c jc-sb fxw-nw">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
<div class="peer mR-15"> <div class="peer mR-15">
<i class="fa fa-fw fa-clock-o c-green-500"></i> <i class="fa fa-fw fa-clock-o c-green-500"></i>
</div> </div>
@ -648,16 +648,16 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form>
<div class="form-group">
<label class="fw-500">Event title</label>
<div class="mb-3">
<label class="form-label fw-500">Event title</label>
<input class="form-control bdc-grey-200"> <input class="form-control bdc-grey-200">
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label class="fw-500">Start</label>
<div class="timepicker-input input-icon form-group">
<label class="fw-500 form-label">Start</label>
<div class="timepicker-input input-icon mb-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<div class="input-group-text bgc-white bd bdwR-0">
<i class="ti-calendar"></i> <i class="ti-calendar"></i>
</div> </div>
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker"> <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@ -665,10 +665,10 @@
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="fw-500">End</label>
<div class="timepicker-input input-icon form-group">
<label class="fw-500 form-label">End</label>
<div class="timepicker-input input-icon mb-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<div class="input-group-text bgc-white bd bdwR-0">
<i class="ti-calendar"></i> <i class="ti-calendar"></i>
</div> </div>
<input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker"> <input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
@ -676,12 +676,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group">
<label class="fw-500">Event title</label>
<div class="mb-3">
<label class="fw-500 form-label">Event title</label>
<textarea class="form-control bdc-grey-200" rows='5'></textarea> <textarea class="form-control bdc-grey-200" rows='5'></textarea>
</div> </div>
<div class="text-right">
<button class="btn btn-primary cur-p" data-dismiss="modal">Done</button>
<div class="text-end">
<button class="btn btn-primary cur-p btn-color" data-dismiss="modal">Done</button>
</div> </div>
</form> </form>
</div> </div>
@ -694,7 +694,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 4
- 4
src/charts.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -643,7 +643,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 5
- 5
src/chat.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -717,7 +717,7 @@
<div class="p-20 bdT bgc-white"> <div class="p-20 bdT bgc-white">
<div class="pos-r"> <div class="pos-r">
<input type="text" class="form-control bdrs-10em m-0" placeholder="Say something..."> <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
<button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
<button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1 btn-color">
<i class="fa fa-paper-plane-o"></i> <i class="fa fa-paper-plane-o"></i>
</button> </button>
</div> </div>
@ -732,7 +732,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 17
- 17
src/compose.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -520,7 +520,7 @@
<div class="email-side-nav remain-height ov-h"> <div class="email-side-nav remain-height ov-h">
<div class="h-100 layers"> <div class="h-100 layers">
<div class="p-20 bgc-grey-100 layer w-100"> <div class="p-20 bgc-grey-100 layer w-100">
<a href="/compose" class="btn btn-danger btn-block">New Message</a>
<a href="/compose" class="btn btn-danger d-grid">New Message</a>
</div> </div>
<div class="scrollable pos-r bdT layer w-100 fxg-1"> <div class="scrollable pos-r bdT layer w-100 fxg-1">
<ul class="p-20 nav flex-column"> <ul class="p-20 nav flex-column">
@ -532,7 +532,7 @@
<span>Inbox</span> <span>Inbox</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
<span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
</div> </div>
</div> </div>
</a> </a>
@ -545,7 +545,7 @@
<span>Sent</span> <span>Sent</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-green-50 c-green-700">12</span>
<span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
</div> </div>
</div> </div>
</a> </a>
@ -558,7 +558,7 @@
<span>Important</span> <span>Important</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
<span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
</div> </div>
</div> </div>
</a> </a>
@ -571,7 +571,7 @@
<span>Drafts</span> <span>Drafts</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
<span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
</div> </div>
</div> </div>
</a> </a>
@ -584,7 +584,7 @@
<span>Spam</span> <span>Spam</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-red-50 c-red-700">1</span>
<span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
</div> </div>
</div> </div>
</a> </a>
@ -597,7 +597,7 @@
<span>Trash</span> <span>Trash</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
<span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
</div> </div>
</div> </div>
</a> </a>
@ -617,22 +617,22 @@
<form class="email-compose-body"> <form class="email-compose-body">
<h4 class="c-grey-900 mB-20">Send Message</h4> <h4 class="c-grey-900 mB-20">Send Message</h4>
<div class="send-header"> <div class="send-header">
<div class="form-group">
<div class="mb-3">
<input type="text" class='form-control' placeholder="To"> <input type="text" class='form-control' placeholder="To">
</div> </div>
<div class="form-group">
<div class="mb-3">
<input type="text" class='form-control' placeholder="CC"> <input type="text" class='form-control' placeholder="CC">
</div> </div>
<div class="form-group">
<div class="mb-3">
<input class="form-control" placeholder="Email Subject"> <input class="form-control" placeholder="Email Subject">
</div> </div>
<div class="form-group">
<div class="mb-3">
<textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea> <textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea>
</div> </div>
</div> </div>
<div id="compose-area"></div> <div id="compose-area"></div>
<div class="text-right mrg-top-30">
<button class="btn btn-danger">Send</button>
<div class="text-end mrg-top-30">
<button class="btn btn-danger btn-color">Send</button>
</div> </div>
</form> </form>
</div> </div>
@ -645,7 +645,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 4
- 4
src/datatable.html View File

@ -313,7 +313,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -386,7 +386,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -473,7 +473,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -1011,7 +1011,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 25
- 25
src/email.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -520,7 +520,7 @@
<div class="email-side-nav remain-height ov-h"> <div class="email-side-nav remain-height ov-h">
<div class="h-100 layers"> <div class="h-100 layers">
<div class="p-20 bgc-grey-100 layer w-100"> <div class="p-20 bgc-grey-100 layer w-100">
<a href="/compose" class="btn btn-danger btn-block">New Message</a>
<a href="/compose" class="btn btn-danger d-grid">New Message</a>
</div> </div>
<div class="scrollable pos-r bdT layer w-100 fxg-1"> <div class="scrollable pos-r bdT layer w-100 fxg-1">
<ul class="p-20 nav flex-column"> <ul class="p-20 nav flex-column">
@ -532,7 +532,7 @@
<span>Inbox</span> <span>Inbox</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
<span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
</div> </div>
</div> </div>
</a> </a>
@ -545,7 +545,7 @@
<span>Sent</span> <span>Sent</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-green-50 c-green-700">12</span>
<span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
</div> </div>
</div> </div>
</a> </a>
@ -558,7 +558,7 @@
<span>Important</span> <span>Important</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
<span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
</div> </div>
</div> </div>
</a> </a>
@ -571,7 +571,7 @@
<span>Drafts</span> <span>Drafts</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
<span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
</div> </div>
</div> </div>
</a> </a>
@ -584,7 +584,7 @@
<span>Spam</span> <span>Spam</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-red-50 c-red-700">1</span>
<span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
</div> </div>
</div> </div>
</a> </a>
@ -597,7 +597,7 @@
<span>Trash</span> <span>Trash</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
<span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
</div> </div>
</div> </div>
</a> </a>
@ -622,7 +622,7 @@
<i class="ti-tag"></i> <i class="ti-tag"></i>
</button> </button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ti-more-alt"></i> <i class="ti-more-alt"></i>
</button> </button>
<ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1"> <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
@ -671,7 +671,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -691,7 +691,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -711,7 +711,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -731,7 +731,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -751,7 +751,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -771,7 +771,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -791,7 +791,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -811,7 +811,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -831,7 +831,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -851,7 +851,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -871,7 +871,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -891,7 +891,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -925,7 +925,7 @@
<i class="ti-tag"></i> <i class="ti-tag"></i>
</button> </button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ti-more-alt"></i> <i class="ti-more-alt"></i>
</button> </button>
<ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1"> <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
@ -1014,7 +1014,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 59
- 59
src/forms.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -522,22 +522,22 @@
<h6 class="c-grey-900">Basic Form</h6> <h6 class="c-grey-900">Basic Form</h6>
<div class="mT-30"> <div class="mT-30">
<form> <form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<div class="mb-3">
<label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
</div> </div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="mb-3">
<label class="form-label" for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div> </div>
<div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15"> <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary btn-color">Submit</button>
</form> </form>
</div> </div>
</div> </div>
@ -547,47 +547,47 @@
<h6 class="c-grey-900">Complex Form Layout</h6> <h6 class="c-grey-900">Complex Form Layout</h6>
<div class="mT-30"> <div class="mT-30">
<form> <form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label" for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email"> <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div> </div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<div class="mb-3 col-md-6">
<label class="form-label" for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password"> <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div> </div>
</div> </div>
<div class="form-group">
<label for="inputAddress">Address</label>
<div class="mb-3">
<label class="form-label" for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div> </div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<div class="mb-3">
<label class="form-label" for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div> </div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label" for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity"> <input type="text" class="form-control" id="inputCity">
</div> </div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<div class="mb-3 col-md-4">
<label class="form-label" for="inputState">State</label>
<select id="inputState" class="form-control"> <select id="inputState" class="form-control">
<option selected>Choose...</option> <option selected>Choose...</option>
<option>...</option> <option>...</option>
</select> </select>
</div> </div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<div class="mb-3 col-md-2">
<label class="form-label" for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip"> <input type="text" class="form-control" id="inputZip">
</div> </div>
</div> </div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="fw-500">Birthdate</label>
<div class="timepicker-input input-icon form-group">
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label fw-500">Birthdate</label>
<div class="timepicker-input input-icon mb-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<div class="input-group-text bgc-white bd bdwR-0">
<i class="ti-calendar"></i> <i class="ti-calendar"></i>
</div> </div>
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker"> <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@ -595,15 +595,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group">
<div class="mb-3">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
<label for="inputCall2" class=" peers peer-greed js-sb ai-c">
<label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary">Sign in</button>
<button type="submit" class="btn btn-primary btn-color">Sign in</button>
</form> </form>
</div> </div>
</div> </div>
@ -613,36 +613,36 @@
<h6 class="c-grey-900">Horizontal Form</h6> <h6 class="c-grey-900">Horizontal Form</h6>
<div class="mT-30"> <div class="mT-30">
<form> <form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="mb-3 row">
<label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div> </div>
</div> </div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="mb-3 row">
<label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div> </div>
</div> </div>
<fieldset class="form-group">
<fieldset class="mb-3">
<div class="row"> <div class="row">
<legend class="col-form-legend col-sm-2">Radios</legend> <legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-label form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-label form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
Option two can be something else and selecting it will deselect option one Option two can be something else and selecting it will deselect option one
</label> </label>
</div> </div>
<div class="form-check disabled"> <div class="form-check disabled">
<label class="form-check-label">
<label class="form-label form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
Option three is disabled Option three is disabled
</label> </label>
@ -650,19 +650,19 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div class="form-group row">
<div class="mb-3 row">
<div class="col-sm-2">Checkbox</div> <div class="col-sm-2">Checkbox</div>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-label form-check-label">
<input class="form-check-input" type="checkbox"> Check me out <input class="form-check-input" type="checkbox"> Check me out
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="mb-3 row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
<button type="submit" class="btn btn-primary btn-color">Sign in</button>
</div> </div>
</div> </div>
</form> </form>
@ -675,22 +675,22 @@
<div class="mT-30"> <div class="mT-30">
<form> <form>
<fieldset disabled> <fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<div class="mb-3">
<label class="form-label" for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div> </div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<div class="mb-3">
<label class="form-label" for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control"> <select id="disabledSelect" class="form-control">
<option>Disabled select</option> <option>Disabled select</option>
</select> </select>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-label" class="form-check-label">
<input class="form-check-input" type="checkbox"> Can't check this <input class="form-check-input" type="checkbox"> Can't check this
</label> </label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary btn-color">Submit</button>
</fieldset> </fieldset>
</form> </form>
</div> </div>
@ -703,38 +703,38 @@
<form class="container" id="needs-validation" novalidate> <form class="container" id="needs-validation" novalidate>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<label class="form-label" for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required> <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
</div> </div>
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<label class="form-label" for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required> <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<label class="form-label" for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required> <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid city. Please provide a valid city.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<label class="form-label" for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required> <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid state. Please provide a valid state.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<label class="form-label" for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid zip. Please provide a valid zip.
</div> </div>
</div> </div>
</div> </div>
<button class="btn btn-primary" type="submit">Submit form</button>
<button class="btn btn-primary btn-color" type="submit">Submit form</button>
</form> </form>
<script> <script>
// Example starter JavaScript for disabling form submissions if there are invalid fields // Example starter JavaScript for disabling form submissions if there are invalid fields
@ -762,7 +762,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 4
- 4
src/google-maps.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -532,7 +532,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 28
- 28
src/index.html View File

@ -311,11 +311,11 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li class="pX-20 pY-15 bdB"> <li class="pX-20 pY-15 bdB">
<i class="ti-bell pR-10"></i> <i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span> <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
@ -384,7 +384,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -471,7 +471,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -619,7 +619,7 @@
<small class="fw-600 c-grey-700">Visitors From USA</small> <small class="fw-600 c-grey-700">Visitors From USA</small>
<span class="pull-right c-grey-600 fsz-sm">50%</span> <span class="pull-right c-grey-600 fsz-sm">50%</span>
<div class="progress mT-10"> <div class="progress mT-10">
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="visually-hidden">50% Complete</span></div>
</div> </div>
</div> </div>
<div class="layer w-100 mT-15"> <div class="layer w-100 mT-15">
@ -627,7 +627,7 @@
<small class="fw-600 c-grey-700">Visitors From Europe</small> <small class="fw-600 c-grey-700">Visitors From Europe</small>
<span class="pull-right c-grey-600 fsz-sm">80%</span> <span class="pull-right c-grey-600 fsz-sm">80%</span>
<div class="progress mT-10"> <div class="progress mT-10">
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="visually-hidden">80% Complete</span></div>
</div> </div>
</div> </div>
<div class="layer w-100 mT-15"> <div class="layer w-100 mT-15">
@ -635,7 +635,7 @@
<small class="fw-600 c-grey-700">Visitors From Australia</small> <small class="fw-600 c-grey-700">Visitors From Australia</small>
<span class="pull-right c-grey-600 fsz-sm">40%</span> <span class="pull-right c-grey-600 fsz-sm">40%</span>
<div class="progress mT-10"> <div class="progress mT-10">
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="visually-hidden">40% Complete</span></div>
</div> </div>
</div> </div>
<div class="layer w-100 mT-15"> <div class="layer w-100 mT-15">
@ -643,7 +643,7 @@
<small class="fw-600 c-grey-700">Visitors From India</small> <small class="fw-600 c-grey-700">Visitors From India</small>
<span class="pull-right c-grey-600 fsz-sm">90%</span> <span class="pull-right c-grey-600 fsz-sm">90%</span>
<div class="progress mT-10"> <div class="progress mT-10">
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="visually-hidden">90% Complete</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -720,7 +720,7 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
@ -728,10 +728,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
<label for="inputCall2" class=" peers peer-greed js-sb ai-c">
<label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Book Boss Flight</span> <span class="peer peer-greed">Book Boss Flight</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-success lh-0 p-10">2 Days</span>
<span class="badge rounded-pill fl-r bg-success lh-0 p-10">2 Days</span>
</span> </span>
</label> </label>
</div> </div>
@ -739,10 +739,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
<label for="inputCall3" class=" peers peer-greed js-sb ai-c">
<label for="inputCall3" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Hit the Gym</span> <span class="peer peer-greed">Hit the Gym</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-danger lh-0 p-10">3 Minutes</span>
<span class="badge rounded-pill fl-r bg-danger lh-0 p-10">3 Minutes</span>
</span> </span>
</label> </label>
</div> </div>
@ -750,10 +750,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
<label for="inputCall4" class=" peers peer-greed js-sb ai-c">
<label for="inputCall4" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Give Purchase Report</span> <span class="peer peer-greed">Give Purchase Report</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-warning lh-0 p-10">not important</span>
<span class="badge rounded-pill fl-r bg-warning lh-0 p-10">not important</span>
</span> </span>
</label> </label>
</div> </div>
@ -761,10 +761,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
<label for="inputCall5" class=" peers peer-greed js-sb ai-c">
<label for="inputCall5" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Watch Game of Thrones Episode</span> <span class="peer peer-greed">Watch Game of Thrones Episode</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-info lh-0 p-10">Tomorrow</span>
<span class="badge rounded-pill fl-r bg-info lh-0 p-10">Tomorrow</span>
</span> </span>
</label> </label>
</div> </div>
@ -772,10 +772,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
<label for="inputCall6" class=" peers peer-greed js-sb ai-c">
<label for="inputCall6" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Give Purchase report</span> <span class="peer peer-greed">Give Purchase report</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-success lh-0 p-10">Done</span>
<span class="badge rounded-pill fl-r bg-success lh-0 p-10">Done</span>
</span> </span>
</label> </label>
</div> </div>
@ -800,7 +800,7 @@
<p class="mB-0">Sales Report</p> <p class="mB-0">Sales Report</p>
</div> </div>
<div class="peer"> <div class="peer">
<h3 class="text-right">$6,000</h3>
<h3 class="text-end">$6,000</h3>
</div> </div>
</div> </div>
</div> </div>
@ -817,43 +817,43 @@
<tbody> <tbody>
<tr> <tr>
<td class="fw-600">Item #1 Name</td> <td class="fw-600">Item #1 Name</td>
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Unavailable</span> </td>
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span> </td>
<td>Nov 18</td> <td>Nov 18</td>
<td><span class="text-success">$12</span></td> <td><span class="text-success">$12</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #2 Name</td> <td class="fw-600">Item #2 Name</td>
<td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c badge-pill">New</span></td>
<td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
<td>Nov 19</td> <td>Nov 19</td>
<td><span class="text-info">$34</span></td> <td><span class="text-info">$34</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #3 Name</td> <td class="fw-600">Item #3 Name</td>
<td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c badge-pill">New</span></td>
<td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
<td>Nov 20</td> <td>Nov 20</td>
<td><span class="text-danger">-$45</span></td> <td><span class="text-danger">-$45</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #4 Name</td> <td class="fw-600">Item #4 Name</td>
<td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c badge-pill">Unavailable</span></td>
<td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span></td>
<td>Nov 21</td> <td>Nov 21</td>
<td><span class="text-success">$65</span></td> <td><span class="text-success">$65</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #5 Name</td> <td class="fw-600">Item #5 Name</td>
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Used</span></td>
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Used</span></td>
<td>Nov 22</td> <td>Nov 22</td>
<td><span class="text-success">$78</span></td> <td><span class="text-success">$78</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #6 Name</td> <td class="fw-600">Item #6 Name</td>
<td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c badge-pill">Used</span> </td>
<td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c rounded-pill">Used</span> </td>
<td>Nov 23</td> <td>Nov 23</td>
<td><span class="text-danger">-$88</span></td> <td><span class="text-danger">-$88</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #7 Name</td> <td class="fw-600">Item #7 Name</td>
<td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c badge-pill">Old</span></td>
<td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c rounded-pill">Old</span></td>
<td>Nov 22</td> <td>Nov 22</td>
<td><span class="text-success">$56</span></td> <td><span class="text-success">$56</span></td>
</tr> </tr>
@ -1092,7 +1092,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 7
- 7
src/signin.html View File

@ -77,26 +77,26 @@
<div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'> <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
<h4 class="fw-300 c-grey-900 mB-40">Login</h4> <h4 class="fw-300 c-grey-900 mB-40">Login</h4>
<form> <form>
<div class="form-group">
<label class="text-normal text-dark">Username</label>
<div class="mb-3">
<label class="text-normal text-dark form-label">Username</label>
<input type="email" class="form-control" placeholder="John Doe"> <input type="email" class="form-control" placeholder="John Doe">
</div> </div>
<div class="form-group">
<label class="text-normal text-dark">Password</label>
<div class="mb-3">
<label class="text-normal text-dark form-label">Password</label>
<input type="password" class="form-control" placeholder="Password"> <input type="password" class="form-control" placeholder="Password">
</div> </div>
<div class="form-group">
<div class="">
<div class="peers ai-c jc-sb fxw-nw"> <div class="peers ai-c jc-sb fxw-nw">
<div class="peer"> <div class="peer">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c form-label">
<span class="peer peer-greed">Remember Me</span> <span class="peer peer-greed">Remember Me</span>
</label> </label>
</div> </div>
</div> </div>
<div class="peer"> <div class="peer">
<button class="btn btn-primary">Login</button>
<button class="btn btn-primary btn-color">Login</button>
</div> </div>
</div> </div>
</div> </div>


+ 10
- 10
src/signup.html View File

@ -77,24 +77,24 @@
<div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'> <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
<h4 class="fw-300 c-grey-900 mB-40">Register</h4> <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
<form> <form>
<div class="form-group">
<label class="text-normal text-dark">Username</label>
<div class="mb-3">
<label class="form-label" class="text-normal text-dark">Username</label>
<input type="text" class="form-control" Placeholder='John Doe'> <input type="text" class="form-control" Placeholder='John Doe'>
</div> </div>
<div class="form-group">
<label class="text-normal text-dark">Email Address</label>
<div class="mb-3">
<label class="form-label" class="text-normal text-dark">Email Address</label>
<input type="email" class="form-control" Placeholder='name@email.com'> <input type="email" class="form-control" Placeholder='name@email.com'>
</div> </div>
<div class="form-group">
<label class="text-normal text-dark">Password</label>
<div class="mb-3">
<label class="form-label" class="text-normal text-dark">Password</label>
<input type="password" class="form-control" placeholder="Password"> <input type="password" class="form-control" placeholder="Password">
</div> </div>
<div class="form-group">
<label class="text-normal text-dark">Confirm Password</label>
<div class="mb-3">
<label class="form-label" class="text-normal text-dark">Confirm Password</label>
<input type="password" class="form-control" placeholder="Password"> <input type="password" class="form-control" placeholder="Password">
</div> </div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
<div class="mb-3">
<button class="btn btn-primary btn-color">Register</button>
</div> </div>
</form> </form>
</div> </div>


+ 96
- 0
src/test.html View File

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', function load() {
const loader = document.getElementById('loader');
setTimeout(function() {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<div class="page-container">
<!-- <div class="header navbar">
<div class="header-container">
</div>
</div> -->
<main class='main-content bgc-grey-100'>
<div id='mainContent'>
<div class="full-container">
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
</div>
</div>
</main>
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer>
</div>
</body>
</html>

+ 53
- 55
src/ui.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -555,28 +555,28 @@
<div class="mT-30"> <div class="mT-30">
<div class="gap-10 peers"> <div class="gap-10 peers">
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-primary">Primary</button>
<button type="button" class="btn cur-p btn-primary btn-color">Primary</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-secondary">Secondary</button>
<button type="button" class="btn cur-p btn-secondary btn-color">Secondary</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-success">Success</button>
<button type="button" class="btn cur-p btn-success btn-color">Success</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-danger">Danger</button>
<button type="button" class="btn cur-p btn-danger btn-color">Danger</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-warning">Warning</button> <button type="button" class="btn cur-p btn-warning">Warning</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-info">Info</button>
<button type="button" class="btn cur-p btn-info btn-color">Info</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-light">Light</button> <button type="button" class="btn cur-p btn-light">Light</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-dark">Dark</button>
<button type="button" class="btn cur-p btn-dark btn-color">Dark</button>
</div> </div>
</div> </div>
@ -608,19 +608,19 @@
</div> </div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-success">1</button>
<button type="button" class="btn btn-success">2</button>
<button type="button" class="btn btn-success">3</button>
<button type="button" class="btn btn-success">4</button>
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-success btn-color">1</button>
<button type="button" class="btn btn-success btn-color">2</button>
<button type="button" class="btn btn-success btn-color">3</button>
<button type="button" class="btn btn-success btn-color">4</button>
</div> </div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-success">5</button>
<button type="button" class="btn btn-success">6</button>
<button type="button" class="btn btn-success">7</button>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-success btn-color">5</button>
<button type="button" class="btn btn-success btn-color">6</button>
<button type="button" class="btn btn-success btn-color">7</button>
</div> </div>
<div class="btn-group" role="group" aria-label="Third group"> <div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-success">8</button>
<button type="button" class="btn btn-success btn-color">8</button>
</div> </div>
</div> </div>
</div> </div>
@ -631,7 +631,7 @@
<h6 class="c-grey-900">Dropdowns</h6> <h6 class="c-grey-900">Dropdowns</h6>
<div class="mT-30"> <div class="mT-30">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
@ -643,8 +643,8 @@
<!-- Example split danger button --> <!-- Example split danger button -->
<div class="btn-group mT-20"> <div class="btn-group mT-20">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-danger btn-color">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@ -663,13 +663,13 @@
<h6 class="c-grey-900">List Group</h6> <h6 class="c-grey-900">List Group</h6>
<div class="mT-30"> <div class="mT-30">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action actived">
Cras justo odio
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a> </a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div> </div>
</div> </div>
</div> </div>
@ -678,39 +678,37 @@
<div class="bgc-white p-20 bd"> <div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Modal</h6> <h6 class="c-grey-900">Modal</h6>
<div class="mT-30"> <div class="mT-30">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-color" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<div class="masonry-item col-md-6"> <div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd"> <div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Popover</h6> <h6 class="c-grey-900">Popover</h6>
<div class="mT-30"> <div class="mT-30">
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-lg btn-danger btn-color" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div> </div>
</div> </div>
</div> </div>
@ -760,16 +758,16 @@
<div class="bgc-white p-20 bd"> <div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Tootips</h6> <h6 class="c-grey-900">Tootips</h6>
<div class="mT-30"> <div class="mT-30">
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
<button type="button" class="btn btn-primary btn-color" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top Tooltip on top
</button> </button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
<button type="button" class="btn btn-secondary btn-color" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right Tooltip on right
</button> </button>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
<button type="button" class="btn btn-success btn-color" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom Tooltip on bottom
</button> </button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
<button type="button" class="btn btn-danger btn-color" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left Tooltip on left
</button> </button>
</div> </div>
@ -781,7 +779,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 4
- 4
src/vector-maps.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -531,7 +531,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 1
- 0
webpack/plugins/htmlPlugin.js View File

@ -22,6 +22,7 @@ const titles = {
'404': '404', '404': '404',
'500': '500', '500': '500',
'basic-table': 'Basic Table', 'basic-table': 'Basic Table',
'test': 'Test',
}; };
module.exports = Object.keys(titles).map(title => { module.exports = Object.keys(titles).map(title => {


+ 1
- 1
webpack/plugins/internal.js View File

@ -48,7 +48,7 @@ plugins.push(
$: 'jquery', $: 'jquery',
jQuery: 'jquery', jQuery: 'jquery',
'window.jQuery': 'jquery', 'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
// Popper: ['popper.js', 'default'],
}) })
); );


Write Preview
Loading…
Cancel
Save