Removed Bootstrap classes (#1123)

* Modal: removed Bootstrap classes * Backdrop: removed Bootstrap classes * Stepper: removed Bootstrap classes * Modal: rename bs components and fix animations * Tooltip: added Tailwind animations and fix font * Tooltip: fix commented code * Tooltip: fix for Popover styling * Popover: remove BS classes * Offcanvas: fix working with Backdrop * Manipulator: add helper function for many classes * Backdrop: add shortcut for adding many classes * Change helper function name * Animations: added keyframes Co-authored-by: m.trochonowicz <m.trochonowicz@mdbootstrap.com>
mdbootstrap · Dec 6, 2022 · 7f96c22 · 7f96c22
1 parent a7916a5
commit 7f96c22
Show file tree

Hide file tree

Showing 12 changed files with 720 additions and 320 deletions.
diff --git a/demo/sites/bs/modal.html b/demo/sites/bs/modal.html
diff --git a/demo/sites/bs/popover.html b/demo/sites/bs/popover.html
@@ -30,9 +30,9 @@
       <button
         type="button"
         class="px-7 py-3 bg-red-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-title="Popover title"
-        data-bs-content="And here's some amazing content. It's very engaging. Right?"
+        data-te-toggle="popover"
+        data-te-title="Popover title"
+        data-te-content="And here's some amazing content. It's very engaging. Right?"
       >
         Click to toggle popover
       </button>
@@ -44,36 +44,36 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-placement="top"
-        data-bs-content="Top popover"
+        data-te-toggle="popover"
+        data-te-placement="top"
+        data-te-content="Top popover"
       >
         Popover on top
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-placement="right"
-        data-bs-content="Right popover"
+        data-te-toggle="popover"
+        data-te-placement="right"
+        data-te-content="Right popover"
       >
         Popover on right
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-placement="bottom"
-        data-bs-content="Bottom popover"
+        data-te-toggle="popover"
+        data-te-placement="bottom"
+        data-te-content="Bottom popover"
       >
         Popover on bottom
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="popover"
-        data-bs-placement="left"
-        data-bs-content="Left popover"
+        data-te-toggle="popover"
+        data-te-placement="left"
+        data-te-content="Left popover"
       >
         Popover on left
       </button>
@@ -86,10 +86,10 @@
         tabindex="0"
         class="px-7 py-3 bg-red-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out"
         role="button"
-        data-bs-toggle="popover"
-        data-bs-trigger="focus"
+        data-te-toggle="popover"
+        data-te-trigger="focus"
         title="Dismissible popover"
-        data-bs-content="And here's some amazing content. It's very engaging. Right?"
+        data-te-content="And here's some amazing content. It's very engaging. Right?"
         >Dismissible popover</a
       >
 
@@ -100,9 +100,9 @@
       <span
         class="inline-block"
         tabindex="0"
-        data-bs-toggle="popover"
-        data-bs-trigger="hover focus"
-        data-bs-content="Disabled popover"
+        data-te-toggle="popover"
+        data-te-trigger="hover focus"
+        data-te-content="Disabled popover"
       >
         <button
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md focus:outline-none focus:ring-0 transition duration-150 ease-in-out pointer-events-none opacity-60"
@@ -126,7 +126,7 @@
     <!-- Custom scripts -->
     <script>
       var popoverTriggerList = [].slice.call(
-        document.querySelectorAll('[data-bs-toggle="popover"]')
+        document.querySelectorAll('[data-te-toggle="popover"]')
       );
       var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
         return new Popover(popoverTriggerEl);

diff --git a/demo/sites/bs/tooltip.html b/demo/sites/bs/tooltip.html
@@ -31,7 +31,7 @@
         <a
           href="#"
           class="text-blue-600 hover:text-blue-700 transition duration-150 ease-in-out"
-          data-bs-toggle="tooltip"
+          data-te-toggle="tooltip"
           title="Hi! I'm tooltip"
           >tooltip</a
         >
@@ -44,35 +44,35 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
+        data-te-toggle="tooltip"
+        data-te-placement="top"
         title="Tooltip on top"
       >
         Tooltip on top
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-placement="right"
+        data-te-toggle="tooltip"
+        data-te-placement="right"
         title="Tooltip on right"
       >
         Tooltip on right
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-placement="bottom"
+        data-te-toggle="tooltip"
+        data-te-placement="bottom"
         title="Tooltip on bottom"
       >
         Tooltip on bottom
       </button>
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-placement="left"
+        data-te-toggle="tooltip"
+        data-te-placement="left"
         title="Tooltip on left"
       >
         Tooltip on left
@@ -85,8 +85,8 @@
       <button
         type="button"
         class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
-        data-bs-toggle="tooltip"
-        data-bs-html="true"
+        data-te-toggle="tooltip"
+        data-te-html="true"
         title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
       >
         Tooltip with html
@@ -96,7 +96,7 @@
       <br />
       <br />
 
-      <span class="inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
+      <span class="inline-block" tabindex="0" data-te-toggle="tooltip" title="Disabled tooltip">
         <button
           class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md focus:outline-none focus:ring-0 transition duration-150 ease-in-out pointer-events-none opacity-60"
           type="button"
@@ -121,7 +121,7 @@
     <!-- Custom scripts -->
     <script type="text/javascript">
       var tooltipTriggerList = [].slice.call(
-        document.querySelectorAll('[data-bs-toggle="tooltip"]')
+        document.querySelectorAll('[data-te-toggle="tooltip"]')
       );
       var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
         return new Tooltip(tooltipTriggerEl);

diff --git a/demo/sites/mdb/stepper.html b/demo/sites/mdb/stepper.html
@@ -28,31 +28,31 @@
     <br />
 
     <p class="mb-4">Basic example</p>
-    <ul class="stepper" data-mdb-stepper="stepper">
-      <li class="stepper-step stepper-active">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 1 </span>
-          <span class="stepper-head-text"> step1 </span>
+    <ul data-te-stepper-init class="flex justify-between relative p-0 m-0 w-100 list-none overflow-hidden transition-[height] duration-200 ease-in-out">
+      <li data-te-stepper-step-ref class="flex-auto w-[4.5rem]">
+        <div data-te-stepper-head-ref class="pl-2 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none after:flex-1 after:h-px after:w-100 after:ml-2 after:content-[''] after:bg-[#0000001a]">
+          <span data-te-stepper-head-icon-ref class="my-6 mx-2 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 1 </span>
+          <span data-te-stepper-head-text-ref class="font-medium after:flex after:text-[0.8rem] after:content-[data-content]"> step1 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="absolute w-100 p-4 block">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </div>
       </li>
-      <li class="stepper-step">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 2 </span>
-          <span class="stepper-head-text"> step2 </span>
+      <li data-te-stepper-step-ref class="flex-auto w-[4.5rem]">
+        <div data-te-stepper-head-ref class="flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none before:flex-1 before:h-px before:w-100 before:mr-2 before:content-[''] before:bg-[#0000001a] after:flex-1 after:h-px after:w-100 after:ml-2 after:content-[''] after:bg-[#0000001a]">
+          <span data-te-stepper-head-icon-ref class="my-6 mx-2 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 2 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content]"> step2 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="absolute w-100 p-4 left-0">
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </div>
       </li>
-      <li class="stepper-step">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 3 </span>
-          <span class="stepper-head-text"> step3 </span>
+      <li data-te-stepper-step-ref class="flex-auto w-[4.5rem]">
+        <div data-te-stepper-head-ref class="pr-2 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none before:flex-1 before:h-px before:w-100 before:mr-2 before:content-[''] before:bg-[#0000001a]">
+          <span data-te-stepper-head-icon-ref class="my-6 mx-2 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 3 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content]"> step3 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="absolute w-100 p-4 left-0">
           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         </div>
       </li>
@@ -63,32 +63,32 @@
     <br />
 
     <p class="mb-4">Vertical stepper</p>
-    <ul class="stepper" data-mdb-stepper="stepper" data-mdb-stepper-type="vertical">
-      <li class="stepper-step stepper-active">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 1 </span>
-          <span class="stepper-head-text"> step1 </span>
+    <ul class="relative p-0 m-0 w-100 list-none overflow-hidden transition-[height] duration-200 ease-in-out" data-te-stepper-init data-mdb-stepper-type="vertical">
+      <li data-te-stepper-step-ref class="relative h-fit after:absolute after:left-9 after:top-12 after:h-[calc(100%-2.45rem)] after:w-px after:mt-px after:content-[''] after:bg-[#0000001a]">
+        <div data-te-stepper-head-ref class="p-6 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none">
+          <span data-te-stepper-head-icon-ref class="mr-3 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 1 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content] after:absolute"> step1 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="overflow-hidden ps-1 pr-6 pb-6 pl-[3.75rem] transition-[height, margin-bottom, padding-top, padding-bottom] duration-300 ease-in-out left-0">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
           aliqua.
         </div>
       </li>
-      <li class="stepper-step">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 2 </span>
-          <span class="stepper-head-text"> step2 </span>
+      <li data-te-stepper-step-ref class="relative h-fit after:absolute after:left-9 after:top-12 after:h-[calc(100%-2.45rem)] after:w-px after:mt-px after:content-[''] after:bg-[#0000001a]">
+        <div data-te-stepper-head-ref class="p-6 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none">
+          <span data-te-stepper-head-icon-ref class="mr-3 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 2 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content] after:absolute"> step2 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="overflow-hidden ps-1 pr-6 pb-6 pl-[3.75rem] transition-[height, margin-bottom, padding-top, padding-bottom] duration-300 ease-in-out left-0">
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </div>
       </li>
-      <li class="stepper-step">
-        <div class="stepper-head">
-          <span class="stepper-head-icon"> 3 </span>
-          <span class="stepper-head-text"> step3 </span>
+      <li data-te-stepper-step-ref class="relative h-fit">
+        <div data-te-stepper-head-ref class="p-6 flex items-center no-underline cursor-pointer leading-[1.3rem] hover:bg-[#dbdbdb] focus:outline-none">
+          <span data-te-stepper-head-icon-ref class="mr-3 flex justify-center items-center text-white bg-gray-500 rounded-full text-sm w-6 h-6"> 3 </span>
+          <span data-te-stepper-head-text-ref class="after:flex after:text-[0.8rem] after:content-[data-content] after:absolute"> step3 </span>
         </div>
-        <div class="stepper-content">
+        <div data-te-stepper-content-ref class="overflow-hidden ps-1 pr-6 pb-6 pl-[3.75rem] transition-[height, margin-bottom, padding-top, padding-bottom] duration-300 ease-in-out left-0">
           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         </div>
       </li>